feat: redesign 'add text' modal

cypress/e2e/item/create/createDocument.cy.ts

@@ -1,4 +1,10 @@
-import { ITEM_FORM_CONFIRM_BUTTON_ID } from '@/config/selectors';
+import {
+  CREATE_ITEM_BUTTON_ID,
+  CREATE_ITEM_DOCUMENT_ID,
+  ITEM_FORM_CONFIRM_BUTTON_ID,
+  ITEM_FORM_DISPLAY_NAME_INPUT_ID,
+  ITEM_FORM_NAME_INPUT_ID,
+} from '@/config/selectors';
 
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 import ItemLayoutMode from '../../../../src/enums/itemLayoutMode';
@@ -56,4 +62,19 @@ describe('Create Document', () => {
       true,
     );
   });
+
+  it('autoComplete document displayName', () => {
+    cy.setUpApi();
+    cy.visit(HOME_PATH);
+
+    cy.switchMode(ItemLayoutMode.List);
+
+    cy.get(`#${CREATE_ITEM_BUTTON_ID}`).click();
+    cy.get(`#${CREATE_ITEM_DOCUMENT_ID}`).click();
+    cy.get(`#${ITEM_FORM_NAME_INPUT_ID}`).type('Test Name');
+    cy.get(`#${ITEM_FORM_DISPLAY_NAME_INPUT_ID}`).should(
+      'have.value',
+      'Test Name',
+    );
+  });
 });

cypress/support/editUtils.ts

@@ -18,6 +18,7 @@ export const editItem = (
     id: string;
     type: DiscriminatedItem['type'] | string;
     name: string;
+    displayName: string;
     description: string;
   },
   mode = DEFAULT_ITEM_LAYOUT_MODE,

cypress/support/index.ts

@@ -55,7 +55,11 @@ declare global {
         options?: { confirm?: boolean },
       ): void;
       fillDocumentModal(
-        payload: { name: string; extra?: DocumentItemExtra },
+        payload: {
+          name: string;
+          displayName: string;
+          extra?: DocumentItemExtra;
+        },
         options?: { confirm?: boolean },
       ): void;
       fillAppModal(

package.json

@@ -21,10 +21,10 @@
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "3.1.0",
     "@graasp/map": "1.5.0",
-    "@graasp/query-client": "3.2.0",
-    "@graasp/sdk": "4.3.1",
+    "@graasp/query-client": "3.3.0",
+    "@graasp/sdk": "4.6.0",
     "@graasp/translations": "1.25.3",
-    "@graasp/ui": "4.14.0",
+    "@graasp/ui": "4.14.1",
     "@mui/icons-material": "5.15.11",
     "@mui/lab": "5.0.0-alpha.166",
     "@mui/material": "5.15.11",

src/components/Root.tsx

@@ -1,3 +1,4 @@
+import './styles.css';
 import '@ag-grid-community/styles/ag-grid.min.css';
 import '@ag-grid-community/styles/ag-theme-material.min.css';
 import '@uppy/core/dist/style.css';

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>

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}

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;

src/components/item/form/DisplayNameForm.tsx

@@ -0,0 +1,80 @@
+import { ChangeEvent } from 'react';
+
+import ClearIcon from '@mui/icons-material/Clear';
+import InfoIcon from '@mui/icons-material/Info';
+import {
+  IconButton,
+  Stack,
+  TextField,
+  Tooltip,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+
+import { useBuilderTranslation } from '../../../config/i18n';
+import { ITEM_FORM_DISPLAY_NAME_INPUT_ID } from '../../../config/selectors';
+import { BUILDER } from '../../../langs/constants';
+import type { EditModalContentPropType } from './EditModalWrapper';
+
+export type DisplayNameFormProps = EditModalContentPropType;
+
+const DisplayNameForm = ({
+  updatedProperties,
+  setChanges,
+}: DisplayNameFormProps): JSX.Element => {
+  const { t: translateBuilder } = useBuilderTranslation();
+  const theme = useTheme();
+  // when the screen is large, use only half of the width for the input.
+  const largeScreen = useMediaQuery(theme.breakpoints.up('sm'));
+
+  const handleDisplayNameInput = (event: ChangeEvent<{ value: string }>) => {
+    setChanges({ displayName: event.target.value });
+  };
+
+  const handleClearClick = () => {
+    setChanges({ displayName: '' });
+  };
+
+  return (
+    <TextField
+      variant="standard"
+      id={ITEM_FORM_DISPLAY_NAME_INPUT_ID}
+      label={
+        <Stack direction="row" alignItems="center">
+          {translateBuilder(BUILDER.CREATE_NEW_ITEM_DISPLAY_NAME_LABEL)}
+          <Tooltip
+            title={translateBuilder(
+              BUILDER.CREATE_NEW_ITEM_DISPLAY_NAME_HELPER_TEXT,
+            )}
+          >
+            <IconButton size="small">
+              <InfoIcon fontSize="small" color="primary" />
+            </IconButton>
+          </Tooltip>
+        </Stack>
+      }
+      value={updatedProperties?.displayName}
+      onChange={handleDisplayNameInput}
+      // always shrink because setting name from defined app does not shrink automatically
+      InputLabelProps={{ shrink: true }}
+      // add a clear icon button
+      InputProps={{
+        endAdornment: (
+          <IconButton
+            onClick={handleClearClick}
+            sx={{
+              visibility: updatedProperties?.displayName ? 'visible' : 'hidden',
+            }}
+          >
+            <ClearIcon fontSize="small" />
+          </IconButton>
+        ),
+      }}
+      // only take full width when on small screen size
+      fullWidth={!largeScreen}
+      sx={{ my: 1, width: largeScreen ? '50%' : undefined }}
+    />
+  );
+};
+
+export default DisplayNameForm;