feat(dropzone): add helper texts

feat(dropzone): modify parent divs heights feat(dropzone): add dropzone helper feat(dropzone): modify text fix(dropzone): hide dropzone in favorite screen feat(dropzone): add prop to control dropzone helper visibility fix(dropzone): modify redirection test to match dropzone behavior fix(dropzone): add id, change styles and texts feat: update mode button, refactor (#1030) * refactor: update mode button, refactor * refactor: apply PR requested changes * refactor: update cypress * refactor: mock item layout in commands * refactor: import automatically env in cypress * refactor: env in cypress * refactor: import VITE_GRAASP_REDIRECTION_HOST * refactor: use cypress baseurl feat: move the description in ItemsToolbar to display it directly below the title (#1045) chore(deps): update eslint packages (#1034) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> fix(deps): update ag-grid monorepo to v31.1.1 (#1035) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> fix(deps): update dependency @emotion/react to v11.11.4 (#1036) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> fix(deps): update dependency @sentry/react to v7.105.0 (#1037) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> fix(deps): update react-router monorepo to v6.22.2 (#1023) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> fix(deps): update mui (non-major) (#884) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> fix: remove qs dependency (#1041) * fix: remove qs dependency * fix: update deps chore(deps): update yarn to v4.1.1 (#1052) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> chore(deps): update eslint packages to v7.1.1 (#1051) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> fix: remove duplicate none doc flavor (#1055) chore(main): release 2.9.0 (#1043) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> fix(deps): update dependency @graasp/ui to v4.8.5 (#1046) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> chore(main): release 2.9.1 (#1062) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> fix: revert previous published item layout (#1058) * fix: revert previous published item layout * refactor: fix publish button chore(main): release 2.9.2 (#1063) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> fix: fix mobile platform switch colors (#1064) chore(main): release 2.9.3 (#1065) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> fix: invert colors for mobile platform switch (#1066) chore(main): release 2.9.4 (#1069) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> feat(dropzone): hide dropzone when use has no permission fix(dropzone): home screen styling test(dropzone): add dropzone tests
graasp · Mar 11, 2024 · bfc4e2f · bfc4e2f
1 parent d05cea2
commit bfc4e2f
Show file tree

Hide file tree

Showing 12 changed files with 171 additions and 30 deletions.
diff --git a/CHANGELOG.md b/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)
 
 

diff --git a/cypress/e2e/item/upload/dropzoneUpload.cy.ts b/cypress/e2e/item/upload/dropzoneUpload.cy.ts
@@ -0,0 +1,29 @@
+import { buildItemPath } from '@/config/paths';
+import { DROPZONE_HELPER_ID } from '@/config/selectors';
+
+import { SAMPLE_ITEMS, SAMPLE_PUBLIC_ITEMS } from '../../../fixtures/items';
+
+describe('home screen - dropzone helper visibility', () => {
+  beforeEach(() => {
+    cy.setUpApi();
+  });
+
+  it('should display dropzone helper on the home screen when no items', () => {
+    cy.visit('/');
+    cy.get(`#${DROPZONE_HELPER_ID}`).should('be.visible');
+  });
+});
+
+describe('empty folder - dropzone helper visibility', () => {
+  it('user logs in - show dropzone helper when no items', () => {
+    cy.setUpApi(SAMPLE_ITEMS);
+    cy.visit(buildItemPath(SAMPLE_ITEMS.items[1].id));
+    cy.get(`#${DROPZONE_HELPER_ID}`).should('be.visible');
+  });
+
+  it('user logs out - hide dropzone helper', () => {
+    cy.setUpApi({ ...SAMPLE_PUBLIC_ITEMS, currentMember: null });
+    cy.visit(buildItemPath(SAMPLE_PUBLIC_ITEMS.items[2].id));
+    cy.get(`#${DROPZONE_HELPER_ID}`).should('not.exist');
+  });
+});
diff --git a/cypress/e2e/redirection.cy.ts b/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);
 

diff --git a/src/components/file/DropzoneHelper.tsx b/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;
diff --git a/src/components/item/ItemContent.tsx b/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
     />
   );
 };

diff --git a/src/components/item/ItemMain.tsx b/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

diff --git a/src/components/main/Items.tsx b/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}
         />
       );
   }

diff --git a/src/components/main/ItemsTable.tsx b/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}
+        />
+      )}
     </>
   );
 };

diff --git a/src/components/pages/HomeScreen.tsx b/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%' }}>

diff --git a/src/config/selectors.ts b/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';
diff --git a/src/langs/constants.ts b/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',

diff --git a/src/langs/en.json b/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",