From f115c829ad1895f33f660754596dc9c708169d05 Mon Sep 17 00:00:00 2001 From: spaenleh Date: Tue, 16 Apr 2024 18:15:47 +0200 Subject: [PATCH 1/3] fix: add settings in item menu --- cypress/e2e/item/settings/itemSettings.cy.ts | 38 +++++++++++++ .../item/header/ItemHeaderActions.tsx | 2 +- .../item/settings/ItemSettingsButton.tsx | 54 ++++++++++++------- src/components/main/ItemMenu.tsx | 6 +++ 4 files changed, 80 insertions(+), 20 deletions(-) diff --git a/cypress/e2e/item/settings/itemSettings.cy.ts b/cypress/e2e/item/settings/itemSettings.cy.ts index a680cc989..9fd646d70 100644 --- a/cypress/e2e/item/settings/itemSettings.cy.ts +++ b/cypress/e2e/item/settings/itemSettings.cy.ts @@ -30,6 +30,9 @@ import { SETTINGS_PINNED_TOGGLE_ID, SETTINGS_SAVE_ACTIONS_TOGGLE_ID, buildDescriptionPlacementId, + buildItemMenu, + buildItemMenuButtonId, + buildSettingsButtonId, } from '../../../../src/config/selectors'; import { ITEM_WITH_CHATBOX_MESSAGES, @@ -410,4 +413,39 @@ describe('Item Settings', () => { }); }); }); + + describe('in item menu', () => { + describe('read', () => { + beforeEach(() => { + cy.setUpApi({ + ...SAMPLE_ITEMS, + currentMember: MEMBERS.BOB, + }); + }); + it('does not have access to settings', () => { + const itemId = SAMPLE_ITEMS.items[1].id; + cy.visit('/'); + cy.get(`#${buildItemMenuButtonId(itemId)}`).click(); + cy.get(`#${buildItemMenu(itemId)}`).should('be.visible'); + cy.get(`#${buildSettingsButtonId(itemId)}`).should('not.exist'); + }); + }); + describe('write', () => { + beforeEach(() => { + cy.setUpApi({ + ...SAMPLE_ITEMS, + currentMember: MEMBERS.ALICE, + }); + }); + it.only('has access to settings', () => { + const itemId = SAMPLE_ITEMS.items[1].id; + cy.visit('/'); + cy.get(`#${buildItemMenuButtonId(itemId)}`).click(); + cy.get(`#${buildItemMenu(itemId)}`).should('be.visible'); + cy.get(`#${buildSettingsButtonId(itemId)}`).should('be.visible'); + cy.get(`#${buildSettingsButtonId(itemId)}`).click(); + cy.url().should('contain', buildItemSettingsPath(itemId)); + }); + }); + }); }); diff --git a/src/components/item/header/ItemHeaderActions.tsx b/src/components/item/header/ItemHeaderActions.tsx index 76c684718..d44be26ae 100644 --- a/src/components/item/header/ItemHeaderActions.tsx +++ b/src/components/item/header/ItemHeaderActions.tsx @@ -74,7 +74,7 @@ const ItemHeaderActions = (): JSX.Element => { onClick={onClickChatbox} /> {canAdmin && } - {canWrite && } + {canWrite && } ); } diff --git a/src/components/item/settings/ItemSettingsButton.tsx b/src/components/item/settings/ItemSettingsButton.tsx index 3c7a5817d..17b1dbdf4 100644 --- a/src/components/item/settings/ItemSettingsButton.tsx +++ b/src/components/item/settings/ItemSettingsButton.tsx @@ -1,35 +1,51 @@ import { Link } from 'react-router-dom'; import { Settings } from '@mui/icons-material'; -import { IconButton, Tooltip } from '@mui/material'; +import { IconButton, ListItemIcon, MenuItem, Tooltip } from '@mui/material'; + +import { ActionButton, ActionButtonVariant } from '@graasp/ui'; import { buildItemSettingsPath } from '@/config/paths'; import { useBuilderTranslation } from '../../../config/i18n'; -import { - ITEM_SETTINGS_BUTTON_CLASS, - buildSettingsButtonId, -} from '../../../config/selectors'; +import { buildSettingsButtonId } from '../../../config/selectors'; import { BUILDER } from '../../../langs/constants'; type Props = { - id: string; + itemId: string; + type?: ActionButtonVariant; }; -const ItemSettingsButton = ({ id }: Props): JSX.Element => { +const ItemSettingsButton = ({ + itemId, + type = ActionButton.ICON_BUTTON, +}: Props): JSX.Element => { const { t: translateBuilder } = useBuilderTranslation(); - return ( - - - - - - ); + + const text = translateBuilder(BUILDER.SETTINGS_TITLE); + const to = buildItemSettingsPath(itemId); + const id = buildSettingsButtonId(itemId); + + switch (type) { + case ActionButton.MENU_ITEM: + return ( + + + + + {text} + + ); + case ActionButton.ICON_BUTTON: + default: + return ( + + + + + + ); + } }; export default ItemSettingsButton; diff --git a/src/components/main/ItemMenu.tsx b/src/components/main/ItemMenu.tsx index 7c8e7abc5..56faccff9 100644 --- a/src/components/main/ItemMenu.tsx +++ b/src/components/main/ItemMenu.tsx @@ -34,6 +34,7 @@ import PinButton from '../common/PinButton'; import RecycleButton from '../common/RecycleButton'; import { useCurrentUserContext } from '../context/CurrentUserContext'; import { FlagItemModalContext } from '../context/FlagItemModalContext'; +import ItemSettingsButton from '../item/settings/ItemSettingsButton'; import CopyButton from './CopyButton'; import CreateShortcutButton from './CreateShortcutButton'; @@ -84,6 +85,11 @@ const ItemMenu = ({ const renderEditorActions = () => { if (canWrite) { return [ + , canMove ? ( Date: Tue, 16 Apr 2024 18:31:05 +0200 Subject: [PATCH 2/3] fix: remove only in test --- cypress/e2e/item/settings/itemSettings.cy.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/item/settings/itemSettings.cy.ts b/cypress/e2e/item/settings/itemSettings.cy.ts index 9fd646d70..423576b74 100644 --- a/cypress/e2e/item/settings/itemSettings.cy.ts +++ b/cypress/e2e/item/settings/itemSettings.cy.ts @@ -437,7 +437,7 @@ describe('Item Settings', () => { currentMember: MEMBERS.ALICE, }); }); - it.only('has access to settings', () => { + it('has access to settings', () => { const itemId = SAMPLE_ITEMS.items[1].id; cy.visit('/'); cy.get(`#${buildItemMenuButtonId(itemId)}`).click(); From 4326fbc55ac224b8794e90aef3ab2850a08fb626 Mon Sep 17 00:00:00 2001 From: spaenleh Date: Wed, 17 Apr 2024 10:33:56 +0200 Subject: [PATCH 3/3] fix: tests where class was missing --- cypress/e2e/item/settings/itemSettings.cy.ts | 5 ++--- src/config/selectors.ts | 1 - 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/cypress/e2e/item/settings/itemSettings.cy.ts b/cypress/e2e/item/settings/itemSettings.cy.ts index 423576b74..71e1593d7 100644 --- a/cypress/e2e/item/settings/itemSettings.cy.ts +++ b/cypress/e2e/item/settings/itemSettings.cy.ts @@ -21,7 +21,6 @@ import { ITEM_MAIN_CLASS, ITEM_PANEL_NAME_ID, ITEM_PANEL_TABLE_ID, - ITEM_SETTINGS_BUTTON_CLASS, ITEM_SETTING_DESCRIPTION_PLACEMENT_SELECT_ID, LANGUAGE_SELECTOR_ID, SETTINGS_CHATBOX_TOGGLE_ID, @@ -60,7 +59,7 @@ describe('Item Settings', () => { const item = SAMPLE_ITEMS.items[1]; // manual click to verify settings button works correctly cy.visit(buildItemPath(item.id)); - cy.get(`.${ITEM_SETTINGS_BUTTON_CLASS}`).should('not.exist'); + cy.get(`#${buildSettingsButtonId(item.id)}`).should('not.exist'); }); it('settings page redirects to item', () => { @@ -91,7 +90,7 @@ describe('Item Settings', () => { const itemId = ITEMS_SETTINGS.items[1].id; // manual click to verify settings button works correctly cy.visit(buildItemPath(itemId)); - cy.get(`.${ITEM_SETTINGS_BUTTON_CLASS}`).click(); + cy.get(`#${buildSettingsButtonId(itemId)}`).click(); cy.get(`#${SETTINGS_CHATBOX_TOGGLE_ID}`).should('be.checked'); }); diff --git a/src/config/selectors.ts b/src/config/selectors.ts index 8b2f1fa16..819c38819 100644 --- a/src/config/selectors.ts +++ b/src/config/selectors.ts @@ -129,7 +129,6 @@ export const REDIRECTION_CONTENT_ID = 'redirectionContent'; export const ITEM_MEMBERSHIPS_CONTENT_ID = 'itemMembershipsContent'; export const buildMemberAvatarClass = (id?: string): string => `memberAvatar-${id}`; -export const ITEM_SETTINGS_BUTTON_CLASS = 'itemSettingsButton'; export const buildItemMembershipRowId = (id: string): string => `itemMembershipRow-${id}`; export const buildItemMembershipRowSelector = (id: string): string =>