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
2024-06-14 14:31:34 +00:00 · 2023-11-01 17:11:07 +05:30 · 2023-11-01 17:11:07 +05:30 · 548e95c7e0
commit 548e95c7e0
parent 13ead7c314
15 changed files with 229 additions and 157 deletions
--- a/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx
+++ b/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"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
+    viewBox="0 0 16 16"
+    className={`${className} stroke-1`}
    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>
 );
--- a/web/components/common/empty-state.tsx
+++ b/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}>
-            {primaryButton.icon}
+          <Button
+            variant="primary"
+            prependIcon={primaryButton.icon}
+            onClick={primaryButton.onClick}
+            disabled={disabled}
+          >
            {primaryButton.text}
-          </PrimaryButton>
+          </Button>
        )}
        {secondaryButton}
      </div>
--- a/web/components/cycles/sidebar.tsx
+++ b/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"
-                            />
-                          </Disclosure.Button>
+                          <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
                        ) : (
                          <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">
--- a/web/components/headers/projects.tsx
+++ b/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 />}
--- a/web/components/issues/issue-layouts/empty-states/cycle.tsx
+++ b/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>
 );
--- a/web/components/issues/issue-layouts/empty-states/module.tsx
+++ b/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>
 );
--- a/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
+++ b/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" ? (
--- a/web/components/issues/issue-layouts/roots/module-layout-root.tsx
+++ b/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" ? (
--- a/web/components/issues/sidebar-select/label.tsx
+++ b/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
--- a/web/components/modules/sidebar.tsx
+++ b/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"
-                            />
-                          </Disclosure.Button>
+                          <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
                        ) : (
                          <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">
--- a/web/components/project/create-project-modal.tsx
+++ b/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]" />
--- a/web/components/project/join-project-modal.tsx
+++ b/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>
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/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[]) => {
-  //   if (!workspaceSlug || !projectId) return;
+  const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId) return;

-  //   const payload = {
-  //     issues: data.map((i) => i.id),
-  //   };
+    const payload = {
+      issues: data.map((i) => i.id),
+    };

-  //   await issueService
-  //     .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
-  //     .catch(() => {
-  //       setToastAlert({
-  //         type: "error",
-  //         title: "Error!",
-  //         message: "Selected issues could not be added to the cycle. Please try again.",
-  //       });
-  //     });
-  // };
+    await issueService
+      .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          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">
-              <CycleLayoutRoot />
+            <div className="h-full w-full overflow-hidden">
+              <CycleLayoutRoot openIssuesListModal={openIssuesListModal} />
            </div>
            {cycleId && !isSidebarCollapsed && (
              <div
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/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[]) => {
-  //   if (!workspaceSlug || !projectId) return;
+  const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId) return;

-  //   const payload = {
-  //     issues: data.map((i) => i.id),
-  //   };
+    const payload = {
+      issues: data.map((i) => i.id),
+    };

-  //   await moduleService
-  //     .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
-  //     .catch(() =>
-  //       setToastAlert({
-  //         type: "error",
-  //         title: "Error!",
-  //         message: "Selected issues could not be added to the module. Please try again.",
-  //       })
-  //     );
-  // };
+    await moduleService
+      .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the module. Please try again.",
+        })
+      );
+  };

-  // const openIssuesListModal = () => {
-  //   setModuleIssuesListModal(true);
-  // };
+  const openIssuesListModal = () => {
+    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">
-              <ModuleLayoutRoot />
+            <div className="h-full w-full overflow-hidden">
+              <ModuleLayoutRoot openIssuesListModal={openIssuesListModal} />
            </div>
            {moduleId && !isSidebarCollapsed && (
              <div