From f31837bef4eec2bb0f90734153f604624a061b5c Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Mon, 23 Oct 2023 13:40:24 +0530 Subject: [PATCH 01/10] chore: pages layout refactor --- web/components/headers/index.ts | 1 + web/components/headers/pages.tsx | 73 ++++++ .../projects/[projectId]/pages/[pageId].tsx | 27 +-- .../projects/[projectId]/pages/index.tsx | 217 +++++++----------- 4 files changed, 165 insertions(+), 153 deletions(-) create mode 100644 web/components/headers/pages.tsx diff --git a/web/components/headers/index.ts b/web/components/headers/index.ts index c172fdb7aef..685361ae90c 100644 --- a/web/components/headers/index.ts +++ b/web/components/headers/index.ts @@ -13,3 +13,4 @@ export * from "./cycles"; export * from "./modules"; export * from "./project-settings"; export * from "./workspace-settings"; +export * from "./pages"; diff --git a/web/components/headers/pages.tsx b/web/components/headers/pages.tsx new file mode 100644 index 00000000000..cd6754c9ef2 --- /dev/null +++ b/web/components/headers/pages.tsx @@ -0,0 +1,73 @@ +import { FC } from "react"; +import Link from "next/link"; +import { useRouter } from "next/router"; +import { observer } from "mobx-react-lite"; +import { ArrowLeft, Plus } from "lucide-react"; +// hooks +import { useMobxStore } from "lib/mobx/store-provider"; +// ui +import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui"; +// helper +import { truncateText } from "helpers/string.helper"; + +export interface IPagesHeaderProps { + showButton?: boolean; +} + +export const PagesHeader: FC = observer((props) => { + const { showButton = false } = props; + const router = useRouter(); + const { workspaceSlug, projectId } = router.query; + + const { project: projectStore } = useMobxStore(); + + const projectDetails = + workspaceSlug && projectId + ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) + : undefined; + + return ( +
+
+
+ +
+
+ router.back()}> + + +

Projects

+ + + } + /> + + +
+
+ {showButton && ( +
+ +
+ )} +
+ ); +}); diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx index 5e2b41224a7..7c4cae55d2a 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx @@ -1,5 +1,4 @@ import React, { useEffect, useRef, useState } from "react"; -import Link from "next/link"; import { useRouter } from "next/router"; @@ -22,21 +21,22 @@ import { IssueLabelService } from "services/issue"; import useToast from "hooks/use-toast"; import useUser from "hooks/use-user"; // layouts -import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy"; +import { AppLayout } from "layouts/app-layout"; // components import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages"; import { CreateLabelModal } from "components/labels"; import { CreateBlock } from "components/pages/create-block"; +import { PagesHeader } from "components/headers"; // ui import { EmptyState } from "components/common"; -import { BreadcrumbItem, Breadcrumbs, CustomSearchSelect, TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui"; +import { CustomSearchSelect, TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui"; // images import emptyPage from "public/empty-state/page.svg"; // icons import { ArrowLeft, Lock, LinkIcon, Palette, Plus, Star, Unlock, X, ChevronDown } from "lucide-react"; // helpers import { render24HourFormatTime, renderShortDate } from "helpers/date-time.helper"; -import { copyTextToClipboard, truncateText } from "helpers/string.helper"; +import { copyTextToClipboard } from "helpers/string.helper"; import { orderArrayBy } from "helpers/array.helper"; // types import type { NextPage } from "next"; @@ -303,22 +303,7 @@ const SinglePage: NextPage = () => { }, [memberDetails]); return ( - router.back()}> - - -

Projects

- - - } - /> - - - } - > + } withProjectWrapper> {error ? ( { )} - + ); }; diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx index 75523736199..18972da31b1 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx @@ -1,33 +1,24 @@ import { useState, Fragment } from "react"; -import Link from "next/link"; import { useRouter } from "next/router"; import dynamic from "next/dynamic"; -import useSWR from "swr"; - // headless ui import { Tab } from "@headlessui/react"; -// services -import { ProjectService } from "services/project"; // hooks import useLocalStorage from "hooks/use-local-storage"; import useUserAuth from "hooks/use-user-auth"; // icons -import { LayoutGrid, List, Plus } from "lucide-react"; +import { LayoutGrid, List } from "lucide-react"; // layouts -import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy"; +import { AppLayout } from "layouts/app-layout"; // components import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "components/pages"; -// ui -import { BreadcrumbItem, Breadcrumbs, Button } from "@plane/ui"; +import { PagesHeader } from "components/headers"; // types import { TPageViewProps } from "types"; import type { NextPage } from "next"; // fetch-keys -import { PROJECT_DETAILS } from "constants/fetch-keys"; -// helper -import { truncateText } from "helpers/string.helper"; const AllPagesList = dynamic(() => import("components/pages").then((a) => a.AllPagesList), { ssr: false, @@ -47,9 +38,6 @@ const OtherPagesList = dynamic(() => import("components/pages") const tabsList = ["Recent", "All", "Favorites", "Created by me", "Created by others"]; -// services -const projectService = new ProjectService(); - const ProjectPages: NextPage = () => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; @@ -61,11 +49,6 @@ const ProjectPages: NextPage = () => { const { storedValue: pageTab, setValue: setPageTab } = useLocalStorage("pageTab", "Recent"); - const { data: projectDetails } = useSWR( - workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null, - workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null - ); - const currentTabValue = (tab: string | null) => { switch (tab) { case "Recent": @@ -85,7 +68,7 @@ const ProjectPages: NextPage = () => { }; return ( - <> + } withProjectWrapper> {workspaceSlug && projectId && ( { projectId={projectId.toString()} /> )} - - router.back()}> - - -

Projects

- - - } - /> - - - } - right={ - - } - > -
-
-

Pages

-
- - -
+
+
+

Pages

+
+ +
- { - switch (i) { - case 0: - return setPageTab("Recent"); - case 1: - return setPageTab("All"); - case 2: - return setPageTab("Favorites"); - case 3: - return setPageTab("Created by me"); - case 4: - return setPageTab("Created by others"); - - default: - return setPageTab("Recent"); - } - }} - > - -
- {tabsList.map((tab, index) => ( - - `rounded-full border px-5 py-1.5 text-sm outline-none ${ - selected - ? "border-custom-primary bg-custom-primary text-white" - : "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90" - }` - } - > - {tab} - - ))} -
- - - - - - - - - - - - - - - - - - -
- - + { + switch (i) { + case 0: + return setPageTab("Recent"); + case 1: + return setPageTab("All"); + case 2: + return setPageTab("Favorites"); + case 3: + return setPageTab("Created by me"); + case 4: + return setPageTab("Created by others"); + + default: + return setPageTab("Recent"); + } + }} + > + +
+ {tabsList.map((tab, index) => ( + + `rounded-full border px-5 py-1.5 text-sm outline-none ${ + selected + ? "border-custom-primary bg-custom-primary text-white" + : "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90" + }` + } + > + {tab} + + ))} +
+ + + + + + + + + + + + + + + + + + + +
+ ); }; From 6fe5c57bd669fb777f48d09cd82b336af5424e22 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Mon, 23 Oct 2023 14:39:01 +0530 Subject: [PATCH 02/10] chore: view layout refactor --- .../headers/project-view-issues.tsx | 113 ++++++++++++---- web/components/headers/project-views.tsx | 124 ++++++++---------- .../projects/[projectId]/views/[viewId].tsx | 105 +-------------- .../projects/[projectId]/views/index.tsx | 7 +- 4 files changed, 147 insertions(+), 202 deletions(-) diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx index 71026ce7427..947fc67ab01 100644 --- a/web/components/headers/project-view-issues.tsx +++ b/web/components/headers/project-view-issues.tsx @@ -1,26 +1,35 @@ -import { useCallback } from "react"; +import { FC, useCallback } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; - -// mobx store +import { ArrowLeft } from "lucide-react"; +// hooks import { useMobxStore } from "lib/mobx/store-provider"; +// ui +import { Breadcrumbs, BreadcrumbItem, CustomMenu, PhotoFilterIcon } from "@plane/ui"; // components import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues"; +// helper +import { truncateText } from "helpers/string.helper"; // types import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types"; // constants import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue"; -export const ProjectViewIssuesHeader: React.FC = observer(() => { +export const ProjectViewIssueHeader: FC = observer(() => { const router = useRouter(); const { workspaceSlug, projectId, viewId } = router.query; const { issueFilter: issueFilterStore, projectViewFilters: projectViewFiltersStore, + projectViews: projectViewsStore, project: projectStore, } = useMobxStore(); + const views = projectId && viewId ? projectViewsStore.viewsList[projectId.toString()] : undefined; + + const viewDetails = viewId ? projectViewsStore.viewDetails[viewId.toString()] : undefined; + const storedFilters = viewId ? projectViewFiltersStore.storedFilters[viewId.toString()] : undefined; const activeLayout = issueFilterStore.userDisplayFilters.layout; @@ -82,32 +91,80 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => { [issueFilterStore, projectId, workspaceSlug] ); + const projectDetails = + workspaceSlug && projectId + ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) + : undefined; + return ( -
- handleLayoutChange(layout)} - selectedLayout={activeLayout} - /> - - m.member)} - states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined} - /> - - - +
+
+ +
+
+ router.back()}> + + + + +
+ + + {viewDetails?.name && truncateText(viewDetails.name, 40)} + + } + className="ml-1.5" + width="auto" + > + {views?.map((view) => ( + router.push(`/${workspaceSlug}/projects/${projectId}/views/${view.id}`)} + > + {truncateText(view.name, 40)} + + ))} + +
+
+ handleLayoutChange(layout)} + selectedLayout={activeLayout} /> - + + m.member)} + states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined} + /> + + + + +
); }); diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx index e72b97c4742..12b3d87e874 100644 --- a/web/components/headers/project-views.tsx +++ b/web/components/headers/project-views.tsx @@ -1,82 +1,66 @@ -import { FC, useState } from "react"; +import { FC } from "react"; +import Link from "next/link"; import { useRouter } from "next/router"; -// icons -import { ArrowLeft, Link, Plus } from "lucide-react"; -// components -import { CreateUpdateProjectViewModal } from "components/views"; -// components -import { Breadcrumbs, BreadcrumbItem } from "@plane/ui"; +import { observer } from "mobx-react-lite"; +import { ArrowLeft, Plus } from "lucide-react"; +// hooks +import { useMobxStore } from "lib/mobx/store-provider"; // ui -import { PrimaryButton } from "components/ui"; -// helpers +import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui"; +// helper import { truncateText } from "helpers/string.helper"; -interface IProjectViewsHeader { - title: string | undefined; -} - -export const ProjectViewsHeader: FC = (props) => { - const { title } = props; - // router +export const ProjectViewsHeader: FC = observer(() => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; - // states - const [createViewModal, setCreateViewModal] = useState(false); + + const { project: projectStore } = useMobxStore(); + + const projectDetails = + workspaceSlug && projectId + ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) + : undefined; return ( - <> - {workspaceSlug && projectId && ( - setCreateViewModal(false)} - workspaceSlug={workspaceSlug.toString()} - projectId={projectId.toString()} - /> - )} -
-
-
- -
-
- router.back()}> - - -

Projects

- - - } - /> - - -
+
+
+
+
-
-
- { - const e = new KeyboardEvent("keydown", { key: "v" }); - document.dispatchEvent(e); - }} - > - - Create View - -
+
+ router.back()}> + + +

Projects

+ + + } + /> + +
- +
+ +
+
); -}; +}); diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx index 87b230e35e5..37f202ba13d 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx @@ -1,105 +1,14 @@ -import { useRouter } from "next/router"; -import Link from "next/link"; - -import useSWR from "swr"; - -// services -import { ProjectService } from "services/project"; -import { ViewService } from "services/view.service"; // layouts -import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy"; +import { AppLayout } from "layouts/app-layout"; // components import { ProjectViewLayoutRoot } from "components/issues"; -// ui -import { BreadcrumbItem, Breadcrumbs, CustomMenu, PhotoFilterIcon } from "@plane/ui"; -import { EmptyState } from "components/common"; -// icons -// images -import emptyView from "public/empty-state/view.svg"; -// helpers -import { truncateText } from "helpers/string.helper"; // fetch-keys -import { PROJECT_DETAILS, VIEWS_LIST, VIEW_DETAILS } from "constants/fetch-keys"; -import { ProjectViewIssuesHeader } from "components/headers"; - -// services -const projectService = new ProjectService(); -const viewService = new ViewService(); - -const SingleView: React.FC = () => { - const router = useRouter(); - const { workspaceSlug, projectId, viewId } = router.query; - - const { data: activeProject } = useSWR( - workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null, - workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null - ); - - const { data: views } = useSWR( - workspaceSlug && projectId ? VIEWS_LIST(projectId as string) : null, - workspaceSlug && projectId ? () => viewService.getViews(workspaceSlug as string, projectId as string) : null - ); - - const { data: viewDetails, error } = useSWR( - workspaceSlug && projectId && viewId ? VIEW_DETAILS(viewId as string) : null, - workspaceSlug && projectId && viewId - ? () => viewService.getViewDetails(workspaceSlug as string, projectId as string, viewId as string) - : null - ); +import { ProjectViewIssueHeader } from "components/headers"; - return ( - router.back()}> - - -

{`${activeProject?.name ?? "Project"} Views`}

- - - } - /> - - } - left={ - - - {viewDetails?.name && truncateText(viewDetails.name, 40)} - - } - className="ml-1.5" - width="auto" - > - {views?.map((view) => ( - router.push(`/${workspaceSlug}/projects/${projectId}/views/${view.id}`)} - > - {truncateText(view.name, 40)} - - ))} - - } - right={} - > - {error ? ( - router.push(`/${workspaceSlug}/projects/${projectId}/views`), - }} - /> - ) : ( - - )} - - ); -}; +const SingleView: React.FC = () => ( + }> + + +); export default SingleView; diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx index aad472e75b3..5b6eb1b3d7e 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx @@ -30,13 +30,8 @@ const ProjectViews: NextPage = () => { : null ); - const projectDetails = - workspaceSlug && projectId - ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) - : undefined; - return ( - }> + }> ); From 28aa89ce031a9a3cf1b6825e1492dff0e1f4ca50 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Mon, 23 Oct 2023 14:40:42 +0530 Subject: [PATCH 03/10] chore: view layout refactor --- .../[workspaceSlug]/projects/[projectId]/views/[viewId].tsx | 2 +- web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx index 37f202ba13d..d7c50239afe 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx @@ -6,7 +6,7 @@ import { ProjectViewLayoutRoot } from "components/issues"; import { ProjectViewIssueHeader } from "components/headers"; const SingleView: React.FC = () => ( - }> + } withProjectWrapper> ); diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx index 5b6eb1b3d7e..ac10d901c9f 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx @@ -31,7 +31,7 @@ const ProjectViews: NextPage = () => { ); return ( - }> + } withProjectWrapper> ); From 51600144f2f75bc9d80ae5b2d42693ca5ad6bc28 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Mon, 23 Oct 2023 14:52:20 +0530 Subject: [PATCH 04/10] chore: inbox layout refactor --- web/components/headers/project-inbox.tsx | 70 +++++++++++++++---- .../projects/[projectId]/inbox/[inboxId].tsx | 34 ++------- 2 files changed, 60 insertions(+), 44 deletions(-) diff --git a/web/components/headers/project-inbox.tsx b/web/components/headers/project-inbox.tsx index a45eca0fddf..f51612bfd7f 100644 --- a/web/components/headers/project-inbox.tsx +++ b/web/components/headers/project-inbox.tsx @@ -1,21 +1,63 @@ -import { useState } from "react"; - +import { FC, useState } from "react"; +import Link from "next/link"; +import { useRouter } from "next/router"; +import { observer } from "mobx-react-lite"; +import { ArrowLeft, Plus } from "lucide-react"; +// hooks +import { useMobxStore } from "lib/mobx/store-provider"; +// ui +import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui"; // components import { CreateInboxIssueModal } from "components/inbox"; -// ui -import { Button } from "@plane/ui"; -// icons -import { Plus } from "lucide-react"; +// helper +import { truncateText } from "helpers/string.helper"; -export const ProjectInboxHeader = () => { +export const ProjectInboxHeader: FC = observer(() => { + const router = useRouter(); + const { workspaceSlug, projectId } = router.query; const [createIssueModal, setCreateIssueModal] = useState(false); + const { project: projectStore } = useMobxStore(); + + const projectDetails = + workspaceSlug && projectId + ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) + : undefined; + return ( - <> - setCreateIssueModal(false)} /> - - +
+
+
+ +
+
+ router.back()}> + + +

Projects

+ + + } + /> + + +
+
+ +
+ setCreateIssueModal(false)} /> + +
+
); -}; +}); diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx index f53d8f25c30..f1c6e2e4cd7 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx @@ -1,30 +1,20 @@ import { useRouter } from "next/router"; -import Link from "next/link"; import { NextPage } from "next"; import useSWR from "swr"; // hooks import { useMobxStore } from "lib/mobx/store-provider"; // layouts -import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy"; +import { AppLayout } from "layouts/app-layout"; // components import { InboxActionsHeader, InboxMainContent, InboxIssuesListSidebar } from "components/inbox"; import { ProjectInboxHeader } from "components/headers"; -// helper -import { truncateText } from "helpers/string.helper"; -// ui -import { BreadcrumbItem, Breadcrumbs } from "@plane/ui"; const ProjectInbox: NextPage = () => { const router = useRouter(); const { workspaceSlug, projectId, inboxId } = router.query; - const { inboxFilters: inboxFiltersStore, project: projectStore } = useMobxStore(); - - const projectDetails = - workspaceSlug && projectId - ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) - : undefined; + const { inboxFilters: inboxFiltersStore } = useMobxStore(); useSWR( workspaceSlug && projectId && inboxId ? `INBOX_FILTERS_${inboxId.toString()}` : null, @@ -34,23 +24,7 @@ const ProjectInbox: NextPage = () => { ); return ( - router.back()}> - - -

Projects

- - - } - /> - - - } - right={} - > + } withProjectWrapper>
@@ -60,7 +34,7 @@ const ProjectInbox: NextPage = () => {
- + ); }; From 361b1c3cf97c33b56280e9344cbe06663ce198f0 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Mon, 23 Oct 2023 15:26:14 +0530 Subject: [PATCH 05/10] chore: draft issue layout refactor --- web/components/headers/index.ts | 1 + .../headers/project-draft-issues.tsx | 45 ++++++++++++++++++ .../[projectId]/draft-issues/index.tsx | 46 ++----------------- 3 files changed, 50 insertions(+), 42 deletions(-) create mode 100644 web/components/headers/project-draft-issues.tsx diff --git a/web/components/headers/index.ts b/web/components/headers/index.ts index 685361ae90c..692d82ef30f 100644 --- a/web/components/headers/index.ts +++ b/web/components/headers/index.ts @@ -14,3 +14,4 @@ export * from "./modules"; export * from "./project-settings"; export * from "./workspace-settings"; export * from "./pages"; +export * from "./project-draft-issues"; diff --git a/web/components/headers/project-draft-issues.tsx b/web/components/headers/project-draft-issues.tsx new file mode 100644 index 00000000000..8e7f12f68f2 --- /dev/null +++ b/web/components/headers/project-draft-issues.tsx @@ -0,0 +1,45 @@ +import { FC } from "react"; +import { useRouter } from "next/router"; +import { observer } from "mobx-react-lite"; +import { ArrowLeft } from "lucide-react"; +// hooks +import { useMobxStore } from "lib/mobx/store-provider"; +// ui +import { Breadcrumbs, BreadcrumbItem } from "@plane/ui"; +// helper +import { truncateText } from "helpers/string.helper"; + +export const ProjectDraftIssueHeader: FC = observer(() => { + const router = useRouter(); + const { workspaceSlug, projectId } = router.query; + + const { project: projectStore } = useMobxStore(); + + const projectDetails = + workspaceSlug && projectId + ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) + : undefined; + + return ( +
+
+
+ +
+
+ router.back()}> + + + + +
+
+
+ ); +}); diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx index 13c55e20535..feaeea20cf0 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx @@ -1,60 +1,22 @@ import { useRouter } from "next/router"; -import Link from "next/link"; - -import useSWR from "swr"; - -// services -import { ProjectService } from "services/project"; // layouts -import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy"; +import { AppLayout } from "layouts/app-layout"; // contexts import { IssueViewContextProvider } from "contexts/issue-view.context"; -// helper -import { truncateText } from "helpers/string.helper"; // ui -import { BreadcrumbItem, Breadcrumbs } from "@plane/ui"; +import { ProjectDraftIssueHeader } from "components/headers"; // icons import { X, PenSquare } from "lucide-react"; // types import type { NextPage } from "next"; -// fetch-keys -import { PROJECT_DETAILS } from "constants/fetch-keys"; - -// services -const projectService = new ProjectService(); const ProjectDraftIssues: NextPage = () => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; - const { data: projectDetails } = useSWR( - workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null, - workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null - ); - return ( - router.back()}> - - -

Projects

- - - } - /> - - - } - // right={ - //
- // - //
- // } - > + } withProjectWrapper>
- + ); }; From 3320893447955df5a0d99e0e7cc76995586e541a Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Mon, 23 Oct 2023 15:45:12 +0530 Subject: [PATCH 06/10] chore: archived issue layout refactor --- web/components/headers/index.ts | 1 + .../headers/project-archived-issues.tsx | 74 +++++++++++++++++++ .../archived-issues/[archivedIssueId].tsx | 35 ++------- 3 files changed, 80 insertions(+), 30 deletions(-) create mode 100644 web/components/headers/project-archived-issues.tsx diff --git a/web/components/headers/index.ts b/web/components/headers/index.ts index 692d82ef30f..269c8bce2d9 100644 --- a/web/components/headers/index.ts +++ b/web/components/headers/index.ts @@ -15,3 +15,4 @@ export * from "./project-settings"; export * from "./workspace-settings"; export * from "./pages"; export * from "./project-draft-issues"; +export * from "./project-archived-issues"; diff --git a/web/components/headers/project-archived-issues.tsx b/web/components/headers/project-archived-issues.tsx new file mode 100644 index 00000000000..d323a11ce05 --- /dev/null +++ b/web/components/headers/project-archived-issues.tsx @@ -0,0 +1,74 @@ +import { FC } from "react"; +import useSWR from "swr"; +import Link from "next/link"; +import { useRouter } from "next/router"; +import { observer } from "mobx-react-lite"; +import { ArrowLeft } from "lucide-react"; +// hooks +import { useMobxStore } from "lib/mobx/store-provider"; +// ui +import { Breadcrumbs, BreadcrumbItem } from "@plane/ui"; +// helper +import { truncateText } from "helpers/string.helper"; +// types +import { IIssue } from "types"; +// constants +import { ISSUE_DETAILS } from "constants/fetch-keys"; +// services +import { IssueArchiveService } from "services/issue"; + +const issueArchiveService = new IssueArchiveService(); + +export const ProjectArchivedIssueHeader: FC = observer(() => { + const router = useRouter(); + const { workspaceSlug, projectId, archivedIssueId } = router.query; + + const { project: projectStore } = useMobxStore(); + + const projectDetails = + workspaceSlug && projectId + ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) + : undefined; + + const { data: issueDetails } = useSWR( + workspaceSlug && projectId && archivedIssueId ? ISSUE_DETAILS(archivedIssueId as string) : null, + workspaceSlug && projectId && archivedIssueId + ? () => + issueArchiveService.retrieveArchivedIssue( + workspaceSlug as string, + projectId as string, + archivedIssueId as string + ) + : null + ); + + return ( +
+
+
+ +
+ +
+
+ ); +}); diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx index a0cca15b1a2..39392e3011f 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx @@ -1,7 +1,6 @@ import React, { useCallback, useEffect, useState } from "react"; import { useRouter } from "next/router"; -import Link from "next/link"; import useSWR, { mutate } from "swr"; @@ -13,11 +12,12 @@ import { IssueService, IssueArchiveService } from "services/issue"; import useUserAuth from "hooks/use-user-auth"; import useToast from "hooks/use-toast"; // layouts -import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy"; +import { AppLayout } from "layouts/app-layout"; // components import { IssueDetailsSidebar, IssueMainContent } from "components/issues"; +import { ProjectArchivedIssueHeader } from "components/headers"; // ui -import { ArchiveIcon, Breadcrumbs, Loader } from "@plane/ui"; +import { ArchiveIcon, Loader } from "@plane/ui"; // icons import { History } from "lucide-react"; // types @@ -25,8 +25,6 @@ import { IIssue } from "types"; import type { NextPage } from "next"; // fetch-keys import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys"; -// helper -import { truncateText } from "helpers/string.helper"; const defaultValues: Partial = { name: "", @@ -143,30 +141,7 @@ const ArchivedIssueDetailsPage: NextPage = () => { }; return ( - router.back()}> - - -

{`${truncateText( - issueDetails?.project_detail.name ?? "Project", - 32 - )} Issues`}

- - - } - /> - - - } - > + } withProjectWrapper> {issueDetails && projectId ? (
@@ -217,7 +192,7 @@ const ArchivedIssueDetailsPage: NextPage = () => {
)} - + ); }; From fdc2d5a54092eca19600cdbca559b0016515b31e Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Mon, 23 Oct 2023 15:48:47 +0530 Subject: [PATCH 07/10] chore: draft issue header layout fix --- web/components/headers/project-draft-issues.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/web/components/headers/project-draft-issues.tsx b/web/components/headers/project-draft-issues.tsx index 8e7f12f68f2..88c5ac46a13 100644 --- a/web/components/headers/project-draft-issues.tsx +++ b/web/components/headers/project-draft-issues.tsx @@ -1,4 +1,5 @@ import { FC } from "react"; +import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { ArrowLeft } from "lucide-react"; @@ -34,9 +35,17 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
router.back()}> - - - + + +

Projects

+ + + } + /> + +
From c3d0b2b01720303187b326dce9aa75172377ad51 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Mon, 23 Oct 2023 16:27:46 +0530 Subject: [PATCH 08/10] chore: layout code refactor --- web/components/headers/cycles.tsx | 11 +--- web/components/headers/index.ts | 2 + web/components/headers/modules.tsx | 11 +--- web/components/headers/pages.tsx | 11 +--- .../headers/profile-preferences.tsx | 10 --- .../project-archived-issue-details.tsx | 64 +++++++++++++++++++ .../headers/project-archived-issues.tsx | 44 ++----------- .../headers/project-draft-issues.tsx | 10 --- web/components/headers/project-inbox.tsx | 11 +--- .../headers/project-issue-details.tsx | 58 +++++++++++++++++ web/components/headers/project-settings.tsx | 10 --- .../headers/project-view-issues.tsx | 10 --- web/components/headers/project-views.tsx | 11 +--- web/components/headers/projects.tsx | 11 +--- web/components/headers/workspace-settings.tsx | 10 --- .../archived-issues/[archivedIssueId].tsx | 4 +- .../[projectId]/archived-issues/index.tsx | 46 ++----------- .../projects/[projectId]/issues/[issueId].tsx | 35 ++-------- web/pages/invitations/index.tsx | 6 +- 19 files changed, 150 insertions(+), 225 deletions(-) create mode 100644 web/components/headers/project-archived-issue-details.tsx create mode 100644 web/components/headers/project-issue-details.tsx diff --git a/web/components/headers/cycles.tsx b/web/components/headers/cycles.tsx index 7ab4e6f0240..b2682823a10 100644 --- a/web/components/headers/cycles.tsx +++ b/web/components/headers/cycles.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { useRouter } from "next/router"; import Link from "next/link"; -import { ArrowLeft, Plus } from "lucide-react"; +import { Plus } from "lucide-react"; // ui import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui"; // helpers @@ -23,15 +23,6 @@ export const CyclesHeader: React.FC = (props) => { className={`relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`} >
-
- -
router.back()}> = (props) => { className={`relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`} >
-
- -
router.back()}> = observer((props) => { return (
-
- -
router.back()}> { className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`} >
-
- -
router.back()}> diff --git a/web/components/headers/project-archived-issue-details.tsx b/web/components/headers/project-archived-issue-details.tsx new file mode 100644 index 00000000000..8c659431e86 --- /dev/null +++ b/web/components/headers/project-archived-issue-details.tsx @@ -0,0 +1,64 @@ +import { FC } from "react"; +import useSWR from "swr"; +import Link from "next/link"; +import { useRouter } from "next/router"; +import { observer } from "mobx-react-lite"; +// hooks +import { useMobxStore } from "lib/mobx/store-provider"; +// ui +import { Breadcrumbs, BreadcrumbItem } from "@plane/ui"; +// helper +import { truncateText } from "helpers/string.helper"; +// types +import { IIssue } from "types"; +// constants +import { ISSUE_DETAILS } from "constants/fetch-keys"; +// services +import { IssueArchiveService } from "services/issue"; + +const issueArchiveService = new IssueArchiveService(); + +export const ProjectArchivedIssueDetailsHeader: FC = observer(() => { + const router = useRouter(); + const { workspaceSlug, projectId, archivedIssueId } = router.query; + + const { project: projectStore } = useMobxStore(); + + const projectDetails = + workspaceSlug && projectId + ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) + : undefined; + + const { data: issueDetails } = useSWR( + workspaceSlug && projectId && archivedIssueId ? ISSUE_DETAILS(archivedIssueId as string) : null, + workspaceSlug && projectId && archivedIssueId + ? () => + issueArchiveService.retrieveArchivedIssue( + workspaceSlug as string, + projectId as string, + archivedIssueId as string + ) + : null + ); + + return ( + + ); +}); diff --git a/web/components/headers/project-archived-issues.tsx b/web/components/headers/project-archived-issues.tsx index d323a11ce05..a40ab9e6001 100644 --- a/web/components/headers/project-archived-issues.tsx +++ b/web/components/headers/project-archived-issues.tsx @@ -1,27 +1,17 @@ import { FC } from "react"; -import useSWR from "swr"; import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; -import { ArrowLeft } from "lucide-react"; // hooks import { useMobxStore } from "lib/mobx/store-provider"; // ui import { Breadcrumbs, BreadcrumbItem } from "@plane/ui"; // helper import { truncateText } from "helpers/string.helper"; -// types -import { IIssue } from "types"; -// constants -import { ISSUE_DETAILS } from "constants/fetch-keys"; -// services -import { IssueArchiveService } from "services/issue"; -const issueArchiveService = new IssueArchiveService(); - -export const ProjectArchivedIssueHeader: FC = observer(() => { +export const ProjectArchivedIssuesHeader: FC = observer(() => { const router = useRouter(); - const { workspaceSlug, projectId, archivedIssueId } = router.query; + const { workspaceSlug, projectId } = router.query; const { project: projectStore } = useMobxStore(); @@ -30,42 +20,18 @@ export const ProjectArchivedIssueHeader: FC = observer(() => { ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) : undefined; - const { data: issueDetails } = useSWR( - workspaceSlug && projectId && archivedIssueId ? ISSUE_DETAILS(archivedIssueId as string) : null, - workspaceSlug && projectId && archivedIssueId - ? () => - issueArchiveService.retrieveArchivedIssue( - workspaceSlug as string, - projectId as string, - archivedIssueId as string - ) - : null - ); - return (
diff --git a/web/components/headers/project-draft-issues.tsx b/web/components/headers/project-draft-issues.tsx index 88c5ac46a13..125dccadd4e 100644 --- a/web/components/headers/project-draft-issues.tsx +++ b/web/components/headers/project-draft-issues.tsx @@ -2,7 +2,6 @@ import { FC } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; -import { ArrowLeft } from "lucide-react"; // hooks import { useMobxStore } from "lib/mobx/store-provider"; // ui @@ -24,15 +23,6 @@ export const ProjectDraftIssueHeader: FC = observer(() => { return (
-
- -
router.back()}> { return (
-
- -
router.back()}> { + const router = useRouter(); + const { workspaceSlug, projectId, issueId } = router.query; + + const { data: issueDetails } = useSWR( + workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null, + workspaceSlug && projectId && issueId + ? () => issueService.retrieve(workspaceSlug as string, projectId as string, issueId as string) + : null + ); + + return ( + + ); +}); diff --git a/web/components/headers/project-settings.tsx b/web/components/headers/project-settings.tsx index e2891de4cf3..44271a76e3f 100644 --- a/web/components/headers/project-settings.tsx +++ b/web/components/headers/project-settings.tsx @@ -2,7 +2,6 @@ import { FC } from "react"; import { useRouter } from "next/router"; import Link from "next/link"; -import { ArrowLeft } from "lucide-react"; // ui import { BreadcrumbItem, Breadcrumbs } from "@plane/ui"; // helper @@ -28,15 +27,6 @@ export const ProjectSettingHeader: FC = observer((props) className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`} >
-
- -
router.back()}> { return (
-
- -
router.back()}> diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx index 12b3d87e874..de2b24f9b71 100644 --- a/web/components/headers/project-views.tsx +++ b/web/components/headers/project-views.tsx @@ -2,7 +2,7 @@ import { FC } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; -import { ArrowLeft, Plus } from "lucide-react"; +import { Plus } from "lucide-react"; // hooks import { useMobxStore } from "lib/mobx/store-provider"; // ui @@ -24,15 +24,6 @@ export const ProjectViewsHeader: FC = observer(() => { return (
-
- -
router.back()}> { className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`} >
-
- -
router.back()}> = observer((pro className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`} >
-
- -
router.back()}> { }; return ( - } withProjectWrapper> + } withProjectWrapper> {issueDetails && projectId ? (
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx index a9c7740174c..75e92448ec2 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx @@ -1,60 +1,24 @@ import { useRouter } from "next/router"; -import Link from "next/link"; -import useSWR from "swr"; - -// services -import { ProjectService } from "services/project"; // layouts -import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy"; +import { AppLayout } from "layouts/app-layout"; // contexts import { IssueViewContextProvider } from "contexts/issue-view.context"; -// helper -import { truncateText } from "helpers/string.helper"; // ui -import { ArchiveIcon, BreadcrumbItem, Breadcrumbs } from "@plane/ui"; +import { ArchiveIcon } from "@plane/ui"; +import { ProjectArchivedIssuesHeader } from "components/headers"; // icons import { X } from "lucide-react"; // types import type { NextPage } from "next"; -// fetch-keys -import { PROJECT_DETAILS } from "constants/fetch-keys"; - -// services -const projectService = new ProjectService(); const ProjectArchivedIssues: NextPage = () => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; - const { data: projectDetails } = useSWR( - workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null, - workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null - ); - return ( - router.back()}> - - -

Projects

- - - } - /> - - - } - // right={ - //
- // - //
- // } - > + } withProjectWrapper>
{/* */}
- + ); }; diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx index f7d9d9ed8af..af942ef477f 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx @@ -1,8 +1,6 @@ import React, { useCallback, useEffect } from "react"; import { useRouter } from "next/router"; -import Link from "next/link"; - import useSWR, { mutate } from "swr"; // react-hook-form @@ -12,12 +10,13 @@ import { IssueService } from "services/issue"; // hooks import useUserAuth from "hooks/use-user-auth"; // layouts -import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy"; +import { AppLayout } from "layouts/app-layout"; // components +import { ProjectIssueDetailsHeader } from "components/headers"; import { IssueDetailsSidebar, IssueMainContent } from "components/issues"; // ui import { EmptyState } from "components/common"; -import { Breadcrumbs, Loader } from "@plane/ui"; +import { Loader } from "@plane/ui"; // images import emptyIssue from "public/empty-state/issue.svg"; // types @@ -26,7 +25,6 @@ import type { NextPage } from "next"; // fetch-keys import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys"; // helper -import { truncateText } from "helpers/string.helper"; const defaultValues: Partial = { assignees_list: [], @@ -118,30 +116,7 @@ const IssueDetailsPage: NextPage = () => { }, [issueDetails, reset, issueId]); return ( - router.back()}> - - -

{`${truncateText( - issueDetails?.project_detail.name ?? "Project", - 32 - )} Issues`}

- - - } - /> - - - } - > + } withProjectWrapper> {error ? ( {
)} - + ); }; diff --git a/web/pages/invitations/index.tsx b/web/pages/invitations/index.tsx index 799bdf609f9..ef38d1341a4 100644 --- a/web/pages/invitations/index.tsx +++ b/web/pages/invitations/index.tsx @@ -12,7 +12,7 @@ import useUser from "hooks/use-user"; import useToast from "hooks/use-toast"; // layouts import DefaultLayout from "layouts/default-layout"; -import { UserAuthorizationLayout } from "layouts/auth-layout-legacy/user-authorization-wrapper"; +import { UserAuthWrapper } from "layouts/auth-layout"; // ui import { Button } from "@plane/ui"; // icons @@ -103,7 +103,7 @@ const UserInvitationsPage: NextPage = () => { }; return ( - +
@@ -210,7 +210,7 @@ const UserInvitationsPage: NextPage = () => { ) : null}
- + ); }; From fb3e75f1179d7fb0619586d0abd1bc37c3b70b5c Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Mon, 23 Oct 2023 16:40:26 +0530 Subject: [PATCH 09/10] chore: code refactor --- web/components/headers/project-views.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx index 41d22d1b2eb..52aa23c2f08 100644 --- a/web/components/headers/project-views.tsx +++ b/web/components/headers/project-views.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; import { useRouter } from "next/router"; import Link from "next/link"; import { observer } from "mobx-react-lite"; -import { ArrowLeft, Plus } from "lucide-react"; +import { Plus } from "lucide-react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // components @@ -42,15 +42,6 @@ export const ProjectViewsHeader: React.FC = observer(() => { className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`} >
-
- -
router.back()}> Date: Mon, 23 Oct 2023 16:44:06 +0530 Subject: [PATCH 10/10] chore: project setting layout fix --- .../project-setting-layout/layout.tsx | 32 ++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/web/layouts/setting-layout/project-setting-layout/layout.tsx b/web/layouts/setting-layout/project-setting-layout/layout.tsx index 4a5355a974f..b34f599ae20 100644 --- a/web/layouts/setting-layout/project-setting-layout/layout.tsx +++ b/web/layouts/setting-layout/project-setting-layout/layout.tsx @@ -1,6 +1,6 @@ import { FC, ReactNode } from "react"; // layouts -import { UserAuthWrapper, ProjectAuthWrapper } from "layouts/auth-layout"; +import { UserAuthWrapper, ProjectAuthWrapper, WorkspaceAuthWrapper } from "layouts/auth-layout"; // components import { AppSidebar } from "layouts/app-layout"; import { ProjectSettingsSidebar } from "./sidebar"; @@ -16,22 +16,24 @@ export const ProjectSettingLayout: FC = (props) => { return ( <> - -
- -
- {header} -
-
-
- + + +
+ +
+ {header} +
+
+
+ +
+ {children}
- {children}
-
-
-
- + +
+ + );