chore: settings page refactoring (#2477)

* chore: implemented project layout and integrated sidebar component

* chore: implemented workspace layout and integrated sidebar component

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

@@ -1,28 +1,25 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
-import Link from "next/link";
 
 import useSWR from "swr";
-import { Disclosure, Transition } from "@headlessui/react";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
-// services
-import { ProjectService } from "services/project";
+import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout";
 // components
-import { DeleteProjectModal, ProjectDetailsForm, ProjectDetailsFormLoader, SettingsSidebar } from "components/project";
-import { BreadcrumbItem, Breadcrumbs, Button, Loader } from "@plane/ui";
-import { ChevronDown, ChevronUp } from "lucide-react";
-// helpers
-import { truncateText } from "helpers/string.helper";
+import { ProjectSettingHeader } from "components/headers";
+import {
+  DeleteProjectModal,
+  DeleteProjectSection,
+  ProjectDetailsForm,
+  ProjectDetailsFormLoader,
+} from "components/project";
 // types
 import type { NextPage } from "next";
 // fetch-keys
-import { USER_PROJECT_VIEW } from "constants/fetch-keys";
 import { useMobxStore } from "lib/mobx/store-provider";
 import { observer } from "mobx-react-lite";
 
 // services
-const projectService = new ProjectService();
+// const projectService = new ProjectService();
 
 const GeneralSettings: NextPage = observer(() => {
   const { project: projectStore } = useMobxStore();
@@ -33,9 +30,6 @@ const GeneralSettings: NextPage = observer(() => {
   const { workspaceSlug, projectId } = router.query;
   // derived values
   const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
-  console.log("projectDetails", projectDetails);
-  console.log("condition", workspaceSlug && projectId && !projectDetails);
-  console.log("wow", projectId);
   // api call to fetch project details
   useSWR(
     workspaceSlug && projectId ? "PROJECT_DETAILS" : null,
@@ -43,36 +37,15 @@ const GeneralSettings: NextPage = observer(() => {
       ? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString())
       : null
   );
-  // API call to fetch user privileges
-  const { data: memberDetails } = useSWR(
-    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
 
   // const currentNetwork = NETWORK_CHOICES.find((n) => n.key === projectDetails?.network);
   // const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
 
-  const isAdmin = memberDetails?.role === 20;
+  const isAdmin = projectDetails?.member_role === 20;
+  console.log("isAdmin", isAdmin);
 
   return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs onBack={() => router.back()}>
-          <BreadcrumbItem
-            link={
-              <Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}>
-                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
-                  <p className="truncate">{`${truncateText(projectDetails?.name ?? "Project", 32)}`}</p>
-                </a>
-              </Link>
-            }
-          />
-          <BreadcrumbItem title="General Settings" unshrinkTitle />
-        </Breadcrumbs>
-      }
-    >
+    <ProjectSettingLayout header={<ProjectSettingHeader title="General Settings" />}>
       {projectDetails && (
         <DeleteProjectModal
           project={projectDetails}
@@ -81,69 +54,21 @@ const GeneralSettings: NextPage = observer(() => {
         />
       )}
 
-      <div className="flex flex-row gap-2 h-full">
-        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
-          <SettingsSidebar />
-        </div>
-        <div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
-          {projectDetails && workspaceSlug ? (
-            <ProjectDetailsForm project={projectDetails} workspaceSlug={workspaceSlug.toString()} isAdmin={isAdmin} />
-          ) : (
-            <ProjectDetailsFormLoader />
-          )}
+      <div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
+        {projectDetails && workspaceSlug ? (
+          <ProjectDetailsForm project={projectDetails} workspaceSlug={workspaceSlug.toString()} isAdmin={isAdmin} />
+        ) : (
+          <ProjectDetailsFormLoader />
+        )}
 
-          {isAdmin && (
-            <Disclosure as="div" className="border-t border-custom-border-400">
-              {({ open }) => (
-                <div className="w-full">
-                  <Disclosure.Button
-                    as="button"
-                    type="button"
-                    className="flex items-center justify-between w-full py-4"
-                  >
-                    <span className="text-xl tracking-tight">Delete Project</span>
-                    {open ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
-                  </Disclosure.Button>
-
-                  <Transition
-                    show={open}
-                    enter="transition duration-100 ease-out"
-                    enterFrom="transform opacity-0"
-                    enterTo="transform opacity-100"
-                    leave="transition duration-75 ease-out"
-                    leaveFrom="transform opacity-100"
-                    leaveTo="transform opacity-0"
-                  >
-                    <Disclosure.Panel>
-                      <div className="flex flex-col gap-8">
-                        <span className="text-sm tracking-tight">
-                          The danger zone of the project delete page is a critical area that requires careful
-                          consideration and attention. When deleting a project, all of the data and resources within
-                          that project will be permanently removed and cannot be recovered.
-                        </span>
-                        <div>
-                          {projectDetails ? (
-                            <div>
-                              <Button variant="danger" onClick={() => setSelectedProject(projectDetails.id ?? null)}>
-                                Delete my project
-                              </Button>
-                            </div>
-                          ) : (
-                            <Loader className="mt-2 w-full">
-                              <Loader.Item height="38px" width="144px" />
-                            </Loader>
-                          )}
-                        </div>
-                      </div>
-                    </Disclosure.Panel>
-                  </Transition>
-                </div>
-              )}
-            </Disclosure>
-          )}
-        </div>
+        {isAdmin && (
+          <DeleteProjectSection
+            projectDetails={projectDetails}
+            handleDelete={() => setSelectedProject(projectDetails.id ?? null)}
+          />
+        )}
       </div>
-    </ProjectAuthorizationWrapper>
+    </ProjectSettingLayout>
   );
 });