[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>

web/components/headers/global-issues.tsx

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

web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx

@@ -1,3 +1,4 @@
+import isEmpty from "lodash/isEmpty";
 import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react-lite";
 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 isDefaultView = DEFAULT_GLOBAL_VIEWS_LIST.map((view) => view.key).includes(globalViewId as TStaticViewTypes);
 
   // return if no filters are applied
-  if (!appliedFilters && areFiltersEqual) return null;
+
+  if (isEmpty(appliedFilters) && areFiltersEqual) return null;
 
   return (
     <div className="flex items-start justify-between gap-4 p-4">

web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx

@@ -1,3 +1,4 @@
+import isEmpty from "lodash/isEmpty";
 import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react-lite";
 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
-  if (!appliedFilters && areFiltersEqual) return null;
+  if (isEmpty(appliedFilters) && areFiltersEqual) return null;
 
   const handleUpdateView = () => {
     if (!workspaceSlug || !projectId || !viewId || !viewDetails) return;

web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx

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

web/pages/[workspaceSlug]/workspace-views/index.tsx

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