style: enhancements for responsive design

cypress/e2e/item/mobileView/mobileItemActions.cy.ts

@@ -0,0 +1,215 @@
+import { Context, FlagType, ItemTagType } from '@graasp/sdk';
+
+import { DISPLAY_CO_EDITORS_OPTIONS } from '@/config/constants';
+
+import { buildItemPath } from '../../../../src/config/paths';
+import {
+  COLLAPSE_ITEM_BUTTON_CLASS,
+  EDIT_ITEM_BUTTON_CLASS,
+  FAVORITE_ITEM_BUTTON_CLASS,
+  HIDDEN_ITEM_BUTTON_CLASS,
+  HOME_MODAL_ITEM_ID,
+  ITEM_CHATBOX_BUTTON_ID,
+  ITEM_FORM_CONFIRM_BUTTON_ID,
+  ITEM_INFORMATION_BUTTON_ID,
+  ITEM_MENU_COPY_BUTTON_CLASS,
+  ITEM_MENU_FLAG_BUTTON_CLASS,
+  ITEM_MENU_RECYCLE_BUTTON_CLASS,
+  ITEM_MENU_SHORTCUT_BUTTON_CLASS,
+  ITEM_SETTINGS_BUTTON_CLASS,
+  ITEM_SETTINGS_CONTAINER_ID,
+  MOBILE_MORE_ACTIONS_BUTTON_ID,
+  MODE_GRID_BUTTON_ID,
+  PIN_ITEM_BUTTON_CLASS,
+  PUBLISH_ITEM_BUTTON_CLASS,
+  SHARE_ITEM_BUTTON_CLASS,
+  buildCoEditorSettingsRadioButtonId,
+  buildDownloadButtonId,
+  buildFlagListItemId,
+  buildShortLinkUrlTextId,
+} from '../../../../src/config/selectors';
+import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
+import { SAMPLE_ITEMS } from '../../../fixtures/items';
+import { buildGraaspBuilderView } from '../../../support/paths';
+
+const visitItem = ({ id }: { id: string }) => {
+  cy.visit(buildItemPath(id));
+  cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+};
+
+const mainButtons = [
+  ITEM_INFORMATION_BUTTON_ID,
+  ITEM_CHATBOX_BUTTON_ID,
+  MODE_GRID_BUTTON_ID,
+];
+
+describe('check item actions within mobile view', () => {
+  beforeEach(() => {
+    // run these tests as if in a mobile
+    cy.viewport(400, 750);
+  });
+  it('check view, chat, and info buttons exits', () => {
+    const { id } = SAMPLE_ITEMS.items[1];
+    cy.setUpApi(SAMPLE_ITEMS);
+    visitItem({ id });
+
+    mainButtons.forEach((btn) => {
+      cy.get(`#${btn}`).should('exist');
+    });
+  });
+
+  it(`check item edit`, () => {
+    const { id } = SAMPLE_ITEMS.items[1];
+    cy.setUpApi(SAMPLE_ITEMS);
+    visitItem({ id });
+
+    cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click();
+    cy.get(`.${EDIT_ITEM_BUTTON_CLASS}`).click();
+    cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).should('exist');
+  });
+
+  it('check download button exist', () => {
+    const { id } = SAMPLE_ITEMS.items[1];
+    cy.setUpApi(SAMPLE_ITEMS);
+    visitItem({ id });
+
+    cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click();
+    cy.get(`#${buildDownloadButtonId(id)}`).should('exist');
+  });
+
+  it('check copy button exists and open copy modal', () => {
+    const { id } = SAMPLE_ITEMS.items[1];
+    cy.setUpApi(SAMPLE_ITEMS);
+    visitItem({ id });
+
+    cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click();
+    cy.get(`.${ITEM_MENU_COPY_BUTTON_CLASS}`).click();
+    cy.get(`#${HOME_MODAL_ITEM_ID}`).should('exist');
+  });
+
+  it('Add Item to favorite from mobile view', () => {
+    const { id } = SAMPLE_ITEMS.items[1];
+    cy.setUpApi(SAMPLE_ITEMS);
+    visitItem({ id });
+
+    cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click();
+    cy.get(`.${FAVORITE_ITEM_BUTTON_CLASS}`).click();
+    cy.wait('@favoriteItem').then(({ request }) => {
+      expect(request.url).to.contain(id);
+    });
+  });
+  it('Share Item Should open share modal and check builder sharing url value', () => {
+    const { id } = SAMPLE_ITEMS.items[1];
+    cy.setUpApi(SAMPLE_ITEMS);
+    visitItem({ id });
+
+    cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click();
+    cy.get(`.${SHARE_ITEM_BUTTON_CLASS}`).click();
+    cy.get(`#${buildShortLinkUrlTextId(Context.Builder)}`).should(
+      'contain',
+      buildGraaspBuilderView(id),
+    );
+  });
+  it('Publish Button, check co-editor settings', () => {
+    const { id } = SAMPLE_ITEMS.items[1];
+    cy.setUpApi(SAMPLE_ITEMS);
+    visitItem({ id });
+
+    cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click();
+    cy.get(`.${PUBLISH_ITEM_BUTTON_CLASS}`).click();
+    Object.values(DISPLAY_CO_EDITORS_OPTIONS).forEach((option) => {
+      const displayTags = cy.get(
+        `#${buildCoEditorSettingsRadioButtonId(option.value)}`,
+      );
+      displayTags.should('be.visible');
+    });
+  });
+  it('Shortcut button should open modal', () => {
+    const { id } = SAMPLE_ITEMS.items[1];
+    cy.setUpApi(SAMPLE_ITEMS);
+    visitItem({ id });
+
+    cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click();
+    cy.get(`.${ITEM_MENU_SHORTCUT_BUTTON_CLASS}`).click();
+    cy.get(`#${HOME_MODAL_ITEM_ID}`).should('exist');
+  });
+  it('hide item', () => {
+    const { id } = SAMPLE_ITEMS.items[1];
+    cy.setUpApi(SAMPLE_ITEMS);
+    visitItem({ id });
+
+    cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click();
+    cy.get(`.${HIDDEN_ITEM_BUTTON_CLASS}`).click();
+    cy.wait(`@postItemTag-${ItemTagType.Hidden}`).then(
+      ({ request: { url } }) => {
+        expect(url).to.contain(ItemTagType.Hidden);
+        expect(url).to.contain(id);
+      },
+    );
+  });
+  it('collapse item', () => {
+    const { id } = SAMPLE_ITEMS.items[1];
+    cy.setUpApi(SAMPLE_ITEMS);
+    visitItem({ id });
+
+    cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click();
+    cy.get(`.${COLLAPSE_ITEM_BUTTON_CLASS}`).click();
+    cy.wait('@editItem').then(
+      ({
+        response: {
+          body: { id: payloadId, settings },
+        },
+      }) => {
+        expect(payloadId).to.equal(id);
+        expect(settings.isCollapsible).equals(true);
+      },
+    );
+  });
+  it('Pin item', () => {
+    const { id } = SAMPLE_ITEMS.items[1];
+    cy.setUpApi(SAMPLE_ITEMS);
+    visitItem({ id });
+
+    cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click();
+    cy.get(`.${PIN_ITEM_BUTTON_CLASS}`).click();
+    cy.wait(`@editItem`).then(
+      ({
+        request: {
+          body: { settings },
+        },
+      }) => {
+        expect(settings.isPinned).equals(true);
+      },
+    );
+  });
+  it.only('Recycle item', () => {
+    const { id } = SAMPLE_ITEMS.items[1];
+    cy.setUpApi(SAMPLE_ITEMS);
+    visitItem({ id });
+    cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click();
+    cy.get(`.${ITEM_MENU_RECYCLE_BUTTON_CLASS}`).click();
+
+    cy.wait('@recycleItems').then(({ request: { url } }) => {
+      expect(url).to.contain(id);
+    });
+  });
+  it('Flag item false information option should exist', () => {
+    const { id } = SAMPLE_ITEMS.items[1];
+    const type = FlagType.FalseInformation;
+
+    cy.setUpApi(SAMPLE_ITEMS);
+    visitItem({ id });
+    cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click();
+    cy.get(`.${ITEM_MENU_FLAG_BUTTON_CLASS}`).click();
+    cy.get(`#${buildFlagListItemId(type)}`).should('exist');
+  });
+  it('Item settings', () => {
+    const { id } = SAMPLE_ITEMS.items[1];
+
+    cy.setUpApi(SAMPLE_ITEMS);
+    visitItem({ id });
+    cy.get(`#${MOBILE_MORE_ACTIONS_BUTTON_ID}`).click();
+    cy.get(`.${ITEM_SETTINGS_BUTTON_CLASS}`).click();
+    cy.get(`#${ITEM_SETTINGS_CONTAINER_ID}`).should('exist');
+  });
+});

src/components/common/BackButton.tsx

@@ -13,7 +13,7 @@ const BackButton = ({ onClick }: Props): JSX.Element => {
   return (
     <Tooltip title={t(BUILDER.BACK)}>
       <IconButton onClick={onClick}>
-        <ArrowCircleLeftRoundedIcon fontSize="large" />
+        <ArrowCircleLeftRoundedIcon />
       </IconButton>
     </Tooltip>
   );

src/components/common/EditButton.tsx

@@ -3,7 +3,11 @@ import { useState } from 'react';
 import { Dialog } from '@mui/material';
 
 import { DiscriminatedItem, ItemType } from '@graasp/sdk';
-import { EditButton as GraaspEditButton } from '@graasp/ui';
+import {
+  ActionButton,
+  ActionButtonVariant,
+  EditButton as GraaspEditButton,
+} from '@graasp/ui';
 
 import { useBuilderTranslation } from '../../config/i18n';
 import {
@@ -22,14 +26,21 @@ import NameForm from '../item/form/NameForm';
 
 type Props = {
   item: DiscriminatedItem;
+  type?: ActionButtonVariant;
+  onClick?: () => void;
 };
 
-const EditButton = ({ item }: Props): JSX.Element => {
+const EditButton = ({
+  item,
+  type = ActionButton.ICON_BUTTON,
+  onClick,
+}: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
   const [open, setOpen] = useState(false);
 
   const handleEdit = () => {
     setOpen(true);
+    onClick?.();
   };
 
   const typeToFormComponent = (): EditModalContentType => {
@@ -66,6 +77,7 @@ const EditButton = ({ item }: Props): JSX.Element => {
         ariaLabel={translateBuilder(BUILDER.EDIT_ITEM_BUTTON)}
         className={EDIT_ITEM_BUTTON_CLASS}
         onClick={handleEdit}
+        type={type}
       />
     </>
   );

src/components/common/PublishButton.tsx

@@ -1,9 +1,10 @@
 import { Link } from 'react-router-dom';
 
+import { ListItemIcon, MenuItem } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 
-import { LibraryIcon } from '@graasp/ui';
+import { ActionButton, ActionButtonVariant, LibraryIcon } from '@graasp/ui';
 
 import { buildItemPublishPath } from '@/config/paths';
 
@@ -16,26 +17,49 @@ import { BUILDER } from '../../langs/constants';
 
 type Props = {
   itemId: string;
+  type?: ActionButtonVariant;
 };
 
-const PublishButton = ({ itemId }: Props): JSX.Element => {
+const PublishButton = ({
+  itemId,
+  type = ActionButton.ICON_BUTTON,
+}: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
 
   const title = translateBuilder(BUILDER.LIBRARY_SETTINGS_BUTTON_TITLE);
 
-  return (
-    <Tooltip title={title}>
-      <IconButton
-        aria-label={title}
-        className={PUBLISH_ITEM_BUTTON_CLASS}
-        id={buildPublishButtonId(itemId)}
-        to={buildItemPublishPath(itemId)}
-        component={Link}
-      >
-        <LibraryIcon size={24} showSetting primaryColor="#777" />
-      </IconButton>
-    </Tooltip>
-  );
+  switch (type) {
+    case ActionButton.MENU_ITEM:
+      return (
+        <MenuItem
+          key={title}
+          className={PUBLISH_ITEM_BUTTON_CLASS}
+          id={buildPublishButtonId(itemId)}
+          component={Link}
+          to={buildItemPublishPath(itemId)}
+        >
+          <ListItemIcon>
+            <LibraryIcon size={24} showSetting primaryColor="#777" />
+          </ListItemIcon>
+          {title}
+        </MenuItem>
+      );
+    case ActionButton.ICON_BUTTON:
+    default:
+      return (
+        <Tooltip title={title}>
+          <IconButton
+            aria-label={title}
+            className={PUBLISH_ITEM_BUTTON_CLASS}
+            id={buildPublishButtonId(itemId)}
+            to={buildItemPublishPath(itemId)}
+            component={Link}
+          >
+            <LibraryIcon size={24} showSetting primaryColor="#777" />
+          </IconButton>
+        </Tooltip>
+      );
+  }
 };
 
 export default PublishButton;

src/components/common/ShareButton.tsx

@@ -1,6 +1,11 @@
 import { Link } from 'react-router-dom';
 
-import { ShareButton as GraaspShareButton } from '@graasp/ui';
+import { styled } from '@mui/material';
+
+import {
+  ActionButtonVariant,
+  ShareButton as GraaspShareButton,
+} from '@graasp/ui';
 
 import { buildItemSharePath } from '@/config/paths';
 
@@ -13,20 +18,27 @@ import { BUILDER } from '../../langs/constants';
 
 type Props = {
   itemId: string;
+  type?: ActionButtonVariant;
 };
 
-const ShareButton = ({ itemId }: Props): JSX.Element => {
+const StyledLink = styled(Link)(() => ({
+  textDecoration: 'none',
+  color: 'black',
+}));
+
+const ShareButton = ({ itemId, type }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
 
   return (
-    <Link to={buildItemSharePath(itemId)}>
+    <StyledLink to={buildItemSharePath(itemId)}>
       <GraaspShareButton
         tooltip={translateBuilder(BUILDER.SHARE_ITEM_BUTTON)}
         ariaLabel={translateBuilder(BUILDER.SHARE_ITEM_BUTTON)}
         className={SHARE_ITEM_BUTTON_CLASS}
         id={buildShareButtonId(itemId)}
+        type={type}
       />
-    </Link>
+    </StyledLink>
   );
 };