diff --git a/cypress/e2e/item/settings/itemSettings.cy.ts b/cypress/e2e/item/settings/itemSettings.cy.ts index 37d2977a5..dc37d8225 100644 --- a/cypress/e2e/item/settings/itemSettings.cy.ts +++ b/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, + ); + }); + }); }); diff --git a/cypress/fixtures/files.ts b/cypress/fixtures/files.ts index 0f723cce7..6f11e6dd3 100644 --- a/cypress/fixtures/files.ts +++ b/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', diff --git a/package.json b/package.json index c28706009..7d36513c6 100644 --- a/package.json +++ b/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": "yarn@3.6.3" } diff --git a/src/components/item/settings/FileSettings.tsx b/src/components/item/settings/FileSettings.tsx new file mode 100644 index 000000000..46949fe93 --- /dev/null +++ b/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) => { + editItem({ + id: item.id, + settings: { maxWidth: e.target.value as MaxWidth }, + }); + }; + + return ( + + + {translateBuilder('SETTINGS_FILE_SETTINGS_TITLE')} + + + + + {translateBuilder('Maximum width')} + + + + + 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} + /> + + + + ); +}; + +export default FileSettings; diff --git a/src/components/item/settings/ItemSettings.tsx b/src/components/item/settings/ItemSettings.tsx index e5513dfa3..3d22fc692 100644 --- a/src/components/item/settings/ItemSettings.tsx +++ b/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 ; + case ItemType.S3_FILE: + case ItemType.LOCAL_FILE: + return ; + default: + return null; + } + }; + return ( @@ -203,7 +216,7 @@ const ItemSettings = ({ item }: Props): JSX.Element => { {renderChatSetting()} {renderSaveActionsSetting()} - {item.type === ItemType.LINK && } + {renderSettingsPerType()} diff --git a/src/config/selectors.ts b/src/config/selectors.ts index d4c37f9ff..d829dfc3e 100644 --- a/src/config/selectors.ts +++ b/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'; diff --git a/yarn.lock b/yarn.lock index 5cd394e8a..95bd3e366 100644 --- a/yarn.lock +++ b/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