Merge pull request #55 from OpenConceptLab/issues#2487

OpenConceptLab/ocl_issues#2487 | Project Toolbar folding to overflow menu on viewport shrink

Author: snyaggarwal

src/components/map-projects/Controls.jsx

@@ -17,15 +17,18 @@ import SaveIcon from '@mui/icons-material/Save';
 import DeleteIcon from '@mui/icons-material/Delete';
 import CopyIcon from '@mui/icons-material/CopyAll';
 import JSONIcon from '@mui/icons-material/DataObject';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { copyToClipboard } from '../../common/utils'
 import RepoIcon from '../repos/RepoIcon'
+import { splitSecondaryActionsByVisibility } from './controlsLayout'
 
 const IkonButton = ({title, icon, onClick, color, disabled, id}) => {
   return (
-    <Tooltip title={title}>
+    <Tooltip title={title} placement='bottom'>
       <span>
         <IconButton
           id={id}
+          aria-label={title}
           color={color}
           size='small'
           sx={{textTransform: 'none', margin: '2px 5px'}}
@@ -41,61 +44,145 @@ const IkonButton = ({title, icon, onClick, color, disabled, id}) => {
 
 const Controls = ({project, onDownload, onSave, onDelete, owner, file, isSaving, onImport, importResponse, onDownloadImportReport, onProjectLogsClick, isProjectsLogOpen, configure, setConfigure, isCoreUser, loadingMatches, onCopyClick}) => {
   const { t } = useTranslation();
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const downloadOpen = Boolean(anchorEl);
+  const toolbarRef = React.useRef(null)
+  const overflowButtonRef = React.useRef(null)
+  const [downloadAnchorEl, setDownloadAnchorEl] = React.useState(null);
+  const [overflowAnchorEl, setOverflowAnchorEl] = React.useState(null);
+  const [toolbarWidth, setToolbarWidth] = React.useState(Number.POSITIVE_INFINITY)
+  const downloadOpen = Boolean(downloadAnchorEl);
+  const overflowOpen = Boolean(overflowAnchorEl);
   const lastSavedText = project?.updated_at ? moment(project.updated_at).fromNow() : false
   const isRunningImport = ['STARTED', 'RECEIVED', 'PENDING'].includes(importResponse?.state)
+  const hasPersistentOverflowActions = Boolean(project?.id)
+
+  React.useEffect(() => {
+    const node = toolbarRef.current
+    if (!node) return undefined
+
+    const updateToolbarWidth = () => {
+      const nextWidth = node.getBoundingClientRect?.().width
+      setToolbarWidth(nextWidth || Number.POSITIVE_INFINITY)
+    }
+
+    updateToolbarWidth()
+
+    if (typeof ResizeObserver !== 'undefined') {
+      const observer = new ResizeObserver(updateToolbarWidth)
+      observer.observe(node)
+      return () => observer.disconnect()
+    }
+
+    window.addEventListener('resize', updateToolbarWidth)
+    return () => window.removeEventListener('resize', updateToolbarWidth)
+  }, [])
+
+  const actionsByKey = {
+    settings: {
+      key: 'settings',
+      color: configure ? 'primary' : 'secondary',
+      disabled: loadingMatches,
+      icon: <SettingsIcon />,
+      onClick: () => setConfigure(!configure),
+      title: t('map_project.configure_mapping_project_tooltip')
+    },
+    timeline: {
+      key: 'timeline',
+      color: isProjectsLogOpen ? 'primary' : 'secondary',
+      icon: <TimelineIcon />,
+      onClick: onProjectLogsClick,
+      title: t('map_project.project_logs_tooltip')
+    },
+    download: {
+      key: 'download',
+      color: downloadOpen ? 'primary' : 'secondary',
+      disabled: loadingMatches,
+      icon: <DownloadIcon />,
+      onClick: event => setDownloadAnchorEl(event.currentTarget),
+      title: t('map_project.download_this_project_as_csv')
+    },
+    save: {
+      key: 'save',
+      color: 'secondary',
+      disabled: !owner || !file?.name || isSaving || loadingMatches,
+      icon: <SaveIcon />,
+      onClick: onSave,
+      title: t('map_project.save_this_project')
+    }
+  }
+
+  const { overflowActionKeys, visibleActionKeys } = splitSecondaryActionsByVisibility({
+    toolbarWidth,
+    hasOverflowItems: hasPersistentOverflowActions
+  })
+
+  const visibleSecondaryActions = visibleActionKeys.map(key => actionsByKey[key])
+  const overflowSecondaryActions = overflowActionKeys.map(key => actionsByKey[key])
+  const hasOverflowActions = hasPersistentOverflowActions || overflowSecondaryActions.length > 0
+
+  const closeDownloadMenu = () => setDownloadAnchorEl(null)
+  const closeOverflowMenu = () => setOverflowAnchorEl(null)
+
+  const onOverflowActionClick = action => event => {
+    closeOverflowMenu()
+
+    if (action.key === 'download') {
+      setDownloadAnchorEl(overflowButtonRef.current || event.currentTarget)
+      return
+    }
+
+    action.onClick(event)
+  }
 
   return (
-    <span style={{textAlign: 'right'}}>
-      <div>
-        <IkonButton
-          color={configure ? 'primary' : 'secondary'}
-          onClick={() => setConfigure(!configure)}
-          title={t('map_project.configure_mapping_project_tooltip')}
-          icon={<SettingsIcon />}
-          disabled={loadingMatches}
-        />
-        <IkonButton
-          color={isProjectsLogOpen ? 'primary' : 'secondary'}
-          onClick={onProjectLogsClick}
-          title={t('map_project.project_logs_tooltip')}
-          icon={<TimelineIcon />}
-        />
-        <IkonButton
-          color='secondary'
-          onClick={onSave}
-          title={t('map_project.save_this_project')}
-          disabled={!owner || !file?.name || isSaving || loadingMatches}
-          icon={<SaveIcon />}
-        />
-        <IkonButton
-          id='download-button'
-          color={downloadOpen ? 'primary' : 'secondary'}
-          onClick={event => setAnchorEl(event.currentTarget)}
-          title={t('map_project.download_this_project_as_csv')}
-          icon={<DownloadIcon />}
-          disabled={loadingMatches}
-        />
+    <span ref={toolbarRef} style={{display: 'flex', flex: '1 1 auto', flexDirection: 'column', alignItems: 'flex-end', maxWidth: '100%', minWidth: 0}}>
+      <div style={{display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'flex-end', alignContent: 'flex-end', width: '100%', minWidth: 0}}>
         {
-          project?.id &&
+          visibleSecondaryActions.map(action => (
             <IkonButton
-              id='copy-button'
-              color='secondary'
-              onClick={onCopyClick}
-              title={t('map_project.create_similar')}
-              icon={<CopyIcon />}
+              key={action.key}
+              color={action.color}
+              onClick={action.onClick}
+              title={action.title}
+              icon={action.icon}
+              disabled={action.disabled}
+              id={action.key === 'download' ? 'download-button' : undefined}
             />
+          ))
         }
         {
-          project?.id &&
-            <IkonButton
-              color='secondary'
-              disabled={isSaving || loadingMatches}
-              onClick={onDelete}
-              title={t('map_project.delete_this_project')}
-              icon={<DeleteIcon />}
-            />
+          visibleSecondaryActions.length > 0 &&
+            <Divider flexItem orientation='vertical' sx={{mx: 0.5, my: 0.75}} />
+        }
+        <IkonButton
+          color={actionsByKey.save.color}
+          onClick={actionsByKey.save.onClick}
+          title={actionsByKey.save.title}
+          disabled={actionsByKey.save.disabled}
+          icon={actionsByKey.save.icon}
+        />
+        {
+          hasOverflowActions &&
+            <>
+              <Divider flexItem orientation='vertical' sx={{mx: 0.5, my: 0.75}} />
+              <Tooltip title={t('common.more_actions')} placement='bottom'>
+                <span>
+                  <IconButton
+                    id='map-project-controls-overflow-button'
+                    ref={overflowButtonRef}
+                    color={overflowOpen ? 'primary' : 'secondary'}
+                    size='small'
+                    aria-label={t('common.more_actions')}
+                    aria-haspopup='menu'
+                    aria-controls={overflowOpen ? 'map-project-controls-overflow-menu' : undefined}
+                    aria-expanded={overflowOpen ? 'true' : undefined}
+                    sx={{textTransform: 'none', margin: '2px 5px'}}
+                    onClick={event => setOverflowAnchorEl(event.currentTarget)}
+                  >
+                    <MoreVertIcon />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            </>
         }
       </div>
       {
@@ -131,37 +218,78 @@ const Controls = ({project, onDownload, onSave, onDelete, owner, file, isSaving,
 
       <Menu
         id="download-menu"
-        anchorEl={anchorEl}
+        anchorEl={downloadAnchorEl}
         open={downloadOpen}
-        onClose={() => setAnchorEl(null)}
+        onClose={closeDownloadMenu}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
         slotProps={{
           list: {
-            'aria-labelledby': 'download-button',
+            'aria-labelledby': downloadAnchorEl?.id,
             role: 'listbox',
           },
         }}
       >
-        <MenuItem onClick={() => {setAnchorEl(null); onDownload('csv');}}>
+        <MenuItem onClick={() => {closeDownloadMenu(); onDownload('csv');}}>
           <ListItemIcon>
             <i className="fa-solid fa-file-csv" style={{fontSize: '1.25rem'}}></i>
           </ListItemIcon>
           <ListItemText>{t('common.download_csv')}</ListItemText>
         </MenuItem>
-        <MenuItem onClick={() => {setAnchorEl(null); onDownload('candidates_metadata');}} disabled={!isCoreUser}>
+        <MenuItem onClick={() => {closeDownloadMenu(); onDownload('candidates_metadata');}} disabled={!isCoreUser}>
           <ListItemIcon>
             <JSONIcon sx={{fontSize: '1.25rem'}} />
           </ListItemIcon>
           <ListItemText>{t('map_project.candidates_metadata')}</ListItemText>
         </MenuItem>
         <Divider />
-        <MenuItem onClick={() => {setAnchorEl(null); onImport();}} disabled={!onImport || isRunningImport}>
+        <MenuItem onClick={() => {closeDownloadMenu(); onImport();}} disabled={!onImport || isRunningImport}>
           <ListItemIcon>
             <RepoIcon noTooltip />
           </ListItemIcon>
           <ListItemText>{t('map_project.save_to_collection')}</ListItemText>
           {isRunningImport ? <CircularProgress sx={{marginLeft: '16px'}} size={20} /> : null}
         </MenuItem>
       </Menu>
+      <Menu
+        id='map-project-controls-overflow-menu'
+        anchorEl={overflowAnchorEl}
+        open={overflowOpen}
+        onClose={closeOverflowMenu}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+      >
+        {
+          overflowSecondaryActions.map(action => (
+            <MenuItem key={action.key} onClick={onOverflowActionClick(action)} disabled={action.disabled}>
+              <ListItemIcon>{action.icon}</ListItemIcon>
+              <ListItemText>{action.title}</ListItemText>
+            </MenuItem>
+          ))
+        }
+        {
+          overflowSecondaryActions.length > 0 && project?.id &&
+            <Divider />
+        }
+        {
+          project?.id &&
+            <MenuItem onClick={event => { onCopyClick(event); closeOverflowMenu(); }}>
+              <ListItemIcon><CopyIcon fontSize='small' /></ListItemIcon>
+              <ListItemText>{t('map_project.create_similar')}</ListItemText>
+            </MenuItem>
+        }
+        {
+          project?.id &&
+            <Divider />
+        }
+        {
+          project?.id &&
+            <MenuItem onClick={() => { closeOverflowMenu(); onDelete(); }} disabled={isSaving || loadingMatches} sx={{color: 'error.main'}}>
+              <ListItemIcon sx={{color: 'error.main'}}><DeleteIcon fontSize='small' /></ListItemIcon>
+              <ListItemText>{t('common.delete')}</ListItemText>
+            </MenuItem>
+        }
+      </Menu>
     </span>
 
   )

src/components/map-projects/__tests__/controlsLayout.test.js

@@ -0,0 +1,50 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+
+import {
+  getVisibleSecondaryActionCount,
+  splitSecondaryActionsByVisibility
+} from '../controlsLayout.js'
+
+test('controlsLayout keeps all secondary actions visible when width is unconstrained', () => {
+  assert.equal(
+    getVisibleSecondaryActionCount({ toolbarWidth: Number.POSITIVE_INFINITY, hasOverflowItems: true }),
+    3
+  )
+})
+
+test('controlsLayout collapses secondary actions leftmost-first when overflow is always present', () => {
+  assert.deepEqual(
+    splitSecondaryActionsByVisibility({ toolbarWidth: 260, hasOverflowItems: true }),
+    {
+      overflowActionKeys: ['settings'],
+      visibleActionKeys: ['timeline', 'download']
+    }
+  )
+
+  assert.deepEqual(
+    splitSecondaryActionsByVisibility({ toolbarWidth: 220, hasOverflowItems: true }),
+    {
+      overflowActionKeys: ['settings', 'timeline'],
+      visibleActionKeys: ['download']
+    }
+  )
+
+  assert.deepEqual(
+    splitSecondaryActionsByVisibility({ toolbarWidth: 170, hasOverflowItems: true }),
+    {
+      overflowActionKeys: ['settings', 'timeline', 'download'],
+      visibleActionKeys: []
+    }
+  )
+})
+
+test('controlsLayout may skip directly to a single visible secondary action when the overflow trigger first appears', () => {
+  assert.deepEqual(
+    splitSecondaryActionsByVisibility({ toolbarWidth: 210, hasOverflowItems: false }),
+    {
+      overflowActionKeys: ['settings', 'timeline'],
+      visibleActionKeys: ['download']
+    }
+  )
+})

src/components/map-projects/controlsLayout.js

@@ -0,0 +1,45 @@
+export const SECONDARY_ACTION_KEYS = ['settings', 'timeline', 'download']
+
+const ACTION_BUTTON_WIDTH = 46
+const TIER_DIVIDER_WIDTH = 12
+const COLLAPSE_BUFFER_WIDTH = 40
+
+const getRequiredToolbarWidth = (visibleSecondaryCount, hasOverflowItems) => {
+  let requiredWidth = ACTION_BUTTON_WIDTH // Save
+
+  if (visibleSecondaryCount > 0) {
+    requiredWidth += (visibleSecondaryCount * ACTION_BUTTON_WIDTH) + TIER_DIVIDER_WIDTH
+  }
+
+  if (hasOverflowItems) {
+    requiredWidth += ACTION_BUTTON_WIDTH + TIER_DIVIDER_WIDTH
+  }
+
+  return requiredWidth
+}
+
+export const getVisibleSecondaryActionCount = ({ toolbarWidth, hasOverflowItems }) => {
+  if (!Number.isFinite(toolbarWidth) || toolbarWidth <= 0) {
+    return SECONDARY_ACTION_KEYS.length
+  }
+
+  const effectiveToolbarWidth = Math.max(0, toolbarWidth - COLLAPSE_BUFFER_WIDTH)
+
+  for (let visibleCount = SECONDARY_ACTION_KEYS.length; visibleCount >= 0; visibleCount -= 1) {
+    const usesOverflow = hasOverflowItems || visibleCount < SECONDARY_ACTION_KEYS.length
+    if (effectiveToolbarWidth >= getRequiredToolbarWidth(visibleCount, usesOverflow)) {
+      return visibleCount
+    }
+  }
+
+  return 0
+}
+
+export const splitSecondaryActionsByVisibility = ({ toolbarWidth, hasOverflowItems }) => {
+  const visibleCount = getVisibleSecondaryActionCount({ toolbarWidth, hasOverflowItems })
+
+  return {
+    overflowActionKeys: SECONDARY_ACTION_KEYS.slice(0, SECONDARY_ACTION_KEYS.length - visibleCount),
+    visibleActionKeys: SECONDARY_ACTION_KEYS.slice(SECONDARY_ACTION_KEYS.length - visibleCount)
+  }
+}