refactor: enhance components modularity and introduce new UI componenets (#6192)

* feat: add navigation dropdown component

* chore: enhance title/ description loader and componenet modularity

* chore: issue store filter update

* chore: added few icons to ui package

* chore: improvements for tabs componenet

* chore: enhance sidebar modularity

* chore: update issue and router store to add support for additional issue layouts

* chore: enhanced cycle componenets modularity

* feat: added project grouping header for cycles list

* chore: enhanced project dropdown componenet by adding multiple selection functionality

* chore: enhanced rich text editor modularity by taking members ids as props for mentions

* chore: added functionality to filter disabled layouts in issue-layout dropdown

* chore: added support to pass project ids as props in project card list

* feat: multi select project modal

* chore: seperate out project componenet for reusability

* chore: command pallete store improvements

* fix: build errors

web/ce/components/cycles/active-cycle/root.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { Disclosure } from "@headlessui/react";
 // ui
@@ -22,68 +23,80 @@ import { ActiveCycleIssueDetails } from "@/store/issue/cycle";
 interface IActiveCycleDetails {
   workspaceSlug: string;
   projectId: string;
+  cycleId?: string;
+  showHeader?: boolean;
 }
 
 export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) => {
-  const { workspaceSlug, projectId } = props;
-  const { currentProjectActiveCycle, currentProjectActiveCycleId } = useCycle();
+  const { workspaceSlug, projectId, cycleId: propsCycleId, showHeader = true } = props;
+  const { currentProjectActiveCycleId } = useCycle();
+  // derived values
+  const cycleId = propsCycleId ?? currentProjectActiveCycleId;
+  // fetch cycle details
   const {
     handleFiltersUpdate,
     cycle: activeCycle,
     cycleIssueDetails,
-  } = useCyclesDetails({ workspaceSlug, projectId, cycleId: currentProjectActiveCycleId });
+  } = useCyclesDetails({ workspaceSlug, projectId, cycleId });
+
+  const ActiveCyclesComponent = useMemo(
+    () => (
+      <>
+        {!cycleId || !activeCycle ? (
+          <EmptyState type={EmptyStateType.PROJECT_CYCLE_ACTIVE} size="sm" />
+        ) : (
+          <div className="flex flex-col border-b border-custom-border-200">
+            {cycleId && (
+              <CyclesListItem
+                key={cycleId}
+                cycleId={cycleId}
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                className="!border-b-transparent"
+              />
+            )}
+            <Row className="bg-custom-background-100 pt-3 pb-6">
+              <div className="grid grid-cols-1 bg-custom-background-100 gap-3 lg:grid-cols-2 xl:grid-cols-3">
+                <ActiveCycleProgress
+                  handleFiltersUpdate={handleFiltersUpdate}
+                  projectId={projectId}
+                  workspaceSlug={workspaceSlug}
+                  cycle={activeCycle}
+                />
+                <ActiveCycleProductivity workspaceSlug={workspaceSlug} projectId={projectId} cycle={activeCycle} />
+                <ActiveCycleStats
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  cycle={activeCycle}
+                  cycleId={cycleId}
+                  handleFiltersUpdate={handleFiltersUpdate}
+                  cycleIssueDetails={cycleIssueDetails as ActiveCycleIssueDetails}
+                />
+              </div>
+            </Row>
+          </div>
+        )}
+      </>
+    ),
+    [cycleId, activeCycle, workspaceSlug, projectId, handleFiltersUpdate, cycleIssueDetails]
+  );
 
   return (
     <>
-      <Disclosure as="div" className="flex flex-shrink-0 flex-col" defaultOpen>
-        {({ open }) => (
-          <>
-            <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 cursor-pointer">
-              <CycleListGroupHeader title="Active cycle" type="current" isExpanded={open} />
-            </Disclosure.Button>
-            <Disclosure.Panel>
-              {!currentProjectActiveCycle ? (
-                <EmptyState type={EmptyStateType.PROJECT_CYCLE_ACTIVE} size="sm" />
-              ) : (
-                <div className="flex flex-col border-b border-custom-border-200">
-                  {currentProjectActiveCycleId && (
-                    <CyclesListItem
-                      key={currentProjectActiveCycleId}
-                      cycleId={currentProjectActiveCycleId}
-                      workspaceSlug={workspaceSlug}
-                      projectId={projectId}
-                      className="!border-b-transparent"
-                    />
-                  )}
-                  <Row className="bg-custom-background-100 pt-3 pb-6">
-                    <div className="grid grid-cols-1 bg-custom-background-100 gap-3 lg:grid-cols-2 xl:grid-cols-3">
-                      <ActiveCycleProgress
-                        handleFiltersUpdate={handleFiltersUpdate}
-                        projectId={projectId}
-                        workspaceSlug={workspaceSlug}
-                        cycle={activeCycle}
-                      />
-                      <ActiveCycleProductivity
-                        workspaceSlug={workspaceSlug}
-                        projectId={projectId}
-                        cycle={activeCycle}
-                      />
-                      <ActiveCycleStats
-                        workspaceSlug={workspaceSlug}
-                        projectId={projectId}
-                        cycle={activeCycle}
-                        cycleId={currentProjectActiveCycleId}
-                        handleFiltersUpdate={handleFiltersUpdate}
-                        cycleIssueDetails={cycleIssueDetails as ActiveCycleIssueDetails}
-                      />
-                    </div>
-                  </Row>
-                </div>
-              )}
-            </Disclosure.Panel>
-          </>
-        )}
-      </Disclosure>
+      {showHeader ? (
+        <Disclosure as="div" className="flex flex-shrink-0 flex-col" defaultOpen>
+          {({ open }) => (
+            <>
+              <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 cursor-pointer">
+                <CycleListGroupHeader title="Active cycle" type="current" isExpanded={open} />
+              </Disclosure.Button>
+              <Disclosure.Panel>{ActiveCyclesComponent}</Disclosure.Panel>
+            </>
+          )}
+        </Disclosure>
+      ) : (
+        <>{ActiveCyclesComponent}</>
+      )}
     </>
   );
 });

web/ce/components/issues/filters/index.ts

@@ -1,2 +1,3 @@
 export * from "./applied-filters";
 export * from "./issue-types";
+export * from "./team-project";

web/ce/components/issues/filters/team-project.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterTeamProjects: React.FC<Props> = observer(() => null);

web/ce/components/issues/issue-layouts/utils.tsx

@@ -0,0 +1,4 @@
+// types
+import { IGroupByColumn } from "@plane/types";
+
+export const getTeamProjectColumns = (): IGroupByColumn[] | undefined => undefined;

web/ce/components/workspace/sidebar/teams-sidebar-list.tsx

@@ -0,0 +1 @@
+export const SidebarTeamsList = () => null;