[WEB-1557] fix: create issue disabled for guests (#5102)

* fix: create issue disabled for guests

* fix: workspace role type

* fix: create modal issue

* fix: removed the create action in guest mode

* Remove unused imports

---------

Co-authored-by: Satish Gandham <satish.iitg@gmail.com>

web/core/components/command-palette/command-modal.tsx

@@ -12,20 +12,20 @@ import { IWorkspaceSearchResults } from "@plane/types";
 // hooks
 import { LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 import {
-  CommandPaletteThemeActions,
   ChangeIssueAssignee,
   ChangeIssuePriority,
   ChangeIssueState,
   CommandPaletteHelpActions,
   CommandPaletteIssueActions,
   CommandPaletteProjectActions,
-  CommandPaletteWorkspaceSettingsActions,
   CommandPaletteSearchResults,
+  CommandPaletteThemeActions,
+  CommandPaletteWorkspaceSettingsActions,
 } from "@/components/command-palette";
 import { EmptyState } from "@/components/empty-state";
 import { EmptyStateType } from "@/constants/empty-state";
 import { ISSUE_DETAILS } from "@/constants/fetch-keys";
-import { useCommandPalette, useEventTracker, useProject } from "@/hooks/store";
+import { useCommandPalette, useEventTracker, useProject, useUser } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import useDebounce from "@/hooks/use-debounce";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -46,6 +46,7 @@ export const CommandModal: React.FC = observer(() => {
   // hooks
   const { getProjectById, workspaceProjectIds } = useProject();
   const { isMobile } = usePlatformOS();
+  const { canPerformWorkspaceCreateActions } = useUser();
   // states
   const [placeholder, setPlaceholder] = useState("Type a command or search...");
   const [resultsCount, setResultsCount] = useState(0);
@@ -282,24 +283,27 @@ export const CommandModal: React.FC = observer(() => {
                               setSearchTerm={(newSearchTerm) => setSearchTerm(newSearchTerm)}
                             />
                           )}
-                          {workspaceSlug && workspaceProjectIds && workspaceProjectIds.length > 0 && (
-                            <Command.Group heading="Issue">
-                              <Command.Item
-                                onSelect={() => {
-                                  closePalette();
-                                  setTrackElement("Command Palette");
-                                  toggleCreateIssueModal(true);
-                                }}
-                                className="focus:bg-custom-background-80"
-                              >
-                                <div className="flex items-center gap-2 text-custom-text-200">
-                                  <LayersIcon className="h-3.5 w-3.5" />
-                                  Create new issue
-                                </div>
-                                <kbd>C</kbd>
-                              </Command.Item>
-                            </Command.Group>
-                          )}
+                          {workspaceSlug &&
+                            workspaceProjectIds &&
+                            workspaceProjectIds.length > 0 &&
+                            canPerformWorkspaceCreateActions && (
+                              <Command.Group heading="Issue">
+                                <Command.Item
+                                  onSelect={() => {
+                                    closePalette();
+                                    setTrackElement("Command Palette");
+                                    toggleCreateIssueModal(true);
+                                  }}
+                                  className="focus:bg-custom-background-80"
+                                >
+                                  <div className="flex items-center gap-2 text-custom-text-200">
+                                    <LayersIcon className="h-3.5 w-3.5" />
+                                    Create new issue
+                                  </div>
+                                  <kbd>C</kbd>
+                                </Command.Item>
+                              </Command.Group>
+                            )}
 
                           {workspaceSlug && (
                             <Command.Group heading="Project">

web/core/components/command-palette/command-palette.tsx

@@ -17,8 +17,6 @@ import { CreateProjectModal } from "@/components/project";
 import { CreateUpdateProjectViewModal } from "@/components/views";
 // constants
 import { ISSUE_DETAILS } from "@/constants/fetch-keys";
-import { EUserProjectRoles } from "@/constants/project";
-import { EUserWorkspaceRoles } from "@/constants/workspace";
 // helpers
 import { copyTextToClipboard } from "@/helpers/string.helper";
 // hooks
@@ -43,10 +41,7 @@ export const CommandPalette: FC = observer(() => {
   const { toggleSidebar } = useAppTheme();
   const { setTrackElement } = useEventTracker();
   const { platform } = usePlatformOS();
-  const {
-    membership: { currentWorkspaceRole, currentProjectRole },
-    data: currentUser,
-  } = useUser();
+  const { data: currentUser, canPerformProjectCreateActions, canPerformWorkspaceCreateActions } = useUser();
   const {
     issues: { removeIssue },
   } = useIssuesStore();
@@ -100,30 +95,29 @@ export const CommandPalette: FC = observer(() => {
   }, [issueId]);
 
   // auth
-  const canPerformProjectCreateActions = useCallback(
+  const performProjectCreateActions = useCallback(
     (showToast: boolean = true) => {
-      const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-      if (!isAllowed && showToast)
+      if (!canPerformProjectCreateActions && showToast)
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "You don't have permission to perform this action.",
         });
 
-      return isAllowed;
+      return canPerformProjectCreateActions;
     },
-    [currentProjectRole]
+    [canPerformProjectCreateActions]
   );
-  const canPerformWorkspaceCreateActions = useCallback(
+
+  const performWorkspaceCreateActions = useCallback(
     (showToast: boolean = true) => {
-      const isAllowed = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
-      if (!isAllowed && showToast)
+      if (!canPerformWorkspaceCreateActions && showToast)
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "You don't have permission to perform this action.",
         });
-      return isAllowed;
+      return canPerformWorkspaceCreateActions;
     },
-    [currentWorkspaceRole]
+    [canPerformWorkspaceCreateActions]
   );
 
   const shortcutsList: {
@@ -228,19 +222,20 @@ export const CommandPalette: FC = observer(() => {
         }
       } else if (!isAnyModalOpen) {
         setTrackElement("Shortcut key");
-        if (Object.keys(shortcutsList.global).includes(keyPressed)) shortcutsList.global[keyPressed].action();
+        if (Object.keys(shortcutsList.global).includes(keyPressed) && performWorkspaceCreateActions())
+          shortcutsList.global[keyPressed].action();
         // workspace authorized actions
         else if (
           Object.keys(shortcutsList.workspace).includes(keyPressed) &&
           workspaceSlug &&
-          canPerformWorkspaceCreateActions()
+          performWorkspaceCreateActions()
         )
           shortcutsList.workspace[keyPressed].action();
         // project authorized actions
         else if (
           Object.keys(shortcutsList.project).includes(keyPressed) &&
           projectId &&
-          canPerformProjectCreateActions()
+          performProjectCreateActions()
         ) {
           e.preventDefault();
           // actions that can be performed only inside a project
@@ -249,8 +244,8 @@ export const CommandPalette: FC = observer(() => {
       }
     },
     [
-      canPerformProjectCreateActions,
-      canPerformWorkspaceCreateActions,
+      performProjectCreateActions,
+      performWorkspaceCreateActions,
       copyIssueUrlToClipboard,
       isAnyModalOpen,
       projectId,

web/core/store/user/index.ts

@@ -1,8 +1,11 @@
 import cloneDeep from "lodash/cloneDeep";
 import set from "lodash/set";
-import { action, makeObservable, observable, runInAction } from "mobx";
+import { action, makeObservable, observable, runInAction, computed } from "mobx";
 // types
 import { IUser } from "@plane/types";
+// constants
+import { EUserProjectRoles } from "@/constants/project";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
 // services
@@ -38,6 +41,9 @@ export interface IUserStore {
   deactivateAccount: () => Promise<void>;
   reset: () => void;
   signOut: () => Promise<void>;
+  // computed
+  canPerformProjectCreateActions: boolean;
+  canPerformWorkspaceCreateActions: boolean;
 }
 
 export class UserStore implements IUserStore {
@@ -82,6 +88,9 @@ export class UserStore implements IUserStore {
       deactivateAccount: action,
       reset: action,
       signOut: action,
+      // computed
+      canPerformProjectCreateActions: computed,
+      canPerformWorkspaceCreateActions: computed,
     });
   }
 
@@ -219,4 +228,20 @@ export class UserStore implements IUserStore {
     await this.authService.signOut(API_BASE_URL);
     this.store.resetOnSignOut();
   };
+
+  /**
+   * @description tells if user has project create actions permissions
+   * @returns {boolean}
+   */
+  get canPerformProjectCreateActions() {
+    return !!this.membership.currentProjectRole && this.membership.currentProjectRole >= EUserProjectRoles.MEMBER;
+  }
+
+  /**
+   * @description tells if user has workspace create actions permissions
+   * @returns {boolean}
+   */
+  get canPerformWorkspaceCreateActions() {
+    return !!this.membership.currentWorkspaceRole && this.membership.currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
+  }
 }