@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.272

package/components/routes/hits/search/HitBrowser.tsx

@@ -1,318 +0,0 @@
-import { ChevronLeft, Close, ManageSearch } from '@mui/icons-material';
-import {
-  Box,
-  Card,
-  Checkbox,
-  Collapse,
-  Drawer,
-  Fab,
-  IconButton,
-  Stack,
-  Tooltip,
-  Typography,
-  useMediaQuery,
-  useTheme
-} from '@mui/material';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import HitSearchProvider, { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
-import ParameterProvider, { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
-import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
-import FlexPort from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexPort';
-import HitSummary from '@cccsaurora/howler-ui/components/elements/hit/HitSummary';
-import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary';
-import dayjs from 'dayjs';
-import { has, isNull } from 'lodash-es';
-import type { FC, ReactNode } from 'react';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { useLocation, useParams, useSearchParams } from 'react-router-dom';
-import { useContextSelector } from 'use-context-selector';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import InformationPane from './InformationPane';
-import SearchPane from './SearchPane';
-import HitGrid from './grid/HitGrid';
-
-// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md
-const Wrapper = memo<{ show: boolean; showDrawer: boolean; children: ReactNode; onClose: () => void }>(
-  ({ show, showDrawer, children, onClose }) => {
-    return (
-      <ErrorBoundary>
-        {showDrawer ? (
-          <Drawer
-            onClose={onClose}
-            open={show}
-            anchor="right"
-            PaperProps={{ sx: { backgroundImage: 'none', overflow: 'hidden', width: '75vw' } }}
-          >
-            {children}
-          </Drawer>
-        ) : (
-          <FlexPort disableOverflow>{children}</FlexPort>
-        )}
-      </ErrorBoundary>
-    );
-  }
-);
-
-const HitBrowser: FC = () => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-
-  const views = useContextSelector(ViewContext, ctx => ctx.views);
-  const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
-
-  const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
-  const setSelected = useContextSelector(ParameterContext, ctx => ctx.setSelected);
-  const query = useContextSelector(ParameterContext, ctx => ctx.query);
-  const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
-  const setOffset = useContextSelector(ParameterContext, ctx => ctx.setOffset);
-
-  const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
-  const addHitToSelection = useContextSelector(HitContext, ctx => ctx.addHitToSelection);
-  const removeHitFromSelection = useContextSelector(HitContext, ctx => ctx.removeHitFromSelection);
-  const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
-
-  const searchPaneWidth = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null)[0];
-  const forceDrawer = useMyLocalStorageItem(StorageKey.FORCE_DRAWER, false)[0];
-
-  const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
-  const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
-  const response = useContextSelector(HitSearchContext, ctx => ctx.response);
-
-  const queryHistory = useContextSelector(HitSearchContext, ctx => ctx?.queryHistory ?? {});
-  const setQueryHistory = useContextSelector(HitSearchContext, ctx => ctx?.setQueryHistory);
-
-  const setQueryList = useMyLocalStorageItem(StorageKey.QUERY_HISTORY, '')[1];
-
-  const location = useLocation();
-  const routeParams = useParams();
-  const [searchParams] = useSearchParams();
-
-  const [show, setShow] = useState(!!selected);
-  useEffect(() => setShow(!!selected), [selected]);
-
-  const showDrawer = useMediaQuery(theme.breakpoints.down(1600)) || forceDrawer || displayType === 'grid';
-
-  // State that makes up the request
-  const summaryQuery = useMemo(() => {
-    const bundle = location.pathname.startsWith('/bundles') && routeParams.id;
-
-    let _fullQuery = query;
-    if (bundle) {
-      _fullQuery = `(howler.bundles:${bundle}) AND (${_fullQuery})`;
-    } else if (viewId) {
-      _fullQuery = `(${views[viewId]?.query || 'howler.id:*'}) AND (${_fullQuery})`;
-    }
-
-    return _fullQuery;
-  }, [location.pathname, query, routeParams.id, views, viewId]);
-
-  const showSelectBar = useMemo(() => {
-    if (selectedHits.length > 1) {
-      return true;
-    }
-
-    if (selectedHits.length === 1 && selected && selectedHits[0]?.howler.id !== selected) {
-      return true;
-    }
-
-    return false;
-  }, [selected, selectedHits]);
-
-  useEffect(() => {
-    const newQuery = searchParams.get('query');
-    if (newQuery) {
-      setQueryHistory(_queryHistory => ({
-        ..._queryHistory,
-        [newQuery]: new Date().toISOString()
-      }));
-    }
-  }, [searchParams, setQueryHistory]);
-
-  useEffect(() => {
-    setQueryList(JSON.stringify(queryHistory));
-  }, [queryHistory, setQueryList]);
-
-  useEffect(() => {
-    // On load check to filter out any queries older than one month
-    setQueryHistory(_queryHistory => {
-      const filterQueryTime = dayjs().subtract(1, 'month').toISOString();
-
-      return Object.fromEntries(Object.entries(_queryHistory).filter(([_, value]) => value > filterQueryTime));
-    });
-  }, [setQueryHistory]);
-
-  useEffect(() => {
-    if (!location.pathname.startsWith('/views') || has(views, viewId)) {
-      return;
-    }
-
-    fetchViews([viewId]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [location.pathname, viewId]);
-
-  const onClose = useCallback(() => {
-    setSelected(null);
-  }, [setSelected]);
-
-  useEffect(() => {
-    if (
-      selected &&
-      response &&
-      !response.items.some(_hit => _hit.howler.id === selected) &&
-      (!location.pathname.startsWith('/bundles') || routeParams.id !== selected)
-    ) {
-      setSelected(null);
-      if (selectedHits.length < 2) {
-        removeHitFromSelection(selected);
-      }
-      return;
-    }
-
-    if (selected && !selectedHits.some(_hit => _hit?.howler.id === selected)) {
-      addHitToSelection(selected);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [addHitToSelection, location.pathname, removeHitFromSelection, response, routeParams.id, selected, setSelected]);
-
-  return (
-    <Stack direction="row" flex={1} sx={{ overflow: 'hidden' }}>
-      <Box
-        position="relative"
-        flex={1.15}
-        height="100%"
-        display="flex"
-        sx={[{ overflow: 'auto' }, displayType === 'list' && !isNull(searchPaneWidth) && { maxWidth: searchPaneWidth }]}
-      >
-        <ErrorBoundary>{displayType === 'list' ? <SearchPane /> : <HitGrid />}</ErrorBoundary>
-        <Collapse
-          in={showSelectBar}
-          unmountOnExit
-          sx={{
-            position: 'absolute',
-            bottom: 0,
-            left: 0,
-            right: 0,
-            backgroundColor: theme.palette.background.paper,
-            py: 1,
-            px: 2
-          }}
-        >
-          <Stack direction="row" alignItems="center" spacing={1}>
-            <Tooltip title={t('hit.search.select.all')}>
-              <Checkbox
-                size="small"
-                checked={
-                  !!response?.items.every(_hit1 => selectedHits.some(_hit2 => _hit1.howler.id === _hit2.howler.id))
-                }
-                onChange={(__, checked) =>
-                  checked ? response.items.forEach(_hit => addHitToSelection(_hit.howler.id)) : clearSelectedHits()
-                }
-              />
-            </Tooltip>
-            <Typography>
-              <Trans i18nKey="hit.search.selected" values={{ size: selectedHits.length }} />
-            </Typography>
-
-            <FlexOne />
-
-            <Tooltip title={t('hit.search.select.clear')}>
-              <IconButton
-                size="small"
-                onClick={() => {
-                  setSelected(null);
-                  clearSelectedHits();
-                }}
-              >
-                <Close />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title={t('hit.search.select.view')}>
-              <IconButton
-                size="small"
-                onClick={() => {
-                  setOffset(0);
-                  setQuery(`howler.id:(${selectedHits.map(hit => hit.howler.id).join(' OR ')})`);
-                }}
-              >
-                <ManageSearch />
-              </IconButton>
-            </Tooltip>
-          </Stack>
-        </Collapse>
-      </Box>
-      <Wrapper show={show} showDrawer={showDrawer} onClose={() => setShow(false)}>
-        <HitSummary query={summaryQuery} response={response} />
-        <Card
-          variant="outlined"
-          sx={[
-            {
-              zIndex: 100,
-              overflow: 'visible',
-              position: 'absolute',
-              top: 0,
-              bottom: 0,
-              left: '100%',
-              right: 0,
-              borderTop: 0,
-              borderBottom: 0,
-              transition: theme.transitions.create('left')
-            },
-            selected && {
-              left: theme.spacing(5)
-            },
-            location.pathname.startsWith('/bundles') &&
-              routeParams.id && {
-                left: 0
-              }
-          ]}
-        >
-          <InformationPane onClose={onClose} />
-          {selected && !(location.pathname.startsWith('/bundles') && routeParams.id) && (
-            <Box
-              onClick={onClose}
-              sx={{
-                cursor: 'pointer',
-                position: 'absolute',
-                right: '100%',
-                width: theme.spacing(5),
-                top: 0,
-                bottom: 0,
-                background: `linear-gradient(to right, transparent, ${theme.palette.background.paper})`
-              }}
-            />
-          )}
-        </Card>
-      </Wrapper>
-      {showDrawer && (
-        <Fab
-          onClick={() => setShow(_show => !_show)}
-          color="primary"
-          sx={{
-            position: 'fixed',
-            right: show ? `calc(100% - ${theme.spacing(8)})` : theme.spacing(2),
-            bottom: showSelectBar ? theme.spacing(6) : theme.spacing(1),
-            zIndex: 1201,
-            transition: theme.transitions.create(['right', 'bottom'])
-          }}
-        >
-          <ChevronLeft sx={{ transition: 'rotate 250ms', rotate: show ? '180deg' : '0deg' }} />
-        </Fab>
-      )}
-    </Stack>
-  );
-};
-
-const HitBrowserProvider: FC = () => {
-  return (
-    <ParameterProvider>
-      <HitSearchProvider>
-        <HitBrowser />
-      </HitSearchProvider>
-    </ParameterProvider>
-  );
-};
-
-export default HitBrowserProvider;

package/components/routes/hits/search/HitContextMenu.tsx

@@ -1,260 +0,0 @@
-import {
-  Assignment,
-  Edit,
-  HowToVote,
-  KeyboardArrowRight,
-  OpenInNew,
-  QueryStats,
-  SettingsSuggest,
-  Terminal
-} from '@mui/icons-material';
-import { Box, Divider, Fade, ListItemIcon, ListItemText, Menu, MenuItem, MenuList, Paper } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
-import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { TOP_ROW, VOTE_OPTIONS, type ActionButton } from '@cccsaurora/howler-ui/components/elements/hit/actions/SharedComponents';
-import useHitActions from '@cccsaurora/howler-ui/components/hooks/useHitActions';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import useMyActionFunctions from '@cccsaurora/howler-ui/components/routes/action/useMyActionFunctions';
-import { capitalize, groupBy } from 'lodash-es';
-import type { Action } from '@cccsaurora/howler-ui/models/entities/generated/Action';
-import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
-import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import type { FC, MouseEventHandler, PropsWithChildren } from 'react';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { usePluginStore } from 'react-pluggable';
-import { Link } from 'react-router-dom';
-import { useContextSelector } from 'use-context-selector';
-
-// TODO: Eventually make this more generic
-
-interface HitContextMenuProps {
-  getSelectedId: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => string;
-  Component?: React.ElementType;
-}
-
-const ORDER = ['assessment', 'vote', 'action'];
-const ICON_MAP = {
-  assessment: <Assignment />,
-  vote: <HowToVote />,
-  action: <Edit />
-};
-
-const HitContextMenu: FC<PropsWithChildren<HitContextMenuProps>> = ({ children, getSelectedId, Component = Box }) => {
-  const { t } = useTranslation();
-  const { dispatchApi } = useMyApi();
-  const { executeAction } = useMyActionFunctions();
-  const { config } = useContext(ApiConfigContext);
-  const pluginStore = usePluginStore();
-  const { getMatchingAnalytic } = useMatchers();
-
-  const [id, setId] = useState<string>(null);
-
-  const hit = useContextSelector(HitContext, ctx => ctx.hits[id]);
-  const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
-
-  const [analytic, setAnalytic] = useState<Analytic>(null);
-
-  const [anchorEl, setAnchorEl] = useState<HTMLElement>();
-  const [clickLocation, setClickLocation] = useState<[number, number]>([-1, -1]);
-  const [actions, setActions] = useState<Action[]>([]);
-
-  const [show, setShow] = useState<{ [index: string]: boolean }>({});
-
-  const hits = useMemo(
-    () => (selectedHits.some(_hit => _hit.howler.id === hit?.howler.id) ? selectedHits : [hit]),
-    [hit, selectedHits]
-  );
-
-  const { availableTransitions, canVote, canAssess, assess, vote } = useHitActions(hits);
-
-  const onContextMenu: MouseEventHandler<HTMLDivElement> = useCallback(
-    async event => {
-      if (anchorEl) {
-        event.preventDefault();
-        setAnchorEl(null);
-        return;
-      }
-      event.preventDefault();
-
-      const _id = getSelectedId(event);
-      setId(_id);
-
-      const clientRect = (event.target as HTMLElement).getBoundingClientRect();
-      setClickLocation([event.clientX - clientRect.x, event.clientY - clientRect.y]);
-
-      setAnchorEl(event.target as HTMLElement);
-
-      const _actions = (await dispatchApi(api.search.action.post({ query: 'action_id:*' }), { throwError: false }))
-        ?.items;
-
-      if (_actions) {
-        setActions(_actions);
-      }
-    },
-    [anchorEl, dispatchApi, getSelectedId]
-  );
-
-  const rowStatus = useMemo(
-    () => ({
-      assessment: canAssess,
-      vote: canVote
-    }),
-    [canAssess, canVote]
-  );
-
-  const pluginActions = howlerPluginStore.plugins.flatMap(plugin =>
-    pluginStore.executeFunction(`${plugin}.actions`, hits)
-  );
-
-  const entries = useMemo<[string, ActionButton[]][]>(() => {
-    let _actions: ActionButton[] = [...availableTransitions, ...pluginActions];
-
-    if (canVote) {
-      _actions = [
-        ..._actions,
-        ...VOTE_OPTIONS.map(
-          option => ({ ...option, actionFunction: () => vote(option.name.toLowerCase()) }) as ActionButton
-        )
-      ];
-    }
-
-    if (config.lookups?.['howler.assessment'] && canAssess) {
-      _actions = [
-        ..._actions,
-        ...config.lookups['howler.assessment']
-          .filter(_assessment =>
-            analytic?.triage_settings?.valid_assessments
-              ? analytic.triage_settings?.valid_assessments.includes(_assessment)
-              : true
-          )
-          .sort((a, b) => +TOP_ROW.includes(b) - +TOP_ROW.includes(a))
-          .map<ActionButton>(assessment => ({
-            type: 'assessment',
-            name: assessment,
-            actionFunction: async () => {
-              await assess(assessment, analytic?.triage_settings?.skip_rationale);
-            }
-          }))
-      ];
-    }
-
-    return Object.entries(groupBy(_actions, 'type')).sort(([a], [b]) => ORDER.indexOf(a) - ORDER.indexOf(b));
-  }, [analytic, assess, availableTransitions, canAssess, canVote, config.lookups, vote, pluginActions]);
-
-  useEffect(() => {
-    if (!hit?.howler.analytic) {
-      return;
-    }
-
-    getMatchingAnalytic(hit).then(setAnalytic);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hit?.howler.analytic]);
-
-  useEffect(() => {
-    if (!anchorEl) {
-      setClickLocation([-1, -1]);
-      setShow({});
-      setAnalytic(null);
-    }
-  }, [anchorEl]);
-
-  return (
-    <Component id="contextMenu" onContextMenu={onContextMenu}>
-      {children}
-      <Menu
-        id="hit-menu"
-        open={!!anchorEl}
-        anchorEl={anchorEl}
-        onClose={() => setAnchorEl(null)}
-        slotProps={{
-          paper: {
-            sx: {
-              transform: `translate(${clickLocation[0]}px, ${clickLocation[1]}px) !important`,
-              overflow: 'visible !important'
-            }
-          }
-        }}
-        MenuListProps={{ dense: true, sx: { minWidth: '250px' } }}
-        anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
-        onClick={() => setAnchorEl(null)}
-      >
-        <MenuItem component={Link} to={`/hits/${hit?.howler.id}`} disabled={!hit}>
-          <ListItemIcon>
-            <OpenInNew />
-          </ListItemIcon>
-          <ListItemText>{t('hit.panel.open')}</ListItemText>
-        </MenuItem>
-        <MenuItem component={Link} to={`/analytics/${analytic?.analytic_id}`} disabled={!analytic}>
-          <ListItemIcon>
-            <QueryStats />
-          </ListItemIcon>
-          <ListItemText>{t('hit.panel.analytic.open')}</ListItemText>
-        </MenuItem>
-        <Divider />
-        {entries.map(([type, items]) => (
-          <MenuItem
-            key={type}
-            sx={{ position: 'relative' }}
-            onMouseEnter={() => setShow(_show => ({ ..._show, [type]: true }))}
-            onMouseLeave={() => setShow(_show => ({ ..._show, [type]: false }))}
-            disabled={rowStatus[type] === false}
-          >
-            <ListItemIcon>{ICON_MAP[type] ?? <Terminal />}</ListItemIcon>
-            <ListItemText sx={{ flex: 1 }}>{t(`hit.details.actions.${type}`)}</ListItemText>
-            {rowStatus[type] !== false && (
-              <KeyboardArrowRight fontSize="small" sx={{ color: 'text.secondary', mr: -1 }} />
-            )}
-            <Fade in={show[type]} unmountOnExit>
-              <Paper
-                sx={{ position: 'absolute', top: 0, left: '100%', maxHeight: '300px', overflow: 'auto' }}
-                elevation={8}
-              >
-                <MenuList sx={{ p: 0, borderTopLeftRadius: 0 }} dense>
-                  {items.map(a => (
-                    <MenuItem value={a.name} onClick={a.actionFunction} key={a.name}>
-                      {a.i18nKey ? t(a.i18nKey) : capitalize(a.name)}
-                    </MenuItem>
-                  ))}
-                </MenuList>
-              </Paper>
-            </Fade>
-          </MenuItem>
-        ))}
-        <MenuItem
-          sx={{ position: 'relative' }}
-          onMouseEnter={() => setShow(_show => ({ ..._show, actions: true }))}
-          onMouseLeave={() => setShow(_show => ({ ..._show, actions: false }))}
-          disabled={actions.length < 1}
-        >
-          <ListItemIcon>
-            <SettingsSuggest />
-          </ListItemIcon>
-          <ListItemText sx={{ flex: 1 }}>{t('route.actions.change')}</ListItemText>
-          {actions.length > 0 && <KeyboardArrowRight fontSize="small" sx={{ color: 'text.secondary', mr: -1 }} />}
-          <Fade in={show.actions} unmountOnExit>
-            <Paper
-              sx={{ position: 'absolute', top: 0, left: '100%', maxHeight: '300px', overflow: 'auto' }}
-              elevation={8}
-            >
-              <MenuList sx={{ p: 0 }} dense>
-                {actions.map(action => (
-                  <MenuItem
-                    key={action.action_id}
-                    onClick={() => executeAction(action.action_id, `howler.id:${hit?.howler.id}`)}
-                  >
-                    <ListItemText>{action.name}</ListItemText>
-                  </MenuItem>
-                ))}
-              </MenuList>
-            </Paper>
-          </Fade>
-        </MenuItem>
-      </Menu>
-    </Component>
-  );
-};
-
-export default HitContextMenu;