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

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

@@ -1,291 +0,0 @@
-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 '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
-import { 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 VSBox from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBox';
-import VSBoxContent from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxContent';
-import VSBoxHeader from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxHeader';
-import SearchPagination from '@cccsaurora/howler-ui/components/elements/addons/search/SearchPagination';
-import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
-import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
-import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
-import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
-import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
-import useHitSelection from '@cccsaurora/howler-ui/components/hooks/useHitSelection';
-import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import type { Hit } from '@cccsaurora/howler-ui/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 '@cccsaurora/howler-ui/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

@@ -1,96 +0,0 @@
-import { Close, Edit, SavedSearch } from '@mui/icons-material';
-import { Alert, IconButton, Stack, Tooltip, Typography } from '@mui/material';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
-import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import { ViewContext } from '@cccsaurora/howler-ui/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

@@ -1,98 +0,0 @@
-import { Add, Check } from '@mui/icons-material';
-import { Autocomplete, Chip, Divider, Grid, IconButton, Popover, Stack, TextField } from '@mui/material';
-import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
-import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
-import { HitSearchContext } from '@cccsaurora/howler-ui/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

@@ -1,70 +0,0 @@
-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 '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import FlexOne from '@cccsaurora/howler-ui/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

@@ -1,50 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import { Stack, TableCell, type SxProps } from '@mui/material';
-import PluginTypography from '@cccsaurora/howler-ui/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);