thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: breadcrumbs ui revamp and refactor

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-11-03 15:39:36 +05:30
parent 5efc6993cd
commit 20b2f6e8a8
27 changed files with 673 additions and 388 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
packages/ui/src/breadcrumbs/breadcrumbs.tsx
View File

@ -1,59 +1,81 @@
import * as React from "react";
// icons
import { MoveLeft } from "lucide-react";
import { ChevronRight } from "lucide-react";
// components
import { Tooltip } from "../tooltip";
type BreadcrumbsProps = {
onBack: () => void;
children: any;
};
const Breadcrumbs = ({ onBack, children }: BreadcrumbsProps) => (
<>
<div className="flex w-full flex-grow items-center overflow-hidden overflow-ellipsis whitespace-nowrap">
<button
type="button"
className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-custom-sidebar-border-200 text-center text-sm hover:bg-custom-sidebar-background-90"
onClick={onBack}
>
<MoveLeft className="h-4 w-4 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100" />
</button>
{children}
</div>
</>
);
type BreadcrumbItemProps = {
title?: string;
link?: JSX.Element;
icon?: any;
unshrinkTitle?: boolean;
};
const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
title,
link,
icon,
unshrinkTitle = false,
}) => (
<>
{link ? (
link
) : (
<div
className={`truncate px-3 text-sm ${
unshrinkTitle ? "flex-shrink-0" : ""
}`}
>
<p className={`truncate ${icon ? "flex items-center gap-2" : ""}`}>
{icon}
<span className="break-words">{title}</span>
</p>
const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
<div className="flex items-center space-x-2">
{React.Children.map(children, (child, index) => (
<div key={index} className="flex items-center flex-wrap gap-2.5">
{child}
{index !== React.Children.count(children) - 1 && (
<ChevronRight
className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400"
aria-hidden="true"
/>
)}
</div>
)}
</>
))}
</div>
);
type Props = {
type?: "text" | "component";
component?: React.ReactNode;
label?: string;
icon?: React.ReactNode;
link?: string;
};
const BreadcrumbItem: React.FC<Props> = (props) => {
const { type = "text", component, label, icon, link } = props;
return (
<>
{type != "text" ? (
<div className="flex items-center space-x-2">{component}</div>
) : (
<Tooltip tooltipContent={label} position="bottom">
<li className="flex items-center space-x-2">
<div className="flex items-center flex-wrap gap-2.5">
{link ? (
<a
className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
href={link}
>
{icon && (
<div className="overflow-hidden w-5 h-5 flex justify-center items-center !text-[1rem]">
{icon}
</div>
)}
<div className="relative block overflow-hidden truncate line-clamp-1 max-w-[150px]">
{label}
</div>
</a>
) : (
<div className="flex items-center gap-1 text-sm font-medium text-custom-text-100 cursor-default">
{icon && (
<div className="overflow-hidden w-5 h-5 flex justify-center items-center">
{icon}
</div>
)}
<div className="relative block overflow-hidden truncate line-clamp-1 max-w-[150px]">
{label}
</div>
</div>
)}
</div>
</li>
</Tooltip>
)}
</>
);
};
Breadcrumbs.BreadcrumbItem = BreadcrumbItem;
export { Breadcrumbs, BreadcrumbItem };

79
web/components/headers/cycle-issues.tsx
View File

@ -1,6 +1,5 @@
import { useCallback, useState } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
@ -10,11 +9,12 @@ import useLocalStorage from "hooks/use-local-storage";
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
import { ProjectAnalyticsModal } from "components/analytics";
// ui
import { Breadcrumbs, Button, CustomMenu } from "@plane/ui";
import { Breadcrumbs, Button, ContrastIcon, CustomMenu } from "@plane/ui";
// icons
import { ArrowRight, ContrastIcon, Plus } from "lucide-react";
import { ArrowRight, Plus } from "lucide-react";
// helpers
import { truncateText } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
// types
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
// constants
@ -32,6 +32,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
cycleIssueFilter: cycleIssueFilterStore,
project: projectStore,
} = useMobxStore();
const { currentProjectDetails } = projectStore;
const activeLayout = issueFilterStore.userDisplayFilters.layout;
const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
@ -110,36 +112,55 @@ export const CycleIssuesHeader: React.FC = observer(() => {
/>
<div className="relative w-full flex items-center z-10 justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
<div className="flex items-center gap-2">
<Breadcrumbs onBack={() => router.back()}>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
link={
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(cycleDetails?.project_detail.name ?? "", 32)} Cycles`}</p>
</a>
</Link>
type="text"
icon={
currentProjectDetails?.emoji ? (
renderEmoji(currentProjectDetails.emoji)
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="flex items-center justify-center h-4 w-4 rounded bg-gray-700 uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
}
label={currentProjectDetails?.name ?? "Project"}
link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
/>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
label="Cycles"
link={`/${workspaceSlug}/projects/${projectId}/cycles`}
/>
<Breadcrumbs.BreadcrumbItem
type="component"
component={
<CustomMenu
placement="bottom-start"
label={
<>
<ContrastIcon className="h-3 w-3" />
{cycleDetails?.name && truncateText(cycleDetails.name, 40)}
</>
}
className="ml-1.5 flex-shrink-0"
width="auto"
>
{cyclesList?.map((cycle) => (
<CustomMenu.MenuItem
key={cycle.id}
onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)}
>
{truncateText(cycle.name, 40)}
</CustomMenu.MenuItem>
))}
</CustomMenu>
}
/>
</Breadcrumbs>
<CustomMenu
label={
<>
<ContrastIcon className="h-3 w-3" />
{cycleDetails?.name && truncateText(cycleDetails.name, 40)}
</>
}
className="ml-1.5 flex-shrink-0"
width="auto"
>
{cyclesList?.map((cycle) => (
<CustomMenu.MenuItem
key={cycle.id}
onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)}
>
{truncateText(cycle.name, 40)}
</CustomMenu.MenuItem>
))}
</CustomMenu>
</div>
<div className="flex items-center gap-2">
<LayoutSelection

35
web/components/headers/cycles.tsx
View File

@ -1,13 +1,13 @@
import { FC } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import { Plus } from "lucide-react";
// ui
import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui";
import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
// helpers
import { truncateText } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
export interface ICyclesHeader {}
export const CyclesHeader: FC<ICyclesHeader> = (props) => {
@ -25,17 +25,28 @@ export const CyclesHeader: FC<ICyclesHeader> = (props) => {
>
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<div>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
link={
<Link href={`/${workspaceSlug}/projects`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p>Projects</p>
</a>
</Link>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
label={currentProjectDetails?.name ?? "Project"}
icon={
currentProjectDetails?.emoji ? (
renderEmoji(currentProjectDetails.emoji)
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="flex items-center justify-center h-4 w-4 rounded bg-gray-700 uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
}
link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
/>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
label="Cycles"
/>
<BreadcrumbItem title={`${truncateText(currentProjectDetails?.name ?? "Project Title", 32)} Cycles`} />
</Breadcrumbs>
</div>
</div>

21
web/components/headers/global-issues.tsx
View File

@ -10,9 +10,9 @@ import { useMobxStore } from "lib/mobx/store-provider";
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "components/issues";
import { CreateUpdateWorkspaceViewModal } from "components/workspace";
// ui
import { Button, Tooltip } from "@plane/ui";
import { Breadcrumbs, Button, LayersIcon, PhotoFilterIcon, Tooltip } from "@plane/ui";
// icons
import { CheckCircle, List, PlusIcon, Sheet } from "lucide-react";
import { List, PlusIcon, Sheet } from "lucide-react";
// types
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TStaticViewTypes } from "types";
// constants
@ -99,9 +99,20 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
<>
<CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
<div className="relative w-full flex items-center z-10 justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
<div className="flex gap-2 items-center">
{activeLayout === "spreadsheet" && <CheckCircle size={16} strokeWidth={2} />}
<span className="text-sm font-medium">Workspace {activeLayout === "spreadsheet" ? "Issues" : "Views"}</span>
<div>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={
activeLayout === "spreadsheet" ? (
<LayersIcon className="h-4 w-4 text-custom-text-300" />
) : (
<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
)
}
label={`Workspace ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`}
/>
</Breadcrumbs>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">

78
web/components/headers/module-issues.tsx
View File

@ -1,6 +1,5 @@
import { useCallback, useState } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
@ -10,11 +9,12 @@ import useLocalStorage from "hooks/use-local-storage";
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
import { ProjectAnalyticsModal } from "components/analytics";
// ui
import { Breadcrumbs, Button, CustomMenu } from "@plane/ui";
import { Breadcrumbs, Button, CustomMenu, DiceIcon } from "@plane/ui";
// icons
import { ArrowRight, ContrastIcon, Plus } from "lucide-react";
// helpers
import { truncateText } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
// types
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
// constants
@ -33,6 +33,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
project: projectStore,
} = useMobxStore();
const activeLayout = issueFilterStore.userDisplayFilters.layout;
const { currentProjectDetails } = projectStore;
const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
@ -110,39 +111,54 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
/>
<div className="relative w-full flex items-center z-10 justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
<div className="flex items-center gap-2">
<Breadcrumbs onBack={() => router.back()}>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
link={
<Link href={`/${workspaceSlug}/projects/${projectId}/modules`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(
moduleDetails?.project_detail.name ?? "",
32
)} Modules`}</p>
</a>
</Link>
type="text"
icon={
currentProjectDetails?.emoji ? (
renderEmoji(currentProjectDetails.emoji)
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
}
label={currentProjectDetails?.name ?? "Project"}
link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
/>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
label="Modules"
link={`/${workspaceSlug}/projects/${projectId}/modules`}
/>
<Breadcrumbs.BreadcrumbItem
type="component"
component={
<CustomMenu
label={
<>
<ContrastIcon className="h-3 w-3" />
{moduleDetails?.name && truncateText(moduleDetails.name, 40)}
</>
}
className="ml-1.5 flex-shrink-0"
width="auto"
>
{modulesList?.map((module) => (
<CustomMenu.MenuItem
key={module.id}
onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`)}
>
{truncateText(module.name, 40)}
</CustomMenu.MenuItem>
))}
</CustomMenu>
}
/>
</Breadcrumbs>
<CustomMenu
label={
<>
<ContrastIcon className="h-3 w-3" />
{moduleDetails?.name && truncateText(moduleDetails.name, 40)}
</>
}
className="ml-1.5 flex-shrink-0"
width="auto"
>
{modulesList?.map((module) => (
<CustomMenu.MenuItem
key={module.id}
onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`)}
>
{truncateText(module.name, 40)}
</CustomMenu.MenuItem>
))}
</CustomMenu>
</div>
<div className="flex items-center gap-2">
<LayoutSelection

35
web/components/headers/modules-list.tsx
View File

@ -1,5 +1,4 @@
import { useRouter } from "next/router";
import Link from "next/link";
import { observer } from "mobx-react-lite";
import { GanttChartSquare, LayoutGrid, List, Plus } from "lucide-react";
// mobx store
@ -7,9 +6,10 @@ import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useLocalStorage from "hooks/use-local-storage";
// ui
import { Breadcrumbs, BreadcrumbItem, Button, Tooltip } from "@plane/ui";
import { Breadcrumbs, Button, Tooltip, DiceIcon } from "@plane/ui";
// helper
import { replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper";
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
const moduleViewOptions: { type: "list" | "grid" | "gantt_chart"; icon: any }[] = [
{
@ -42,17 +42,28 @@ export const ModulesListHeader: React.FC = observer(() => {
>
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<div>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
link={
<Link href={`/${workspaceSlug}/projects`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p>Projects</p>
</a>
</Link>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
label={currentProjectDetails?.name ?? "Project"}
icon={
currentProjectDetails?.emoji ? (
renderEmoji(currentProjectDetails.emoji)
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
}
link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
/>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
label="Modules"
/>
<BreadcrumbItem title={`${truncateText(currentProjectDetails?.name ?? "Project", 32)} Modules`} />
</Breadcrumbs>
</div>
</div>

92
web/components/headers/page-details.tsx Normal file
View File

@ -0,0 +1,92 @@
import { FC } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { FileText, Plus } from "lucide-react";
// services
import { PageService } from "services/page.service";
// constants
import { PAGE_DETAILS } from "constants/fetch-keys";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { Breadcrumbs, Button } from "@plane/ui";
// helper
import { renderEmoji } from "helpers/emoji.helper";
import useSWR from "swr";
export interface IPagesHeaderProps {
showButton?: boolean;
}
const pageService = new PageService();
export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
const { showButton = false } = props;
const router = useRouter();
const { workspaceSlug, pageId } = router.query;
const { project: projectStore } = useMobxStore();
const { currentProjectDetails } = projectStore;
const { data: pageDetails } = useSWR(
workspaceSlug && currentProjectDetails?.id && pageId ? PAGE_DETAILS(pageId as string) : null,
workspaceSlug && currentProjectDetails?.id
? () => pageService.getPageDetails(workspaceSlug as string, currentProjectDetails.id, pageId as string)
: null
);
return (
<div 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">
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
<div>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
label={currentProjectDetails?.name ?? "Project"}
icon={
currentProjectDetails?.emoji ? (
renderEmoji(currentProjectDetails.emoji)
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
}
link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
/>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={<FileText className="h-4 w-4 text-custom-text-300" />}
label="Pages"
link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages`}
/>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={<FileText className="h-4 w-4 text-custom-text-300" />}
label={pageDetails?.name ?? "Page"}
/>
</Breadcrumbs>
</div>
</div>
{showButton && (
<div className="flex items-center gap-2">
<Button
variant="primary"
prependIcon={<Plus />}
size="sm"
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "d" });
document.dispatchEvent(e);
}}
>
Create Page
</Button>
</div>
)}
</div>
);
});

44
web/components/headers/pages.tsx
View File

@ -1,14 +1,13 @@
import { FC } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Plus } from "lucide-react";
import { FileText, Plus } from "lucide-react";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui";
import { Breadcrumbs, Button } from "@plane/ui";
// helper
import { truncateText } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
export interface IPagesHeaderProps {
showButton?: boolean;
@ -17,30 +16,37 @@ export interface IPagesHeaderProps {
export const PagesHeader: FC<IPagesHeaderProps> = observer((props) => {
const { showButton = false } = props;
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug } = router.query;
const { project: projectStore } = useMobxStore();
const projectDetails =
workspaceSlug && projectId
? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
: undefined;
const { currentProjectDetails } = projectStore;
return (
<div 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">
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
<div>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
link={
<Link href={`/${workspaceSlug}/projects`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p>Projects</p>
</a>
</Link>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
label={currentProjectDetails?.name ?? "Project"}
icon={
currentProjectDetails?.emoji ? (
renderEmoji(currentProjectDetails.emoji)
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
}
link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
/>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={<FileText className="h-4 w-4 text-custom-text-300" />}
label="Pages"
/>
<BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Pages`} />
</Breadcrumbs>
</div>
</div>

29
web/components/headers/profile-preferences.tsx
View File

@ -1,21 +1,16 @@
import { useRouter } from "next/router";
// components
import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
import { Breadcrumbs } from "@plane/ui";
export const ProfilePreferencesHeader = () => {
const router = useRouter();
return (
<div
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`}
>
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
<div>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem title="My Profile Preferences" />
</Breadcrumbs>
</div>
export const ProfilePreferencesHeader = () => (
<div
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`}
>
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
<div>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem type="text" label="My Profile Preferences" />
</Breadcrumbs>
</div>
</div>
);
};
</div>
);

50
web/components/headers/project-archived-issue-details.tsx
View File

@ -1,20 +1,19 @@
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";
import { Breadcrumbs, LayersIcon } from "@plane/ui";
// types
import { IIssue } from "types";
// constants
import { ISSUE_DETAILS } from "constants/fetch-keys";
// services
import { IssueArchiveService } from "services/issue";
// helpers
import { renderEmoji } from "helpers/emoji.helper";
const issueArchiveService = new IssueArchiveService();
@ -24,10 +23,7 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
const { project: projectStore } = useMobxStore();
const projectDetails =
workspaceSlug && projectId
? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
: undefined;
const { currentProjectDetails } = projectStore;
const { data: issueDetails } = useSWR<IIssue | undefined>(
workspaceSlug && projectId && archivedIssueId ? ISSUE_DETAILS(archivedIssueId as string) : null,
@ -45,17 +41,35 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
<div 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">
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
<div>
<Breadcrumbs onBack={() => router.back()}>
<Link href={`/${workspaceSlug}/projects/${projectId as string}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(
issueDetails?.project_detail.name ?? "Project",
32
)} Issues`}</p>
</a>
</Link>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={
currentProjectDetails?.emoji ? (
renderEmoji(currentProjectDetails.emoji)
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
}
label={currentProjectDetails?.name ?? "Project"}
link={`/${workspaceSlug}/projects`}
/>
<BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Archived Issues`} />
<Breadcrumbs.BreadcrumbItem
type="text"
icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
label="Archived Issues"
link={`/${workspaceSlug}/projects/${projectId}/archived-issues`}
/>
<Breadcrumbs.BreadcrumbItem
type="text"
label={`${issueDetails?.project_detail.identifier}-${issueDetails?.sequence_id}` ?? "..."}
/>
</Breadcrumbs>
</div>
</div>

41
web/components/headers/project-archived-issues.tsx
View File

@ -1,37 +1,48 @@
import { FC } from "react";
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";
import { Breadcrumbs, LayersIcon } from "@plane/ui";
// helper
import { truncateText } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
export const ProjectArchivedIssuesHeader: FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug } = router.query;
const { project: projectStore } = useMobxStore();
const projectDetails =
workspaceSlug && projectId
? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
: undefined;
const { currentProjectDetails } = projectStore;
return (
<div 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">
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
<div>
<Breadcrumbs onBack={() => router.back()}>
<Link href={`/${workspaceSlug}/projects`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p>Projects</p>
</a>
</Link>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={
currentProjectDetails?.emoji ? (
renderEmoji(currentProjectDetails.emoji)
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
}
label={currentProjectDetails?.name ?? "Project"}
link={`/${workspaceSlug}/projects`}
/>
<BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Archived Issues`} />
<Breadcrumbs.BreadcrumbItem
type="text"
icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
label="Archived Issues"
/>
</Breadcrumbs>
</div>
</div>

42
web/components/headers/project-draft-issues.tsx
View File

@ -1,41 +1,47 @@
import { FC } from "react";
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";
import { Breadcrumbs, LayersIcon } from "@plane/ui";
// helper
import { truncateText } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
export const ProjectDraftIssueHeader: FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug } = router.query;
const { project: projectStore } = useMobxStore();
const projectDetails =
workspaceSlug && projectId
? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
: undefined;
const { currentProjectDetails } = projectStore;
return (
<div 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">
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
<div>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
link={
<Link href={`/${workspaceSlug}/projects`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p>Projects</p>
</a>
</Link>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={
currentProjectDetails?.emoji ? (
renderEmoji(currentProjectDetails.emoji)
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
}
label={currentProjectDetails?.name ?? "Project"}
link={`/${workspaceSlug}/projects`}
/>
<BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Draft Issues`} />
<Breadcrumbs.BreadcrumbItem
type="text"
icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
label="Draft Issues"
/>
</Breadcrumbs>
</div>
</div>

42
web/components/headers/project-inbox.tsx
View File

@ -1,44 +1,52 @@
import { FC, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Plus } from "lucide-react";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui";
import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
// components
import { CreateInboxIssueModal } from "components/inbox";
// helper
import { truncateText } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
export const ProjectInboxHeader: FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug } = router.query;
const [createIssueModal, setCreateIssueModal] = useState(false);
const { project: projectStore } = useMobxStore();
const projectDetails =
workspaceSlug && projectId
? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
: undefined;
const { currentProjectDetails } = projectStore;
return (
<div 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">
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
<div>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
link={
<Link href={`/${workspaceSlug}/projects`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p>Projects</p>
</a>
</Link>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={
currentProjectDetails?.emoji ? (
renderEmoji(currentProjectDetails.emoji)
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
}
label={currentProjectDetails?.name ?? "Project"}
link={`/${workspaceSlug}/projects`}
/>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
label="Inbox Issues"
/>
<BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Inbox`} />
</Breadcrumbs>
</div>
</div>

48
web/components/headers/project-issue-details.tsx
View File

@ -1,17 +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";
// ui
import { Breadcrumbs } from "@plane/ui";
import { Breadcrumbs, LayersIcon } from "@plane/ui";
// helper
import { truncateText } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
// services
import { IssueService } from "services/issue";
// constants
import { ISSUE_DETAILS } from "constants/fetch-keys";
import { useMobxStore } from "lib/mobx/store-provider";
// services
const issueService = new IssueService();
@ -20,6 +20,10 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, issueId } = router.query;
const { project: projectStore } = useMobxStore();
const { currentProjectDetails } = projectStore;
const { data: issueDetails } = useSWR(
workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
workspaceSlug && projectId && issueId
@ -31,24 +35,34 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
<div 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">
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
<div>
<Breadcrumbs onBack={() => router.back()}>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
link={
<Link href={`/${workspaceSlug}/projects/${projectId as string}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(
issueDetails?.project_detail.name ?? "Project",
32
)} Issues`}</p>
</a>
</Link>
type="text"
icon={
currentProjectDetails?.emoji ? (
renderEmoji(currentProjectDetails.emoji)
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
}
label={currentProjectDetails?.name ?? "Project"}
link={`/${workspaceSlug}/projects`}
/>
<Breadcrumbs.BreadcrumbItem
title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${
issueDetails?.sequence_id ?? "..."
} Details`}
unshrinkTitle
type="text"
icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
label="Issues"
link={`/${workspaceSlug}/projects/${projectId}/issues`}
/>
<Breadcrumbs.BreadcrumbItem
type="text"
label={`${issueDetails?.project_detail.identifier}-${issueDetails?.sequence_id}` ?? "..."}
/>
</Breadcrumbs>
</div>

50
web/components/headers/project-issues.tsx
View File

@ -9,13 +9,13 @@ import { useMobxStore } from "lib/mobx/store-provider";
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
import { ProjectAnalyticsModal } from "components/analytics";
// ui
import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui";
import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
// types
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
// constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
// helper
import { truncateText } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
export const ProjectIssuesHeader: React.FC = observer(() => {
const [analyticsModal, setAnalyticsModal] = useState(false);
@ -85,11 +85,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
},
[issueFilterStore, projectId, workspaceSlug]
);
const projectDetails =
workspaceSlug && projectId
? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
: undefined;
const { currentProjectDetails } = projectStore;
const inboxDetails = projectId ? inboxStore.inboxesList?.[projectId.toString()]?.[0] : undefined;
@ -100,7 +96,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
<ProjectAnalyticsModal
isOpen={analyticsModal}
onClose={() => setAnalyticsModal(false)}
projectDetails={projectDetails ?? undefined}
projectDetails={currentProjectDetails ?? undefined}
/>
<div 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">
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
@ -114,22 +110,38 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
</button>
</div>
<div>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
link={
<Link href={`/${workspaceSlug}/projects`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p>Projects</p>
</a>
</Link>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={
currentProjectDetails?.emoji ? (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
{renderEmoji(currentProjectDetails.emoji)}
</span>
) : currentProjectDetails?.icon_prop ? (
<div className="h-7 w-7 flex-shrink-0 grid place-items-center">
{renderEmoji(currentProjectDetails.icon_prop)}
</div>
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
}
label={currentProjectDetails?.name ?? "Project"}
link={`/${workspaceSlug}/projects`}
/>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
label="Issues"
/>
<BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Issues`} />
</Breadcrumbs>
</div>
{projectDetails?.is_deployed && deployUrl && (
{currentProjectDetails?.is_deployed && deployUrl && (
<a
href={`${deployUrl}/${workspaceSlug}/${projectDetails?.id}`}
href={`${deployUrl}/${workspaceSlug}/${currentProjectDetails?.id}`}
className="group bg-custom-primary-100/10 text-custom-primary-100 px-2.5 py-1 text-xs flex items-center gap-1.5 rounded font-medium"
target="_blank"
rel="noopener noreferrer"

30
web/components/headers/project-settings.tsx
View File

@ -1,11 +1,10 @@
import { FC } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
// ui
import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
import { Breadcrumbs } from "@plane/ui";
// helper
import { truncateText } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
import { observer } from "mobx-react-lite";
@ -28,17 +27,24 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
>
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
<div>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
link={
<Link href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(currentProjectDetails?.name ?? "Project", 32)}`}</p>
</a>
</Link>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
label={currentProjectDetails?.name ?? "Project"}
icon={
currentProjectDetails?.emoji ? (
renderEmoji(currentProjectDetails.emoji)
) : currentProjectDetails?.icon_prop ? (
renderEmoji(currentProjectDetails.icon_prop)
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
}
link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
/>
<BreadcrumbItem title={title} unshrinkTitle />
<Breadcrumbs.BreadcrumbItem type="text" label={title} />
</Breadcrumbs>
</div>
</div>

87
web/components/headers/project-view-issues.tsx
View File

@ -1,5 +1,4 @@
import { useCallback } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// mobx store
@ -7,9 +6,10 @@ import { useMobxStore } from "lib/mobx/store-provider";
// components
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
// ui
import { BreadcrumbItem, Breadcrumbs, CustomMenu, PhotoFilterIcon } from "@plane/ui";
import { Breadcrumbs, CustomMenu, PhotoFilterIcon } from "@plane/ui";
// helpers
import { truncateText } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
// types
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
// constants
@ -26,6 +26,8 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
projectViews: projectViewsStore,
} = useMobxStore();
const { currentProjectDetails } = projectStore;
const storedFilters = viewId ? projectViewFiltersStore.storedFilters[viewId.toString()] : undefined;
const activeLayout = issueFilterStore.userDisplayFilters.layout;
@ -87,47 +89,64 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
[issueFilterStore, projectId, workspaceSlug]
);
const projectDetails =
workspaceSlug && projectId
? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
: undefined;
const viewsList = projectId ? projectViewsStore.viewsList[projectId.toString()] : undefined;
const viewDetails = viewId ? projectViewsStore.viewDetails[viewId.toString()] : undefined;
return (
<div className="relative w-full flex items-center z-10 justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
<div className="flex items-center gap-2">
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
link={
<Link href={`/${workspaceSlug}/projects/${projectDetails?.id}/cycles`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${projectDetails?.name ?? "Project"} Views`}</p>
</a>
</Link>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
label={currentProjectDetails?.name ?? "Project"}
icon={
currentProjectDetails?.emoji ? (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
{renderEmoji(currentProjectDetails.emoji)}
</span>
) : currentProjectDetails?.icon_prop ? (
<div className="h-7 w-7 flex-shrink-0 grid place-items-center">
{renderEmoji(currentProjectDetails.icon_prop)}
</div>
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
}
link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
/>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
label="Views"
link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/views`}
/>
<Breadcrumbs.BreadcrumbItem
type="component"
component={
<CustomMenu
label={
<>
<PhotoFilterIcon height={12} width={12} />
{viewDetails?.name && truncateText(viewDetails.name, 40)}
</>
}
className="ml-1.5"
placement="bottom-start"
>
{viewsList?.map((view) => (
<CustomMenu.MenuItem
key={view.id}
onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/views/${view.id}`)}
>
{truncateText(view.name, 40)}
</CustomMenu.MenuItem>
))}
</CustomMenu>
}
/>
</Breadcrumbs>
<CustomMenu
label={
<>
<PhotoFilterIcon height={12} width={12} />
{viewDetails?.name && truncateText(viewDetails.name, 40)}
</>
}
className="ml-1.5"
placement="bottom-start"
>
{viewsList?.map((view) => (
<CustomMenu.MenuItem
key={view.id}
onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/views/${view.id}`)}
>
{truncateText(view.name, 40)}
</CustomMenu.MenuItem>
))}
</CustomMenu>
</div>
<div className="flex items-center gap-2">
<LayoutSelection

44
web/components/headers/project-views.tsx
View File

@ -1,6 +1,5 @@
import { useState } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import { observer } from "mobx-react-lite";
import { Plus } from "lucide-react";
// mobx store
@ -8,11 +7,11 @@ import { useMobxStore } from "lib/mobx/store-provider";
// components
import { CreateUpdateProjectViewModal } from "components/views";
// components
import { Breadcrumbs, BreadcrumbItem } from "@plane/ui";
import { Breadcrumbs, PhotoFilterIcon } from "@plane/ui";
// ui
import { PrimaryButton } from "components/ui";
// helpers
import { truncateText } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
export const ProjectViewsHeader: React.FC = observer(() => {
// router
@ -22,11 +21,7 @@ export const ProjectViewsHeader: React.FC = observer(() => {
const [createViewModal, setCreateViewModal] = useState(false);
const { project: projectStore } = useMobxStore();
const projectDetails =
workspaceSlug && projectId
? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
: undefined;
const { currentProjectDetails } = projectStore;
return (
<>
@ -43,17 +38,32 @@ export const ProjectViewsHeader: React.FC = observer(() => {
>
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
<div>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
link={
<Link href={`/${workspaceSlug}/projects`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p>Projects</p>
</a>
</Link>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
label={currentProjectDetails?.name ?? "Project"}
icon={
currentProjectDetails?.emoji ? (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
{renderEmoji(currentProjectDetails.emoji)}
</span>
) : currentProjectDetails?.icon_prop ? (
<div className="h-7 w-7 flex-shrink-0 grid place-items-center">
{renderEmoji(currentProjectDetails.icon_prop)}
</div>
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{currentProjectDetails?.name.charAt(0)}
</span>
)
}
link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
/>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
label="Views"
/>
<BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Views`} />
</Breadcrumbs>
</div>
</div>

18
web/components/headers/projects.tsx
View File

@ -1,9 +1,7 @@
import { useRouter } from "next/router";
import { Search, Plus } from "lucide-react";
import { Search, Plus, Briefcase } from "lucide-react";
// ui
import { BreadcrumbItem, Breadcrumbs, Button } from "@plane/ui";
// helper
import { truncateText } from "helpers/string.helper";
import { Breadcrumbs, Button } from "@plane/ui";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
import { observer } from "mobx-react-lite";
@ -13,8 +11,7 @@ export const ProjectsHeader = observer(() => {
const { workspaceSlug } = router.query;
// store
const { project: projectStore, workspace: workspaceStore } = useMobxStore();
const currentWorkspace = workspaceStore.currentWorkspace;
const { project: projectStore } = useMobxStore();
const projectsList = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : [];
@ -24,10 +21,11 @@ export const ProjectsHeader = observer(() => {
>
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
<div>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
title={`${truncateText(currentWorkspace?.name ?? "Workspace", 32)} Projects`}
unshrinkTitle={false}
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={<Briefcase className="h-4 w-4 text-custom-text-300" />}
label="Projects"
/>
</Breadcrumbs>
</div>

23
web/components/headers/user-profile.tsx
View File

@ -1,22 +1,35 @@
import { FC } from "react";
import { useRouter } from "next/router";
// ui
import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
import { Breadcrumbs } from "@plane/ui";
import { UserCircle2 } from "lucide-react";
// hooks
import { observer } from "mobx-react-lite";
export const UserProfileHeader: FC = observer(() => {
export interface IUserProfileHeader {
title: string;
}
export const UserProfileHeader: FC<IUserProfileHeader> = observer((props) => {
const { title } = props;
const router = useRouter();
const { workspaceSlug } = router.query;
return (
<div
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`}
>
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
<div>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem title="User Profile" unshrinkTitle />
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
label="Profile"
icon={<UserCircle2 className="h-4 w-4 text-custom-text-300" />}
link={`/${workspaceSlug}/me/profile`}
/>
<Breadcrumbs.BreadcrumbItem type="text" label={title} />
</Breadcrumbs>
</div>
</div>

12
web/components/headers/workspace-analytics.tsx
View File

@ -1,7 +1,7 @@
import { useRouter } from "next/router";
import { ArrowLeft } from "lucide-react";
import { ArrowLeft, BarChart2 } from "lucide-react";
// ui
import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
import { Breadcrumbs } from "@plane/ui";
export const WorkspaceAnalyticsHeader = () => {
const router = useRouter();
@ -22,8 +22,12 @@ export const WorkspaceAnalyticsHeader = () => {
</button>
</div>
<div>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem title="Workspace Analytics" />
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />}
label="Analytics"
/>
</Breadcrumbs>
</div>
</div>

35
web/components/headers/workspace-settings.tsx
View File

@ -1,21 +1,13 @@
import { FC } from "react";
import useSWR from "swr";
import { useRouter } from "next/router";
import Link from "next/link";
// ui
import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
import { Breadcrumbs } from "@plane/ui";
import { Settings } from "lucide-react";
// hooks
import { observer } from "mobx-react-lite";
// services
import { WorkspaceService } from "services/workspace.service";
// helpers
import { truncateText } from "helpers/string.helper";
// constant
import { WORKSPACE_DETAILS } from "constants/fetch-keys";
const workspaceService = new WorkspaceService();
export interface IWorkspaceSettingHeader {
title: string;
@ -27,27 +19,20 @@ export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((pro
const { workspaceSlug } = router.query;
const { data: activeWorkspace } = useSWR(workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null, () =>
workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null
);
return (
<div
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`}
>
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
<div>
<Breadcrumbs onBack={() => router.back()}>
<BreadcrumbItem
link={
<Link href={`/${workspaceSlug}`}>
<a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
<p className="truncate">{`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}</p>
</a>
</Link>
}
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
label="Settings"
icon={<Settings className="h-4 w-4 text-custom-text-300" />}
link={`/${workspaceSlug}/settings`}
/>
<BreadcrumbItem title={title} unshrinkTitle />
<Breadcrumbs.BreadcrumbItem type="text" label={title} />
</Breadcrumbs>
</div>
</div>

2
web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
View File

@ -62,7 +62,7 @@ const ProfileAssignedIssuesPage: NextPageWithLayout = observer(() => {
ProfileAssignedIssuesPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<UserProfileHeader />}>
<AppLayout header={<UserProfileHeader title="Assigned" />}>
<ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
</AppLayout>
);

2
web/pages/[workspaceSlug]/profile/[userId]/created.tsx
View File

@ -58,7 +58,7 @@ const ProfileCreatedIssuesPage: NextPageWithLayout = () => {
ProfileCreatedIssuesPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<UserProfileHeader />}>
<AppLayout header={<UserProfileHeader title="Created" />}>
<ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
</AppLayout>
);

2
web/pages/[workspaceSlug]/profile/[userId]/index.tsx
View File

@ -56,7 +56,7 @@ const ProfileOverviewPage: NextPageWithLayout = () => {
ProfileOverviewPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<UserProfileHeader />}>
<AppLayout header={<UserProfileHeader title="Overview" />}>
<ProfileAuthWrapper>{page}</ProfileAuthWrapper>
</AppLayout>
);

4
web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
View File

@ -40,7 +40,7 @@ const ProfileSubscribedIssuesPage: NextPageWithLayout = () => {
const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
return (
<AppLayout header={<UserProfileHeader />}>
<AppLayout header={<UserProfileHeader title="Subscribed" />}>
<ProfileAuthWrapper showProfileIssuesFilter>
{isLoading ? (
<div>Loading...</div>
@ -60,7 +60,7 @@ const ProfileSubscribedIssuesPage: NextPageWithLayout = () => {
ProfileSubscribedIssuesPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<UserProfileHeader />}>
<AppLayout header={<UserProfileHeader title="Subscribed" />}>
<ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
</AppLayout>
);

4
web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View File

@ -19,7 +19,7 @@ import StrictModeDroppable from "components/dnd/StrictModeDroppable";
import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages";
import { CreateLabelModal } from "components/labels";
import { CreateBlock } from "components/pages/create-block";
import { PagesHeader } from "components/headers";
import { PageDetailsHeader } from "components/headers/page-details";
// ui
import { EmptyState } from "components/common";
import { CustomSearchSelect, TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
@ -626,7 +626,7 @@ const PageDetailsPage: NextPageWithLayout = () => {
PageDetailsPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<PagesHeader />} withProjectWrapper>
<AppLayout header={<PageDetailsHeader />} withProjectWrapper>
{page}
</AppLayout>
);