chore: settings page refactoring (#2477)
* chore: implemented project layout and integrated sidebar component * chore: implemented workspace layout and integrated sidebar component
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
0ec0ca133a
commit
c270c8689f
30 changed files with 1708 additions and 1747 deletions
|
|
@ -1,17 +1,15 @@
|
|||
import React, { useState, useRef } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// hooks
|
||||
import useUserAuth from "hooks/use-user-auth";
|
||||
// services
|
||||
import { ProjectService } from "services/project";
|
||||
import { IssueLabelService } from "services/issue";
|
||||
// layouts
|
||||
import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
|
||||
import { ProjectSettingLayout } from "layouts/setting-layout/project-setting-layout";
|
||||
// components
|
||||
import {
|
||||
CreateUpdateLabelInline,
|
||||
|
|
@ -20,9 +18,9 @@ import {
|
|||
SingleLabel,
|
||||
SingleLabelGroup,
|
||||
} from "components/labels";
|
||||
import { SettingsSidebar } from "components/project";
|
||||
import { ProjectSettingHeader } from "components/headers";
|
||||
// ui
|
||||
import { BreadcrumbItem, Breadcrumbs, Button, Loader } from "@plane/ui";
|
||||
import { Button, Loader } from "@plane/ui";
|
||||
import { EmptyState } from "components/common";
|
||||
// images
|
||||
import emptyLabel from "public/empty-state/label.svg";
|
||||
|
|
@ -30,12 +28,9 @@ import emptyLabel from "public/empty-state/label.svg";
|
|||
import { IIssueLabels } from "types";
|
||||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
|
||||
|
||||
// services
|
||||
const projectService = new ProjectService();
|
||||
const issueLabelService = new IssueLabelService();
|
||||
|
||||
const LabelsSettings: NextPage = () => {
|
||||
|
|
@ -60,11 +55,6 @@ const LabelsSettings: NextPage = () => {
|
|||
|
||||
const scrollToRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const { data: projectDetails } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
|
||||
workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
|
||||
);
|
||||
|
||||
const { data: issueLabels } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
|
|
@ -102,78 +92,43 @@ const LabelsSettings: NextPage = () => {
|
|||
onClose={() => setSelectDeleteLabel(null)}
|
||||
user={user}
|
||||
/>
|
||||
<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="Labels Settings" unshrinkTitle />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
<div className="flex flex-row gap-2 h-full">
|
||||
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
|
||||
<SettingsSidebar />
|
||||
<ProjectSettingLayout header={<ProjectSettingHeader title="Labels Settings" />}>
|
||||
<section 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">
|
||||
<h3 className="text-xl font-medium">Labels</h3>
|
||||
|
||||
<Button variant="primary" onClick={newLabel} size="sm">
|
||||
Add label
|
||||
</Button>
|
||||
</div>
|
||||
<section className="pr-9 py-8 gap-10 w-full overflow-y-auto">
|
||||
<div className="flex items-center justify-between pt-2 pb-3.5 border-b border-custom-border-200">
|
||||
<h3 className="text-xl font-medium">Labels</h3>
|
||||
<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);
|
||||
|
||||
<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
|
||||
if (children && children.length === 0) {
|
||||
if (!label.parent)
|
||||
return (
|
||||
<SingleLabelGroup
|
||||
<SingleLabel
|
||||
key={label.id}
|
||||
label={label}
|
||||
labelChildren={children}
|
||||
addLabelToGroup={addLabelToGroup}
|
||||
addLabelToGroup={() => addLabelToGroup(label)}
|
||||
editLabel={(label) => {
|
||||
editLabel(label);
|
||||
scrollToRef.current?.scrollIntoView({
|
||||
|
|
@ -181,35 +136,49 @@ const LabelsSettings: NextPage = () => {
|
|||
});
|
||||
}}
|
||||
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(),
|
||||
}}
|
||||
isFullScreen={false}
|
||||
/>
|
||||
)
|
||||
} 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}
|
||||
/>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Loader className="space-y-5">
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
</Loader>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</ProjectAuthorizationWrapper>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue