feat(ui): drawer. inline jobs count

packages/ui/src/components/Drawer/Queues/JobsCount.tsx

@@ -1,37 +1,35 @@
 import React from 'react';
-import type { QueueJobsCounts, JobStatus } from '@/typings/gql';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import type { QueueJobsCounts } from '@/typings/gql';
 import JobStatusChip from '@/components/JobStatusChip';
-import List from '@material-ui/core/List';
 import { useJobsCountArray } from './hooks';
+import { makeStyles } from '@material-ui/core/styles';
 
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    listStyleType: 'none',
+    padding: 0,
+    '& li': {
+      marginRight: -4,
+      marginBottom: 1,
+    },
+  },
+});
 type TProps = {
   jobsCounts: QueueJobsCounts;
-  activeStatus: JobStatus;
-  isQueueSelected: boolean;
-  onSelect: (status: JobStatus) => void;
 };
 export default function QueueJobsCount(props: TProps) {
   const jobsCount = useJobsCountArray(props.jobsCounts);
+  const cls = useStyles();
   return (
-    <List disablePadding>
+    <ul className={cls.root}>
       {jobsCount.map(({ status, count }, idx) => (
-        <ListItem
-          onClick={() => props.onSelect(status)}
-          selected={props.isQueueSelected && props.activeStatus === status}
-          button
-          key={idx}
-          divider
-          dense
-        >
-          <ListItemText primary={status} />
-          <ListItemSecondaryAction>
-            <JobStatusChip size="small" status={status} label={count} />
-          </ListItemSecondaryAction>
-        </ListItem>
+        <li key={idx} title={status}>
+          <JobStatusChip size="small" status={status} label={count} />
+        </li>
       ))}
-    </List>
+    </ul>
   );
 }

packages/ui/src/components/Drawer/Queues/Queue.tsx

@@ -1,46 +1,30 @@
 import React, { memo, useCallback } from 'react';
-import type { GetQueuesQuery, JobStatus } from '@/typings/gql';
+import type { GetQueuesQuery } from '@/typings/gql';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import JobsCount from './JobsCount';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
-import InboxIcon from '@material-ui/icons/MoveToInbox';
 import PauseIcon from '@material-ui/icons/Pause';
 import { makeStyles } from '@material-ui/core/styles';
-import ExpandLessIcon from '@material-ui/icons/ExpandLess';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import IconButton from '@material-ui/core/IconButton';
-import Collapse from '@material-ui/core/Collapse';
 import Badge from '@material-ui/core/Badge';
-import { useAliveJobsCount, useQueueWorkspaceLabel } from './hooks';
+import Typography from '@material-ui/core/Typography';
+import { useQueueWorkspaceLabel } from './hooks';
 
 const useStyles = makeStyles((theme) => ({
-  root: {
-    position: 'relative',
-  },
-  collapseBtn: {
-    position: 'absolute',
-    right: theme.spacing(0.5),
-    top: '9px',
-  },
-  countChip: {
-    minWidth: '46px',
-  },
-  icon: {
-    minWidth: '32px',
+  listItem: {
+    // paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    '& .MuiListItemIcon-root': {
+      minWidth: 32,
+    },
   },
 }));
 
 type TProps = {
   queue: NonNullable<GetQueuesQuery['queues']>[0];
-  activeStatus: JobStatus;
   isSelected: boolean;
-  isExpanded: boolean;
 
   onSelect: (queue: string, label: string) => void;
-  onStatusSelect: (queue: string, label: string, status: JobStatus) => void;
-  toggleCollapse: (queue: string) => void;
 };
 const DrawerQueue = (props: TProps) => {
   const cls = useStyles();
@@ -49,62 +33,37 @@ const DrawerQueue = (props: TProps) => {
   const onSelect = useCallback(() => {
     props.onSelect(id, workspaceLabel);
   }, [id, workspaceLabel]);
-  const onStatusSelect = useCallback(
-    (status: JobStatus) => {
-      props.onStatusSelect(id, workspaceLabel, status);
-    },
-    [id, workspaceLabel],
-  );
-  const onToggleCollapse = useCallback(() => {
-    props.toggleCollapse(id);
-  }, [id]);
-  const aliveJobsCount = useAliveJobsCount(props.queue.jobsCounts);
   return (
-    <li className={cls.root}>
-      <ListItem
-        ContainerComponent="div"
-        onClick={onSelect}
-        selected={props.isSelected}
-        button
-      >
+    <ListItem
+      onClick={onSelect}
+      selected={props.isSelected}
+      className={cls.listItem}
+      dense
+      button
+    >
+      {props.queue.isPaused && (
         <ListItemIcon>
-          <Badge
-            badgeContent={aliveJobsCount}
-            color="secondary"
-            max={9999}
-            showZero
-          >
-            {props.queue.isPaused ? <PauseIcon /> : <InboxIcon />}
+          <Badge color="secondary" showZero>
+            <PauseIcon />
           </Badge>
         </ListItemIcon>
-        <ListItemText
-          primaryTypographyProps={{
-            style: {
+      )}
+      <ListItemText
+        disableTypography
+        primary={
+          <Typography
+            style={{
               textOverflow: 'ellipsis',
               overflow: 'hidden',
               whiteSpace: 'nowrap',
-            },
-          }}
-          primary={props.queue.name}
-        />
-        <ListItemSecondaryAction />
-      </ListItem>
-      <IconButton
-        onClick={onToggleCollapse}
-        size="small"
-        className={cls.collapseBtn}
-      >
-        {props.isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-      </IconButton>
-      <Collapse in={props.isExpanded} timeout="auto" unmountOnExit>
-        <JobsCount
-          onSelect={onStatusSelect}
-          isQueueSelected={props.isSelected}
-          activeStatus={props.activeStatus}
-          jobsCounts={props.queue.jobsCounts}
-        />
-      </Collapse>
-    </li>
+            }}
+          >
+            {props.queue.name}
+          </Typography>
+        }
+        secondary={<JobsCount jobsCounts={props.queue.jobsCounts} />}
+      />
+    </ListItem>
   );
 };
 

packages/ui/src/components/Drawer/Queues/hooks.ts

@@ -11,9 +11,6 @@ export const useJobsCountArray = (count: QueueJobsCounts) => {
     }));
   }, [count]);
 };
-export const useAliveJobsCount = (count: QueueJobsCounts) => {
-  return count.active + count.delayed + count.waiting;
-};
 export const useQueueWorkspaceLabel = (
   queue: NonNullable<GetQueuesQuery['queues']>[0],
 ): string => {

packages/ui/src/components/Drawer/Queues/index.tsx

@@ -1,17 +1,11 @@
 import React, { useCallback } from 'react';
-import type { GetQueuesQuery, JobStatus } from '@/typings/gql';
+import type { GetQueuesQuery } from '@/typings/gql';
 import List from '@material-ui/core/List';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import { useDrawerState } from '@/stores/drawer';
-import shallow from 'zustand/shallow';
 import Queue from './Queue';
-import { useQueuesCollapseStore } from '@/stores/queues-collapse';
 import { useAtom } from 'jotai';
-import {
-  activeQueueAtom,
-  activeQueueLabelAtom,
-  activeStatusAtom,
-} from '@/atoms/workspaces';
+import { activeQueueAtom, activeQueueLabelAtom } from '@/atoms/workspaces';
 import { useMaybeGroupQueuesByPrefix } from './hooks';
 import { useUpdateAtom } from 'jotai/utils';
 
@@ -22,34 +16,16 @@ export default function DrawerQueuesList({ queues }: TProps) {
   const groupedQueues = useMaybeGroupQueuesByPrefix(queues);
   const [activeQueue, changeActiveQueue] = useAtom(activeQueueAtom);
   const changeActiveQueueLabel = useUpdateAtom(activeQueueLabelAtom);
-  const [collapseMap, toggleCollapse] = useQueuesCollapseStore(
-    (state) => [state.queues, state.toggle],
-    shallow,
-  );
-  const [activeStatus, changeActiveStatus] = useAtom(activeStatusAtom);
   const closeDrawer = useDrawerState((state) => state.close);
   const onSelect = useCallback((queue: string, label: string) => {
     changeActiveQueue(queue);
     changeActiveQueueLabel(label);
     closeDrawer();
   }, []);
-  const onStatusSelect = useCallback(
-    (queue: string, label: string, status: JobStatus) => {
-      changeActiveQueue(queue);
-      changeActiveQueueLabel(label);
-      changeActiveStatus(status);
-      closeDrawer();
-    },
-    [],
-  );
   const renderQueue = (queue: TProps['queues'][0]) => {
     return (
       <Queue
-        isExpanded={Boolean(collapseMap[queue.id])}
-        activeStatus={activeStatus}
         onSelect={onSelect}
-        onStatusSelect={onStatusSelect}
-        toggleCollapse={toggleCollapse}
         isSelected={activeQueue === queue.id}
         key={queue.id}
         queue={queue}

packages/ui/src/components/Drawer/index.tsx

@@ -13,7 +13,6 @@ import QueuesFilter from './Filter';
 import QueuesSorter from './Sorter';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { useQueuesQuery } from '@/hooks/use-queues-query';
-import Footer from './Footer';
 import isempty from 'lodash/isEmpty';
 import Alert from '@material-ui/lab/Alert';
 
@@ -36,12 +35,6 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(0.5),
     alignItems: 'center',
   },
-  footer: {
-    marginTop: 'auto',
-    position: 'sticky',
-    bottom: 0,
-    zIndex: 2,
-  },
   dragger: {
     width: 4,
     cursor: 'ew-resize',
@@ -100,7 +93,6 @@ export default function Drawer() {
                 <QueuesSorter />
               </div>
               {sortedQueues && <QueuesList queues={sortedQueues} />}
-              {queues && <Footer queues={queues} className={cls.footer} />}
             </>
           )}
         </NetworkRequest>