refactor: split edit and create folder, remove setChanges (#1557)

* refactor: split edit and create folder, remove setChanges

* refactor: remove showPlacement prop

* refactor: add item name regex

* refactor: fix syntax

* refactor: fix tests

* refactor: update deps

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

@@ -43,11 +43,9 @@ describe('Create Folder', () => {
     cy.visit(HOME_PATH);
     createFolder({ name: ' ' }, { confirm: false });
 
-    cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).should(
-      'have.prop',
-      'disabled',
-      true,
-    );
+    // button is not disabled at beginning
+    cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).click();
+    cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).should('be.disabled');
   });
 
   it('description placement should not exist for folder', () => {

package.json

@@ -23,7 +23,7 @@
     "@graasp/query-client": "5.4.0",
     "@graasp/sdk": "5.0.0",
     "@graasp/stylis-plugin-rtl": "2.2.0",
-    "@graasp/translations": "1.40.0",
+    "@graasp/translations": "1.41.0",
     "@graasp/ui": "5.4.0",
     "@mui/icons-material": "6.1.5",
     "@mui/lab": "6.0.0-beta.13",

src/components/item/MapView.tsx

@@ -31,13 +31,16 @@ const MapView = ({
 }: Props): JSX.Element => {
   const { data: currentMember } = hooks.useCurrentMember();
   const { isMobile } = useMobileView();
-  const [geolocation, setGeolocation] = useState<Partial<ItemGeolocation>>();
+  const [geolocation, setGeolocation] =
+    useState<Pick<ItemGeolocation, 'lat' | 'lng'>>();
   const [open, setOpen] = useState(false);
   const { data: parent, isLoading: isLoadingParent } = hooks.useItem(parentId);
   const { hasFetchedCurrentLocation, currentPosition } =
     useCurrentLocation(enableGeolocation);
 
-  const handleAddOnClick = (args: { location: Partial<ItemGeolocation> }) => {
+  const handleAddOnClick = (args: {
+    location: Pick<ItemGeolocation, 'lat' | 'lng'>;
+  }) => {
     setGeolocation(args.location);
     setOpen(true);
   };

src/components/item/edit/EditModal.tsx

@@ -29,8 +29,8 @@ import { isItemValid } from '@/utils/item';
 import { BUILDER } from '../../../langs/constants';
 import BaseItemForm from '../form/BaseItemForm';
 import FileForm from '../form/FileForm';
-import FolderForm from '../form/FolderForm';
 import DocumentForm from '../form/document/DocumentForm';
+import { FolderEditForm } from '../form/folder/FolderEditForm';
 import EditShortcutForm from '../shortcut/EditShortcutForm';
 
 const { editItemRoutine } = routines;
@@ -67,15 +67,13 @@ const EditModal = ({ item, onClose, open }: Props): JSX.Element => {
     setUpdatedItem({ ...updatedItem, ...payload } as DiscriminatedItem);
   };
 
-  // files are handled beforehand
+  // files and folders are handled beforehand
   const renderDialogContent = (): JSX.Element => {
     switch (item.type) {
       case ItemType.DOCUMENT:
         return <DocumentForm setChanges={setChanges} item={item} />;
       case ItemType.SHORTCUT:
         return <EditShortcutForm item={item} setChanges={setChanges} />;
-      case ItemType.FOLDER:
-        return <FolderForm setChanges={setChanges} item={item} />;
       case ItemType.LINK:
       case ItemType.APP:
       case ItemType.ETHERPAD:
@@ -125,6 +123,9 @@ const EditModal = ({ item, onClose, open }: Props): JSX.Element => {
 
   // temporary solution for displaying separate dialog content
   const renderContent = () => {
+    if (item.type === ItemType.FOLDER) {
+      return <FolderEditForm onClose={onClose} item={item} />;
+    }
     if (item.type === ItemType.LOCAL_FILE || item.type === ItemType.S3_FILE) {
       return <FileForm onClose={onClose} item={item} />;
     }

src/components/item/form/BaseItemForm.tsx

@@ -6,8 +6,8 @@ import { Box } from '@mui/material';
 import { DescriptionPlacementType, DiscriminatedItem } from '@graasp/sdk';
 
 import { FOLDER_FORM_DESCRIPTION_ID } from '../../../config/selectors';
-import DescriptionForm from './DescriptionForm';
 import { ItemNameField } from './ItemNameField';
+import { DescriptionAndPlacementForm } from './description/DescriptionAndPlacementForm';
 
 type Inputs = {
   name: string;
@@ -44,7 +44,7 @@ const BaseItemForm = ({
         <ItemNameField required />
 
         <Box sx={{ mt: 2 }}>
-          <DescriptionForm
+          <DescriptionAndPlacementForm
             id={FOLDER_FORM_DESCRIPTION_ID}
             description={description ?? item?.description}
             descriptionPlacement={

src/components/item/form/FileForm.tsx

@@ -31,8 +31,8 @@ import {
 import { getExtraFromPartial } from '@/utils/itemExtra';
 
 import { BUILDER } from '../../../langs/constants';
-import DescriptionForm from './DescriptionForm';
 import { ItemNameField } from './ItemNameField';
+import { DescriptionAndPlacementForm } from './description/DescriptionAndPlacementForm';
 
 type Inputs = {
   name: string;
@@ -56,8 +56,9 @@ const FileForm = ({
     watch,
     setValue,
     handleSubmit,
-    formState: { isValid },
+    formState: { isValid, isSubmitted },
   } = methods;
+
   const altText = watch('altText');
   const description = watch('description');
   const descriptionPlacement = watch('descriptionPlacement');
@@ -129,7 +130,7 @@ const FileForm = ({
               {...register('altText', { value: previousAltText })}
             />
           )}
-          <DescriptionForm
+          <DescriptionAndPlacementForm
             onPlacementChange={(newValue) =>
               setValue('descriptionPlacement', newValue)
             }
@@ -151,7 +152,7 @@ const FileForm = ({
             variant="contained"
             type="submit"
             id={ITEM_FORM_CONFIRM_BUTTON_ID}
-            disabled={!isValid}
+            disabled={isSubmitted && !isValid}
           >
             {translateCommon(COMMON.SAVE_BUTTON)}
           </Button>

src/components/item/form/ItemNameField.tsx

@@ -3,7 +3,13 @@ import { useFormContext } from 'react-hook-form';
 import ClearIcon from '@mui/icons-material/Clear';
 import { IconButton, TextField } from '@mui/material';
 
-import { useBuilderTranslation } from '../../../config/i18n';
+import { ItemConstants, MAX_ITEM_NAME_LENGTH } from '@graasp/sdk';
+import { FAILURE_MESSAGES } from '@graasp/translations';
+
+import {
+  useBuilderTranslation,
+  useMessagesTranslation,
+} from '../../../config/i18n';
 import { ITEM_FORM_NAME_INPUT_ID } from '../../../config/selectors';
 import { BUILDER } from '../../../langs/constants';
 
@@ -24,6 +30,7 @@ export const ItemNameField = ({
     formState: { errors },
   } = useFormContext<{ name: string }>();
   const { t: translateBuilder } = useBuilderTranslation();
+  const { t: translateMessages } = useMessagesTranslation();
 
   const handleClearClick = () => {
     reset({ name: '' });
@@ -55,7 +62,21 @@ export const ItemNameField = ({
       sx={{ my: 1 }}
       error={Boolean(errors.name)}
       helperText={errors.name?.message}
-      {...register('name', { required })}
+      {...register('name', {
+        required,
+        pattern: {
+          message: translateMessages(
+            FAILURE_MESSAGES.INVALID_ITEM_NAME_PATTERN_ERROR,
+          ),
+          value: ItemConstants.ITEM_NAME_REGEX,
+        },
+        maxLength: {
+          message: translateMessages(
+            FAILURE_MESSAGES.INVALID_ITEM_NAME_MAX_LENGTH_ERROR,
+          ),
+          value: MAX_ITEM_NAME_LENGTH,
+        },
+      })}
     />
   );
 };

src/components/item/form/description/DescriptionAndPlacementForm.tsx

@@ -0,0 +1,34 @@
+import { Stack } from '@mui/material';
+
+import { DescriptionPlacementType } from '@graasp/sdk';
+
+import { DescriptionForm, type DescriptionFormProps } from './DescriptionForm';
+import DescriptionPlacementForm from './DescriptionPlacementForm';
+
+type DescriptionAndPlacementFormProps = {
+  id?: string;
+  description?: string;
+  descriptionPlacement?: DescriptionPlacementType;
+  onPlacementChange: (v: DescriptionPlacementType) => void;
+  onDescriptionChange: DescriptionFormProps['onChange'];
+};
+
+export const DescriptionAndPlacementForm = ({
+  id,
+  description = '',
+  descriptionPlacement,
+  onPlacementChange,
+  onDescriptionChange,
+}: DescriptionAndPlacementFormProps): JSX.Element => (
+  <Stack spacing={2}>
+    <DescriptionForm
+      id={id}
+      value={description}
+      onChange={onDescriptionChange}
+    />
+    <DescriptionPlacementForm
+      descriptionPlacement={descriptionPlacement}
+      onPlacementChange={onPlacementChange}
+    />
+  </Stack>
+);

src/components/item/form/description/DescriptionForm.tsx

@@ -0,0 +1,36 @@
+import { Box, FormLabel, Typography } from '@mui/material';
+
+import TextEditor from '@graasp/ui/text-editor';
+
+import { useBuilderTranslation } from '@/config/i18n';
+import { BUILDER } from '@/langs/constants';
+
+export type DescriptionFormProps = {
+  id?: string;
+  value?: string;
+  onChange: (v: string) => void;
+};
+
+export function DescriptionForm({
+  id,
+  value = '',
+  onChange,
+}: DescriptionFormProps): JSX.Element {
+  const { t: translateBuilder } = useBuilderTranslation();
+
+  return (
+    <Box>
+      <FormLabel>
+        <Typography variant="caption">
+          {translateBuilder(BUILDER.DESCRIPTION_LABEL)}
+        </Typography>
+      </FormLabel>
+      <TextEditor
+        id={id}
+        value={value}
+        onChange={onChange}
+        showActions={false}
+      />
+    </Box>
+  );
+}