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

packages/ui/src/icons/cycle/circle-dot-full-icon.tsx

@@ -7,14 +7,19 @@ export const CircleDotFullIcon: React.FC<ISvgIcons> = ({
   ...rest
 }) => (
   <svg
-    viewBox="0 0 24 24"
+    viewBox="0 0 16 16"
-    className={`${className} stroke-2`}
+    className={`${className} stroke-1`}
-    stroke="currentColor"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     {...rest}
   >
-    <circle cx="8.33333" cy="8.33333" r="5.33333" stroke-linecap="round" />
+    <circle
+      cx="8.33333"
+      cy="8.33333"
+      r="5.33333"
+      stroke="currentColor"
+      stroke-linecap="round"
+    />
     <circle cx="8.33333" cy="8.33333" r="4.33333" fill="currentColor" />
   </svg>
 );

web/components/common/empty-state.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import Image from "next/image";
 
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 
 type Props = {
   title: string;
@@ -33,10 +33,14 @@ export const EmptyState: React.FC<Props> = ({
       {description && <p className="text-custom-text-300 mb-7 sm:mb-8">{description}</p>}
       <div className="flex items-center gap-4">
         {primaryButton && (
-          <PrimaryButton className="flex items-center gap-1.5" onClick={primaryButton.onClick} disabled={disabled}>
+          <Button
-            {primaryButton.icon}
+            variant="primary"
+            prependIcon={primaryButton.icon}
+            onClick={primaryButton.onClick}
+            disabled={disabled}
+          >
             {primaryButton.text}
-          </PrimaryButton>
+          </Button>
         )}
         {secondaryButton}
       </div>

web/components/cycles/sidebar.tsx

@@ -383,7 +383,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                 </Popover>
                 <MoveRight className="h-4 w-4 text-custom-text-300" />
                 <Popover className="flex h-full items-center justify-center rounded-lg">
-                  {({}) => (
                   <>
                     <Popover.Button
                       disabled={isCompleted ?? false}
@@ -417,7 +416,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                       </Popover.Panel>
                     </Transition>
                   </>
-                  )}
                 </Popover>
               </div>
             </div>
@@ -459,7 +457,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
               <Disclosure>
                 {({ open }) => (
                   <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
-                    <div className="flex w-full items-center justify-between gap-2">
+                    <Disclosure.Button
+                      className="flex w-full items-center justify-between gap-2 p-1.5"
+                      disabled={!isStartValid || !isEndValid}
+                    >
                       <div className="flex items-center justify-start gap-2 text-sm">
                         <span className="font-medium text-custom-text-200">Progress</span>
                       </div>
@@ -473,12 +474,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                           ""
                         )}
                         {isStartValid && isEndValid ? (
-                          <Disclosure.Button className="p-1.5">
+                          <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
-                            <ChevronDown
-                              className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
-                              aria-hidden="true"
-                            />
-                          </Disclosure.Button>
                         ) : (
                           <div className="flex items-center gap-1">
                             <AlertCircle height={14} width={14} className="text-custom-text-200" />
@@ -488,7 +484,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                           </div>
                         )}
                       </div>
-                    </div>
+                    </Disclosure.Button>
                     <Transition show={open}>
                       <Disclosure.Panel>
                         <div className="flex flex-col gap-3">

web/components/headers/projects.tsx

@@ -10,10 +10,14 @@ import { observer } from "mobx-react-lite";
 
 export const ProjectsHeader = observer(() => {
   const router = useRouter();
+  const { workspaceSlug } = router.query;
+
   // store
   const { project: projectStore, workspace: workspaceStore } = useMobxStore();
   const currentWorkspace = workspaceStore.currentWorkspace;
 
+  const projectsList = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : [];
+
   return (
     <div
       className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
@@ -29,6 +33,7 @@ export const ProjectsHeader = observer(() => {
         </div>
       </div>
       <div className="flex items-center gap-3">
+        {projectsList?.length > 0 && (
           <div className="flex w-full gap-1 items-center justify-start text-custom-text-400 rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100">
             <Search className="h-3.5 w-3.5" />
             <input
@@ -38,6 +43,7 @@ export const ProjectsHeader = observer(() => {
               placeholder="Search"
             />
           </div>
+        )}
 
         <Button
           prependIcon={<Plus />}

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" ? (

web/components/issues/sidebar-select/label.tsx

@@ -239,7 +239,6 @@ export const SidebarLabelSelect: React.FC<Props> = ({
         <form className="flex items-center gap-x-2" onSubmit={handleSubmit(handleNewLabel)}>
           <div>
             <Popover className="relative">
-              {({}) => (
               <>
                 <Popover.Button className="grid place-items-center outline-none">
                   {watch("color") && watch("color") !== "" && (
@@ -272,7 +271,6 @@ export const SidebarLabelSelect: React.FC<Props> = ({
                   </Popover.Panel>
                 </Transition>
               </>
-              )}
             </Popover>
           </div>
           <Controller

web/components/modules/sidebar.tsx

@@ -327,7 +327,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
               <Disclosure>
                 {({ open }) => (
                   <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
-                    <div className="flex w-full items-center justify-between gap-2">
+                    <Disclosure.Button
+                      className="flex w-full items-center justify-between gap-2 p-1.5"
+                      disabled={!isStartValid || !isEndValid}
+                    >
                       <div className="flex items-center justify-start gap-2 text-sm">
                         <span className="font-medium text-custom-text-200">Progress</span>
                       </div>
@@ -341,12 +344,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                           ""
                         )}
                         {isStartValid && isEndValid ? (
-                          <Disclosure.Button className="p-1.5">
+                          <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
-                            <ChevronDown
-                              className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
-                              aria-hidden="true"
-                            />
-                          </Disclosure.Button>
                         ) : (
                           <div className="flex items-center gap-1">
                             <AlertCircle height={14} width={14} className="text-custom-text-200" />
@@ -356,7 +354,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                           </div>
                         )}
                       </div>
-                    </div>
+                    </Disclosure.Button>
                     <Transition show={open}>
                       <Disclosure.Panel>
                         <div className="flex flex-col gap-3">
@@ -415,20 +413,21 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
               <Disclosure>
                 {({ open }) => (
                   <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
-                    <div className="flex w-full items-center justify-between gap-2">
+                    <Disclosure.Button
+                      className="flex w-full items-center justify-between gap-2 p-1.5"
+                      disabled={!isStartValid || !isEndValid}
+                    >
                       <div className="flex items-center justify-start gap-2 text-sm">
                         <span className="font-medium text-custom-text-200">Links</span>
                       </div>
 
                       <div className="flex items-center gap-2.5">
-                        <Disclosure.Button className="p-1.5">
                         <ChevronDown
                           className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`}
                           aria-hidden="true"
                         />
+                      </div>
                     </Disclosure.Button>
-                      </div>
-                    </div>
                     <Transition show={open}>
                       <Disclosure.Panel>
                         <div className="flex flex-col w-full mt-2 space-y-3 h-72 overflow-y-auto">

web/components/project/create-project-modal.tsx

@@ -330,9 +330,9 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                             <CustomSelect
                               value={value}
                               onChange={onChange}
-                              buttonClassName="border-[0.5px] shadow-md !py-1.5"
+                              buttonClassName="border-[0.5px] shadow-md !py-1.5 shadow-none"
                               label={
-                                <div className="flex items-center gap-2">
+                                <div className="flex items-center gap-2 text-custom-text-300">
                                   {currentNetwork ? (
                                     <>
                                       <currentNetwork.icon className="h-[18px] w-[18px]" />

web/components/project/join-project-modal.tsx

@@ -68,7 +68,8 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
                     Join Project?
                   </Dialog.Title>
                   <p>
-                    Are you sure you want to join <span className="font-semibold">{project?.name}</span>?
+                    Are you sure you want to join the project <span className="font-semibold">{project?.name}</span>?
+                    Please click the &apos;Join Project&apos; button below to continue.
                   </p>
                   <div className="space-y-3" />
                 </div>

web/components/workspace/member-select.tsx

@@ -74,7 +74,7 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
           type="button"
           className={`flex items-center justify-between gap-1 w-full text-xs ${
             disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-          } `}
+          }`}
         >
           {label}
         </button>

web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx

@@ -3,8 +3,12 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { IssueService } from "services/issue";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 // components
@@ -16,6 +20,10 @@ import { CycleLayoutRoot } from "components/issues/issue-layouts";
 import { EmptyState } from "components/common";
 // assets
 import emptyCycle from "public/empty-state/cycle.svg";
+// types
+import { ISearchIssueResponse } from "types";
+
+const issueService = new IssueService();
 
 const SingleCycle: React.FC = () => {
   const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
@@ -25,6 +33,10 @@ const SingleCycle: React.FC = () => {
 
   const { cycle: cycleStore } = useMobxStore();
 
+  const { user } = useUser();
+
+  const { setToastAlert } = useToast();
+
   const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
   const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
 
@@ -40,23 +52,27 @@ const SingleCycle: React.FC = () => {
   };
 
   // TODO: add this function to bulk add issues to cycle
-  // const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
+  const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
-  //   if (!workspaceSlug || !projectId) return;
+    if (!workspaceSlug || !projectId) return;
 
-  //   const payload = {
+    const payload = {
-  //     issues: data.map((i) => i.id),
+      issues: data.map((i) => i.id),
-  //   };
+    };
 
-  //   await issueService
+    await issueService
-  //     .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
+      .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
-  //     .catch(() => {
+      .catch(() => {
-  //       setToastAlert({
+        setToastAlert({
-  //         type: "error",
+          type: "error",
-  //         title: "Error!",
+          title: "Error!",
-  //         message: "Selected issues could not be added to the cycle. Please try again.",
+          message: "Selected issues could not be added to the cycle. Please try again.",
-  //       });
+        });
-  //     });
+      });
-  // };
+  };
+
+  const openIssuesListModal = () => {
+    setCycleIssuesListModal(true);
+  };
 
   return (
     <AppLayout header={<CycleIssuesHeader />} withProjectWrapper>
@@ -65,7 +81,7 @@ const SingleCycle: React.FC = () => {
         isOpen={cycleIssuesListModal}
         handleClose={() => setCycleIssuesListModal(false)}
         searchParams={{ cycle: true }}
-        handleOnSubmit={async () => {}}
+        handleOnSubmit={handleAddIssuesToCycle}
       />
       {error ? (
         <EmptyState
@@ -80,8 +96,8 @@ const SingleCycle: React.FC = () => {
       ) : (
         <>
           <div className="flex h-full w-full">
-            <div className="h-full w-full">
+            <div className="h-full w-full overflow-hidden">
-              <CycleLayoutRoot />
+              <CycleLayoutRoot openIssuesListModal={openIssuesListModal} />
             </div>
             {cycleId && !isSidebarCollapsed && (
               <div

web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx

@@ -3,8 +3,13 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
+
+// services
+import { ModuleService } from "services/module.service";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
+import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 // components
@@ -18,6 +23,9 @@ import { EmptyState } from "components/common";
 import emptyModule from "public/empty-state/module.svg";
 // types
 import { NextPage } from "next";
+import { ISearchIssueResponse } from "types";
+
+const moduleService = new ModuleService();
 
 const ModuleIssuesPage: NextPage = () => {
   const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
@@ -27,6 +35,10 @@ const ModuleIssuesPage: NextPage = () => {
 
   const { module: moduleStore } = useMobxStore();
 
+  const { user } = useUser();
+
+  const { setToastAlert } = useToast();
+
   const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
   const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
 
@@ -38,27 +50,27 @@ const ModuleIssuesPage: NextPage = () => {
   );
 
   // TODO: add this function to bulk add issues to cycle
-  // const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
+  const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
-  //   if (!workspaceSlug || !projectId) return;
+    if (!workspaceSlug || !projectId) return;
 
-  //   const payload = {
+    const payload = {
-  //     issues: data.map((i) => i.id),
+      issues: data.map((i) => i.id),
-  //   };
+    };
 
-  //   await moduleService
+    await moduleService
-  //     .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
+      .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
-  //     .catch(() =>
+      .catch(() =>
-  //       setToastAlert({
+        setToastAlert({
-  //         type: "error",
+          type: "error",
-  //         title: "Error!",
+          title: "Error!",
-  //         message: "Selected issues could not be added to the module. Please try again.",
+          message: "Selected issues could not be added to the module. Please try again.",
-  //       })
+        })
-  //     );
+      );
-  // };
+  };
 
-  // const openIssuesListModal = () => {
+  const openIssuesListModal = () => {
-  //   setModuleIssuesListModal(true);
+    setModuleIssuesListModal(true);
-  // };
+  };
 
   const toggleSidebar = () => {
     setValue(`${!isSidebarCollapsed}`);
@@ -72,7 +84,7 @@ const ModuleIssuesPage: NextPage = () => {
           isOpen={moduleIssuesListModal}
           handleClose={() => setModuleIssuesListModal(false)}
           searchParams={{ module: true }}
-          handleOnSubmit={async () => {}}
+          handleOnSubmit={handleAddIssuesToModule}
         />
         {error ? (
           <EmptyState
@@ -86,8 +98,8 @@ const ModuleIssuesPage: NextPage = () => {
           />
         ) : (
           <div className="flex h-full w-full">
-            <div className="h-full w-full">
+            <div className="h-full w-full overflow-hidden">
-              <ModuleLayoutRoot />
+              <ModuleLayoutRoot openIssuesListModal={openIssuesListModal} />
             </div>
             {moduleId && !isSidebarCollapsed && (
               <div