fix: make new item modal the same and udpate deps

graasp · Apr 5, 2024 · 4ff109e · 4ff109e
1 parent 88e4cb0
commit 4ff109e
Show file tree

Hide file tree

Showing 11 changed files with 161 additions and 136 deletions.
diff --git a/package.json b/package.json
@@ -21,10 +21,10 @@
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "3.1.0",
     "@graasp/map": "1.5.0",
-    "@graasp/query-client": "github:graasp/graasp-query-client#710-add-displayName-payload",
+    "@graasp/query-client": "3.2.1",
     "@graasp/sdk": "github:graasp/graasp-sdk#453-add-display-name",
     "@graasp/translations": "1.25.3",
-    "@graasp/ui": "github:graasp/graasp-ui#reduce-font-size-in-new-theme",
+    "@graasp/ui": "4.14.1",
     "@mui/icons-material": "5.15.11",
     "@mui/lab": "5.0.0-alpha.166",
     "@mui/material": "5.15.11",

diff --git a/src/components/file/FileDashboardUploader.tsx b/src/components/file/FileDashboardUploader.tsx
@@ -40,9 +40,6 @@ const FileDashboardUploader = ({ onComplete }: Props): JSX.Element => {
 
   return (
     <>
-      <Typography variant="h6">
-        {translateBuilder(BUILDER.UPLOAD_FILE_TITLE)}
-      </Typography>
       <Typography variant="body1" paragraph>
         {translateBuilder(BUILDER.UPLOAD_FILE_INFORMATIONS)}
       </Typography>

diff --git a/src/components/item/form/AppForm.tsx b/src/components/item/form/AppForm.tsx
@@ -113,7 +113,10 @@ const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
     // there is no new value to use
     if (!newValue) {
       // unset the name and the url in the extra
-      onChange({ name: undefined, extra: undefined });
+      onChange({
+        name: undefined,
+        extra: undefined,
+      });
     }
   };
 
@@ -127,78 +130,77 @@ const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
     handleAppSelection(null);
   };
 
+  if (isCustomApp) {
+    return (
+      <Stack direction="column" alignItems="start" mt={1} spacing={2}>
+        <Button
+          startIcon={<ArrowBack fontSize="small" />}
+          variant="text"
+          onClick={() => {
+            setIsCustomApp(false);
+            handleAppSelection(null);
+          }}
+        >
+          {translateBuilder(BUILDER.CREATE_NEW_APP_BACK_TO_APP_LIST_BUTTON)}
+        </Button>
+        <Typography>
+          {translateBuilder(BUILDER.CREATE_CUSTOM_APP_HELPER_TEXT)}
+        </Typography>
+        <TextField
+          id={CUSTOM_APP_URL_ID}
+          fullWidth
+          variant="standard"
+          autoFocus
+          label={translateBuilder(BUILDER.APP_URL)}
+          onChange={(e) =>
+            // todo: use better type here (partial of discriminated item is not a good type)
+
+            onChange({ extra: buildAppExtra({ url: e.target.value }) })
+          }
+          value={currentUrl}
+        />
+        <NameForm
+          setChanges={onChange}
+          updatedProperties={updatedProperties}
+          autoFocus={false}
+        />
+      </Stack>
+    );
+  }
   return (
-    <Stack direction="column" height="100%" spacing={2}>
-      <Typography variant="h6">
-        {translateBuilder(BUILDER.CREATE_NEW_ITEM_APP_TITLE)}
-      </Typography>
-
-      {isCustomApp ? (
-        <Stack direction="column" alignItems="start" mt={1} spacing={2}>
-          <Button
-            startIcon={<ArrowBack fontSize="small" />}
-            variant="text"
-            onClick={() => {
-              setIsCustomApp(false);
-              handleAppSelection(null);
-            }}
-          >
-            {translateBuilder(BUILDER.CREATE_NEW_APP_BACK_TO_APP_LIST_BUTTON)}
-          </Button>
-          <Typography>
-            {translateBuilder(BUILDER.CREATE_CUSTOM_APP_HELPER_TEXT)}
-          </Typography>
-          <TextField
-            id={CUSTOM_APP_URL_ID}
-            fullWidth
-            variant="standard"
-            autoFocus
-            label={translateBuilder(BUILDER.APP_URL)}
-            onChange={(e) =>
-              // todo: use better type here (partial of discriminated item is not a good type)
-
-              onChange({ extra: buildAppExtra({ url: e.target.value }) })
-            }
-            value={currentUrl}
+    <Stack direction="column" height="100%" spacing={2} minHeight="0px">
+      <TextField
+        fullWidth
+        placeholder={translateBuilder('Search for an app')}
+        variant="outlined"
+        autoFocus
+        size="small"
+        onChange={searchAnApp}
+      />
+      <Box display="flex" flexGrow={1} minHeight="0px" overflow="scroll" p={1}>
+        <Grid2
+          container
+          spacing={2}
+          height="max-content"
+          maxHeight={400}
+          alignItems="stretch"
+        >
+          <AppGrid
+            currentUrl={currentUrl}
+            handleSelection={handleAppSelection}
+            searchQuery={searchQuery}
           />
-        </Stack>
-      ) : (
-        <>
-          <TextField
-            fullWidth
-            placeholder={translateBuilder('Search for an app')}
-            variant="outlined"
-            autoFocus
-            size="small"
-            onChange={searchAnApp}
+          <AppCard
+            id={CUSTOM_APP_CYPRESS_ID}
+            name={translateBuilder(BUILDER.CREATE_CUSTOM_APP)}
+            description={translateBuilder(
+              BUILDER.CREATE_CUSTOM_APP_DESCRIPTION,
+            )}
+            image={addNewImage}
+            onClick={addCustomApp}
           />
-          <Box display="flex" flexGrow={1}>
-            <Grid2
-              container
-              spacing={2}
-              height="max-content"
-              maxHeight={400}
-              alignItems="stretch"
-              overflow="auto"
-            >
-              <AppGrid
-                currentUrl={currentUrl}
-                handleSelection={handleAppSelection}
-                searchQuery={searchQuery}
-              />
-              <AppCard
-                id={CUSTOM_APP_CYPRESS_ID}
-                name={translateBuilder(BUILDER.CREATE_CUSTOM_APP)}
-                description={translateBuilder(
-                  BUILDER.CREATE_CUSTOM_APP_DESCRIPTION,
-                )}
-                image={addNewImage}
-                onClick={addCustomApp}
-              />
-            </Grid2>
-          </Box>
-        </>
-      )}
+        </Grid2>
+      </Box>
       <NameForm
         setChanges={onChange}
         updatedProperties={updatedProperties}

diff --git a/src/components/item/form/BaseItemForm.tsx b/src/components/item/form/BaseItemForm.tsx
@@ -10,7 +10,7 @@ const BaseItemForm = ({
   updatedProperties,
   setChanges,
 }: EditModalContentPropType): JSX.Element => (
-  <>
+  <Box overflow="auto">
     <NameForm
       setChanges={setChanges}
       item={item}
@@ -26,7 +26,7 @@ const BaseItemForm = ({
         setChanges={setChanges}
       />
     </Box>
-  </>
+  </Box>
 );
 
 export default BaseItemForm;
diff --git a/src/components/item/form/DocumentForm.tsx b/src/components/item/form/DocumentForm.tsx
@@ -297,7 +297,7 @@ const DocumentForm = ({
   }, [content, flavor, isRaw]);
 
   return (
-    <Box id="document" display="flex" flexDirection="column" minHeight="0px">
+    <Box id="document" display="flex" flexDirection="column" overflow="auto">
       <Stack direction="row" spacing={2}>
         <NameForm
           setChanges={setChanges}

diff --git a/src/components/item/form/EtherpadForm.tsx b/src/components/item/form/EtherpadForm.tsx
@@ -16,9 +16,6 @@ const useEtherpadForm = (): {
     const { t: translateBuilder } = useBuilderTranslation();
     return (
       <>
-        <Typography variant="h6">
-          {translateBuilder(BUILDER.CREATE_NEW_ITEM_ETHERPAD_TITLE)}
-        </Typography>
         <Typography variant="body1" paragraph>
           {translateBuilder(BUILDER.CREATE_NEW_ITEM_ETHERPAD_INFORMATIONS)}
         </Typography>

diff --git a/src/components/item/form/LinkForm.tsx b/src/components/item/form/LinkForm.tsx
@@ -1,4 +1,4 @@
-import { TextField, TextFieldProps, Typography } from '@mui/material';
+import { TextField, TextFieldProps } from '@mui/material';
 
 import { LinkItemType, buildLinkExtra, getLinkExtra } from '@graasp/sdk';
 
@@ -39,25 +39,20 @@ const LinkForm = ({ onChange, item }: Props): JSX.Element => {
   const isLinkInvalid = Boolean(url?.length) && !isUrlValid(url);
 
   return (
-    <>
-      <Typography variant="h6">
-        {translateBuilder(BUILDER.CREATE_ITEM_LINK_TITLE)}
-      </Typography>
-      <TextField
-        id={ITEM_FORM_LINK_INPUT_ID}
-        error={isLinkInvalid}
-        autoFocus
-        margin="dense"
-        label={translateBuilder(BUILDER.CREATE_ITEM_LINK_LABEL)}
-        value={url}
-        onChange={handleLinkInput}
-        helperText={
-          Boolean(isLinkInvalid) &&
-          translateBuilder(BUILDER.CREATE_ITEM_LINK_INVALID_LINK_ERROR)
-        }
-        fullWidth
-      />
-    </>
+    <TextField
+      id={ITEM_FORM_LINK_INPUT_ID}
+      error={isLinkInvalid}
+      autoFocus
+      margin="dense"
+      label={translateBuilder(BUILDER.CREATE_ITEM_LINK_LABEL)}
+      value={url}
+      onChange={handleLinkInput}
+      helperText={
+        Boolean(isLinkInvalid) &&
+        translateBuilder(BUILDER.CREATE_ITEM_LINK_INVALID_LINK_ERROR)
+      }
+      fullWidth
+    />
   );
 };
 

diff --git a/src/components/main/ImportH5P.jsx b/src/components/main/ImportH5P.jsx
@@ -3,7 +3,7 @@ import '@uppy/dashboard/dist/style.css';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
-import { Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 
 import { routines } from '@graasp/query-client';
 import { MAX_ZIP_FILE_SIZE } from '@graasp/sdk';
@@ -67,10 +67,7 @@ const ImportH5P = () => {
   }
 
   return (
-    <>
-      <Typography variant="h6">
-        {translateBuilder(BUILDER.IMPORT_H5P_TITLE)}
-      </Typography>
+    <Box overflow="auto">
       <Typography variant="body" paragraph>
         {translateBuilder(BUILDER.IMPORT_H5P_INFORMATIONS)}
       </Typography>
@@ -90,7 +87,7 @@ const ImportH5P = () => {
           proudlyDisplayPoweredByUppy={false}
         />
       </div>
-    </>
+    </Box>
   );
 };
 

diff --git a/src/components/main/ImportZip.jsx b/src/components/main/ImportZip.jsx
@@ -3,7 +3,7 @@ import '@uppy/dashboard/dist/style.css';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
-import { Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 
 import { routines } from '@graasp/query-client';
 import { MAX_ZIP_FILE_SIZE } from '@graasp/sdk';
@@ -68,10 +68,7 @@ const ImportZip = () => {
   }
 
   return (
-    <>
-      <Typography variant="h6">
-        {translateBuilder(BUILDER.IMPORT_ZIP_TITLE)}
-      </Typography>
+    <Box overflow="auto">
       <Typography variant="body" paragraph>
         {translateBuilder(BUILDER.IMPORT_ZIP_INFORMATION)}
       </Typography>
@@ -91,7 +88,7 @@ const ImportZip = () => {
           proudlyDisplayPoweredByUppy={false}
         />
       </div>
-    </>
+    </Box>
   );
 };