[WEB-738] chore: conditionally render projects in the dropdown (#3952)

* chore: show authorized projects in the dropdown * refactor: command palette logic * chore: add helper function to check for project role * fix: add preventDefault for shortcuts
2024-06-14 14:31:34 +00:00 · 2024-03-15 17:44:01 +05:30 · 2024-03-15 17:44:01 +05:30 · 861a1c4132
commit 861a1c4132
parent 5244ba72c9
7 changed files with 179 additions and 101 deletions
--- a/web/components/command-palette/command-palette.tsx
+++ b/web/components/command-palette/command-palette.tsx
@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, FC } from "react";
+import React, { useCallback, useEffect, FC, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import useSWR from "swr";
@ -23,24 +23,29 @@ import { EIssuesStoreType } from "constants/issue";
 import { copyTextToClipboard } from "helpers/string.helper";
 import { useApplication, useEventTracker, useIssues, useUser } from "hooks/store";
 import { IssueService } from "services/issue";
+import { EUserProjectRoles } from "constants/project";
+import { EUserWorkspaceRoles } from "constants/workspace";

 // services
 const issueService = new IssueService();

 export const CommandPalette: FC = observer(() => {
+  // router
  const router = useRouter();
  const { workspaceSlug, projectId, issueId, cycleId, moduleId } = router.query;
-
+  // store hooks
  const {
    commandPalette,
    theme: { toggleSidebar },
  } = useApplication();
  const { setTrackElement } = useEventTracker();
-  const { currentUser } = useUser();
+  const {
+    currentUser,
+    membership: { currentWorkspaceRole, currentProjectRole },
+  } = useUser();
  const {
    issues: { removeIssue },
  } = useIssues(EIssuesStoreType.PROJECT);
-
  const {
    toggleCommandPaletteModal,
    isCreateIssueModalOpen,
@ -91,6 +96,105 @@ export const CommandPalette: FC = observer(() => {
      });
  }, [issueId]);

+  // auth
+  const canPerformProjectCreateActions = useCallback(
+    (showToast: boolean = true) => {
+      const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+      if (!isAllowed && showToast)
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "You don't have permission to perform this action.",
+        });
+
+      return isAllowed;
+    },
+    [currentProjectRole]
+  );
+  const canPerformWorkspaceCreateActions = useCallback(
+    (showToast: boolean = true) => {
+      const isAllowed = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
+      console.log("currentWorkspaceRole", currentWorkspaceRole);
+      console.log("isAllowed", isAllowed);
+      if (!isAllowed && showToast)
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "You don't have permission to perform this action.",
+        });
+      return isAllowed;
+    },
+    [currentWorkspaceRole]
+  );
+
+  const shortcutsList: {
+    global: Record<string, { title: string; description: string; action: () => void }>;
+    workspace: Record<string, { title: string; description: string; action: () => void }>;
+    project: Record<string, { title: string; description: string; action: () => void }>;
+  } = useMemo(
+    () => ({
+      global: {
+        c: {
+          title: "Create a new issue",
+          description: "Create a new issue in the current project",
+          action: () => toggleCreateIssueModal(true),
+        },
+        h: {
+          title: "Show shortcuts",
+          description: "Show all the available shortcuts",
+          action: () => toggleShortcutModal(true),
+        },
+      },
+      workspace: {
+        p: {
+          title: "Create a new project",
+          description: "Create a new project in the current workspace",
+          action: () => toggleCreateProjectModal(true),
+        },
+      },
+      project: {
+        d: {
+          title: "Create a new page",
+          description: "Create a new page in the current project",
+          action: () => toggleCreatePageModal(true),
+        },
+        m: {
+          title: "Create a new module",
+          description: "Create a new module in the current project",
+          action: () => toggleCreateModuleModal(true),
+        },
+        q: {
+          title: "Create a new cycle",
+          description: "Create a new cycle in the current project",
+          action: () => toggleCreateCycleModal(true),
+        },
+        v: {
+          title: "Create a new view",
+          description: "Create a new view in the current project",
+          action: () => toggleCreateViewModal(true),
+        },
+        backspace: {
+          title: "Bulk delete issues",
+          description: "Bulk delete issues in the current project",
+          action: () => toggleBulkDeleteIssueModal(true),
+        },
+        delete: {
+          title: "Bulk delete issues",
+          description: "Bulk delete issues in the current project",
+          action: () => toggleBulkDeleteIssueModal(true),
+        },
+      },
+    }),
+    [
+      toggleBulkDeleteIssueModal,
+      toggleCreateCycleModal,
+      toggleCreateIssueModal,
+      toggleCreateModuleModal,
+      toggleCreatePageModal,
+      toggleCreateProjectModal,
+      toggleCreateViewModal,
+      toggleShortcutModal,
+    ]
+  );
+
  const handleKeyDown = useCallback(
    (e: KeyboardEvent) => {
      const { key, ctrlKey, metaKey, altKey } = e;
@ -102,7 +206,7 @@ export const CommandPalette: FC = observer(() => {
      if (
        e.target instanceof HTMLTextAreaElement ||
        e.target instanceof HTMLInputElement ||
-        (e.target as Element).classList?.contains("ProseMirror")
+        (e.target as Element)?.classList?.contains("ProseMirror")
      )
        return;

@ -119,42 +223,37 @@ export const CommandPalette: FC = observer(() => {
        }
      } else if (!isAnyModalOpen) {
        setTrackElement("Shortcut key");
-        if (keyPressed === "c") {
-          toggleCreateIssueModal(true);
-        } else if (keyPressed === "p") {
-          toggleCreateProjectModal(true);
-        } else if (keyPressed === "h") {
-          toggleShortcutModal(true);
-        } else if (keyPressed === "v" && workspaceSlug && projectId) {
-          toggleCreateViewModal(true);
-        } else if (keyPressed === "d" && workspaceSlug && projectId) {
-          toggleCreatePageModal(true);
-        } else if (keyPressed === "q" && workspaceSlug && projectId) {
-          toggleCreateCycleModal(true);
-        } else if (keyPressed === "m" && workspaceSlug && projectId) {
-          toggleCreateModuleModal(true);
-        } else if (keyPressed === "backspace" || keyPressed === "delete") {
+        if (Object.keys(shortcutsList.global).includes(keyPressed)) shortcutsList.global[keyPressed].action();
+        // workspace authorized actions
+        else if (
+          Object.keys(shortcutsList.workspace).includes(keyPressed) &&
+          workspaceSlug &&
+          canPerformWorkspaceCreateActions()
+        )
+          shortcutsList.workspace[keyPressed].action();
+        // project authorized actions
+        else if (
+          Object.keys(shortcutsList.project).includes(keyPressed) &&
+          projectId &&
+          canPerformProjectCreateActions()
+        ) {
          e.preventDefault();
-          toggleBulkDeleteIssueModal(true);
+          // actions that can be performed only inside a project
+          shortcutsList.project[keyPressed].action();
        }
      }
    },
    [
+      canPerformProjectCreateActions,
+      canPerformWorkspaceCreateActions,
      copyIssueUrlToClipboard,
-      toggleCreateProjectModal,
-      toggleCreateViewModal,
-      toggleCreatePageModal,
-      toggleShortcutModal,
-      toggleCreateCycleModal,
-      toggleCreateModuleModal,
-      toggleBulkDeleteIssueModal,
+      isAnyModalOpen,
+      projectId,
+      setTrackElement,
+      shortcutsList,
      toggleCommandPaletteModal,
      toggleSidebar,
-      toggleCreateIssueModal,
-      projectId,
      workspaceSlug,
-      isAnyModalOpen,
-      setTrackElement,
    ]
  );

@ -169,18 +268,11 @@ export const CommandPalette: FC = observer(() => {

  return (
    <>
-      <ShortcutsModal
-        isOpen={isShortcutModalOpen}
-        onClose={() => {
-          toggleShortcutModal(false);
-        }}
-      />
+      <ShortcutsModal isOpen={isShortcutModalOpen} onClose={() => toggleShortcutModal(false)} />
      {workspaceSlug && (
        <CreateProjectModal
          isOpen={isCreateProjectModalOpen}
-          onClose={() => {
-            toggleCreateProjectModal(false);
-          }}
+          onClose={() => toggleCreateProjectModal(false)}
          workspaceSlug={workspaceSlug.toString()}
        />
      )}
@ -194,9 +286,7 @@ export const CommandPalette: FC = observer(() => {
          />
          <CreateUpdateModuleModal
            isOpen={isCreateModuleModalOpen}
-            onClose={() => {
-              toggleCreateModuleModal(false);
-            }}
+            onClose={() => toggleCreateModuleModal(false)}
            workspaceSlug={workspaceSlug.toString()}
            projectId={projectId.toString()}
          />
@ -236,9 +326,7 @@ export const CommandPalette: FC = observer(() => {

      <BulkDeleteIssuesModal
        isOpen={isBulkDeleteIssueModalOpen}
-        onClose={() => {
-          toggleBulkDeleteIssueModal(false);
-        }}
+        onClose={() => toggleBulkDeleteIssueModal(false)}
        user={currentUser}
      />
      <CommandModal />
--- a/web/components/cycles/form.tsx
+++ b/web/components/cycles/form.tsx
@ -6,6 +6,7 @@ import { DateRangeDropdown, ProjectDropdown } from "components/dropdowns";
 // ui
 // helpers
 import { renderFormattedPayloadDate } from "helpers/date-time.helper";
+import { shouldRenderProject } from "helpers/project.helper";
 // types
 import { ICycle } from "@plane/types";

@ -66,6 +67,7 @@ export const CycleForm: React.FC<Props> = (props) => {
                    setActiveProject(val);
                  }}
                  buttonVariant="background-with-text"
+                  renderCondition={(project) => shouldRenderProject(project)}
                  tabIndex={7}
                />
              )}
--- a/web/components/dropdowns/project.tsx
+++ b/web/components/dropdowns/project.tsx
@ -15,6 +15,7 @@ import { ProjectLogo } from "components/project";
 // types
 import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 import { TDropdownProps } from "./types";
+import { IProject } from "@plane/types";
 // constants

 type Props = TDropdownProps & {
@ -23,6 +24,7 @@ type Props = TDropdownProps & {
  dropdownArrowClassName?: string;
  onChange: (val: string) => void;
  onClose?: () => void;
+  renderCondition?: (project: IProject) => boolean;
  value: string | null;
 };

@ -41,6 +43,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
    onClose,
    placeholder = "Project",
    placement,
+    renderCondition,
    showTooltip = false,
    tabIndex,
    value,
@ -71,7 +74,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {

  const options = joinedProjectIds?.map((projectId) => {
    const projectDetails = getProjectById(projectId);
-
+    if (renderCondition && projectDetails && !renderCondition(projectDetails)) return;
    return {
      value: projectId,
      query: `${projectDetails?.name}`,
@ -89,7 +92,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
  });

  const filteredOptions =
-    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+    query === "" ? options : options?.filter((o) => o?.query.toLowerCase().includes(query.toLowerCase()));

  const selectedProject = value ? getProjectById(value) : null;

@ -205,24 +208,27 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
            <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
              {filteredOptions ? (
                filteredOptions.length > 0 ? (
-                  filteredOptions.map((option) => (
-                    <Combobox.Option
-                      key={option.value}
-                      value={option.value}
-                      className={({ active, selected }) =>
-                        `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
-                          active ? "bg-custom-background-80" : ""
-                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                      }
-                    >
-                      {({ selected }) => (
-                        <>
-                          <span className="flex-grow truncate">{option.content}</span>
-                          {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
-                        </>
-                      )}
-                    </Combobox.Option>
-                  ))
+                  filteredOptions.map((option) => {
+                    if (!option) return;
+                    return (
+                      <Combobox.Option
+                        key={option.value}
+                        value={option.value}
+                        className={({ active, selected }) =>
+                          `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
+                            active ? "bg-custom-background-80" : ""
+                          } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                        }
+                      >
+                        {({ selected }) => (
+                          <>
+                            <span className="flex-grow truncate">{option.content}</span>
+                            {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                          </>
+                        )}
+                      </Combobox.Option>
+                    );
+                  })
                ) : (
                  <p className="text-custom-text-400 italic py-1 px-1.5">No matching results</p>
                )
--- a/web/components/issues/issue-modal/form.tsx
+++ b/web/components/issues/issue-modal/form.tsx
@ -30,6 +30,7 @@ import { FileService } from "services/file.service";
 // ui
 // helpers
 import { getChangedIssuefields } from "helpers/issue.helper";
+import { shouldRenderProject } from "helpers/project.helper";
 // types
 import type { TIssue, ISearchIssueResponse } from "@plane/types";

@ -304,7 +305,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                        handleFormChange();
                      }}
                      buttonVariant="border-with-text"
-                      // TODO: update tabIndex logic
+                      renderCondition={(project) => shouldRenderProject(project)}
                      tabIndex={getTabIndex("project_id")}
                    />
                  </div>
--- a/web/components/modules/form.tsx
+++ b/web/components/modules/form.tsx
@ -7,6 +7,7 @@ import { ModuleStatusSelect } from "components/modules";
 // ui
 // helpers
 import { renderFormattedPayloadDate } from "helpers/date-time.helper";
+import { shouldRenderProject } from "helpers/project.helper";
 // types
 import { IModule } from "@plane/types";

@ -78,6 +79,7 @@ export const ModuleForm: React.FC<Props> = (props) => {
                      setActiveProject(val);
                    }}
                    buttonVariant="border-with-text"
+                    renderCondition={(project) => shouldRenderProject(project)}
                    tabIndex={10}
                  />
                </div>
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@ -1,15 +1,8 @@
 import { useEffect, Fragment, FC, useState } from "react";
-import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
-// ui
-import { setToast, TOAST_TYPE } from "@plane/ui";
 // components
 import { CreateProjectForm } from "./create-project-form";
 import { ProjectFeatureUpdate } from "./project-feature-update";
-// constants
-import { EUserWorkspaceRoles } from "constants/workspace";
-// hooks
-import { useUser } from "hooks/store";

 type Props = {
  isOpen: boolean;
@ -23,32 +16,11 @@ enum EProjectCreationSteps {
  FEATURE_SELECTION = "FEATURE_SELECTION",
 }

-interface IIsGuestCondition {
-  onClose: () => void;
-}
-
-const IsGuestCondition: FC<IIsGuestCondition> = ({ onClose }) => {
-  useEffect(() => {
-    onClose();
-    setToast({
-      title: "Error",
-      type: TOAST_TYPE.ERROR,
-      message: "You don't have permission to create project.",
-    });
-  }, [onClose]);
-
-  return null;
-};
-
-export const CreateProjectModal: FC<Props> = observer((props) => {
+export const CreateProjectModal: FC<Props> = (props) => {
  const { isOpen, onClose, setToFavorite = false, workspaceSlug } = props;
  // states
  const [currentStep, setCurrentStep] = useState<EProjectCreationSteps>(EProjectCreationSteps.CREATE_PROJECT);
  const [createdProjectId, setCreatedProjectId] = useState<string | null>(null);
-  // hooks
-  const {
-    membership: { currentWorkspaceRole },
-  } = useUser();

  useEffect(() => {
    if (isOpen) {
@ -57,9 +29,6 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
    }
  }, [isOpen]);

-  if (currentWorkspaceRole && isOpen)
-    if (currentWorkspaceRole < EUserWorkspaceRoles.MEMBER) return <IsGuestCondition onClose={onClose} />;
-
  const handleNextStep = (projectId: string) => {
    if (!projectId) return;
    setCreatedProjectId(projectId);
@ -111,4 +80,4 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
      </Dialog>
    </Transition.Root>
  );
-});
+};
--- a/web/helpers/project.helper.ts
+++ b/web/helpers/project.helper.ts
@ -3,6 +3,8 @@ import sortBy from "lodash/sortBy";
 import { satisfiesDateFilter } from "helpers/filter.helper";
 // types
 import { IProject, TProjectDisplayFilters, TProjectFilters, TProjectOrderByOptions } from "@plane/types";
+// constants
+import { EUserProjectRoles } from "constants/project";

 /**
 * Updates the sort order of the project.
@ -51,6 +53,14 @@ export const orderJoinedProjects = (
 export const projectIdentifierSanitizer = (identifier: string): string =>
  identifier.replace(/[^ÇŞĞIİÖÜA-Za-z0-9]/g, "");

+/**
+ * @description Checks if the project should be rendered or not based on the user role
+ * @param {IProject} project
+ * @returns {boolean}
+ */
+export const shouldRenderProject = (project: IProject): boolean =>
+  !!project.member_role && project.member_role >= EUserProjectRoles.MEMBER;
+
 /**
 * @description filters projects based on the filter
 * @param {IProject} project