@cccsaurora/howler-ui 2.14.0-dev.259 → 2.14.0-dev.264

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

@@ -0,0 +1,291 @@
+import { Close, ErrorOutline, List, SavedSearch, TableChart, Terminal } from '@mui/icons-material';
+import {
+  Box,
+  IconButton,
+  LinearProgress,
+  Stack,
+  ToggleButton,
+  ToggleButtonGroup,
+  Tooltip,
+  Typography,
+  useMediaQuery,
+  useTheme
+} from '@mui/material';
+import { grey } from '@mui/material/colors';
+import AppListEmpty from 'commons/components/display/AppListEmpty';
+import PageCenter from 'commons/components/pages/PageCenter';
+import { HitContext } from 'components/app/providers/HitProvider';
+import { HitSearchContext } from 'components/app/providers/HitSearchProvider';
+import { ParameterContext } from 'components/app/providers/ParameterProvider';
+import { ViewContext } from 'components/app/providers/ViewProvider';
+import FlexOne from 'components/elements/addons/layout/FlexOne';
+import FlexPort from 'components/elements/addons/layout/FlexPort';
+import VSBox from 'components/elements/addons/layout/vsbox/VSBox';
+import VSBoxContent from 'components/elements/addons/layout/vsbox/VSBoxContent';
+import VSBoxHeader from 'components/elements/addons/layout/vsbox/VSBoxHeader';
+import SearchPagination from 'components/elements/addons/search/SearchPagination';
+import SearchTotal from 'components/elements/addons/search/SearchTotal';
+import HowlerCard from 'components/elements/display/HowlerCard';
+import HitBanner from 'components/elements/hit/HitBanner';
+import HitCard from 'components/elements/hit/HitCard';
+import { HitLayout } from 'components/elements/hit/HitLayout';
+import useHitSelection from 'components/hooks/useHitSelection';
+import { useMyLocalStorageItem } from 'components/hooks/useMyLocalStorage';
+import type { Hit } from 'models/entities/generated/Hit';
+import type { FC } from 'react';
+import React, { memo, useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { StorageKey } from 'utils/constants';
+import BundleParentMenu from './BundleParentMenu';
+import { BundleScroller } from './BundleScroller';
+import HitContextMenu from './HitContextMenu';
+import HitQuery from './HitQuery';
+import ViewLink from './ViewLink';
+import QuerySettings from './shared/QuerySettings';
+
+const Item: FC<{
+  hit: Hit;
+  onClick: (event: React.MouseEvent<HTMLDivElement>, hit: Hit) => void;
+}> = memo(({ hit, onClick }) => {
+  const theme = useTheme();
+
+  const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
+
+  const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
+
+  const layout = useContextSelector(HitSearchContext, ctx => ctx.layout);
+
+  const checkMiddleClick = useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string | number) => {
+    if (e.button === 1) {
+      window.open(`${window.origin}/hits/${id}`, '_blank');
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }, []);
+
+  // Search result list item renderer.
+  return (
+    <Box
+      id={hit.howler.id}
+      onAuxClick={e => checkMiddleClick(e, hit.howler.id)}
+      onClick={ev => onClick(ev, hit)}
+      sx={[
+        {
+          mb: 2,
+          cursor: 'pointer',
+          '& span,p,h6': {
+            cursor: 'text'
+          },
+          '& .MuiPaper-root': {
+            border: '4px solid transparent',
+            boxShadow: `0px 0px 0px 0px transparent`,
+            transition: theme.transitions.create(['border-color', 'box-shadow'])
+          },
+          '& .MuiCardContent-root': {
+            p: 1,
+            pb: 1
+          },
+          '& .MuiCardContent-root:last-child': {
+            paddingBottom: 'inherit' // prevents slight height variation on selected card.
+          }
+        },
+        selectedHits.some(_hit => _hit.howler.id === hit.howler.id) && {
+          '& .MuiPaper-root': { borderColor: grey[500], boxShadow: `0px 0px 5px 2px ${grey[500]}` }
+        },
+        selected === hit.howler.id && {
+          '& .MuiPaper-root': {
+            borderColor: 'primary.main',
+            boxShadow: `0px 0px 5px 2px ${theme.palette.primary.main}`
+          }
+        }
+      ]}
+    >
+      <HitCard id={hit.howler.id} layout={layout} />
+    </Box>
+  );
+});
+
+const SearchPane: FC = () => {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const routeParams = useParams();
+
+  const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
+  const setSelected = useContextSelector(ParameterContext, ctx => ctx.setSelected);
+  const query = useContextSelector(ParameterContext, ctx => ctx.query);
+  const setOffset = useContextSelector(ParameterContext, ctx => ctx.setOffset);
+
+  const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
+  const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
+  const triggerSearch = useContextSelector(HitSearchContext, ctx => ctx.search);
+  const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
+  const response = useContextSelector(HitSearchContext, ctx => ctx.response);
+  const error = useContextSelector(HitSearchContext, ctx => ctx.error);
+  const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
+
+  const { onClick } = useHitSelection();
+
+  const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
+  const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
+  const bundleHit = useContextSelector(HitContext, ctx =>
+    location.pathname.startsWith('/bundles') ? ctx.hits[routeParams.id] : null
+  );
+
+  const searchPaneWidth = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null)[0];
+
+  const verticalSorters = useMediaQuery('(max-width: 1919px)') || (searchPaneWidth ?? Number.MAX_SAFE_INTEGER) < 900;
+
+  const selectedView = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
+
+  const getSelectedId = useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    const target = event.target as HTMLElement;
+    const selectedElement = target.closest('[id]') as HTMLElement;
+
+    if (!selectedElement) {
+      return;
+    }
+
+    return selectedElement.id;
+  }, []);
+
+  useEffect(() => {
+    if (location.pathname.startsWith('/bundles')) {
+      getHit(routeParams.id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname, routeParams.id]);
+
+  return (
+    <FlexPort id="hitscrollbar">
+      <PageCenter textAlign="left" mt={0} mb={6} ml={0} mr={0} maxWidth="1500px">
+        <VSBox top={0}>
+          <Stack ml={-1} mr={-1} sx={{ '& .overflowingContentWidgets > *': { zIndex: '2000 !important' } }} spacing={1}>
+            <ViewLink />
+
+            {bundleHit && (
+              <BundleScroller>
+                <HitContextMenu getSelectedId={() => bundleHit.howler.id}>
+                  <Stack spacing={1} sx={{ mx: -1 }}>
+                    <HowlerCard
+                      sx={[
+                        { p: 1, border: '4px solid transparent', cursor: 'pointer' },
+                        location.pathname.startsWith('/bundles') &&
+                          selected === routeParams.id && { borderColor: 'primary.main' }
+                      ]}
+                      onClick={() => {
+                        clearSelectedHits(bundleHit.howler.id);
+                        setSelected(bundleHit.howler.id);
+                      }}
+                    >
+                      <HitBanner hit={bundleHit} layout={HitLayout.DENSE} useListener />
+                    </HowlerCard>
+                  </Stack>
+                </HitContextMenu>
+              </BundleScroller>
+            )}
+
+            <Stack direction="row" spacing={1} alignItems="center">
+              <Typography
+                sx={{ color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }}
+                variant="body2"
+              >
+                {t('hit.search.prompt')}
+              </Typography>
+              {error && (
+                <Tooltip title={`${t('route.advanced.error')}: ${error}`}>
+                  <ErrorOutline fontSize="small" color="error" />
+                </Tooltip>
+              )}
+              <FlexOne />
+              {bundleHit?.howler.bundles.length > 0 && <BundleParentMenu bundle={bundleHit} />}
+              {bundleHit && (
+                <Tooltip title={t('hit.bundle.close')}>
+                  <IconButton size="small" onClick={() => navigate('/search')}>
+                    <Close />
+                  </IconButton>
+                </Tooltip>
+              )}
+              <Tooltip title={t('route.views.save')}>
+                <IconButton component={Link} disabled={!query} to={`/views/create?query=${query}`}>
+                  <SavedSearch />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title={t('route.actions.save')}>
+                <IconButton component={Link} disabled={!query} to={`/action/execute?query=${query}`}>
+                  <Terminal />
+                </IconButton>
+              </Tooltip>
+              <ToggleButtonGroup
+                exclusive
+                value={displayType}
+                onChange={(__, value) => setDisplayType(value)}
+                size="small"
+              >
+                <ToggleButton value="list">
+                  <List />
+                </ToggleButton>
+                <ToggleButton value="grid">
+                  <TableChart />
+                </ToggleButton>
+              </ToggleButtonGroup>
+            </Stack>
+          </Stack>
+
+          <VSBoxHeader ml={-3} mr={-3} px={2} pb={1} sx={{ zIndex: 999 }}>
+            <Stack sx={{ pt: 1 }}>
+              <Stack sx={{ position: 'relative', flex: 1 }}>
+                <HitQuery disabled={viewId && !selectedView} searching={searching} triggerSearch={triggerSearch} />
+                {searching && (
+                  <LinearProgress
+                    sx={theme => ({
+                      position: 'absolute',
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      borderBottomLeftRadius: theme.shape.borderRadius,
+                      borderBottomRightRadius: theme.shape.borderRadius
+                    })}
+                  />
+                )}
+              </Stack>
+
+              <QuerySettings verticalSorters={verticalSorters} boxSx={{ position: 'relative', pt: 1.5 }} />
+            </Stack>
+
+            {response && (
+              <Stack direction="row" alignItems="center" sx={{ pt: 1 }}>
+                <SearchTotal
+                  total={response.total}
+                  pageLength={response.items.length}
+                  offset={response.offset}
+                  sx={theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' })}
+                />
+                <Box flex={1} />
+                <SearchPagination
+                  total={response.total}
+                  limit={response.rows}
+                  offset={response.offset}
+                  onChange={nextOffset => setOffset(nextOffset)}
+                />
+              </Stack>
+            )}
+          </VSBoxHeader>
+          <VSBoxContent mr={-1} ml={-1} mt={1}>
+            <HitContextMenu getSelectedId={getSelectedId}>
+              {!response ? (
+                <AppListEmpty />
+              ) : (
+                response.items.map(hit => <Item key={hit.howler.id} hit={hit} onClick={onClick} />)
+              )}
+            </HitContextMenu>
+          </VSBoxContent>
+        </VSBox>
+      </PageCenter>
+    </FlexPort>
+  );
+};
+
+export default memo(SearchPane);

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

@@ -0,0 +1,96 @@
+import { Close, Edit, SavedSearch } from '@mui/icons-material';
+import { Alert, IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import { HitSearchContext } from 'components/app/providers/HitSearchProvider';
+import { ParameterContext } from 'components/app/providers/ParameterProvider';
+import { ViewContext } from 'components/app/providers/ViewProvider';
+import { has } from 'lodash-es';
+import { memo, useMemo, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+
+const ViewLink: FC = () => {
+  const { t } = useTranslation();
+
+  const query = useContextSelector(ParameterContext, ctx => ctx.query);
+  const sort = useContextSelector(ParameterContext, ctx => ctx.sort);
+  const span = useContextSelector(ParameterContext, ctx => ctx.span);
+
+  const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
+
+  const viewsReady = useContextSelector(ViewContext, ctx => has(ctx.views, viewId));
+  const selectedView = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
+
+  const viewUrl = useMemo(() => {
+    if (viewId) {
+      return `/views/${viewId}/edit`;
+    }
+
+    const keys = [];
+    if (query) {
+      keys.push(`query=${query}`);
+    }
+
+    if (sort) {
+      keys.push(`sort=${sort}`);
+    }
+
+    if (span) {
+      keys.push(`span=${span}`);
+    }
+
+    return keys.length > 0 ? `/views/create?${keys.join('&')}` : '/views/create';
+  }, [query, sort, span, viewId]);
+
+  const viewButton = useMemo(
+    () => (
+      <Tooltip title={viewId ? t('route.views.edit') : t('route.views.create')}>
+        <IconButton
+          size="small"
+          component={Link}
+          disabled={(!viewId && !query) || span?.endsWith('custom')}
+          to={viewUrl}
+        >
+          {viewId ? <Edit fontSize="small" /> : <SavedSearch />}
+        </IconButton>
+      </Tooltip>
+    ),
+    [query, span, t, viewId, viewUrl]
+  );
+
+  if (!viewId) {
+    return null;
+  }
+
+  return selectedView ? (
+    <Stack direction="row" spacing={1} alignItems="center">
+      <Tooltip title={selectedView.query}>
+        <Typography
+          sx={{ color: 'text.primary' }}
+          variant="body1"
+          component={Link}
+          to={`/views/${selectedView.view_id}/edit`}
+        >
+          {t(selectedView.title)}
+        </Typography>
+      </Tooltip>
+      {viewButton}
+    </Stack>
+  ) : (
+    viewsReady && (
+      <Alert
+        variant="outlined"
+        severity="error"
+        action={
+          <IconButton size="small" component={Link} to="/search">
+            <Close fontSize="small" />
+          </IconButton>
+        }
+      >
+        {t('view.notfound')}
+      </Alert>
+    )
+  );
+};
+
+export default memo(ViewLink);

package/components/routes/hits/search/grid/AddColumnModal.tsx

@@ -0,0 +1,98 @@
+import { Add, Check } from '@mui/icons-material';
+import { Autocomplete, Chip, Divider, Grid, IconButton, Popover, Stack, TextField } from '@mui/material';
+import useMatchers from 'components/app/hooks/useMatchers';
+import { FieldContext } from 'components/app/providers/FieldProvider';
+import { HitSearchContext } from 'components/app/providers/HitSearchProvider';
+import { has, sortBy, uniq } from 'lodash-es';
+import { memo, useContext, useEffect, useMemo, useState, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+
+const AddColumnModal: FC<{
+  open: boolean;
+  onClose: () => void;
+  anchorEl: HTMLElement;
+  addColumn: (key: string) => void;
+  columns: string[];
+}> = ({ open, onClose, anchorEl, addColumn, columns }) => {
+  const { t } = useTranslation();
+  const { hitFields } = useContext(FieldContext);
+  const response = useContextSelector(HitSearchContext, ctx => ctx.response);
+  const { getMatchingTemplate } = useMatchers();
+
+  const [columnToAdd, setColumnToAdd] = useState<string>(null);
+
+  const options = useMemo(() => hitFields.map(field => field.key), [hitFields]);
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      setSuggestions(
+        uniq(
+          (
+            await Promise.all(
+              (response?.items ?? []).map(
+                async _hit =>
+                  (has(_hit, '__template') ? _hit.__template?.keys : (await getMatchingTemplate(_hit))?.keys) ?? []
+              )
+            )
+          ).flat()
+        )
+      );
+    })();
+  }, [getMatchingTemplate, response?.items]);
+
+  return (
+    <Popover
+      open={open}
+      onClose={onClose}
+      anchorEl={anchorEl}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+    >
+      <Stack spacing={1} p={1} width="500px">
+        <Stack direction="row" spacing={1}>
+          <Autocomplete
+            sx={{ flex: 1 }}
+            size="small"
+            options={options}
+            value={columnToAdd}
+            renderInput={params => <TextField fullWidth placeholder={t('hit.fields')} {...params} />}
+            onChange={(_ev, value) => setColumnToAdd(value)}
+          />
+          <IconButton
+            disabled={!columnToAdd}
+            onClick={() => {
+              addColumn(columnToAdd);
+              setColumnToAdd(null);
+            }}
+          >
+            <Add />
+          </IconButton>
+        </Stack>
+        <Divider orientation="horizontal" />
+        <Grid container spacing={1}>
+          {sortBy(
+            suggestions.map(key => ({ key, used: columns.includes(key) })),
+            'used'
+          ).map(({ key, used }) => {
+            return (
+              <Grid item key={key}>
+                <Chip
+                  size="small"
+                  variant="outlined"
+                  color={used ? 'success' : 'default'}
+                  label={key}
+                  icon={used ? <Check /> : <Add />}
+                  onClick={() => addColumn(key)}
+                  disabled={used}
+                />
+              </Grid>
+            );
+          })}
+        </Grid>
+      </Stack>
+    </Popover>
+  );
+};
+
+export default memo(AddColumnModal);

package/components/routes/hits/search/grid/ColumnHeader.tsx

@@ -0,0 +1,70 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { DragIndicator, Remove } from '@mui/icons-material';
+import { Box, IconButton, Stack, TableCell, Tooltip, useTheme } from '@mui/material';
+import { ApiConfigContext } from 'components/app/providers/ApiConfigProvider';
+import FlexOne from 'components/elements/addons/layout/FlexOne';
+import { useContext, type FC, type SetStateAction } from 'react';
+
+const ColumnHeader: FC<{
+  width: string;
+  col: string;
+  setColumns: (val: SetStateAction<string[]>) => void;
+  onMouseDown: (col: string, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}> = ({ col, width, setColumns, onMouseDown }) => {
+  const theme = useTheme();
+  const { config } = useContext(ApiConfigContext);
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: col });
+
+  return (
+    <TableCell
+      ref={setNodeRef}
+      sx={{
+        borderRight: 'thin solid',
+        borderRightColor: 'divider',
+        py: 0.5,
+        position: 'relative'
+      }}
+      style={{ transform: CSS.Translate.toString(transform), transition }}
+    >
+      <Stack
+        className={`col-${col.replaceAll('.', '-')}`}
+        direction="row"
+        spacing={1}
+        alignItems="center"
+        sx={[{ minWidth: '220px' }, !!width ? { width, maxWidth: width } : { maxWidth: '300px' }]}
+      >
+        <Tooltip title={config.indexes.hit[col].description}>
+          <span>{col}</span>
+        </Tooltip>
+        <FlexOne />
+        <IconButton
+          size="small"
+          sx={{ fontSize: '1rem' }}
+          onClick={() => setColumns(_columns => _columns.filter(_col => _col !== col))}
+        >
+          <Remove fontSize="inherit" />
+        </IconButton>
+
+        <DragIndicator fontSize="small" sx={{ cursor: 'grab' }} {...attributes} {...listeners} />
+
+        <Box
+          sx={{
+            position: 'absolute',
+            top: theme.spacing(0.75),
+            bottom: theme.spacing(0.75),
+            right: -3,
+            width: '5px',
+            borderRight: 'thin solid',
+            borderLeft: 'thin solid',
+            borderColor: 'divider',
+            cursor: 'col-resize'
+          }}
+          onMouseDown={e => onMouseDown(col, e)}
+        />
+      </Stack>
+    </TableCell>
+  );
+};
+
+export default ColumnHeader;

package/components/routes/hits/search/grid/EnhancedCell.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable react/no-array-index-key */
+import { Stack, TableCell, type SxProps } from '@mui/material';
+import PluginTypography from 'components/elements/PluginTypography';
+import { memo, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const EnhancedCell: FC<{ value: string; sx?: SxProps; className: string; field: string }> = ({
+  value: rawValue,
+  sx = {},
+  className,
+  field
+}) => {
+  const { t } = useTranslation();
+
+  if (!rawValue) {
+    return <TableCell style={{ borderBottom: 'none' }}>{t('none')}</TableCell>;
+  }
+
+  const values = (Array.isArray(rawValue) ? rawValue : [rawValue]).filter(_value => !!_value);
+
+  return (
+    <TableCell
+      sx={{ borderBottom: 'none', borderRight: 'thin solid', borderRightColor: 'divider', fontSize: '0.8rem' }}
+    >
+      <Stack
+        direction="row"
+        className={className}
+        spacing={0.5}
+        sx={[
+          { display: 'flex', justifyContent: 'start', width: '100%', overflow: 'hidden' },
+          ...(Array.isArray(sx) ? sx : [sx])
+        ]}
+      >
+        {values.map((value, index) => (
+          <PluginTypography
+            context="table"
+            key={value + index}
+            sx={{ fontSize: 'inherit', textOverflow: 'ellipsis' }}
+            value={value}
+            field={field}
+          >
+            {value}
+          </PluginTypography>
+        ))}
+      </Stack>
+    </TableCell>
+  );
+};
+
+export default memo(EnhancedCell);