fix: add clear access vars and fix sandbox menu (#8823)

Author: tristandubbeld

packages/app/src/app/hooks/useWorkspaceAuthorization.ts

@@ -10,6 +10,9 @@ type WorkspaceAuthorizationReturn =
       isTeamEditor: undefined;
       isTeamViewer: undefined;
       userRole: undefined;
+      hasAdminAccess: undefined;
+      hasEditorAccess: undefined;
+      hasViewerAccess: undefined;
     }
   | {
       isAdmin: boolean;
@@ -19,6 +22,9 @@ type WorkspaceAuthorizationReturn =
       isTeamEditor: boolean;
       isTeamViewer: boolean;
       userRole: TeamMemberAuthorization;
+      hasAdminAccess: boolean;
+      hasEditorAccess: boolean;
+      hasViewerAccess: boolean;
     };
 
 export const useWorkspaceAuthorization = (): WorkspaceAuthorizationReturn => {
@@ -42,6 +48,9 @@ export const useWorkspaceAuthorization = (): WorkspaceAuthorizationReturn => {
       isTeamEditor: undefined,
       isTeamViewer: undefined,
       userRole: undefined,
+      hasAdminAccess: undefined,
+      hasEditorAccess: undefined,
+      hasViewerAccess: undefined,
     };
   }
 
@@ -52,10 +61,12 @@ export const useWorkspaceAuthorization = (): WorkspaceAuthorizationReturn => {
   const isAdmin = authorization === TeamMemberAuthorization.Admin;
 
   const isTeamAdmin = isAdmin;
+  const isTeamEditor = authorization === TeamMemberAuthorization.Write;
+  const isTeamViewer = authorization === TeamMemberAuthorization.Read;
 
-  const isTeamEditor = authorization === TeamMemberAuthorization.Write || isTeamAdmin;
-
-  const isTeamViewer = authorization === TeamMemberAuthorization.Read || isTeamEditor || isTeamAdmin;
+  const hasAdminAccess = isTeamAdmin;
+  const hasEditorAccess = isTeamEditor || isTeamAdmin;
+  const hasViewerAccess = isTeamViewer || isTeamEditor || isTeamAdmin;
 
   return {
     isBillingManager: Boolean(teamManager) || isAdmin,
@@ -65,5 +76,8 @@ export const useWorkspaceAuthorization = (): WorkspaceAuthorizationReturn => {
     isTeamEditor,
     isTeamViewer,
     userRole: authorization ?? undefined,
+    hasAdminAccess,
+    hasEditorAccess,
+    hasViewerAccess,
   };
 };

packages/app/src/app/pages/Dashboard/Components/Selection/ContextMenus/SandboxMenu.tsx

@@ -35,7 +35,7 @@ export const SandboxMenu: React.FC<SandboxMenuProps> = ({
   const { visible, setVisibility, position } = React.useContext(Context);
   const history = useHistory();
   const location = useLocation();
-  const { userRole, isTeamAdmin, isTeamViewer } = useWorkspaceAuthorization();
+  const { userRole, hasAdminAccess, hasEditorAccess } = useWorkspaceAuthorization();
   const { isFrozen } = useWorkspaceLimits();
 
   const url = sandboxUrl(sandbox);
@@ -44,15 +44,15 @@ export const SandboxMenu: React.FC<SandboxMenuProps> = ({
 
   const restrictedFork = isFrozen;
 
-  const hasAccess = React.useMemo(() => {
+  const isInActiveTeam = React.useMemo(() => {
     if (item.sandbox.teamId === activeTeam) {
       return true;
     }
 
     return false;
   }, [item, activeTeam]);
 
-  const hasWriteAccess = hasAccess && !isTeamViewer;
+  const hasWriteAccess = isInActiveTeam && hasEditorAccess;
 
   if (location.pathname.includes('deleted') && hasWriteAccess) {
     return (
@@ -127,7 +127,7 @@ export const SandboxMenu: React.FC<SandboxMenuProps> = ({
       >
         Copy link
       </MenuItem>
-      {hasAccess && location.pathname === '/dashboard/recent' ? (
+      {isInActiveTeam && location.pathname === '/dashboard/recent' ? (
         <MenuItem
           onSelect={() => {
             history.push(folderUrl, { sandboxId: sandbox.id });
@@ -278,7 +278,7 @@ export const SandboxMenu: React.FC<SandboxMenuProps> = ({
         </MenuItem>
       )}
 
-      {hasAccess &&
+      {isInActiveTeam &&
         (isTemplate ? (
           <MenuItem
             onSelect={() => {
@@ -303,7 +303,7 @@ export const SandboxMenu: React.FC<SandboxMenuProps> = ({
           </MenuItem>
         ))}
       {isPro &&
-        isTeamAdmin &&
+        hasAdminAccess &&
         (sandbox.permissions.preventSandboxLeaving ? (
           <MenuItem
             onSelect={() => {
@@ -329,7 +329,7 @@ export const SandboxMenu: React.FC<SandboxMenuProps> = ({
         ))}
       {!sandbox.isV2 &&
         isPro &&
-        isTeamAdmin &&
+        hasAdminAccess &&
         (sandbox.permissions.preventSandboxExport ? (
           <MenuItem
             onSelect={() => {