feat: add settings in item menu (#1154)

* fix: add settings in item menu

* fix: remove only in test

* fix: tests where class was missing

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));
+      });
+    });
+  });
 });

src/components/item/header/ItemHeaderActions.tsx

@@ -74,7 +74,7 @@ const ItemHeaderActions = (): JSX.Element => {
             onClick={onClickChatbox}
           />
           {canAdmin && <PublishButton itemId={item.id} />}
-          {canWrite && <ItemSettingsButton id={item.id} />}
+          {canWrite && <ItemSettingsButton itemId={item.id} />}
         </>
       );
     }

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 (
-    <Tooltip title={translateBuilder(BUILDER.SETTINGS_TITLE)}>
-      <IconButton
-        component={Link}
-        to={buildItemSettingsPath(id)}
-        className={ITEM_SETTINGS_BUTTON_CLASS}
-        id={buildSettingsButtonId(id)}
-      >
-        <Settings />
-      </IconButton>
-    </Tooltip>
-  );
+
+  const text = translateBuilder(BUILDER.SETTINGS_TITLE);
+  const to = buildItemSettingsPath(itemId);
+  const id = buildSettingsButtonId(itemId);
+
+  switch (type) {
+    case ActionButton.MENU_ITEM:
+      return (
+        <MenuItem component={Link} to={to} key={text} id={id}>
+          <ListItemIcon>
+            <Settings />
+          </ListItemIcon>
+          {text}
+        </MenuItem>
+      );
+    case ActionButton.ICON_BUTTON:
+    default:
+      return (
+        <Tooltip title={text}>
+          <IconButton id={id} component={Link} to={to}>
+            <Settings />
+          </IconButton>
+        </Tooltip>
+      );
+  }
 };
 
 export default ItemSettingsButton;

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 [
+        <ItemSettingsButton
+          key="settings"
+          itemId={item.id}
+          type={ActionButton.MENU_ITEM}
+        />,
         canMove ? (
           <MoveButton
             key="move"

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 =>