binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-2273] Chore: header UI (#5467)

Browse source 
* chore: headers + common containers

* fix: filters code splitting

* fix: home header

* fix: header changes

* fix: uncommented filters

* fix: used enums

* fix: enum changes
This commit is contained in:
Akshita Goyal 2024-09-04 14:38:30 +05:30 • committed by GitHub
parent 747905a96d
commit 22656d0114
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
64 changed files with 1356 additions and 1119 deletions
Download patch file Download diff file Expand all files Collapse all files

22
packages/tailwind-config-custom/tailwind.config.js
View file

@ -333,6 +333,8 @@ module.exports = {
72: "16.2rem",
80: "18rem",
96: "21.6rem",
"page-x": "1.35rem",
"page-y": "1.35rem"
},
margin: {
0: "0",
@ -434,5 +436,23 @@ module.exports = {
custom: ["Inter", "sans-serif"],
},
},
plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography"), function({ addUtilities }) {
const newUtilities = {
// Mobile screens
'.px-page-x': {
paddingLeft: '0.675rem',
paddingRight: '0.675rem',
},
// Medium screens (768px and up)
'@media (min-width: 768px)': {
'.px-page-x': {
paddingLeft: '1.35rem',
paddingRight: '1.35rem',
},
}
};
addUtilities(newUtilities, ['responsive']);
},
],
};

39
packages/ui/src/header/header.tsx Normal file
View file

@ -0,0 +1,39 @@
import * as React from "react";
import { cn } from "../../helpers";
import { EHeaderVariant, getHeaderStyle, THeaderVariant } from "./helper";
import { ERowVariant, CustomRow } from "../row";
export interface CustomHeaderProps {
variant?: THeaderVariant;
setHeight?: boolean;
className?: string;
children: React.ReactNode;
}
const CustomHeader = (props: CustomHeaderProps) => {
const { variant = EHeaderVariant.PRIMARY, className = "", setHeight = true, children, ...rest } = props;
const style = getHeaderStyle(variant, setHeight);
return (
<CustomRow
variant={variant === EHeaderVariant.PRIMARY ? ERowVariant.HUGGING : ERowVariant.REGULAR}
className={cn(style, className)}
{...rest}
>
{children}
</CustomRow>
);
};
const LeftItem = (props: CustomHeaderProps) => (
<div className="flex flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">{props.children}</div>
);
const RightItem = (props: CustomHeaderProps) => (
<div className="w-full flex items-center justify-end gap-3">{props.children}</div>
);
CustomHeader.LeftItem = LeftItem;
CustomHeader.RightItem = RightItem;
CustomHeader.displayName = "plane-ui-header";
export { CustomHeader, EHeaderVariant };

25
packages/ui/src/header/helper.tsx Normal file
View file

@ -0,0 +1,25 @@
export enum EHeaderVariant {
PRIMARY = "primary",
SECONDARY = "secondary",
TERNARY = "ternary",
}
export type THeaderVariant = EHeaderVariant.PRIMARY | EHeaderVariant.SECONDARY | EHeaderVariant.TERNARY;
export interface IHeaderProperties {
[key: string]: string;
}
export const headerStyle: IHeaderProperties = {
[EHeaderVariant.PRIMARY]:
"relative flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100",
[EHeaderVariant.SECONDARY]: "block !py-0 overflow-y-hidden border-b border-custom-border-200",
[EHeaderVariant.TERNARY]: "flex justify-between py-2 border-b border-custom-border-200",
};
export const minHeights: IHeaderProperties = {
[EHeaderVariant.PRIMARY]: "",
[EHeaderVariant.SECONDARY]: "min-h-[52px]",
[EHeaderVariant.TERNARY]: "",
};
export const getHeaderStyle = (variant: THeaderVariant, setMinHeight: boolean) => {
const height = setMinHeight ? minHeights[variant] : "";
return headerStyle[variant] + " " + height;
};

1
packages/ui/src/header/index.ts Normal file
View file

@ -0,0 +1 @@
export * from "./header";

2
packages/ui/src/index.ts
View file

@ -23,3 +23,5 @@ export * from "./loader";
export * from "./collapsible";
export * from "./popovers";
export * from "./tables";
export * from "./header";
export * from "./row";

12
packages/ui/src/row/helper.tsx Normal file
View file

@ -0,0 +1,12 @@
export enum ERowVariant {
REGULAR = "regular",
HUGGING = "hugging",
}
export type TRowVariant = ERowVariant.REGULAR | ERowVariant.HUGGING;
export interface IRowProperties {
[key: string]: string;
}
export const rowStyle: IRowProperties = {
[ERowVariant.REGULAR]: "px-page-x",
[ERowVariant.HUGGING]: "px-0",
};

1
packages/ui/src/row/index.ts Normal file
View file

@ -0,0 +1 @@
export * from "./row";

25
packages/ui/src/row/row.tsx Normal file
View file

@ -0,0 +1,25 @@
import * as React from "react";
import { cn } from "../../helpers";
import { ERowVariant, rowStyle, TRowVariant } from "./helper";
export interface CustomRowProps extends React.HTMLAttributes<HTMLDivElement> {
variant?: TRowVariant;
className?: string;
children: React.ReactNode;
}
const CustomRow = React.forwardRef<HTMLDivElement, CustomRowProps>((props, ref) => {
const { variant = ERowVariant.REGULAR, className = "", children, ...rest } = props;
const style = rowStyle[variant];
return (
<div ref={ref} className={cn(style, className)} {...rest}>
{children}
</div>
);
});
CustomRow.displayName = "plane-ui-row";
export { CustomRow, ERowVariant };

12
web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx
View file

@ -2,16 +2,15 @@
import { observer } from "mobx-react";
// ui
import { Breadcrumbs, ContrastIcon } from "@plane/ui";
import { Breadcrumbs, ContrastIcon, CustomHeader } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common";
// plane web components
import { UpgradeBadge } from "@/plane-web/components/workspace";
export const WorkspaceActiveCycleHeader = observer(() => (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<div className="flex items-center gap-2">
<CustomHeader>
<CustomHeader.LeftItem>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
@ -24,7 +23,6 @@ export const WorkspaceActiveCycleHeader = observer(() => (
/>
</Breadcrumbs>
<UpgradeBadge size="md" />
</div>
</div>
</div>
</CustomHeader.LeftItem>
</CustomHeader>
));

24
web/app/[workspaceSlug]/(projects)/analytics/header.tsx
View file

@ -6,7 +6,7 @@ import { useSearchParams } from "next/navigation";
// icons
import { BarChart2, PanelRight } from "lucide-react";
// ui
import { Breadcrumbs } from "@plane/ui";
import { Breadcrumbs, CustomHeader } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common";
// helpers
@ -36,21 +36,15 @@ export const WorkspaceAnalyticsHeader = observer(() => {
}, [toggleWorkspaceAnalyticsSidebar, workspaceAnalyticsSidebarCollapsed]);
return (
<>
<div
className={`relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4`}
>
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<div className="flex w-full items-center justify-between">
<CustomHeader>
<CustomHeader.LeftItem>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
link={
<BreadcrumbLink label="Analytics" icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />} />
}
link={<BreadcrumbLink label="Analytics" icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />} />}
/>
</Breadcrumbs>
{analytics_tab === "custom" && (
{analytics_tab === "custom" ? (
<button
className="block md:hidden"
onClick={() => {
@ -64,10 +58,10 @@ export const WorkspaceAnalyticsHeader = observer(() => {
)}
/>
</button>
) : (
<></>
)}
</div>
</div>
</div>
</>
</CustomHeader.LeftItem>
</CustomHeader>
);
});

5
web/app/[workspaceSlug]/(projects)/analytics/page.tsx
View file

@ -5,6 +5,7 @@ import { observer } from "mobx-react";
import { useSearchParams } from "next/navigation";
import { Tab } from "@headlessui/react";
// components
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import { CustomAnalytics, ScopeAndDemand } from "@/components/analytics";
import { PageHead } from "@/components/core";
import { EmptyState } from "@/components/empty-state";
@ -34,7 +35,8 @@ const AnalyticsPage = observer(() => {
{workspaceProjectIds.length > 0 || loader ? (
<div className="flex h-full flex-col overflow-hidden bg-custom-background-100">
<Tab.Group as={Fragment} defaultIndex={analytics_tab === "custom" ? 1 : 0}>
<Tab.List as="div" className="flex space-x-2 border-b h-[50px] border-custom-border-200 px-0 md:px-5">
<CustomHeader variant={EHeaderVariant.SECONDARY}>
<Tab.List as="div" className="flex space-x-2 border-b h-[50px] border-custom-border-200">
{ANALYTICS_TABS.map((tab) => (
<Tab key={tab.key} as={Fragment}>
{({ selected }) => (
@ -52,6 +54,7 @@ const AnalyticsPage = observer(() => {
</Tab>
))}
</Tab.List>
</CustomHeader>
<Tab.Panels as={Fragment}>
<Tab.Panel as={Fragment}>
<ScopeAndDemand fullScreen />

14
web/app/[workspaceSlug]/(projects)/header.tsx
View file

@ -7,7 +7,7 @@ import { Home } from "lucide-react";
import githubBlackImage from "/public/logos/github-black.png";
import githubWhiteImage from "/public/logos/github-white.png";
// ui
import { Breadcrumbs } from "@plane/ui";
import { Breadcrumbs, CustomHeader } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common";
// constants
@ -22,8 +22,8 @@ export const WorkspaceDashboardHeader = () => {
return (
<>
<div className="relative z-[15] flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex items-center gap-2 overflow-ellipsis whitespace-nowrap">
<CustomHeader>
<CustomHeader.LeftItem>
<div>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
@ -32,8 +32,8 @@ export const WorkspaceDashboardHeader = () => {
/>
</Breadcrumbs>
</div>
</div>
<div className="flex items-center gap-3 px-3">
</CustomHeader.LeftItem>
<CustomHeader.RightItem>
<a
onClick={() =>
captureEvent(GITHUB_REDIRECTED, {
@ -53,8 +53,8 @@ export const WorkspaceDashboardHeader = () => {
/>
<span className="hidden text-xs font-medium sm:hidden md:block">Star us on GitHub</span>
</a>
</div>
</div>
</CustomHeader.RightItem>
</CustomHeader>
</>
);
};

10
web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
View file

@ -7,7 +7,7 @@ import Link from "next/link";
import { useParams } from "next/navigation";
import { ChevronDown, PanelRight } from "lucide-react";
import { IUserProfileProjectSegregation } from "@plane/types";
import { Breadcrumbs, CustomMenu, UserActivityIcon } from "@plane/ui";
import { Breadcrumbs, CustomHeader, CustomMenu, UserActivityIcon } from "@plane/ui";
import { BreadcrumbLink } from "@/components/common";
// components
import { ProfileIssuesFilter } from "@/components/profile";
@ -46,8 +46,8 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
const breadcrumbLabel = `${isCurrentUser ? "Your" : userName} Work`;
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<CustomHeader>
<CustomHeader.LeftItem>
<div className="flex w-full justify-between">
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
@ -104,7 +104,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
</button>
</div>
</div>
</div>
</div>
</CustomHeader.LeftItem>
</CustomHeader>
);
});

5
web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
View file

@ -5,6 +5,7 @@ import { useParams, usePathname } from "next/navigation";
// components
// constants
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "@/constants/profile";
type Props = {
@ -20,7 +21,7 @@ export const ProfileNavbar: React.FC<Props> = (props) => {
const tabsList = isAuthorized ? [...PROFILE_VIEWER_TAB, ...PROFILE_ADMINS_TAB] : PROFILE_VIEWER_TAB;
return (
<div className="sticky -top-0.5 hidden md:flex items-center justify-between gap-4 border-b border-custom-border-300 bg-custom-background-100 px-4 sm:px-5 md:static">
<CustomHeader variant={EHeaderVariant.SECONDARY} className="sticky -top-0.5 hidden md:flex md:static">
<div className="flex items-center overflow-x-scroll">
{tabsList.map((tab) => (
<Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}>
@ -36,6 +37,6 @@ export const ProfileNavbar: React.FC<Props> = (props) => {
</Link>
))}
</div>
</div>
</CustomHeader>
);
};

14
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
View file

@ -4,7 +4,7 @@ import { FC } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// ui
import { ArchiveIcon, Breadcrumbs, Tooltip } from "@plane/ui";
import { ArchiveIcon, Breadcrumbs, Tooltip, CustomHeader } from "@plane/ui";
// components
import { BreadcrumbLink, Logo } from "@/components/common";
// constants
@ -16,8 +16,8 @@ import { useAppRouter } from "@/hooks/use-app-router";
import { usePlatformOS } from "@/hooks/use-platform-os";
type TProps = {
activeTab: 'issues' | 'cycles' | 'modules';
}
activeTab: "issues" | "cycles" | "modules";
};
export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
const { activeTab } = props;
@ -38,8 +38,8 @@ export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
PROJECT_ARCHIVES_BREADCRUMB_LIST[activeTab as keyof typeof PROJECT_ARCHIVES_BREADCRUMB_LIST];
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<CustomHeader>
<CustomHeader.LeftItem>
<div className="flex items-center gap-2.5">
<Breadcrumbs onBack={router.back} isLoading={loader}>
<Breadcrumbs.BreadcrumbItem
@ -92,7 +92,7 @@ export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
</Tooltip>
) : null}
</div>
</div>
</div>
</CustomHeader.LeftItem>
</CustomHeader>
);
});

14
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
View file

@ -4,7 +4,7 @@ import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import useSWR from "swr";
// ui
import { ArchiveIcon, Breadcrumbs, LayersIcon } from "@plane/ui";
import { ArchiveIcon, Breadcrumbs, LayersIcon, CustomHeader } from "@plane/ui";
// components
import { BreadcrumbLink, Logo } from "@/components/common";
import { IssueDetailQuickActions } from "@/components/issues";
@ -36,9 +36,8 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
);
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<div>
<CustomHeader>
<CustomHeader.LeftItem>
<Breadcrumbs isLoading={loader}>
<Breadcrumbs.BreadcrumbItem
type="text"
@ -89,13 +88,14 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
}
/>
</Breadcrumbs>
</div>
</div>
</CustomHeader.LeftItem>
<CustomHeader.RightItem>
<IssueDetailQuickActions
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
issueId={archivedIssueId.toString()}
/>
</div>
</CustomHeader.RightItem>
</CustomHeader>
);
});

2
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
View file

@ -70,7 +70,7 @@ const CycleDetailPage = observer(() => {
{cycleId && !isSidebarCollapsed && (
<div
className={cn(
"flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 top-0 z-[13]"
"flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-[13]"
)}
style={{
boxShadow:

12
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
View file

@ -9,7 +9,7 @@ import { ArrowRight, PanelRight } from "lucide-react";
// types
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
// ui
import { Breadcrumbs, Button, ContrastIcon, CustomMenu, Tooltip } from "@plane/ui";
import { Breadcrumbs, Button, ContrastIcon, CustomMenu, Tooltip, CustomHeader } from "@plane/ui";
// components
import { ProjectAnalyticsModal } from "@/components/analytics";
import { BreadcrumbLink, Logo } from "@/components/common";
@ -161,8 +161,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
onClose={() => setAnalyticsModal(false)}
cycleDetails={cycleDetails ?? undefined}
/>
<div className="relative z-[15] w-full items-center gap-x-2 gap-y-4">
<div className="flex justify-between bg-custom-sidebar-background-100 p-4">
<CustomHeader>
<CustomHeader.LeftItem>
<div className="flex items-center gap-2">
<Breadcrumbs onBack={router.back} isLoading={loader}>
<Breadcrumbs.BreadcrumbItem
@ -235,6 +235,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
/>
</Breadcrumbs>
</div>
</CustomHeader.LeftItem>
<CustomHeader.RightItem>
<div className="hidden items-center gap-2 md:flex ">
<LayoutSelection
layouts={[
@ -315,8 +317,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
>
<PanelRight className={cn("h-4 w-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
</button>
</div>
</div>
</CustomHeader.RightItem>
</CustomHeader>
</>
);
});

18
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
View file

@ -4,7 +4,7 @@ import { FC } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// ui
import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
import { Breadcrumbs, Button, ContrastIcon, CustomHeader } from "@plane/ui";
// components
import { BreadcrumbLink, Logo } from "@/components/common";
import { CyclesViewHeader } from "@/components/cycles";
@ -30,9 +30,8 @@ export const CyclesListHeader: FC = observer(() => {
currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<div>
<CustomHeader>
<CustomHeader.LeftItem>
<Breadcrumbs onBack={router.back} isLoading={loader}>
<Breadcrumbs.BreadcrumbItem
type="text"
@ -55,9 +54,9 @@ export const CyclesListHeader: FC = observer(() => {
link={<BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />} />}
/>
</Breadcrumbs>
</div>
</div>
{canUserCreateCycle && currentProjectDetails && (
</CustomHeader.LeftItem>
<CustomHeader.RightItem>
{canUserCreateCycle && currentProjectDetails ? (
<div className="flex items-center gap-3">
<CyclesViewHeader projectId={currentProjectDetails.id} />
<Button
@ -71,7 +70,10 @@ export const CyclesListHeader: FC = observer(() => {
<div className="hidden sm:block">Add</div> Cycle
</Button>
</div>
) : (
<></>
)}
</div>
</CustomHeader.RightItem>
</CustomHeader>
);
});

5
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
View file

@ -6,6 +6,7 @@ import { useParams } from "next/navigation";
// types
import { TCycleFilters } from "@plane/types";
// components
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import { PageHead } from "@/components/core";
import { CyclesView, CycleCreateUpdateModal, CycleAppliedFiltersList } from "@/components/cycles";
import { EmptyState } from "@/components/empty-state";
@ -81,13 +82,13 @@ const ProjectCyclesPage = observer(() => {
) : (
<>
{calculateTotalFilters(currentProjectFilters ?? {}) !== 0 && (
<div className="border-b border-custom-border-200 px-5 py-3">
<CustomHeader variant={EHeaderVariant.TERNARY}>
<CycleAppliedFiltersList
appliedFilters={currentProjectFilters ?? {}}
handleClearAllFilters={() => clearAllFilters(projectId.toString())}
handleRemoveFilter={handleRemoveFilter}
/>
</div>
</CustomHeader>
)}
<CyclesView workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />

17
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx
View file

@ -5,7 +5,7 @@ import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { RefreshCcw } from "lucide-react";
// ui
import { Breadcrumbs, Button, Intake } from "@plane/ui";
import { Breadcrumbs, Button, Intake, CustomHeader } from "@plane/ui";
// components
import { BreadcrumbLink, Logo } from "@/components/common";
import { InboxIssueCreateEditModalRoot } from "@/components/inbox";
@ -30,8 +30,8 @@ export const ProjectInboxHeader: FC = observer(() => {
const isViewer = currentProjectRole === EUserProjectRoles.VIEWER;
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<CustomHeader>
<CustomHeader.LeftItem>
<div className="flex items-center gap-4">
<Breadcrumbs isLoading={currentProjectDetailsLoader}>
<Breadcrumbs.BreadcrumbItem
@ -64,9 +64,9 @@ export const ProjectInboxHeader: FC = observer(() => {
</div>
)}
</div>
</div>
{currentProjectDetails?.inbox_view && workspaceSlug && projectId && !isViewer && (
</CustomHeader.LeftItem>
<CustomHeader.RightItem>
{currentProjectDetails?.inbox_view && workspaceSlug && projectId && !isViewer ? (
<div className="flex items-center gap-2">
<InboxIssueCreateEditModalRoot
workspaceSlug={workspaceSlug.toString()}
@ -80,7 +80,10 @@ export const ProjectInboxHeader: FC = observer(() => {
Add issue
</Button>
</div>
) : (
<></>
)}
</div>
</CustomHeader.RightItem>
</CustomHeader>
);
});

12
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx
View file

@ -4,7 +4,7 @@ import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { PanelRight } from "lucide-react";
// ui
import { Breadcrumbs, LayersIcon } from "@plane/ui";
import { Breadcrumbs, LayersIcon, CustomHeader } from "@plane/ui";
// components
import { BreadcrumbLink, Logo } from "@/components/common";
import { IssueDetailQuickActions } from "@/components/issues";
@ -29,8 +29,8 @@ export const ProjectIssueDetailsHeader = observer(() => {
const isSidebarCollapsed = issueDetailSidebarCollapsed;
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<CustomHeader>
<CustomHeader.LeftItem>
<div>
<Breadcrumbs onBack={router.back} isLoading={loader}>
<Breadcrumbs.BreadcrumbItem
@ -75,7 +75,8 @@ export const ProjectIssueDetailsHeader = observer(() => {
/>
</Breadcrumbs>
</div>
</div>
</CustomHeader.LeftItem>
<CustomHeader.RightItem>
<IssueDetailQuickActions
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
@ -86,6 +87,7 @@ export const ProjectIssueDetailsHeader = observer(() => {
className={cn("h-4 w-4 ", !isSidebarCollapsed ? "text-custom-primary-100" : " text-custom-text-200")}
/>
</button>
</div>
</CustomHeader.RightItem>
</CustomHeader>
);
});

181
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
View file

@ -1,130 +1,53 @@
"use client";
import { useCallback, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { Briefcase, Circle, ExternalLink } from "lucide-react";
// types
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
// ui
import { Breadcrumbs, Button, LayersIcon, Tooltip } from "@plane/ui";
import { Breadcrumbs, Button, LayersIcon, Tooltip, CustomHeader } from "@plane/ui";
// components
import { ProjectAnalyticsModal } from "@/components/analytics";
import { BreadcrumbLink, CountChip, Logo } from "@/components/common";
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
// constants
import {
EIssueFilterType,
EIssuesStoreType,
EIssueLayoutTypes,
ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
} from "@/constants/issue";
import { EUserProjectRoles } from "@/constants/project";
import HeaderFilters from "@/components/issues/filters";
import { EIssuesStoreType } from "@/constants/issue";
// helpers
import { EUserProjectRoles } from "@/constants/project";
import { SPACE_BASE_PATH, SPACE_BASE_URL } from "@/helpers/common.helper";
import { isIssueFilterActive } from "@/helpers/filter.helper";
// hooks
import {
useEventTracker,
useLabel,
useProject,
useProjectState,
useUser,
useMember,
useCommandPalette,
} from "@/hooks/store";
import { useCommandPalette, useEventTracker, useProject, useUser } from "@/hooks/store";
import { useIssues } from "@/hooks/store/use-issues";
import { useAppRouter } from "@/hooks/use-app-router";
import { usePlatformOS } from "@/hooks/use-platform-os";
export const ProjectIssuesHeader = observer(() => {
// states
const [analyticsModal, setAnalyticsModal] = useState(false);
// router
const router = useAppRouter();
const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string };
// store hooks
const {
project: { projectMemberIds },
} = useMember();
const {
issuesFilter: { issueFilters, updateFilters },
issues: { getGroupIssueCount },
} = useIssues(EIssuesStoreType.PROJECT);
const { toggleCreateIssueModal } = useCommandPalette();
const { setTrackElement } = useEventTracker();
const {
membership: { currentProjectRole },
} = useUser();
const {
issues: { getGroupIssueCount },
} = useIssues(EIssuesStoreType.PROJECT);
const { currentProjectDetails, loader } = useProject();
const { projectStates } = useProjectState();
const { projectLabels } = useLabel();
const { toggleCreateIssueModal } = useCommandPalette();
const { setTrackElement } = useEventTracker();
const { isMobile } = usePlatformOS();
const activeLayout = issueFilters?.displayFilters?.layout;
const handleFiltersUpdate = useCallback(
(key: keyof IIssueFilterOptions, value: string | string[]) => {
if (!workspaceSlug || !projectId) return;
const newValues = issueFilters?.filters?.[key] ?? [];
if (Array.isArray(value)) {
// this validation is majorly for the filter start_date, target_date custom
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
else newValues.splice(newValues.indexOf(val), 1);
});
} else {
if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
else newValues.push(value);
}
updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { [key]: newValues });
},
[workspaceSlug, projectId, issueFilters, updateFilters]
);
const handleLayoutChange = useCallback(
(layout: EIssueLayoutTypes) => {
if (!workspaceSlug || !projectId) return;
updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout });
},
[workspaceSlug, projectId, updateFilters]
);
const handleDisplayFilters = useCallback(
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
if (!workspaceSlug || !projectId) return;
updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter);
},
[workspaceSlug, projectId, updateFilters]
);
const handleDisplayProperties = useCallback(
(property: Partial<IIssueDisplayProperties>) => {
if (!workspaceSlug || !projectId) return;
updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property);
},
[workspaceSlug, projectId, updateFilters]
);
const SPACE_APP_URL = (SPACE_BASE_URL.trim() === "" ? window.location.origin : SPACE_BASE_URL) + SPACE_BASE_PATH;
const publishedURL = `${SPACE_APP_URL}/issues/${currentProjectDetails?.anchor}`;
const issuesCount = getGroupIssueCount(undefined, undefined, false);
const canUserCreateIssue =
currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
const issuesCount = getGroupIssueCount(undefined, undefined, false);
return (
<>
<ProjectAnalyticsModal
isOpen={analyticsModal}
onClose={() => setAnalyticsModal(false)}
projectDetails={currentProjectDetails ?? undefined}
/>
<div className="relative z-[15] flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<CustomHeader>
<CustomHeader.LeftItem>
<div className="flex items-center gap-2.5">
<Breadcrumbs onBack={() => router.back()} isLoading={loader}>
<Breadcrumbs.BreadcrumbItem
@ -165,7 +88,7 @@ export const ProjectIssuesHeader = observer(() => {
</Tooltip>
) : null}
</div>
{currentProjectDetails?.anchor && (
{currentProjectDetails?.anchor ? (
<a
href={publishedURL}
className="group flex items-center gap-1.5 rounded bg-custom-primary-100/10 px-2.5 py-1 text-xs font-medium text-custom-primary-100"
@ -176,61 +99,20 @@ export const ProjectIssuesHeader = observer(() => {
Public
<ExternalLink className="hidden h-3 w-3 group-hover:block" strokeWidth={2} />
</a>
) : (
<></>
)}
</CustomHeader.LeftItem>
<CustomHeader.RightItem>
<div className="hidden gap-3 md:flex">
<HeaderFilters
projectId={projectId}
currentProjectDetails={currentProjectDetails}
workspaceSlug={workspaceSlug}
canUserCreateIssue={canUserCreateIssue}
/>
</div>
<div className="items-center gap-2 hidden md:flex">
<LayoutSelection
layouts={[
EIssueLayoutTypes.LIST,
EIssueLayoutTypes.KANBAN,
EIssueLayoutTypes.CALENDAR,
EIssueLayoutTypes.SPREADSHEET,
EIssueLayoutTypes.GANTT,
]}
onChange={(layout) => handleLayoutChange(layout)}
selectedLayout={activeLayout}
/>
<FiltersDropdown title="Filters" placement="bottom-end" isFiltersApplied={isIssueFilterActive(issueFilters)}>
<FilterSelection
filters={issueFilters?.filters ?? {}}
handleFiltersUpdate={handleFiltersUpdate}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFiltersUpdate={handleDisplayFilters}
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
}
labels={projectLabels}
memberIds={projectMemberIds ?? undefined}
states={projectStates}
cycleViewDisabled={!currentProjectDetails?.cycle_view}
moduleViewDisabled={!currentProjectDetails?.module_view}
/>
</FiltersDropdown>
<FiltersDropdown title="Display" placement="bottom-end">
<DisplayFiltersSelection
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFiltersUpdate={handleDisplayFilters}
displayProperties={issueFilters?.displayProperties ?? {}}
handleDisplayPropertiesUpdate={handleDisplayProperties}
cycleViewDisabled={!currentProjectDetails?.cycle_view}
moduleViewDisabled={!currentProjectDetails?.module_view}
/>
</FiltersDropdown>
</div>
{canUserCreateIssue && (
<>
<Button
className="hidden md:block"
onClick={() => setAnalyticsModal(true)}
variant="neutral-primary"
size="sm"
>
Analytics
</Button>
{canUserCreateIssue ? (
<Button
onClick={() => {
setTrackElement("Project issues page");
@ -240,9 +122,10 @@ export const ProjectIssuesHeader = observer(() => {
>
<div className="hidden sm:block">Add</div> Issue
</Button>
</>
) : (
<></>
)}
</div>
</>
</CustomHeader.RightItem>
</CustomHeader>
);
});

2
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
View file

@ -69,7 +69,7 @@ const ModuleIssuesPage = observer(() => {
{moduleId && !isSidebarCollapsed && (
<div
className={cn(
"flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 top-0 z-[13]"
"flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-[13]"
)}
style={{
boxShadow:

29
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
View file

@ -9,7 +9,7 @@ import { ArrowRight, PanelRight } from "lucide-react";
// types
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
// ui
import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip } from "@plane/ui";
import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip, CustomHeader } from "@plane/ui";
// components
import { ProjectAnalyticsModal } from "@/components/analytics";
import { BreadcrumbLink, Logo } from "@/components/common";
@ -161,9 +161,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
onClose={() => setAnalyticsModal(false)}
moduleDetails={moduleDetails ?? undefined}
/>
<div className="relative z-[15] items-center gap-x-2 gap-y-4">
<div className="flex justify-between bg-custom-sidebar-background-100 p-4">
<div className="flex items-center gap-2">
<CustomHeader>
<CustomHeader.LeftItem>
<Breadcrumbs onBack={router.back} isLoading={loader}>
<Breadcrumbs.BreadcrumbItem
type="text"
@ -234,8 +233,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
}
/>
</Breadcrumbs>
</div>
<div className="flex items-center gap-2">
</CustomHeader.LeftItem>
<CustomHeader.RightItem>
<div className="hidden gap-2 md:flex">
<LayoutSelection
layouts={[
@ -284,7 +283,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
</FiltersDropdown>
</div>
{canUserCreateIssue && (
{canUserCreateIssue ? (
<>
<Button
className="hidden md:block"
@ -305,25 +304,21 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
Add issue
</Button>
</>
) : (
<></>
)}
<button
type="button"
className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
onClick={toggleSidebar}
>
<ArrowRight
className={`hidden h-4 w-4 duration-300 md:block ${isSidebarCollapsed ? "-rotate-180" : ""}`}
/>
<ArrowRight className={`hidden h-4 w-4 duration-300 md:block ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
<PanelRight
className={cn(
"block h-4 w-4 md:hidden",
!isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200"
)}
className={cn("block h-4 w-4 md:hidden", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")}
/>
</button>
</div>
</div>
</div>
</CustomHeader.RightItem>
</CustomHeader>
</>
);
});

18
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
View file

@ -3,7 +3,7 @@
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// ui
import { Breadcrumbs, Button, DiceIcon } from "@plane/ui";
import { Breadcrumbs, Button, DiceIcon, CustomHeader } from "@plane/ui";
// components
import { BreadcrumbLink, Logo } from "@/components/common";
import { ModuleViewHeader } from "@/components/modules";
@ -30,8 +30,8 @@ export const ModulesListHeader: React.FC = observer(() => {
currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<CustomHeader>
<CustomHeader.LeftItem>
<div>
<Breadcrumbs onBack={router.back} isLoading={loader}>
<Breadcrumbs.BreadcrumbItem
@ -56,10 +56,10 @@ export const ModulesListHeader: React.FC = observer(() => {
/>
</Breadcrumbs>
</div>
</div>
<div className="flex items-center gap-2">
</CustomHeader.LeftItem>
<CustomHeader.RightItem>
<ModuleViewHeader />
{canUserCreateModule && (
{canUserCreateModule ? (
<Button
variant="primary"
size="sm"
@ -70,8 +70,10 @@ export const ModulesListHeader: React.FC = observer(() => {
>
<div className="hidden sm:block">Add</div> Module
</Button>
) : (
<></>
)}
</div>
</div>
</CustomHeader.RightItem>
</CustomHeader>
);
});

2
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx
View file

@ -57,7 +57,6 @@ const ProjectModulesPage = observer(() => {
<PageHead title={pageTitle} />
<div className="h-full w-full flex flex-col">
{(calculateTotalFilters(currentProjectFilters ?? {}) !== 0 || currentProjectDisplayFilters?.favorites) && (
<div className="border-b border-custom-border-200 px-5 py-3">
<ModuleAppliedFiltersList
appliedFilters={currentProjectFilters ?? {}}
isFavoriteFilterApplied={currentProjectDisplayFilters?.favorites ?? false}
@ -69,7 +68,6 @@ const ProjectModulesPage = observer(() => {
}}
alwaysAllowEditing
/>
</div>
)}
<ModulesListView />
</div>

20
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
View file

@ -7,7 +7,15 @@ import { FileText } from "lucide-react";
// types
import { TLogoProps } from "@plane/types";
// ui
import { Breadcrumbs, EmojiIconPicker, EmojiIconPickerTypes, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
import {
Breadcrumbs,
EmojiIconPicker,
EmojiIconPickerTypes,
TOAST_TYPE,
Tooltip,
setToast,
CustomHeader,
} from "@plane/ui";
// components
import { BreadcrumbLink, Logo } from "@/components/common";
import { PageEditInformationPopover } from "@/components/pages";
@ -59,8 +67,8 @@ export const PageDetailsHeader = observer(() => {
const pageTitle = getPageName(name);
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<CustomHeader>
<CustomHeader.LeftItem>
<div>
<Breadcrumbs isLoading={loader}>
<Breadcrumbs.BreadcrumbItem
@ -158,9 +166,11 @@ export const PageDetailsHeader = observer(() => {
/>
</Breadcrumbs>
</div>
</div>
</CustomHeader.LeftItem>
<CustomHeader.RightItem>
<PageEditInformationPopover page={page} />
<PageDetailsHeaderExtraActions />
</div>
</CustomHeader.RightItem>
</CustomHeader>
);
});

16
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
View file

@ -4,7 +4,7 @@ import { observer } from "mobx-react";
import { useParams, useSearchParams } from "next/navigation";
import { FileText } from "lucide-react";
// ui
import { Breadcrumbs, Button } from "@plane/ui";
import { Breadcrumbs, Button, CustomHeader } from "@plane/ui";
// helpers
import { BreadcrumbLink, Logo } from "@/components/common";
// constants
@ -30,8 +30,8 @@ export const PagesListHeader = observer(() => {
currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<CustomHeader>
<CustomHeader.LeftItem>
<div>
<Breadcrumbs isLoading={loader}>
<Breadcrumbs.BreadcrumbItem
@ -56,8 +56,9 @@ export const PagesListHeader = observer(() => {
/>
</Breadcrumbs>
</div>
</div>
{canUserCreatePage && (
</CustomHeader.LeftItem>
<CustomHeader.RightItem>
{canUserCreatePage ? (
<div className="flex items-center gap-2">
<Button
variant="primary"
@ -73,7 +74,10 @@ export const PagesListHeader = observer(() => {
Add page
</Button>
</div>
) : (
<></>
)}
</div>
</CustomHeader.RightItem>
</CustomHeader>
);
});

10
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx
View file

@ -5,7 +5,7 @@ import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// ui
import { Settings } from "lucide-react";
import { Breadcrumbs, CustomMenu } from "@plane/ui";
import { Breadcrumbs, CustomMenu, CustomHeader } from "@plane/ui";
// components
import { BreadcrumbLink, Logo } from "@/components/common";
// constants
@ -29,8 +29,8 @@ export const ProjectSettingHeader: FC = observer(() => {
const projectMemberInfo = currentProjectRole || EUserProjectRoles.GUEST;
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<CustomHeader>
<CustomHeader.LeftItem>
<div>
<div className="z-50">
<Breadcrumbs onBack={router.back} isLoading={loader}>
@ -84,7 +84,7 @@ export const ProjectSettingHeader: FC = observer(() => {
)
)}
</CustomMenu>
</div>
</div>
</CustomHeader.LeftItem>
</CustomHeader>
);
});

30
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
View file

@ -8,7 +8,7 @@ import { Layers, Lock } from "lucide-react";
// types
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
// ui
import { Breadcrumbs, Button, CustomMenu, Tooltip } from "@plane/ui";
import { Breadcrumbs, Button, CustomMenu, Tooltip, CustomHeader } from "@plane/ui";
// components
import { BreadcrumbLink, Logo } from "@/components/common";
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
@ -136,8 +136,8 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
const publishLink = getPublishViewLink(viewDetails?.anchor);
return (
<div className="relative z-[15] flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex items-center gap-2">
<CustomHeader>
<CustomHeader.LeftItem>
<Breadcrumbs isLoading={loader}>
<Breadcrumbs.BreadcrumbItem
type="text"
@ -208,15 +208,17 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
/>
</Breadcrumbs>
{viewDetails?.access === EViewAccess.PRIVATE && (
{viewDetails?.access === EViewAccess.PRIVATE ? (
<div className="cursor-default text-custom-text-300">
<Tooltip tooltipContent={"Private"}>
<Lock className="h-4 w-4" />
</Tooltip>
</div>
) : (
<></>
)}
{viewDetails?.anchor && publishLink && (
{viewDetails?.anchor && publishLink ? (
<a
href={publishLink}
className="px-3 py-1.5 bg-green-500/20 text-green-500 rounded text-xs font-medium flex items-center gap-1.5"
@ -226,10 +228,12 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
<span className="flex-shrink-0 rounded-full size-1.5 bg-green-500" />
Live
</a>
) : (
<></>
)}
</div>
<div className="flex items-center gap-2">
{!viewDetails?.is_locked && (
</CustomHeader.LeftItem>
<CustomHeader.RightItem>
{!viewDetails?.is_locked ? (
<>
<LayoutSelection
layouts={[
@ -278,8 +282,10 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
/>
</FiltersDropdown>
</>
) : (
<></>
)}
{canUserCreateIssue && (
{canUserCreateIssue ? (
<Button
onClick={() => {
setTrackElement("PROJECT_VIEW_PAGE_HEADER");
@ -289,8 +295,10 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
>
Add issue
</Button>
) : (
<></>
)}
</div>
</div>
</CustomHeader.RightItem>
</CustomHeader>
);
});

55
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
View file

@ -1,22 +1,15 @@
"use client";
import { useCallback } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { Layers } from "lucide-react";
// ui
import { TViewFilterProps } from "@plane/types";
import { Breadcrumbs, Button } from "@plane/ui";
import { Breadcrumbs, Button, CustomHeader } from "@plane/ui";
// components
import { BreadcrumbLink, Logo } from "@/components/common";
import { ViewListHeader } from "@/components/views";
import { ViewAppliedFiltersList } from "@/components/views/applied-filters";
// constants
import { EViewAccess } from "@/constants/views";
// helpers
import { calculateTotalFilters } from "@/helpers/filter.helper";
// hooks
import { useCommandPalette, useProject, useProjectView } from "@/hooks/store";
import { useCommandPalette, useProject } from "@/hooks/store";
export const ProjectViewsHeader = observer(() => {
// router
@ -24,32 +17,11 @@ export const ProjectViewsHeader = observer(() => {
// store hooks
const { toggleCreateViewModal } = useCommandPalette();
const { currentProjectDetails, loader } = useProject();
const { filters, updateFilters, clearAllFilters } = useProjectView();
const handleRemoveFilter = useCallback(
(key: keyof TViewFilterProps, value: string | EViewAccess | null) => {
let newValues = filters.filters?.[key];
if (key === "favorites") {
newValues = !!value;
}
if (Array.isArray(newValues)) {
if (!value) newValues = [];
else newValues = newValues.filter((val) => val !== value) as string[];
}
updateFilters("filters", { [key]: newValues });
},
[filters.filters, updateFilters]
);
const isFiltersApplied = calculateTotalFilters(filters?.filters ?? {}) !== 0;
return (
<>
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<div>
<CustomHeader>
<CustomHeader.LeftItem>
<Breadcrumbs isLoading={loader}>
<Breadcrumbs.BreadcrumbItem
type="text"
@ -72,27 +44,16 @@ export const ProjectViewsHeader = observer(() => {
link={<BreadcrumbLink label="Views" icon={<Layers className="h-4 w-4 text-custom-text-300" />} />}
/>
</Breadcrumbs>
</div>
</div>
<div className="flex flex-shrink-0 items-center gap-2">
</CustomHeader.LeftItem>
<CustomHeader.RightItem>
<ViewListHeader />
<div>
<Button variant="primary" size="sm" onClick={() => toggleCreateViewModal(true)}>
Add view
</Button>
</div>
</div>
</div>
{isFiltersApplied && (
<div className="border-t border-custom-border-200 px-5 py-3">
<ViewAppliedFiltersList
appliedFilters={filters.filters ?? {}}
handleClearAllFilters={clearAllFilters}
handleRemoveFilter={handleRemoveFilter}
alwaysAllowEditing
/>
</div>
)}
</CustomHeader.RightItem>
</CustomHeader>
</>
);
});

40
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
View file

@ -1,21 +1,29 @@
"use client";
import { useCallback } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// components
import { TViewFilterProps } from "@plane/types";
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import { PageHead } from "@/components/core";
import { EmptyState } from "@/components/empty-state";
import { ProjectViewsList } from "@/components/views";
// constants
import { ViewAppliedFiltersList } from "@/components/views/applied-filters";
import { EmptyStateType } from "@/constants/empty-state";
// constants
import { EViewAccess } from "@/constants/views";
// helpers
import { calculateTotalFilters } from "@/helpers/filter.helper";
// hooks
import { useProject } from "@/hooks/store";
import { useProject, useProjectView } from "@/hooks/store";
const ProjectViewsPage = observer(() => {
// router
const { workspaceSlug, projectId } = useParams();
// store
const { getProjectById, currentProjectDetails } = useProject();
const { filters, updateFilters, clearAllFilters } = useProjectView();
// derived values
const project = projectId ? getProjectById(projectId.toString()) : undefined;
const pageTitle = project?.name ? `${project?.name} - Views` : undefined;
@ -32,10 +40,38 @@ const ProjectViewsPage = observer(() => {
/>
</div>
);
const handleRemoveFilter = useCallback(
(key: keyof TViewFilterProps, value: string | EViewAccess | null) => {
let newValues = filters.filters?.[key];
if (key === "favorites") {
newValues = !!value;
}
if (Array.isArray(newValues)) {
if (!value) newValues = [];
else newValues = newValues.filter((val) => val !== value) as string[];
}
updateFilters("filters", { [key]: newValues });
},
[filters.filters, updateFilters]
);
const isFiltersApplied = calculateTotalFilters(filters?.filters ?? {}) !== 0;
return (
<>
<PageHead title={pageTitle} />
{isFiltersApplied && (
<CustomHeader variant={EHeaderVariant.TERNARY}>
<ViewAppliedFiltersList
appliedFilters={filters.filters ?? {}}
handleClearAllFilters={clearAllFilters}
handleRemoveFilter={handleRemoveFilter}
alwaysAllowEditing
/>
</CustomHeader>
)}
<ProjectViewsList />
</>
);

12
web/app/[workspaceSlug]/(projects)/settings/header.tsx
View file

@ -4,7 +4,7 @@ import { FC } from "react";
import { observer } from "mobx-react";
import { Settings } from "lucide-react";
// ui
import { Breadcrumbs } from "@plane/ui";
import { Breadcrumbs, CustomHeader } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common";
// hooks
@ -14,9 +14,8 @@ export const WorkspaceSettingHeader: FC = observer(() => {
const { currentWorkspace, loader } = useWorkspace();
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<div>
<CustomHeader>
<CustomHeader.LeftItem>
<Breadcrumbs isLoading={loader}>
<Breadcrumbs.BreadcrumbItem
type="text"
@ -30,8 +29,7 @@ export const WorkspaceSettingHeader: FC = observer(() => {
/>
<Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="Settings" />} />
</Breadcrumbs>
</div>
</div>
</div>
</CustomHeader.LeftItem>
</CustomHeader>
);
});

19
web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx
View file

@ -7,7 +7,7 @@ import { useParams } from "next/navigation";
import { Layers } from "lucide-react";
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
// ui
import { Breadcrumbs, Button } from "@plane/ui";
import { Breadcrumbs, Button, CustomHeader } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common";
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "@/components/issues";
@ -98,17 +98,18 @@ export const GlobalIssuesHeader = observer(() => {
return (
<>
<CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
<div className="relative z-[15] flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="relative flex gap-2">
<CustomHeader>
<CustomHeader.LeftItem>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
link={<BreadcrumbLink label={`Views`} icon={<Layers className="h-4 w-4 text-custom-text-300" />} />}
/>
</Breadcrumbs>
</div>
<div className="flex items-center gap-2">
{!isLocked && (
</CustomHeader.LeftItem>
<CustomHeader.RightItem>
{!isLocked ? (
<>
<FiltersDropdown
title="Filters"
@ -135,13 +136,15 @@ export const GlobalIssuesHeader = observer(() => {
/>
</FiltersDropdown>
</>
) : (
<></>
)}
<Button variant="primary" size="sm" onClick={() => setCreateViewModal(true)}>
Add view
</Button>
</div>
</div>
</CustomHeader.RightItem>
</CustomHeader>
</>
);
});

2
web/core/components/common/breadcrumb-link.tsx
View file

@ -25,7 +25,7 @@ export const BreadcrumbLink: React.FC<Props> = (props) => {
href={href}
>
{icon && (
<div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
<div className="flex h-5 w-5 items-center justify-start overflow-hidden !text-[1rem]">{icon}</div>
)}
{label && (
<div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>

9
web/core/components/core/app-header.tsx
View file

@ -2,6 +2,7 @@
import { ReactNode } from "react";
// components
import { CustomRow } from "@plane/ui";
import { SidebarHamburgerToggle } from "@/components/core";
export interface AppHeaderProps {
@ -13,16 +14,14 @@ export const AppHeader = (props: AppHeaderProps) => {
const { header, mobileHeader } = props;
return (
<>
<div className="z-[15]">
<div className="z-10 flex w-full items-center border-b border-custom-border-200">
<div className="block bg-custom-sidebar-background-100 py-4 pl-5 md:hidden">
<CustomRow className="h-[3.75rem] z-10 flex gap-2 w-full items-center border-b border-custom-border-200">
<div className="block bg-custom-sidebar-background-100 md:hidden">
<SidebarHamburgerToggle />
</div>
<div className="w-full">{header}</div>
</div>
</CustomRow>
{mobileHeader && mobileHeader}
</div>
</>
);
};

8
web/core/components/inbox/content/inbox-issue-mobile-header.tsx
View file

@ -15,7 +15,7 @@ import {
PanelLeft,
MoveRight,
} from "lucide-react";
import { CustomMenu } from "@plane/ui";
import { CustomHeader, CustomMenu, EHeaderVariant } from "@plane/ui";
// components
import { InboxIssueStatus } from "@/components/inbox";
import { IssueUpdateStatus } from "@/components/issues";
@ -80,7 +80,7 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
if (!issue || !inboxIssue) return null;
return (
<div className="h-12 relative flex border-custom-border-200 w-full items-center gap-2 px-4">
<CustomHeader variant={EHeaderVariant.SECONDARY} className="flex">
{isNotificationEmbed && (
<button onClick={embedRemoveCurrentNotification}>
<MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
@ -89,7 +89,7 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
<PanelLeft
onClick={() => setIsMobileSidebar(!isMobileSidebar)}
className={cn(
"w-4 h-4 flex-shrink-0 mr-2",
"w-4 h-4 flex-shrink-0 mr-2 my-auto",
isMobileSidebar ? "text-custom-primary-100" : "text-custom-text-200"
)}
/>
@ -181,6 +181,6 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
</CustomMenu>
</div>
</div>
</div>
</CustomHeader>
);
});

5
web/core/components/inbox/inbox-filter/applied-filters/root.tsx
View file

@ -1,6 +1,7 @@
import { FC } from "react";
import { observer } from "mobx-react";
// components
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import {
InboxIssueAppliedFiltersStatus,
InboxIssueAppliedFiltersPriority,
@ -17,7 +18,7 @@ export const InboxIssueAppliedFilters: FC = observer(() => {
if (getAppliedFiltersCount === 0) return <></>;
return (
<div className="p-3 py-2 relative flex flex-wrap items-center gap-1 border-b border-custom-border-300">
<CustomHeader variant={EHeaderVariant.TERNARY} className="flex-wrap items-center gap-1 min-h-none">
{/* status */}
<InboxIssueAppliedFiltersStatus />
{/* state */}
@ -34,6 +35,6 @@ export const InboxIssueAppliedFilters: FC = observer(() => {
<InboxIssueAppliedFiltersDate filterKey="created_at" label="Created date" />
{/* updated_at */}
<InboxIssueAppliedFiltersDate filterKey="updated_at" label="Updated date" />
</div>
</CustomHeader>
);
});

24
web/core/components/inbox/inbox-filter/root.tsx
View file

@ -1,13 +1,33 @@
import { FC } from "react";
import { ListFilter } from "lucide-react";
import { ChevronDown, ListFilter } from "lucide-react";
// components
import { cn } from "@plane/editor";
import { getButtonStyling } from "@plane/ui";
import { InboxIssueFilterSelection, InboxIssueOrderByDropdown } from "@/components/inbox/inbox-filter";
import { FiltersDropdown } from "@/components/issues";
const smallButton = <ListFilter className="h-3 " />;
const largeButton = (
<div className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}>
<ListFilter className="h-3 " />
<span className="hidden lg:flex">Filters</span>
<ChevronDown className="h-3 w-3" strokeWidth={2} />
</div>
);
export const FiltersRoot: FC = () => (
<div className="relative flex items-center gap-2">
<div>
<FiltersDropdown icon={<ListFilter className="h-3 w-3" />} title="Filters" placement="bottom-end">
<FiltersDropdown
menuButton={
<>
<div className="hidden 2xl:flex">{largeButton}</div>
<div className="flex 2xl:hidden">{smallButton}</div>
</>
}
title=""
placement="bottom-end"
>
<InboxIssueFilterSelection />
</FiltersDropdown>
</div>

26
web/core/components/inbox/inbox-filter/sorting/order-by.tsx
View file

@ -16,19 +16,27 @@ export const InboxIssueOrderByDropdown: FC = observer(() => {
const { inboxSorting, handleInboxIssueSorting } = useProjectInbox();
const orderByDetails =
INBOX_ISSUE_ORDER_BY_OPTIONS.find((option) => inboxSorting?.order_by?.includes(option.key)) || undefined;
const smallButton =
inboxSorting?.sort_by === "asc" ? <ArrowUpWideNarrow className="h-3 " /> : <ArrowDownWideNarrow className="h-3 " />;
const largeButton = (
<div className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}>
{inboxSorting?.sort_by === "asc" ? (
<ArrowUpWideNarrow className="h-3 " />
) : (
<ArrowDownWideNarrow className="h-3 " />
)}
{orderByDetails?.label || "Order By"}
<ChevronDown className="h-3 w-3" strokeWidth={2} />
</div>
);
return (
<CustomMenu
customButton={
<div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
{inboxSorting?.sort_by === "asc" ? (
<ArrowUpWideNarrow className="h-3 w-3" />
) : (
<ArrowDownWideNarrow className="h-3 w-3" />
)}
{orderByDetails?.label || "Order By"}
<ChevronDown className="h-3 w-3" strokeWidth={2} />
</div>
<>
<div className="hidden 2xl:flex">{largeButton}</div>
<div className="flex 2xl:hidden">{smallButton}</div>
</>
}
placement="bottom-end"
maxHeight="lg"

9
web/core/components/inbox/sidebar/root.tsx
View file

@ -3,7 +3,7 @@
import { FC, useCallback, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react";
import { TInboxIssueCurrentTab } from "@plane/types";
import { Loader } from "@plane/ui";
import { CustomHeader, Loader, EHeaderVariant } from "@plane/ui";
// components
import { EmptyState } from "@/components/empty-state";
import { FiltersRoot, InboxIssueAppliedFilters, InboxIssueList } from "@/components/inbox";
@ -76,7 +76,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
return (
<div className="bg-custom-background-100 flex-shrink-0 w-full h-full border-r border-custom-border-300 ">
<div className="relative w-full h-full flex flex-col overflow-hidden">
<div className="border-b border-custom-border-300 flex-shrink-0 w-full h-[50px] relative flex items-center gap-2 whitespace-nowrap px-3">
<CustomHeader variant={EHeaderVariant.SECONDARY} className="flex">
{tabNavigationOptions.map((option) => (
<div
key={option?.key}
@ -105,11 +105,10 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
/>
</div>
))}
<div className="ml-auto">
<div className="m-auto mr-0">
<FiltersRoot />
</div>
</div>
</CustomHeader>
<InboxIssueAppliedFilters />
{loader != undefined && loader === "filter-loading" && !inboxIssuePaginationInfo?.next_page_results ? (

143
web/core/components/issues/filters.tsx Normal file
View file

@ -0,0 +1,143 @@
"use client";
import { useCallback, useState } from "react";
import { TProject } from "ee/types";
// types
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
// ui
import { Button } from "@plane/ui";
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
// constants
import {
EIssueFilterType,
EIssuesStoreType,
EIssueLayoutTypes,
ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
} from "@/constants/issue";
// helpers
import { isIssueFilterActive } from "@/helpers/filter.helper";
// hooks
import { useLabel, useProjectState, useMember, useIssues } from "@/hooks/store";
import { ProjectAnalyticsModal } from "../analytics";
type Props = {
currentProjectDetails: TProject | undefined;
projectId: string;
workspaceSlug: string;
canUserCreateIssue: boolean | undefined;
};
const HeaderFilters = ({ currentProjectDetails, projectId, workspaceSlug, canUserCreateIssue }: Props) => {
// states
const [analyticsModal, setAnalyticsModal] = useState(false);
// store hooks
const {
project: { projectMemberIds },
} = useMember();
const {
issuesFilter: { issueFilters, updateFilters },
} = useIssues(EIssuesStoreType.PROJECT);
const { projectStates } = useProjectState();
const { projectLabels } = useLabel();
const activeLayout = issueFilters?.displayFilters?.layout;
const handleFiltersUpdate = useCallback(
(key: keyof IIssueFilterOptions, value: string | string[]) => {
if (!workspaceSlug || !projectId) return;
const newValues = issueFilters?.filters?.[key] ?? [];
if (Array.isArray(value)) {
// this validation is majorly for the filter start_date, target_date custom
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
else newValues.splice(newValues.indexOf(val), 1);
});
} else {
if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
else newValues.push(value);
}
updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { [key]: newValues });
},
[workspaceSlug, projectId, issueFilters, updateFilters]
);
const handleLayoutChange = useCallback(
(layout: EIssueLayoutTypes) => {
if (!workspaceSlug || !projectId) return;
updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout });
},
[workspaceSlug, projectId, updateFilters]
);
const handleDisplayFilters = useCallback(
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
if (!workspaceSlug || !projectId) return;
updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter);
},
[workspaceSlug, projectId, updateFilters]
);
const handleDisplayProperties = useCallback(
(property: Partial<IIssueDisplayProperties>) => {
if (!workspaceSlug || !projectId) return;
updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property);
},
[workspaceSlug, projectId, updateFilters]
);
return (
<>
<ProjectAnalyticsModal
isOpen={analyticsModal}
onClose={() => setAnalyticsModal(false)}
projectDetails={currentProjectDetails ?? undefined}
/>
<LayoutSelection
layouts={[
EIssueLayoutTypes.LIST,
EIssueLayoutTypes.KANBAN,
EIssueLayoutTypes.CALENDAR,
EIssueLayoutTypes.SPREADSHEET,
EIssueLayoutTypes.GANTT,
]}
onChange={(layout) => handleLayoutChange(layout)}
selectedLayout={activeLayout}
/>
<FiltersDropdown title="Filters" placement="bottom-end" isFiltersApplied={isIssueFilterActive(issueFilters)}>
<FilterSelection
filters={issueFilters?.filters ?? {}}
handleFiltersUpdate={handleFiltersUpdate}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFiltersUpdate={handleDisplayFilters}
layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
labels={projectLabels}
memberIds={projectMemberIds ?? undefined}
states={projectStates}
cycleViewDisabled={!currentProjectDetails?.cycle_view}
moduleViewDisabled={!currentProjectDetails?.module_view}
/>
</FiltersDropdown>
<FiltersDropdown title="Display" placement="bottom-end">
<DisplayFiltersSelection
layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFiltersUpdate={handleDisplayFilters}
displayProperties={issueFilters?.displayProperties ?? {}}
handleDisplayPropertiesUpdate={handleDisplayProperties}
cycleViewDisabled={!currentProjectDetails?.cycle_view}
moduleViewDisabled={!currentProjectDetails?.module_view}
/>
</FiltersDropdown>
{canUserCreateIssue ? (
<Button className="hidden md:block" onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
Analytics
</Button>
) : (
<></>
)}
</>
);
};
export default HeaderFilters;

2
web/core/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
View file

@ -59,7 +59,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
!disableEditing && (alwaysAllowEditing || (currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER));
return (
<div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100 truncate">
<div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100 truncate my-auto">
{Object.entries(appliedFilters).map(([key, value]) => {
const filterKey = key as keyof IIssueFilterOptions;

8
web/core/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
View file

@ -2,6 +2,7 @@ import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { IIssueFilterOptions } from "@plane/types";
// hooks
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
import { useIssues, useLabel, useProjectState } from "@/hooks/store";
@ -76,7 +77,8 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
if (Object.keys(appliedFilters).length === 0 || !workspaceSlug || !projectId || !cycleId) return null;
return (
<div className="flex justify-between p-4 gap-2.5">
<CustomHeader variant={EHeaderVariant.TERNARY}>
<CustomHeader.LeftItem>
<AppliedFiltersList
appliedFilters={appliedFilters}
handleClearAllFilters={handleClearAllFilters}
@ -84,7 +86,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
labels={projectLabels ?? []}
states={projectStates}
/>
</CustomHeader.LeftItem>
<SaveFilterView
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
@ -94,6 +96,6 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
display_properties: issueFilters?.displayProperties,
}}
/>
</div>
</CustomHeader>
);
});

17
web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
View file

@ -6,10 +6,10 @@ import isEmpty from "lodash/isEmpty";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// types
import { cn } from "@plane/editor";
import { IIssueFilterOptions, TStaticViewTypes } from "@plane/types";
//ui
// components
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import { AppliedFiltersList } from "@/components/issues";
import { UpdateViewComponent } from "@/components/views/update-view-component";
import { CreateUpdateWorkspaceViewModal } from "@/components/workspace";
@ -133,7 +133,7 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
if (areAppliedFiltersEmpty && areFiltersEqual) return null;
return (
<>
<CustomHeader variant={EHeaderVariant.TERNARY}>
<CreateUpdateWorkspaceViewModal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
@ -144,11 +144,7 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
...viewFilters,
}}
/>
<div
className={cn("flex items-start justify-between gap-4 p-4", {
"justify-end": areAppliedFiltersEmpty,
})}
>
<AppliedFiltersList
labels={workspaceLabels ?? undefined}
appliedFilters={appliedFilters ?? {}}
@ -158,7 +154,7 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
alwaysAllowEditing
/>
{!isDefaultView && (
{!isDefaultView ? (
<UpdateViewComponent
isLocked={isLocked}
areFiltersEqual={!!areFiltersEqual}
@ -167,8 +163,9 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
setIsModalOpen={setIsModalOpen}
handleUpdateView={handleUpdateView}
/>
) : (
<></>
)}
</div>
</>
</CustomHeader>
);
});

8
web/core/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
View file

@ -2,6 +2,7 @@ import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { IIssueFilterOptions } from "@plane/types";
// hooks
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
import { useIssues, useLabel, useProjectState } from "@/hooks/store";
@ -75,7 +76,8 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
if (!workspaceSlug || !projectId || !moduleId || Object.keys(appliedFilters).length === 0) return null;
return (
<div className="flex justify-between p-4 gap-2.5">
<CustomHeader variant={EHeaderVariant.TERNARY}>
<CustomHeader.LeftItem>
<AppliedFiltersList
appliedFilters={appliedFilters}
handleClearAllFilters={handleClearAllFilters}
@ -83,7 +85,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
labels={projectLabels ?? []}
states={projectStates}
/>
</CustomHeader.LeftItem>
<SaveFilterView
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
@ -93,6 +95,6 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
display_properties: issueFilters?.displayProperties,
}}
/>
</div>
</CustomHeader>
);
});

5
web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
View file

@ -3,6 +3,7 @@ import { useParams } from "next/navigation";
import { IIssueFilterOptions } from "@plane/types";
// hooks
// components
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
// constants
import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
@ -67,7 +68,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
if (Object.keys(appliedFilters).length === 0) return null;
return (
<div className="flex justify-between p-4 gap-2.5">
<CustomHeader variant={EHeaderVariant.TERNARY}>
<AppliedFiltersList
appliedFilters={appliedFilters}
handleClearAllFilters={handleClearAllFilters}
@ -86,6 +87,6 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
}}
/>
)}
</div>
</CustomHeader>
);
});

9
web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
View file

@ -8,6 +8,7 @@ import { useParams } from "next/navigation";
// types
import { IIssueFilterOptions } from "@plane/types";
// components
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import { AppliedFiltersList } from "@/components/issues";
import { CreateUpdateProjectViewModal } from "@/components/views";
import { UpdateViewComponent } from "@/components/views/update-view-component";
@ -113,7 +114,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
const isOwner = viewDetails?.owned_by === data?.id;
return (
<div className="flex justify-between gap-4 p-4">
<CustomHeader variant={EHeaderVariant.TERNARY}>
<CreateUpdateProjectViewModal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
@ -127,7 +128,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
...viewFilters,
}}
/>
<div>
<CustomHeader.LeftItem>
<AppliedFiltersList
appliedFilters={appliedFilters ?? {}}
handleClearAllFilters={handleClearAllFilters}
@ -136,7 +137,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
states={projectStates}
disableEditing={isLocked}
/>
</div>
</CustomHeader.LeftItem>
<UpdateViewComponent
isLocked={isLocked}
areFiltersEqual={!!areFiltersEqual}
@ -145,6 +146,6 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
setIsModalOpen={setIsModalOpen}
handleUpdateView={handleUpdateView}
/>
</div>
</CustomHeader>
);
});

9
web/core/components/modules/applied-filters/root.tsx
View file

@ -1,6 +1,7 @@
import { X } from "lucide-react";
import { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
// components
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import { AppliedDateFilters, AppliedMembersFilters, AppliedStatusFilters } from "@/components/modules";
// helpers
import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper";
@ -36,7 +37,8 @@ export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
const isEditingAllowed = alwaysAllowEditing;
return (
<div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
<CustomHeader variant={EHeaderVariant.TERNARY} className="flex flex-wrap gap-2">
<CustomHeader.LeftItem>
{Object.entries(appliedFilters).map(([key, value]) => {
const filterKey = key as keyof TModuleFilters;
@ -46,7 +48,7 @@ export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
return (
<div
key={filterKey}
className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 capitalize"
>
<div className="flex flex-wrap items-center gap-1.5">
<span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
@ -121,6 +123,7 @@ export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
<X size={12} strokeWidth={2} />
</button>
)}
</div>
</CustomHeader.LeftItem>
</CustomHeader>
);
};

2
web/core/components/pages/editor/header/extra-options.tsx
View file

@ -44,7 +44,7 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
};
return (
<div className="flex flex-grow items-center justify-end gap-3">
<div className="flex items-center justify-end gap-3">
{is_locked && <LockedComponent />}
{archived_at && (
<div className="flex h-7 items-center gap-2 rounded-full bg-blue-500/20 px-3 py-0.5 text-xs font-medium text-blue-500">

11
web/core/components/pages/editor/header/mobile-root.tsx
View file

@ -1,6 +1,7 @@
import { observer } from "mobx-react";
import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/editor";
// components
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import { PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
// hooks
import { usePageFilters } from "@/hooks/use-page-filters";
@ -42,8 +43,8 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
return (
<>
<div className="flex items-center border-b border-custom-border-200 px-2 py-1">
<div className="flex-shrink-0">
<CustomHeader variant={EHeaderVariant.SECONDARY} className="flex justify-between">
<div className="flex-shrink-0 my-auto">
<PageSummaryPopover
editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
isFullWidth={isFullWidth}
@ -59,12 +60,12 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
page={page}
readOnlyEditorRef={readOnlyEditorRef}
/>
</div>
<div className="border-b border-custom-border-200 py-1 px-2">
</CustomHeader>
<CustomHeader variant={EHeaderVariant.TERNARY}>
{(editorReady || readOnlyEditorReady) && isContentEditable && editorRef.current && (
<PageToolbar editorRef={editorRef?.current} />
)}
</div>
</CustomHeader>
</>
);
});

12
web/core/components/pages/editor/header/root.tsx
View file

@ -1,6 +1,7 @@
import { observer } from "mobx-react";
import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/editor";
// components
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import { PageEditorMobileHeaderRoot, PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
// helpers
import { cn } from "@/helpers/common.helper";
@ -44,13 +45,8 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
return (
<>
<div className="hidden md:flex items-center border-b border-custom-border-200 px-3 py-2 md:px-5">
<div
className={cn("flex-shrink-0", {
"w-40 lg:w-56": !isFullWidth,
"w-[5%]": isFullWidth,
})}
>
<CustomHeader variant={EHeaderVariant.SECONDARY} className="hidden md:flex justify-between">
<div className={cn("flex-shrink-0 my-auto")}>
<PageSummaryPopover
editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
isFullWidth={isFullWidth}
@ -69,7 +65,7 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
page={page}
readOnlyEditorRef={readOnlyEditorRef}
/>
</div>
</CustomHeader>
<div className="md:hidden">
<PageEditorMobileHeaderRoot
editorRef={editorRef}

15
web/core/components/pages/header/root.tsx
View file

@ -3,6 +3,7 @@ import { observer } from "mobx-react";
import { ListFilter } from "lucide-react";
import { TPageFilterProps, TPageNavigationTabs } from "@plane/types";
// components
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import { FiltersDropdown } from "@/components/issues";
import {
PageAppliedFiltersList,
@ -49,9 +50,11 @@ export const PagesListHeaderRoot: React.FC<Props> = observer((props) => {
return (
<>
<div className="flex-shrink-0 h-[50px] w-full border-b border-custom-border-200 px-6 relative flex items-center gap-4 justify-between">
<CustomHeader variant={EHeaderVariant.SECONDARY} className="flex">
<CustomHeader.LeftItem>
<PageTabNavigation workspaceSlug={workspaceSlug} projectId={projectId} pageType={pageType} />
<div className="h-full flex items-center gap-2 self-end">
</CustomHeader.LeftItem>
<CustomHeader.RightItem>
<PageSearchInput
searchQuery={filters.searchQuery}
updateSearchQuery={(val) => updateFilters("searchQuery", val)}
@ -76,17 +79,17 @@ export const PagesListHeaderRoot: React.FC<Props> = observer((props) => {
memberIds={workspaceMemberIds ?? undefined}
/>
</FiltersDropdown>
</div>
</div>
</CustomHeader.RightItem>
</CustomHeader>
{calculateTotalFilters(filters?.filters ?? {}) !== 0 && (
<div className="border-b border-custom-border-200 px-5 py-3">
<CustomHeader variant={EHeaderVariant.TERNARY}>
<PageAppliedFiltersList
appliedFilters={filters.filters ?? {}}
handleClearAllFilters={clearAllFilters}
handleRemoveFilter={handleRemoveFilter}
alwaysAllowEditing
/>
</div>
</CustomHeader>
)}
</>
);

9
web/core/components/pages/list/search-input.tsx
View file

@ -36,11 +36,11 @@ export const PageSearchInput: FC<Props> = (props) => {
}, [searchQuery]);
return (
<>
<div className="flex">
{!isSearchOpen && (
<button
type="button"
className="flex-shrink-0 hover:bg-custom-background-80 rounded text-custom-text-400 relative flex justify-center items-center w-6 h-6"
className="flex-shrink-0 hover:bg-custom-background-80 rounded text-custom-text-400 relative flex justify-center items-center w-6 h-6 my-auto"
onClick={() => {
setIsSearchOpen(true);
inputRef.current?.focus();
@ -49,10 +49,9 @@ export const PageSearchInput: FC<Props> = (props) => {
<Search className="h-3.5 w-3.5" />
</button>
)}
<div
className={cn(
"ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
"flex items-center justify-start rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
{
"w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
}
@ -80,6 +79,6 @@ export const PageSearchInput: FC<Props> = (props) => {
</button>
)}
</div>
</>
</div>
);
};

4
web/core/components/project/applied-filters/root.tsx
View file

@ -47,7 +47,7 @@ export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
const isEditingAllowed = alwaysAllowEditing;
return (
<div className="flex items-start justify-between gap-1.5">
<div className="flex items-start justify-between gap-1.5 my-auto w-full">
<div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
{/* Applied filters */}
{Object.entries(appliedFilters ?? {}).map(([key, value]) => {
@ -132,7 +132,7 @@ export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
</p>
}
>
<span className="bg-custom-background-80 rounded-full text-sm font-medium py-1 px-2.5">
<span className="bg-custom-background-80 rounded-full text-sm font-medium py-1 px-2.5 my-auto">
{filteredProjects}/{totalProjects}
</span>
</Tooltip>

93
web/core/components/project/filters.tsx Normal file
View file

@ -0,0 +1,93 @@
import { useCallback } from "react";
import { useParams } from "next/navigation";
import { ListFilter } from "lucide-react";
// types
import { cn } from "@plane/editor";
import { TProjectFilters } from "@plane/types";
// components
import { FiltersDropdown } from "@/components/issues";
import { ProjectFiltersSelection, ProjectOrderByDropdown } from "@/components/project";
// helpers
import { calculateTotalFilters } from "@/helpers/filter.helper";
// hooks
import { useMember, useProjectFilter } from "@/hooks/store";
type Props = {
filterMenuButton?: React.ReactNode;
classname?: string;
filterClassname?: string;
isMobile?: boolean;
};
const HeaderFilters = ({ filterMenuButton, isMobile, classname = "", filterClassname = "" }: Props) => {
// router
const { workspaceSlug } = useParams();
const {
currentWorkspaceDisplayFilters: displayFilters,
currentWorkspaceFilters: filters,
updateFilters,
updateDisplayFilters,
} = useProjectFilter();
const {
workspace: { workspaceMemberIds },
} = useMember();
const handleFilters = useCallback(
(key: keyof TProjectFilters, value: string | string[]) => {
if (!workspaceSlug) return;
let newValues = filters?.[key] ?? [];
if (Array.isArray(value)) {
if (key === "created_at" && newValues.find((v) => v.includes("custom"))) newValues = [];
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
else newValues.splice(newValues.indexOf(val), 1);
});
} else {
if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
else {
if (key === "created_at") newValues = [value];
else newValues.push(value);
}
}
updateFilters(workspaceSlug.toString(), { [key]: newValues });
},
[filters, updateFilters, workspaceSlug]
);
const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0;
return (
<div className={cn("flex gap-3", classname)}>
<ProjectOrderByDropdown
value={displayFilters?.order_by}
onChange={(val) => {
if (!workspaceSlug || val === displayFilters?.order_by) return;
updateDisplayFilters(workspaceSlug.toString(), {
order_by: val,
});
}}
isMobile={isMobile}
/>
<div className={cn(filterClassname)}>
<FiltersDropdown
icon={<ListFilter className="h-3 w-3" />}
title="Filters"
placement="bottom-end"
isFiltersApplied={isFiltersApplied}
menuButton={filterMenuButton || null}
>
<ProjectFiltersSelection
displayFilters={displayFilters ?? {}}
filters={filters ?? {}}
handleFiltersUpdate={handleFilters}
handleDisplayFiltersUpdate={(val) => {
if (!workspaceSlug) return;
updateDisplayFilters(workspaceSlug.toString(), val);
}}
memberIds={workspaceMemberIds ?? undefined}
/>
</FiltersDropdown>
</div>
</div>
);
};
export default HeaderFilters;

104
web/core/components/project/header.tsx
View file

@ -1,29 +1,23 @@
"use client";
import { useCallback, useEffect, useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { observer } from "mobx-react";
import { useParams, usePathname } from "next/navigation";
import { Search, Briefcase, X, ListFilter } from "lucide-react";
// types
import { TProjectFilters } from "@plane/types";
import { usePathname } from "next/navigation";
import { Search, Briefcase, X } from "lucide-react";
// ui
import { Breadcrumbs, Button } from "@plane/ui";
import { Breadcrumbs, Button, CustomHeader } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common";
import { FiltersDropdown } from "@/components/issues";
import { ProjectFiltersSelection, ProjectOrderByDropdown } from "@/components/project";
// constants
import { EUserWorkspaceRoles } from "@/constants/workspace";
// helpers
import { cn } from "@/helpers/common.helper";
import { calculateTotalFilters } from "@/helpers/filter.helper";
// hooks
import { useCommandPalette, useEventTracker, useMember, useProjectFilter, useUser } from "@/hooks/store";
import { useCommandPalette, useEventTracker, useProjectFilter, useUser } from "@/hooks/store";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
import HeaderFilters from "./filters";
export const ProjectsBaseHeader = observer(() => {
// router
const { workspaceSlug } = useParams();
// states
const [isSearchOpen, setIsSearchOpen] = useState(false);
// refs
@ -36,17 +30,8 @@ export const ProjectsBaseHeader = observer(() => {
} = useUser();
const pathname = usePathname();
const {
currentWorkspaceDisplayFilters: displayFilters,
currentWorkspaceFilters: filters,
updateFilters,
updateDisplayFilters,
searchQuery,
updateSearchQuery,
} = useProjectFilter();
const {
workspace: { workspaceMemberIds },
} = useMember();
const { searchQuery, updateSearchQuery } = useProjectFilter();
// outside click detector hook
useOutsideClickDetector(inputRef, () => {
if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
@ -55,29 +40,6 @@ export const ProjectsBaseHeader = observer(() => {
const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
const isArchived = pathname.includes("/archives");
const handleFilters = useCallback(
(key: keyof TProjectFilters, value: string | string[]) => {
if (!workspaceSlug) return;
let newValues = filters?.[key] ?? [];
if (Array.isArray(value)) {
if (key === "created_at" && newValues.find((v) => v.includes("custom"))) newValues = [];
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
else newValues.splice(newValues.indexOf(val), 1);
});
} else {
if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
else {
if (key === "created_at") newValues = [value];
else newValues.push(value);
}
}
updateFilters(workspaceSlug.toString(), { [key]: newValues });
},
[filters, updateFilters, workspaceSlug]
);
const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Escape") {
if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
@ -89,12 +51,9 @@ export const ProjectsBaseHeader = observer(() => {
if (searchQuery.trim() !== "") setIsSearchOpen(true);
}, [searchQuery]);
const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0;
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<div>
<CustomHeader>
<CustomHeader.LeftItem>
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
@ -102,9 +61,8 @@ export const ProjectsBaseHeader = observer(() => {
/>
{isArchived && <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="Archived" />} />}
</Breadcrumbs>
</div>
</div>
<div className="w-full flex items-center justify-end gap-3">
</CustomHeader.LeftItem>
<CustomHeader.RightItem>
<div className="flex items-center">
{!isSearchOpen && (
<button
@ -149,35 +107,11 @@ export const ProjectsBaseHeader = observer(() => {
)}
</div>
</div>
<div className="hidden md:flex gap-3">
<ProjectOrderByDropdown
value={displayFilters?.order_by}
onChange={(val) => {
if (!workspaceSlug || val === displayFilters?.order_by) return;
updateDisplayFilters(workspaceSlug.toString(), {
order_by: val,
});
}}
/>
<FiltersDropdown
icon={<ListFilter className="h-3 w-3" />}
title="Filters"
placement="bottom-end"
isFiltersApplied={isFiltersApplied}
>
<ProjectFiltersSelection
displayFilters={displayFilters ?? {}}
filters={filters ?? {}}
handleFiltersUpdate={handleFilters}
handleDisplayFiltersUpdate={(val) => {
if (!workspaceSlug) return;
updateDisplayFilters(workspaceSlug.toString(), val);
}}
memberIds={workspaceMemberIds ?? undefined}
/>
</FiltersDropdown>
<div className="hidden md:flex">
<HeaderFilters />
</div>
{isAuthorizedUser && !isArchived && (
{isAuthorizedUser && !isArchived ? (
<Button
size="sm"
onClick={() => {
@ -188,8 +122,10 @@ export const ProjectsBaseHeader = observer(() => {
>
<span className="hidden sm:inline-block">Add</span> Project
</Button>
) : (
<></>
)}
</div>
</div>
</CustomHeader.RightItem>
</CustomHeader>
);
});

18
web/core/components/project/root.tsx
View file

@ -6,6 +6,7 @@ import { observer } from "mobx-react";
import { useParams, usePathname } from "next/navigation";
import { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
// components
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import { PageHead } from "@/components/core";
import { ProjectAppliedFiltersList, ProjectCardList } from "@/components/project";
// helpers
@ -32,9 +33,8 @@ const Root = observer(() => {
const isArchived = pathname.includes("/archives");
const allowedDisplayFilters = currentWorkspaceAppliedDisplayFilters?.filter(
(filter) => filter !== "archived_projects"
) ?? [];
const allowedDisplayFilters =
currentWorkspaceAppliedDisplayFilters?.filter((filter) => filter !== "archived_projects") ?? [];
const handleRemoveFilter = useCallback(
(key: keyof TProjectFilters, value: string | null) => {
@ -65,17 +65,17 @@ const Root = observer(() => {
}, [clearAllFilters, clearAllAppliedDisplayFilters, workspaceSlug]);
useEffect(() => {
isArchived ? updateDisplayFilters(workspaceSlug.toString(), { archived_projects: true }) :
updateDisplayFilters(workspaceSlug.toString(), { archived_projects: false });
isArchived
? updateDisplayFilters(workspaceSlug.toString(), { archived_projects: true })
: updateDisplayFilters(workspaceSlug.toString(), { archived_projects: false });
}, [pathname]);
return (
<>
<PageHead title={pageTitle} />
<div className="flex h-full w-full flex-col">
{(calculateTotalFilters(currentWorkspaceFilters ?? {}) !== 0 ||
(allowedDisplayFilters.length>0)) && (
<div className="border-b border-custom-border-200 px-5 py-3">
{(calculateTotalFilters(currentWorkspaceFilters ?? {}) !== 0 || allowedDisplayFilters.length > 0) && (
<CustomHeader variant={EHeaderVariant.TERNARY}>
<ProjectAppliedFiltersList
appliedFilters={currentWorkspaceFilters ?? {}}
appliedDisplayFilters={allowedDisplayFilters}
@ -86,7 +86,7 @@ const Root = observer(() => {
totalProjects={totalProjectIds?.length ?? 0}
alwaysAllowEditing
/>
</div>
</CustomHeader>
)}
<ProjectCardList />
</div>

2
web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
View file

@ -21,7 +21,7 @@ export const SpreadsheetIssueRowLoader = (props: { columnCount: number }) => (
);
export const SpreadsheetLayoutLoader = () => (
<div className="horizontal-scroll-enable h-full w-full ">
<div className="horizontal-scroll-enable h-full w-full overflow-y-auto ">
<table>
<thead>
<tr>

7
web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
View file

@ -4,6 +4,7 @@ import { FC } from "react";
import { observer } from "mobx-react";
import { X } from "lucide-react";
// constants
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import { ENotificationFilterType, FILTER_TYPE_OPTIONS } from "@/constants/notification";
// hooks
import { useWorkspaceNotifications } from "@/hooks/store";
@ -35,7 +36,8 @@ export const AppliedFilters: FC<TAppliedFilters> = observer((props) => {
if (!isFiltersEnabled || !workspaceSlug) return <></>;
return (
<div className="border-b border-custom-border-200 px-5 py-3 flex items-center flex-wrap gap-2">
<CustomHeader variant={EHeaderVariant.TERNARY}>
<CustomHeader.LeftItem>
{FILTER_TYPE_OPTIONS.map((filter) => {
const isSelected = filters?.type?.[filter?.value] || false;
if (!isSelected) return <></>;
@ -59,6 +61,7 @@ export const AppliedFilters: FC<TAppliedFilters> = observer((props) => {
>
<div className="whitespace-nowrap">Clear all</div>
</div>
</div>
</CustomHeader.LeftItem>
</CustomHeader>
);
});

13
web/core/components/workspace-notifications/sidebar/header/root.tsx
View file

@ -3,7 +3,7 @@
import { FC } from "react";
import { observer } from "mobx-react";
import { Inbox } from "lucide-react";
import { Breadcrumbs } from "@plane/ui";
import { Breadcrumbs, CustomHeader } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common";
import { SidebarHamburgerToggle } from "@/components/core";
@ -18,8 +18,8 @@ export const NotificationSidebarHeader: FC<TNotificationSidebarHeader> = observe
if (!workspaceSlug) return <></>;
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<CustomHeader className="my-auto">
<CustomHeader.LeftItem>
<div className="block bg-custom-sidebar-background-100 md:hidden">
<SidebarHamburgerToggle />
</div>
@ -31,9 +31,10 @@ export const NotificationSidebarHeader: FC<TNotificationSidebarHeader> = observe
}
/>
</Breadcrumbs>
</div>
</CustomHeader.LeftItem>
<CustomHeader.RightItem>
<NotificationSidebarHeaderOptions workspaceSlug={workspaceSlug} />
</div>
</CustomHeader.RightItem>
</CustomHeader>
);
});

13
web/core/components/workspace-notifications/sidebar/root.tsx
View file

@ -4,6 +4,7 @@ import { FC } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// components
import { CustomHeader, CustomRow, EHeaderVariant, ERowVariant } from "@plane/ui";
import { CountChip } from "@/components/common";
import {
NotificationsLoader,
@ -46,15 +47,15 @@ export const NotificationsSidebar: FC = observer(() => {
)}
>
<div className="relative w-full h-full overflow-hidden flex flex-col">
<div className="border-b border-custom-border-200">
<CustomRow className="h-[3.75rem] border-b border-custom-border-200 flex">
<NotificationSidebarHeader workspaceSlug={workspaceSlug.toString()} />
</div>
</CustomRow>
<div className="flex-shrink-0 w-full h-[46px] border-b border-custom-border-200 px-5 relative flex items-center gap-2">
<CustomHeader variant={EHeaderVariant.SECONDARY} className="flex">
{NOTIFICATION_TABS.map((tab) => (
<div
key={tab.value}
className="h-full px-3 relative flex flex-col cursor-pointer"
className="h-full px-3 relative cursor-pointer"
onClick={() => currentNotificationTab != tab.value && setCurrentNotificationTab(tab.value)}
>
<div
@ -75,12 +76,10 @@ export const NotificationsSidebar: FC = observer(() => {
)}
</div>
))}
</div>
</CustomHeader>
{/* applied filters */}
<div className="flex-shrink-0">
<AppliedFilters workspaceSlug={workspaceSlug.toString()} />
</div>
{/* rendering notifications */}
{loader === "init-loader" ? (

15
web/core/components/workspace/views/header.tsx
View file

@ -6,6 +6,7 @@ import { Plus } from "lucide-react";
// types
import { TStaticViewTypes } from "@plane/types";
// components
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import {
CreateUpdateWorkspaceViewModal,
DefaultWorkspaceViewQuickActions,
@ -103,12 +104,11 @@ export const GlobalViewsHeader: React.FC = observer(() => {
const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
return (
<>
<CustomHeader variant={EHeaderVariant.SECONDARY} className="flex gap-4">
<CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
<div className="group relative flex border-b border-custom-border-200">
<div
ref={containerRef}
className="flex w-full items-center overflow-x-auto px-4 horizontal-scrollbar scrollbar-sm"
className="flex h-full w-full items-center overflow-x-auto horizontal-scrollbar scrollbar-sm"
>
{DEFAULT_GLOBAL_VIEWS_LIST.map((tab, index) => (
<DefaultViewTab key={`${tab.key}-${index}`} tab={tab} />
@ -117,16 +117,17 @@ export const GlobalViewsHeader: React.FC = observer(() => {
{currentWorkspaceViews?.map((viewId) => <ViewTab key={viewId} viewId={viewId} />)}
</div>
{isAuthorizedUser && (
{isAuthorizedUser ? (
<button
type="button"
className="sticky -right-4 flex w-12 flex-shrink-0 items-center justify-center border-transparent bg-custom-background-100 py-3 hover:border-custom-border-200 hover:text-custom-text-400"
className="sticky -right-4 flex flex-shrink-0 items-center justify-center border-transparent bg-custom-background-100 py-3 hover:border-custom-border-200 hover:text-custom-text-400"
onClick={() => setCreateViewModal(true)}
>
<Plus className="h-4 w-4 text-custom-primary-200" />
</button>
) : (
<></>
)}
</div>
</>
</CustomHeader>
);
});