Merge pull request #259 from makeplane/stage-release-develop

release: Stage Release

apiserver/plane/api/views/oauth.py

@@ -34,7 +34,6 @@ def get_tokens_for_user(user):
 
 def validate_google_token(token, client_id):
     try:
-
         id_info = id_token.verify_oauth2_token(
             token, google_auth_request.Request(), client_id
         )
@@ -106,9 +105,19 @@ def get_user_data(access_token: str) -> dict:
 
     resp = requests.get(url=url, headers=headers)
 
-    userData = resp.json()
+    user_data = resp.json()
 
-    return userData
+    response = requests.get(
+        url="https://api.github.com/user/emails", headers=headers
+    ).json()
+
+    [
+        user_data.update({"email": item.get("email")})
+        for item in response
+        if item.get("primary") is True
+    ]
+
+    return user_data
 
 
 class OauthEndpoint(BaseAPIView):
@@ -116,7 +125,6 @@ class OauthEndpoint(BaseAPIView):
 
     def post(self, request):
         try:
-
             medium = request.data.get("medium", False)
             id_token = request.data.get("credential", False)
             client_id = request.data.get("clientId", False)
@@ -138,7 +146,6 @@ class OauthEndpoint(BaseAPIView):
 
             email = data.get("email", None)
             if email == None:
-
                 return Response(
                     {
                         "error": "Something went wrong. Please try again later or contact the support team."
@@ -153,7 +160,6 @@ class OauthEndpoint(BaseAPIView):
                 mobile_number = uuid.uuid4().hex
                 email_verified = True
             else:
-
                 return Response(
                     {
                         "error": "Something went wrong. Please try again later or contact the support team."

apps/app/components/account/github-login-button.tsx

@@ -34,7 +34,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
 
   return (
     <Link
-      href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}`}
+      href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
     >
       <button className="flex w-full items-center rounded bg-black px-3 py-2 text-sm text-white opacity-90 duration-300 hover:opacity-100">
         <Image

apps/app/components/core/board-view/all-boards.tsx

@@ -3,7 +3,6 @@ import { DragDropContext, DropResult } from "react-beautiful-dnd";
 // hooks
 import useIssueView from "hooks/use-issue-view";
 // components
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { SingleBoard } from "components/core/board-view/single-board";
 // types
 import { IIssue, IProjectMember, IState, UserAuth } from "types";

apps/app/components/core/bulk-delete-issues-modal.tsx

@@ -148,12 +148,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
                         "delete_issue_ids",
                         selectedIssues.filter((i) => i !== val)
                       );
-                    else {
+                    else setValue("delete_issue_ids", [...selectedIssues, val]);
-                      const newToDelete = selectedIssues;
-                      newToDelete.push(val);
-
-                      setValue("delete_issue_ids", newToDelete);
-                    }
                   }}
                 >
                   <div className="relative m-1">

apps/app/components/core/issues-view.tsx

@@ -14,17 +14,12 @@ import modulesService from "services/modules.service";
 // hooks
 import useIssueView from "hooks/use-issue-view";
 // components
-import { AllLists, AllBoards, ExistingIssuesListModal } from "components/core";
+import { AllLists, AllBoards } from "components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+// helpers
+import { getStatesList } from "helpers/state.helper";
 // types
-import {
+import { CycleIssueResponse, IIssue, IssueResponse, ModuleIssueResponse, UserAuth } from "types";
-  CycleIssueResponse,
-  IIssue,
-  IssueResponse,
-  IState,
-  ModuleIssueResponse,
-  UserAuth,
-} from "types";
 // fetch-keys
 import {
   CYCLE_ISSUES,
@@ -68,12 +63,13 @@ export const IssuesView: React.FC<Props> = ({
 
   const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
 
-  const { data: states } = useSWR<IState[]>(
+  const { data: stateGroups } = useSWR(
     workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
     workspaceSlug
       ? () => stateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
+  const states = getStatesList(stateGroups ?? {});
 
   const { data: members } = useSWR(
     projectId ? PROJECT_MEMBERS(projectId as string) : null,

apps/app/components/core/sidebar/sidebar-progress-stats.tsx

@@ -0,0 +1,184 @@
+import React from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// headless ui
+import { Tab } from "@headlessui/react";
+// services
+import issuesServices from "services/issues.service";
+import projectService from "services/project.service";
+// components
+import SingleProgressStats from "components/core/sidebar/single-progress-stats";
+// ui
+import { Avatar } from "components/ui";
+// icons
+import User from "public/user.png";
+// types
+import { IIssue, IIssueLabels } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
+// types
+type Props = {
+  groupedIssues: any;
+  issues: IIssue[];
+};
+
+const stateGroupColours: {
+  [key: string]: string;
+} = {
+  backlog: "#3f76ff",
+  unstarted: "#ff9e9e",
+  started: "#d687ff",
+  cancelled: "#ff5353",
+  completed: "#096e8d",
+};
+
+const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  const { data: issueLabels } = useSWR<IIssueLabels[]>(
+    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(workspaceSlug as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+  return (
+    <div className="flex flex-col items-center justify-center w-full gap-2 ">
+      <Tab.Group>
+        <Tab.List
+          as="div"
+          className="flex items-center justify-between w-full rounded bg-gray-100 text-xs"
+        >
+          <Tab
+            className={({ selected }) =>
+              `w-1/2 rounded py-1 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
+            }
+          >
+            Assignees
+          </Tab>
+          <Tab
+            className={({ selected }) =>
+              `w-1/2 rounded py-1 ${selected ? "bg-gray-300 font-semibold" : "hover:bg-gray-200 "}`
+            }
+          >
+            Labels
+          </Tab>
+          <Tab
+            className={({ selected }) =>
+              `w-1/2 rounded py-1 ${selected ? "bg-gray-300 font-semibold" : "hover:bg-gray-200 "}`
+            }
+          >
+            States
+          </Tab>
+        </Tab.List>
+        <Tab.Panels className="flex items-center justify-between  w-full">
+          <Tab.Panel as="div" className="w-full flex flex-col ">
+            {members?.map((member, index) => {
+              const totalArray = issues?.filter((i) => i.assignees?.includes(member.member.id));
+              const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
+              if (totalArray.length > 0) {
+                return (
+                  <SingleProgressStats
+                    key={index}
+                    title={
+                      <>
+                        <Avatar user={member.member} />
+                        <span>{member.member.first_name}</span>
+                      </>
+                    }
+                    completed={completeArray.length}
+                    total={totalArray.length}
+                  />
+                );
+              }
+            })}
+            {issues?.filter((i) => i.assignees?.length === 0).length > 0 ? (
+              <SingleProgressStats
+                title={
+                  <>
+                    <div className="h-5 w-5 rounded-full border-2 border-white bg-white">
+                      <Image
+                        src={User}
+                        height="100%"
+                        width="100%"
+                        className="rounded-full"
+                        alt="User"
+                      />
+                    </div>
+                    <span>No assignee</span>
+                  </>
+                }
+                completed={
+                  issues?.filter(
+                    (i) => i.state_detail.group === "completed" && i.assignees?.length === 0
+                  ).length
+                }
+                total={issues?.filter((i) => i.assignees?.length === 0).length}
+              />
+            ) : (
+              ""
+            )}
+          </Tab.Panel>
+          <Tab.Panel as="div" className="w-full flex flex-col ">
+            {issueLabels?.map((issue, index) => {
+              const totalArray = issues?.filter((i) => i.labels?.includes(issue.id));
+              const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
+              if (totalArray.length > 0) {
+                return (
+                  <SingleProgressStats
+                    key={index}
+                    title={
+                      <>
+                        <span
+                          className="block h-2 w-2 rounded-full "
+                          style={{
+                            backgroundColor: issue.color,
+                          }}
+                        />
+                        <span className="text-xs capitalize">{issue.name}</span>
+                      </>
+                    }
+                    completed={completeArray.length}
+                    total={totalArray.length}
+                  />
+                );
+              }
+            })}
+          </Tab.Panel>
+          <Tab.Panel as="div" className="w-full flex flex-col ">
+            {Object.keys(groupedIssues).map((group, index) => (
+              <SingleProgressStats
+                key={index}
+                title={
+                  <>
+                    <span
+                      className="block h-2 w-2 rounded-full "
+                      style={{
+                        backgroundColor: stateGroupColours[group],
+                      }}
+                    />
+                    <span className="text-xs capitalize">{group}</span>
+                  </>
+                }
+                completed={groupedIssues[group].length}
+                total={issues.length}
+              />
+            ))}
+          </Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
+    </div>
+  );
+};
+
+export default SidebarProgressStats;

apps/app/components/core/sidebar/single-progress-stats.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import { CircularProgressbar } from "react-circular-progressbar";
+
+type TSingleProgressStatsProps = {
+  title: any;
+  completed: number;
+  total: number;
+};
+
+const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({ title, completed, total }) => (
+  <>
+    <div className="flex items-center justify-between w-full py-3 text-xs border-b-[1px] border-gray-200">
+      <div className="flex items-center justify-start w-1/2 gap-2">{title}</div>
+      <div className="flex items-center justify-end w-1/2 gap-1 px-2">
+        <div className="flex h-5 justify-center items-center gap-1 ">
+          <span className="h-4 w-4 ">
+            <CircularProgressbar value={completed} maxValue={total} strokeWidth={10} />
+          </span>
+          <span className="w-8 text-right">{Math.floor((completed / total) * 100)}%</span>
+        </div>
+        <span>of</span>
+        <span>{total}</span>
+      </div>
+    </div>
+  </>
+);
+
+export default SingleProgressStats;

apps/app/components/issues/select/state.tsx

@@ -10,6 +10,8 @@ import stateService from "services/state.service";
 import { Squares2X2Icon, PlusIcon } from "@heroicons/react/24/outline";
 // icons
 import { Combobox, Transition } from "@headlessui/react";
+// helpers
+import { getStatesList } from "helpers/state.helper";
 // fetch keys
 import { STATE_LIST } from "constants/fetch-keys";
 
@@ -27,12 +29,13 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { data: states } = useSWR(
+  const { data: stateGroups } = useSWR(
     workspaceSlug && projectId ? STATE_LIST(projectId) : null,
     workspaceSlug && projectId
       ? () => stateService.getStates(workspaceSlug as string, projectId)
       : null
   );
+  const states = getStatesList(stateGroups ?? {});
 
   const options = states?.map((state) => ({
     value: state.id,

apps/app/components/issues/sidebar-select/blocked.tsx

@@ -183,12 +183,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
                             "blocked_issue_ids",
                             selectedIssues.filter((i) => i !== val)
                           );
-                        else {
+                        else setValue("blocked_issue_ids", [...selectedIssues, val]);
-                          const newBlocked = selectedIssues;
-                          newBlocked.push(val);
-
-                          setValue("blocked_issue_ids", newBlocked);
-                        }
                       }}
                     >
                       <div className="relative m-1">

apps/app/components/issues/sidebar-select/blocker.tsx

@@ -184,12 +184,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
                           "blocker_issue_ids",
                           selectedIssues.filter((i) => i !== val)
                         );
-                      else {
+                      else setValue("blocker_issue_ids", [...selectedIssues, val]);
-                        const newBlockers = selectedIssues;
-                        newBlockers.push(val);
-
-                        setValue("blocker_issue_ids", newBlockers);
-                      }
                     }}
                   >
                     <div className="relative m-1">

apps/app/components/issues/sidebar-select/state.tsx

@@ -4,13 +4,16 @@ import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
+// react-hook-form
 import { Control, Controller } from "react-hook-form";
 // services
-import { Squares2X2Icon } from "@heroicons/react/24/outline";
 import stateService from "services/state.service";
 // ui
 import { Spinner, CustomSelect } from "components/ui";
 // icons
+import { Squares2X2Icon } from "@heroicons/react/24/outline";
+// helpers
+import { getStatesList } from "helpers/state.helper";
 // types
 import { IIssue, UserAuth } from "types";
 // constants
@@ -26,12 +29,13 @@ export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, us
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { data: states } = useSWR(
+  const { data: stateGroups } = useSWR(
     workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
     workspaceSlug && projectId
       ? () => stateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
+  const states = getStatesList(stateGroups ?? {});
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 

apps/app/components/issues/sub-issues-list-modal.tsx

@@ -44,7 +44,7 @@ export const SubIssuesListModal: React.FC<Props> = ({ isOpen, handleClose, paren
       : issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ??
         [];
 
-  const handleCommandPaletteClose = () => {
+  const handleModalClose = () => {
     handleClose();
     setQuery("");
   };
@@ -93,7 +93,7 @@ export const SubIssuesListModal: React.FC<Props> = ({ isOpen, handleClose, paren
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
-      <Dialog as="div" className="relative z-20" onClose={handleCommandPaletteClose}>
+      <Dialog as="div" className="relative z-20" onClose={handleModalClose}>
         <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"

apps/app/components/issues/view-select/state.tsx

@@ -8,8 +8,9 @@ import stateService from "services/state.service";
 import { CustomSelect } from "components/ui";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
+import { getStatesList } from "helpers/state.helper";
 // types
-import { IIssue, IState } from "types";
+import { IIssue } from "types";
 // fetch-keys
 import { STATE_LIST } from "constants/fetch-keys";
 
@@ -29,12 +30,11 @@ export const ViewStateSelect: React.FC<Props> = ({
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { data: states } = useSWR<IState[]>(
+  const { data: stateGroups } = useSWR(
-    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
+    workspaceSlug && projectId ? STATE_LIST(issue.project) : null,
-    workspaceSlug
+    workspaceSlug ? () => stateService.getStates(workspaceSlug as string, issue.project) : null
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
   );
+  const states = getStatesList(stateGroups ?? {});
 
   return (
     <CustomSelect

apps/app/components/labels/index.ts

@@ -0,0 +1,2 @@
+export * from "./labels-list-modal";
+export * from "./single-label";

apps/app/components/labels/labels-list-modal.tsx

@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// headless ui
+import { Combobox, Dialog, Transition } from "@headlessui/react";
+// icons
+import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+// services
+import issuesService from "services/issues.service";
+// types
+import { IIssueLabels } from "types";
+// constants
+import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  parent: IIssueLabels | undefined;
+};
+
+export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }) => {
+  const [query, setQuery] = useState("");
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
+    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const filteredLabels: IIssueLabels[] =
+    query === ""
+      ? issueLabels ?? []
+      : issueLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase())) ?? [];
+
+  const handleModalClose = () => {
+    handleClose();
+    setQuery("");
+  };
+
+  const addChildLabel = async (label: IIssueLabels) => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate(
+      (prevData) =>
+        prevData?.map((l) => {
+          if (l.id === label.id) return { ...l, parent: parent?.id ?? "" };
+
+          return l;
+        }),
+      false
+    );
+
+    await issuesService
+      .patchIssueLabel(workspaceSlug as string, projectId as string, label.id, {
+        parent: parent?.id ?? "",
+      })
+      .then((res) => {
+        console.log(res);
+        mutate();
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
+      <Dialog as="div" className="relative z-20" onClose={handleModalClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
+          >
+            <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
+              <Combobox>
+                <div className="relative m-1">
+                  <MagnifyingGlassIcon
+                    className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
+                    aria-hidden="true"
+                  />
+                  <Combobox.Input
+                    className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
+                    placeholder="Search..."
+                    onChange={(e) => setQuery(e.target.value)}
+                  />
+                </div>
+
+                <Combobox.Options
+                  static
+                  className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
+                >
+                  {filteredLabels.length > 0 && (
+                    <>
+                      <li className="p-2">
+                        {query === "" && (
+                          <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
+                            Labels
+                          </h2>
+                        )}
+                        <ul className="text-sm text-gray-700">
+                          {filteredLabels.map((label) => {
+                            const children = issueLabels?.filter((l) => l.parent === label.id);
+
+                            if (
+                              (label.parent === "" || label.parent === null) && // issue does not have any other parent
+                              label.id !== parent?.id && // issue is not itself
+                              children?.length === 0 // issue doesn't have any othe children
+                            )
+                              return (
+                                <Combobox.Option
+                                  key={label.id}
+                                  value={{
+                                    name: label.name,
+                                  }}
+                                  className={({ active }) =>
+                                    `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
+                                      active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
+                                    }`
+                                  }
+                                  onClick={() => {
+                                    addChildLabel(label);
+                                    handleClose();
+                                  }}
+                                >
+                                  <span
+                                    className="block flex-shrink-0 h-1.5 w-1.5 rounded-full"
+                                    style={{
+                                      backgroundColor: label.color,
+                                    }}
+                                  />
+                                  {label.name}
+                                </Combobox.Option>
+                              );
+                          })}
+                        </ul>
+                      </li>
+                    </>
+                  )}
+                </Combobox.Options>
+
+                {query !== "" && filteredLabels.length === 0 && (
+                  <div className="py-14 px-6 text-center sm:px-14">
+                    <RectangleStackIcon
+                      className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
+                      aria-hidden="true"
+                    />
+                    <p className="mt-4 text-sm text-gray-900">
+                      We couldn{"'"}t find any label with that term. Please try again.
+                    </p>
+                  </div>
+                )}
+              </Combobox>
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

apps/app/components/labels/single-label.tsx

@@ -0,0 +1,171 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Disclosure, Transition } from "@headlessui/react";
+// services
+import issuesService from "services/issues.service";
+// components
+import { LabelsListModal } from "components/labels";
+// ui
+import { CustomMenu } from "components/ui";
+// icons
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssueLabels } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+
+type Props = {
+  label: IIssueLabels;
+  issueLabels: IIssueLabels[];
+  editLabel: (label: IIssueLabels) => void;
+  handleLabelDelete: (labelId: string) => void;
+};
+
+export const SingleLabel: React.FC<Props> = ({
+  label,
+  issueLabels,
+  editLabel,
+  handleLabelDelete,
+}) => {
+  const [labelsListModal, setLabelsListModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const children = issueLabels?.filter((l) => l.parent === label.id);
+
+  const removeFromGroup = (label: IIssueLabels) => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate<IIssueLabels[]>(
+      PROJECT_ISSUE_LABELS(projectId as string),
+      (prevData) =>
+        prevData?.map((l) => {
+          if (l.id === label.id) return { ...l, parent: null };
+
+          return l;
+        }),
+      false
+    );
+
+    issuesService
+      .patchIssueLabel(workspaceSlug as string, projectId as string, label.id, {
+        parent: null,
+      })
+      .then((res) => {
+        mutate(PROJECT_ISSUE_LABELS(projectId as string));
+      });
+  };
+
+  return (
+    <>
+      <LabelsListModal
+        isOpen={labelsListModal}
+        handleClose={() => setLabelsListModal(false)}
+        parent={label}
+      />
+      {children && children.length === 0 ? (
+        label.parent === "" || !label.parent ? (
+          <div className="gap-2 space-y-3 divide-y rounded-md border p-3 md:w-2/3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <span
+                  className="h-3 w-3 flex-shrink-0 rounded-full"
+                  style={{
+                    backgroundColor: label.color,
+                  }}
+                />
+                <h6 className="text-sm">{label.name}</h6>
+              </div>
+              <CustomMenu ellipsis>
+                <CustomMenu.MenuItem onClick={() => setLabelsListModal(true)}>
+                  Convert to group
+                </CustomMenu.MenuItem>
+                <CustomMenu.MenuItem onClick={() => editLabel(label)}>Edit</CustomMenu.MenuItem>
+                <CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
+                  Delete
+                </CustomMenu.MenuItem>
+              </CustomMenu>
+            </div>
+          </div>
+        ) : null
+      ) : (
+        <Disclosure as="div" className="relative z-20 rounded-md border p-3 text-gray-900 md:w-2/3">
+          {({ open }) => (
+            <>
+              <div className="flex items-center justify-between gap-2 cursor-pointer">
+                <Disclosure.Button>
+                  <div className="flex items-center gap-2">
+                    <span>
+                      <ChevronDownIcon
+                        className={`h-4 w-4 text-gray-500 ${!open ? "-rotate-90 transform" : ""}`}
+                      />
+                    </span>
+                    <h6 className="text-sm">{label.name}</h6>
+                  </div>
+                </Disclosure.Button>
+                <CustomMenu ellipsis>
+                  <CustomMenu.MenuItem onClick={() => setLabelsListModal(true)}>
+                    Add more labels
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={() => editLabel(label)}>Edit</CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
+                    Delete
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+              </div>
+              <Transition
+                show={open}
+                enter="transition duration-100 ease-out"
+                enterFrom="transform opacity-0"
+                enterTo="transform opacity-100"
+                leave="transition duration-75 ease-out"
+                leaveFrom="transform opacity-100"
+                leaveTo="transform opacity-0"
+              >
+                <Disclosure.Panel>
+                  <div className="mt-2 ml-4">
+                    {children.map((child) => (
+                      <div
+                        key={child.id}
+                        className="group pl-4 py-1 flex items-center justify-between rounded text-sm hover:bg-gray-100"
+                      >
+                        <h5 className="flex items-center gap-2">
+                          <span
+                            className="h-2 w-2 flex-shrink-0 rounded-full"
+                            style={{
+                              backgroundColor: child.color,
+                            }}
+                          />
+                          {child.name}
+                        </h5>
+                        <div className="opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
+                          <CustomMenu ellipsis>
+                            <CustomMenu.MenuItem onClick={() => removeFromGroup(child)}>
+                              Remove from group
+                            </CustomMenu.MenuItem>
+                            <CustomMenu.MenuItem onClick={() => editLabel(child)}>
+                              Edit
+                            </CustomMenu.MenuItem>
+                            <CustomMenu.MenuItem onClick={() => handleLabelDelete(child.id)}>
+                              Delete
+                            </CustomMenu.MenuItem>
+                          </CustomMenu>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </Disclosure.Panel>
+              </Transition>
+            </>
+          )}
+        </Disclosure>
+      )}
+    </>
+  );
+};

apps/app/components/modules/sidebar.tsx

@@ -7,6 +7,16 @@ import { mutate } from "swr";
 
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
+// icons
+import {
+  CalendarDaysIcon,
+  ChartPieIcon,
+  LinkIcon,
+  PlusIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+// progress-bar
+import { CircularProgressbar } from "react-circular-progressbar";
 // services
 import modulesService from "services/modules.service";
 // hooks
@@ -18,27 +28,19 @@ import {
   SidebarMembersSelect,
   SidebarStatusSelect,
 } from "components/modules";
-// progress-bar
+
-import { CircularProgressbar } from "react-circular-progressbar";
 import "react-circular-progressbar/dist/styles.css";
 // ui
 import { CustomDatePicker, Loader } from "components/ui";
-// icons
-import {
-  CalendarDaysIcon,
-  ChartPieIcon,
-  LinkIcon,
-  PlusIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 import { copyTextToClipboard } from "helpers/string.helper";
 import { groupBy } from "helpers/array.helper";
 // types
-import { IModule, ModuleIssueResponse } from "types";
+import { IIssue, IModule, ModuleIssueResponse } from "types";
 // fetch-keys
 import { MODULE_DETAILS } from "constants/fetch-keys";
+import SidebarProgressStats from "components/core/sidebar/sidebar-progress-stats";
 
 const defaultValues: Partial<IModule> = {
   lead: "",
@@ -49,6 +51,7 @@ const defaultValues: Partial<IModule> = {
 };
 
 type Props = {
+  issues: IIssue[];
   module?: IModule;
   isOpen: boolean;
   moduleIssues: ModuleIssueResponse[] | undefined;
@@ -56,6 +59,7 @@ type Props = {
 };
 
 export const ModuleDetailsSidebar: React.FC<Props> = ({
+  issues,
   module,
   isOpen,
   moduleIssues,
@@ -290,6 +294,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                 </div>
               </div>
             </div>
+            <div className="w-full">
+              <SidebarProgressStats issues={issues} groupedIssues={groupedIssues} />
+            </div>
           </>
         ) : (
           <Loader>

apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx

@@ -7,26 +7,29 @@ import { mutate } from "swr";
 
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// icons
+// react-circular-progressbar
-import { CalendarDaysIcon, ChartPieIcon, LinkIcon, UserIcon } from "@heroicons/react/24/outline";
-// services
-import cyclesService from "services/cycles.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { Loader, CustomDatePicker } from "components/ui";
-// progress-bar
 import { CircularProgressbar } from "react-circular-progressbar";
 import "react-circular-progressbar/dist/styles.css";
+// ui
+import { Loader, CustomDatePicker } from "components/ui";
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import cyclesService from "services/cycles.service";
+// components
+import SidebarProgressStats from "components/core/sidebar/sidebar-progress-stats";
+// icons
+import { CalendarDaysIcon, ChartPieIcon, LinkIcon, UserIcon } from "@heroicons/react/24/outline";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 import { groupBy } from "helpers/array.helper";
 // types
-import { CycleIssueResponse, ICycle } from "types";
+import { CycleIssueResponse, ICycle, IIssue } from "types";
 // fetch-keys
 import { CYCLE_DETAILS } from "constants/fetch-keys";
 
 type Props = {
+  issues: IIssue[];
   cycle: ICycle | undefined;
   isOpen: boolean;
   cycleIssues: CycleIssueResponse[];
@@ -37,7 +40,7 @@ const defaultValues: Partial<ICycle> = {
   end_date: new Date().toString(),
 };
 
-const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) => {
+const CycleDetailSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssues }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
 
@@ -219,6 +222,9 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
             </div>
             <div className="py-1" />
           </div>
+          <div className="w-full">
+            <SidebarProgressStats issues={issues} groupedIssues={groupedIssues} />
+          </div>
         </>
       ) : (
         <Loader>

apps/app/components/states/create-update-state-inline.tsx

@@ -15,7 +15,7 @@ import useToast from "hooks/use-toast";
 // ui
 import { Button, CustomSelect, Input } from "components/ui";
 // types
-import type { IState } from "types";
+import type { IState, StateResponse } from "types";
 // fetch-keys
 import { STATE_LIST } from "constants/fetch-keys";
 // constants
@@ -85,7 +85,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
       await stateService
         .createState(workspaceSlug, projectId, { ...payload })
         .then((res) => {
-          mutate<IState[]>(STATE_LIST(projectId), (prevData) => [...(prevData ?? []), res]);
+          mutate(STATE_LIST(projectId));
           handleClose();
 
           setToastAlert({

apps/app/components/states/create-update-state-modal.tsx

@@ -81,7 +81,7 @@ export const CreateUpdateStateModal: React.FC<Props> = ({
       await stateService
         .createState(workspaceSlug as string, projectId, payload)
         .then((res) => {
-          mutate<IState[]>(STATE_LIST(projectId), (prevData) => [...(prevData ?? []), res], false);
+          mutate(STATE_LIST(projectId));
           onClose();
         })
         .catch((err) => {
@@ -95,19 +95,7 @@ export const CreateUpdateStateModal: React.FC<Props> = ({
       await stateService
         .updateState(workspaceSlug as string, projectId, data.id, payload)
         .then((res) => {
-          mutate<IState[]>(
+          mutate(STATE_LIST(projectId));
-            STATE_LIST(projectId),
-            (prevData) => {
-              const newData = prevData?.map((item) => {
-                if (item.id === res.id) {
-                  return res;
-                }
-                return item;
-              });
-              return newData;
-            },
-            false
-          );
           onClose();
         })
         .catch((err) => {

apps/app/components/states/delete-state-modal.tsx

@@ -59,11 +59,7 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data }) =>
     await stateServices
       .deleteState(workspaceSlug as string, data.project, data.id)
       .then(() => {
-        mutate<IState[]>(
+        mutate(STATE_LIST(data.project));
-          STATE_LIST(data.project),
-          (prevData) => prevData?.filter((state) => state.id !== data?.id),
-          false
-        );
         handleClose();
 
         setToastAlert({

apps/app/helpers/state.helper.ts

@@ -0,0 +1,18 @@
+// types
+import { IState, StateResponse } from "types";
+
+export const orderStateGroups = (unorderedStateGroups: StateResponse) =>
+  Object.assign(
+    { backlog: [], unstarted: [], started: [], completed: [], cancelled: [] },
+    unorderedStateGroups
+  );
+
+export const getStatesList = (stateGroups: any): IState[] => {
+  // order the unordered state groups first
+  const orderedStateGroups = orderStateGroups(stateGroups);
+
+  // extract states from the groups and return them
+  return Object.keys(orderedStateGroups)
+    .map((group) => [...orderedStateGroups[group].map((state: IState) => state)])
+    .flat();
+};

apps/app/hooks/use-issue-view.tsx

@@ -10,6 +10,7 @@ import stateService from "services/state.service";
 import { issueViewContext } from "contexts/issue-view.context";
 // helpers
 import { groupBy, orderArrayBy } from "helpers/array.helper";
+import { getStatesList } from "helpers/state.helper";
 // types
 import { IIssue, IState } from "types";
 // fetch-keys
@@ -35,12 +36,13 @@ const useIssueView = (projectIssues: IIssue[]) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { data: states } = useSWR(
+  const { data: stateGroups } = useSWR(
     workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
     workspaceSlug && projectId
       ? () => stateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
+  const states = getStatesList(stateGroups ?? {});
 
   let groupedByIssues: {
     [key: string]: IIssue[];

apps/app/hooks/use-my-issues-filter.tsx

@@ -8,6 +8,7 @@ import userService from "services/user.service";
 import useUser from "hooks/use-user";
 // helpers
 import { groupBy } from "helpers/array.helper";
+import { getStatesList } from "helpers/state.helper";
 // types
 import { Properties, NestedKeyOf, IIssue } from "types";
 // fetch-keys
@@ -36,12 +37,13 @@ const useMyIssuesProperties = (issues?: IIssue[]) => {
 
   const { user } = useUser();
 
-  const { data: states } = useSWR(
+  const { data: stateGroups } = useSWR(
     workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
     workspaceSlug && projectId
       ? () => stateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
+  const states = getStatesList(stateGroups ?? {});
 
   useEffect(() => {
     if (!user) return;

apps/app/next.config.js

@@ -1,10 +1,4 @@
-// This file sets a custom webpack configuration to use your Next.js app
-// with Sentry.
-// https://nextjs.org/docs/api-reference/next.config.js/introduction
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 const { withSentryConfig } = require("@sentry/nextjs");
-
-/** @type {import('next').NextConfig} */
 const path = require("path");
 
 const nextConfig = {
@@ -18,34 +12,10 @@ const nextConfig = {
     ],
   },
   output: "standalone",
-  experimental: {
-    outputFileTracingRoot: path.join(__dirname, "../../"),
-    transpilePackages: ["components/ui"],
-  },
 };
 
-module.exports = nextConfig;
+if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
-
+  module.exports = withSentryConfig(nextConfig, { silent: true }, { hideSourceMaps: true });
-// const withPWA = require("next-pwa")({
+} else {
-//   dest: "public",
+  module.exports = nextConfig;
-// });
+}
-
-// module.exports = withPWA({
-//   pwa: {
-//     dest: "public",
-//     register: true,
-//     skipWaiting: true,
-//   },
-//   reactStrictMode: false,
-//   swcMinify: true,
-//   images: {
-//     domains: ["vinci-web.s3.amazonaws.com"],
-//   },
-//   output: "standalone",
-//   experimental: {
-//     outputFileTracingRoot: path.join(__dirname, "../../"),
-//     transpilePackages: ["components/ui"],
-//   },
-// });
-
-module.exports = withSentryConfig(module.exports, { silent: true }, { hideSourcemaps: true });

apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx

@@ -3,7 +3,10 @@ import React, { useState } from "react";
 import { useRouter } from "next/router";
 
 import useSWR, { mutate } from "swr";
-
+import { NextPageContext } from "next";
+// icons
+import { ArrowLeftIcon, ListBulletIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { CyclesIcon } from "components/icons";
 // lib
 import { requiredAdmin, requiredAuth } from "lib/auth";
 // layouts
@@ -11,7 +14,6 @@ import AppLayout from "layouts/app-layout";
 // contexts
 import { IssueViewContextProvider } from "contexts/issue-view.context";
 // components
-import { CreateUpdateIssueModal } from "components/issues";
 import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
 import CycleDetailSidebar from "components/project/cycles/cycle-detail-sidebar";
 // services
@@ -21,12 +23,8 @@ import projectService from "services/project.service";
 // ui
 import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { ArrowLeftIcon, ListBulletIcon, PlusIcon } from "@heroicons/react/24/outline";
-import { CyclesIcon } from "components/icons";
 // types
-import { CycleIssueResponse, IIssue, SelectIssue, UserAuth } from "types";
+import { CycleIssueResponse, UserAuth } from "types";
-import { NextPageContext } from "next";
 // fetch-keys
 import {
   CYCLE_ISSUES,
@@ -37,15 +35,9 @@ import {
 } from "constants/fetch-keys";
 
 const SingleCycle: React.FC<UserAuth> = (props) => {
-  const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
-  const [selectedIssues, setSelectedIssues] = useState<SelectIssue>();
   const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
   const [cycleSidebar, setCycleSidebar] = useState(true);
 
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | null
-  >(null);
-
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
 
@@ -95,6 +87,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
           )
       : null
   );
+
   const cycleIssuesArray = cycleIssues?.map((issue) => ({
     ...issue.issue_detail,
     sub_issues_count: issue.sub_issues_count,
@@ -102,18 +95,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
     cycle: cycleId as string,
   }));
 
-  const openCreateIssueModal = (
-    issue?: IIssue,
-    actionType: "create" | "edit" | "delete" = "create"
-  ) => {
-    if (issue) {
-      setPreloadedData(null);
-      setSelectedIssues({ ...issue, actionType });
-    } else setSelectedIssues(null);
-
-    setIsIssueModalOpen(true);
-  };
-
   const openIssuesListModal = () => {
     setCycleIssuesListModal(true);
   };
@@ -134,16 +115,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
 
   return (
     <IssueViewContextProvider>
-      <CreateUpdateIssueModal
-        isOpen={isIssueModalOpen && selectedIssues?.actionType !== "delete"}
-        data={selectedIssues}
-        prePopulateData={
-          preloadedData
-            ? { cycle: cycleId as string, ...preloadedData }
-            : { cycle: cycleId as string, ...selectedIssues }
-        }
-        handleClose={() => setIsIssueModalOpen(false)}
-      />
       <ExistingIssuesListModal
         isOpen={cycleIssuesListModal}
         handleClose={() => setCycleIssuesListModal(false)}
@@ -224,7 +195,12 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
                   title="Create a new issue"
                   description="Click to create a new issue inside the cycle."
                   Icon={PlusIcon}
-                  action={openCreateIssueModal}
+                  action={() => {
+                    const e = new KeyboardEvent("keydown", {
+                      key: "c",
+                    });
+                    document.dispatchEvent(e);
+                  }}
                 />
                 <EmptySpaceItem
                   title="Add an existing issue"
@@ -241,6 +217,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
           </div>
         )}
         <CycleDetailSidebar
+          issues={cycleIssuesArray ?? []}
           cycle={cycleDetails}
           isOpen={cycleSidebar}
           cycleIssues={cycleIssues ?? []}

apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx

@@ -1,9 +1,17 @@
 import React, { useState } from "react";
 
 import { useRouter } from "next/router";
-
+import { NextPageContext } from "next";
 import useSWR, { mutate } from "swr";
 
+// icons
+import {
+  ArrowLeftIcon,
+  ListBulletIcon,
+  PlusIcon,
+  RectangleGroupIcon,
+  RectangleStackIcon,
+} from "@heroicons/react/24/outline";
 // lib
 import { requiredAdmin, requiredAuth } from "lib/auth";
 // services
@@ -20,14 +28,6 @@ import { DeleteModuleModal, ModuleDetailsSidebar } from "components/modules";
 // ui
 import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import {
-  ArrowLeftIcon,
-  ListBulletIcon,
-  PlusIcon,
-  RectangleGroupIcon,
-  RectangleStackIcon,
-} from "@heroicons/react/24/outline";
 // types
 import {
   IIssue,
@@ -37,7 +37,7 @@ import {
   SelectModuleType,
   UserAuth,
 } from "types";
-import { NextPageContext } from "next";
+
 // fetch-keys
 import {
   MODULE_DETAILS,
@@ -245,7 +245,12 @@ const SingleModule: React.FC<UserAuth> = (props) => {
                   title="Create a new issue"
                   description="Click to create a new issue inside the module."
                   Icon={PlusIcon}
-                  action={openCreateIssueModal}
+                  action={() => {
+                    const e = new KeyboardEvent("keydown", {
+                      key: "c",
+                    });
+                    document.dispatchEvent(e);
+                  }}
                 />
                 <EmptySpaceItem
                   title="Add an existing issue"
@@ -262,6 +267,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
           </div>
         )}
         <ModuleDetailsSidebar
+          issues={moduleIssuesArray ?? []}
           module={moduleDetails}
           isOpen={moduleSidebar}
           moduleIssues={moduleIssues}

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx

@@ -19,14 +19,14 @@ import { requiredAdmin } from "lib/auth";
 // layouts
 import AppLayout from "layouts/app-layout";
 // components
-import SingleLabel from "components/project/settings/single-label";
+import { SingleLabel } from "components/labels";
 // ui
 import { Button, Input, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssueLabels } from "types";
+import { IIssueLabels, UserAuth } from "types";
 import type { NextPageContext, NextPage } from "next";
 // fetch-keys
 import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS, WORKSPACE_DETAILS } from "constants/fetch-keys";
@@ -36,28 +36,15 @@ const defaultValues: Partial<IIssueLabels> = {
   color: "#ff0000",
 };
 
-type TLabelSettingsProps = {
+const LabelsSettings: NextPage<UserAuth> = (props) => {
-  isMember: boolean;
-  isOwner: boolean;
-  isViewer: boolean;
-  isGuest: boolean;
-};
-
-const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
   const { isMember, isOwner, isViewer, isGuest } = props;
 
-  const [newLabelForm, setNewLabelForm] = useState(false);
+  const [labelForm, setLabelForm] = useState(false);
   const [isUpdating, setIsUpdating] = useState(false);
   const [labelIdForUpdate, setLabelIdForUpdate] = useState<string | null>(null);
 
-  const {
+  const router = useRouter();
-    query: { workspaceSlug, projectId },
+  const { workspaceSlug, projectId } = router.query;
-  } = useRouter();
-
-  const { data: activeWorkspace } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
-  );
 
   const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
@@ -66,6 +53,13 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
       : null
   );
 
+  const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
+    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      : null
+  );
+
   const {
     register,
     handleSubmit,
@@ -76,37 +70,37 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
     watch,
   } = useForm<IIssueLabels>({ defaultValues });
 
-  const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
+  const newLabel = () => {
-    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    reset();
-    workspaceSlug && projectId
+    setIsUpdating(false);
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+    setLabelForm(true);
-      : null
-  );
-
-  const handleNewLabel: SubmitHandler<IIssueLabels> = async (formData) => {
-    if (!activeWorkspace || !projectDetails || isSubmitting) return;
-    await issuesService
-      .createIssueLabel(activeWorkspace.slug, projectDetails.id, formData)
-      .then((res) => {
-        reset(defaultValues);
-        mutate((prevData) => [...(prevData ?? []), res], false);
-        setNewLabelForm(false);
-      });
   };
 
   const editLabel = (label: IIssueLabels) => {
-    setNewLabelForm(true);
+    setLabelForm(true);
     setValue("color", label.color);
     setValue("name", label.name);
     setIsUpdating(true);
     setLabelIdForUpdate(label.id);
   };
 
-  const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
+  const handleLabelCreate: SubmitHandler<IIssueLabels> = async (formData) => {
-    if (!activeWorkspace || !projectDetails || isSubmitting) return;
+    if (!workspaceSlug || !projectDetails || isSubmitting) return;
 
     await issuesService
-      .patchIssueLabel(activeWorkspace.slug, projectDetails.id, labelIdForUpdate ?? "", formData)
+      .createIssueLabel(workspaceSlug as string, projectDetails.id, formData)
+      .then((res) => {
+        mutate((prevData) => [res, ...(prevData ?? [])], false);
+        reset(defaultValues);
+        setLabelForm(false);
+      });
+  };
+
+  const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
+    if (!workspaceSlug || !projectDetails || isSubmitting) return;
+
+    await issuesService
+      .patchIssueLabel(workspaceSlug as string, projectDetails.id, labelIdForUpdate ?? "", formData)
       .then((res) => {
         console.log(res);
         reset(defaultValues);
@@ -115,15 +109,15 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
             prevData?.map((p) => (p.id === labelIdForUpdate ? { ...p, ...formData } : p)),
           false
         );
-        setNewLabelForm(false);
+        setLabelForm(false);
       });
   };
 
   const handleLabelDelete = (labelId: string) => {
-    if (activeWorkspace && projectDetails) {
+    if (workspaceSlug && projectDetails) {
       mutate((prevData) => prevData?.filter((p) => p.id !== labelId), false);
       issuesService
-        .deleteIssueLabel(activeWorkspace.slug, projectDetails.id, labelId)
+        .deleteIssueLabel(workspaceSlug as string, projectDetails.id, labelId)
         .then((res) => {
           console.log(res);
         })
@@ -154,11 +148,7 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
         </div>
         <div className="flex items-center justify-between gap-2 md:w-2/3">
           <h4 className="text-md mb-1 leading-6 text-gray-900">Manage labels</h4>
-          <Button
+          <Button theme="secondary" className="flex items-center gap-x-1" onClick={newLabel}>
-            theme="secondary"
-            className="flex items-center gap-x-1"
-            onClick={() => setNewLabelForm(true)}
-          >
             <PlusIcon className="h-4 w-4" />
             New label
           </Button>
@@ -166,7 +156,7 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
         <div className="space-y-5">
           <div
             className={`flex items-center gap-2 rounded-md border p-3 md:w-2/3 ${
-              newLabelForm ? "" : "hidden"
+              labelForm ? "" : "hidden"
             }`}
           >
             <div className="h-8 w-8 flex-shrink-0">
@@ -227,7 +217,14 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
                 error={errors.name}
               />
             </div>
-            <Button type="button" theme="secondary" onClick={() => setNewLabelForm(false)}>
+            <Button
+              type="button"
+              theme="secondary"
+              onClick={() => {
+                reset();
+                setLabelForm(false);
+              }}
+            >
               Cancel
             </Button>
             {isUpdating ? (
@@ -239,7 +236,11 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
                 {isSubmitting ? "Updating" : "Update"}
               </Button>
             ) : (
-              <Button type="button" onClick={handleSubmit(handleNewLabel)} disabled={isSubmitting}>
+              <Button
+                type="button"
+                onClick={handleSubmit(handleLabelCreate)}
+                disabled={isSubmitting}
+              >
                 {isSubmitting ? "Adding" : "Add"}
               </Button>
             )}

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx

@@ -1,10 +1,9 @@
 import React, { useState } from "react";
 
 import { useRouter } from "next/router";
-import useSWR from "swr";
-import { PencilSquareIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
 
-import { IState } from "types";
+import useSWR from "swr";
+
 // services
 import stateService from "services/state.service";
 import projectService from "services/project.service";
@@ -17,22 +16,18 @@ import { CreateUpdateStateInline, DeleteStateModal, StateGroup } from "component
 // ui
 import { Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { PencilSquareIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
-import { groupBy } from "helpers/array.helper";
+import { getStatesList, orderStateGroups } from "helpers/state.helper";
 // types
+import { UserAuth } from "types";
 import type { NextPage, NextPageContext } from "next";
 // fetch-keys
 import { PROJECT_DETAILS, STATE_LIST } from "constants/fetch-keys";
 
-type TStateSettingsProps = {
+const StatesSettings: NextPage<UserAuth> = (props) => {
-  isMember: boolean;
-  isOwner: boolean;
-  isViewer: boolean;
-  isGuest: boolean;
-};
-
-const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
   const { isMember, isOwner, isViewer, isGuest } = props;
 
   const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
@@ -56,16 +51,14 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
       ? () => stateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
-
+  const orderedStateGroups = orderStateGroups(states ?? {});
-  const groupedStates: {
+  const statesList = getStatesList(orderedStateGroups ?? {});
-    [key: string]: IState[];
-  } = groupBy(states ?? [], "group");
 
   return (
     <>
       <DeleteStateModal
         isOpen={!!selectDeleteState}
-        data={states?.find((state) => state.id === selectDeleteState) ?? null}
+        data={statesList?.find((s) => s.id === selectDeleteState) ?? null}
         onClose={() => setSelectDeleteState(null)}
       />
       <AppLayout
@@ -88,60 +81,23 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
           </div>
           <div className="flex flex-col justify-between gap-4">
             {states && projectDetails ? (
-              Object.keys(groupedStates).map((key) => (
+              Object.keys(orderedStateGroups).map((key) => {
-                <div key={key}>
+                if (orderedStateGroups[key].length !== 0)
-                  <div className="mb-2 flex w-full justify-between md:w-2/3">
+                  return (
-                    <p className="text-md capitalize leading-6 text-gray-900">{key} states</p>
+                    <div key={key}>
-                    <button
+                      <div className="mb-2 flex w-full justify-between md:w-2/3">
-                      type="button"
+                        <p className="text-md capitalize leading-6 text-gray-900">{key} states</p>
-                      onClick={() => setActiveGroup(key as keyof StateGroup)}
+                        <button
-                      className="flex items-center gap-2 text-xs text-theme"
+                          type="button"
-                    >
+                          onClick={() => setActiveGroup(key as keyof StateGroup)}
-                      <PlusIcon className="h-3 w-3 text-theme" />
+                          className="flex items-center gap-2 text-xs text-theme"
-                      Add
-                    </button>
-                  </div>
-                  <div className="space-y-1 rounded-xl border p-1 md:w-2/3">
-                    {key === activeGroup && (
-                      <CreateUpdateStateInline
-                        projectId={projectDetails.id}
-                        onClose={() => {
-                          setActiveGroup(null);
-                          setSelectedState(null);
-                        }}
-                        workspaceSlug={workspaceSlug as string}
-                        data={null}
-                        selectedGroup={key as keyof StateGroup}
-                      />
-                    )}
-                    {groupedStates[key]?.map((state) =>
-                      state.id !== selectedState ? (
-                        <div
-                          key={state.id}
-                          className={`flex items-center justify-between gap-2 border-b bg-gray-50 p-3 ${
-                            Boolean(activeGroup !== key) ? "last:border-0" : ""
-                          }`}
                         >
-                          <div className="flex items-center gap-2">
+                          <PlusIcon className="h-3 w-3 text-theme" />
-                            <div
+                          Add
-                              className="h-3 w-3 flex-shrink-0 rounded-full"
+                        </button>
-                              style={{
+                      </div>
-                                backgroundColor: state.color,
+                      <div className="space-y-1 rounded-xl border p-1 md:w-2/3">
-                              }}
+                        {key === activeGroup && (
-                            />
-                            <h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
-                          </div>
-                          <div className="flex items-center gap-2">
-                            <button type="button" onClick={() => setSelectDeleteState(state.id)}>
-                              <TrashIcon className="h-4 w-4 text-red-400" />
-                            </button>
-                            <button type="button" onClick={() => setSelectedState(state.id)}>
-                              <PencilSquareIcon className="h-4 w-4 text-gray-400" />
-                            </button>
-                          </div>
-                        </div>
-                      ) : (
-                        <div className="border-b last:border-b-0" key={state.id}>
                           <CreateUpdateStateInline
                             projectId={projectDetails.id}
                             onClose={() => {
@@ -149,15 +105,60 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
                               setSelectedState(null);
                             }}
                             workspaceSlug={workspaceSlug as string}
-                            data={states?.find((state) => state.id === selectedState) ?? null}
+                            data={null}
                             selectedGroup={key as keyof StateGroup}
                           />
-                        </div>
+                        )}
-                      )
+                        {orderedStateGroups[key].map((state) =>
-                    )}
+                          state.id !== selectedState ? (
-                  </div>
+                            <div
-                </div>
+                              key={state.id}
-              ))
+                              className={`flex items-center justify-between gap-2 border-b bg-gray-50 p-3 ${
+                                activeGroup !== key ? "last:border-0" : ""
+                              }`}
+                            >
+                              <div className="flex items-center gap-2">
+                                <div
+                                  className="h-3 w-3 flex-shrink-0 rounded-full"
+                                  style={{
+                                    backgroundColor: state.color,
+                                  }}
+                                />
+                                <h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <button
+                                  type="button"
+                                  onClick={() => setSelectDeleteState(state.id)}
+                                >
+                                  <TrashIcon className="h-4 w-4 text-red-400" />
+                                </button>
+                                <button type="button" onClick={() => setSelectedState(state.id)}>
+                                  <PencilSquareIcon className="h-4 w-4 text-gray-400" />
+                                </button>
+                              </div>
+                            </div>
+                          ) : (
+                            <div className="border-b last:border-b-0" key={state.id}>
+                              <CreateUpdateStateInline
+                                projectId={projectDetails.id}
+                                onClose={() => {
+                                  setActiveGroup(null);
+                                  setSelectedState(null);
+                                }}
+                                workspaceSlug={workspaceSlug as string}
+                                data={
+                                  statesList?.find((state) => state.id === selectedState) ?? null
+                                }
+                                selectedGroup={key as keyof StateGroup}
+                              />
+                            </div>
+                          )
+                        )}
+                      </div>
+                    </div>
+                  );
+              })
             ) : (
               <Loader className="space-y-5 md:w-2/3">
                 <Loader.Item height="40px" />

apps/app/pages/signin.tsx

@@ -62,27 +62,30 @@ const SignInPage: NextPage = () => {
     }
   };
 
-  const handleGithubSignIn = (githubToken: string) => {
+  const handleGithubSignIn = useCallback(
-    setLoading(true);
+    (credential: string) => {
-    authenticationService
+      setLoading(true);
-      .socialAuth({
+      authenticationService
-        medium: "github",
+        .socialAuth({
-        credential: githubToken,
+          medium: "github",
-        clientId: NEXT_PUBLIC_GITHUB_ID,
+          credential,
-      })
+          clientId: NEXT_PUBLIC_GITHUB_ID,
-      .then(async () => {
+        })
-        await onSignInSuccess();
+        .then(async () => {
-      })
+          await onSignInSuccess();
-      .catch((err) => {
+        })
-        console.log(err);
+        .catch((err) => {
-        setToastAlert({
+          console.log(err);
-          title: "Error signing in!",
+          setToastAlert({
-          type: "error",
+            title: "Error signing in!",
-          message: "Something went wrong. Please try again later or contact the support team.",
+            type: "error",
+            message: "Something went wrong. Please try again later or contact the support team.",
+          });
+          setLoading(false);
         });
-        setLoading(false);
+    },
-      });
+    [onSignInSuccess, setToastAlert]
-  };
+  );
 
   return (
     <DefaultLayout

apps/app/sentry.client.config.js

@@ -8,6 +8,7 @@ const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
 
 Sentry.init({
   dsn: SENTRY_DSN,
+  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT || "development",
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 1.0,
   // ...

apps/app/sentry.edge.config.js

@@ -8,6 +8,7 @@ const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
 
 Sentry.init({
   dsn: SENTRY_DSN,
+  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT || "development",
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 1.0,
   // ...

apps/app/sentry.server.config.js

@@ -8,6 +8,7 @@ const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
 
 Sentry.init({
   dsn: SENTRY_DSN,
+  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT || "development",
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 1.0,
   // ...

apps/app/services/state.service.ts

@@ -4,7 +4,7 @@ import APIService from "services/api.service";
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
 // types
-import type { IState } from "types";
+import type { IState, StateResponse } from "types";
 
 class ProjectStateServices extends APIService {
   constructor() {
@@ -19,7 +19,7 @@ class ProjectStateServices extends APIService {
       });
   }
 
-  async getStates(workspaceSlug: string, projectId: string): Promise<IState[]> {
+  async getStates(workspaceSlug: string, projectId: string): Promise<StateResponse> {
     return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/`)
       .then((response) => response?.data)
       .catch((error) => {

apps/app/types/state.d.ts

@@ -13,3 +13,7 @@ export interface IState {
   sequence: number;
   group: "backlog" | "unstarted" | "started" | "completed" | "cancelled";
 }
+
+export interface StateResponse {
+  [key: string]: IState[];
+}

turbo.json

@@ -7,7 +7,9 @@
     "NEXT_PUBLIC_DOCSEARCH_API_KEY",
     "NEXT_PUBLIC_DOCSEARCH_APP_ID",
     "NEXT_PUBLIC_DOCSEARCH_INDEX_NAME",
-    "NEXT_PUBLIC_SENTRY_DSN"
+    "NEXT_PUBLIC_SENTRY_DSN",
+    "SENTRY_AUTH_TOKEN",
+    "NEXT_PUBLIC_SENTRY_ENVIRONMENT"
   ],
   "pipeline": {
     "build": {