refactor: project settings (#2575)

* refactor: project setting estimate

* refactor: project setting label

* refactor: project setting state

* refactor: project setting integration

* refactor: project settings member

* fix: estimate not updating

* fix: estimate not in observable

* fix: build error

web/components/estimates/create-update-estimate-modal.tsx

@@ -1,15 +1,11 @@
 import React, { useEffect } from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// services
+
-import { ProjectEstimateService } from "services/project";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
@@ -17,29 +13,15 @@ import { Button, Input, TextArea } from "@plane/ui";
 // helpers
 import { checkDuplicates } from "helpers/array.helper";
 // types
-import { IUser, IEstimate, IEstimateFormData } from "types";
+import { IEstimate, IEstimateFormData } from "types";
-// fetch-keys
-import { ESTIMATES_LIST, ESTIMATE_DETAILS } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
   data?: IEstimate;
-  user: IUser | undefined;
 };
 
-type FormValues = {
+const defaultValues = {
-  name: string;
-  description: string;
-  value1: string;
-  value2: string;
-  value3: string;
-  value4: string;
-  value5: string;
-  value6: string;
-};
-
-const defaultValues: Partial<FormValues> = {
   name: "",
   description: "",
   value1: "",
@@ -50,10 +32,18 @@ const defaultValues: Partial<FormValues> = {
   value6: "",
 };
 
-// services
+type FormValues = typeof defaultValues;
-const projectEstimateService = new ProjectEstimateService();
+
+export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
+  const { handleClose, data, isOpen } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { projectEstimates: projectEstimatesStore } = useMobxStore();
 
-export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data, isOpen, user }) => {
   const {
     formState: { errors, isSubmitting },
     handleSubmit,
@@ -68,32 +58,27 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
     reset();
   };
 
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
   const { setToastAlert } = useToast();
 
   const createEstimate = async (payload: IEstimateFormData) => {
     if (!workspaceSlug || !projectId) return;
 
-    await projectEstimateService
+    await projectEstimatesStore
-      .createEstimate(workspaceSlug as string, projectId as string, payload, user)
+      .createEstimate(workspaceSlug.toString(), projectId.toString(), payload)
       .then(() => {
-        mutate(ESTIMATES_LIST(projectId as string));
         onClose();
       })
       .catch((err) => {
-        if (err.status === 400)
+        const error = err?.error;
+        const errorString = Array.isArray(error) ? error[0] : error;
+
         setToastAlert({
           type: "error",
           title: "Error!",
-            message: "Estimate with that name already exists. Please try again with another name.",
+          message:
-          });
+            errorString ?? err.status === 400
-        else
+              ? "Estimate with that name already exists. Please try again with another name."
-          setToastAlert({
+              : "Estimate could not be created. Please try again.",
-            type: "error",
-            title: "Error!",
-            message: "Estimate could not be created. Please try again.",
         });
       });
   };
@@ -101,38 +86,19 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
   const updateEstimate = async (payload: IEstimateFormData) => {
     if (!workspaceSlug || !projectId || !data) return;
 
-    mutate<IEstimate[]>(
+    await projectEstimatesStore
-      ESTIMATES_LIST(projectId.toString()),
+      .updateEstimate(workspaceSlug.toString(), projectId.toString(), data.id, payload)
-      (prevData) =>
-        prevData?.map((p) => {
-          if (p.id === data.id)
-            return {
-              ...p,
-              name: payload.estimate.name,
-              description: payload.estimate.description,
-              points: p.points.map((point, index) => ({
-                ...point,
-                value: payload.estimate_points[index].value,
-              })),
-            };
-
-          return p;
-        }),
-      false
-    );
-
-    await projectEstimateService
-      .patchEstimate(workspaceSlug as string, projectId as string, data?.id as string, payload, user)
       .then(() => {
-        mutate(ESTIMATES_LIST(projectId.toString()));
-        mutate(ESTIMATE_DETAILS(data.id));
         handleClose();
       })
-      .catch(() => {
+      .catch((err) => {
+        const error = err?.error;
+        const errorString = Array.isArray(error) ? error[0] : error;
+
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: "Estimate could not be updated. Please try again.",
+          message: errorString ?? "Estimate could not be updated. Please try again.",
         });
       });
 
@@ -291,151 +257,38 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           )}
                         />
                       </div>
+
+                      {/* list of all the points */}
+                      {/* since they are all the same, we can use a loop to render them */}
                       <div className="grid grid-cols-3 gap-3">
+                        {Array(6)
+                          .fill(0)
+                          .map((_, i) => (
                             <div className="flex items-center">
                               <span className="flex h-full items-center rounded-lg bg-custom-background-80">
-                            <span className="rounded-lg px-2 text-sm text-custom-text-200">1</span>
+                                <span className="rounded-lg px-2 text-sm text-custom-text-200">{i + 1}</span>
                                 <span className="rounded-r-lg bg-custom-background-100">
                                   <Controller
                                     control={control}
-                                name="value1"
+                                    name={`value${i + 1}` as keyof FormValues}
                                     render={({ field: { value, onChange, ref } }) => (
                                       <Input
-                                    id="value1"
+                                        ref={ref}
-                                    name="value1"
                                         type="text"
                                         value={value}
                                         onChange={onChange}
-                                    ref={ref}
+                                        id={`value${i + 1}`}
-                                    hasError={Boolean(errors.value1)}
+                                        name={`value${i + 1}`}
-                                    placeholder="Point 1"
+                                        placeholder={`Point ${i + 1}`}
-                                    className="rounded-l-none w-full"
-                                  />
-                                )}
-                              />
-                            </span>
-                          </span>
-                        </div>
-                        <div className="flex items-center">
-                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
-                            <span className="rounded-lg px-2 text-sm text-custom-text-200">2</span>
-                            <span className="rounded-r-lg bg-custom-background-100">
-                              <Controller
-                                control={control}
-                                name="value2"
-                                render={({ field: { value, onChange, ref } }) => (
-                                  <Input
-                                    id="value2"
-                                    name="value2"
-                                    type="text"
-                                    value={value}
-                                    onChange={onChange}
-                                    ref={ref}
-                                    hasError={Boolean(errors.value2)}
-                                    placeholder="Point 2"
-                                    className="rounded-l-none w-full"
-                                  />
-                                )}
-                              />
-                            </span>
-                          </span>
-                        </div>
-                        <div className="flex items-center">
-                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
-                            <span className="rounded-lg px-2 text-sm text-custom-text-200">3</span>
-                            <span className="rounded-r-lg bg-custom-background-100">
-                              <Controller
-                                control={control}
-                                name="value3"
-                                render={({ field: { value, onChange, ref } }) => (
-                                  <Input
-                                    id="value3"
-                                    name="value3"
-                                    type="text"
-                                    value={value}
-                                    onChange={onChange}
-                                    ref={ref}
-                                    hasError={Boolean(errors.value3)}
-                                    placeholder="Point 3"
-                                    className="rounded-l-none w-full"
-                                  />
-                                )}
-                              />
-                            </span>
-                          </span>
-                        </div>
-                        <div className="flex items-center">
-                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
-                            <span className="rounded-lg px-2 text-sm text-custom-text-200">4</span>
-                            <span className="rounded-r-lg bg-custom-background-100">
-                              <Controller
-                                control={control}
-                                name="value4"
-                                render={({ field: { value, onChange, ref } }) => (
-                                  <Input
-                                    id="value4"
-                                    name="value4"
-                                    type="text"
-                                    value={value}
-                                    onChange={onChange}
-                                    ref={ref}
-                                    hasError={Boolean(errors.value4)}
-                                    placeholder="Point 4"
-                                    className="rounded-l-none w-full"
-                                  />
-                                )}
-                              />
-                            </span>
-                          </span>
-                        </div>
-                        <div className="flex items-center">
-                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
-                            <span className="rounded-lg px-2 text-sm text-custom-text-200">5</span>
-                            <span className="rounded-r-lg bg-custom-background-100">
-                              <Controller
-                                control={control}
-                                name="value5"
-                                render={({ field: { value, onChange, ref } }) => (
-                                  <Input
-                                    id="value5"
-                                    name="value5"
-                                    type="text"
-                                    value={value}
-                                    onChange={onChange}
-                                    ref={ref}
-                                    hasError={Boolean(errors.value5)}
-                                    placeholder="Point 5"
-                                    className="rounded-l-none w-full"
-                                  />
-                                )}
-                              />
-                            </span>
-                          </span>
-                        </div>
-                        <div className="flex items-center">
-                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
-                            <span className="rounded-lg px-2 text-sm text-custom-text-200">6</span>
-                            <span className="rounded-r-lg bg-custom-background-100">
-                              <Controller
-                                control={control}
-                                name="value6"
-                                render={({ field: { value, onChange, ref } }) => (
-                                  <Input
-                                    id="value6"
-                                    name="value6"
-                                    type="text"
-                                    value={value}
-                                    onChange={onChange}
-                                    ref={ref}
-                                    hasError={Boolean(errors.value6)}
-                                    placeholder="Point 6"
                                         className="rounded-l-none w-full"
+                                        hasError={Boolean(errors[`value${i + 1}` as keyof FormValues])}
                                       />
                                     )}
                                   />
                                 </span>
                               </span>
                             </div>
+                          ))}
                       </div>
                     </div>
                     <div className="mt-5 flex justify-end gap-2">
@@ -461,4 +314,4 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
       </Transition.Root>
     </>
   );
-};
+});

web/components/estimates/delete-estimate-modal.tsx

@@ -1,10 +1,13 @@
 import React, { useEffect, useState } from "react";
-
+import { useRouter } from "next/router";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
 // types
 import { IEstimate } from "types";
-
 // icons
 import { AlertTriangle } from "lucide-react";
 // ui
@@ -12,14 +15,43 @@ import { Button } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
+  data: IEstimate | null;
   handleClose: () => void;
-  data: IEstimate;
-  handleDelete: () => void;
 };
 
-export const DeleteEstimateModal: React.FC<Props> = ({ isOpen, handleClose, data, handleDelete }) => {
+export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
+  const { isOpen, handleClose, data } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { projectEstimates: projectEstimatesStore } = useMobxStore();
+
+  // states
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
+  // hooks
+  const { setToastAlert } = useToast();
+
+  const handleEstimateDelete = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    const estimateId = data?.id!;
+
+    projectEstimatesStore.deleteEstimate(workspaceSlug.toString(), projectId.toString(), estimateId).catch((err) => {
+      const error = err?.error;
+      const errorString = Array.isArray(error) ? error[0] : error;
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: errorString ?? "Estimate could not be deleted. Please try again",
+      });
+    });
+  };
+
   useEffect(() => {
     setIsDeleteLoading(false);
   }, [isOpen]);
@@ -68,7 +100,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({ isOpen, handleClose, data
                   <span>
                     <p className="break-words text-sm leading-7 text-custom-text-200">
                       Are you sure you want to delete estimate-{" "}
-                      <span className="break-words font-medium text-custom-text-100">{data.name}</span>
+                      <span className="break-words font-medium text-custom-text-100">{data?.name}</span>
                       {""}? All of the data related to the estiamte will be permanently removed. This action cannot be
                       undone.
                     </p>
@@ -81,7 +113,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({ isOpen, handleClose, data
                       variant="danger"
                       onClick={() => {
                         setIsDeleteLoading(true);
-                        handleDelete();
+                        handleEstimateDelete();
                       }}
                       loading={isDeleteLoading}
                     >
@@ -96,4 +128,4 @@ export const DeleteEstimateModal: React.FC<Props> = ({ isOpen, handleClose, data
       </Dialog>
     </Transition.Root>
   );
-};
+});

web/components/estimates/estimate-list-item.tsx

@@ -1,14 +1,12 @@
-import React, { useState } from "react";
+import React from "react";
 
 import { useRouter } from "next/router";
 
-// services
+// store
-import { ProjectService } from "services/project";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
-import useProjectDetails from "hooks/use-project-details";
-// components
-import { DeleteEstimateModal } from "components/estimates";
 // ui
 import { Button, CustomMenu } from "@plane/ui";
 //icons
@@ -16,46 +14,44 @@ import { Pencil, Trash2 } from "lucide-react";
 // helpers
 import { orderArrayBy } from "helpers/array.helper";
 // types
-import { IUser, IEstimate } from "types";
+import { IEstimate } from "types";
 
 type Props = {
-  user: IUser | undefined;
   estimate: IEstimate;
   editEstimate: (estimate: IEstimate) => void;
-  handleEstimateDelete: (estimateId: string) => void;
+  deleteEstimate: (estimateId: string) => void;
 };
 
-// services
+export const EstimateListItem: React.FC<Props> = observer((props) => {
-const projectService = new ProjectService();
+  const { estimate, editEstimate, deleteEstimate } = props;
-
-export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate, handleEstimateDelete }) => {
-  const [isDeleteEstimateModalOpen, setIsDeleteEstimateModalOpen] = useState(false);
 
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  // store
+  const { project: projectStore } = useMobxStore();
+
   const { setToastAlert } = useToast();
 
-  const { projectDetails, mutateProjectDetails } = useProjectDetails();
+  // derived values
+  const projectDetails = projectStore.project_details?.[projectId?.toString()!];
 
   const handleUseEstimate = async () => {
     if (!workspaceSlug || !projectId) return;
 
-    const payload = {
+    await projectStore
+      .updateProject(workspaceSlug.toString(), projectId.toString(), {
         estimate: estimate.id,
-    };
+      })
+      .catch((err) => {
+        const error = err?.error;
+        const errorString = Array.isArray(error) ? error[0] : error;
 
-    mutateProjectDetails((prevData: any) => {
-      if (!prevData) return prevData;
-
-      return { ...prevData, estimate: estimate.id };
-    }, false);
-
-    await projectService.updateProject(workspaceSlug as string, projectId as string, payload, user).catch(() => {
         setToastAlert({
           type: "error",
           title: "Error!",
-        message: "Estimate points could not be used. Please try again.",
+          message: errorString ?? "Estimate points could not be used. Please try again.",
         });
       });
   };
@@ -76,7 +72,7 @@ export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate,
             </p>
           </div>
           <div className="flex items-center gap-2">
-            {projectDetails?.estimate !== estimate.id && estimate.points.length > 0 && (
+            {projectDetails?.estimate !== estimate?.id && estimate?.points?.length > 0 && (
               <Button variant="neutral-primary" onClick={handleUseEstimate}>
                 Use
               </Button>
@@ -95,7 +91,7 @@ export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate,
               {projectDetails?.estimate !== estimate.id && (
                 <CustomMenu.MenuItem
                   onClick={() => {
-                    setIsDeleteEstimateModalOpen(true);
+                    deleteEstimate(estimate.id);
                   }}
                 >
                   <div className="flex items-center justify-start gap-2">
@@ -107,7 +103,7 @@ export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate,
             </CustomMenu>
           </div>
         </div>
-        {estimate.points.length > 0 ? (
+        {estimate?.points?.length > 0 ? (
           <div className="flex text-xs text-custom-text-200">
             Estimate points (
             <span className="flex gap-1">
@@ -126,16 +122,6 @@ export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate,
           </div>
         )}
       </div>
-
-      <DeleteEstimateModal
-        isOpen={isDeleteEstimateModalOpen}
-        handleClose={() => setIsDeleteEstimateModalOpen(false)}
-        data={estimate}
-        handleDelete={() => {
-          handleEstimateDelete(estimate.id);
-          setIsDeleteEstimateModalOpen(false);
-        }}
-      />
     </>
   );
-};
+});

web/components/estimates/estimate-list.tsx

@@ -0,0 +1,139 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CreateUpdateEstimateModal, DeleteEstimateModal, EstimateListItem } from "components/estimates";
+//hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button, Loader } from "@plane/ui";
+import { EmptyState } from "components/common";
+// icons
+import { Plus } from "lucide-react";
+// images
+import emptyEstimate from "public/empty-state/estimate.svg";
+// types
+import { IEstimate } from "types";
+
+export const EstimatesList: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { project: projectStore } = useMobxStore();
+
+  // states
+  const [estimateFormOpen, setEstimateFormOpen] = useState(false);
+  const [estimateToDelete, setEstimateToDelete] = useState<string | null>(null);
+  const [estimateToUpdate, setEstimateToUpdate] = useState<IEstimate | undefined>();
+
+  // hooks
+  const { setToastAlert } = useToast();
+
+  // derived values
+  const estimatesList = projectStore.projectEstimates;
+  const projectDetails = projectStore.project_details?.[projectId?.toString()!];
+
+  const editEstimate = (estimate: IEstimate) => {
+    setEstimateFormOpen(true);
+    setEstimateToUpdate(estimate);
+  };
+
+  const disableEstimates = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    projectStore.updateProject(workspaceSlug.toString(), projectId.toString(), { estimate: null }).catch((err) => {
+      const error = err?.error;
+      const errorString = Array.isArray(error) ? error[0] : error;
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: errorString ?? "Estimate could not be disabled. Please try again",
+      });
+    });
+  };
+
+  return (
+    <>
+      <CreateUpdateEstimateModal
+        isOpen={estimateFormOpen}
+        data={estimateToUpdate}
+        handleClose={() => {
+          setEstimateFormOpen(false);
+          setEstimateToUpdate(undefined);
+        }}
+      />
+
+      <DeleteEstimateModal
+        isOpen={!!estimateToDelete}
+        handleClose={() => setEstimateToDelete(null)}
+        data={projectStore.getProjectEstimateById(estimateToDelete!)}
+      />
+
+      <section className="flex items-center justify-between py-3.5 border-b border-custom-border-200">
+        <h3 className="text-xl font-medium">Estimates</h3>
+        <div className="col-span-12 space-y-5 sm:col-span-7">
+          <div className="flex items-center gap-2">
+            <Button
+              variant="primary"
+              onClick={() => {
+                setEstimateFormOpen(true);
+                setEstimateToUpdate(undefined);
+              }}
+            >
+              Add Estimate
+            </Button>
+            {projectDetails?.estimate && (
+              <Button variant="neutral-primary" onClick={disableEstimates}>
+                Disable Estimates
+              </Button>
+            )}
+          </div>
+        </div>
+      </section>
+
+      {estimatesList ? (
+        estimatesList.length > 0 ? (
+          <section className="h-full bg-custom-background-100 overflow-y-auto">
+            {estimatesList.map((estimate) => (
+              <EstimateListItem
+                key={estimate.id}
+                estimate={estimate}
+                editEstimate={(estimate) => editEstimate(estimate)}
+                deleteEstimate={(estimateId) => setEstimateToDelete(estimateId)}
+              />
+            ))}
+          </section>
+        ) : (
+          <div className="h-full w-full overflow-y-auto">
+            <EmptyState
+              title="No estimates yet"
+              description="Estimates help you communicate the complexity of an issue."
+              image={emptyEstimate}
+              primaryButton={{
+                icon: <Plus className="h-4 w-4" />,
+                text: "Add Estimate",
+                onClick: () => {
+                  setEstimateFormOpen(true);
+                  setEstimateToUpdate(undefined);
+                },
+              }}
+            />
+          </div>
+        )
+      ) : (
+        <Loader className="mt-5 space-y-5">
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+        </Loader>
+      )}
+    </>
+  );
+});

web/components/estimates/index.ts

@@ -1,4 +1,4 @@
 export * from "./create-update-estimate-modal";
 export * from "./delete-estimate-modal";
 export * from "./estimate-select";
-export * from "./single-estimate";
+export * from "./estimate-list-item";

web/components/issues/draft-issue-form.tsx

@@ -297,17 +297,11 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
     <>
       {projectId && (
         <>
-          <CreateStateModal
+          <CreateStateModal isOpen={stateModal} handleClose={() => setStateModal(false)} projectId={projectId} />
-            isOpen={stateModal}
-            handleClose={() => setStateModal(false)}
-            projectId={projectId}
-            user={user}
-          />
           <CreateLabelModal
             isOpen={labelModal}
             handleClose={() => setLabelModal(false)}
             projectId={projectId}
-            user={user}
             onSuccess={(response) => setValue("labels", [...watch("labels"), response.id])}
           />
         </>

web/components/issues/form.tsx

@@ -249,17 +249,11 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
     <>
       {projectId && (
         <>
-          <CreateStateModal
+          <CreateStateModal isOpen={stateModal} handleClose={() => setStateModal(false)} projectId={projectId} />
-            isOpen={stateModal}
-            handleClose={() => setStateModal(false)}
-            projectId={projectId}
-            user={user ?? undefined}
-          />
           <CreateLabelModal
             isOpen={labelModal}
             handleClose={() => setLabelModal(false)}
             projectId={projectId}
-            user={user ?? undefined}
             onSuccess={(response) => setValue("labels", [...watch("labels"), response.id])}
           />
         </>

web/components/labels/create-label-modal.tsx

@@ -1,19 +1,19 @@
 import React, { useEffect } from "react";
 import { useRouter } from "next/router";
-import { mutate } from "swr";
 import { Controller, useForm } from "react-hook-form";
 import { TwitterPicker } from "react-color";
 import { Dialog, Popover, Transition } from "@headlessui/react";
-// services
+
-import { IssueLabelService } from "services/issue";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui
 import { Button, Input } from "@plane/ui";
 // icons
 import { ChevronDown } from "lucide-react";
 // types
-import type { IUser, IIssueLabels, IState } from "types";
+import type { IIssueLabels, IState } from "types";
 // constants
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 import { LABEL_COLOR_OPTIONS, getRandomLabelColor } from "constants/label";
 
 // types
@@ -22,7 +22,6 @@ type Props = {
   projectId: string;
   handleClose: () => void;
   onSuccess?: (response: IIssueLabels) => void;
-  user: IUser | undefined;
 };
 
 const defaultValues: Partial<IState> = {
@@ -30,12 +29,15 @@ const defaultValues: Partial<IState> = {
   color: "rgb(var(--color-text-200))",
 };
 
-const issueLabelService = new IssueLabelService();
+export const CreateLabelModal: React.FC<Props> = observer((props) => {
+  const { isOpen, projectId, handleClose, onSuccess } = props;
 
-export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClose, user, onSuccess }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  // store
+  const { projectLabel: projectLabelStore } = useMobxStore();
+
   const {
     formState: { errors, isSubmitting },
     handleSubmit,
@@ -59,10 +61,9 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
   const onSubmit = async (formData: IIssueLabels) => {
     if (!workspaceSlug) return;
 
-    await issueLabelService
+    await projectLabelStore
-      .createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
+      .createLabel(workspaceSlug.toString(), projectId.toString(), formData)
       .then((res) => {
-        mutate<IIssueLabels[]>(PROJECT_ISSUE_LABELS(projectId), (prevData) => [res, ...(prevData ?? [])], false);
         onClose();
         if (onSuccess) onSuccess(res);
       })
@@ -197,4 +198,4 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
       </Dialog>
     </Transition.Root>
   );
-};
+});

web/components/labels/create-update-label-inline.tsx

@@ -1,21 +1,18 @@
-import { forwardRef, useEffect, Fragment } from "react";
+import React, { forwardRef, useEffect } from "react";
 import { useRouter } from "next/router";
-import { mutate } from "swr";
-import { Controller, SubmitHandler, useForm } from "react-hook-form";
-// hooks
-import useUserAuth from "hooks/use-user-auth";
-// react-color
 import { TwitterPicker } from "react-color";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+
+// stores
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
-// services
-import { IssueLabelService } from "services/issue";
 // ui
 import { Button, Input } from "@plane/ui";
 // types
 import { IIssueLabels } from "types";
 // fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "constants/label";
 
 type Props = {
@@ -31,15 +28,16 @@ const defaultValues: Partial<IIssueLabels> = {
   color: "rgb(var(--color-text-200))",
 };
 
-const issueLabelService = new IssueLabelService();
+export const CreateUpdateLabelInline = observer(
-
+  forwardRef<HTMLFormElement, Props>(function CreateUpdateLabelInline(props, ref) {
-export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(function CreateUpdateLabelInline(props, ref) {
     const { labelForm, setLabelForm, isUpdating, labelToUpdate, onClose } = props;
 
+    // router
     const router = useRouter();
     const { workspaceSlug, projectId } = router.query;
 
-  const { user } = useUserAuth();
+    // store
+    const { projectLabel: projectLabelStore } = useMobxStore();
 
     const {
       handleSubmit,
@@ -48,6 +46,7 @@ export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(functio
       formState: { errors, isSubmitting },
       watch,
       setValue,
+      setFocus,
     } = useForm<IIssueLabels>({
       defaultValues,
     });
@@ -61,45 +60,35 @@ export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(functio
     const handleLabelCreate: SubmitHandler<IIssueLabels> = async (formData) => {
       if (!workspaceSlug || !projectId || isSubmitting) return;
 
-    await issueLabelService
+      await projectLabelStore.createLabel(workspaceSlug.toString(), projectId.toString(), formData).then(() => {
-      .createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
-      .then((res) => {
-        mutate<IIssueLabels[]>(
-          PROJECT_ISSUE_LABELS(projectId as string),
-          (prevData) => [res, ...(prevData ?? [])],
-          false
-        );
         handleClose();
+        reset(defaultValues);
       });
     };
 
     const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
       if (!workspaceSlug || !projectId || isSubmitting) return;
 
-    await issueLabelService
+      await projectLabelStore
-      .patchIssueLabel(workspaceSlug as string, projectId as string, labelToUpdate?.id ?? "", formData, user)
+        .updateLabel(workspaceSlug.toString(), projectId.toString(), labelToUpdate?.id!, formData)
         .then(() => {
           reset(defaultValues);
-        mutate<IIssueLabels[]>(
-          PROJECT_ISSUE_LABELS(projectId as string),
-          (prevData) => prevData?.map((p) => (p.id === labelToUpdate?.id ? { ...p, ...formData } : p)),
-          false
-        );
           handleClose();
         });
     };
 
+    /**
+     * For settings focus on name input
+     */
     useEffect(() => {
-    if (!labelForm && isUpdating) return;
+      setFocus("name");
-
+    }, [setFocus, labelForm]);
-    reset();
-  }, [labelForm, isUpdating, reset]);
 
     useEffect(() => {
       if (!labelToUpdate) return;
 
-    setValue("color", labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000");
       setValue("name", labelToUpdate.name);
+      setValue("color", labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000");
     }, [labelToUpdate, setValue]);
 
     useEffect(() => {
@@ -112,11 +101,15 @@ export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(functio
     }, [labelToUpdate, setValue]);
 
     return (
-    <div
+      <form
+        ref={ref}
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleSubmit(isUpdating ? handleLabelUpdate : handleLabelCreate)();
+        }}
         className={`flex scroll-m-8 items-center gap-2 rounded border border-custom-border-200 bg-custom-background-100 px-3.5 py-2 ${
           labelForm ? "" : "hidden"
         }`}
-      ref={ref}
       >
         <div className="flex-shrink-0">
           <Popover className="relative z-10 flex h-full w-full items-center justify-center">
@@ -136,7 +129,7 @@ export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(functio
                 </Popover.Button>
 
                 <Transition
-                as={Fragment}
+                  as={React.Fragment}
                   enter="transition ease-out duration-200"
                   enterFrom="opacity-0 translate-y-1"
                   enterTo="opacity-100 translate-y-0"
@@ -187,15 +180,10 @@ export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(functio
         <Button variant="neutral-primary" onClick={() => handleClose()}>
           Cancel
         </Button>
-      {isUpdating ? (
+        <Button variant="primary" type="submit" loading={isSubmitting}>
-        <Button variant="primary" onClick={handleSubmit(handleLabelUpdate)} loading={isSubmitting}>
+          {isUpdating ? (isSubmitting ? "Updating" : "Update") : isSubmitting ? "Adding" : "Add"}
-          {isSubmitting ? "Updating" : "Update"}
         </Button>
-      ) : (
+      </form>
-        <Button variant="primary" onClick={handleSubmit(handleLabelCreate)} loading={isSubmitting}>
+    );
-          {isSubmitting ? "Adding" : "Add"}
+  })
-        </Button>
-      )}
-    </div>
 );
-});

web/components/labels/delete-label-modal.tsx

@@ -1,40 +1,39 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // icons
 import { AlertTriangle } from "lucide-react";
-// services
-import { IssueLabelService } from "services/issue";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
 import { Button } from "@plane/ui";
 // types
-import type { IUser, IIssueLabels } from "types";
+import type { IIssueLabels } from "types";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
   onClose: () => void;
   data: IIssueLabels | null;
-  user: IUser | undefined;
 };
 
-// services
+export const DeleteLabelModal: React.FC<Props> = observer((props) => {
-const issueLabelService = new IssueLabelService();
+  const { isOpen, onClose, data } = props;
-
-export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user }) => {
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  // store
+  const { projectLabel: projectLabelStore } = useMobxStore();
+
+  // states
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  // hooks
   const { setToastAlert } = useToast();
 
   const handleClose = () => {
@@ -47,23 +46,19 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
 
     setIsDeleteLoading(true);
 
-    mutate<IIssueLabels[]>(
+    await projectLabelStore
-      PROJECT_ISSUE_LABELS(projectId.toString()),
+      .deleteLabel(workspaceSlug.toString(), projectId.toString(), data.id)
-      (prevData) => (prevData ?? []).filter((p) => p.id !== data.id),
+      .then(() => {
-      false
+        handleClose();
-    );
+      })
-
+      .catch((err) => {
-    await issueLabelService
-      .deleteIssueLabel(workspaceSlug.toString(), projectId.toString(), data.id, user)
-      .then(() => handleClose())
-      .catch(() => {
         setIsDeleteLoading(false);
 
-        mutate(PROJECT_ISSUE_LABELS(projectId.toString()));
+        const error = err?.error || "Label could not be deleted. Please try again.";
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: "Label could not be deleted. Please try again.",
+          message: error,
         });
       });
   };
@@ -129,4 +124,4 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
       </Dialog>
     </Transition.Root>
   );
-};
+});

web/components/labels/index.ts

@@ -3,5 +3,6 @@ export * from "./create-update-label-inline";
 export * from "./delete-label-modal";
 export * from "./label-select";
 export * from "./labels-list-modal";
-export * from "./single-label-group";
+export * from "./project-setting-label-group";
-export * from "./single-label";
+export * from "./project-setting-label-list-item";
+export * from "./project-setting-label-list";

web/components/labels/labels-list-modal.tsx

@@ -2,38 +2,47 @@ import React, { useState } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 import { Combobox, Dialog, Transition } from "@headlessui/react";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
 // icons
 import { LayerStackIcon } from "@plane/ui";
 import { Search } from "lucide-react";
-// services
-import { IssueLabelService } from "services/issue";
 // types
-import { IUser, IIssueLabels } from "types";
+import { IIssueLabels } from "types";
-// constants
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
   parent: IIssueLabels | undefined;
-  user: IUser | undefined;
 };
 
-const issueLabelService = new IssueLabelService();
+export const LabelsListModal: React.FC<Props> = observer((props) => {
-
+  const { isOpen, handleClose, parent } = props;
-export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent, user }) => {
-  const [query, setQuery] = useState("");
 
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
+  // store
-    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+  const { projectLabel: projectLabelStore, project: projectStore } = useMobxStore();
+
+  // states
+  const [query, setQuery] = useState("");
+
+  // api call to fetch project details
+  useSWR(
+    workspaceSlug && projectId ? "PROJECT_LABELS" : null,
     workspaceSlug && projectId
-      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId as string)
+      ? () => projectStore.fetchProjectLabels(workspaceSlug.toString(), projectId.toString())
       : null
   );
 
+  // derived values
+  const issueLabels = projectStore.labels?.[projectId?.toString()!] ?? null;
+
   const filteredLabels: IIssueLabels[] =
     query === ""
       ? issueLabels ?? []
@@ -47,27 +56,9 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
   const addChildLabel = async (label: IIssueLabels) => {
     if (!workspaceSlug || !projectId) return;
 
-    mutate(
+    await projectLabelStore.updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, {
-      (prevData: any) =>
+      parent: parent?.id!,
-        prevData?.map((l: any) => {
+    });
-          if (l.id === label.id) return { ...l, parent: parent?.id ?? "" };
-
-          return l;
-        }),
-      false
-    );
-
-    await issueLabelService
-      .patchIssueLabel(
-        workspaceSlug as string,
-        projectId as string,
-        label.id,
-        {
-          parent: parent?.id ?? "",
-        },
-        user
-      )
-      .then(() => mutate());
   };
 
   return (
@@ -122,7 +113,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
                           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
+                            children?.length === 0 // issue doesn't have any other children
                           )
                             return (
                               <Combobox.Option
@@ -173,4 +164,4 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
       </Dialog>
     </Transition.Root>
   );
-};
+});

web/components/labels/project-setting-label-group.tsx

@@ -1,71 +1,40 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
 import { Disclosure, Transition } from "@headlessui/react";
-// services
+
-import { IssueLabelService } from "services/issue";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "components/ui";
 // icons
 import { ChevronDown, Component, Pencil, Plus, Trash2, X } from "lucide-react";
 // types
-import { IUser, IIssueLabels } from "types";
+import { IIssueLabels } from "types";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 
 type Props = {
   label: IIssueLabels;
   labelChildren: IIssueLabels[];
-  addLabelToGroup: (parentLabel: IIssueLabels) => void;
-  editLabel: (label: IIssueLabels) => void;
   handleLabelDelete: () => void;
-  user: IUser | undefined;
+  editLabel: (label: IIssueLabels) => void;
+  addLabelToGroup: (parentLabel: IIssueLabels) => void;
 };
 
-// services
+export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
-const issueLabelService = new IssueLabelService();
+  const { label, labelChildren, addLabelToGroup, editLabel, handleLabelDelete } = props;
 
-export const SingleLabelGroup: React.FC<Props> = ({
+  // router
-  label,
-  labelChildren,
-  addLabelToGroup,
-  editLabel,
-  handleLabelDelete,
-  user,
-}) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  // store
+  const { projectLabel: projectLabelStore } = useMobxStore();
+
   const removeFromGroup = (label: IIssueLabels) => {
     if (!workspaceSlug || !projectId) return;
 
-    mutate<IIssueLabels[]>(
+    projectLabelStore.updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, {
-      PROJECT_ISSUE_LABELS(projectId as string),
-      (prevData) =>
-        prevData?.map((l) => {
-          if (l.id === label.id) return { ...l, parent: null };
-
-          return l;
-        }),
-      false
-    );
-
-    issueLabelService
-      .patchIssueLabel(
-        workspaceSlug as string,
-        projectId as string,
-        label.id,
-        {
       parent: null,
-        },
-        user
-      )
-      .then(() => {
-        mutate(PROJECT_ISSUE_LABELS(projectId as string));
     });
   };
 
@@ -163,7 +132,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
 
                       <div className="flex items-center">
                         <button className="flex items-center justify-start gap-2" onClick={handleLabelDelete}>
-                          <X className="h-4 w-4 text-custom-sidebar-text-400 flex-shrink-0" />
+                          <X className="h-[18px] w-[18px] text-custom-sidebar-text-400 flex-shrink-0" />
                         </button>
                       </div>
                     </div>
@@ -176,4 +145,4 @@ export const SingleLabelGroup: React.FC<Props> = ({
       )}
     </Disclosure>
   );
-};
+});

web/components/labels/project-setting-label-list-item.tsx

@@ -3,11 +3,11 @@ import React, { useRef, useState } from "react";
 //hook
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // ui
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu } from "components/ui";
 // types
 import { IIssueLabels } from "types";
 //icons
-import { Component, Pencil, X } from "lucide-react";
+import { Component, X, Pencil } from "lucide-react";
 
 type Props = {
   label: IIssueLabels;
@@ -16,7 +16,9 @@ type Props = {
   handleLabelDelete: () => void;
 };
 
-export const SingleLabel: React.FC<Props> = ({ label, addLabelToGroup, editLabel, handleLabelDelete }) => {
+export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
+  const { label, addLabelToGroup, editLabel, handleLabelDelete } = props;
+
   const [isMenuActive, setIsMenuActive] = useState(false);
   const actionSectionRef = useRef<HTMLDivElement | null>(null);
 
@@ -33,6 +35,7 @@ export const SingleLabel: React.FC<Props> = ({ label, addLabelToGroup, editLabel
         />
         <h6 className="text-sm">{label.name}</h6>
       </div>
+
       <div
         ref={actionSectionRef}
         className={`absolute -top-0.5 right-3 flex items-start gap-3.5 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 ${

web/components/labels/project-setting-label-list.tsx

@@ -0,0 +1,166 @@
+import React, { useState, useRef } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import {
+  CreateUpdateLabelInline,
+  DeleteLabelModal,
+  LabelsListModal,
+  ProjectSettingLabelItem,
+  ProjectSettingLabelGroup,
+} from "components/labels";
+// ui
+import { Button, Loader } from "@plane/ui";
+import { EmptyState } from "components/common";
+// images
+import emptyLabel from "public/empty-state/label.svg";
+// types
+import { IIssueLabels } from "types";
+
+export const ProjectSettingsLabelList: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { project: projectStore } = useMobxStore();
+
+  // states
+  const [labelForm, setLabelForm] = useState(false);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [labelsListModal, setLabelsListModal] = useState(false);
+  const [labelToUpdate, setLabelToUpdate] = useState<IIssueLabels | null>(null);
+  const [parentLabel, setParentLabel] = useState<IIssueLabels | undefined>(undefined);
+  const [selectDeleteLabel, setSelectDeleteLabel] = useState<IIssueLabels | null>(null);
+
+  // ref
+  const scrollToRef = useRef<HTMLFormElement>(null);
+
+  // api call to fetch project details
+  useSWR(
+    workspaceSlug && projectId ? "PROJECT_LABELS" : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectLabels(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  // derived values
+  const issueLabels = projectStore.labels?.[projectId?.toString()!] ?? null;
+
+  const newLabel = () => {
+    setIsUpdating(false);
+    setLabelForm(true);
+  };
+
+  const addLabelToGroup = (parentLabel: IIssueLabels) => {
+    setLabelsListModal(true);
+    setParentLabel(parentLabel);
+  };
+
+  const editLabel = (label: IIssueLabels) => {
+    setLabelForm(true);
+    setIsUpdating(true);
+    setLabelToUpdate(label);
+  };
+
+  return (
+    <>
+      <LabelsListModal isOpen={labelsListModal} parent={parentLabel} handleClose={() => setLabelsListModal(false)} />
+      <DeleteLabelModal
+        isOpen={!!selectDeleteLabel}
+        data={selectDeleteLabel ?? null}
+        onClose={() => setSelectDeleteLabel(null)}
+      />
+
+      <div className="flex items-center py-3.5 border-b border-custom-border-200 justify-between">
+        <h3 className="text-xl font-medium">Labels</h3>
+        <Button variant="primary" onClick={newLabel} size="sm">
+          Add label
+        </Button>
+      </div>
+      <div className="space-y-3 py-6 h-full w-full">
+        {labelForm && (
+          <CreateUpdateLabelInline
+            labelForm={labelForm}
+            setLabelForm={setLabelForm}
+            isUpdating={isUpdating}
+            labelToUpdate={labelToUpdate}
+            ref={scrollToRef}
+            onClose={() => {
+              setLabelForm(false);
+              setIsUpdating(false);
+              setLabelToUpdate(null);
+            }}
+          />
+        )}
+
+        {/* labels */}
+        {issueLabels &&
+          issueLabels.map((label) => {
+            const children = issueLabels?.filter((l) => l.parent === label.id);
+
+            if (children && children.length === 0) {
+              if (!label.parent)
+                return (
+                  <ProjectSettingLabelItem
+                    key={label.id}
+                    label={label}
+                    addLabelToGroup={() => addLabelToGroup(label)}
+                    editLabel={(label) => {
+                      editLabel(label);
+                      scrollToRef.current?.scrollIntoView({
+                        behavior: "smooth",
+                      });
+                    }}
+                    handleLabelDelete={() => setSelectDeleteLabel(label)}
+                  />
+                );
+            } else {
+              return (
+                <ProjectSettingLabelGroup
+                  key={label.id}
+                  label={label}
+                  labelChildren={children}
+                  addLabelToGroup={addLabelToGroup}
+                  editLabel={(label) => {
+                    editLabel(label);
+                    scrollToRef.current?.scrollIntoView({
+                      behavior: "smooth",
+                    });
+                  }}
+                  handleLabelDelete={() => setSelectDeleteLabel(label)}
+                />
+              );
+            }
+          })}
+
+        {/* loading state */}
+        {!issueLabels && (
+          <Loader className="space-y-5">
+            <Loader.Item height="42px" />
+            <Loader.Item height="42px" />
+            <Loader.Item height="42px" />
+            <Loader.Item height="42px" />
+          </Loader>
+        )}
+
+        {/* empty state */}
+        {issueLabels && issueLabels.length === 0 && (
+          <EmptyState
+            title="No labels yet"
+            description="Create labels to help organize and filter issues in you project"
+            image={emptyLabel}
+            primaryButton={{
+              text: "Add label",
+              onClick: () => newLabel(),
+            }}
+          />
+        )}
+      </div>
+    </>
+  );
+});

web/components/project/confirm-project-member-remove.tsx

@@ -13,7 +13,9 @@ type Props = {
   data?: any;
 };
 
-const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, handleDelete }) => {
+export const ConfirmProjectMemberRemove: React.FC<Props> = (props) => {
+  const { isOpen, onClose, data, handleDelete } = props;
+
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const handleClose = () => {
@@ -89,5 +91,3 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
     </Transition.Root>
   );
 };
-
-export default ConfirmProjectMemberRemove;

web/components/project/form.tsx

@@ -68,11 +68,11 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
           message: "Project updated successfully",
         });
       })
-      .catch(() => {
+      .catch((error) => {
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: "Project could not be updated. Please try again.",
+          message: error?.error ?? "Project could not be updated. Please try again.",
         });
       });
   };

web/components/project/index.ts

@@ -13,4 +13,9 @@ export * from "./members-select";
 export * from "./priority-select";
 export * from "./sidebar-list-item";
 export * from "./sidebar-list";
-export * from "./single-integration-card";
+export * from "./integration-card";
+export * from "./member-list";
+export * from "./member-list-item";
+export * from "./project-settings-member-defaults";
+export * from "./send-project-invitation-modal";
+export * from "./confirm-project-member-remove";

web/components/project/integration-card.tsx

@@ -37,7 +37,7 @@ const integrationDetails: { [key: string]: any } = {
 // services
 const projectService = new ProjectService();
 
-export const SingleIntegration: React.FC<Props> = ({ integration }) => {
+export const IntegrationCard: React.FC<Props> = ({ integration }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 

web/components/project/member-list-item.tsx

@@ -0,0 +1,203 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import useSWR, { mutate } from "swr";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { ProjectInvitationService } from "services/project";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { ConfirmProjectMemberRemove } from "components/project";
+// ui
+import { CustomMenu, CustomSelect } from "@plane/ui";
+// icons
+import { ChevronDown, X } from "lucide-react";
+// constants
+import { ROLE } from "constants/workspace";
+
+// services
+const projectInvitationService = new ProjectInvitationService();
+
+type Props = {
+  member: any;
+};
+
+export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
+  const { member } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // states
+  const [selectedRemoveMember, setSelectedRemoveMember] = useState<any | null>(null);
+  const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState<any | null>(null);
+
+  // store
+  const { user: userStore, project: projectStore } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_MEMBERS_${projectId.toString().toUpperCase()}` : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectMembers(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  // derived values
+  const user = userStore.currentUser;
+  const memberDetails = userStore.projectMemberInfo;
+  const isAdmin = memberDetails?.role === 20;
+  const isOwner = memberDetails?.role === 20;
+  const projectMembers = projectStore.members?.[projectId?.toString()!];
+  const currentUser = projectMembers?.find((item) => item.member.id === user?.id);
+
+  return (
+    <>
+      <ConfirmProjectMemberRemove
+        isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
+        onClose={() => {
+          setSelectedRemoveMember(null);
+          setSelectedInviteRemoveMember(null);
+        }}
+        data={selectedRemoveMember ?? selectedInviteRemoveMember}
+        handleDelete={async () => {
+          if (!workspaceSlug || !projectId) return;
+
+          // if the user is a member
+          if (selectedRemoveMember) {
+            await projectStore.removeMemberFromProject(
+              workspaceSlug.toString(),
+              projectId.toString(),
+              selectedRemoveMember
+            );
+          }
+          // if the user is an invite
+          if (selectedInviteRemoveMember) {
+            await projectInvitationService.deleteProjectInvitation(
+              workspaceSlug.toString(),
+              projectId.toString(),
+              selectedInviteRemoveMember
+            );
+            mutate(`PROJECT_INVITATIONS_${projectId.toString()}`);
+          }
+
+          setToastAlert({
+            type: "success",
+            message: "Member removed successfully",
+            title: "Success",
+          });
+        }}
+      />
+
+      <div key={member.id} className="flex items-center justify-between px-3.5 py-[18px]">
+        <div className="flex items-center gap-x-6 gap-y-2">
+          {member.avatar && member.avatar !== "" ? (
+            <div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize text-white">
+              <img
+                src={member.avatar}
+                alt={member.display_name}
+                className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
+              />
+            </div>
+          ) : member.display_name || member.email ? (
+            <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
+              {(member.display_name || member.email)?.charAt(0)}
+            </div>
+          ) : (
+            <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
+              ?
+            </div>
+          )}
+          <div>
+            {member.member ? (
+              <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
+                <a className="text-sm">
+                  <span>
+                    {member.first_name} {member.last_name}
+                  </span>
+                  <span className="text-custom-text-300 text-sm ml-2">({member.display_name})</span>
+                </a>
+              </Link>
+            ) : (
+              <h4 className="text-sm">{member.display_name || member.email}</h4>
+            )}
+            {isOwner && <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email}</p>}
+          </div>
+        </div>
+        <div className="flex items-center gap-3 text-xs">
+          {!member.member && (
+            <div className="mr-2 flex items-center justify-center rounded-full bg-yellow-500/20 px-2 py-1 text-center text-xs text-yellow-500">
+              Pending
+            </div>
+          )}
+          <CustomSelect
+            customButton={
+              <div className="flex item-center gap-1">
+                <span
+                  className={`flex items-center text-sm font-medium ${
+                    member.memberId !== user?.id ? "" : "text-custom-sidebar-text-400"
+                  }`}
+                >
+                  {ROLE[member.role as keyof typeof ROLE]}
+                </span>
+                {member.memberId !== user?.id && <ChevronDown className="h-4 w-4" />}
+              </div>
+            }
+            value={member.role}
+            onChange={(value: 5 | 10 | 15 | 20 | undefined) => {
+              if (!workspaceSlug || !projectId) return;
+
+              projectStore
+                .updateMember(workspaceSlug.toString(), projectId.toString(), member.id, {
+                  role: value,
+                })
+                .catch((err) => {
+                  const error = err.error;
+                  const errorString = Array.isArray(error) ? error[0] : error;
+
+                  setToastAlert({
+                    type: "error",
+                    title: "Error!",
+                    message: errorString ?? "An error occurred while updating member role. Please try again.",
+                  });
+                });
+            }}
+            disabled={
+              member.memberId === user?.id ||
+              !member.member ||
+              (currentUser && currentUser.role !== 20 && currentUser.role < member.role)
+            }
+          >
+            {Object.keys(ROLE).map((key) => {
+              if (currentUser && currentUser.role !== 20 && currentUser.role < parseInt(key)) return null;
+
+              return (
+                <CustomSelect.Option key={key} value={key}>
+                  <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
+                </CustomSelect.Option>
+              );
+            })}
+          </CustomSelect>
+          <CustomMenu ellipsis disabled={!isAdmin}>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                if (member.member) setSelectedRemoveMember(member.id);
+                else setSelectedInviteRemoveMember(member.id);
+              }}
+            >
+              <span className="flex items-center justify-start gap-2">
+                <X className="h-4 w-4" />
+
+                <span> {member.memberId !== user?.id ? "Remove member" : "Leave project"}</span>
+              </span>
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+        </div>
+      </div>
+    </>
+  );
+});

web/components/project/member-list.tsx

@@ -0,0 +1,110 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import useSWR, { mutate } from "swr";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { ProjectInvitationService } from "services/project";
+// hooks
+import useUser from "hooks/use-user";
+// components
+import { ProjectMemberListItem, SendProjectInvitationModal } from "components/project";
+// ui
+import { Button, Loader } from "@plane/ui";
+
+// services
+const projectInvitationService = new ProjectInvitationService();
+
+export const ProjectMemberList: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { project: projectStore } = useMobxStore();
+
+  // states
+  const [inviteModal, setInviteModal] = useState(false);
+
+  const { user } = useUser();
+
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_MEMBERS_${projectId.toString().toUpperCase()}` : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectMembers(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  const { data: projectInvitations } = useSWR(
+    workspaceSlug && projectId ? `PROJECT_INVITATIONS_${projectId.toString()}` : null,
+    workspaceSlug && projectId
+      ? () => projectInvitationService.fetchProjectInvitations(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  // derived values
+  const projectMembers = projectStore.projectMembers;
+
+  const members = [
+    ...(projectMembers?.map((item) => ({
+      id: item.id,
+      memberId: item.member?.id,
+      avatar: item.member?.avatar,
+      first_name: item.member?.first_name,
+      last_name: item.member?.last_name,
+      email: item.member?.email,
+      display_name: item.member?.display_name,
+      role: item.role,
+      status: true,
+      member: true,
+    })) || []),
+    ...(projectInvitations?.map((item: any) => ({
+      id: item.id,
+      memberId: item.id,
+      avatar: item.avatar ?? "",
+      first_name: item.first_name ?? item.email,
+      last_name: item.last_name ?? "",
+      email: item.email,
+      display_name: item.email,
+      role: item.role,
+      status: item.accepted,
+      member: false,
+    })) || []),
+  ];
+
+  return (
+    <>
+      <SendProjectInvitationModal
+        isOpen={inviteModal}
+        setIsOpen={setInviteModal}
+        members={members}
+        user={user}
+        onSuccess={() => {
+          mutate(`PROJECT_INVITATIONS_${projectId?.toString()}`);
+          projectStore.fetchProjectMembers(workspaceSlug?.toString()!, projectId?.toString()!);
+        }}
+      />
+
+      <div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-200">
+        <h4 className="text-xl font-medium">Members</h4>
+        <Button variant="primary" onClick={() => setInviteModal(true)}>
+          Add Member
+        </Button>
+      </div>
+      {!projectMembers || !projectInvitations ? (
+        <Loader className="space-y-5">
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+        </Loader>
+      ) : (
+        <div className="divide-y divide-custom-border-200">
+          {members.length > 0
+            ? members.map((member) => <ProjectMemberListItem key={member.id} member={member} />)
+            : null}
+        </div>
+      )}
+    </>
+  );
+});

web/components/project/member-select.tsx

@@ -1,18 +1,15 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
 
-// services
+// store
-import { ProjectService } from "services/project";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui
 import { Avatar } from "components/ui";
 import { CustomSearchSelect } from "@plane/ui";
 // icon
 import { Ban } from "lucide-react";
-// fetch-keys
-import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
 type Props = {
   value: any;
@@ -20,20 +17,25 @@ type Props = {
   isDisabled?: boolean;
 };
 
-// services
+export const MemberSelect: React.FC<Props> = observer((props) => {
-const projectService = new ProjectService();
+  const { value, onChange, isDisabled = false } = props;
 
-export const MemberSelect: React.FC<Props> = ({ value, onChange, isDisabled = false }) => {
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { data: members } = useSWR(
+  // store
-    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+  const { project: projectStore } = useMobxStore();
+
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_MEMBERS_${projectId.toString().toUpperCase()}` : null,
     workspaceSlug && projectId
-      ? () => projectService.fetchProjectMembers(workspaceSlug as string, projectId as string)
+      ? () => projectStore.fetchProjectMembers(workspaceSlug.toString(), projectId.toString())
       : null
   );
 
+  const members = projectStore.members?.[projectId?.toString()!];
+
   const options = members?.map((member) => ({
     value: member.member.id,
     query: member.member.display_name,
@@ -86,4 +88,4 @@ export const MemberSelect: React.FC<Props> = ({ value, onChange, isDisabled = fa
       disabled={isDisabled}
     />
   );
-};
+});

web/components/project/project-settings-member-defaults.tsx

@@ -0,0 +1,149 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+import { Controller, useForm } from "react-hook-form";
+
+import { MemberSelect } from "components/project";
+// ui
+import { Loader } from "@plane/ui";
+// types
+import { IProject, IUserLite, IWorkspace } from "types";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+const defaultValues: Partial<IProject> = {
+  project_lead: null,
+  default_assignee: null,
+};
+
+export const ProjectSettingsMemberDefaults: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { user: userStore, project: projectStore } = useMobxStore();
+
+  // hooks
+  const { setToastAlert } = useToast();
+
+  // derived values
+  const memberDetails = userStore.projectMemberInfo;
+  const isAdmin = memberDetails?.role === 20;
+  const projectDetails = projectStore.project_details[projectId?.toString()!];
+
+  const { reset, control } = useForm<IProject>({ defaultValues });
+
+  useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId.toString()) : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  useEffect(() => {
+    if (!projectDetails) return;
+
+    reset({
+      ...projectDetails,
+      default_assignee: projectDetails.default_assignee?.id ?? projectDetails.default_assignee,
+      project_lead: (projectDetails.project_lead as IUserLite)?.id ?? projectDetails.project_lead,
+      workspace: (projectDetails.workspace as IWorkspace).id,
+    });
+  }, [projectDetails, reset]);
+
+  const submitChanges = async (formData: Partial<IProject>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    reset({
+      ...projectDetails,
+      default_assignee: projectDetails.default_assignee?.id ?? projectDetails.default_assignee,
+      project_lead: (projectDetails.project_lead as IUserLite)?.id ?? projectDetails.project_lead,
+      ...formData,
+    });
+
+    await projectStore
+      .updateProject(workspaceSlug.toString(), projectId.toString(), {
+        default_assignee: formData.default_assignee === "none" ? null : formData.default_assignee,
+        project_lead: formData.project_lead === "none" ? null : formData.project_lead,
+      })
+      .then(() => {
+        projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString());
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Project updated successfully",
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  return (
+    <>
+      <div className="flex items-center py-3.5 border-b border-custom-border-200">
+        <h3 className="text-xl font-medium">Defaults</h3>
+      </div>
+
+      <div className="flex flex-col gap-2 pb-4 w-full">
+        <div className="flex items-center py-8 gap-4 w-full">
+          <div className="flex flex-col gap-2 w-1/2">
+            <h4 className="text-sm">Project Lead</h4>
+            <div className="">
+              {projectDetails ? (
+                <Controller
+                  control={control}
+                  name="project_lead"
+                  render={({ field: { value } }) => (
+                    <MemberSelect
+                      value={value}
+                      onChange={(val: string) => {
+                        submitChanges({ project_lead: val });
+                      }}
+                      isDisabled={!isAdmin}
+                    />
+                  )}
+                />
+              ) : (
+                <Loader className="h-9 w-full">
+                  <Loader.Item width="100%" height="100%" />
+                </Loader>
+              )}
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-2 w-1/2">
+            <h4 className="text-sm">Default Assignee</h4>
+            <div className="">
+              {projectDetails ? (
+                <Controller
+                  control={control}
+                  name="default_assignee"
+                  render={({ field: { value } }) => (
+                    <MemberSelect
+                      value={value}
+                      onChange={(val: string) => {
+                        submitChanges({ default_assignee: val });
+                      }}
+                      isDisabled={!isAdmin}
+                    />
+                  )}
+                />
+              ) : (
+                <Loader className="h-9 w-full">
+                  <Loader.Item width="100%" height="100%" />
+                </Loader>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});

web/components/project/send-project-invitation-modal.tsx

@@ -1,11 +1,7 @@
 import React, { useEffect } from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 import { useForm, Controller, useFieldArray } from "react-hook-form";
-
 import { Dialog, Transition } from "@headlessui/react";
 // ui
 import { Button, CustomSelect, CustomSearchSelect } from "@plane/ui";
@@ -56,7 +52,7 @@ const defaultValues: FormValues = {
 const projectService = new ProjectService();
 const workspaceService = new WorkspaceService();
 
-const SendProjectInvitationModal: React.FC<Props> = (props) => {
+export const SendProjectInvitationModal: React.FC<Props> = (props) => {
   const { isOpen, setIsOpen, members, user, onSuccess } = props;
 
   const router = useRouter();
@@ -308,5 +304,3 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
     </Transition.Root>
   );
 };
-
-export default SendProjectInvitationModal;

web/components/states/create-state-modal.tsx

@@ -1,29 +1,29 @@
 import React from "react";
 import { useRouter } from "next/router";
-import { mutate } from "swr";
 import { Controller, useForm } from "react-hook-form";
 import { TwitterPicker } from "react-color";
 import { Dialog, Popover, Transition } from "@headlessui/react";
-// services
+
-import { ProjectStateService } from "services/project";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
+import { CustomSelect } from "components/ui";
+import { Button, Input, TextArea } from "@plane/ui";
 // icons
 import { ChevronDown } from "lucide-react";
 // types
-import type { IUser, IState, IStateResponse } from "types";
+import type { IState } from "types";
-// fetch keys
-import { STATES_LIST } from "constants/fetch-keys";
 // constants
 import { GROUP_CHOICES } from "constants/project";
+
 // types
 type Props = {
   isOpen: boolean;
   projectId: string;
   handleClose: () => void;
-  user: IUser | undefined;
 };
 
 const defaultValues: Partial<IState> = {
@@ -33,12 +33,15 @@ const defaultValues: Partial<IState> = {
   group: "backlog",
 };
 
-const projectStateService = new ProjectStateService();
+export const CreateStateModal: React.FC<Props> = observer((props) => {
+  const { isOpen, projectId, handleClose } = props;
 
-export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClose, user }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  // store
+  const { projectState: projectStateStore } = useMobxStore();
+
   const { setToastAlert } = useToast();
 
   const {
@@ -63,36 +66,32 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
       ...formData,
     };
 
-    await projectStateService
+    await projectStateStore
-      .createState(workspaceSlug as string, projectId, payload, user)
+      .createState(workspaceSlug.toString(), projectId.toString(), payload)
-      .then((res) => {
+      .then(() => {
-        mutate<IStateResponse>(
-          STATES_LIST(projectId.toString()),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              [res.group]: [...prevData[res.group], res],
-            };
-          },
-          false
-        );
         onClose();
       })
       .catch((err) => {
-        if (err.status === 400)
+        const error = err.response;
+
+        if (typeof error === "object") {
+          Object.keys(error).forEach((key) => {
             setToastAlert({
               type: "error",
               title: "Error!",
-            message: "Another state exists with the same name. Please try again with another name.",
+              message: Array.isArray(error[key]) ? error[key].join(", ") : error[key],
             });
-        else
+          });
+        } else {
           setToastAlert({
             type: "error",
             title: "Error!",
-            message: "State could not be created. Please try again.",
+            message:
+              error ?? err.status === 400
+                ? "Another state exists with the same name. Please try again with another name."
+                : "State could not be created. Please try again.",
           });
+        }
       });
   };
 
@@ -264,4 +263,4 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
       </Dialog>
     </Transition.Root>
   );
-};
+});

web/components/states/create-update-state-inline.tsx

@@ -1,23 +1,20 @@
 import React, { useEffect } from "react";
-
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// react-hook-form
 import { useForm, Controller } from "react-hook-form";
-// react-color
 import { TwitterPicker } from "react-color";
-// headless ui
 import { Popover, Transition } from "@headlessui/react";
-// services
+
-import { ProjectStateService } from "services/project";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Button, CustomSelect, Input, Tooltip } from "@plane/ui";
+import { CustomSelect } from "components/ui";
+import { Button, Input, Tooltip } from "@plane/ui";
 // types
-import type { IUser, IState, IStateResponse } from "types";
+import type { IState } from "types";
 // fetch-keys
 import { STATES_LIST } from "constants/fetch-keys";
 // constants
@@ -26,25 +23,30 @@ import { GROUP_CHOICES } from "constants/project";
 type Props = {
   data: IState | null;
   onClose: () => void;
-  selectedGroup: StateGroup | null;
-  user: IUser | undefined;
   groupLength: number;
+  selectedGroup: StateGroup | null;
 };
 
 export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled" | null;
 
 const defaultValues: Partial<IState> = {
   name: "",
+  description: "",
   color: "rgb(var(--color-text-200))",
   group: "backlog",
 };
 
-const projectStateService = new ProjectStateService();
+export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
+  const { data, onClose, selectedGroup, groupLength } = props;
 
-export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, selectedGroup, user, groupLength }) => {
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  // store
+  const { projectState: projectStateStore } = useMobxStore();
+
+  // hooks
   const { setToastAlert } = useToast();
 
   const {
@@ -57,15 +59,19 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
     defaultValues,
   });
 
+  /**
+   * @description pre-populate form with data if data is present
+   */
   useEffect(() => {
     if (!data) return;
-
     reset(data);
   }, [data, reset]);
 
+  /**
+   * @description pre-populate form with default values if data is not present
+   */
   useEffect(() => {
     if (data) return;
-
     reset({
       ...defaultValues,
       group: selectedGroup ?? "backlog",
@@ -77,39 +83,21 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
     reset({ name: "", color: "#000000", group: "backlog" });
   };
 
-  const onSubmit = async (formData: IState) => {
+  const handleCreate = async (formData: IState) => {
     if (!workspaceSlug || !projectId || isSubmitting) return;
 
-    const payload: IState = {
+    await projectStateStore
-      ...formData,
+      .createState(workspaceSlug.toString(), projectId.toString(), formData)
-    };
+      .then(() => {
-
-    if (!data) {
-      await projectStateService
-        .createState(workspaceSlug.toString(), projectId.toString(), { ...payload }, user)
-        .then((res) => {
-          mutate<IStateResponse>(
-            STATES_LIST(projectId.toString()),
-            (prevData) => {
-              if (!prevData) return prevData;
-
-              return {
-                ...prevData,
-                [res.group]: [...prevData[res.group], res],
-              };
-            },
-            false
-          );
         handleClose();
-
         setToastAlert({
           type: "success",
           title: "Success!",
           message: "State created successfully.",
         });
       })
-        .catch((err) => {
+      .catch((error) => {
-          if (err.status === 400)
+        if (error.status === 400)
           setToastAlert({
             type: "error",
             title: "Error!",
@@ -122,17 +110,13 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
             message: "State could not be created. Please try again.",
           });
       });
-    } else {
+  };
-      await projectStateService
+
-        .updateState(
+  const handleUpdate = async (formData: IState) => {
-          workspaceSlug.toString(),
+    if (!workspaceSlug || !projectId || !data || isSubmitting) return;
-          projectId.toString(),
+
-          data.id,
+    await projectStateStore
-          {
+      .updateState(workspaceSlug.toString(), projectId.toString(), data.id, formData)
-            ...payload,
-          },
-          user
-        )
       .then(() => {
         mutate(STATES_LIST(projectId.toString()));
         handleClose();
@@ -143,8 +127,8 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
           message: "State updated successfully.",
         });
       })
-        .catch((err) => {
+      .catch((error) => {
-          if (err.status === 400)
+        if (error.status === 400)
           setToastAlert({
             type: "error",
             title: "Error!",
@@ -157,7 +141,15 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
             message: "State could not be updated. Please try again.",
           });
       });
-    }
+  };
+
+  const onSubmit = async (formData: IState) => {
+    const payload: IState = {
+      ...formData,
+    };
+
+    if (data) await handleUpdate(payload);
+    else await handleCreate(payload);
   };
 
   return (
@@ -281,4 +273,4 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
       </Button>
     </form>
   );
-};
+});

web/components/states/delete-state-modal.tsx

@@ -1,35 +1,38 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
-import { mutate } from "swr";
 import { Dialog, Transition } from "@headlessui/react";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // icons
 import { AlertTriangle } from "lucide-react";
-// services
-import { ProjectStateService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
 import { Button } from "@plane/ui";
 // types
-import type { IUser, IState, IStateResponse } from "types";
+import type { IState } from "types";
-// fetch-keys
-import { STATES_LIST } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
   onClose: () => void;
   data: IState | null;
-  user: IUser | undefined;
 };
 
-const projectStateService = new ProjectStateService();
+export const DeleteStateModal: React.FC<Props> = observer((props) => {
-
+  const { isOpen, onClose, data } = props;
-export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user }) => {
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  // store
+  const { projectState: projectStateStore } = useMobxStore();
+
+  // states
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
   const { setToastAlert } = useToast();
 
   const handleClose = () => {
@@ -42,28 +45,12 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
 
     setIsDeleteLoading(true);
 
-    await projectStateService
+    await projectStateStore
-      .deleteState(workspaceSlug as string, data.project, data.id, user)
+      .deleteState(workspaceSlug.toString(), data.project, data.id)
       .then(() => {
-        mutate<IStateResponse>(
-          STATES_LIST(data.project),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            const stateGroup = [...prevData[data.group]].filter((s) => s.id !== data.id);
-
-            return {
-              ...prevData,
-              [data.group]: stateGroup,
-            };
-          },
-          false
-        );
         handleClose();
       })
       .catch((err) => {
-        setIsDeleteLoading(false);
-
         if (err.status === 400)
           setToastAlert({
             type: "error",
@@ -77,6 +64,9 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
             title: "Error!",
             message: "State could not be deleted. Please try again.",
           });
+      })
+      .finally(() => {
+        setIsDeleteLoading(false);
       });
   };
 
@@ -141,4 +131,4 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
       </Dialog>
     </Transition.Root>
   );
-};
+});

web/components/states/index.ts

@@ -1,5 +1,6 @@
 export * from "./create-update-state-inline";
 export * from "./create-state-modal";
 export * from "./delete-state-modal";
-export * from "./single-state";
+export * from "./project-setting-state-list-item";
 export * from "./state-select";
+export * from "./project-setting-state-list";

web/components/states/project-setting-state-list-item.tsx

@@ -1,24 +1,18 @@
 import { useState } from "react";
-
 import { useRouter } from "next/router";
 
-import { mutate } from "swr";
+// store
-
+import { observer } from "mobx-react-lite";
-// services
+import { useMobxStore } from "lib/mobx/store-provider";
-import { ProjectStateService } from "services/project";
 // ui
 import { Tooltip, StateGroupIcon } from "@plane/ui";
 // icons
-import { ArrowDown, ArrowUp, Pencil, X } from "lucide-react";
+import { Pencil, X, ArrowDown, ArrowUp } from "lucide-react";
 
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
-import { groupBy, orderArrayBy } from "helpers/array.helper";
-import { orderStateGroups } from "helpers/state.helper";
 // types
-import { IUser, IState } from "types";
+import { IState } from "types";
-// fetch-keys
-import { STATES_LIST } from "constants/fetch-keys";
 
 type Props = {
   index: number;
@@ -26,127 +20,39 @@ type Props = {
   statesList: IState[];
   handleEditState: () => void;
   handleDeleteState: () => void;
-  user: IUser | undefined;
 };
 
-// services
+export const ProjectSettingListItem: React.FC<Props> = observer((props) => {
-const projectStateService = new ProjectStateService();
+  const { index, state, statesList, handleEditState, handleDeleteState } = props;
-
-export const SingleState: React.FC<Props> = ({
-  index,
-  state,
-  statesList,
-  handleEditState,
-  handleDeleteState,
-  user,
-}) => {
-  const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  // store
+  const { projectState: projectStateStore } = useMobxStore();
+
+  // states
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // derived values
   const groupStates = statesList.filter((s) => s.group === state.group);
   const groupLength = groupStates.length;
 
   const handleMakeDefault = () => {
+    if (!workspaceSlug || !projectId) return;
+
     setIsSubmitting(true);
 
-    const currentDefaultState = statesList.find((s) => s.default);
+    projectStateStore.markStateAsDefault(workspaceSlug.toString(), projectId.toString(), state.id).finally(() => {
-
-    let newStatesList = statesList.map((s) => ({
-      ...s,
-      default: s.id === state.id ? true : s.id === currentDefaultState?.id ? false : s.default,
-    }));
-    newStatesList = orderArrayBy(newStatesList, "sequence", "ascending");
-
-    mutate(STATES_LIST(projectId as string), orderStateGroups(groupBy(newStatesList, "group")), false);
-
-    if (currentDefaultState)
-      projectStateService
-        .patchState(
-          workspaceSlug as string,
-          projectId as string,
-          currentDefaultState?.id ?? "",
-          {
-            default: false,
-          },
-          user
-        )
-        .then(() => {
-          projectStateService
-            .patchState(
-              workspaceSlug as string,
-              projectId as string,
-              state.id,
-              {
-                default: true,
-              },
-              user
-            )
-            .then(() => {
-              mutate(STATES_LIST(projectId as string));
-              setIsSubmitting(false);
-            })
-            .catch(() => {
-              setIsSubmitting(false);
-            });
-        });
-    else
-      projectStateService
-        .patchState(
-          workspaceSlug as string,
-          projectId as string,
-          state.id,
-          {
-            default: true,
-          },
-          user
-        )
-        .then(() => {
-          mutate(STATES_LIST(projectId as string));
-          setIsSubmitting(false);
-        })
-        .catch(() => {
       setIsSubmitting(false);
     });
   };
 
   const handleMove = (state: IState, direction: "up" | "down") => {
-    let newSequence = 15000;
+    if (!workspaceSlug || !projectId) return;
 
-    if (direction === "up") {
+    projectStateStore.moveStatePosition(workspaceSlug.toString(), projectId.toString(), state.id, direction, index);
-      if (index === 1) newSequence = groupStates[0].sequence - 15000;
-      else newSequence = (groupStates[index - 2].sequence + groupStates[index - 1].sequence) / 2;
-    } else {
-      if (index === groupLength - 2) newSequence = groupStates[groupLength - 1].sequence + 15000;
-      else newSequence = (groupStates[index + 2].sequence + groupStates[index + 1].sequence) / 2;
-    }
-
-    let newStatesList = statesList.map((s) => ({
-      ...s,
-      sequence: s.id === state.id ? newSequence : s.sequence,
-    }));
-    newStatesList = orderArrayBy(newStatesList, "sequence", "ascending");
-
-    mutate(STATES_LIST(projectId as string), orderStateGroups(groupBy(newStatesList, "group")), false);
-
-    projectStateService
-      .patchState(
-        workspaceSlug as string,
-        projectId as string,
-        state.id,
-        {
-          sequence: newSequence,
-        },
-        user
-      )
-      .then((res) => {
-        console.log(res);
-        mutate(STATES_LIST(projectId as string));
-      })
-      .catch((err) => {
-        console.error(err);
-      });
   };
 
   return (
@@ -223,4 +129,4 @@ export const SingleState: React.FC<Props> = ({
       </div>
     </div>
   );
-};
+});

web/components/states/project-setting-state-list.tsx

@@ -0,0 +1,129 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CreateUpdateStateInline, DeleteStateModal, ProjectSettingListItem, StateGroup } from "components/states";
+// ui
+import { Loader } from "@plane/ui";
+// icons
+import { Plus } from "lucide-react";
+// helpers
+import { getStatesList, orderStateGroups } from "helpers/state.helper";
+// fetch-keys
+import { STATES_LIST } from "constants/fetch-keys";
+
+export const ProjectSettingStateList: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { project: projectStore } = useMobxStore();
+
+  // state
+  const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
+  const [selectedState, setSelectedState] = useState<string | null>(null);
+  const [selectDeleteState, setSelectDeleteState] = useState<string | null>(null);
+
+  useSWR(
+    workspaceSlug && projectId ? "PROJECT_DETAILS" : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  useSWR(
+    workspaceSlug && projectId ? STATES_LIST(projectId.toString()) : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectStates(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  // derived values
+  const states = projectStore.projectStatesByGroups;
+  const projectDetails = projectStore.project_details[projectId?.toString()!] ?? null;
+  const orderedStateGroups = orderStateGroups(states!);
+  const statesList = getStatesList(orderedStateGroups);
+
+  return (
+    <>
+      <DeleteStateModal
+        isOpen={!!selectDeleteState}
+        onClose={() => setSelectDeleteState(null)}
+        data={statesList?.find((s) => s.id === selectDeleteState) ?? null}
+      />
+
+      <div className="space-y-8 py-6">
+        {states && projectDetails && orderedStateGroups ? (
+          Object.keys(orderedStateGroups || {}).map((key) => {
+            if (orderedStateGroups[key].length !== 0)
+              return (
+                <div key={key} className="flex flex-col gap-2">
+                  <div className="flex w-full justify-between">
+                    <h4 className="text-base font-medium text-custom-text-200 capitalize">{key}</h4>
+                    <button
+                      type="button"
+                      className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none"
+                      onClick={() => setActiveGroup(key as keyof StateGroup)}
+                    >
+                      <Plus className="h-4 w-4" />
+                    </button>
+                  </div>
+                  <div className="flex flex-col gap-2 rounded">
+                    {key === activeGroup && (
+                      <CreateUpdateStateInline
+                        data={null}
+                        groupLength={orderedStateGroups[key].length}
+                        onClose={() => {
+                          setActiveGroup(null);
+                          setSelectedState(null);
+                        }}
+                        selectedGroup={key as keyof StateGroup}
+                      />
+                    )}
+                    {orderedStateGroups[key].map((state, index) =>
+                      state.id !== selectedState ? (
+                        <ProjectSettingListItem
+                          key={state.id}
+                          index={index}
+                          state={state}
+                          statesList={statesList ?? []}
+                          handleEditState={() => setSelectedState(state.id)}
+                          handleDeleteState={() => setSelectDeleteState(state.id)}
+                        />
+                      ) : (
+                        <div className="border-b border-custom-border-200 last:border-b-0" key={state.id}>
+                          <CreateUpdateStateInline
+                            onClose={() => {
+                              setActiveGroup(null);
+                              setSelectedState(null);
+                            }}
+                            groupLength={orderedStateGroups[key].length}
+                            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" />
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+          </Loader>
+        )}
+      </div>
+    </>
+  );
+});

web/components/states/state-select.tsx

@@ -21,7 +21,8 @@ type Props = {
   disabled?: boolean;
 };
 
-export const StateSelect: React.FC<Props> = ({
+export const StateSelect: React.FC<Props> = (props) => {
+  const {
     value,
     onChange,
     states,
@@ -31,7 +32,8 @@ export const StateSelect: React.FC<Props> = ({
     placement,
     hideDropdownArrow = false,
     disabled = false,
-}) => {
+  } = props;
+
   const [query, setQuery] = useState("");
 
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);

web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -602,7 +602,6 @@ const SinglePage: NextPage = () => {
                       isOpen={labelModal}
                       handleClose={() => setLabelModal(false)}
                       projectId={projectId}
-                      user={user}
                       onSuccess={(response) => {
                         partialUpdatePage({
                           labels: [...(pageDetails.labels ?? []), response.id],

web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx

@@ -1,179 +1,21 @@
-import React, { useState } from "react";
+import React from "react";
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-// services
-import { ProjectService, ProjectEstimateService } from "services/project";
-// hooks
-import useProjectDetails from "hooks/use-project-details";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 import { ProjectSettingLayout } from "layouts/setting-layout";
 // components
-import { CreateUpdateEstimateModal, SingleEstimate } from "components/estimates";
 import { ProjectSettingHeader } from "components/headers";
-//hooks
+import { EstimatesList } from "components/estimates/estimate-list";
-import useToast from "hooks/use-toast";
-import useUserAuth from "hooks/use-user-auth";
-// ui
-import { Button, Loader } from "@plane/ui";
-import { EmptyState } from "components/common";
-// icons
-import { Plus } from "lucide-react";
-// images
-import emptyEstimate from "public/empty-state/estimate.svg";
 // types
-import { IEstimate, IProject } from "types";
 import type { NextPage } from "next";
-// fetch-keys
-import { ESTIMATES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
 
-// services
+const EstimatesSettings: NextPage = () => (
-const projectService = new ProjectService();
-const projectEstimateService = new ProjectEstimateService();
-
-const EstimatesSettings: NextPage = () => {
-  const [estimateFormOpen, setEstimateFormOpen] = useState(false);
-
-  const [estimateToUpdate, setEstimateToUpdate] = useState<IEstimate | undefined>();
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { user } = useUserAuth();
-
-  const { setToastAlert } = useToast();
-
-  const { projectDetails } = useProjectDetails();
-
-  const { data: estimatesList } = useSWR<IEstimate[]>(
-    workspaceSlug && projectId ? ESTIMATES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectEstimateService.getEstimatesList(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const editEstimate = (estimate: IEstimate) => {
-    setEstimateToUpdate(estimate);
-    setEstimateFormOpen(true);
-  };
-
-  const removeEstimate = (estimateId: string) => {
-    if (!workspaceSlug || !projectId) return;
-
-    mutate<IEstimate[]>(
-      ESTIMATES_LIST(projectId as string),
-      (prevData) => (prevData ?? []).filter((p) => p.id !== estimateId),
-      false
-    );
-
-    projectEstimateService.deleteEstimate(workspaceSlug as string, projectId as string, estimateId, user).catch(() => {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Error: Estimate could not be deleted. Please try again",
-      });
-    });
-  };
-
-  const disableEstimates = () => {
-    if (!workspaceSlug || !projectId) return;
-
-    mutate<IProject>(
-      PROJECT_DETAILS(projectId as string),
-      (prevData) => {
-        if (!prevData) return prevData;
-
-        return { ...prevData, estimate: null };
-      },
-      false
-    );
-
-    projectService.updateProject(workspaceSlug as string, projectId as string, { estimate: null }, user).catch(() =>
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Estimate could not be disabled. Please try again",
-      })
-    );
-  };
-
-  return (
   <AppLayout header={<ProjectSettingHeader title="Estimates Settings" />} withProjectWrapper>
     <ProjectSettingLayout>
-        <CreateUpdateEstimateModal
-          isOpen={estimateFormOpen}
-          data={estimateToUpdate}
-          handleClose={() => {
-            setEstimateFormOpen(false);
-            setEstimateToUpdate(undefined);
-          }}
-          user={user}
-        />
       <div className="pr-9 py-8 w-full overflow-y-auto">
-          <section className="flex items-center justify-between py-3.5 border-b border-custom-border-200">
+        <EstimatesList />
-            <h3 className="text-xl font-medium">Estimates</h3>
-            <div className="col-span-12 space-y-5 sm:col-span-7">
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="primary"
-                  onClick={() => {
-                    setEstimateToUpdate(undefined);
-                    setEstimateFormOpen(true);
-                  }}
-                >
-                  Add Estimate
-                </Button>
-                {projectDetails?.estimate && (
-                  <Button variant="neutral-primary" onClick={disableEstimates}>
-                    Disable Estimates
-                  </Button>
-                )}
-              </div>
-            </div>
-          </section>
-          {estimatesList ? (
-            estimatesList.length > 0 ? (
-              <section className="h-full bg-custom-background-100 overflow-y-auto">
-                {estimatesList.map((estimate) => (
-                  <SingleEstimate
-                    key={estimate.id}
-                    estimate={estimate}
-                    editEstimate={(estimate) => editEstimate(estimate)}
-                    handleEstimateDelete={(estimateId) => removeEstimate(estimateId)}
-                    user={user}
-                  />
-                ))}
-              </section>
-            ) : (
-              <div className="h-full w-full overflow-y-auto">
-                <EmptyState
-                  title="No estimates yet"
-                  description="Estimates help you communicate the complexity of an issue."
-                  image={emptyEstimate}
-                  primaryButton={{
-                    icon: <Plus className="h-4 w-4" />,
-                    text: "Add Estimate",
-                    onClick: () => {
-                      setEstimateToUpdate(undefined);
-                      setEstimateFormOpen(true);
-                    },
-                  }}
-                />
-              </div>
-            )
-          ) : (
-            <Loader className="mt-5 space-y-5">
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-            </Loader>
-          )}
       </div>
     </ProjectSettingLayout>
   </AppLayout>
 );
-};
 
 export default EstimatesSettings;

web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx

@@ -11,7 +11,7 @@ import { ProjectSettingLayout } from "layouts/setting-layout";
 import { IntegrationService } from "services/integrations";
 import { ProjectService } from "services/project";
 // components
-import { SingleIntegration } from "components/project";
+import { IntegrationCard } from "components/project";
 import { ProjectSettingHeader } from "components/headers";
 // ui
 import { EmptyState } from "components/common";
@@ -23,8 +23,6 @@ import { IProject } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { PROJECT_DETAILS, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
-// helper
-// import { useMobxStore } from "lib/mobx/store-provider";
 
 // services
 const integrationService = new IntegrationService();
@@ -34,10 +32,6 @@ const ProjectIntegrations: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  // const { project: projectStore } = useMobxStore();
-
-  // const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
-
   const { data: projectDetails } = useSWR<IProject>(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
     workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
@@ -51,7 +45,7 @@ const ProjectIntegrations: NextPage = () => {
   const isAdmin = projectDetails?.member_role === 20;
 
   return (
-    <AppLayout header={<ProjectSettingHeader title="Integrations Settings" />}>
+    <AppLayout withProjectWrapper header={<ProjectSettingHeader title="Integrations Settings" />}>
       <ProjectSettingLayout>
         <div className={`pr-9 py-8 gap-10 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
           <div className="flex items-center py-3.5 border-b border-custom-border-200">
@@ -61,7 +55,7 @@ const ProjectIntegrations: NextPage = () => {
             workspaceIntegrations.length > 0 ? (
               <div>
                 {workspaceIntegrations.map((integration) => (
-                  <SingleIntegration key={integration.integration_detail.id} integration={integration} />
+                  <IntegrationCard key={integration.integration_detail.id} integration={integration} />
                 ))}
               </div>
             ) : (

web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx

@@ -1,189 +1,22 @@
-import React, { useState, useRef } from "react";
+import React from "react";
 
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// hooks
-import useUserAuth from "hooks/use-user-auth";
-// services
-import { IssueLabelService } from "services/issue";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 import { ProjectSettingLayout } from "layouts/setting-layout";
 // components
-import {
+import { ProjectSettingsLabelList } from "components/labels";
-  CreateUpdateLabelInline,
-  DeleteLabelModal,
-  LabelsListModal,
-  SingleLabel,
-  SingleLabelGroup,
-} from "components/labels";
 import { ProjectSettingHeader } from "components/headers";
-// ui
-import { Button, Loader } from "@plane/ui";
-import { EmptyState } from "components/common";
-// images
-import emptyLabel from "public/empty-state/label.svg";
 // types
-import { IIssueLabels } from "types";
 import type { NextPage } from "next";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 
-// services
+const LabelsSettings: NextPage = () => (
-const issueLabelService = new IssueLabelService();
+  <AppLayout withProjectWrapper header={<ProjectSettingHeader title="Labels Settings" />}>
-
-const LabelsSettings: NextPage = () => {
-  // create/edit label form
-  const [labelForm, setLabelForm] = useState(false);
-
-  // edit label
-  const [isUpdating, setIsUpdating] = useState(false);
-  const [labelToUpdate, setLabelToUpdate] = useState<IIssueLabels | null>(null);
-
-  // labels list modal
-  const [labelsListModal, setLabelsListModal] = useState(false);
-  const [parentLabel, setParentLabel] = useState<IIssueLabels | undefined>(undefined);
-
-  // delete label
-  const [selectDeleteLabel, setSelectDeleteLabel] = useState<IIssueLabels | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { user } = useUserAuth();
-
-  const scrollToRef = useRef<HTMLDivElement>(null);
-
-  const { data: issueLabels } = useSWR(
-    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const newLabel = () => {
-    setIsUpdating(false);
-    setLabelForm(true);
-  };
-
-  const addLabelToGroup = (parentLabel: IIssueLabels) => {
-    setLabelsListModal(true);
-    setParentLabel(parentLabel);
-  };
-
-  const editLabel = (label: IIssueLabels) => {
-    setLabelForm(true);
-    setIsUpdating(true);
-    setLabelToUpdate(label);
-  };
-
-  return (
-    <>
-      <LabelsListModal
-        isOpen={labelsListModal}
-        handleClose={() => setLabelsListModal(false)}
-        parent={parentLabel}
-        user={user}
-      />
-      <DeleteLabelModal
-        isOpen={!!selectDeleteLabel}
-        data={selectDeleteLabel ?? null}
-        onClose={() => setSelectDeleteLabel(null)}
-        user={user}
-      />
-      <AppLayout header={<ProjectSettingHeader title="Labels Settings" />}>
     <ProjectSettingLayout>
-          <section className="pr-9 py-8 gap-10 w-full overflow-y-auto">
+      <div className="pr-9 py-8 gap-10 w-full overflow-y-auto">
-            <div className="flex items-center justify-between py-3.5 border-b border-custom-border-200">
+        <ProjectSettingsLabelList />
-              <h3 className="text-xl font-medium">Labels</h3>
-
-              <Button variant="primary" onClick={newLabel} size="sm">
-                Add label
-              </Button>
       </div>
-            <div className="space-y-3 py-6 h-full w-full">
-              {labelForm && (
-                <CreateUpdateLabelInline
-                  labelForm={labelForm}
-                  setLabelForm={setLabelForm}
-                  isUpdating={isUpdating}
-                  labelToUpdate={labelToUpdate}
-                  onClose={() => {
-                    setLabelForm(false);
-                    setIsUpdating(false);
-                    setLabelToUpdate(null);
-                  }}
-                  ref={scrollToRef}
-                />
-              )}
-              <>
-                {issueLabels ? (
-                  issueLabels.length > 0 ? (
-                    issueLabels.map((label) => {
-                      const children = issueLabels?.filter((l) => l.parent === label.id);
-
-                      if (children && children.length === 0) {
-                        if (!label.parent)
-                          return (
-                            <SingleLabel
-                              key={label.id}
-                              label={label}
-                              addLabelToGroup={() => addLabelToGroup(label)}
-                              editLabel={(label) => {
-                                editLabel(label);
-                                scrollToRef.current?.scrollIntoView({
-                                  behavior: "smooth",
-                                });
-                              }}
-                              handleLabelDelete={() => setSelectDeleteLabel(label)}
-                            />
-                          );
-                      } else
-                        return (
-                          <SingleLabelGroup
-                            key={label.id}
-                            label={label}
-                            labelChildren={children}
-                            addLabelToGroup={addLabelToGroup}
-                            editLabel={(label) => {
-                              editLabel(label);
-                              scrollToRef.current?.scrollIntoView({
-                                behavior: "smooth",
-                              });
-                            }}
-                            handleLabelDelete={() => setSelectDeleteLabel(label)}
-                            user={user}
-                          />
-                        );
-                    })
-                  ) : (
-                    <EmptyState
-                      title="No labels yet"
-                      description="Create labels to help organize and filter issues in you project"
-                      image={emptyLabel}
-                      primaryButton={{
-                        text: "Add label",
-                        onClick: () => newLabel(),
-                      }}
-                    />
-                  )
-                ) : (
-                  <Loader className="space-y-5">
-                    <Loader.Item height="40px" />
-                    <Loader.Item height="40px" />
-                    <Loader.Item height="40px" />
-                    <Loader.Item height="40px" />
-                  </Loader>
-                )}
-              </>
-            </div>
-          </section>
     </ProjectSettingLayout>
   </AppLayout>
-    </>
 );
-};
 
 export default LabelsSettings;

web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx

@@ -1,436 +1,21 @@
-import { useState, useEffect } from "react";
-import { useRouter } from "next/router";
-import Link from "next/link";
-import useSWR, { mutate } from "swr";
-// services
-import { ProjectService, ProjectInvitationService } from "services/project";
-import { WorkspaceService } from "services/workspace.service";
-// hooks
-import useToast from "hooks/use-toast";
-import useUser from "hooks/use-user";
-import useProjectMembers from "hooks/use-project-members";
-import useProjectDetails from "hooks/use-project-details";
-import { Controller, useForm } from "react-hook-form";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 import { ProjectSettingLayout } from "layouts/setting-layout";
 // components
-import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
-import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
-import { MemberSelect } from "components/project";
 import { ProjectSettingHeader } from "components/headers";
-// ui
+import { ProjectMemberList, ProjectSettingsMemberDefaults } from "components/project";
-import { Button, CustomMenu, CustomSelect, Loader } from "@plane/ui";
-// icons
-import { ChevronDown, X } from "lucide-react";
 // types
 import type { NextPage } from "next";
-import { IProject, IUserLite, IWorkspace } from "types";
-// fetch-keys
-import {
-  PROJECTS_LIST,
-  PROJECT_DETAILS,
-  PROJECT_INVITATIONS,
-  PROJECT_MEMBERS,
-  USER_PROJECT_VIEW,
-  WORKSPACE_DETAILS,
-} from "constants/fetch-keys";
-// constants
-import { ROLE } from "constants/workspace";
 
-const defaultValues: Partial<IProject> = {
+const MembersSettings: NextPage = () => (
-  project_lead: null,
+  <AppLayout header={<ProjectSettingHeader title="Members Settings" />} withProjectWrapper>
-  default_assignee: null,
-};
-
-// services
-const projectService = new ProjectService();
-const projectInvitationService = new ProjectInvitationService();
-const workspaceService = new WorkspaceService();
-
-const MembersSettings: NextPage = () => {
-  const [inviteModal, setInviteModal] = useState(false);
-  const [selectedRemoveMember, setSelectedRemoveMember] = useState<string | null>(null);
-  const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState<string | null>(null);
-
-  const { setToastAlert } = useToast();
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { user } = useUser();
-  const { projectDetails } = useProjectDetails();
-  const { isOwner } = useProjectMembers(
-    workspaceSlug?.toString(),
-    projectId?.toString(),
-    Boolean(workspaceSlug && projectId)
-  );
-
-  const { reset, control } = useForm<IProject>({ defaultValues });
-
-  const { data: activeWorkspace } = useSWR(workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug.toString()) : null, () =>
-    workspaceSlug ? workspaceService.getWorkspace(workspaceSlug.toString()) : null
-  );
-
-  const { data: projectMembers, mutate: mutateMembers } = useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => projectService.fetchProjectMembers(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-
-  const { data: projectInvitations, mutate: mutateInvitations } = useSWR(
-    workspaceSlug && projectId ? PROJECT_INVITATIONS(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => projectInvitationService.fetchProjectInvitations(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-
-  const { data: memberDetails } = useSWR(
-    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-
-  const members = [
-    ...(projectMembers?.map((item) => ({
-      id: item.id,
-      memberId: item.member?.id,
-      avatar: item.member?.avatar,
-      first_name: item.member?.first_name,
-      last_name: item.member?.last_name,
-      email: item.member?.email,
-      display_name: item.member?.display_name,
-      role: item.role,
-      status: true,
-      member: true,
-    })) || []),
-    ...(projectInvitations?.map((item: any) => ({
-      id: item.id,
-      memberId: item.id,
-      avatar: item.avatar ?? "",
-      first_name: item.first_name ?? item.email,
-      last_name: item.last_name ?? "",
-      email: item.email,
-      display_name: item.email,
-      role: item.role,
-      status: item.accepted,
-      member: false,
-    })) || []),
-  ];
-
-  const currentUser = projectMembers?.find((item) => item.member.id === user?.id);
-
-  // const handleProjectInvitationSuccess = () => {};
-
-  // const onSubmit = async (formData: IProject) => {
-  //   if (!workspaceSlug || !projectId || !projectDetails) return;
-
-  //   const payload: Partial<IProject> = {
-  //     default_assignee: formData.default_assignee,
-  //     project_lead: formData.project_lead === "none" ? null : formData.project_lead,
-  //   };
-
-  //   await projectService
-  //     .updateProject(workspaceSlug.toString(), projectId.toString(), payload, user)
-  //     .then((res) => {
-  //       mutate(PROJECT_DETAILS(projectId.toString()));
-
-  //       mutate(
-  //         PROJECTS_LIST(workspaceSlug.toString(), {
-  //           is_favorite: "all",
-  //         })
-  //       );
-
-  //       setToastAlert({
-  //         title: "Success",
-  //         type: "success",
-  //         message: "Project updated successfully",
-  //       });
-  //     })
-  //     .catch((err) => {
-  //       console.log(err);
-  //     });
-  // };
-
-  useEffect(() => {
-    if (projectDetails)
-      reset({
-        ...projectDetails,
-        default_assignee: projectDetails.default_assignee?.id ?? projectDetails.default_assignee,
-        project_lead: (projectDetails.project_lead as IUserLite)?.id ?? projectDetails.project_lead,
-        workspace: (projectDetails.workspace as IWorkspace).id,
-      });
-  }, [projectDetails, reset]);
-
-  const submitChanges = async (formData: Partial<IProject>) => {
-    if (!workspaceSlug || !projectId) return;
-
-    const payload: Partial<IProject> = {
-      default_assignee: formData.default_assignee === "none" ? null : formData.default_assignee,
-      project_lead: formData.project_lead === "none" ? null : formData.project_lead,
-    };
-
-    await projectService
-      .updateProject(workspaceSlug.toString(), projectId.toString(), payload, user)
-      .then(() => {
-        mutate(PROJECT_DETAILS(projectId.toString()));
-
-        mutate(
-          PROJECTS_LIST(workspaceSlug.toString(), {
-            is_favorite: "all",
-          })
-        );
-
-        setToastAlert({
-          title: "Success",
-          type: "success",
-          message: "Project updated successfully",
-        });
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-
-  const isAdmin = memberDetails?.role === 20;
-
-  return (
-    <AppLayout header={<ProjectSettingHeader title="Members Settings" />}>
     <ProjectSettingLayout>
-        <ConfirmProjectMemberRemove
-          isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
-          onClose={() => {
-            setSelectedRemoveMember(null);
-            setSelectedInviteRemoveMember(null);
-          }}
-          data={members.find((item) => item.id === selectedRemoveMember || item.id === selectedInviteRemoveMember)}
-          handleDelete={async () => {
-            if (!activeWorkspace || !projectDetails) return;
-            if (selectedRemoveMember) {
-              await projectService.deleteProjectMember(activeWorkspace.slug, projectDetails.id, selectedRemoveMember);
-              mutateMembers(
-                (prevData: any) => prevData?.filter((item: any) => item.id !== selectedRemoveMember),
-                false
-              );
-            }
-            if (selectedInviteRemoveMember) {
-              await projectInvitationService.deleteProjectInvitation(
-                activeWorkspace.slug,
-                projectDetails.id,
-                selectedInviteRemoveMember
-              );
-              mutateInvitations(
-                (prevData: any) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
-                false
-              );
-            }
-            setToastAlert({
-              type: "success",
-              message: "Member removed successfully",
-              title: "Success",
-            });
-          }}
-        />
-        <SendProjectInvitationModal
-          isOpen={inviteModal}
-          setIsOpen={setInviteModal}
-          members={members}
-          user={user}
-          onSuccess={() => mutateMembers()}
-        />
       <section className={`pr-9 py-8 w-full overflow-y-auto`}>
-          <div className="flex items-center py-3.5 border-b border-custom-border-200">
+        <ProjectSettingsMemberDefaults />
-            <h3 className="text-xl font-medium">Defaults</h3>
+        <ProjectMemberList />
-          </div>
-          <div className="flex flex-col gap-2 pb-4 w-full">
-            <div className="flex items-center py-8 gap-4 w-full">
-              <div className="flex flex-col gap-2 w-1/2">
-                <h4 className="text-sm">Project Lead</h4>
-                <div className="">
-                  {projectDetails ? (
-                    <Controller
-                      control={control}
-                      name="project_lead"
-                      render={({ field: { value } }) => (
-                        <MemberSelect
-                          value={value}
-                          onChange={(val: string) => {
-                            submitChanges({ project_lead: val });
-                          }}
-                          isDisabled={!isAdmin}
-                        />
-                      )}
-                    />
-                  ) : (
-                    <Loader className="h-9 w-full">
-                      <Loader.Item width="100%" height="100%" />
-                    </Loader>
-                  )}
-                </div>
-              </div>
-
-              <div className="flex flex-col gap-2 w-1/2">
-                <h4 className="text-sm">Default Assignee</h4>
-                <div className="">
-                  {projectDetails ? (
-                    <Controller
-                      control={control}
-                      name="default_assignee"
-                      render={({ field: { value } }) => (
-                        <MemberSelect
-                          value={value}
-                          onChange={(val: string) => {
-                            submitChanges({ default_assignee: val });
-                          }}
-                          isDisabled={!isAdmin}
-                        />
-                      )}
-                    />
-                  ) : (
-                    <Loader className="h-9 w-full">
-                      <Loader.Item width="100%" height="100%" />
-                    </Loader>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-200">
-            <h4 className="text-xl font-medium">Members</h4>
-            <Button variant="primary" onClick={() => setInviteModal(true)}>
-              Add Member
-            </Button>
-          </div>
-          {!projectMembers || !projectInvitations ? (
-            <Loader className="space-y-5">
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-              <Loader.Item height="40px" />
-            </Loader>
-          ) : (
-            <div className="divide-y divide-custom-border-200">
-              {members.length > 0
-                ? members.map((member) => (
-                    <div key={member.id} className="flex items-center justify-between px-3.5 py-[18px]">
-                      <div className="flex items-center gap-x-6 gap-y-2">
-                        {member.avatar && member.avatar !== "" ? (
-                          <div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize text-white">
-                            <img
-                              src={member.avatar}
-                              alt={member.display_name}
-                              className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
-                            />
-                          </div>
-                        ) : member.display_name || member.email ? (
-                          <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
-                            {(member.display_name || member.email)?.charAt(0)}
-                          </div>
-                        ) : (
-                          <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
-                            ?
-                          </div>
-                        )}
-                        <div>
-                          {member.member ? (
-                            <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
-                              <a className="text-sm">
-                                <span>
-                                  {member.first_name} {member.last_name}
-                                </span>
-                                <span className="text-custom-text-300 text-sm ml-2">({member.display_name})</span>
-                              </a>
-                            </Link>
-                          ) : (
-                            <h4 className="text-sm">{member.display_name || member.email}</h4>
-                          )}
-                          {isOwner && <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email}</p>}
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-3 text-xs">
-                        {!member.member && (
-                          <div className="mr-2 flex items-center justify-center rounded-full bg-yellow-500/20 px-2 py-1 text-center text-xs text-yellow-500">
-                            Pending
-                          </div>
-                        )}
-                        <CustomSelect
-                          customButton={
-                            <div className="flex item-center gap-1">
-                              <span
-                                className={`flex items-center text-sm font-medium ${
-                                  member.memberId !== user?.id ? "" : "text-custom-sidebar-text-400"
-                                }`}
-                              >
-                                {ROLE[member.role as keyof typeof ROLE]}
-                              </span>
-                              {member.memberId !== user?.id && <ChevronDown className="h-4 w-4" />}
-                            </div>
-                          }
-                          value={member.role}
-                          onChange={(value: 5 | 10 | 15 | 20 | undefined) => {
-                            if (!activeWorkspace || !projectDetails) return;
-
-                            mutateMembers(
-                              (prevData: any) =>
-                                prevData.map((m: any) => (m.id === member.id ? { ...m, role: value } : m)),
-                              false
-                            );
-
-                            projectService
-                              .updateProjectMember(activeWorkspace.slug, projectDetails.id, member.id, {
-                                role: value,
-                              })
-                              .catch(() => {
-                                setToastAlert({
-                                  type: "error",
-                                  title: "Error!",
-                                  message: "An error occurred while updating member role. Please try again.",
-                                });
-                              });
-                          }}
-                          disabled={
-                            member.memberId === user?.id ||
-                            !member.member ||
-                            (currentUser && currentUser.role !== 20 && currentUser.role < member.role)
-                          }
-                        >
-                          {Object.keys(ROLE).map((key) => {
-                            if (currentUser && currentUser.role !== 20 && currentUser.role < parseInt(key)) return null;
-
-                            return (
-                              <CustomSelect.Option key={key} value={key}>
-                                <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
-                              </CustomSelect.Option>
-                            );
-                          })}
-                        </CustomSelect>
-                        <CustomMenu ellipsis disabled={!isAdmin}>
-                          <CustomMenu.MenuItem
-                            onClick={() => {
-                              if (member.member) setSelectedRemoveMember(member.id);
-                              else setSelectedInviteRemoveMember(member.id);
-                            }}
-                          >
-                            <span className="flex items-center justify-start gap-2">
-                              <X className="h-4 w-4" />
-
-                              <span> {member.memberId !== user?.id ? "Remove member" : "Leave project"}</span>
-                            </span>
-                          </CustomMenu.MenuItem>
-                        </CustomMenu>
-                      </div>
-                    </div>
-                  ))
-                : null}
-            </div>
-          )}
       </section>
     </ProjectSettingLayout>
   </AppLayout>
 );
-};
 
 export default MembersSettings;

web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx

@@ -1,142 +1,25 @@
-import React, { useState } from "react";
+import React from "react";
-
+// layout
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import { ProjectStateService } from "services/project";
-// hooks
-import useProjectDetails from "hooks/use-project-details";
-import useUserAuth from "hooks/use-user-auth";
-// layouts
 import { AppLayout } from "layouts/app-layout";
-import { ProjectSettingLayout } from "layouts/setting-layout";
 // components
-import { CreateUpdateStateInline, DeleteStateModal, SingleState, StateGroup } from "components/states";
+import { ProjectSettingStateList } from "components/states";
+import { ProjectSettingLayout } from "layouts/setting-layout";
 import { ProjectSettingHeader } from "components/headers";
-// ui
-import { Loader } from "@plane/ui";
-// icons
-import { Plus } from "lucide-react";
-// helpers
-import { getStatesList, orderStateGroups } from "helpers/state.helper";
 // types
 import type { NextPage } from "next";
-// fetch-keys
-import { STATES_LIST } from "constants/fetch-keys";
 
-// services
+const StatesSettings: NextPage = () => (
-const projectStateService = new ProjectStateService();
+  <AppLayout withProjectWrapper header={<ProjectSettingHeader title="States Settings" />}>
-
-const StatesSettings: NextPage = () => {
-  const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
-  const [selectedState, setSelectedState] = useState<string | null>(null);
-  const [selectDeleteState, setSelectDeleteState] = useState<string | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { user } = useUserAuth();
-
-  const { projectDetails } = useProjectDetails();
-
-  const { data: states } = useSWR(
-    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectStateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-  const orderedStateGroups = orderStateGroups(states);
-  const statesList = getStatesList(orderedStateGroups);
-
-  return (
-    <>
-      <DeleteStateModal
-        isOpen={!!selectDeleteState}
-        data={statesList?.find((s) => s.id === selectDeleteState) ?? null}
-        onClose={() => setSelectDeleteState(null)}
-        user={user}
-      />
-      <AppLayout header={<ProjectSettingHeader title="States Settings" />}>
     <ProjectSettingLayout>
       <div className="pr-9 py-8 gap-10 w-full overflow-y-auto">
         <div className="flex items-center py-3.5 border-b border-custom-border-200">
           <h3 className="text-xl font-medium">States</h3>
         </div>
-            <div className="space-y-8 py-6">
+
-              {states && projectDetails && orderedStateGroups ? (
+        <ProjectSettingStateList />
-                Object.keys(orderedStateGroups).map((key) => {
-                  if (orderedStateGroups[key].length !== 0)
-                    return (
-                      <div key={key} className="flex flex-col gap-2">
-                        <div className="flex w-full justify-between">
-                          <h4 className="text-base font-medium text-custom-text-200 capitalize">{key}</h4>
-                          <button
-                            type="button"
-                            className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none"
-                            onClick={() => setActiveGroup(key as keyof StateGroup)}
-                          >
-                            <Plus className="h-4 w-4" />
-                          </button>
-                        </div>
-                        <div className="flex flex-col gap-2 rounded">
-                          {key === activeGroup && (
-                            <CreateUpdateStateInline
-                              groupLength={orderedStateGroups[key].length}
-                              onClose={() => {
-                                setActiveGroup(null);
-                                setSelectedState(null);
-                              }}
-                              data={null}
-                              selectedGroup={key as keyof StateGroup}
-                              user={user}
-                            />
-                          )}
-                          {orderedStateGroups[key].map((state, index) =>
-                            state.id !== selectedState ? (
-                              <SingleState
-                                key={state.id}
-                                index={index}
-                                state={state}
-                                statesList={statesList ?? []}
-                                handleEditState={() => setSelectedState(state.id)}
-                                handleDeleteState={() => setSelectDeleteState(state.id)}
-                                user={user}
-                              />
-                            ) : (
-                              <div className="border-b border-custom-border-200 last:border-b-0" key={state.id}>
-                                <CreateUpdateStateInline
-                                  onClose={() => {
-                                    setActiveGroup(null);
-                                    setSelectedState(null);
-                                  }}
-                                  groupLength={orderedStateGroups[key].length}
-                                  data={statesList?.find((state) => state.id === selectedState) ?? null}
-                                  selectedGroup={key as keyof StateGroup}
-                                  user={user}
-                                />
-                              </div>
-                            )
-                          )}
-                        </div>
-                      </div>
-                    );
-                })
-              ) : (
-                <Loader className="space-y-5 md:w-2/3">
-                  <Loader.Item height="40px" />
-                  <Loader.Item height="40px" />
-                  <Loader.Item height="40px" />
-                  <Loader.Item height="40px" />
-                </Loader>
-              )}
-            </div>
       </div>
     </ProjectSettingLayout>
   </AppLayout>
-    </>
 );
-};
 
 export default StatesSettings;

web/store/project/index.ts

@@ -1,2 +1,5 @@
 export * from "./project_publish.store";
 export * from "./project.store";
+export * from "./project_estimates.store";
+export * from "./project_label_store";
+export * from "./project_state.store";

web/store/project/project.store.ts

@@ -57,7 +57,7 @@ export interface IProjectStore {
   fetchProjectStates: (workspaceSlug: string, projectId: string) => Promise<void>;
   fetchProjectLabels: (workspaceSlug: string, projectId: string) => Promise<void>;
   fetchProjectMembers: (workspaceSlug: string, projectId: string) => Promise<void>;
-  fetchProjectEstimates: (workspaceSlug: string, projectId: string) => Promise<void>;
+  fetchProjectEstimates: (workspaceSlug: string, projectId: string) => Promise<any>;
 
   addProjectToFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
   removeProjectFromFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
@@ -70,6 +70,15 @@ export interface IProjectStore {
   createProject: (workspaceSlug: string, data: any) => Promise<any>;
   updateProject: (workspaceSlug: string, projectId: string, data: Partial<IProject>) => Promise<any>;
   deleteProject: (workspaceSlug: string, projectId: string) => Promise<void>;
+
+  // write operations
+  removeMemberFromProject: (workspaceSlug: string, projectId: string, memberId: string) => Promise<void>;
+  updateMember: (
+    workspaceSlug: string,
+    projectId: string,
+    memberId: string,
+    data: Partial<IProjectMember>
+  ) => Promise<IProjectMember>;
 }
 
 export class ProjectStore implements IProjectStore {
@@ -117,6 +126,7 @@ export class ProjectStore implements IProjectStore {
       states: observable.ref,
       labels: observable.ref,
       members: observable.ref,
+      estimates: observable.ref,
 
       // computed
       searchedProjects: computed,
@@ -140,6 +150,7 @@ export class ProjectStore implements IProjectStore {
       getProjectStateById: action,
       getProjectLabelById: action,
       getProjectMemberById: action,
+      getProjectEstimateById: action,
 
       fetchProjectStates: action,
       fetchProjectLabels: action,
@@ -154,6 +165,10 @@ export class ProjectStore implements IProjectStore {
       createProject: action,
       updateProject: action,
       leaveProject: action,
+
+      // write operations
+      removeMemberFromProject: action,
+      updateMember: action,
     });
 
     this.rootStore = _rootStore;
@@ -605,4 +620,58 @@ export class ProjectStore implements IProjectStore {
       console.log("Failed to delete project from project store");
     }
   };
+
+  removeMemberFromProject = async (workspaceSlug: string, projectId: string, memberId: string) => {
+    const originalMembers = this.projectMembers || [];
+
+    runInAction(() => {
+      this.members = {
+        ...this.members,
+        [projectId]: this.projectMembers?.filter((member) => member.id !== memberId) || [],
+      };
+    });
+
+    try {
+      await this.projectService.deleteProjectMember(workspaceSlug, projectId, memberId);
+      await this.fetchProjectMembers(workspaceSlug, projectId);
+    } catch (error) {
+      console.log("Failed to delete project from project store");
+      // revert back to original members in case of error
+      runInAction(() => {
+        this.members = {
+          ...this.members,
+          [projectId]: originalMembers,
+        };
+      });
+    }
+  };
+
+  updateMember = async (workspaceSlug: string, projectId: string, memberId: string, data: Partial<IProjectMember>) => {
+    const originalMembers = this.projectMembers || [];
+
+    runInAction(() => {
+      this.members = {
+        ...this.members,
+        [projectId]: (this.projectMembers || [])?.map((member) =>
+          member.id === memberId ? { ...member, ...data } : member
+        ),
+      };
+    });
+
+    try {
+      const response = await this.projectService.updateProjectMember(workspaceSlug, projectId, memberId, data);
+      await this.fetchProjectMembers(workspaceSlug, projectId);
+      return response;
+    } catch (error) {
+      console.log("Failed to update project member from project store");
+      // revert back to original members in case of error
+      runInAction(() => {
+        this.members = {
+          ...this.members,
+          [projectId]: originalMembers,
+        };
+      });
+      throw error;
+    }
+  };
 }

web/store/project/project_estimates.store.ts

@@ -0,0 +1,141 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IEstimate, IEstimateFormData } from "types";
+// services
+import { ProjectService, ProjectEstimateService } from "services/project";
+
+export interface IProjectEstimateStore {
+  loader: boolean;
+  error: any | null;
+
+  // estimates
+  createEstimate: (workspaceSlug: string, projectId: string, data: IEstimateFormData) => Promise<IEstimate>;
+  updateEstimate: (
+    workspaceSlug: string,
+    projectId: string,
+    estimateId: string,
+    data: IEstimateFormData
+  ) => Promise<IEstimate>;
+  deleteEstimate: (workspaceSlug: string, projectId: string, estimateId: string) => Promise<void>;
+}
+
+export class ProjectEstimatesStore implements IProjectEstimateStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // root store
+  rootStore;
+  // service
+  projectService;
+  estimateService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable,
+      error: observable,
+
+      // estimates
+      createEstimate: action,
+      updateEstimate: action,
+      deleteEstimate: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.estimateService = new ProjectEstimateService();
+  }
+
+  createEstimate = async (workspaceSlug: string, projectId: string, data: IEstimateFormData) => {
+    try {
+      const response = await this.estimateService.createEstimate(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      const responseEstimate = {
+        ...response.estimate,
+        points: response.estimate_points,
+      };
+
+      runInAction(() => {
+        this.rootStore.project.estimates = {
+          ...this.rootStore.project.estimates,
+          [projectId]: [responseEstimate, ...(this.rootStore.project.estimates?.[projectId] || [])],
+        };
+      });
+
+      return response;
+    } catch (error) {
+      console.log("Failed to create estimate from project store");
+      throw error;
+    }
+  };
+
+  updateEstimate = async (workspaceSlug: string, projectId: string, estimateId: string, data: IEstimateFormData) => {
+    const originalEstimates = this.rootStore.project.getProjectEstimateById(estimateId);
+
+    runInAction(() => {
+      this.rootStore.project.estimates = {
+        ...this.rootStore.project.estimates,
+        [projectId]: (this.rootStore.project.estimates?.[projectId] || [])?.map((estimate) =>
+          estimate.id === estimateId ? { ...estimate, ...data.estimate } : estimate
+        ),
+      };
+    });
+
+    try {
+      const response = await this.estimateService.patchEstimate(
+        workspaceSlug,
+        projectId,
+        estimateId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+      await this.rootStore.project.fetchProjectEstimates(workspaceSlug, projectId);
+
+      return response;
+    } catch (error) {
+      console.log("Failed to update estimate from project store");
+      runInAction(() => {
+        this.rootStore.project.estimates = {
+          ...this.rootStore.project.estimates,
+          [projectId]: (this.rootStore.project.estimates?.[projectId] || [])?.map((estimate) =>
+            estimate.id === estimateId ? { ...estimate, ...originalEstimates } : estimate
+          ),
+        };
+      });
+      throw error;
+    }
+  };
+
+  deleteEstimate = async (workspaceSlug: string, projectId: string, estimateId: string) => {
+    const originalEstimateList = this.rootStore.project.projectEstimates || [];
+
+    runInAction(() => {
+      this.rootStore.project.estimates = {
+        ...this.rootStore.project.estimates,
+        [projectId]: (this.rootStore.project.estimates?.[projectId] || [])?.filter(
+          (estimate) => estimate.id !== estimateId
+        ),
+      };
+    });
+
+    try {
+      // deleting using api
+      await this.estimateService.deleteEstimate(workspaceSlug, projectId, estimateId, this.rootStore.user.currentUser!);
+    } catch (error) {
+      console.log("Failed to delete estimate from project store");
+      // reverting back to original estimate list
+      runInAction(() => {
+        this.rootStore.project.estimates = {
+          ...this.rootStore.project.estimates,
+          [projectId]: originalEstimateList,
+        };
+      });
+    }
+  };
+}

web/store/project/project_label_store.ts

@@ -0,0 +1,140 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueLabels } from "types";
+// services
+import { IssueLabelService } from "services/issue";
+import { ProjectService } from "services/project";
+
+export interface IProjectLabelStore {
+  loader: boolean;
+  error: any | null;
+
+  // labels
+  createLabel: (workspaceSlug: string, projectId: string, data: Partial<IIssueLabels>) => Promise<IIssueLabels>;
+  updateLabel: (
+    workspaceSlug: string,
+    projectId: string,
+    labelId: string,
+    data: Partial<IIssueLabels>
+  ) => Promise<IIssueLabels>;
+  deleteLabel: (workspaceSlug: string, projectId: string, labelId: string) => Promise<void>;
+}
+
+export class ProjectLabelStore implements IProjectLabelStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // root store
+  rootStore;
+  // service
+  projectService;
+  issueLabelService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable,
+      error: observable,
+
+      // labels
+      createLabel: action,
+      updateLabel: action,
+      deleteLabel: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.issueLabelService = new IssueLabelService();
+  }
+
+  createLabel = async (workspaceSlug: string, projectId: string, data: Partial<IIssueLabels>) => {
+    try {
+      const response = await this.issueLabelService.createIssueLabel(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      runInAction(() => {
+        this.rootStore.project.labels = {
+          ...this.rootStore.project.labels,
+          [projectId]: [response, ...(this.rootStore.project.labels?.[projectId] || [])],
+        };
+      });
+
+      return response;
+    } catch (error) {
+      console.log("Failed to create label from project store");
+      throw error;
+    }
+  };
+
+  updateLabel = async (workspaceSlug: string, projectId: string, labelId: string, data: Partial<IIssueLabels>) => {
+    const originalLabel = this.rootStore.project.getProjectLabelById(labelId);
+
+    runInAction(() => {
+      this.rootStore.project.labels = {
+        ...this.rootStore.project.labels,
+        [projectId]:
+          this.rootStore.project.labels?.[projectId]?.map((label) =>
+            label.id === labelId ? { ...label, ...data } : label
+          ) || [],
+      };
+    });
+
+    try {
+      const response = await this.issueLabelService.patchIssueLabel(
+        workspaceSlug,
+        projectId,
+        labelId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      return response;
+    } catch (error) {
+      console.log("Failed to update label from project store");
+      runInAction(() => {
+        this.rootStore.project.labels = {
+          ...this.rootStore.project.labels,
+          [projectId]: (this.rootStore.project.labels?.[projectId] || [])?.map((label) =>
+            label.id === labelId ? { ...label, ...originalLabel } : label
+          ),
+        } as any;
+      });
+      throw error;
+    }
+  };
+
+  deleteLabel = async (workspaceSlug: string, projectId: string, labelId: string) => {
+    const originalLabelList = this.rootStore.project.projectLabels;
+
+    runInAction(() => {
+      this.rootStore.project.labels = {
+        ...this.rootStore.project.labels,
+        [projectId]: (this.rootStore.project.labels?.[projectId] || [])?.filter((label) => label.id !== labelId),
+      };
+    });
+
+    try {
+      // deleting using api
+      await this.issueLabelService.deleteIssueLabel(
+        workspaceSlug,
+        projectId,
+        labelId,
+        this.rootStore.user.currentUser!
+      );
+    } catch (error) {
+      console.log("Failed to delete label from project store");
+      // reverting back to original label list
+      runInAction(() => {
+        this.rootStore.project.labels = {
+          ...this.rootStore.project.labels,
+          [projectId]: originalLabelList || [],
+        };
+      });
+    }
+  };
+}

web/store/project/project_state.store.ts

@@ -0,0 +1,279 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IState } from "types";
+// services
+import { ProjectService, ProjectStateService } from "services/project";
+import { groupBy, orderArrayBy } from "helpers/array.helper";
+import { orderStateGroups } from "helpers/state.helper";
+
+export interface IProjectStateStore {
+  loader: boolean;
+  error: any | null;
+
+  // states
+  createState: (workspaceSlug: string, projectId: string, data: Partial<IState>) => Promise<IState>;
+  updateState: (workspaceSlug: string, projectId: string, stateId: string, data: Partial<IState>) => Promise<IState>;
+  deleteState: (workspaceSlug: string, projectId: string, stateId: string) => Promise<void>;
+  markStateAsDefault: (workspaceSlug: string, projectId: string, stateId: string) => Promise<void>;
+  moveStatePosition: (
+    workspaceSlug: string,
+    projectId: string,
+    stateId: string,
+    direction: "up" | "down",
+    groupIndex: number
+  ) => Promise<void>;
+}
+
+export class ProjectStateStore implements IProjectStateStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // root store
+  rootStore;
+  // service
+  projectService;
+  stateService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable,
+      error: observable,
+
+      // states
+      createState: action,
+      updateState: action,
+      deleteState: action,
+      markStateAsDefault: action,
+      moveStatePosition: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.stateService = new ProjectStateService();
+  }
+
+  createState = async (workspaceSlug: string, projectId: string, data: Partial<IState>) => {
+    try {
+      const response = await this.stateService.createState(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      runInAction(() => {
+        this.rootStore.project.states = {
+          ...this.rootStore.project.states,
+          [projectId]: {
+            ...this.rootStore.project.states?.[projectId],
+            [response.group]: [...(this.rootStore.project.states?.[projectId]?.[response.group] || []), response],
+          },
+        };
+      });
+
+      return response;
+    } catch (error) {
+      console.log("Failed to create state from project store");
+      throw error;
+    }
+  };
+
+  updateState = async (workspaceSlug: string, projectId: string, stateId: string, data: Partial<IState>) => {
+    const originalStates = this.rootStore.project.states;
+
+    runInAction(() => {
+      this.rootStore.project.states = {
+        ...this.rootStore.project.states,
+        [projectId]: {
+          ...this.rootStore.project.states?.[projectId],
+          [data.group as string]: (this.rootStore.project.states?.[projectId]?.[data.group as string] || []).map(
+            (state) => (state.id === stateId ? { ...state, ...data } : state)
+          ),
+        },
+      };
+    });
+
+    try {
+      const response = await this.stateService.patchState(
+        workspaceSlug,
+        projectId,
+        stateId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      runInAction(() => {
+        this.rootStore.project.states = {
+          ...this.rootStore.project.states,
+          [projectId]: {
+            ...this.rootStore.project.states?.[projectId],
+            [response.group]: (this.rootStore.project.states?.[projectId]?.[response.group] || []).map((state) =>
+              state.id === stateId ? { ...state, ...response } : state
+            ),
+          },
+        };
+      });
+
+      return response;
+    } catch (error) {
+      console.log("Failed to update state from project store");
+      runInAction(() => {
+        this.rootStore.project.states = {
+          ...this.rootStore.project.states,
+          [projectId]: {
+            ...this.rootStore.project.states?.[projectId],
+            [data.group as string]: originalStates || [],
+          },
+        } as any;
+      });
+      throw error;
+    }
+  };
+
+  deleteState = async (workspaceSlug: string, projectId: string, stateId: string) => {
+    const originalStates = this.rootStore.project.projectStates;
+
+    try {
+      runInAction(() => {
+        this.rootStore.project.states = {
+          ...this.rootStore.project.states,
+          [projectId]: {
+            ...this.rootStore.project.states?.[projectId],
+            [originalStates?.[0]?.group || ""]: (
+              this.rootStore.project.states?.[projectId]?.[originalStates?.[0]?.group || ""] || []
+            ).filter((state) => state.id !== stateId),
+          },
+        };
+      });
+
+      // deleting using api
+      await this.stateService.deleteState(workspaceSlug, projectId, stateId, this.rootStore.user.currentUser!);
+    } catch (error) {
+      console.log("Failed to delete state from project store");
+      // reverting back to original label list
+      runInAction(() => {
+        this.rootStore.project.states = {
+          ...this.rootStore.project.states,
+          [projectId]: {
+            ...this.rootStore.project.states?.[projectId],
+            [originalStates?.[0]?.group || ""]: originalStates || [],
+          },
+        };
+      });
+    }
+  };
+
+  markStateAsDefault = async (workspaceSlug: string, projectId: string, stateId: string) => {
+    const states = this.rootStore.project.projectStates;
+    const currentDefaultState = states?.find((state) => state.default);
+
+    let newStateList =
+      states?.map((state) => {
+        if (state.id === stateId) return { ...state, default: true };
+        if (state.id === currentDefaultState?.id) return { ...state, default: false };
+        return state;
+      }) ?? [];
+    newStateList = orderArrayBy(newStateList, "sequence", "ascending");
+
+    const newOrderedStateGroups = orderStateGroups(groupBy(newStateList, "group"));
+    const oldOrderedStateGroup = this.rootStore.project.states?.[projectId] || {}; // for reverting back to old state group if api fails
+
+    runInAction(() => {
+      this.rootStore.project.states = {
+        ...this.rootStore.project.states,
+        [projectId]: newOrderedStateGroups || {},
+      };
+    });
+
+    // updating using api
+    try {
+      this.stateService.patchState(
+        workspaceSlug,
+        projectId,
+        stateId,
+        { default: true },
+        this.rootStore.user.currentUser!
+      );
+
+      if (currentDefaultState)
+        this.stateService.patchState(
+          workspaceSlug,
+          projectId,
+          currentDefaultState.id,
+          { default: false },
+          this.rootStore.user.currentUser!
+        );
+    } catch (err) {
+      console.log("Failed to mark state as default");
+      runInAction(() => {
+        this.rootStore.project.states = {
+          ...this.rootStore.project.states,
+          [projectId]: oldOrderedStateGroup,
+        };
+      });
+    }
+  };
+
+  moveStatePosition = async (
+    workspaceSlug: string,
+    projectId: string,
+    stateId: string,
+    direction: "up" | "down",
+    groupIndex: number
+  ) => {
+    const SEQUENCE_GAP = 15000;
+    let newSequence = SEQUENCE_GAP;
+
+    const states = this.rootStore.project.projectStates || [];
+    const groupedStates = groupBy(states || [], "group");
+
+    const selectedState = states?.find((state) => state.id === stateId);
+    const groupStates = states?.filter((state) => state.group === selectedState?.group);
+    const groupLength = groupStates.length;
+
+    if (direction === "up") {
+      if (groupIndex === 1) newSequence = groupStates[0].sequence - SEQUENCE_GAP;
+      else newSequence = (groupStates[groupIndex - 2].sequence + groupStates[groupIndex - 1].sequence) / 2;
+    } else {
+      if (groupIndex === groupLength - 2) newSequence = groupStates[groupLength - 1].sequence + SEQUENCE_GAP;
+      else newSequence = (groupStates[groupIndex + 2].sequence + groupStates[groupIndex + 1].sequence) / 2;
+    }
+
+    const newStateList = states?.map((state) => {
+      if (state.id === stateId) return { ...state, sequence: newSequence };
+      return state;
+    });
+    const newOrderedStateGroups = orderStateGroups(
+      groupBy(orderArrayBy(newStateList, "sequence", "ascending"), "group")
+    );
+
+    runInAction(() => {
+      this.rootStore.project.states = {
+        ...this.rootStore.project.states,
+        [projectId]: newOrderedStateGroups || {},
+      };
+    });
+
+    // updating using api
+    try {
+      await this.stateService.patchState(
+        workspaceSlug,
+        projectId,
+        stateId,
+        { sequence: newSequence },
+        this.rootStore.user.currentUser!
+      );
+    } catch (err) {
+      console.log("Failed to move state position");
+      // reverting back to old state group if api fails
+      runInAction(() => {
+        this.rootStore.project.states = {
+          ...this.rootStore.project.states,
+          [projectId]: groupedStates,
+        };
+      });
+    }
+  };
+}

web/store/root.ts

@@ -19,7 +19,18 @@ import {
   IssueQuickAddStore,
 } from "store/issue";
 import { IWorkspaceFilterStore, IWorkspaceStore, WorkspaceFilterStore, WorkspaceStore } from "store/workspace";
-import { IProjectPublishStore, IProjectStore, ProjectPublishStore, ProjectStore } from "store/project";
+import {
+  IProjectPublishStore,
+  IProjectStore,
+  ProjectPublishStore,
+  ProjectStore,
+  IProjectStateStore,
+  ProjectStateStore,
+  IProjectLabelStore,
+  ProjectLabelStore,
+  ProjectEstimatesStore,
+  IProjectEstimateStore,
+} from "store/project";
 import {
   IModuleFilterStore,
   IModuleIssueKanBanViewStore,
@@ -99,6 +110,9 @@ export class RootStore {
 
   projectPublish: IProjectPublishStore;
   project: IProjectStore;
+  projectState: IProjectStateStore;
+  projectLabel: IProjectLabelStore;
+  projectEstimates: IProjectEstimateStore;
   issue: IIssueStore;
 
   module: IModuleStore;
@@ -154,6 +168,9 @@ export class RootStore {
     this.workspaceFilter = new WorkspaceFilterStore(this);
 
     this.project = new ProjectStore(this);
+    this.projectState = new ProjectStateStore(this);
+    this.projectLabel = new ProjectLabelStore(this);
+    this.projectEstimates = new ProjectEstimatesStore(this);
     this.projectPublish = new ProjectPublishStore(this);
 
     this.module = new ModuleStore(this);

yarn.lock

@@ -1309,9 +1309,9 @@
     eslint-visitor-keys "^3.3.0"
 
 "@eslint-community/regexpp@^4.4.0", "@eslint-community/regexpp@^4.6.1":
-  version "4.9.1"
+  version "4.10.0"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.9.1.tgz#449dfa81a57a1d755b09aa58d826c1262e4283b4"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
-  integrity sha512-Y27x+MBLjXa+0JWDhykM3+JE+il3kHKAEqabfEWq3SDhZjLYb6/BHL/JKFnH3fe207JaXkyDo685Oc2Glt6ifA==
+  integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
 
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
@@ -2193,25 +2193,25 @@
   dependencies:
     "@daybrush/utils" "^1.4.0"
 
-"@sentry-internal/tracing@7.75.0":
+"@sentry-internal/tracing@7.76.0":
-  version "7.75.0"
+  version "7.76.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.75.0.tgz#0d6cb4d3ff4ea6dd456f64455b2d505d7eb27656"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.76.0.tgz#36c54425bc20c08e569e6da52e13d325611cad66"
-  integrity sha512-/j4opF/jB9j8qnSiQK75/lFLtkfqXS5/MoOKc2KWK/pOaf15W+6uJzGQ8jRBHLYd9dDg6AyqsF48Wqy561/mNg==
+  integrity sha512-QQVIv+LS2sbGf/e5P2dRisHzXpy02dAcLqENLPG4sZ9otRaFNjdFYEqnlJ4qko+ORpJGQEQp/BX7Q/qzZQHlAg==
   dependencies:
-    "@sentry/core" "7.75.0"
+    "@sentry/core" "7.76.0"
-    "@sentry/types" "7.75.0"
+    "@sentry/types" "7.76.0"
-    "@sentry/utils" "7.75.0"
+    "@sentry/utils" "7.76.0"
 
-"@sentry/browser@7.75.0":
+"@sentry/browser@7.76.0":
-  version "7.75.0"
+  version "7.76.0"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.75.0.tgz#7ea88f335c7bbaf3b5eecbf4e12590785abc0ee7"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.76.0.tgz#7d73573790023523f7d9c3757b8424b7ad60d664"
-  integrity sha512-DXH/69vzp2j8xjydX+lrUYasrk7a1mpbXFGA9GtnII7shMCy55+QkVxpa6cLojYUaG2K/8yFDMcrP9N395LnWg==
+  integrity sha512-83xA+cWrBhhkNuMllW5ucFsEO2NlUh2iBYtmg07lp3fyVW+6+b1yMKRnc4RFArJ+Wcq6UO+qk2ZEvrSAts1wEw==
   dependencies:
-    "@sentry-internal/tracing" "7.75.0"
+    "@sentry-internal/tracing" "7.76.0"
-    "@sentry/core" "7.75.0"
+    "@sentry/core" "7.76.0"
-    "@sentry/replay" "7.75.0"
+    "@sentry/replay" "7.76.0"
-    "@sentry/types" "7.75.0"
+    "@sentry/types" "7.76.0"
-    "@sentry/utils" "7.75.0"
+    "@sentry/utils" "7.76.0"
 
 "@sentry/cli@^1.74.6":
   version "1.75.2"
@@ -2225,94 +2225,94 @@
     proxy-from-env "^1.1.0"
     which "^2.0.2"
 
-"@sentry/core@7.75.0":
+"@sentry/core@7.76.0":
-  version "7.75.0"
+  version "7.76.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.75.0.tgz#d5477faf9afdfbf45b4ff46b809729f14d4e1b80"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.76.0.tgz#b0d1dc399a862ea8a1c8a1c60a409e92eaf8e9e1"
-  integrity sha512-vXg3cdJgwzP24oTS9zFCgLW4MgTkMZqXx+ESRq7gTD9qJTpcmAmYT+Ckmvebg8K6DBThV6+0v61r50na2+XdrA==
+  integrity sha512-M+ptkCTeCNf6fn7p2MmEb1Wd9/JXUWxIT/0QEc+t11DNR4FYy1ZP2O9Zb3Zp2XacO7ORrlL3Yc+VIfl5JTgjfw==
   dependencies:
-    "@sentry/types" "7.75.0"
+    "@sentry/types" "7.76.0"
-    "@sentry/utils" "7.75.0"
+    "@sentry/utils" "7.76.0"
 
-"@sentry/integrations@7.75.0":
+"@sentry/integrations@7.76.0":
-  version "7.75.0"
+  version "7.76.0"
-  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.75.0.tgz#0dcee498b34b4075856d67698d317f8e3c0b96f0"
+  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.76.0.tgz#ea1b6d86609c5f25999f1d8d87383afdb00c77f0"
-  integrity sha512-dnKZvPJBj+KiOIteYJEVuZcB3Hcd6NYdQ3xJhGk5FD4+gGOHTF+8kMdBC6q+Rnkyc63IB0vPRMhhs/T5XbWByg==
+  integrity sha512-4ea0PNZrGN9wKuE/8bBCRrxxw4Cq5T710y8rhdKHAlSUpbLqr/atRF53h8qH3Fi+ec0m38PB+MivKem9zUwlwA==
   dependencies:
-    "@sentry/core" "7.75.0"
+    "@sentry/core" "7.76.0"
-    "@sentry/types" "7.75.0"
+    "@sentry/types" "7.76.0"
-    "@sentry/utils" "7.75.0"
+    "@sentry/utils" "7.76.0"
     localforage "^1.8.1"
 
 "@sentry/nextjs@^7.36.0":
-  version "7.75.0"
+  version "7.76.0"
-  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-7.75.0.tgz#5f93743fbbe6add7b7a01fb3aebdb844c37ee2ec"
+  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-7.76.0.tgz#a3018ecf3df25cd8021aeaa8fb0314f8f6f6b38f"
-  integrity sha512-EKdTUe5Q48qRgFM7T9s9sXwOEMvaouepHF5m343jSuTugTQ7CCJIR9jLGgUuRPgaUdE0F+PyJWopgVAZpaVFSg==
+  integrity sha512-3/iTnBJ7qOrhoEUQw85CmZ+S2wTZapRui5yfWO6/We11T8q6tvrUPIYmnE0BY/2BIelz4dfPwXRHXRJlgEarhg==
   dependencies:
     "@rollup/plugin-commonjs" "24.0.0"
-    "@sentry/core" "7.75.0"
+    "@sentry/core" "7.76.0"
-    "@sentry/integrations" "7.75.0"
+    "@sentry/integrations" "7.76.0"
-    "@sentry/node" "7.75.0"
+    "@sentry/node" "7.76.0"
-    "@sentry/react" "7.75.0"
+    "@sentry/react" "7.76.0"
-    "@sentry/types" "7.75.0"
+    "@sentry/types" "7.76.0"
-    "@sentry/utils" "7.75.0"
+    "@sentry/utils" "7.76.0"
-    "@sentry/vercel-edge" "7.75.0"
+    "@sentry/vercel-edge" "7.76.0"
     "@sentry/webpack-plugin" "1.20.0"
     chalk "3.0.0"
     resolve "1.22.8"
     rollup "2.78.0"
     stacktrace-parser "^0.1.10"
 
-"@sentry/node@7.75.0":
+"@sentry/node@7.76.0":
-  version "7.75.0"
+  version "7.76.0"
-  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.75.0.tgz#49f851d49e1c5cdaca64933ca5a9214edeed5e82"
+  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.76.0.tgz#9efc8bbe4825b4a5a4f853210364d21980dd790e"
-  integrity sha512-z5Xanf9QeTd4YrEuZiJfvtAy2C874Zg4KpurEo3okJ8uYjnbXMsQ3EwVHbKEoYSwE3ExTrqOggPfk2NNSJIECA==
+  integrity sha512-C+YZ5S5W9oTphdWTBgV+3nDdcV1ldnupIHylHzf2Co+xNtJ76V06N5NjdJ/l9+qvQjMn0DdSp7Uu7KCEeNBT/g==
   dependencies:
-    "@sentry-internal/tracing" "7.75.0"
+    "@sentry-internal/tracing" "7.76.0"
-    "@sentry/core" "7.75.0"
+    "@sentry/core" "7.76.0"
-    "@sentry/types" "7.75.0"
+    "@sentry/types" "7.76.0"
-    "@sentry/utils" "7.75.0"
+    "@sentry/utils" "7.76.0"
     https-proxy-agent "^5.0.0"
 
-"@sentry/react@7.75.0":
+"@sentry/react@7.76.0":
-  version "7.75.0"
+  version "7.76.0"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.75.0.tgz#5299ad2f42832cb7fd733a5bc09edc1ca47d2251"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.76.0.tgz#8c91f6401372c29c74cc4005aaed080b92ffc3f6"
-  integrity sha512-v3293R4YSF4HXLf0AKr5Oa0+cctXiGAHlygiqatMdOrEh/HqjTm2YGIoE8uYUM3/aI+xsr7ZmJ1KS6o0WWR6yA==
+  integrity sha512-FtwB1TjCaHLbyAnEEu3gBdcnh/hhpC+j0dII5bOqp4YvmkGkXfgQcjZskZFX7GydMcRAjWX35s0VRjuBBZu/fA==
   dependencies:
-    "@sentry/browser" "7.75.0"
+    "@sentry/browser" "7.76.0"
-    "@sentry/types" "7.75.0"
+    "@sentry/types" "7.76.0"
-    "@sentry/utils" "7.75.0"
+    "@sentry/utils" "7.76.0"
     hoist-non-react-statics "^3.3.2"
 
-"@sentry/replay@7.75.0":
+"@sentry/replay@7.76.0":
-  version "7.75.0"
+  version "7.76.0"
-  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.75.0.tgz#0b1d9e9a6954ecc004597456f2c82e7630b8139c"
+  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.76.0.tgz#bccf9ea4a6efc332a79d6a78f923697b9b283371"
-  integrity sha512-TAAlj7JCMF6hFFL71RmPzVX89ltyPYFWR+t4SuWaBmU6HmTliI2eJvK+M36oE+N7s3CkyRVTaXXRe0YMwRMuZQ==
+  integrity sha512-OACT7MfMHC/YGKnKST8SF1d6znr3Yu8fpUpfVVh2t9TNeh3+cQJVTOliHDqLy+k9Ljd5FtitgSn4IHtseCHDLQ==
   dependencies:
-    "@sentry-internal/tracing" "7.75.0"
+    "@sentry-internal/tracing" "7.76.0"
-    "@sentry/core" "7.75.0"
+    "@sentry/core" "7.76.0"
-    "@sentry/types" "7.75.0"
+    "@sentry/types" "7.76.0"
-    "@sentry/utils" "7.75.0"
+    "@sentry/utils" "7.76.0"
 
-"@sentry/types@7.75.0":
+"@sentry/types@7.76.0":
-  version "7.75.0"
+  version "7.76.0"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.75.0.tgz#e171f1680785a155cb828942af890ad4ee657ca3"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.76.0.tgz#628c9899bfa82ea762708314c50fd82f2138587d"
-  integrity sha512-xG8OLADxG7HpGhMxrF4v4tKq/v/gqmLsTZ858R51pz0xCWM8SK6ZSWOKudkAGBIpRjI6RUHMnkBtRAN2aKDOkQ==
+  integrity sha512-vj6z+EAbVrKAXmJPxSv/clpwS9QjPqzkraMFk2hIdE/kii8s8kwnkBwTSpIrNc8GnzV3qYC4r3qD+BXDxAGPaw==
 
-"@sentry/utils@7.75.0":
+"@sentry/utils@7.76.0":
-  version "7.75.0"
+  version "7.76.0"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.75.0.tgz#7a638c4c027ca2018518ee8d2eead1397cb97d66"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.76.0.tgz#6b540b387d3ac539abd20978f4d3ae235114f6ab"
-  integrity sha512-UHWKeevhUNRp+mAWDbMVFOMgseoq8t/xFgdUywO/2PC14qZKRBH+0k1BKoNkp5sOzDT06ETj2w6wYoYhy6i+dA==
+  integrity sha512-40jFD+yfQaKpFYINghdhovzec4IEpB7aAuyH/GtE7E0gLpcqnC72r55krEIVILfqIR2Mlr5OKUzyeoCyWAU/yw==
   dependencies:
-    "@sentry/types" "7.75.0"
+    "@sentry/types" "7.76.0"
 
-"@sentry/vercel-edge@7.75.0":
+"@sentry/vercel-edge@7.76.0":
-  version "7.75.0"
+  version "7.76.0"
-  resolved "https://registry.yarnpkg.com/@sentry/vercel-edge/-/vercel-edge-7.75.0.tgz#ef3cda5807b76692b210c3b89781116789af6504"
+  resolved "https://registry.yarnpkg.com/@sentry/vercel-edge/-/vercel-edge-7.76.0.tgz#8986d4b7cb1f1dcf0ed6e5f34d5b9ce441f707dc"
-  integrity sha512-A1ydzbyxoqgLidvgEW6saP2yts8xGTcxEcnETBI/8j95gQfQRwdtqWrYfYKHoTGMbMdGnE/UR4e+H1n1jL1CyQ==
+  integrity sha512-CU/besmv2SWNfVh4v7yVs1VknxU4aG7+kIW001wTYnaNXF8IjV8Bgyn0lDRxFuBXRcrTn8KJO/rUN7aJEmeg4Q==
   dependencies:
-    "@sentry/core" "7.75.0"
+    "@sentry/core" "7.76.0"
-    "@sentry/types" "7.75.0"
+    "@sentry/types" "7.76.0"
-    "@sentry/utils" "7.75.0"
+    "@sentry/utils" "7.76.0"
 
 "@sentry/webpack-plugin@1.20.0":
   version "1.20.0"
@@ -2600,9 +2600,9 @@
   integrity sha512-xQT2XxtDGP1WFfTB/Lti629HpguNrfZ3dg84bWXASd6JUay6WgR73Wb6DG3kmr2/iGAWZ7NNLceGVWYWfgPX0g==
 
 "@types/estree@*", "@types/estree@^1.0.0":
-  version "1.0.3"
+  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.3.tgz#2be19e759a3dd18c79f9f436bd7363556c1a73dd"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.4.tgz#d9748f5742171b26218516cf1828b8eafaf8a9fa"
-  integrity sha512-CS2rOaoQ/eAgAfcTfq6amKG7bsN+EMcgGY4FAFQdvSj2y1ixvOZTUA9mOtCai7E1SYu283XNw7urKK30nP3wkQ==
+  integrity sha512-2JwWnHK9H+wUZNorf2Zr6ves96WHoWDJIftkcxPKsS7Djta6Zu519LarhRNljPXkpsZR2ZMwNCPeW7omW07BJw==
 
 "@types/estree@0.0.39":
   version "0.0.39"
@@ -2702,11 +2702,11 @@
   integrity sha512-AuHIyzR5Hea7ij0P9q7vx7xu4z0C28ucwjAZC0ja7JhINyCnOw8/DnvAPQQ9TfOlCtZAmCERKQX9+o1mgQhuOQ==
 
 "@types/node@*", "@types/node@^20.5.2":
-  version "20.8.8"
+  version "20.8.9"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.8.8.tgz#adee050b422061ad5255fc38ff71b2bb96ea2a0e"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.8.9.tgz#646390b4fab269abce59c308fc286dcd818a2b08"
-  integrity sha512-YRsdVxq6OaLfmR9Hy816IMp33xOBjfyOgUd77ehqg96CFywxAPbDbXvAsuN2KVg2HOT8Eh6uAfU+l4WffwPVrQ==
+  integrity sha512-UzykFsT3FhHb1h7yD4CA4YhBHq545JC0YnEz41xkipN88eKQtL6rSgocL5tbAP6Ola9Izm/Aw4Ora8He4x0BHg==
   dependencies:
-    undici-types "~5.25.1"
+    undici-types "~5.26.4"
 
 "@types/node@18.0.6":
   version "18.0.6"
@@ -2979,9 +2979,9 @@ acorn@^7.4.0:
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
 acorn@^8.8.2, acorn@^8.9.0:
-  version "8.10.0"
+  version "8.11.2"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b"
-  integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
+  integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
 
 agent-base@6:
   version "6.0.2"
@@ -3234,9 +3234,9 @@ axe-core@^4.6.2:
   integrity sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==
 
 axios@^1.1.3, axios@^1.3.4:
-  version "1.5.1"
+  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.5.1.tgz#11fbaa11fc35f431193a9564109c88c1f27b585f"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.0.tgz#f1e5292f26b2fd5c2e66876adc5b06cdbd7d2102"
-  integrity sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==
+  integrity sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==
   dependencies:
     follow-redirects "^1.15.0"
     form-data "^4.0.0"
@@ -3428,9 +3428,9 @@ camelcase-css@^2.0.1:
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
 caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541:
-  version "1.0.30001553"
+  version "1.0.30001558"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001553.tgz#e64e7dc8fd4885cd246bb476471420beb5e474b5"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001558.tgz#d2c6e21fdbfe83817f70feab902421a19b7983ee"
-  integrity sha512-N0ttd6TrFfuqKNi+pMgWJTb9qrdJu4JSpgPFLe/lrD19ugC6fZgF0pUewRowDwzdDnb9V41mFcdlYgl/PyKf4A==
+  integrity sha512-/Et7DwLqpjS47JPEcz6VnxU9PwcIdVi0ciLXRWBQdj1XFye68pSQYpV0QtPTfUKWuOaEig+/Vez2l74eDc1tPQ==
 
 capital-case@^1.0.4:
   version "1.0.4"
@@ -3663,9 +3663,9 @@ cookie@^0.5.0:
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
 core-js-compat@^3.31.0, core-js-compat@^3.33.1:
-  version "3.33.1"
+  version "3.33.2"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.33.1.tgz#debe80464107d75419e00c2ee29f35982118ff84"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.33.2.tgz#3ea4563bfd015ad4e4b52442865b02c62aba5085"
-  integrity sha512-6pYKNOgD/j/bkC5xS5IIg6bncid3rfrI42oBH1SQJbsmYPKF7rhzcFzYCcxYMmNQQ0rCEB8WqpW7QHndOggaeQ==
+  integrity sha512-axfo+wxFVxnqf8RvxTzoAlzW4gRoacrHeoFlc9n0x50+7BEyZL/Rt3hicaED1/CEd7I6tPCPVUYcJwCMO5XUYw==
   dependencies:
     browserslist "^4.22.1"
 
@@ -4027,9 +4027,9 @@ ejs@^3.1.6:
     jake "^10.8.5"
 
 electron-to-chromium@^1.4.535:
-  version "1.4.566"
+  version "1.4.571"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.566.tgz#5c5ba1d2dc895f4887043f0cc7e61798c7e5919a"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.571.tgz#8aa71539eb82db98740c3ec861256cc34e0356fd"
-  integrity sha512-mv+fAy27uOmTVlUULy15U3DVJ+jg+8iyKH1bpwboCRhtDC69GKf1PPTZvEIhCyDr81RFqfxZJYrbgp933a1vtg==
+  integrity sha512-Sc+VtKwKCDj3f/kLBjdyjMpNzoZsU6WuL/wFb6EH8USmHEcebxRXcRrVpOpayxd52tuey4RUDpUsw5OS5LhJqg==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -5764,9 +5764,9 @@ jest-worker@^27.4.5:
     supports-color "^8.0.0"
 
 jiti@^1.19.1:
-  version "1.20.0"
+  version "1.21.0"
-  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.20.0.tgz#2d823b5852ee8963585c8dd8b7992ffc1ae83b42"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
-  integrity sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==
+  integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
 
 joycon@^3.0.1:
   version "3.1.1"
@@ -7221,9 +7221,9 @@ prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transfor
     prosemirror-model "^1.0.0"
 
 prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3, prosemirror-view@^1.27.0, prosemirror-view@^1.28.2, prosemirror-view@^1.31.0:
-  version "1.32.1"
+  version "1.32.2"
-  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.32.1.tgz#bcd0877f1673ffe5f94c1e966b6fbdadcd2d5bbf"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.32.2.tgz#e55fcf5b55847e3b9d9b7982c9a129ef237e60e1"
-  integrity sha512-9SnB4HBgRczzTyIMZLPE1iszegL04hNfUyS8uPtP1RPxNM2NTCiIs8KwNsJU4nbZO9rxJTwVTv7Jm3zU4CR78A==
+  integrity sha512-l2RQUGaiDI8SG8ZjWIkjT8yjGmNwdzMFMzQmxv/Kh8Vx+ICnz5R+K0mrOS16rhfjX7n2t4emU0goh7TerQC3mw==
   dependencies:
     prosemirror-model "^1.16.0"
     prosemirror-state "^1.0.0"
@@ -7243,9 +7243,9 @@ pump@^3.0.0:
     once "^1.3.1"
 
 punycode@^2.1.0:
-  version "2.3.0"
+  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
-  integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
+  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
 queue-microtask@^1.2.2:
   version "1.2.3"
@@ -8006,9 +8006,9 @@ stacktrace-parser@^0.1.10:
     type-fest "^0.7.1"
 
 streamx@^2.15.0:
-  version "2.15.1"
+  version "2.15.2"
-  resolved "https://registry.yarnpkg.com/streamx/-/streamx-2.15.1.tgz#396ad286d8bc3eeef8f5cea3f029e81237c024c6"
+  resolved "https://registry.yarnpkg.com/streamx/-/streamx-2.15.2.tgz#680eacebdc9c43ede7362c2e6695b34dd413c741"
-  integrity sha512-fQMzy2O/Q47rgwErk/eGeLu/roaFWV0jVsogDmrszM9uIw8L5OA+t+V93MgYlufNptfjmYR1tOMWhei/Eh7TQA==
+  integrity sha512-b62pAV/aeMjUoRN2C/9F0n+G8AfcJjNC0zw/ZmOHeFsIe4m4GzjVW9m6VHXVjk536NbdU9JRwKMJRfkc+zUFTg==
   dependencies:
     fast-fifo "^1.1.0"
     queue-tick "^1.0.1"
@@ -8198,9 +8198,9 @@ tailwindcss-animate@^1.0.6:
   integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
 
 tailwindcss@^3.2.7, tailwindcss@^3.3.3:
-  version "3.3.4"
+  version "3.3.5"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.4.tgz#f08c493ff3ddf03081c40e780e98f129e1c8214d"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.5.tgz#22a59e2fbe0ecb6660809d9cc5f3976b077be3b8"
-  integrity sha512-JXZNOkggUAc9T5E7nCrimoXHcSf9h3NWFe5sh36CGD/3M5TRLuQeFnQoDsit2uVTqgoOZHLx5rTykLUu16vsMQ==
+  integrity sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
@@ -8296,9 +8296,9 @@ terser-webpack-plugin@^5.3.3:
     terser "^5.16.8"
 
 terser@^5.0.0, terser@^5.16.8:
-  version "5.22.0"
+  version "5.23.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.22.0.tgz#4f18103f84c5c9437aafb7a14918273310a8a49d"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.23.0.tgz#a9c02bc3087d0f5b1cc63bbfb4fe0f7e5dbbde82"
-  integrity sha512-hHZVLgRA2z4NWcN6aS5rQDc+7Dcy58HOf2zbYwmFcQ+ua3h6eEFf5lIDKTzbWwlazPyOZsFQO8V80/IjVNExEw==
+  integrity sha512-Iyy83LN0uX9ZZLCX4Qbu5JiHiWjOCTwrmM9InWOzVeM++KNWEsqV4YgN9U9E8AlohQ6Gs42ztczlWOG/lwDAMA==
   dependencies:
     "@jridgewell/source-map" "^0.3.3"
     acorn "^8.8.2"
@@ -8357,9 +8357,9 @@ tiptap-markdown@^0.8.2:
     prosemirror-markdown "^1.11.1"
 
 tlds@^1.238.0:
-  version "1.243.0"
+  version "1.244.0"
-  resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.243.0.tgz#0dd9e6373633c495fa0c20fdafe9aaea6ff34550"
+  resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.244.0.tgz#b25468d18c53633706081434a337786f695d7662"
-  integrity sha512-jA0EMB5YFZFX2VqmK/Ra4O1UqDuWnpiw/9miYFdG1lVIDg6w9IsjlXK0TGlqFnzsnuBIpP5rCDFT2iPZNOfvqA==
+  integrity sha512-nkacnxHmN5USM/cpmPx29sc2/AnmvUA9han0tNtAJ9yOhh4bPmZm4dGhyg/isWBIES4a70mjd0Q8FSaof6Vf0g==
 
 to-fast-properties@^2.0.0:
   version "2.0.0"
@@ -8622,10 +8622,10 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
-undici-types@~5.25.1:
+undici-types@~5.26.4:
-  version "5.25.3"
+  version "5.26.5"
-  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.25.3.tgz#e044115914c85f0bcbb229f346ab739f064998c3"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
-  integrity sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"