feat: implement workspace authorization checks for folder and sidebar (#8805)

* feat: implement workspace authorization checks for folder and sidebar components

* fix: correct button type assignment in Button component

* fix: drag-and-drop functionality with access restrictions

* feat: hide context menu for non-editors

* feat: add workspace auth check for creating new folders in the dashboard header

* fix: admins can perform editor and viewer actions and editors can perform viewer actions

* feat: add team editor check for creating new devboxes in empty folders

* fix: add missing semicolon in ContextMenu component

Author: tristandubbeld

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

@@ -53,9 +53,9 @@ export const useWorkspaceAuthorization = (): WorkspaceAuthorizationReturn => {
 
   const isTeamAdmin = isAdmin;
 
-  const isTeamEditor = authorization === TeamMemberAuthorization.Write;
+  const isTeamEditor = authorization === TeamMemberAuthorization.Write || isTeamAdmin;
 
-  const isTeamViewer = authorization === TeamMemberAuthorization.Read;
+  const isTeamViewer = authorization === TeamMemberAuthorization.Read || isTeamEditor || isTeamAdmin;
 
   return {
     isBillingManager: Boolean(teamManager) || isAdmin,

packages/app/src/app/pages/Dashboard/Components/Folder/FolderCard.tsx

@@ -7,6 +7,7 @@ import {
   IconButton,
   InteractiveOverlay,
 } from '@codesandbox/components';
+import { useWorkspaceAuthorization } from 'app/hooks/useWorkspaceAuthorization';
 import { FolderItemComponentProps } from './types';
 import { StyledCard } from '../shared/StyledCard';
 
@@ -35,7 +36,10 @@ export const FolderCard: React.FC<FolderItemComponentProps> = ({
 
   'data-selection-id': dataSelectionId,
   ...props
-}) => (
+}) => {
+  const { isTeamEditor } = useWorkspaceAuthorization();
+
+  return (
   <InteractiveOverlay>
     <StyledCard
       data-selection-id={dataSelectionId}
@@ -44,7 +48,7 @@ export const FolderCard: React.FC<FolderItemComponentProps> = ({
     >
       <Stack justify="space-between">
         <Icon size={20} name="folder" color="#E3FF73" />
-        {!isNewFolder ? (
+        {!isNewFolder && isTeamEditor ? (
           <IconButton
             css={{
               marginRight: '-4px',
@@ -99,4 +103,4 @@ export const FolderCard: React.FC<FolderItemComponentProps> = ({
       </Stack>
     </StyledCard>
   </InteractiveOverlay>
-);
+)};

packages/app/src/app/pages/Dashboard/Components/Folder/index.tsx

@@ -7,6 +7,7 @@ import track from '@codesandbox/common/lib/utils/analytics';
 import { ESC } from '@codesandbox/common/lib/utils/keycodes';
 import { dashboard as dashboardUrls } from '@codesandbox/common/lib/utils/url-generator';
 import { useAppState, useActions } from 'app/overmind';
+import { useWorkspaceAuthorization } from 'app/hooks/useWorkspaceAuthorization';
 import { FolderCard } from './FolderCard';
 import { FolderListItem } from './FolderListItem';
 import { useSelection } from '../Selection';
@@ -18,6 +19,7 @@ export const Folder = (folderItem: DashboardFolder) => {
   const {
     dashboard: { renameFolder },
   } = useActions();
+  const { isTeamEditor } = useWorkspaceAuthorization();
 
   const {
     name = '',
@@ -93,7 +95,7 @@ export const Folder = (folderItem: DashboardFolder) => {
 
   /* Drop target logic */
 
-  const accepts = ['sandbox'];
+  const accepts = isTeamEditor ? ['sandbox'] : [];
 
   const [{ isOver, canDrop }, dropRef] = useDrop({
     accept: accepts,
@@ -112,6 +114,7 @@ export const Folder = (folderItem: DashboardFolder) => {
 
   const [, dragRef, preview] = useDrag({
     item: folderItem,
+    canDrag: isTeamEditor,
     end: (item, monitor) => {
       const dropResult = monitor.getDropResult();
 
@@ -124,7 +127,7 @@ export const Folder = (folderItem: DashboardFolder) => {
 
   const dragProps = {
     ref: dragRef,
-    onDragStart: event => onDragStart(event, path, 'folder'),
+    onDragStart: isTeamEditor ? (event => onDragStart(event, path, 'folder')) : undefined,
   };
 
   React.useEffect(() => {
@@ -185,7 +188,7 @@ export const Folder = (folderItem: DashboardFolder) => {
     onClick,
     onDoubleClick,
     // edit mode
-    editing: isRenaming && selected,
+    editing: isRenaming && selected && isTeamEditor,
     isNewFolder: false,
     isDragging,
     newName,

packages/app/src/app/pages/Dashboard/Components/Header/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useLocation } from 'react-router-dom';
 import { useAppState, useActions } from 'app/overmind';
 import { Stack, Text, Button, Icon } from '@codesandbox/components';
+import { useWorkspaceAuthorization } from 'app/hooks/useWorkspaceAuthorization';
 import { Breadcrumbs, BreadcrumbProps } from '../Breadcrumbs';
 import { ViewOptions } from '../Filters/ViewOptions';
 import { SortOptions } from '../Filters/SortOptions';
@@ -35,6 +36,7 @@ export const Header = ({
   const location = useLocation();
   const { modalOpened, dashboard: dashboardActions } = useActions();
   const { dashboard } = useAppState();
+  const { isTeamEditor } = useWorkspaceAuthorization();
 
   const repositoriesListPage =
     location.pathname.includes('/repositories') &&
@@ -68,7 +70,7 @@ export const Header = ({
         )}
       </Stack>
       <Stack gap={1} align="center">
-        {location.pathname.includes('/sandboxes') && (
+        {location.pathname.includes('/sandboxes') && isTeamEditor && (
           <Button onClick={createNewFolder} variant="ghost" autoWidth>
             <Icon
               name="folder"

packages/app/src/app/pages/Dashboard/Components/Sandbox/index.tsx

@@ -93,10 +93,18 @@ const GenericSandbox = ({ isScrolling, item, page }: GenericSandboxProps) => {
     screenshotUrl = '/static/img/default-sandbox-thumbnail.png';
   }
 
+  /** Access restrictions */
+  let { noDrag } = item;
+
+  if (activeWorkspaceAuthorization === 'READ') {
+    noDrag = true;
+  }
+
   /* Drag logic */
 
   const [, dragRef, preview] = useDrag({
     item,
+    canDrag: !noDrag,
     end: (_item, monitor) => {
       const dropResult = monitor.getDropResult();
 
@@ -120,13 +128,6 @@ const GenericSandbox = ({ isScrolling, item, page }: GenericSandboxProps) => {
   const Component: React.FC<SandboxItemComponentProps> =
     viewMode === 'list' ? SandboxListItem : SandboxCard;
 
-  /** Access restrictions */
-  let { noDrag } = item;
-
-  if (activeWorkspaceAuthorization === 'READ') {
-    noDrag = true;
-  }
-
   // interactions
   const {
     selectedIds,

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { useActions } from 'app/overmind';
 import { Menu } from '@codesandbox/components';
 import track from '@codesandbox/common/lib/utils/analytics';
+import { useWorkspaceAuthorization } from 'app/hooks/useWorkspaceAuthorization';
 import { Context, MenuItem } from '../ContextMenu';
 import { DashboardBaseFolder } from '../../../types';
 
@@ -14,8 +15,13 @@ export const FolderMenu = ({ folder, setRenaming }: FolderMenuProps) => {
   const {
     dashboard: { deleteFolder },
   } = useActions();
+  const { isTeamEditor } = useWorkspaceAuthorization();
   const { visible, setVisibility, position } = React.useContext(Context);
 
+  if (!isTeamEditor) {
+    return null;
+  }
+
   return (
     <Menu.ContextMenu
       visible={visible}

packages/app/src/app/pages/Dashboard/Content/routes/Sandboxes/index.tsx

@@ -9,6 +9,7 @@ import { SelectionProvider } from 'app/pages/Dashboard/Components/Selection';
 import { VariableGrid } from 'app/pages/Dashboard/Components/VariableGrid';
 import { DashboardGridItem, PageTypes } from 'app/pages/Dashboard/types';
 import { useWorkspaceLimits } from 'app/hooks/useWorkspaceLimits';
+import { useWorkspaceAuthorization } from 'app/hooks/useWorkspaceAuthorization';
 import { ActionCard } from 'app/pages/Dashboard/Components/shared/ActionCard';
 import { useFilteredItems } from './useFilteredItems';
 
@@ -21,6 +22,7 @@ export const SandboxesPage = () => {
   const items = useFilteredItems(currentPath, cleanParam, level);
   const actions = useActions();
   const { isFrozen } = useWorkspaceLimits();
+  const { isTeamEditor } = useWorkspaceAuthorization();
   const {
     dashboard: { allCollections },
     activeTeam,
@@ -87,23 +89,25 @@ export const SandboxesPage = () => {
       {isEmpty ? (
         <EmptyPage.StyledWrapper>
           <EmptyPage.StyledGrid>
-            <ActionCard
-              icon="plus"
-              disabled={isFrozen}
-              onClick={() => {
-                track('Empty Folder - Create devbox', {
-                  codesandbox: 'V1',
-                  event_source: 'UI',
-                });
+            {(isTeamEditor) && (
+              <ActionCard
+                icon="plus"
+                disabled={isFrozen}
+                onClick={() => {
+                  track('Empty Folder - Create devbox', {
+                    codesandbox: 'V1',
+                    event_source: 'UI',
+                  });
 
-                actions.modalOpened({
-                  modal: 'create',
-                  itemId: currentCollection.id,
-                });
-              }}
-            >
-              Create
-            </ActionCard>
+                  actions.modalOpened({
+                    modal: 'create',
+                    itemId: currentCollection.id,
+                  });
+                }}
+              >
+                Create
+              </ActionCard>
+            )}
           </EmptyPage.StyledGrid>
         </EmptyPage.StyledWrapper>
       ) : (

packages/app/src/app/pages/Dashboard/Sidebar/ContextMenu.tsx

@@ -4,6 +4,7 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { Stack, Menu, Icon, Text } from '@codesandbox/components';
 import track from '@codesandbox/common/lib/utils/analytics';
 import { dashboard as dashboardUrls } from '@codesandbox/common/lib/utils/url-generator';
+import { useWorkspaceAuthorization } from 'app/hooks/useWorkspaceAuthorization';
 import { Position } from '../Components/Selection';
 import { DashboardBaseFolder } from '../types';
 import { NEW_FOLDER_ID } from './constants';
@@ -14,7 +15,6 @@ const Context = React.createContext({
 
 interface ContextMenuProps {
   activeTeam: string | null;
-  authorization: string | null;
   visible: boolean;
   setVisibility: (val: boolean) => void;
   position: Position;
@@ -25,7 +25,6 @@ interface ContextMenuProps {
 
 export const ContextMenu: React.FC<ContextMenuProps> = ({
   activeTeam,
-  authorization,
   visible,
   position,
   setVisibility,
@@ -34,15 +33,18 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
   setNewFolderPath,
 }) => {
   const { deleteFolder } = useActions().dashboard;
+  const { isTeamEditor } = useWorkspaceAuthorization();
 
   const history = useHistory();
   const location = useLocation();
 
-  if (!visible || !folder) return null;
+  if (!visible || !folder || !isTeamEditor) {
+    return null;
+  };
 
   let menuOptions;
 
-  if (folder.name === 'Drafts' || authorization === 'READ') {
+  if (folder.name === 'Drafts') {
     menuOptions = (
       <MenuItem onSelect={() => {}}>
         <Stack gap={1}>

packages/app/src/app/pages/Dashboard/Sidebar/NestableRowItem.tsx

@@ -35,6 +35,7 @@ interface NestableRowItemProps {
   path: string;
   page: PageTypes;
   folders: DashboardBaseFolder[];
+  canEdit?: boolean;
 }
 
 export const NestableRowItem: React.FC<NestableRowItemProps> = ({
@@ -43,6 +44,7 @@ export const NestableRowItem: React.FC<NestableRowItemProps> = ({
   page,
   folderPath,
   folders,
+  canEdit = true,
 }) => {
   const actions = useActions();
   const state = useAppState();
@@ -96,6 +98,11 @@ export const NestableRowItem: React.FC<NestableRowItemProps> = ({
 
   const onContextMenu = event => {
     event.preventDefault();
+
+    if (!canEdit) {
+      return;
+    };
+    
     setMenuVisibility(true);
     setMenuFolder({ name, path: folderPath });
     setMenuPosition({ x: event.clientX, y: event.clientY });
@@ -206,6 +213,7 @@ export const NestableRowItem: React.FC<NestableRowItemProps> = ({
         icon="folder"
         nestingLevel={nestingLevel}
         setFoldersVisibility={setFoldersVisibility}
+        canEdit={canEdit}
       >
         <Link
           to={folderUrl}
@@ -315,6 +323,7 @@ export const NestableRowItem: React.FC<NestableRowItemProps> = ({
                   path={dashboardUrls.sandboxes(folder.path, state.activeTeam)}
                   folderPath={folder.path}
                   folders={folders}
+                  canEdit={canEdit}
                 />
               ))}
           </motion.ul>

packages/app/src/app/pages/Dashboard/Sidebar/RowItem.tsx

@@ -60,6 +60,7 @@ interface RowItemProps {
   folderPath?: string;
   nestingLevel?: number;
   style?: CSSProperties;
+  canEdit?: boolean;
 }
 
 export const RowItem: React.FC<RowItemProps> = ({
@@ -71,14 +72,18 @@ export const RowItem: React.FC<RowItemProps> = ({
   icon,
   setFoldersVisibility = null,
   style = {},
+  canEdit = true,
   ...props
 }) => {
   const accepts: Array<'sandbox' | 'folder' | 'template'> = [];
-  if (!canNotAcceptSandboxes.includes(page)) {
-    accepts.push('template');
-    accepts.push('sandbox');
+  
+  if (canEdit && !canNotAcceptSandboxes.includes(page)) {
+    accepts.push('template', 'sandbox');
+  }
+  
+  if (canEdit && !canNotAcceptFolders.includes(page)) {
+    accepts.push('folder');
   }
-  if (!canNotAcceptFolders.includes(page)) accepts.push('folder');
 
   const usedPath = folderPath || path;
   const [{ canDrop, isOver, isDragging }, dropRef] = useDrop({