From 0f892d4670225aec7e868ffaa5633e4bb0692e25 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 13 Dec 2023 20:15:50 +0530
Subject: [PATCH 1/2] chore: analytics permission validation added

---
 web/components/headers/cycle-issues.tsx   | 29 +++++++++++++----------
 web/components/headers/module-issues.tsx  | 29 +++++++++++++----------
 web/components/headers/project-issues.tsx | 29 +++++++++++++----------
 web/components/workspace/sidebar-menu.tsx | 11 +++++++--
 4 files changed, 57 insertions(+), 41 deletions(-)

diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index e5b1167b2..241259648 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -192,20 +192,23 @@ export const CycleIssuesHeader: React.FC = observer(() => {
               handleDisplayPropertiesUpdate={handleDisplayProperties}
             />
           </FiltersDropdown>
-          <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
-            Analytics
-          </Button>
+
           {canUserCreateIssue && (
-            <Button
-              onClick={() => {
-                setTrackElement("CYCLE_PAGE_HEADER");
-                commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.CYCLE);
-              }}
-              size="sm"
-              prependIcon={<Plus />}
-            >
-              Add Issue
-            </Button>
+            <>
+              <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>
+            </>
           )}
           <button
             type="button"
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index f52b7264d..ba5504289 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -193,20 +193,23 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
               handleDisplayPropertiesUpdate={handleDisplayProperties}
             />
           </FiltersDropdown>
-          <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
-            Analytics
-          </Button>
+
           {canUserCreateIssue && (
-            <Button
-              onClick={() => {
-                setTrackElement("MODULE_PAGE_HEADER");
-                commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.MODULE);
-              }}
-              size="sm"
-              prependIcon={<Plus />}
-            >
-              Add Issue
-            </Button>
+            <>
+              <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>
+            </>
           )}
           <button
             type="button"
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 48c966e75..d4d7c633f 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -202,20 +202,23 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
               </span>
             </Link>
           )}
-          <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
-            Analytics
-          </Button>
+
           {canUserCreateIssue && (
-            <Button
-              onClick={() => {
-                setTrackElement("PROJECT_PAGE_HEADER");
-                commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
-              }}
-              size="sm"
-              prependIcon={<Plus />}
-            >
-              Add Issue
-            </Button>
+            <>
+              <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>
+            </>
           )}
         </div>
       </div>
diff --git a/web/components/workspace/sidebar-menu.tsx b/web/components/workspace/sidebar-menu.tsx
index 792e7e6a0..573b10541 100644
--- a/web/components/workspace/sidebar-menu.tsx
+++ b/web/components/workspace/sidebar-menu.tsx
@@ -9,6 +9,8 @@ import { BarChart2, Briefcase, CheckCircle, LayoutGrid } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { observer } from "mobx-react-lite";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 const workspaceLinks = (workspaceSlug: string) => [
   {
@@ -34,16 +36,21 @@ const workspaceLinks = (workspaceSlug: string) => [
 ];
 
 export const WorkspaceSidebarMenu = observer(() => {
-  const { theme: themeStore } = useMobxStore();
+  const {
+    theme: themeStore,
+    user: { currentWorkspaceRole },
+  } = useMobxStore();
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
+
   return (
     <div className="w-full cursor-pointer space-y-1 p-4">
       {workspaceLinks(workspaceSlug as string).map((link, index) => {
         const isActive = link.name === "Settings" ? router.asPath.includes(link.href) : router.asPath === link.href;
-
+        if (!isAuthorizedUser && link.name === "Analytics") return;
         return (
           <Link key={index} href={link.href}>
             <span className="block w-full">

From 13d7832d352852f4b2fc01f55df26b6f39b7e760 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 13 Dec 2023 20:32:39 +0530
Subject: [PATCH 2/2] chore: app sidebar quick action permission validation
 added

---
 .../workspace/sidebar-quick-action.tsx        | 106 ++++++++++--------
 1 file changed, 59 insertions(+), 47 deletions(-)

diff --git a/web/components/workspace/sidebar-quick-action.tsx b/web/components/workspace/sidebar-quick-action.tsx
index 6427e4692..d2245090f 100644
--- a/web/components/workspace/sidebar-quick-action.tsx
+++ b/web/components/workspace/sidebar-quick-action.tsx
@@ -10,6 +10,8 @@ import { CreateUpdateDraftIssueModal } from "components/issues";
 import { useMobxStore } from "lib/mobx/store-provider";
 import { observer } from "mobx-react-lite";
 import { EProjectStore } from "store/command-palette.store";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 export const WorkspaceSidebarQuickAction = observer(() => {
   // states
@@ -19,12 +21,15 @@ export const WorkspaceSidebarQuickAction = observer(() => {
     theme: themeStore,
     commandPalette: commandPaletteStore,
     trackEvent: { setTrackElement },
+    user: { currentWorkspaceRole },
   } = useMobxStore();
 
   const { storedValue, clearValue } = useLocalStorage<any>("draftedIssue", JSON.stringify({}));
 
   const isSidebarCollapsed = themeStore.sidebarCollapsed;
 
+  const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
+
   return (
     <>
       <CreateUpdateDraftIssueModal
@@ -42,61 +47,67 @@ export const WorkspaceSidebarQuickAction = observer(() => {
           isSidebarCollapsed ? "flex-col gap-1" : "gap-2"
         }`}
       >
-        <div
-          className={`group relative flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2 ${
-            isSidebarCollapsed
-              ? "px-2 hover:bg-custom-sidebar-background-80"
-              : "border-[0.5px] border-custom-border-200 px-3 shadow-custom-sidebar-shadow-2xs"
-          }`}
-        >
-          <button
-            type="button"
-            className={`relative flex flex-shrink-0 flex-grow items-center gap-2 rounded py-1.5 outline-none ${
-              isSidebarCollapsed ? "justify-center" : ""
+        {isAuthorizedUser && (
+          <div
+            className={`group relative flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2 ${
+              isSidebarCollapsed
+                ? "px-2 hover:bg-custom-sidebar-background-80"
+                : "border-[0.5px] border-custom-border-200 px-3 shadow-custom-sidebar-shadow-2xs"
             }`}
-            onClick={() => {
-              setTrackElement("APP_SIDEBAR_QUICK_ACTIONS");
-              commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
-            }}
           >
-            <PenSquare className="h-4 w-4 text-custom-sidebar-text-300" />
-            {!isSidebarCollapsed && <span className="text-sm font-medium">New Issue</span>}
-          </button>
+            <button
+              type="button"
+              className={`relative flex flex-shrink-0 flex-grow items-center gap-2 rounded py-1.5 outline-none ${
+                isSidebarCollapsed ? "justify-center" : ""
+              }`}
+              onClick={() => {
+                setTrackElement("APP_SIDEBAR_QUICK_ACTIONS");
+                commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
+              }}
+            >
+              <PenSquare className="h-4 w-4 text-custom-sidebar-text-300" />
+              {!isSidebarCollapsed && <span className="text-sm font-medium">New Issue</span>}
+            </button>
 
-          {storedValue && Object.keys(JSON.parse(storedValue)).length > 0 && (
-            <>
-              <div className={`h-8 w-0.5 bg-custom-sidebar-background-80 ${isSidebarCollapsed ? "hidden" : "block"}`} />
+            {storedValue && Object.keys(JSON.parse(storedValue)).length > 0 && (
+              <>
+                <div
+                  className={`h-8 w-0.5 bg-custom-sidebar-background-80 ${isSidebarCollapsed ? "hidden" : "block"}`}
+                />
 
-              <button
-                type="button"
-                className={`ml-1.5 flex flex-shrink-0 items-center justify-center rounded py-1.5 ${
-                  isSidebarCollapsed ? "hidden" : "block"
-                }`}
-              >
-                <ChevronUp className="h-4 w-4 rotate-180 transform !text-custom-sidebar-text-300 transition-transform duration-300 group-hover:rotate-0" />
-              </button>
+                <button
+                  type="button"
+                  className={`ml-1.5 flex flex-shrink-0 items-center justify-center rounded py-1.5 ${
+                    isSidebarCollapsed ? "hidden" : "block"
+                  }`}
+                >
+                  <ChevronUp className="h-4 w-4 rotate-180 transform !text-custom-sidebar-text-300 transition-transform duration-300 group-hover:rotate-0" />
+                </button>
 
-              <div
-                className={`pointer-events-none fixed left-4 mt-0 h-10 w-[203px] pt-2 opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 ${
-                  isSidebarCollapsed ? "top-[5.5rem]" : "top-24"
-                }`}
-              >
-                <div className="h-full w-full">
-                  <button
-                    onClick={() => setIsDraftIssueModalOpen(true)}
-                    className="flex w-full flex-shrink-0 items-center rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-3 py-[10px] text-sm text-custom-text-300 shadow"
-                  >
-                    <PenSquare size={16} className="mr-2 !text-lg !leading-4 text-custom-sidebar-text-300" />
-                    Last Drafted Issue
-                  </button>
+                <div
+                  className={`pointer-events-none fixed left-4 mt-0 h-10 w-[203px] pt-2 opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 ${
+                    isSidebarCollapsed ? "top-[5.5rem]" : "top-24"
+                  }`}
+                >
+                  <div className="h-full w-full">
+                    <button
+                      onClick={() => setIsDraftIssueModalOpen(true)}
+                      className="flex w-full flex-shrink-0 items-center rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-3 py-[10px] text-sm text-custom-text-300 shadow"
+                    >
+                      <PenSquare size={16} className="mr-2 !text-lg !leading-4 text-custom-sidebar-text-300" />
+                      Last Drafted Issue
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </>
-          )}
-        </div>
+              </>
+            )}
+          </div>
+        )}
 
         <button
-          className={`flex flex-shrink-0 items-center justify-center rounded p-2 outline-none ${
+          className={`flex flex-shrink-0 items-center rounded p-2 gap-2 outline-none ${
+            isAuthorizedUser ? "justify-center" : "w-full"
+          } ${
             isSidebarCollapsed
               ? "hover:bg-custom-sidebar-background-80"
               : "border-[0.5px] border-custom-border-200 shadow-custom-sidebar-shadow-2xs"
@@ -104,6 +115,7 @@ export const WorkspaceSidebarQuickAction = observer(() => {
           onClick={() => commandPaletteStore.toggleCommandPaletteModal(true)}
         >
           <Search className="h-4 w-4 text-custom-sidebar-text-300" />
+          <span className="text-xs font-medium">Open command menu</span>
         </button>
       </div>
     </>