feat: add file setting maximum width (#764)

* feat: add file setting maximum width

cypress/e2e/item/settings/itemSettings.cy.ts

@@ -1,9 +1,12 @@
+import { MaxWidth } from '@graasp/sdk';
+
 import { buildItemPath } from '../../../../src/config/paths';
 import {
   CLEAR_CHAT_CONFIRM_BUTTON_ID,
   CLEAR_CHAT_DIALOG_ID,
   CLEAR_CHAT_SETTING_ID,
   DOWNLOAD_CHAT_BUTTON_ID,
+  FILE_SETTING_MAX_WIDTH_ID,
   ITEM_SETTINGS_BUTTON_CLASS,
   SETTINGS_CHATBOX_TOGGLE_ID,
   SETTINGS_LINK_SHOW_BUTTON_ID,
@@ -15,6 +18,10 @@ import {
   ITEM_WITH_CHATBOX_MESSAGES,
   ITEM_WITH_CHATBOX_MESSAGES_AND_ADMIN,
 } from '../../../fixtures/chatbox';
+import {
+  IMAGE_ITEM_DEFAULT,
+  IMAGE_ITEM_DEFAULT_WITH_MAX_WIDTH,
+} from '../../../fixtures/files';
 import { ITEMS_SETTINGS } from '../../../fixtures/items';
 import { GRAASP_LINK_ITEM } from '../../../fixtures/links';
 import { EDIT_ITEM_PAUSE } from '../../../support/constants';
@@ -29,6 +36,8 @@ describe('Item Settings', () => {
         GRAASP_LINK_ITEM,
         ITEM_WITH_CHATBOX_MESSAGES,
         ITEM_WITH_CHATBOX_MESSAGES_AND_ADMIN,
+        IMAGE_ITEM_DEFAULT,
+        IMAGE_ITEM_DEFAULT_WITH_MAX_WIDTH,
       ],
     });
   });
@@ -276,4 +285,47 @@ describe('Item Settings', () => {
       );
     });
   });
+
+  describe('File Settings', () => {
+    it('Change default maximum width', () => {
+      const itemId = IMAGE_ITEM_DEFAULT.id;
+
+      cy.visit(buildItemPath(itemId));
+      cy.get(`.${ITEM_SETTINGS_BUTTON_CLASS}`).click();
+
+      // default value
+      cy.get(`#${FILE_SETTING_MAX_WIDTH_ID} + input`).should(
+        'have.value',
+        MaxWidth.ExtraLarge,
+      );
+
+      const newMaxWidth = MaxWidth.Small;
+      cy.get(`#${FILE_SETTING_MAX_WIDTH_ID}`).click();
+      cy.get(`[role="option"][data-value="${newMaxWidth}"]`).click();
+
+      cy.wait('@editItem').then(
+        ({
+          response: {
+            body: { settings },
+          },
+        }) => {
+          expect(settings.maxWidth).equals(newMaxWidth);
+          cy.wait(EDIT_ITEM_PAUSE);
+          cy.get('@getItem').its('response.url').should('contain', itemId);
+        },
+      );
+    });
+
+    it('Shows set maximum width for file', () => {
+      const itemId = IMAGE_ITEM_DEFAULT_WITH_MAX_WIDTH.id;
+
+      cy.visit(buildItemPath(itemId));
+      cy.get(`.${ITEM_SETTINGS_BUTTON_CLASS}`).click();
+
+      cy.get(`#${FILE_SETTING_MAX_WIDTH_ID} + input`).should(
+        'have.value',
+        IMAGE_ITEM_DEFAULT_WITH_MAX_WIDTH.settings.maxWidth,
+      );
+    });
+  });
 });

cypress/fixtures/files.ts

@@ -1,4 +1,4 @@
-import { ItemType, MimeTypes } from '@graasp/sdk';
+import { ItemType, MaxWidth, MimeTypes } from '@graasp/sdk';
 
 import { InternalItemType } from '../../src/config/types';
 import { buildFileExtra, buildS3FileExtra } from '../../src/utils/itemExtra';
@@ -32,6 +32,30 @@ export const IMAGE_ITEM_DEFAULT: LocalFileItemForTest = {
   readFilepath: MOCK_IMAGE_URL,
 };
 
+export const IMAGE_ITEM_DEFAULT_WITH_MAX_WIDTH: LocalFileItemForTest = {
+  id: 'bd5519a2-5ba9-4305-b221-185facbe6a29',
+  name: 'icon.png',
+  description: 'a default image description',
+  type: ItemType.LOCAL_FILE,
+  path: 'bd5519a2_5ba9_4305_b221_185facbe6a29',
+  creator: CURRENT_USER,
+  createdAt: new Date('2021-03-16T16:00:50.968Z'),
+  updatedAt: new Date('2021-03-16T16:00:52.655Z'),
+  settings: {
+    maxWidth: MaxWidth.Medium,
+  },
+  extra: buildFileExtra({
+    name: 'icon.png',
+    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,
+  readFilepath: MOCK_IMAGE_URL,
+};
+
 export const VIDEO_ITEM_DEFAULT: LocalFileItemForTest = {
   id: 'qd5519a2-5ba9-4305-b221-185facbe6a99',
   name: 'video.mp4',

package.json

@@ -17,10 +17,10 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "2.0.1",
-    "@graasp/query-client": "1.4.3",
-    "@graasp/sdk": "1.2.1",
+    "@graasp/query-client": "1.5.0",
+    "@graasp/sdk": "1.4.0",
     "@graasp/translations": "1.19.0",
-    "@graasp/ui": "3.3.2",
+    "@graasp/ui": "3.4.0",
     "@mui/icons-material": "5.14.6",
     "@mui/lab": "5.0.0-alpha.141",
     "@mui/material": "5.14.6",
@@ -67,7 +67,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "start": "yarn dev",
+    "start": "yarn dev --host 127.0.0.1",
     "start:test": "vite --mode test",
     "build": "vite build",
     "build:dev": "vite build --mode development",

src/components/item/settings/FileSettings.tsx

@@ -0,0 +1,59 @@
+import { Box, SelectChangeEvent, Stack, Typography } from '@mui/material';
+
+import { MaxWidth } from '@graasp/sdk';
+import {
+  LocalFileItemTypeRecord,
+  S3FileItemTypeRecord,
+} from '@graasp/sdk/frontend';
+import { Select } from '@graasp/ui';
+
+import { useBuilderTranslation, useEnumsTranslation } from '@/config/i18n';
+import { mutations } from '@/config/queryClient';
+import { FILE_SETTING_MAX_WIDTH_ID } from '@/config/selectors';
+import { BUILDER } from '@/langs/constants';
+
+const FileSettings = ({
+  item,
+}: {
+  item: S3FileItemTypeRecord | LocalFileItemTypeRecord;
+}): JSX.Element => {
+  const { t: translateEnum } = useEnumsTranslation();
+  const { t: translateBuilder } = useBuilderTranslation();
+  const { mutate: editItem } = mutations.useEditItem();
+
+  const onChange = (e: SelectChangeEvent<MaxWidth>) => {
+    editItem({
+      id: item.id,
+      settings: { maxWidth: e.target.value as MaxWidth },
+    });
+  };
+
+  return (
+    <Box mt={4} my={4}>
+      <Typography variant="h5" m={0} p={0}>
+        {translateBuilder(BUILDER.SETTINGS_FILE_SETTINGS_TITLE)}
+      </Typography>
+      <Stack direction="row" spacing={2} alignItems="center">
+        <Stack>
+          <Typography variant="body1">
+            {translateBuilder('Maximum width')}
+          </Typography>
+        </Stack>
+        <Stack>
+          <Select<MaxWidth>
+            id={FILE_SETTING_MAX_WIDTH_ID}
+            size="small"
+            values={Object.values(MaxWidth).map((s) => ({
+              text: translateEnum(s),
+              value: s,
+            }))}
+            onChange={onChange}
+            defaultValue={item.settings.maxWidth || MaxWidth.ExtraLarge}
+          />
+        </Stack>
+      </Stack>
+    </Box>
+  );
+};
+
+export default FileSettings;

src/components/item/settings/ItemSettings.tsx

@@ -26,6 +26,7 @@ import {
 } from '../../../config/selectors';
 import { BUILDER } from '../../../langs/constants';
 import AdminChatSettings from './AdminChatSettings';
+import FileSettings from './FileSettings';
 import LinkSettings from './LinkSettings';
 import ThumbnailSetting from './ThumbnailSetting';
 
@@ -190,6 +191,18 @@ const ItemSettings = ({ item }: Props): JSX.Element => {
     );
   };
 
+  const renderSettingsPerType = () => {
+    switch (item.type) {
+      case ItemType.LINK:
+        return <LinkSettings item={item} />;
+      case ItemType.S3_FILE:
+      case ItemType.LOCAL_FILE:
+        return <FileSettings item={item} />;
+      default:
+        return null;
+    }
+  };
+
   return (
     <Container disableGutters sx={{ mt: 2 }}>
       <Typography variant="h4">
@@ -203,7 +216,7 @@ const ItemSettings = ({ item }: Props): JSX.Element => {
         {renderChatSetting()}
         {renderSaveActionsSetting()}
       </FormGroup>
-      {item.type === ItemType.LINK && <LinkSettings item={item} />}
+      {renderSettingsPerType()}
       <ThumbnailSetting item={item} />
       <AdminChatSettings item={item} />
     </Container>

src/config/selectors.ts

@@ -308,3 +308,4 @@ export const CC_NO_DERIVATIVE_CONTROL_ID = 'noDerivativeSelector';
 export const CC_DERIVATIVE_CONTROL_ID = 'derivativeSelector';
 export const EDIT_MODAL_ID = 'editModal';
 export const EDIT_ITEM_MODAL_CANCEL_BUTTON_ID = 'editModalCancelButton';
+export const FILE_SETTING_MAX_WIDTH_ID = 'fileSettingMaxWidth';

src/langs/constants.ts

@@ -305,4 +305,5 @@ export const BUILDER = {
   STATUS_TOOLTIP_IS_PUBLISHED: 'STATUS_TOOLTIP_IS_PUBLISHED',
   STATUS_TOOLTIP_IS_COLLAPSIBLE: 'STATUS_TOOLTIP_IS_COLLAPSIBLE',
   STATUS_TOOLTIP_SHOW_CHATBOX: 'STATUS_TOOLTIP_SHOW_CHATBOX',
+  SETTINGS_FILE_SETTINGS_TITLE: 'SETTINGS_FILE_SETTINGS_TITLE',
 };

src/langs/en.json

@@ -246,5 +246,6 @@
   "STATUS_TOOLTIP_IS_PUBLIC": "Public",
   "STATUS_TOOLTIP_IS_PUBLISHED": "Published",
   "STATUS_TOOLTIP_IS_COLLAPSIBLE": "Collapsible",
-  "STATUS_TOOLTIP_SHOW_CHATBOX": "Chatbox visible"
+  "STATUS_TOOLTIP_SHOW_CHATBOX": "Chatbox visible",
+  "SETTINGS_FILE_SETTINGS_TITLE": "File Settings"
 }

src/langs/fr.json

@@ -246,5 +246,6 @@
   "STATUS_TOOLTIP_IS_PUBLIC": "Public",
   "STATUS_TOOLTIP_IS_PUBLISHED": "Publié",
   "STATUS_TOOLTIP_IS_COLLAPSIBLE": "Minifié",
-  "STATUS_TOOLTIP_SHOW_CHATBOX": "Chatbox visible"
+  "STATUS_TOOLTIP_SHOW_CHATBOX": "Chatbox visible",
+  "SETTINGS_FILE_SETTINGS_TITLE": "Paramètres du fichier"
 }

yarn.lock

@@ -2109,12 +2109,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/query-client@npm:1.4.3":
-  version: 1.4.3
-  resolution: "@graasp/query-client@npm:1.4.3"
+"@graasp/query-client@npm:1.5.0":
+  version: 1.5.0
+  resolution: "@graasp/query-client@npm:1.5.0"
   dependencies:
-    "@graasp/sdk": 1.2.1
-    "@graasp/translations": 1.18.3
+    "@graasp/sdk": 1.4.0
+    "@graasp/translations": 1.19.0
     axios: 0.27.2
     crypto-js: 4.1.1
     http-status-codes: 2.2.0
@@ -2124,13 +2124,13 @@ __metadata:
     uuid: 9.0.0
   peerDependencies:
     react: ^17.0.0
-  checksum: d6789d5a0ef00b5febbabdf92cbb5904ffbc1359ee9fcd80c6e9be30e7008b4ae114cbb5ae543e49d2a58a838201d6f834d27c8582859bcc21a47ff42c49abb3
+  checksum: 7832abe197504ddf0e15983ed1e1f46cf32cdfdf0ca0cf7e5c702a236de891fd6f0e7f7e159ab9166eb78a9628c530a3b26e9af04ea80d836124eb6c9a95b25d
   languageName: node
   linkType: hard
 
-"@graasp/sdk@npm:1.2.1":
-  version: 1.2.1
-  resolution: "@graasp/sdk@npm:1.2.1"
+"@graasp/sdk@npm:1.4.0":
+  version: 1.4.0
+  resolution: "@graasp/sdk@npm:1.4.0"
   dependencies:
     "@aws-sdk/client-s3": 3.370.0
     "@fastify/secure-session": 6.1.0
@@ -2143,16 +2143,7 @@ __metadata:
     typeorm: 0.3.17
     uuid: 9.0.0
     validator: 13.11.0
-  checksum: 8507f3157e77a1cf0fb9e01a32c72cbfdb8bd3fd5a960a5fa299dbe36eba4a6f28f5f094a5d09214599e54a1fd91b95e945f80525a6165e4caf96ca9822544b7
-  languageName: node
-  linkType: hard
-
-"@graasp/translations@npm:1.18.3":
-  version: 1.18.3
-  resolution: "@graasp/translations@npm:1.18.3"
-  dependencies:
-    i18next: 23.4.4
-  checksum: d980d3042d956c22a4f58fb0c9e15e6559688c8eb9c0636dc3d4e3038b84204a886e9370a2a2a45e6f07da821a223b2a0f31d472747e47624d0e3465f02f457f
+  checksum: 224ed990ed7b68fe4b463d2d1e24fc503c5f5434703cb818a54d22ee9aa8e9997c3a02768ceec082bea604853aa4804ac4d454c746e38089e3e327e0ffcd4c27
   languageName: node
   linkType: hard
 
@@ -2165,11 +2156,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@npm:3.3.2":
-  version: 3.3.2
-  resolution: "@graasp/ui@npm:3.3.2"
+"@graasp/ui@npm:3.4.0":
+  version: 3.4.0
+  resolution: "@graasp/ui@npm:3.4.0"
   dependencies:
-    "@graasp/sdk": 1.2.1
+    "@graasp/sdk": 1.4.0
     http-status-codes: 2.2.0
     immutable: 4.3.2
     katex: 0.16.8
@@ -2193,7 +2184,7 @@ __metadata:
     i18next: ^22.4.15 || ^23.0.0
     react: ^17.0.2
     react-dom: ^17.0.2
-    react-i18next: ^12.2.0
+    react-i18next: ^12.2.0 || ^13.0.0
     react-router-dom: ^6.11.0
     stylis: ^4.1.3
     stylis-plugin-rtl: ^2.1.1
@@ -2202,7 +2193,7 @@ __metadata:
       optional: true
     ag-grid-react:
       optional: true
-  checksum: 2848bd2a467b2ce594eb95ee6f00c7acff1df01724a3849df42959d30e64b0233933d01ab28322deeeaf9cd0f8122039887f7914e00366496fb72549aa4fc774
+  checksum: fc12ceaf940a5e0869346067427819eaa10cda9e531fd833b5324042ec7e5f32987ff40713079f03b69ae62fb68248b545d8ab97ada5c70fcedf5b8a0a55f3cd
   languageName: node
   linkType: hard
 
@@ -7421,10 +7412,10 @@ __metadata:
     "@emotion/react": 11.11.1
     "@emotion/styled": 11.11.0
     "@graasp/chatbox": 2.0.1
-    "@graasp/query-client": 1.4.3
-    "@graasp/sdk": 1.2.1
+    "@graasp/query-client": 1.5.0
+    "@graasp/sdk": 1.4.0
     "@graasp/translations": 1.19.0
-    "@graasp/ui": 3.3.2
+    "@graasp/ui": 3.4.0
     "@mui/icons-material": 5.14.6
     "@mui/lab": 5.0.0-alpha.141
     "@mui/material": 5.14.6
@@ -7774,15 +7765,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"i18next@npm:23.4.4":
-  version: 23.4.4
-  resolution: "i18next@npm:23.4.4"
-  dependencies:
-    "@babel/runtime": ^7.22.5
-  checksum: faa968dcba328528231e3cd140d5a0f4b9b472b75874b7cbf8415e2dbff48397f1cdcc36a739ea6915f6970c367fdd7f985f120e63e1c30a839c53e366d851fd
-  languageName: node
-  linkType: hard
-
 "i18next@npm:23.4.6":
   version: 23.4.6
   resolution: "i18next@npm:23.4.6"