chore: app sidebar quick action permission validation added

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,6 +47,7 @@ export const WorkspaceSidebarQuickAction = observer(() => {
           isSidebarCollapsed ? "flex-col gap-1" : "gap-2"
         }`}
       >
+        {isAuthorizedUser && (
           <div
             className={`group relative flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2 ${
               isSidebarCollapsed
@@ -65,7 +71,9 @@ export const WorkspaceSidebarQuickAction = observer(() => {
 
             {storedValue && Object.keys(JSON.parse(storedValue)).length > 0 && (
               <>
-              <div className={`h-8 w-0.5 bg-custom-sidebar-background-80 ${isSidebarCollapsed ? "hidden" : "block"}`} />
+                <div
+                  className={`h-8 w-0.5 bg-custom-sidebar-background-80 ${isSidebarCollapsed ? "hidden" : "block"}`}
+                />
 
                 <button
                   type="button"
@@ -94,9 +102,12 @@ export const WorkspaceSidebarQuickAction = observer(() => {
               </>
             )}
           </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>
     </>