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

@@ -18,9 +18,9 @@
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "2.0.1",
     "@graasp/query-client": "1.4.3",
-    "@graasp/sdk": "1.2.1",
+    "@graasp/sdk": "github:graasp/graasp-sdk#248-max-width-file",
     "@graasp/translations": "1.19.0",
-    "@graasp/ui": "3.3.2",
+    "@graasp/ui": "github:graasp/graasp-ui#503-resize-file",
     "@mui/icons-material": "5.14.6",
     "@mui/lab": "5.0.0-alpha.141",
     "@mui/material": "5.14.6",
@@ -144,5 +144,8 @@
     "vite-plugin-checker": "0.6.2",
     "vite-plugin-istanbul": "5.0.0"
   },
+  "resolutions": {
+    "@graasp/sdk": "github:graasp/graasp-sdk#248-max-width-file"
+  },
   "packageManager": "[email protected]"
 }

src/components/item/settings/FileSettings.tsx

@@ -0,0 +1,58 @@
+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';
+
+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('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';

yarn.lock

@@ -2128,9 +2128,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/sdk@npm:1.2.1":
+"@graasp/sdk@github:graasp/graasp-sdk#248-max-width-file":
   version: 1.2.1
-  resolution: "@graasp/sdk@npm:1.2.1"
+  resolution: "@graasp/sdk@https://github.com/graasp/graasp-sdk.git#commit=3aae4e1207cb8a7f29fe30803568076991181661"
   dependencies:
     "@aws-sdk/client-s3": 3.370.0
     "@fastify/secure-session": 6.1.0
@@ -2143,7 +2143,7 @@ __metadata:
     typeorm: 0.3.17
     uuid: 9.0.0
     validator: 13.11.0
-  checksum: 8507f3157e77a1cf0fb9e01a32c72cbfdb8bd3fd5a960a5fa299dbe36eba4a6f28f5f094a5d09214599e54a1fd91b95e945f80525a6165e4caf96ca9822544b7
+  checksum: 00fb0b12f639558298835ce95b13441b21fa4643c11430e1e268650a468518934b5fd7deb392b3f5c33b4192966636b1c7f6f25d3e2214c638d98fad814aa80d
   languageName: node
   linkType: hard
 
@@ -2165,11 +2165,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@npm:3.3.2":
+"@graasp/ui@github:graasp/graasp-ui#503-resize-file":
   version: 3.3.2
-  resolution: "@graasp/ui@npm:3.3.2"
+  resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=96feae14fb15fef8513a73301858957ce0365414"
   dependencies:
-    "@graasp/sdk": 1.2.1
+    "@graasp/sdk": "github:graasp/graasp-sdk#248-max-width-file"
     http-status-codes: 2.2.0
     immutable: 4.3.2
     katex: 0.16.8
@@ -2193,7 +2193,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 +2202,7 @@ __metadata:
       optional: true
     ag-grid-react:
       optional: true
-  checksum: 2848bd2a467b2ce594eb95ee6f00c7acff1df01724a3849df42959d30e64b0233933d01ab28322deeeaf9cd0f8122039887f7914e00366496fb72549aa4fc774
+  checksum: 0fcb2116362d6a8f5b0d3c9823212d07361ea77b5b873161a495658aa8c202ced56551c2281c4115a82050e8962e6cd65c2f33412efc74b59ad0346796d84c03
   languageName: node
   linkType: hard
 
@@ -7411,9 +7411,9 @@ __metadata:
     "@emotion/styled": 11.11.0
     "@graasp/chatbox": 2.0.1
     "@graasp/query-client": 1.4.3
-    "@graasp/sdk": 1.2.1
+    "@graasp/sdk": "github:graasp/graasp-sdk#248-max-width-file"
     "@graasp/translations": 1.19.0
-    "@graasp/ui": 3.3.2
+    "@graasp/ui": "github:graasp/graasp-ui#503-resize-file"
     "@mui/icons-material": 5.14.6
     "@mui/lab": 5.0.0-alpha.141
     "@mui/material": 5.14.6