chore: access control to create issue, cycle, module, pages

2023-12-07 17:47:35 +05:30 · 2023-12-07 17:47:35 +05:30 · 1ff0538077
commit 1ff0538077
parent 0e055666e7
6 changed files with 113 additions and 65 deletions
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@ -21,6 +21,7 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 import { EFilterType } from "store/issues/types";
 import { EProjectStore } from "store/command-palette.store";
+import { EUserWorkspaceRoles } from "constants/workspace";

 export const CycleIssuesHeader: React.FC = observer(() => {
  const [analyticsModal, setAnalyticsModal] = useState(false);
@ -42,6 +43,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
    commandPalette: commandPaletteStore,
    trackEvent: { setTrackElement },
    cycleIssuesFilter: { issueFilters, updateFilters },
+    user: { currentProjectRole },
  } = useMobxStore();

  const activeLayout = projectIssueFiltersStore.issueFilters?.displayFilters?.layout;
@ -99,6 +101,9 @@ export const CycleIssuesHeader: React.FC = observer(() => {
  const cyclesList = cycleStore.projectCycles;
  const cycleDetails = cycleId ? cycleStore.getCycleById(cycleId.toString()) : undefined;

+  const canUserCreateIssue =
+    currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
+
  return (
    <>
      <ProjectAnalyticsModal
@ -190,16 +195,18 @@ export const CycleIssuesHeader: React.FC = observer(() => {
          <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
            Analytics
          </Button>
-          <Button
-            onClick={() => {
-              setTrackElement("CYCLE_PAGE_HEADER");
-              commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.CYCLE);
-            }}
-            size="sm"
-            prependIcon={<Plus />}
-          >
-            Add Issue
-          </Button>
+          {canUserCreateIssue && (
+            <Button
+              onClick={() => {
+                setTrackElement("CYCLE_PAGE_HEADER");
+                commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.CYCLE);
+              }}
+              size="sm"
+              prependIcon={<Plus />}
+            >
+              Add Issue
+            </Button>
+          )}
          <button
            type="button"
            className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
--- a/web/components/headers/cycles.tsx
+++ b/web/components/headers/cycles.tsx
@ -8,15 +8,24 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
+import { EUserWorkspaceRoles } from "constants/workspace";

 export const CyclesHeader: FC = observer(() => {
  // router
  const router = useRouter();
  const { workspaceSlug } = router.query;
  // store
-  const { project: projectStore, commandPalette: commandPaletteStore, trackEvent: { setTrackElement } } = useMobxStore();
+  const {
+    project: projectStore,
+    user: { currentProjectRole },
+    commandPalette: commandPaletteStore,
+    trackEvent: { setTrackElement },
+  } = useMobxStore();
  const { currentProjectDetails } = projectStore;

+  const canUserCreateCycle =
+    currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
+
  return (
    <div className="relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between h-[3.75rem] gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
@ -46,20 +55,21 @@ export const CyclesHeader: FC = observer(() => {
          </Breadcrumbs>
        </div>
      </div>
-      <div className="flex items-center gap-3">
-        <Button
-          variant="primary"
-          size="sm"
-          prependIcon={<Plus />}
-          onClick={() => {
-            setTrackElement("CYCLES_PAGE_HEADER");
-            commandPaletteStore.toggleCreateCycleModal(true);
-          }
-          }
-        >
-          Add Cycle
-        </Button>
-      </div>
+      {canUserCreateCycle && (
+        <div className="flex items-center gap-3">
+          <Button
+            variant="primary"
+            size="sm"
+            prependIcon={<Plus />}
+            onClick={() => {
+              setTrackElement("CYCLES_PAGE_HEADER");
+              commandPaletteStore.toggleCreateCycleModal(true);
+            }}
+          >
+            Add Cycle
+          </Button>
+        </div>
+      )}
    </div>
  );
 });
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@ -21,6 +21,7 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 import { EFilterType } from "store/issues/types";
 import { EProjectStore } from "store/command-palette.store";
+import { EUserWorkspaceRoles } from "constants/workspace";

 export const ModuleIssuesHeader: React.FC = observer(() => {
  const [analyticsModal, setAnalyticsModal] = useState(false);
@ -41,6 +42,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
    trackEvent: { setTrackElement },
    projectLabel: { projectLabels },
    moduleIssuesFilter: { issueFilters, updateFilters },
+    user: { currentProjectRole },
  } = useMobxStore();

  const { currentProjectDetails } = projectStore;
@ -100,6 +102,9 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
  const modulesList = projectId ? moduleStore.modules[projectId.toString()] : undefined;
  const moduleDetails = moduleId ? moduleStore.getModuleById(moduleId.toString()) : undefined;

+  const canUserCreateIssue =
+    currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
+
  return (
    <>
      <ProjectAnalyticsModal
@ -191,16 +196,18 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
          <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
            Analytics
          </Button>
-          <Button
-            onClick={() => {
-              setTrackElement("MODULE_PAGE_HEADER");
-              commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.MODULE);
-            }}
-            size="sm"
-            prependIcon={<Plus />}
-          >
-            Add Issue
-          </Button>
+          {canUserCreateIssue && (
+            <Button
+              onClick={() => {
+                setTrackElement("MODULE_PAGE_HEADER");
+                commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.MODULE);
+              }}
+              size="sm"
+              prependIcon={<Plus />}
+            >
+              Add Issue
+            </Button>
+          )}
          <button
            type="button"
            className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
--- a/web/components/headers/modules-list.tsx
+++ b/web/components/headers/modules-list.tsx
@ -11,17 +11,25 @@ import { Breadcrumbs, Button, Tooltip, DiceIcon } from "@plane/ui";
 import { renderEmoji } from "helpers/emoji.helper";
 // constants
 import { MODULE_VIEW_LAYOUTS } from "constants/module";
+import { EUserWorkspaceRoles } from "constants/workspace";

 export const ModulesListHeader: React.FC = observer(() => {
  // router
  const router = useRouter();
  const { workspaceSlug } = router.query;
  // store
-  const { project: projectStore, commandPalette: commandPaletteStore } = useMobxStore();
+  const {
+    project: projectStore,
+    commandPalette: commandPaletteStore,
+    user: { currentProjectRole },
+  } = useMobxStore();
  const { currentProjectDetails } = projectStore;

  const { storedValue: modulesView, setValue: setModulesView } = useLocalStorage("modules_view", "grid");

+  const canUserCreateModule =
+    currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
+
  return (
    <div className="relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between h-[3.75rem] gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
@ -72,14 +80,16 @@ export const ModulesListHeader: React.FC = observer(() => {
            </Tooltip>
          ))}
        </div>
-        <Button
-          variant="primary"
-          size="sm"
-          prependIcon={<Plus />}
-          onClick={() => commandPaletteStore.toggleCreateModuleModal(true)}
-        >
-          Add Module
-        </Button>
+        {canUserCreateModule && (
+          <Button
+            variant="primary"
+            size="sm"
+            prependIcon={<Plus />}
+            onClick={() => commandPaletteStore.toggleCreateModuleModal(true)}
+          >
+            Add Module
+          </Button>
+        )}
      </div>
    </div>
  );
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@ -18,6 +18,7 @@ import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 import { renderEmoji } from "helpers/emoji.helper";
 import { EFilterType } from "store/issues/types";
 import { EProjectStore } from "store/command-palette.store";
+import { EUserWorkspaceRoles } from "constants/workspace";

 export const ProjectIssuesHeader: React.FC = observer(() => {
  const [analyticsModal, setAnalyticsModal] = useState(false);
@ -36,6 +37,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
    // issue filters
    projectIssuesFilter: { issueFilters, updateFilters },
    projectIssues: {},
+    user: { currentProjectRole },
  } = useMobxStore();

  const activeLayout = issueFilters?.displayFilters?.layout;
@ -87,6 +89,9 @@ export const ProjectIssuesHeader: React.FC = observer(() => {

  const deployUrl = process.env.NEXT_PUBLIC_DEPLOY_URL;

+  const canUserCreateIssue =
+    currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
+
  return (
    <>
      <ProjectAnalyticsModal
@ -200,16 +205,18 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
          <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
            Analytics
          </Button>
-          <Button
-            onClick={() => {
-              setTrackElement("PROJECT_PAGE_HEADER");
-              commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
-            }}
-            size="sm"
-            prependIcon={<Plus />}
-          >
-            Add Issue
-          </Button>
+          {canUserCreateIssue && (
+            <Button
+              onClick={() => {
+                setTrackElement("PROJECT_PAGE_HEADER");
+                commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
+              }}
+              size="sm"
+              prependIcon={<Plus />}
+            >
+              Add Issue
+            </Button>
+          )}
        </div>
      </div>
    </>
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@ -1,6 +1,7 @@
 import { useCallback } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { Plus } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
@ -16,7 +17,7 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 import { EFilterType } from "store/issues/types";
 import { EProjectStore } from "store/command-palette.store";
-import { Plus } from "lucide-react";
+import { EUserWorkspaceRoles } from "constants/workspace";

 export const ProjectViewIssuesHeader: React.FC = observer(() => {
  const router = useRouter();
@ -35,6 +36,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
    viewIssuesFilter: { issueFilters, updateFilters },
    commandPalette: commandPaletteStore,
    trackEvent: { setTrackElement },
+    user: { currentProjectRole },
  } = useMobxStore();

  const activeLayout = issueFilters?.displayFilters?.layout;
@ -85,6 +87,9 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
  const viewsList = projectId ? projectViewsStore.viewsList[projectId.toString()] : undefined;
  const viewDetails = viewId ? projectViewsStore.viewDetails[viewId.toString()] : undefined;

+  const canUserCreateIssue =
+    currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
+
  return (
    <div className="relative w-full flex items-center z-10 h-[3.75rem] justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
      <div className="flex items-center gap-2">
@ -170,16 +175,18 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
            handleDisplayPropertiesUpdate={handleDisplayProperties}
          />
        </FiltersDropdown>
-        <Button
-          onClick={() => {
-            setTrackElement("PROJECT_VIEW_PAGE_HEADER");
-            commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT_VIEW);
-          }}
-          size="sm"
-          prependIcon={<Plus />}
-        >
-          Add Issue
-        </Button>
+        {
+          <Button
+            onClick={() => {
+              setTrackElement("PROJECT_VIEW_PAGE_HEADER");
+              commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT_VIEW);
+            }}
+            size="sm"
+            prependIcon={<Plus />}
+          >
+            Add Issue
+          </Button>
+        }
      </div>
    </div>
  );