fix: close caption on click cancel (#606)

graasp · Apr 3, 2023 · 604318b · 604318b
1 parent 8d046fe
commit 604318b
Show file tree

Hide file tree

Showing 17 changed files with 388 additions and 294 deletions.
diff --git a/.yarn/releases/yarn-3.4.1.cjs → .yarn/releases/yarn-3.5.0.cjs b/.yarn/releases/yarn-3.4.1.cjs → .yarn/releases/yarn-3.5.0.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -8,4 +8,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.4.1.cjs
+yarnPath: .yarn/releases/yarn-3.5.0.cjs
diff --git a/cypress/e2e/item/edit/editApp.cy.js b/cypress/e2e/item/edit/editApp.cy.js
@@ -1,5 +1,10 @@
 import { DEFAULT_ITEM_LAYOUT_MODE } from '../../../../src/config/constants';
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
+import {
+  TEXT_EDITOR_CLASS,
+  buildCancelButtonId,
+  buildEditButtonId,
+} from '../../../../src/config/selectors';
 import { buildAppExtra } from '../../../../src/utils/itemExtra';
 import {
   GRAASP_APP_CHILDREN_ITEM,
@@ -21,10 +26,14 @@ const newFields = {
 
 describe('Edit App', () => {
   describe('View Page', () => {
-    it('edit caption', () => {
+    beforeEach(() => {
       const { id } = GRAASP_APP_ITEM;
       cy.setUpApi({ items: [GRAASP_APP_ITEM] });
       cy.visit(buildItemPath(id));
+    });
+
+    it('edit caption', () => {
+      const { id } = GRAASP_APP_ITEM;
       const caption = 'new caption';
       editCaptionFromViewPage({ id, caption });
       cy.wait(`@editItem`).then(({ request: { url: endpointUrl, body } }) => {
@@ -33,6 +42,17 @@ describe('Edit App', () => {
         expect(body?.description).to.contain(caption);
       });
     });
+
+    it('cancel caption', () => {
+      const { id, description } = GRAASP_APP_ITEM;
+      cy.get(`#${buildEditButtonId(id)}`).click();
+      cy.get(`.${TEXT_EDITOR_CLASS}`).type('{selectall}{backspace}');
+      cy.get(`#${buildCancelButtonId(id)}`).click();
+      cy.get(`#${buildCancelButtonId(id)}`).should('not.exist');
+      cy.get(`.${TEXT_EDITOR_CLASS}`)
+        .should('be.visible')
+        .and('contain.text', description);
+    });
   });
 
   describe('List', () => {

diff --git a/cypress/e2e/item/edit/editFile.cy.js b/cypress/e2e/item/edit/editFile.cy.js
@@ -1,5 +1,10 @@
 import { DEFAULT_ITEM_LAYOUT_MODE } from '../../../../src/config/constants';
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
+import {
+  TEXT_EDITOR_CLASS,
+  buildCancelButtonId,
+  buildEditButtonId,
+} from '../../../../src/config/selectors';
 import { ITEM_LAYOUT_MODES } from '../../../fixtures/enums';
 import { IMAGE_ITEM_DEFAULT, VIDEO_ITEM_S3 } from '../../../fixtures/files';
 import { EDITED_FIELDS } from '../../../fixtures/items';
@@ -35,6 +40,26 @@ describe('Edit File', () => {
         expect(body?.description).to.contain(caption);
       });
     });
+
+    it("cancel file's caption", () => {
+      const { id } = IMAGE_ITEM_DEFAULT;
+      cy.visit(buildItemPath(id));
+      cy.get(`#${buildEditButtonId(id)}`).click();
+      cy.get(`#${buildCancelButtonId(id)}`).click();
+      // button should not exist anymore
+      cy.get(`.${TEXT_EDITOR_CLASS}`).should('exist');
+      cy.get(`#${buildCancelButtonId(id)}`).should('not.exist');
+    });
+
+    it("cancel s3File's caption", () => {
+      const { id } = VIDEO_ITEM_S3;
+      cy.visit(buildItemPath(id));
+      cy.get(`#${buildEditButtonId(id)}`).click();
+      cy.get(`#${buildCancelButtonId(id)}`).click();
+      // button should not exist anymore
+      cy.get(`.${TEXT_EDITOR_CLASS}`).should('exist');
+      cy.get(`#${buildCancelButtonId(id)}`).should('not.exist');
+    });
   });
 
   describe('List', () => {

diff --git a/cypress/e2e/item/edit/editLink.cy.js b/cypress/e2e/item/edit/editLink.cy.js
@@ -1,5 +1,10 @@
 import { DEFAULT_ITEM_LAYOUT_MODE } from '../../../../src/config/constants';
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
+import {
+  TEXT_EDITOR_CLASS,
+  buildCancelButtonId,
+  buildEditButtonId,
+} from '../../../../src/config/selectors';
 import { ITEM_LAYOUT_MODES } from '../../../fixtures/enums';
 import { EDITED_FIELDS } from '../../../fixtures/items';
 import { GRAASP_LINK_ITEM, YOUTUBE_LINK_ITEM } from '../../../fixtures/links';
@@ -27,6 +32,18 @@ describe('Edit Link', () => {
         expect(body?.description).to.contain(caption);
       });
     });
+
+    it('cancel caption', () => {
+      const { id, description } = GRAASP_LINK_ITEM;
+      cy.visit(buildItemPath(id));
+      cy.get(`#${buildEditButtonId(id)}`).click();
+      cy.get(`.${TEXT_EDITOR_CLASS}`).type(`{selectall}{backspace}`);
+      cy.get(`#${buildCancelButtonId(id)}`).click();
+      cy.get(`.${TEXT_EDITOR_CLASS}`)
+        .should('exist')
+        .and('contain.text', description);
+      cy.get(`#${buildCancelButtonId(id)}`).should('not.exist');
+    });
   });
 
   describe('List', () => {

diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "@graasp/query-client": "0.4.0",
     "@graasp/sdk": "0.9.3",
     "@graasp/translations": "1.10.0",
-    "@graasp/ui": "2.2.0",
+    "@graasp/ui": "2.2.1",
     "@mui/icons-material": "5.11.0",
     "@mui/lab": "5.0.0-alpha.117",
     "@mui/material": "5.11.6",
@@ -147,9 +147,10 @@
     "@mui/icons-material": "5.11.0",
     "@mui/material": "5.11.6",
     "immer": "9.0.6",
+    "@graasp/ui": "2.2.1",
     "@graasp/sdk": "0.9.3",
     "immutable": "4.2.4",
     "@svgr/webpack": "6.5.1"
   },
-  "packageManager": "yarn@3.4.1"
+  "packageManager": "yarn@3.5.0"
 }
diff --git a/src/components/item/ItemContent.tsx b/src/components/item/ItemContent.tsx
@@ -51,6 +51,7 @@ import { hooks, useMutation } from '../../config/queryClient';
 import {
   DOCUMENT_ITEM_TEXT_EDITOR_ID,
   ITEM_SCREEN_ERROR_ALERT_ID,
+  buildCancelButtonId,
   buildFileItemId,
   buildItemsTableId,
   buildSaveButtonId,
@@ -79,12 +80,16 @@ const FileContent = ({
   item,
   isEditing,
   onSaveCaption,
+  onCancelCaption,
   saveButtonId,
+  cancelButtonId,
 }: {
   item: LocalFileItemTypeRecord | S3FileItemTypeRecord;
   isEditing: boolean;
   onSaveCaption: (text: string) => void;
+  onCancelCaption: (text: string) => void;
   saveButtonId: string;
+  cancelButtonId: string;
 }): JSX.Element => {
   const {
     data: fileContent,
@@ -113,8 +118,10 @@ const FileContent = ({
         id={buildFileItemId(item.id)}
         item={item}
         onSaveCaption={onSaveCaption}
+        onCancelCaption={onCancelCaption}
         pdfViewerLink={buildPdfViewerLink(GRAASP_ASSETS_URL)}
         saveButtonId={saveButtonId}
+        cancelButtonId={cancelButtonId}
       />
     </StyledContainer>
   );
@@ -128,13 +135,17 @@ const LinkContent = ({
   member,
   isEditing,
   onSaveCaption,
+  onCancelCaption,
   saveButtonId,
+  cancelButtonId,
 }: {
   item: EmbeddedLinkItemTypeRecord;
   member: MemberRecord;
   isEditing: boolean;
   onSaveCaption: (caption: string) => void;
+  onCancelCaption: (caption: string) => void;
   saveButtonId: string;
+  cancelButtonId: string;
 }): JSX.Element => (
   <StyledContainer>
     <LinkItem
@@ -143,7 +154,9 @@ const LinkContent = ({
       item={item}
       editCaption={isEditing}
       onSaveCaption={onSaveCaption}
+      onCancelCaption={onCancelCaption}
       saveButtonId={saveButtonId}
+      cancelButtonId={cancelButtonId}
       height={ITEM_DEFAULT_HEIGHT}
       showButton={Boolean(
         item.settings?.showLinkButton ?? DEFAULT_LINK_SHOW_BUTTON,
@@ -164,12 +177,14 @@ const DocumentContent = ({
   onSaveDocument,
   onCancel,
   saveButtonId,
+  cancelButtonId,
 }: {
   item: DocumentItemTypeRecord;
   isEditing: boolean;
   onSaveDocument: (update: DocumentItemExtraProperties) => void;
   onCancel: () => void;
   saveButtonId: string;
+  cancelButtonId: string;
 }): JSX.Element => {
   const { t: translateCommon } = useCommonTranslation();
 
@@ -199,8 +214,14 @@ const DocumentContent = ({
             onContentSave={onSave}
             onFlavorChange={(f) => setFlavor(f || undefined)}
             saveButtonId={saveButtonId}
+            cancelButtonId={cancelButtonId}
           />
-          <Button onClick={onCancel} variant="text" sx={{ m: 1 }}>
+          <Button
+            id={cancelButtonId}
+            onClick={onCancel}
+            variant="text"
+            sx={{ m: 1 }}
+          >
             {translateCommon(COMMON.CANCEL_BUTTON)}
           </Button>
           <SaveButton
@@ -231,22 +252,28 @@ const AppContent = ({
   permission,
   isEditing,
   onSaveCaption,
+  onCancelCaption,
   saveButtonId,
+  cancelButtonId,
 }: {
   item: AppItemTypeRecord;
   member: MemberRecord;
   permission: PermissionLevel;
   isEditing: boolean;
   onSaveCaption: (caption: string) => void;
+  onCancelCaption: (caption: string) => void;
   saveButtonId: string;
+  cancelButtonId: string;
 }): JSX.Element => (
   <AppItem
     isResizable
     item={item}
     apiHost={API_HOST}
     editCaption={isEditing}
     onSaveCaption={onSaveCaption}
+    onCancelCaption={onCancelCaption}
     saveButtonId={saveButtonId}
+    cancelButtonId={cancelButtonId}
     member={member}
     height={ITEM_DEFAULT_HEIGHT}
     permission={permission}
@@ -394,6 +421,10 @@ const ItemContent = ({
     setEditingItemId(null);
   };
 
+  const onCancelCaption = (_caption: string) => {
+    setEditingItemId(null);
+  };
+
   const onSaveDocument = ({ content, flavor }: DocumentItemExtraProperties) => {
     editItem({
       id: item.id,
@@ -407,6 +438,7 @@ const ItemContent = ({
   };
 
   const saveButtonId = buildSaveButtonId(item.id);
+  const cancelButtonId = buildCancelButtonId(item.id);
 
   switch (item.type) {
     case ItemType.LOCAL_FILE:
@@ -416,7 +448,9 @@ const ItemContent = ({
           item={item}
           isEditing={isEditing}
           onSaveCaption={onSaveCaption}
+          onCancelCaption={onCancelCaption}
           saveButtonId={saveButtonId}
+          cancelButtonId={cancelButtonId}
         />
       );
     }
@@ -427,7 +461,9 @@ const ItemContent = ({
           member={member}
           isEditing={isEditing}
           onSaveCaption={onSaveCaption}
+          onCancelCaption={onCancelCaption}
           saveButtonId={saveButtonId}
+          cancelButtonId={cancelButtonId}
         />
       );
     case ItemType.DOCUMENT:
@@ -438,6 +474,7 @@ const ItemContent = ({
           onSaveDocument={onSaveDocument}
           onCancel={onCancel}
           saveButtonId={saveButtonId}
+          cancelButtonId={cancelButtonId}
         />
       );
     case ItemType.APP:
@@ -447,7 +484,9 @@ const ItemContent = ({
           member={member}
           isEditing={isEditing}
           onSaveCaption={onSaveCaption}
+          onCancelCaption={onCancelCaption}
           saveButtonId={saveButtonId}
+          cancelButtonId={cancelButtonId}
           permission={permission}
         />
       );

diff --git a/src/components/item/ItemMetadataContent.tsx b/src/components/item/ItemMetadataContent.tsx
@@ -42,11 +42,9 @@ const ItemMetadataContent = ({ item }: Props): JSX.Element => {
   let size = null;
   let mimetype = null;
   if (item.type === ItemType.S3_FILE) {
-    // todo: improve type of itemRecord with extras
     const extra = getS3FileExtra(item.extra);
     ({ mimetype, size } = extra);
   } else if (item.type === ItemType.LOCAL_FILE) {
-    // todo: improve type of itemRecord with extras
     const extra = getFileExtra(item.extra);
     ({ mimetype, size } = extra);
   }

diff --git a/src/components/item/form/AppForm.tsx b/src/components/item/form/AppForm.tsx
@@ -40,7 +40,6 @@ const AppForm: FC<Props> = ({ onChange, item, updatedProperties = {} }) => {
   const { t: translateBuilder } = useBuilderTranslation();
   const [newName, setNewName] = useState(item?.name);
 
-  // todo: not clear if newValue is a string or object
   const handleAppSelection = (_event: any, newValue: RecordOf<App> | null) => {
     const url = newValue?.url;
     const name = newValue?.name ?? item?.name;
@@ -54,7 +53,7 @@ const AppForm: FC<Props> = ({ onChange, item, updatedProperties = {} }) => {
     }
     onChange(props);
   };
-  // todo: not clear if newValue is a string or object
+
   const handleAppInput = (_event: any, url: string) => {
     const props = { ...item, extra: buildAppExtra({ url }) };
     onChange(props);

diff --git a/src/components/item/form/DocumentForm.tsx b/src/components/item/form/DocumentForm.tsx
@@ -29,6 +29,7 @@ export const DocumentExtraForm = ({
   onFlavorChange,
   placeholder,
   saveButtonId,
+  cancelButtonId,
   showActions = false,
 }: {
   documentItemId?: string;
@@ -40,6 +41,7 @@ export const DocumentExtraForm = ({
   onFlavorChange?: (text: DocumentItemExtraProperties['flavor']) => void;
   placeholder?: string;
   saveButtonId?: string;
+  cancelButtonId?: string;
   showActions?: boolean;
 }): JSX.Element => {
   const { t } = useBuilderTranslation();
@@ -85,6 +87,7 @@ export const DocumentExtraForm = ({
           onSave={onContentSave}
           placeholderText={placeholder}
           saveButtonId={saveButtonId}
+          cancelButtonId={cancelButtonId}
           showActions={showActions}
         />
       </Box>

diff --git a/src/components/item/publish/CategorySelection.tsx b/src/components/item/publish/CategorySelection.tsx
@@ -133,8 +133,7 @@ const CategorySelection: FC<Props> = ({ disabled }) => {
             title={translateCategories(name)}
             handleChange={handleChange(values)}
             values={values}
-            // todo: fix with query client
-            selectedValues={itemCategories as any}
+            selectedValues={itemCategories}
             typeId={id}
           />
         );