diff --git a/cypress/e2e/item/settings/itemSettings.cy.ts b/cypress/e2e/item/settings/itemSettings.cy.ts
index a680cc989..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,
@@ -30,6 +29,9 @@ import {
SETTINGS_PINNED_TOGGLE_ID,
SETTINGS_SAVE_ACTIONS_TOGGLE_ID,
buildDescriptionPlacementId,
+ buildItemMenu,
+ buildItemMenuButtonId,
+ buildSettingsButtonId,
} from '../../../../src/config/selectors';
import {
ITEM_WITH_CHATBOX_MESSAGES,
@@ -57,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', () => {
@@ -88,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');
});
@@ -410,4 +412,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('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 (
+
+ );
+ 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 ? (
`memberAvatar-${id}`;
-export const ITEM_SETTINGS_BUTTON_CLASS = 'itemSettingsButton';
export const buildItemMembershipRowId = (id: string): string =>
`itemMembershipRow-${id}`;
export const buildItemMembershipRowSelector = (id: string): string =>