fix: improve settings page and overall

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));
         }
       });
     });

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": "github:graasp/graasp-ui#update-table-for-background",
     "@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",

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 }}

src/components/file/DropzoneHelper.tsx

@@ -8,6 +8,7 @@ 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 => {
@@ -55,24 +56,35 @@ 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)}
+      <Stack alignItems="center" gap={1}>
+        <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" color="text.secondary">
+          {t(BUILDER.DROPZONE_HELPER_LIMIT_REMINDER_TEXT)}
+        </Typography>
+      </Stack>
+      <Typography variant="h5" color="text.secondary">
+        {t(BUILDER.DROPZONE_HELPER_OPTIONAL_ACTION_TEXT)}
       </Typography>
+      <Stack alignItems="center" gap={1}>
+        <Typography variant="body1" color="text.secondary">
+          {t(BUILDER.NEW_ITEM_BUTTON_HELPER_TEXT)}
+        </Typography>
+        <NewItemButton />
+      </Stack>
     </Stack>
   );
 };

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"

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,21 @@ 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}
+      // bgcolor="white"
+      // p={2}
+      // borderRadius={2}
+      // border="1px solid #ddd"
+    >
+      <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 +77,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 +109,7 @@ const CustomizedTagsEdit = ({ item, disabled }: Props): JSX.Element => {
           </Stack>
         </>
       )}
-    </>
+    </Stack>
   );
 };
 

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} />}
+    />
   );
 };
 

src/components/item/settings/ClearChatButton.tsx

@@ -7,15 +7,14 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  IconButton,
   Stack,
-  Tooltip,
   Typography,
 } from '@mui/material';
 
 import { CHATBOX } from '@graasp/translations';
 import { Button } from '@graasp/ui';
 
+import { mutations } from '@/config/queryClient';
 import { BUILDER } from '@/langs/constants';
 
 import {
@@ -28,69 +27,38 @@ import {
   CLEAR_CHAT_DIALOG_ID,
   CLEAR_CHAT_SETTING_ID,
 } from '../../../config/selectors';
-import { ButtonVariants } from '../../../enums';
 
 type Props = {
   chatId: string;
-  clearChat?: (chatId: string) => void;
-  variant: ButtonVariants;
 };
 
-const ClearChatButton = ({
-  chatId,
-  clearChat,
-  variant = ButtonVariants.Button,
-}: Props): JSX.Element | null => {
+const ClearChatButton = ({ chatId }: Props): JSX.Element | null => {
   const [openConfirmation, setOpenConfirmation] = useState(false);
   const { t } = useChatboxTranslation();
   const { t: translateBuilder } = useBuilderTranslation();
-
-  if (!clearChat) {
-    return null;
-  }
+  const { mutate: clearChat } = mutations.useClearItemChat();
 
   const handleClearChat = () => {
     clearChat(chatId);
   };
 
-  const getContent = (contentType: ButtonVariants) => {
-    const text = t(CHATBOX.CLEAR_ALL_CHAT);
-
-    switch (contentType) {
-      case ButtonVariants.IconButton:
-        return (
-          <Tooltip title={text}>
-            <IconButton
-              id={CLEAR_CHAT_SETTING_ID}
-              onClick={() => setOpenConfirmation(true)}
-            >
-              <DeleteForever color="primary" />
-            </IconButton>
-          </Tooltip>
-        );
-      case ButtonVariants.Button:
-      default:
-        return (
+  return (
+    <>
+      <Stack direction="column" spacing={2}>
+        <Typography variant="body1" maxWidth="50ch">
+          {}
+        </Typography>
+        <Box width="max-content">
           <Button
             id={CLEAR_CHAT_SETTING_ID}
             startIcon={<DeleteForever />}
             variant="outlined"
             color="error"
             onClick={() => setOpenConfirmation(true)}
           >
-            <Typography noWrap>{text}</Typography>
+            <Typography noWrap>{t(CHATBOX.CLEAR_ALL_CHAT)}</Typography>
           </Button>
-        );
-    }
-  };
-
-  return (
-    <>
-      <Stack direction="column" spacing={2}>
-        <Typography variant="body1" maxWidth="50ch">
-          {translateBuilder(BUILDER.ITEM_SETTINGS_CLEAR_CHAT_EXPLANATION)}
-        </Typography>
-        <Box width="max-content">{getContent(variant)}</Box>
+        </Box>
       </Stack>
       <Dialog open={openConfirmation} id={CLEAR_CHAT_DIALOG_ID}>
         <DialogTitle>{t(CHATBOX.CLEAR_ALL_CHAT_TITLE)}</DialogTitle>