feat: allow to set an altText on images (#631)

--------- Co-authored-by: spaenleh <[email protected]>
graasp · Jun 27, 2023 · 92f1184 · 92f1184
1 parent 9f0132d
commit 92f1184
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 19 deletions.
diff --git a/cypress/fixtures/files.ts b/cypress/fixtures/files.ts
@@ -2,15 +2,14 @@ import { ItemType, MimeTypes } from '@graasp/sdk';
 
 import { InternalItemType } from '../../src/config/types';
 import { buildFileExtra, buildS3FileExtra } from '../../src/utils/itemExtra';
+import { LocalFileItemForTest, S3FileItemForTest } from '../support/types';
 import { MOCK_IMAGE_URL, MOCK_PDF_URL, MOCK_VIDEO_URL } from './fileLinks';
 import { CURRENT_USER } from './members';
-import { LocalFileItemForTest, S3FileItemForTest } from '../support/types';
 
 export const ICON_FILEPATH = 'files/icon.png';
 export const VIDEO_FILEPATH = 'files/video.mp4';
 export const TEXT_FILEPATH = 'files/sometext.txt';
 
-
 export const IMAGE_ITEM_DEFAULT: LocalFileItemForTest = {
   id: 'bd5519a2-5ba9-4305-b221-185facbe6a99',
   name: 'icon.png',
@@ -26,6 +25,7 @@ export const IMAGE_ITEM_DEFAULT: LocalFileItemForTest = {
     path: '9a95/e2e1/2a7b-1615910428274',
     size: 32439,
     mimetype: 'image/png',
+    altText: 'myAltText',
   }),
   // for testing: creating needs a fixture, reading needs an url
   createFilepath: ICON_FILEPATH,
@@ -47,6 +47,7 @@ export const VIDEO_ITEM_DEFAULT: LocalFileItemForTest = {
     path: '9a95/e2e1/2a7b-1615910428274',
     size: 52345,
     mimetype: MimeTypes.Video.MP4,
+    altText: 'myAltText',
   }),
   // for testing: creating needs a fixture, reading needs an url
   createFilepath: VIDEO_FILEPATH,
@@ -68,6 +69,7 @@ export const PDF_ITEM_DEFAULT: LocalFileItemForTest = {
     path: '9a95/e2e1/2a7b-1615910428274',
     size: 54321,
     mimetype: MimeTypes.PDF,
+    altText: 'myAltText',
   }),
   // for testing: creating needs a fixture, reading needs an url
   createFilepath: ICON_FILEPATH,
@@ -93,7 +95,8 @@ export const IMAGE_ITEM_S3: S3FileItemForTest = {
     path: MOCK_IMAGE_URL, // for testing
     size: 32439,
     mimetype: MimeTypes.Image.PNG,
-    name: 'myfile'
+    name: 'myfile',
+    altText: 'myAltText',
   }),
   // for testing: creating needs a fixture, reading needs an url
   createFilepath: ICON_FILEPATH,
@@ -114,7 +117,8 @@ export const VIDEO_ITEM_S3: S3FileItemForTest = {
     path: MOCK_VIDEO_URL, // for testing
     size: 52345,
     mimetype: MimeTypes.Video.MP4,
-    name: 'myfile'
+    name: 'myfile',
+    altText: 'myAltText',
   }),
   // for testing: creating needs a fixture, reading needs an url
   createFilepath: VIDEO_FILEPATH,
@@ -135,7 +139,8 @@ export const PDF_ITEM_S3: S3FileItemForTest = {
     path: MOCK_PDF_URL, // for testing
     size: 54321,
     mimetype: MimeTypes.PDF,
-    name: 'myfile'
+    name: 'myfile',
+    altText: 'myAltText',
   }),
   // for testing: creating needs a fixture, reading needs an url
   createFilepath: ICON_FILEPATH,

diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "@graasp/query-client": "1.0.1",
     "@graasp/sdk": "1.1.0",
     "@graasp/translations": "1.15.0",
-    "@graasp/ui": "3.1.0",
+    "@graasp/ui": "3.2.0",
     "@mui/icons-material": "5.11.16",
     "@mui/lab": "5.0.0-alpha.134",
     "@mui/material": "5.13.5",

diff --git a/src/components/context/EditItemModalContext.tsx b/src/components/context/EditItemModalContext.tsx
@@ -1,3 +1,4 @@
+import { TextField } from '@mui/material';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
@@ -10,20 +11,33 @@ import { routines } from '@graasp/query-client';
 import {
   DiscriminatedItem,
   DocumentItemType,
+  FileItemProperties,
   FolderItemType,
   Item,
   ItemType,
+  LocalFileItemType,
+  MimeTypes,
+  S3FileItemType,
   convertJs,
+  getFileExtra,
+  getS3FileExtra,
 } from '@graasp/sdk';
-import { ItemRecord } from '@graasp/sdk/frontend';
+import {
+  ItemRecord,
+  LocalFileItemTypeRecord,
+  S3FileItemTypeRecord,
+} from '@graasp/sdk/frontend';
 import { BUILDER, COMMON, FAILURE_MESSAGES } from '@graasp/translations';
 import { Button } from '@graasp/ui';
 
 import { DOUBLE_CLICK_DELAY_MS } from '../../config/constants';
 import { useBuilderTranslation, useCommonTranslation } from '../../config/i18n';
 import notifier from '../../config/notifier';
 import { mutations } from '../../config/queryClient';
-import { ITEM_FORM_CONFIRM_BUTTON_ID } from '../../config/selectors';
+import {
+  ITEM_FORM_CONFIRM_BUTTON_ID,
+  ITEM_FORM_IMAGE_ALT_TEXT_EDIT_FIELD_ID,
+} from '../../config/selectors';
 import { isItemValid } from '../../utils/item';
 import CancelButton from '../common/CancelButton';
 import BaseItemForm from '../item/form/BaseItemForm';
@@ -100,6 +114,59 @@ const EditItemModalProvider = ({ children }: Props): JSX.Element => {
     onClose();
   };
 
+  const renderFileForm = (
+    fileItem: LocalFileItemTypeRecord | S3FileItemTypeRecord,
+  ) => {
+    const localFileExtra =
+      fileItem.type === ItemType.LOCAL_FILE
+        ? getFileExtra(fileItem.extra)
+        : undefined;
+    const s3FileExtra =
+      fileItem.type === ItemType.S3_FILE
+        ? getS3FileExtra(fileItem.extra)
+        : undefined;
+    const { mimetype, altText } = {
+      ...s3FileExtra?.toJS(),
+      ...localFileExtra?.toJS(),
+    };
+
+    return (
+      <>
+        <BaseItemForm
+          onChange={setUpdatedItem}
+          item={fileItem}
+          updatedProperties={updatedProperties}
+        />
+        {mimetype && MimeTypes.isImage(mimetype) && (
+          <TextField
+            variant="standard"
+            id={ITEM_FORM_IMAGE_ALT_TEXT_EDIT_FIELD_ID}
+            label={translateBuilder(BUILDER.EDIT_ITEM_IMAGE_ALT_TEXT_LABEL)}
+            value={
+              (
+                updatedProperties?.extra?.[fileItem.type] as
+                  | FileItemProperties
+                  | undefined
+              )?.altText ?? altText
+            }
+            onChange={(e) =>
+              setUpdatedItem({
+                ...updatedProperties,
+                extra: {
+                  [fileItem.type]: { altText: e.target.value, size: 'yolo' },
+                },
+              } as LocalFileItemType | S3FileItemType)
+            }
+            // always shrink because setting name from defined app does not shrink automatically
+            InputLabelProps={{ shrink: true }}
+            sx={{ width: '50%', my: 1 }}
+            multiline
+          />
+        )}
+      </>
+    );
+  };
+
   const renderForm = () => {
     switch (item?.type) {
       case ItemType.DOCUMENT:
@@ -120,6 +187,7 @@ const EditItemModalProvider = ({ children }: Props): JSX.Element => {
         );
       case ItemType.LOCAL_FILE:
       case ItemType.S3_FILE:
+        return renderFileForm(item);
       case ItemType.LINK:
       case ItemType.SHORTCUT:
       case ItemType.APP:

diff --git a/src/config/selectors.ts b/src/config/selectors.ts
@@ -181,6 +181,9 @@ export const SHARE_ITEM_PSEUDONYMIZED_SCHEMA_ID =
 export const ITEM_RECYCLE_BUTTON_CLASS = 'itemRecycleButton';
 export const buildItemsTableId = (id: string): string => `itemsTable-${id}`;
 
+export const ITEM_FORM_IMAGE_ALT_TEXT_EDIT_FIELD_ID =
+  'imageEditAltTextTextField';
+
 export const SETTINGS_PINNED_TOGGLE_ID = 'settingsPinnedToggle';
 export const SETTINGS_CHATBOX_TOGGLE_ID = 'settingsChatboxToggle';
 export const SETTINGS_COLLAPSE_TOGGLE_ID = 'settingsCollapseToggle';

diff --git a/yarn.lock b/yarn.lock
@@ -4827,11 +4827,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@npm:3.1.0":
-  version: 3.1.0
-  resolution: "@graasp/ui@npm:3.1.0"
+"@graasp/ui@npm:3.2.0":
+  version: 3.2.0
+  resolution: "@graasp/ui@npm:3.2.0"
   dependencies:
-    "@graasp/sdk": 1.0.0
+    "@graasp/sdk": 1.1.0
     clsx: 1.2.1
     http-status-codes: 2.2.0
     immutable: 4.3.0
@@ -4862,7 +4862,7 @@ __metadata:
       optional: true
     ag-grid-react:
       optional: true
-  checksum: d030e2882e8d988b82f8db9e1b1f912693b036c3ab795fb6b922e06ee9ea02b424ae3796d578e5e6adc1b799e84e3a1ff2655d55a5f6f4f3648684f407a0f532
+  checksum: 2bd2d1df239c8c748649aab71ad24b8e7ab806f79d24870a24139ccca5a6f8abf11949794604a9e78dceee64d32a5b934d9a51187c187b11f19a6afa67f231dc
   languageName: node
   linkType: hard
 
@@ -5856,16 +5856,16 @@ __metadata:
   linkType: hard
 
 "@smithy/protocol-http@npm:^1.0.1":
-  version: 1.1.0
-  resolution: "@smithy/protocol-http@npm:1.1.0"
+  version: 1.0.1
+  resolution: "@smithy/protocol-http@npm:1.0.1"
   dependencies:
-    "@smithy/types": ^1.1.0
+    "@smithy/types": ^1.0.0
     tslib: ^2.5.0
-  checksum: f912e085a477664abf38ff4cd0c2ac064ef068afc6cc0a09ce9c2849f07bac8be622edf60f19a91e2701184b63daa85cb2898e243d7a2c6fd1613de705b3152c
+  checksum: ba9ac4880fed48eeea0813663c94c765fe5b900f2fdac4f5de6524306bbc6645829f48bc175d202076b83acaccf008ed77f4b5546a4c180315f253e22fe6c89f
   languageName: node
   linkType: hard
 
-"@smithy/types@npm:^1.0.0, @smithy/types@npm:^1.1.0":
+"@smithy/types@npm:^1.0.0":
   version: 1.1.0
   resolution: "@smithy/types@npm:1.1.0"
   dependencies:
@@ -12297,7 +12297,7 @@ __metadata:
     "@graasp/query-client": 1.0.1
     "@graasp/sdk": 1.1.0
     "@graasp/translations": 1.15.0
-    "@graasp/ui": 3.1.0
+    "@graasp/ui": 3.2.0
     "@graasp/websockets": "github:graasp/graasp-websockets.git"
     "@mui/icons-material": 5.11.16
     "@mui/lab": 5.0.0-alpha.134