feat: add Collpase button to item menu

src/components/common/CollapseButton.js

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '@material-ui/core/IconButton';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ExpandLessIcon from '@material-ui/icons/ExpandLess';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '@material-ui/core/Tooltip';
+import MenuItem from '@material-ui/core/MenuItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import { MUTATION_KEYS } from '@graasp/query-client';
+import { useMutation } from '../../config/queryClient';
+import { COLLAPSE_ITEM_BUTTON_CLASS } from '../../config/selectors';
+import { BUTTON_TYPES } from '../../config/constants';
+
+const CollapseButton = ({ item, type, onClick }) => {
+  const { t } = useTranslation();
+
+  const editItem = useMutation(MUTATION_KEYS.EDIT_ITEM);
+  const [isCollapsible, setIsCollapsible] = useState(item?.settings?.isCollapsible);
+
+  const handleCollapse = () => {
+    setIsCollapsible(!isCollapsible);
+
+    editItem.mutate({
+      id: item.id,
+      name: item.name,
+      settings: {
+        isCollapsible: !isCollapsible,
+      },
+    });
+    onClick?.();
+  };
+
+  const icon = isCollapsible ? <ExpandLessIcon /> : <ExpandMoreIcon />;
+  const text = isCollapsible ? t('Uncollapse') : t('Collapse');
+
+  switch (type) {
+    case BUTTON_TYPES.MENU_ITEM:
+      return (
+        <MenuItem
+          key={text}
+          onClick={handleCollapse}
+          className={COLLAPSE_ITEM_BUTTON_CLASS}
+        >
+          <ListItemIcon>{icon}</ListItemIcon>
+          {text}
+        </MenuItem>
+      );
+    default:
+    case BUTTON_TYPES.ICON_BUTTON:
+      return (
+        <Tooltip title={text}>
+          <IconButton
+            aria-label={text}
+            className={COLLAPSE_ITEM_BUTTON_CLASS}
+            onClick={handleCollapse}
+          >
+            {icon}
+          </IconButton>
+        </Tooltip>
+      );
+  }
+};
+
+CollapseButton.propTypes = {
+  item: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    settings: PropTypes.shape({
+      isCollapsible: PropTypes.bool,
+    }),
+  }),
+  type: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+CollapseButton.defaultProps = {
+  item: {
+    settings: {
+      isCollapsible: false,
+    },
+  },
+  type: BUTTON_TYPES.ICON_BUTTON,
+  onClick: null,
+};
+
+export default CollapseButton;

src/components/item/settings/ItemSettings.js

@@ -15,7 +15,7 @@ import { useMutation } from '../../../config/queryClient';
 import {
   SETTINGS_CHATBOX_TOGGLE_ID,
   SETTINGS_PINNED_TOGGLE_ID,
-  SETTINGS_EXPANDABLE_TOGGLE_ID,
+  SETTINGS_COLLAPSE_TOGGLE_ID,
 } from '../../../config/selectors';
 import ThumbnailSetting from './ThumbnailSetting';
 import CCLicenseSelection from '../publish/CCLicenseSelection';
@@ -61,12 +61,12 @@ const ItemSettings = ({ item }) => {
     });
   };
 
-  const handleExpandable = (event) => {
+  const handleCollapse = (event) => {
     editItem.mutate({
       id: item.get('id'),
       name: item.get('name'),
       settings: {
-        isExpandable: event.target.checked,
+        isCollapsible: event.target.checked,
       },
     });
   };
@@ -95,16 +95,16 @@ const ItemSettings = ({ item }) => {
     return <FormControlLabel label={t('Show Chat')} control={control} />;
   };
 
-  const renderExpandableSetting = () => {
+  const renderCollapseSetting = () => {
     const control = (
       <Switch
-        id={SETTINGS_EXPANDABLE_TOGGLE_ID}
-        onChange={handleExpandable}
-        checked={settings?.isExpandable}
+        id={SETTINGS_COLLAPSE_TOGGLE_ID}
+        onChange={handleCollapse}
+        checked={settings?.isCollapsible}
         color="primary"
       />
     );
-    return <FormControlLabel label={t('Expandable item')} control={control} />;
+    return <FormControlLabel label={t('Collapsible item')} control={control} />;
   };
 
   return (
@@ -116,7 +116,7 @@ const ItemSettings = ({ item }) => {
       <FormGroup>
         {renderPinSetting()}
         {renderChatSetting()}
-        {renderExpandableSetting()}
+        {renderCollapseSetting()}
       </FormGroup>
       <ThumbnailSetting item={item} />
       <CCLicenseSelection item={item} />

src/components/main/ItemMenu.js

@@ -22,6 +22,7 @@ import CopyButton from './CopyButton';
 import RecycleButton from '../common/RecycleButton';
 import HideButton from '../common/HideButton';
 import PinButton from '../common/PinButton';
+import CollapseButton from '../common/CollapseButton';
 import FavoriteButton from '../common/FavoriteButton';
 import { BUTTON_TYPES } from '../../config/constants';
 import { CurrentUserContext } from '../context/CurrentUserContext';
@@ -65,6 +66,7 @@ const ItemMenu = ({ item, canEdit }) => {
       />,
       <HideButton type={BUTTON_TYPES.MENU_ITEM} item={item} />,
       <PinButton type={BUTTON_TYPES.MENU_ITEM} item={item} />,
+      <CollapseButton type={BUTTON_TYPES.MENU_ITEM} item={item} />,
       <RecycleButton
         type={BUTTON_TYPES.MENU_ITEM}
         itemIds={[item.id]}

src/config/selectors.js

@@ -22,6 +22,7 @@ export const ITEMS_GRID_NO_ITEM_ID = 'itemsGridNoItem';
 export const EDIT_ITEM_BUTTON_CLASS = 'editButton';
 export const FAVORITE_ITEM_BUTTON_CLASS = 'favoriteButton';
 export const PIN_ITEM_BUTTON_CLASS = 'pinButton';
+export const COLLAPSE_ITEM_BUTTON_CLASS = 'collapseButton';
 export const HIDDEN_ITEM_BUTTON_CLASS = 'hideButton';
 export const SHARE_ITEM_BUTTON_CLASS = 'itemMenuShareButton';
 export const PUBLISH_ITEM_BUTTON_CLASS = 'publishItemButton';
@@ -159,7 +160,7 @@ export const buildItemsTableId = (id) => `itemsTable-${id}`;
 
 export const SETTINGS_PINNED_TOGGLE_ID = 'settingsPinnedToggle';
 export const SETTINGS_CHATBOX_TOGGLE_ID = 'settingsChatboxToggle';
-export const SETTINGS_EXPANDABLE_TOGGLE_ID = 'settingsExpandableToggle';
+export const SETTINGS_COLLAPSE_TOGGLE_ID = 'settingsCollapseToggle';
 
 export const ITEMS_TABLE_RESTORE_SELECTED_ITEMS_ID =
   'itemsTableRestoreSelectedItems';

src/langs/en.json

@@ -134,7 +134,9 @@
     "Pin": "Pin this item",
     "Unpin": "Unpin this item",
     "Show Chat": "Show Chat",
-    "Expandable item": "Set as expandable item",
+    "Collapsible item": "Set as collapsible item",
+    "Collapse": "Collapse",
+    "Uncollapse": "Uncollapse",
     "Write the folder decription here…": "Write the folder decription here…",
     "This item is accessible if the visitor provides a ": "This item is accessible if the visitor provides a ",
     "This item is public. Anyone can access it.": "This item is public. Anyone can access it.",

src/langs/fr.json

@@ -135,7 +135,9 @@
     "Pin": "Epingler",
     "Unpin": "Détacher",
     "Show Chat": "Afficher le chat",
-    "Expandable item": "Définir comme élément extensible",
+    "Collapsible item": "Définir comme élément pliant",
+    "Collapse": "Collapse",
+    "Uncollapse": "Uncollapse",
     "Write the folder decription here…": "Entrer la description du dossier ici…",
     "Information": "Informations",
     "Save": "Sauvegarder",