[WEB-3759] chore: header revamp for cycles, modules, pages and views

packages/types/src/common.d.ts

@@ -26,3 +26,11 @@ export type TLogoProps = {
 export type TNameDescriptionLoader = "submitting" | "submitted" | "saved";
 
 export type TFetchStatus = "partial" | "complete" | undefined;
+
+export type ICustomSearchSelectOption = {
+  value: any;
+  query: string;
+  content: React.ReactNode;
+  disabled?: boolean;
+  tooltip?: string | React.ReactNode;
+};

packages/ui/src/dropdowns/helper.tsx

@@ -1,5 +1,6 @@
 // FIXME: fix this!!!
 import { Placement } from "@blueprintjs/popover2";
+import { ICustomSearchSelectOption } from "@plane/types";
 
 export interface IDropdownProps {
   customButtonClassName?: string;
@@ -44,15 +45,7 @@ interface CustomSearchSelectProps {
   onChange: any;
   onClose?: () => void;
   noResultsMessage?: string;
-  options:
-    | {
-        value: any;
-        query: string;
-        content: React.ReactNode;
-        disabled?: boolean;
-        tooltip?: string | React.ReactNode;
-      }[]
-    | undefined;
+  options?: ICustomSearchSelectOption[];
 }
 
 interface SingleValueProps {

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -18,12 +18,18 @@ import {
 // i18n
 import { useTranslation } from "@plane/i18n";
 // types
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
+import {
+  ICustomSearchSelectOption,
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+} from "@plane/types";
 // ui
-import { Breadcrumbs, Button, ContrastIcon, CustomMenu, Tooltip, Header } from "@plane/ui";
+import { Breadcrumbs, Button, ContrastIcon, CustomMenu, Tooltip, Header, CustomSearchSelect } from "@plane/ui";
 // components
 import { ProjectAnalyticsModal } from "@/components/analytics";
-import { BreadcrumbLink } from "@/components/common";
+import { BreadcrumbLink, SwitcherLabel } from "@/components/common";
+import { CycleQuickActions } from "@/components/cycles";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
 // helpers
 import { cn } from "@/helpers/common.helper";
@@ -69,6 +75,8 @@ const CycleDropdownOption: React.FC<{ cycleId: string }> = ({ cycleId }) => {
 };
 
 export const CycleIssuesHeader: React.FC = observer(() => {
+  // refs
+  const parentRef = useRef<HTMLDivElement>(null);
   // states
   const [analyticsModal, setAnalyticsModal] = useState(false);
   // router
@@ -159,6 +167,25 @@ export const CycleIssuesHeader: React.FC = observer(() => {
     EUserPermissionsLevel.PROJECT
   );
 
+  const switcherOptions = currentProjectCycleIds
+    ?.map((id) => {
+      const _cycle = id === cycleId ? cycleDetails : getCycleById(id);
+      if (!_cycle) return;
+      const cycleLink = `/${workspaceSlug}/projects/${projectId}/cycles/${_cycle.id}`;
+      return {
+        value: _cycle.id,
+        query: _cycle.name,
+        content: (
+          <Link href={cycleLink}>
+            <SwitcherLabel name={_cycle.name} LabelIcon={ContrastIcon} />
+          </Link>
+        ),
+      };
+    })
+    .filter((option) => option !== undefined) as ICustomSearchSelectOption[];
+
+  const workItemsCount = getGroupIssueCount(undefined, undefined, false);
+
   const issuesCount = getGroupIssueCount(undefined, undefined, false);
 
   return (
@@ -201,33 +228,29 @@ export const CycleIssuesHeader: React.FC = observer(() => {
               <Breadcrumbs.BreadcrumbItem
                 type="component"
                 component={
-                  <CustomMenu
+                  <CustomSearchSelect
+                    options={switcherOptions}
+                    value={cycleId}
+                    onChange={() => {}}
                     label={
-                      <>
-                        <ContrastIcon className="h-3 w-3" />
-                        <div className="flex w-auto max-w-[70px] items-center gap-2 truncate sm:max-w-[200px]">
-                          <p className="truncate">{cycleDetails?.name && cycleDetails.name}</p>
-                          {issuesCount && issuesCount > 0 ? (
-                            <Tooltip
-                              isMobile={isMobile}
-                              tooltipContent={`There are ${issuesCount} ${
-                                issuesCount > 1 ? "work items" : "work item"
-                              } in this cycle`}
-                              position="bottom"
-                            >
-                              <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">
-                                {issuesCount}
-                              </span>
-                            </Tooltip>
-                          ) : null}
-                        </div>
-                      </>
+                      <div className="flex items-center gap-1">
+                        <SwitcherLabel name={cycleDetails?.name} LabelIcon={ContrastIcon} />
+                        {workItemsCount && workItemsCount > 0 ? (
+                          <Tooltip
+                            isMobile={isMobile}
+                            tooltipContent={`There are ${workItemsCount} ${
+                              workItemsCount > 1 ? "work items" : "work item"
+                            } in this cycle`}
+                            position="bottom"
+                          >
+                            <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">
+                              {workItemsCount}
+                            </span>
+                          </Tooltip>
+                        ) : null}
+                      </div>
                     }
-                    className="ml-1.5 flex-shrink-0 truncate"
-                    placement="bottom-start"
-                  >
-                    {currentProjectCycleIds?.map((cycleId) => <CycleDropdownOption key={cycleId} cycleId={cycleId} />)}
-                  </CustomMenu>
+                  />
                 }
               />
             </Breadcrumbs>
@@ -302,19 +325,19 @@ export const CycleIssuesHeader: React.FC = observer(() => {
             )}
             <button
               type="button"
-              className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
+              className="p-1 rounded outline-none hover:bg-custom-sidebar-background-80 bg-custom-background-80/70"
               onClick={toggleSidebar}
             >
-              <ArrowRight className={`h-4 w-4 duration-300 ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
+              <PanelRight className={cn("h-4 w-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
             </button>
+            <CycleQuickActions
+              parentRef={parentRef}
+              cycleId={cycleId}
+              projectId={projectId}
+              workspaceSlug={workspaceSlug}
+              customClassName="flex-shrink-0 flex items-center justify-center size-6 bg-custom-background-80/70 rounded"
+            />
           </div>
-          <button
-            type="button"
-            className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 md:hidden"
-            onClick={toggleSidebar}
-          >
-            <PanelRight className={cn("h-4 w-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
-          </button>
         </Header.RightItem>
       </Header>
     </>

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

@@ -16,12 +16,17 @@ import {
   EUserPermissionsLevel,
 } from "@plane/constants";
 // types
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
+import {
+  ICustomSearchSelectOption,
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+} from "@plane/types";
 // ui
-import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip, Header } from "@plane/ui";
+import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip, Header, CustomSearchSelect } from "@plane/ui";
 // components
 import { ProjectAnalyticsModal } from "@/components/analytics";
-import { BreadcrumbLink } from "@/components/common";
+import { BreadcrumbLink, SwitcherLabel } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
 // helpers
 import { cn } from "@/helpers/common.helper";
@@ -155,7 +160,24 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
     EUserPermissionsLevel.PROJECT
   );
 
-  const issuesCount = getGroupIssueCount(undefined, undefined, false);
+  const workItemsCount = getGroupIssueCount(undefined, undefined, false);
+
+  const switcherOptions = projectModuleIds
+    ?.map((id) => {
+      const _module = id === moduleId ? moduleDetails : getModuleById(id);
+      if (!_module) return;
+      const moduleLink = `/${workspaceSlug}/projects/${projectId}/modules/${_module.id}`;
+      return {
+        value: _module.id,
+        query: _module.name,
+        content: (
+          <Link href={moduleLink}>
+            <SwitcherLabel name={_module.name} LabelIcon={DiceIcon} />
+          </Link>
+        ),
+      };
+    })
+    .filter((option) => option !== undefined) as ICustomSearchSelectOption[];
 
   return (
     <>
@@ -196,33 +218,29 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
             <Breadcrumbs.BreadcrumbItem
               type="component"
               component={
-                <CustomMenu
+                <CustomSearchSelect
+                  options={switcherOptions}
                   label={
-                    <>
-                      <DiceIcon className="h-3 w-3" />
-                      <div className="flex w-auto max-w-[70px] items-center gap-2 truncate sm:max-w-[200px]">
-                        <p className="truncate">{moduleDetails?.name && moduleDetails.name}</p>
-                        {issuesCount && issuesCount > 0 ? (
-                          <Tooltip
-                            isMobile={isMobile}
-                            tooltipContent={`There are ${issuesCount} ${
-                              issuesCount > 1 ? "work items" : "work item"
-                            } in this module`}
-                            position="bottom"
-                          >
-                            <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">
-                              {issuesCount}
-                            </span>
-                          </Tooltip>
-                        ) : null}
-                      </div>
-                    </>
+                    <div className="flex items-center gap-1">
+                      <SwitcherLabel name={moduleDetails?.name} LabelIcon={DiceIcon} />
+                      {workItemsCount && workItemsCount > 0 ? (
+                        <Tooltip
+                          isMobile={isMobile}
+                          tooltipContent={`There are ${workItemsCount} ${
+                            workItemsCount > 1 ? "work items" : "work item"
+                          } in this module`}
+                          position="bottom"
+                        >
+                          <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">
+                            {workItemsCount}
+                          </span>
+                        </Tooltip>
+                      ) : null}
+                    </div>
                   }
-                  className="ml-1.5 flex-shrink-0"
-                  placement="bottom-start"
-                >
-                  {projectModuleIds?.map((moduleId) => <ModuleDropdownOption key={moduleId} moduleId={moduleId} />)}
-                </CustomMenu>
+                  value={moduleId}
+                  onChange={() => {}}
+                />
               }
             />
           </Breadcrumbs>