fix: improve settings page and overall (#1184)

* fix: update settings * fix: remove white boxes * fix: update translations * fix: arabic * fix: tests for formatted file size * fix: make requested changes * fix: thumbnail test and folder card look * fix: pagination tests * fix: add mimetype on browse file for dropzone
graasp · Apr 26, 2024 · 0f3cb22 · 0f3cb22
1 parent 310c255
commit 0f3cb22
Show file tree

Hide file tree

Showing 32 changed files with 693 additions and 365 deletions.
diff --git a/cypress/e2e/item/home/home.cy.ts b/cypress/e2e/item/home/home.cy.ts
@@ -1,3 +1,5 @@
+import { ITEM_PAGE_SIZE } from '@/config/constants';
+
 import i18n, { BUILDER_NAMESPACE } from '../../../../src/config/i18n';
 import { HOME_PATH, ITEMS_PATH } from '../../../../src/config/paths';
 import {
@@ -101,7 +103,7 @@ describe('Home', () => {
       describe('Pagination', () => {
         const checkGridPagination = (
           items: ItemForTest[],
-          itemsPerPage: number = 10,
+          itemsPerPage: number = ITEM_PAGE_SIZE,
         ) => {
           const numberPages = Math.ceil(items.length / itemsPerPage);
 
@@ -305,17 +307,16 @@ describe('Home', () => {
       });
 
       describe('Pagination', () => {
-        const itemsPerPage = 10;
         const items = generateOwnItems(30);
-        const numberPages = Math.ceil(items.length / itemsPerPage);
+        const numberPages = Math.ceil(items.length / ITEM_PAGE_SIZE);
 
         it('shows only items of each page', () => {
           // for each page
           for (let i = 0; i < numberPages; i += 1) {
             // compute items that should be on this page
             const shouldDisplay = items.slice(
-              i * itemsPerPage,
-              (i + 1) * itemsPerPage,
+              i * ITEM_PAGE_SIZE,
+              (i + 1) * ITEM_PAGE_SIZE,
             );
             // compute items that should not be on this page
             const shouldNotDisplay = items.filter(

diff --git a/cypress/e2e/item/settings/itemSettings.cy.ts b/cypress/e2e/item/settings/itemSettings.cy.ts
@@ -2,6 +2,7 @@ import {
   DescriptionPlacement,
   ItemType,
   MaxWidth,
+  formatFileSize,
   getFileExtra,
 } from '@graasp/sdk';
 import { langs } from '@graasp/translations';
@@ -129,7 +130,7 @@ describe('Item Settings', () => {
           const { mimetype, size } = getFileExtra(extra);
           cy.get(`#${ITEM_PANEL_TABLE_ID}`).contains(mimetype);
 
-          cy.get(`#${ITEM_PANEL_TABLE_ID}`).contains(size);
+          cy.get(`#${ITEM_PANEL_TABLE_ID}`).contains(formatFileSize(size));
         }
       });
     });

diff --git a/cypress/e2e/item/view/viewThumbnails.cy.ts b/cypress/e2e/item/view/viewThumbnails.cy.ts
@@ -8,7 +8,6 @@ import { ItemLayoutMode } from '../../../../src/enums';
 import { MEMBERS } from '../../../fixtures/members';
 import { SAMPLE_ITEMS_WITH_THUMBNAILS } from '../../../fixtures/thumbnails';
 
-// THESE TESTS ARE SKIPPED SINCE THEY FAIL IN CI
 describe('View Thumbnails', () => {
   it(`display thumbnail icons`, () => {
     cy.setUpApi(SAMPLE_ITEMS_WITH_THUMBNAILS);
@@ -26,9 +25,8 @@ describe('View Thumbnails', () => {
 
     // GRID
     cy.switchMode(ItemLayoutMode.Grid);
-    cy.get(`#${buildItemCard(items[0].id)} img`)
-      .should('have.attr', 'src')
-      .and('contain', 'data:');
+    // first element has default folder svg
+    cy.get(`#${buildItemCard(items[0].id)} svg path`).should('exist');
 
     cy.get(`#${buildItemCard(items[1].id)} img`)
       .should('have.attr', 'src')

diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "@graasp/query-client": "3.5.0",
     "@graasp/sdk": "4.7.6",
     "@graasp/translations": "1.27.0",
-    "@graasp/ui": "4.15.1",
+    "@graasp/ui": "4.15.3",
     "@mui/icons-material": "5.15.15",
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "5.15.15",
@@ -50,6 +50,7 @@
     "lodash.isequal": "4.5.0",
     "lodash.partition": "4.6.0",
     "lodash.truncate": "4.4.2",
+    "lucide-react": "0.373.0",
     "papaparse": "5.4.1",
     "react": "18.2.0",
     "react-beautiful-dnd": "13.1.1",

diff --git a/src/components/common/MemberAvatar.tsx b/src/components/common/MemberAvatar.tsx
@@ -5,21 +5,18 @@ import { Avatar } from '@graasp/ui';
 import { AVATAR_ICON_HEIGHT } from '../../config/constants';
 import { useCommonTranslation } from '../../config/i18n';
 import { hooks } from '../../config/queryClient';
-import { buildMemberAvatarClass } from '../../config/selectors';
-import defaultImage from '../../resources/avatar.png';
+import { buildMemberAvatarId } from '../../config/selectors';
 
 type Props = {
   id?: string;
   maxWidth?: number;
   maxHeight?: number;
-  component?: string;
 };
 
 const MemberAvatar = ({
   id,
   maxWidth = AVATAR_ICON_HEIGHT,
   maxHeight = AVATAR_ICON_HEIGHT,
-  component = 'avatar',
 }: Props): JSX.Element => {
   const { t } = useCommonTranslation();
   const { data: member, isLoading } = hooks.useMember(id);
@@ -29,11 +26,11 @@ const MemberAvatar = ({
   });
   return (
     <Avatar
-      url={avatarUrl ?? defaultImage}
+      id={buildMemberAvatarId(member?.id)}
+      url={avatarUrl}
       isLoading={isLoading || isLoadingAvatar}
-      className={buildMemberAvatarClass(member?.id)}
       alt={member?.name ?? t(COMMON.AVATAR_DEFAULT_ALT)}
-      component={component}
+      component="avatar"
       maxWidth={maxWidth}
       maxHeight={maxHeight}
       sx={{ mx: 1 }}

diff --git a/src/components/file/DropzoneHelper.tsx b/src/components/file/DropzoneHelper.tsx
@@ -2,12 +2,13 @@ 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 { Box, Button, Stack, Typography } from '@mui/material';
 
 import { useBuilderTranslation } from '@/config/i18n';
 import { DROPZONE_HELPER_ID } from '@/config/selectors';
 import { BUILDER } from '@/langs/constants';
 
+import NewItemButton from '../main/NewItemButton';
 import { UppyContext } from './UppyContext';
 
 const DropzoneHelper = (): JSX.Element => {
@@ -30,7 +31,7 @@ const DropzoneHelper = (): JSX.Element => {
         // 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 }),
+          uppy?.addFile({ data: file, name: file.name, type: file.type }),
         );
       } else {
         console.error('no files found !');
@@ -55,24 +56,30 @@ const DropzoneHelper = (): JSX.Element => {
       <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 direction="row" gap={2}>
+        <Stack alignItems="center" gap={1}>
+          <Button
+            variant="contained"
+            onClick={handleClick}
+            startIcon={<FolderOutlinedIcon />}
+          >
+            {t(BUILDER.DROPZONE_HELPER_ACTION)}
+          </Button>
+          <input
+            style={{ display: 'none' }}
+            type="file"
+            multiple
+            ref={ref}
+            onChange={handleFiles}
+          />
+          <Typography variant="caption" color="text.secondary">
+            {t(BUILDER.DROPZONE_HELPER_LIMIT_REMINDER_TEXT)}
+          </Typography>
+        </Stack>
+        <Box>
+          <NewItemButton />
+        </Box>
+      </Stack>
     </Stack>
   );
 };

diff --git a/src/components/item/form/AppForm.tsx b/src/components/item/form/AppForm.tsx
@@ -171,7 +171,7 @@ const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
     <Stack direction="column" height="100%" spacing={2} minHeight="0px">
       <TextField
         fullWidth
-        placeholder={translateBuilder('Search for an app')}
+        placeholder={translateBuilder(BUILDER.CREATE_APP_SEARCH_FIELD_HELPER)}
         variant="outlined"
         autoFocus
         size="small"

diff --git a/src/components/item/publish/CustomizedTagsEdit.tsx b/src/components/item/publish/CustomizedTagsEdit.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 
-import { Chip, Stack, TextField, Typography } from '@mui/material';
+import { Box, Chip, Stack, TextField, Typography } from '@mui/material';
 import type { TextFieldProps } from '@mui/material';
 
 import { DiscriminatedItem } from '@graasp/sdk';
 import { COMMON } from '@graasp/translations';
-import { Loader, SaveButton } from '@graasp/ui';
+import { SaveButton } from '@graasp/ui';
 
 import {
   useBuilderTranslation,
@@ -18,7 +18,6 @@ import {
   buildCustomizedTagsSelector,
 } from '../../../config/selectors';
 import { BUILDER } from '../../../langs/constants';
-import { useCurrentUserContext } from '../../context/CurrentUserContext';
 
 type Props = { item: DiscriminatedItem; disabled?: boolean };
 
@@ -27,11 +26,7 @@ const CustomizedTagsEdit = ({ item, disabled }: Props): JSX.Element => {
   const { t: translateCommon } = useCommonTranslation();
   const { mutate: updateCustomizedTags } = mutations.useEditItem();
 
-  // user
-  const { isLoading: isMemberLoading } = useCurrentUserContext();
-
-  const settings = item?.settings;
-  const itemId = item?.id;
+  const { settings, id: itemId } = item;
 
   const [displayValues, setDisplayValues] = useState<string>();
 
@@ -41,8 +36,6 @@ const CustomizedTagsEdit = ({ item, disabled }: Props): JSX.Element => {
     }
   }, [settings]);
 
-  if (isMemberLoading) return <Loader />;
-
   const handleChange: TextFieldProps['onChange'] = (event) => {
     setDisplayValues(event.target.value);
   };
@@ -60,13 +53,15 @@ const CustomizedTagsEdit = ({ item, disabled }: Props): JSX.Element => {
   };
 
   return (
-    <>
-      <Typography variant="h6" mt={2}>
-        {translateBuilder(BUILDER.ITEM_TAGS_TITLE)}
-      </Typography>
-      <Typography variant="body1">
-        {translateBuilder(BUILDER.ITEM_TAGS_INFORMATION)}
-      </Typography>
+    <Stack gap={1}>
+      <Box>
+        <Typography variant="h4">
+          {translateBuilder(BUILDER.ITEM_TAGS_TITLE)}
+        </Typography>
+        <Typography variant="body1">
+          {translateBuilder(BUILDER.ITEM_TAGS_INFORMATION)}
+        </Typography>
+      </Box>
       <Stack direction="row" alignItems="center" spacing={1}>
         <Stack flexGrow={1}>
           <TextField
@@ -76,9 +71,9 @@ const CustomizedTagsEdit = ({ item, disabled }: Props): JSX.Element => {
             defaultValue={displayValues}
             onChange={handleChange}
             id={ITEM_TAGS_EDIT_INPUT_ID}
-            sx={{ mt: 1, mb: 1 }}
             disabled={disabled}
             fullWidth
+            size="small"
             placeholder={translateBuilder(BUILDER.ITEM_TAGS_PLACEHOLDER)}
           />
         </Stack>
@@ -108,7 +103,7 @@ const CustomizedTagsEdit = ({ item, disabled }: Props): JSX.Element => {
           </Stack>
         </>
       )}
-    </>
+    </Stack>
   );
 };
 

diff --git a/src/components/item/settings/AdminChatSettings.tsx b/src/components/item/settings/AdminChatSettings.tsx
@@ -1,14 +1,12 @@
-import { Stack, Typography } from '@mui/material';
-
 import { DiscriminatedItem, PermissionLevel } from '@graasp/sdk';
 
 import { useBuilderTranslation } from '@/config/i18n';
 import { BUILDER } from '@/langs/constants';
 
-import { hooks, mutations } from '../../../config/queryClient';
-import { ButtonVariants } from '../../../enums';
+import { hooks } from '../../../config/queryClient';
 import { useCurrentUserContext } from '../../context/CurrentUserContext';
 import ClearChatButton from './ClearChatButton';
+import ItemSettingProperty from './ItemSettingProperty';
 
 type Props = {
   item: DiscriminatedItem;
@@ -25,23 +23,17 @@ const AdminChatSettings = ({ item }: Props): JSX.Element | null => {
     ? itemPermissions?.find((perms) => perms.member.id === currentMember.id)
         ?.permission === PermissionLevel.Admin
     : false;
-  const { mutate: clearChatHook } = mutations.useClearItemChat();
 
   if (!isAdmin || isLoadingItemPermissions) {
     return null;
   }
 
   return (
-    <Stack direction="column" spacing={1} mt={1}>
-      <Typography variant="h6">
-        {t(BUILDER.ITEM_SETTINGS_CHAT_SETTINGS_TITLE)}
-      </Typography>
-      <ClearChatButton
-        variant={ButtonVariants.Button}
-        chatId={itemId}
-        clearChat={clearChatHook}
-      />
-    </Stack>
+    <ItemSettingProperty
+      title={t(BUILDER.ITEM_SETTINGS_CHAT_SETTINGS_TITLE)}
+      valueText={t(BUILDER.ITEM_SETTINGS_CLEAR_CHAT_EXPLANATION)}
+      inputSetting={<ClearChatButton chatId={itemId} />}
+    />
   );
 };