fix: normalize url on create, fix document flavor

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

@@ -1,4 +1,5 @@
 import {
+  DocumentItemExtraFlavor,
   DocumentItemFactory,
   ItemType,
   PackedFolderItemFactory,
@@ -93,4 +94,27 @@ describe('Create Document', () => {
       true,
     );
   });
+
+  it('create document with flavor', () => {
+    cy.setUpApi();
+    cy.visit(HOME_PATH);
+
+    const documentToCreate = DocumentItemFactory({
+      name: 'document',
+      extra: {
+        [ItemType.DOCUMENT]: {
+          content: '<h1>Some Title</h1>',
+          flavor: DocumentItemExtraFlavor.Error,
+        },
+      },
+    });
+    createDocument(documentToCreate);
+
+    cy.wait('@postItem').then(({ request: { body } }) => {
+      expect(body.extra.document.flavor).to.eq(
+        documentToCreate.extra.document.flavor,
+      );
+      expect(body.extra.document.content).to.contain('Some Title');
+    });
+  });
 });

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

@@ -49,10 +49,10 @@ describe('Create Link', () => {
     createLink({ url: 'graasp.org' });
     cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).click();
 
-    cy.wait('@postItem').then(() => {
+    cy.wait('@postItem').then(({ request: { body } }) => {
       // check item is created and displayed
       cy.wait(CREATE_ITEM_PAUSE);
-
+      expect(body.extra.url).to.contain('http');
       // expect update
       cy.wait('@getAccessibleItems');
     });

cypress/support/commands/item.ts

@@ -3,6 +3,7 @@ import { DiscriminatedItem, getAppExtra, getDocumentExtra } from '@graasp/sdk';
 import {
   CUSTOM_APP_CYPRESS_ID,
   CUSTOM_APP_URL_ID,
+  FLAVOR_SELECT_ID,
   FOLDER_FORM_DESCRIPTION_ID,
   HOME_MODAL_ITEM_ID,
   ITEM_FORM_APP_URL_ID,
@@ -121,6 +122,11 @@ Cypress.Commands.add(
   ({ name = '', extra }, { confirm = true } = {}) => {
     cy.fillBaseItemModal({ name }, { confirm: false });
 
+    if (extra.document.flavor) {
+      cy.get(`#${FLAVOR_SELECT_ID} div`).click();
+      cy.get(`li[data-value="${extra.document.flavor}"]`).click();
+    }
+
     const content =
       // first select all the text and then remove it to have a clear field, then type new text
       `{selectall}{backspace}${getDocumentExtra(extra)?.content}`;
@@ -133,7 +139,7 @@ Cypress.Commands.add(
     }
 
     if (confirm) {
-      cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).click();
+      cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).scrollIntoView().click();
     }
   },
 );

src/components/item/form/document/DocumentCreateForm.tsx

@@ -55,8 +55,8 @@ export function DocumentCreateForm({
     defaultValues: { flavor: DocumentItemExtraFlavor.None },
   });
   const {
-    reset,
     handleSubmit,
+    setValue,
     formState: { isValid, isSubmitted },
   } = methods;
 
@@ -91,7 +91,9 @@ export function DocumentCreateForm({
           <DocumentFlavorSelect />
           <DocumentContentForm
             documentItemId={ITEM_FORM_DOCUMENT_TEXT_ID}
-            onChange={(v) => reset({ content: v })}
+            onChange={(v) => {
+              setValue('content', v);
+            }}
             placeholder={translateBuilder(BUILDER.TEXT_EDITOR_PLACEHOLDER)}
           />
         </DialogContent>

src/components/item/form/link/LinkForm.tsx

@@ -125,7 +125,7 @@ export const LinkForm = ({
         type: ItemType.LINK,
         description: data.description,
         extra: buildLinkExtra({
-          url: data.url,
+          url: normalizeURL(data.url),
           description: linkData?.description,
           thumbnails: linkData?.thumbnails,
           icons: linkData?.icons,

src/components/item/move/MoveButton.tsx

@@ -20,7 +20,7 @@ type MoveButtonProps = {
 };
 
 const MoveButton = ({
-  color = 'primary',
+  color,
   id,
   type = ActionButton.ICON_BUTTON,
   onClick,

src/components/item/sharing/ItemSharingTab.tsx

@@ -61,9 +61,7 @@ const ItemSharingTab = (): JSX.Element => {
                   )}
                 </Alert>
               ) : (
-                <Stack direction="row" alignItems="center">
-                  <VisibilitySelect item={item} edit={canAdmin} />
-                </Stack>
+                <VisibilitySelect item={item} edit={canAdmin} />
               )}
               <HideSettingCheckbox item={item} />
             </Stack>

src/components/item/sharing/VisibilitySelect.tsx

@@ -1,4 +1,4 @@
-import { MenuItem, Select, Typography } from '@mui/material';
+import { Alert, MenuItem, Select, Stack } from '@mui/material';
 
 import { PackedItem } from '@graasp/sdk';
 import { Loader } from '@graasp/ui';
@@ -75,42 +75,44 @@ const VisibilitySelect = ({ item, edit }: Props): JSX.Element | null => {
 
   return (
     <>
-      {isModalOpen && (
-        <UpdateVisibilityModal
-          isOpen={isModalOpen}
-          newVisibility={pendingVisibility}
-          onClose={onCloseModal}
-          onValidate={onValidateModal}
-        />
-      )}
-      {edit && (
-        <Select
-          value={visibility}
-          onChange={(e) => onVisibilityChange(e.target.value)}
-          disabled={isDisabled}
-          id={SHARE_ITEM_VISIBILITY_SELECT_ID}
-          sx={{ mr: 1 }}
-        >
-          <MenuItem value={SETTINGS.ITEM_PRIVATE.name}>
-            {translateBuilder(BUILDER.ITEM_SETTINGS_VISIBILITY_PRIVATE_LABEL)}
-          </MenuItem>
-          <MenuItem value={SETTINGS.ITEM_LOGIN.name}>
-            {translateBuilder(
-              BUILDER.ITEM_SETTINGS_VISIBILITY_PSEUDONYMIZED_LABEL,
-            )}
-          </MenuItem>
-          <MenuItem value={SETTINGS.ITEM_PUBLIC.name}>
-            {translateBuilder(BUILDER.ITEM_SETTINGS_VISIBILITY_PUBLIC_LABEL)}
-          </MenuItem>
-        </Select>
-      )}
-      {renderVisiblityIndication()}
+      <Stack direction="row" alignItems="center">
+        {isModalOpen && (
+          <UpdateVisibilityModal
+            isOpen={isModalOpen}
+            newVisibility={pendingVisibility}
+            onClose={onCloseModal}
+            onValidate={onValidateModal}
+          />
+        )}
+        {edit && (
+          <Select
+            value={visibility}
+            onChange={(e) => onVisibilityChange(e.target.value)}
+            disabled={isDisabled}
+            id={SHARE_ITEM_VISIBILITY_SELECT_ID}
+            sx={{ mr: 1 }}
+          >
+            <MenuItem value={SETTINGS.ITEM_PRIVATE.name}>
+              {translateBuilder(BUILDER.ITEM_SETTINGS_VISIBILITY_PRIVATE_LABEL)}
+            </MenuItem>
+            <MenuItem value={SETTINGS.ITEM_LOGIN.name}>
+              {translateBuilder(
+                BUILDER.ITEM_SETTINGS_VISIBILITY_PSEUDONYMIZED_LABEL,
+              )}
+            </MenuItem>
+            <MenuItem value={SETTINGS.ITEM_PUBLIC.name}>
+              {translateBuilder(BUILDER.ITEM_SETTINGS_VISIBILITY_PUBLIC_LABEL)}
+            </MenuItem>
+          </Select>
+        )}
+        {renderVisiblityIndication()}
+      </Stack>
       {isDisabled && (
-        <Typography variant="body2">
+        <Alert severity="info">
           {translateBuilder(
             BUILDER.ITEM_SETTINGS_VISIBILITY_CANNOT_EDIT_PARENT_MESSAGE,
           )}
-        </Typography>
+        </Alert>
       )}
     </>
   );

src/components/main/ItemMenuContent.tsx

@@ -114,6 +114,7 @@ const ItemMenuContent = ({ item }: Props): JSX.Element | null => {
     canAdmin ? (
       <MoveButton
         key="move"
+        color="inherit"
         type={ActionButton.MENU_ITEM}
         onClick={() => {
           openMoveModal();