From 4ebd9bdd780453d6b08f4cd026e50950a9f1e15e Mon Sep 17 00:00:00 2001 From: Kim Lan Phan Hoang Date: Fri, 1 Sep 2023 12:01:45 +0200 Subject: [PATCH] feat: add file setting maximum width (#764) * feat: add file setting maximum width --- cypress/e2e/item/settings/itemSettings.cy.ts | 52 ++++++++++++++++ cypress/fixtures/files.ts | 26 +++++++- package.json | 8 +-- src/components/item/settings/FileSettings.tsx | 59 +++++++++++++++++++ src/components/item/settings/ItemSettings.tsx | 15 ++++- src/config/selectors.ts | 1 + src/langs/constants.ts | 1 + src/langs/en.json | 3 +- src/langs/fr.json | 3 +- yarn.lock | 56 ++++++------------ 10 files changed, 179 insertions(+), 45 deletions(-) create mode 100644 src/components/item/settings/FileSettings.tsx 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 9bd6061af..9856db09d 100644 --- a/package.json +++ b/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", diff --git a/src/components/item/settings/FileSettings.tsx b/src/components/item/settings/FileSettings.tsx new file mode 100644 index 000000000..f2b9cc478 --- /dev/null +++ b/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) => { + editItem({ + id: item.id, + settings: { maxWidth: e.target.value as MaxWidth }, + }); + }; + + return ( + + + {translateBuilder(BUILDER.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/src/langs/constants.ts b/src/langs/constants.ts index f6bd9c28b..264e4d1d9 100644 --- a/src/langs/constants.ts +++ b/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', }; diff --git a/src/langs/en.json b/src/langs/en.json index abca79984..1725dbf91 100644 --- a/src/langs/en.json +++ b/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" } diff --git a/src/langs/fr.json b/src/langs/fr.json index bd0ebe7c8..007133728 100644 --- a/src/langs/fr.json +++ b/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" } diff --git a/yarn.lock b/yarn.lock index 336d77b5e..df9677f31 100644 --- a/yarn.lock +++ b/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"