[WEB-1065] chore: workspace view and empty filter improvement (#4308)

* chore: workspace view layout improvement

* fix: empty applied filters

* chore: code refactor

* chore: code refactor

* fix: build errors

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
This commit is contained in:
Anmol Singh Bhatia 2024-04-29 19:45:06 +05:30 committed by GitHub
parent 03065d2c1d
commit e5681534d7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 41 additions and 83 deletions

View File

@ -1,35 +1,23 @@
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// hooks // icons
import { List, PlusIcon, Sheet } from "lucide-react"; import { PlusIcon } from "lucide-react";
// types
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types"; import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
import { Breadcrumbs, Button, LayersIcon, PhotoFilterIcon, Tooltip } from "@plane/ui"; // ui
import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common"; import { BreadcrumbLink } from "@/components/common";
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "@/components/issues"; import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "@/components/issues";
// components
import { CreateUpdateWorkspaceViewModal } from "@/components/workspace"; import { CreateUpdateWorkspaceViewModal } from "@/components/workspace";
// ui
// icons
// types
// constants // constants
import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue"; import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
import { EUserWorkspaceRoles } from "@/constants/workspace"; import { EUserWorkspaceRoles } from "@/constants/workspace";
// hooks
import { useLabel, useMember, useUser, useIssues } from "@/hooks/store"; import { useLabel, useMember, useUser, useIssues } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os";
const GLOBAL_VIEW_LAYOUTS = [ export const GlobalIssuesHeader: React.FC = observer(() => {
{ key: "list", title: "List", link: "workspace-views", icon: List },
{ key: "spreadsheet", title: "Spreadsheet", link: "workspace-views/all-issues", icon: Sheet },
];
type Props = {
activeLayout: "list" | "spreadsheet";
};
export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
const { activeLayout } = props;
// states // states
const [createViewModal, setCreateViewModal] = useState(false); const [createViewModal, setCreateViewModal] = useState(false);
// router // router
@ -46,7 +34,6 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
const { const {
workspace: { workspaceMemberIds }, workspace: { workspaceMemberIds },
} = useMember(); } = useMember();
const { isMobile } = usePlatformOS();
const issueFilters = globalViewId ? filters[globalViewId.toString()] : undefined; const issueFilters = globalViewId ? filters[globalViewId.toString()] : undefined;
@ -116,65 +103,32 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
<Breadcrumbs.BreadcrumbItem <Breadcrumbs.BreadcrumbItem
type="text" type="text"
link={ link={
<BreadcrumbLink <BreadcrumbLink label={`All Issues`} icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
label={`All ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`}
icon={
activeLayout === "spreadsheet" ? (
<LayersIcon className="h-4 w-4 text-custom-text-300" />
) : (
<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
)
}
/>
} }
/> />
</Breadcrumbs> </Breadcrumbs>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="flex items-center gap-1 rounded bg-custom-background-80 p-1"> <>
{GLOBAL_VIEW_LAYOUTS.map((layout) => ( <FiltersDropdown title="Filters" placement="bottom-end">
<Link key={layout.key} href={`/${workspaceSlug}/${layout.link}`}> <FilterSelection
<span> layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
<Tooltip tooltipContent={layout.title} isMobile={isMobile}> filters={issueFilters?.filters ?? {}}
<div handleFiltersUpdate={handleFiltersUpdate}
className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${ labels={workspaceLabels ?? undefined}
activeLayout === layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : "" memberIds={workspaceMemberIds ?? undefined}
}`} />
> </FiltersDropdown>
<layout.icon <FiltersDropdown title="Display" placement="bottom-end">
size={14} <DisplayFiltersSelection
strokeWidth={2} layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
className={`${activeLayout === layout.key ? "text-custom-text-100" : "text-custom-text-200"}`} displayFilters={issueFilters?.displayFilters ?? {}}
/> handleDisplayFiltersUpdate={handleDisplayFilters}
</div> displayProperties={issueFilters?.displayProperties ?? {}}
</Tooltip> handleDisplayPropertiesUpdate={handleDisplayProperties}
</span> />
</Link> </FiltersDropdown>
))} </>
</div>
{activeLayout === "spreadsheet" && (
<>
<FiltersDropdown title="Filters" placement="bottom-end">
<FilterSelection
layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
filters={issueFilters?.filters ?? {}}
handleFiltersUpdate={handleFiltersUpdate}
labels={workspaceLabels ?? undefined}
memberIds={workspaceMemberIds ?? undefined}
/>
</FiltersDropdown>
<FiltersDropdown title="Display" placement="bottom-end">
<DisplayFiltersSelection
layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFiltersUpdate={handleDisplayFilters}
displayProperties={issueFilters?.displayProperties ?? {}}
handleDisplayPropertiesUpdate={handleDisplayProperties}
/>
</FiltersDropdown>
</>
)}
{isAuthorizedUser && ( {isAuthorizedUser && (
<Button variant="primary" size="sm" prependIcon={<PlusIcon />} onClick={() => setCreateViewModal(true)}> <Button variant="primary" size="sm" prependIcon={<PlusIcon />} onClick={() => setCreateViewModal(true)}>
New View New View

View File

@ -1,3 +1,4 @@
import isEmpty from "lodash/isEmpty";
import isEqual from "lodash/isEqual"; import isEqual from "lodash/isEqual";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
@ -104,14 +105,15 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
}); });
}; };
const areFiltersEqual = isEqual(appliedFilters, viewDetails?.filters); const areFiltersEqual = isEqual(appliedFilters ?? {}, viewDetails?.filters ?? {});
const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER; const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
const isDefaultView = DEFAULT_GLOBAL_VIEWS_LIST.map((view) => view.key).includes(globalViewId as TStaticViewTypes); const isDefaultView = DEFAULT_GLOBAL_VIEWS_LIST.map((view) => view.key).includes(globalViewId as TStaticViewTypes);
// return if no filters are applied // return if no filters are applied
if (!appliedFilters && areFiltersEqual) return null;
if (isEmpty(appliedFilters) && areFiltersEqual) return null;
return ( return (
<div className="flex items-start justify-between gap-4 p-4"> <div className="flex items-start justify-between gap-4 p-4">

View File

@ -1,3 +1,4 @@
import isEmpty from "lodash/isEmpty";
import isEqual from "lodash/isEqual"; import isEqual from "lodash/isEqual";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
@ -78,9 +79,10 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
); );
}; };
const areFiltersEqual = isEqual(appliedFilters, viewDetails?.filters); const areFiltersEqual = isEqual(appliedFilters ?? {}, viewDetails?.filters ?? {});
// return if no filters are applied // return if no filters are applied
if (!appliedFilters && areFiltersEqual) return null; if (isEmpty(appliedFilters) && areFiltersEqual) return null;
const handleUpdateView = () => { const handleUpdateView = () => {
if (!workspaceSlug || !projectId || !viewId || !viewDetails) return; if (!workspaceSlug || !projectId || !viewId || !viewDetails) return;

View File

@ -29,8 +29,8 @@ const GlobalViewIssuesPage: NextPageWithLayout = observer(() => {
currentWorkspace?.name && defaultView?.label currentWorkspace?.name && defaultView?.label
? `${currentWorkspace?.name} - ${defaultView?.label}` ? `${currentWorkspace?.name} - ${defaultView?.label}`
: currentWorkspace?.name && globalViewDetails?.name : currentWorkspace?.name && globalViewDetails?.name
? `${currentWorkspace?.name} - ${globalViewDetails?.name}` ? `${currentWorkspace?.name} - ${globalViewDetails?.name}`
: undefined; : undefined;
return ( return (
<> <>
@ -46,7 +46,7 @@ const GlobalViewIssuesPage: NextPageWithLayout = observer(() => {
}); });
GlobalViewIssuesPage.getLayout = function getLayout(page: ReactElement) { GlobalViewIssuesPage.getLayout = function getLayout(page: ReactElement) {
return <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>{page}</AppLayout>; return <AppLayout header={<GlobalIssuesHeader />}>{page}</AppLayout>;
}; };
export default GlobalViewIssuesPage; export default GlobalViewIssuesPage;

View File

@ -52,7 +52,7 @@ const WorkspaceViewsPage: NextPageWithLayout = observer(() => {
}); });
WorkspaceViewsPage.getLayout = function getLayout(page: ReactElement) { WorkspaceViewsPage.getLayout = function getLayout(page: ReactElement) {
return <AppLayout header={<GlobalIssuesHeader activeLayout="list" />}>{page}</AppLayout>; return <AppLayout header={<GlobalIssuesHeader />}>{page}</AppLayout>;
}; };
export default WorkspaceViewsPage; export default WorkspaceViewsPage;