fix: bug fixes (#2581)

* fix: module sidebar fix for kanban layout

* chore: cycle & module sidebar improvement

* chore: join project content updated

* chore: project empty state header fix

* chore: create project modal dropdown consistency

* chore: list view group header overlapping issue fix

* chore: popover code refactor

* chore: module sidebar fix for cycle kanban view

* chore: add existing issue option added in module empty state

* chore: add existing issue option added in cycle empty state

web/components/issues/issue-layouts/empty-states/cycle.tsx

@@ -3,8 +3,13 @@ import { PlusIcon } from "lucide-react";
 import { EmptyState } from "components/common";
 // assets
 import emptyIssue from "public/empty-state/issue.svg";
+import { Button } from "@plane/ui";
 
-export const CycleEmptyState: React.FC = () => (
+type Props = {
+  openIssuesListModal: () => void;
+};
+
+export const CycleEmptyState: React.FC<Props> = ({ openIssuesListModal }) => (
   <div className="h-full w-full grid place-items-center">
     <EmptyState
       title="Cycle issues will appear here"
@@ -20,6 +25,14 @@ export const CycleEmptyState: React.FC = () => (
           document.dispatchEvent(e);
         },
       }}
+      secondaryButton={
+        <Button
+          variant="neutral-primary"
+          prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} onClick={openIssuesListModal} />}
+        >
+          Add an existing issue
+        </Button>
+      }
     />
   </div>
 );

web/components/issues/issue-layouts/empty-states/module.tsx

@@ -1,10 +1,15 @@
 import { PlusIcon } from "lucide-react";
 // components
 import { EmptyState } from "components/common";
+import { Button } from "@plane/ui";
 // assets
 import emptyIssue from "public/empty-state/issue.svg";
 
-export const ModuleEmptyState: React.FC = () => (
+type Props = {
+  openIssuesListModal: () => void;
+};
+
+export const ModuleEmptyState: React.FC<Props> = ({ openIssuesListModal }) => (
   <div className="h-full w-full grid place-items-center">
     <EmptyState
       title="Module issues will appear here"
@@ -20,6 +25,15 @@ export const ModuleEmptyState: React.FC = () => (
           document.dispatchEvent(e);
         },
       }}
+      secondaryButton={
+        <Button
+          variant="neutral-primary"
+          prependIcon={<PlusIcon className="h-3 w-3" strokeWidth={2} />}
+          onClick={openIssuesListModal}
+        >
+          Add an existing issue
+        </Button>
+      }
     />
   </div>
 );

web/components/issues/issue-layouts/roots/cycle-layout-root.tsx

@@ -18,7 +18,11 @@ import { TransferIssues, TransferIssuesModal } from "components/cycles";
 // helpers
 import { getDateRangeStatus } from "helpers/date-time.helper";
 
-export const CycleLayoutRoot: React.FC = observer(() => {
+type Props = {
+  openIssuesListModal: () => void;
+};
+
+export const CycleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal }) => {
   const [transferIssuesModal, setTransferIssuesModal] = useState(false);
 
   const router = useRouter();
@@ -60,7 +64,7 @@ export const CycleLayoutRoot: React.FC = observer(() => {
         {cycleStatus === "completed" && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
         <CycleAppliedFiltersRoot />
         {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
-          <CycleEmptyState />
+          <CycleEmptyState openIssuesListModal={openIssuesListModal} />
         ) : (
           <div className="w-full h-full overflow-auto">
             {activeLayout === "list" ? (

web/components/issues/issue-layouts/roots/module-layout-root.tsx

@@ -16,7 +16,11 @@ import {
   ModuleSpreadsheetLayout,
 } from "components/issues";
 
-export const ModuleLayoutRoot: React.FC = observer(() => {
+type Props = {
+  openIssuesListModal: () => void;
+};
+
+export const ModuleLayoutRoot: React.FC<Props> = observer(({ openIssuesListModal }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId } = router.query as {
     workspaceSlug: string;
@@ -53,7 +57,7 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
     <div className="relative w-full h-full flex flex-col overflow-hidden">
       <ModuleAppliedFiltersRoot />
       {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? (
-        <ModuleEmptyState />
+        <ModuleEmptyState openIssuesListModal={openIssuesListModal} />
       ) : (
         <div className="h-full w-full overflow-auto">
           {activeLayout === "list" ? (