feat: add dropzone header

CHANGELOG.md

@@ -2,13 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+
 ## [2.10.0](https://github.com/graasp/graasp-builder/compare/v2.9.4...v2.10.0) (2024-03-07)
 
 
 ### Features
 
 * add checkbox in DescriptionForm to allow to add description above ([#1050](https://github.com/graasp/graasp-builder/issues/1050)) ([a38f27d](https://github.com/graasp/graasp-builder/commit/a38f27d7e488cea317ee3a25ac3c045891a7c5f1))
 
+
 ## [2.9.4](https://github.com/graasp/graasp-builder/compare/v2.9.3...v2.9.4) (2024-03-07)
 
 

cypress/e2e/item/upload/dropzoneUpload.cy.ts

@@ -0,0 +1,31 @@
+import { buildItemPath } from '@/config/paths';
+import { DROPZONE_HELPER_ID } from '@/config/selectors';
+
+import { SAMPLE_ITEMS, SAMPLE_PUBLIC_ITEMS } from '../../../fixtures/items';
+
+describe('Dropzone Helper Visibility', () => {
+  describe('Home screen', () => {
+    beforeEach(() => {
+      cy.setUpApi();
+    });
+
+    it(' should display the dropzone on the home screen when no items', () => {
+      cy.visit('/');
+      cy.get(`#${DROPZONE_HELPER_ID}`).should('be.visible');
+    });
+  });
+
+  describe('Empty folder', () => {
+    it('should show dropzone helper when no items (logged in)', () => {
+      cy.setUpApi(SAMPLE_ITEMS);
+      cy.visit(buildItemPath(SAMPLE_ITEMS.items[1].id));
+      cy.get(`#${DROPZONE_HELPER_ID}`).should('be.visible');
+    });
+
+    it('should hide dropzone helper when no items (logged out)', () => {
+      cy.setUpApi({ ...SAMPLE_PUBLIC_ITEMS, currentMember: null });
+      cy.visit(buildItemPath(SAMPLE_PUBLIC_ITEMS.items[2].id));
+      cy.get(`#${DROPZONE_HELPER_ID}`).should('not.exist');
+    });
+  });
+});

cypress/e2e/redirection.cy.ts

@@ -2,6 +2,7 @@ import { saveUrlForRedirection } from '@graasp/sdk';
 
 import { REDIRECT_PATH } from '../../src/config/paths';
 import { ACCESSIBLE_ITEMS_TABLE_ID } from '../../src/config/selectors';
+import { SAMPLE_ITEMS } from '../fixtures/items';
 
 const DOMAIN = Cypress.env('VITE_GRAASP_DOMAIN');
 
@@ -17,7 +18,7 @@ describe('Redirection', () => {
   });
 
   it('Redirection to home if no url is saved', () => {
-    cy.setUpApi();
+    cy.setUpApi(SAMPLE_ITEMS);
 
     cy.visit(REDIRECT_PATH);
 

src/components/file/DropzoneHelper.tsx

@@ -0,0 +1,80 @@
+import { useContext, useRef } from 'react';
+
+import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined';
+import UploadFileOutlinedIcon from '@mui/icons-material/UploadFileOutlined';
+import { Button, Stack, Typography } from '@mui/material';
+
+import { useBuilderTranslation } from '@/config/i18n';
+import { DROPZONE_HELPER_ID } from '@/config/selectors';
+import { BUILDER } from '@/langs/constants';
+
+import { UppyContext } from './UppyContext';
+
+const DropzoneHelper = (): JSX.Element => {
+  const { t } = useBuilderTranslation();
+  const { uppy } = useContext(UppyContext);
+  const ref = useRef<HTMLInputElement>(null);
+
+  const handleClick = () => {
+    const { current } = ref;
+    if (current) {
+      current.click();
+    }
+  };
+
+  const handleFiles = () => {
+    const { current } = ref;
+    if (current) {
+      const { files } = current;
+      if (files) {
+        // add files selected to uppy, this will upload them
+        [...files].map((file) =>
+          // add name to display file name in the ItemsTable
+          uppy?.addFile({ data: file, name: file.name }),
+        );
+      } else {
+        console.error('no files found !');
+      }
+    }
+  };
+
+  return (
+    <Stack
+      justifyContent="flex-start"
+      alignItems="center"
+      direction="column"
+      flexGrow={1}
+      spacing={3}
+      sx={{ height: '100%', position: 'relative', top: '15%' }}
+      id={DROPZONE_HELPER_ID}
+    >
+      <UploadFileOutlinedIcon color="primary" sx={{ fontSize: '50px' }} />
+      <Typography align="center" variant="h4" color="text.secondary">
+        {t(BUILDER.DROPZONE_HELPER_TEXT)}
+      </Typography>
+      <Typography variant="h5" color="text.secondary">
+        {t(BUILDER.DROPZONE_HELPER_OPTIONAL_ACTION_TEXT)}
+      </Typography>
+      <Button
+        variant="contained"
+        size="large"
+        onClick={handleClick}
+        startIcon={<FolderOutlinedIcon />}
+      >
+        {t(BUILDER.DROPZONE_HELPER_ACTION)}
+      </Button>
+      <input
+        style={{ display: 'none' }}
+        type="file"
+        multiple
+        ref={ref}
+        onChange={handleFiles}
+      />
+      <Typography variant="body1" sx={{ color: '#757575' }}>
+        {t(BUILDER.DROPZONE_HELPER_LIMIT_REMINDER_TEXT)}
+      </Typography>
+    </Stack>
+  );
+};
+
+export default DropzoneHelper;

src/components/item/ItemContent.tsx

@@ -208,6 +208,7 @@ const FolderContent = ({
       // but it's more tedious to check permissions over all selected items
       ToolbarActions={enableEditing ? ItemActions : undefined}
       totalCount={folderChildren?.length}
+      showDropzoneHelper
     />
   );
 };

src/components/item/ItemMain.tsx

@@ -28,6 +28,7 @@ const StyledContainer = styled(Box)<{ open: boolean }>(({ theme, open }) => {
     marginRight: 0,
     display: 'flex',
     flexDirection: 'column',
+    height: '100%',
 
     transition: theme.transitions.create('margin', {
       easing: theme.transitions.easing.sharp,
@@ -50,7 +51,7 @@ const ItemMain = ({ id, children, item }: Props): JSX.Element => {
   const { isChatboxMenuOpen, setIsChatboxMenuOpen } = useLayoutContext();
 
   return (
-    <Box id={id} m={2} className={ITEM_MAIN_CLASS}>
+    <Box id={id} p={2} className={ITEM_MAIN_CLASS} height="100%">
       {isChatboxMenuOpen && (
         <ItemPanel open={isChatboxMenuOpen}>
           <DrawerHeader

src/components/main/Items.tsx

@@ -38,6 +38,7 @@ type Props = {
   totalCount?: number;
   onSortChanged?: (e: any) => void;
   pageSize?: number;
+  showDropzoneHelper?: boolean;
 };
 
 const Items = ({
@@ -61,6 +62,7 @@ const Items = ({
   totalCount = 0,
   onSortChanged,
   pageSize,
+  showDropzoneHelper = false,
 }: Props): JSX.Element | null => {
   const { mode } = useLayoutContext();
   const itemIds = items?.map(({ id: itemId }) => itemId);
@@ -116,6 +118,7 @@ const Items = ({
           setPage={setPage}
           totalCount={totalCount}
           pageSize={pageSize}
+          showDropzoneHelper={showDropzoneHelper}
         />
       );
   }

src/components/main/ItemsTable.tsx

@@ -21,6 +21,7 @@ import {
 } from '@ag-grid-community/core';
 
 import { ShowOnlyMeChangeType } from '@/config/types';
+import { useGetPermissionForItem } from '@/hooks/authorization';
 
 import { ITEMS_TABLE_CONTAINER_HEIGHT } from '../../config/constants';
 import i18n, {
@@ -33,6 +34,7 @@ import { hooks, mutations } from '../../config/queryClient';
 import { buildItemsTableRowId } from '../../config/selectors';
 import { BUILDER } from '../../langs/constants';
 import { useCurrentUserContext } from '../context/CurrentUserContext';
+import DropzoneHelper from '../file/DropzoneHelper';
 import FolderDescription from '../item/FolderDescription';
 import ActionsCellRenderer from '../table/ActionsCellRenderer';
 import BadgesCellRenderer, { ItemsStatuses } from '../table/BadgesCellRenderer';
@@ -68,6 +70,7 @@ export type ItemsTableProps = {
   totalCount?: number;
   onSortChanged?: (e: SortChangedEvent) => void;
   pageSize?: number;
+  showDropzoneHelper?: boolean;
 };
 
 const ItemsTable = ({
@@ -91,6 +94,7 @@ const ItemsTable = ({
   totalCount,
   onSortChanged,
   pageSize,
+  showDropzoneHelper = false,
 }: ItemsTableProps): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
   const { t: translateCommon } = useCommonTranslation();
@@ -270,6 +274,10 @@ const ItemsTable = ({
       count: selected.length,
     });
 
+  const { data: itemPermission } = useGetPermissionForItem(parentItem);
+  const shouldShowDropzoneHelper = showDropzoneHelper && rows?.length === 0;
+  const canEditItem = itemPermission === 'admin' || itemPermission === 'write';
+
   return (
     <>
       <ItemsToolbar
@@ -279,33 +287,37 @@ const ItemsTable = ({
         onShowOnlyMeChange={onShowOnlyMeChange}
         showOnlyMe={showOnlyMe}
       />
-      <GraaspTable
-        onSortChanged={onSortChanged}
-        id={tableId}
-        columnDefs={columnDefs}
-        tableHeight={ITEMS_TABLE_CONTAINER_HEIGHT}
-        rowData={rows}
-        emptyMessage={translateBuilder(BUILDER.ITEMS_TABLE_EMPTY_MESSAGE)}
-        onDragEnd={onDragEnd}
-        onCellClicked={onCellClicked}
-        getRowId={getRowNodeId}
-        isClickable={clickable}
-        enableDrag={canDrag()}
-        // kinda duplicate props but it needs to be enabled for ui
-        rowDragManaged={canDrag()}
-        rowDragText={itemRowDragText}
-        ToolbarActions={ToolbarActions}
-        pagination
-        page={Math.max(0, page - 1)}
-        onPageChange={(e, newPage) => {
-          setPage?.(newPage + 1);
-        }}
-        countTextFunction={countTextFunction}
-        totalCount={totalCount}
-        // has to be fixed, otherwise the pagination is false on the last page
-        // rows can contain less for the last page
-        pageSize={pageSize ?? rows.length}
-      />
+      {shouldShowDropzoneHelper && (!parentItem || canEditItem) ? (
+        <DropzoneHelper />
+      ) : (
+        <GraaspTable
+          onSortChanged={onSortChanged}
+          id={tableId}
+          columnDefs={columnDefs}
+          tableHeight={ITEMS_TABLE_CONTAINER_HEIGHT}
+          rowData={rows}
+          emptyMessage={translateBuilder(BUILDER.ITEMS_TABLE_EMPTY_MESSAGE)}
+          onDragEnd={onDragEnd}
+          onCellClicked={onCellClicked}
+          getRowId={getRowNodeId}
+          isClickable={clickable}
+          enableDrag={canDrag()}
+          // kinda duplicate props but it needs to be enabled for ui
+          rowDragManaged={canDrag()}
+          rowDragText={itemRowDragText}
+          ToolbarActions={ToolbarActions}
+          pagination
+          page={Math.max(0, page - 1)}
+          onPageChange={(e, newPage) => {
+            setPage?.(newPage + 1);
+          }}
+          countTextFunction={countTextFunction}
+          totalCount={totalCount}
+          // has to be fixed, otherwise the pagination is false on the last page
+          // rows can contain less for the last page
+          pageSize={pageSize ?? rows.length}
+        />
+      )}
     </>
   );
 };

src/components/pages/HomeScreen.tsx

@@ -106,7 +106,7 @@ const HomeLoadableContent = (): JSX.Element => {
     return (
       <UppyContextProvider enable={isSuccess}>
         <FileUploader />
-        <Box m={2}>
+        <Box p={2} height="100%">
           <ItemHeader showNavigation={false} />
           <Items
             id={ACCESSIBLE_ITEMS_TABLE_ID}
@@ -124,6 +124,7 @@ const HomeLoadableContent = (): JSX.Element => {
             totalCount={accessibleItems.totalCount}
             onSortChanged={onSortChanged}
             pageSize={ITEM_PAGE_SIZE}
+            showDropzoneHelper
           />
           {isFetching && (
             <Box sx={{ width: '100%' }}>

src/config/selectors.ts

@@ -349,9 +349,12 @@ export const ACCESSIBLE_ITEMS_TABLE_ID = 'accessibleItemsTable';
 export const ACCESSIBLE_ITEMS_NEXT_PAGE_BUTTON_SELECTOR = `#${ACCESSIBLE_ITEMS_TABLE_ID} [data-testid="KeyboardArrowRightIcon"]`;
 export const MY_GRAASP_ITEM_PATH = 'myGraaspItemPath';
 export const LANGUAGE_SELECTOR_ID = 'languageSelector';
+
 export const LAYOUT_MODE_BUTTON_ID = 'layoutModeButton';
 export const ITEM_SETTING_DESCRIPTION_PLACEMENT_SELECT_ID =
   'itemSettingDescriptionPlacementSelect';
 export const buildDescriptionPlacementId = (
   placement: DescriptionPlacementType,
 ): string => `itemSettingDescriptionPlacement-${placement}`;
+
+export const DROPZONE_HELPER_ID = 'dropzoneHelper';

src/langs/constants.ts

@@ -51,6 +51,10 @@ export const BUILDER = {
   DOCUMENT_EDITOR_MODE_RAW: 'DOCUMENT_EDITOR_MODE_RAW',
   DOCUMENT_EDITOR_MODE_ARIA_LABEL: 'DOCUMENT_EDITOR_MODE_ARIA_LABEL',
   DROP_DOWN_PLACEHOLDER: 'DROP_DOWN_PLACEHOLDER',
+  DROPZONE_HELPER_TEXT: 'DROPZONE_HELPER_TEXT',
+  DROPZONE_HELPER_LIMIT_REMINDER_TEXT: 'DROPZONE_HELPER_LIMIT_REMINDER_TEXT',
+  DROPZONE_HELPER_ACTION: 'DROPZONE_HELPER_ACTION',
+  DROPZONE_HELPER_OPTIONAL_ACTION_TEXT: 'DROPZONE_HELPER_OPTIONAL_ACTION_TEXT',
   EDIT_BUTTON_TOOLTIP: 'EDIT_BUTTON_TOOLTIP',
   EDIT_FOLDER_DESCRIPTION_PLACEHOLDER: 'EDIT_FOLDER_DESCRIPTION_PLACEHOLDER',
   EDIT_ITEM_BUTTON: 'EDIT_ITEM_BUTTON',

src/langs/en.json

@@ -54,6 +54,10 @@
   "DOCUMENT_EDITOR_MODE_ARIA_LABEL": "Switch document editor mode",
   "DOWNLOAD_ITEM_BUTTON": "Download",
   "DROP_DOWN_PLACEHOLDER": "Please Choose From List",
+  "DROPZONE_HELPER_TEXT": "Drop your files here to upload",
+  "DROPZONE_HELPER_LIMIT_REMINDER_TEXT": "Max 15 files of 1GB",
+  "DROPZONE_HELPER_ACTION": "Browse Files",
+  "DROPZONE_HELPER_OPTIONAL_ACTION_TEXT": "or",
   "EDIT_BUTTON_TOOLTIP": "Edit",
   "EDIT_FOLDER_DESCRIPTION_PLACEHOLDER": "Write the folder description here…",
   "EDIT_ITEM_BUTTON": "Edit",