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

package/components/routes/dossiers/PivotForm.tsx

@@ -1,311 +0,0 @@
-import { Icon, iconExists } from '@iconify/react/dist/iconify.js';
-import { Add, Delete, OpenInNew, Remove } from '@mui/icons-material';
-import {
-  Alert,
-  Autocomplete,
-  Button,
-  Divider,
-  IconButton,
-  Paper,
-  Stack,
-  Tab,
-  Tabs,
-  TextField,
-  Typography,
-  useTheme
-} from '@mui/material';
-import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import isNull from 'lodash-es/isNull';
-import merge from 'lodash-es/merge';
-import type { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
-import type { Pivot } from '@cccsaurora/howler-ui/models/entities/generated/Pivot';
-import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import {
-  Fragment,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-  type Dispatch,
-  type FC,
-  type SetStateAction
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import { usePluginStore } from 'react-pluggable';
-
-export interface PivotFormProps {
-  pivot: Pivot;
-  update: (pivot: Partial<Pivot>) => void;
-}
-
-const LinkForm: FC<PivotFormProps> = ({ pivot, update }) => {
-  const { t } = useTranslation();
-
-  const { config } = useContext(ApiConfigContext);
-
-  return (
-    <>
-      <TextField
-        size="small"
-        label={t('route.dossiers.manager.pivot.value')}
-        disabled={!pivot}
-        value={pivot?.value ?? ''}
-        fullWidth
-        onChange={ev => update({ value: ev.target.value })}
-      />
-      <Divider flexItem />
-      <Typography>{t('route.dossiers.manager.pivot.mappings')}</Typography>
-      {pivot?.mappings?.map((_mapping, index) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <Fragment key={index}>
-          <Stack direction="row" spacing={1}>
-            <TextField
-              size="small"
-              label={t('route.dossiers.manager.pivot.mapping.key')}
-              disabled={!pivot}
-              value={_mapping?.key ?? ''}
-              onChange={ev =>
-                update({
-                  mappings: pivot.mappings.map((_m, _index) =>
-                    index === _index ? { ..._m, key: ev.target.value } : _m
-                  )
-                })
-              }
-            />
-            <Autocomplete
-              fullWidth
-              disabled={!pivot}
-              options={['custom', ...Object.keys(config.indexes.hit)]}
-              renderInput={params => (
-                <TextField
-                  {...params}
-                  size="small"
-                  fullWidth
-                  label={t('route.dossiers.manager.pivot.mapping.field')}
-                  sx={{ minWidth: '150px' }}
-                />
-              )}
-              getOptionLabel={opt => t(opt)}
-              value={_mapping.field ?? ''}
-              onChange={(_ev, field) =>
-                update({
-                  mappings: pivot.mappings.map((_m, _index) => (index === _index ? { ..._m, field } : _m))
-                })
-              }
-            />
-            <IconButton
-              onClick={() =>
-                update({
-                  mappings: pivot.mappings.filter((_m, _index) => index !== _index)
-                })
-              }
-            >
-              <Remove />
-            </IconButton>
-          </Stack>
-          {_mapping.field === 'custom' && (
-            <TextField
-              size="small"
-              label={t('route.dossiers.manager.pivot.mapping.custom')}
-              disabled={!pivot}
-              value={_mapping?.custom_value ?? ''}
-              onChange={ev =>
-                update({
-                  mappings: pivot.mappings.map((_m, _index) =>
-                    index === _index ? { ..._m, custom_value: ev.target.value } : _m
-                  )
-                })
-              }
-            />
-          )}
-        </Fragment>
-      ))}
-      <Button
-        disabled={!pivot}
-        sx={{ ml: 'auto', alignSelf: 'end', minWidth: '0 !important' }}
-        size="small"
-        variant="contained"
-        onClick={() => {
-          update({
-            mappings: [...(pivot.mappings ?? []), { key: 'key' }]
-          });
-        }}
-      >
-        <Add />
-      </Button>
-    </>
-  );
-};
-
-const PivotForm: FC<{ dossier: Dossier; setDossier: Dispatch<SetStateAction<Partial<Dossier>>>; loading: boolean }> = ({
-  dossier,
-  setDossier,
-  loading
-}) => {
-  const theme = useTheme();
-  const { t, i18n } = useTranslation();
-  const pluginStore = usePluginStore();
-
-  const [tab, setTab] = useState(0);
-
-  const update = useCallback(
-    (data: Partial<Pivot>) =>
-      setDossier(_dossier => ({
-        ..._dossier,
-        pivots: (_dossier.pivots ?? [])
-          .map((pivot, _index) => {
-            if (tab !== _index) {
-              return pivot;
-            }
-
-            if (isNull(data)) {
-              return null;
-            }
-
-            const merged = merge({}, pivot, data);
-
-            if (data.mappings) {
-              merged.mappings = data.mappings;
-            }
-
-            return merged;
-          })
-          .filter(_pivot => !isNull(_pivot))
-      })),
-    [setDossier, tab]
-  );
-
-  const pivot: Pivot = useMemo(() => dossier.pivots?.[tab] ?? null, [dossier.pivots, tab]);
-  const icon = useMemo(() => pivot?.icon ?? 'material-symbols:find-in-page', [pivot?.icon]);
-
-  return (
-    <Paper sx={{ p: 1, display: 'flex', flexDirection: 'column', flex: 1 }}>
-      <Stack spacing={2}>
-        <Stack direction="row">
-          {!dossier?.pivots || dossier.pivots.length < 1 ? (
-            <Alert
-              variant="outlined"
-              severity="warning"
-              sx={{
-                mr: 1,
-                px: 1,
-                py: 0,
-                minHeight: '0 !important',
-                display: 'flex',
-                alignItems: 'center',
-                '& .MuiAlert-icon ': {
-                  fontSize: '20px',
-                  py: 0
-                },
-                '& .MuiAlert-message': {
-                  py: 0.7
-                }
-              }}
-            >
-              {t('route.dossiers.manager.pivot.create')}
-            </Alert>
-          ) : (
-            <Tabs value={tab} onChange={(_, _tab) => setTab(_tab)} sx={{ minHeight: '0 !important' }}>
-              {dossier.pivots?.map((lead, index) => (
-                <Tab
-                  disabled={!dossier || loading}
-                  sx={{ py: 1, minHeight: '0 !important' }}
-                  key={lead.value}
-                  label={
-                    <Stack direction="row" spacing={0.5}>
-                      {lead.icon && <Icon icon={lead.icon} />}
-                      <span>{i18n.language === 'en' ? lead.label.en : lead.label.fr}</span>
-                    </Stack>
-                  }
-                  value={index}
-                />
-              ))}
-            </Tabs>
-          )}
-          <Button
-            sx={{ ml: 'auto', alignSelf: 'end', minWidth: '0 !important' }}
-            size="small"
-            variant="contained"
-            onClick={() => {
-              setTab(dossier.pivots?.length ?? 0);
-              setDossier(_dossier => ({
-                ..._dossier,
-                pivots: [
-                  ...(_dossier.pivots ?? []),
-                  { icon: 'material-symbols:add-ad', label: { en: 'New Pivot', fr: 'Nouvelle pivot' } }
-                ]
-              }));
-            }}
-          >
-            <Add />
-          </Button>
-        </Stack>
-        <Stack spacing={2}>
-          <Stack direction="row" alignItems="center" position="relative">
-            <TextField
-              size="small"
-              label={t('route.dossiers.manager.pivot.icon')}
-              value={icon}
-              disabled={!pivot}
-              fullWidth
-              error={!iconExists(icon)}
-              sx={{ '& input': { paddingLeft: '2.25rem' } }}
-              onChange={ev => update({ icon: ev.target.value })}
-            />
-            <Icon fontSize="1.75rem" icon={icon} style={{ position: 'absolute', left: '0.5rem' }} />
-            <Button
-              variant="outlined"
-              color="error"
-              disabled={!pivot}
-              sx={{ minWidth: '0 !important', ml: 1 }}
-              onClick={() => update(null)}
-            >
-              <Delete />
-            </Button>
-          </Stack>
-          <Stack direction="row" spacing={0.5} alignItems="center" sx={{ mt: `${theme.spacing(0.5)} !important` }}>
-            <Typography color="text.secondary">{t('route.dossiers.manager.icon.description')}</Typography>
-            <IconButton size="small" component="a" href="https://icon-sets.iconify.design/">
-              <OpenInNew fontSize="small" />
-            </IconButton>
-          </Stack>
-          <Stack direction="row" spacing={2}>
-            <TextField
-              size="small"
-              label={t('route.dossiers.manager.pivot.label.en')}
-              disabled={!pivot}
-              value={pivot?.label?.en ?? ''}
-              fullWidth
-              onChange={ev => update({ label: { en: ev.target.value } })}
-            />
-            <TextField
-              size="small"
-              label={t('route.dossiers.manager.pivot.label.fr')}
-              disabled={!pivot}
-              value={pivot?.label?.fr ?? ''}
-              fullWidth
-              onChange={ev => update({ label: { fr: ev.target.value } })}
-            />
-          </Stack>
-          <Autocomplete
-            disabled={!pivot}
-            options={['link', ...howlerPluginStore.pivotFormats]}
-            renderInput={params => (
-              <TextField {...params} size="small" label={t('route.dossiers.manager.pivot.format')} />
-            )}
-            value={pivot?.format ?? ''}
-            onChange={(_ev, format) => update({ format, value: '', mappings: [] })}
-          />
-          {!!pivot?.format &&
-            (pivot.format === 'link' ? (
-              <LinkForm pivot={pivot} update={update} />
-            ) : (
-              pluginStore.executeFunction(`pivot.${pivot.format}.form`, { pivot, update })
-            ))}
-        </Stack>
-      </Stack>
-    </Paper>
-  );
-};
-
-export default PivotForm;

package/components/routes/help/ActionDocumentation.tsx

@@ -1,77 +0,0 @@
-import { Box, Stack, Tab, Typography, useMediaQuery, useTheme } from '@mui/material';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
-import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
-import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import type { FC } from 'react';
-import React, { useCallback, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { usePluginStore } from 'react-pluggable';
-import { useSearchParams } from 'react-router-dom';
-import ActionIntroductionDocumentation from './ActionIntroductionDocumentation';
-import HelpTabs from './components/HelpTabs';
-
-export interface PluginDocumentation {
-  id: string;
-  i18nKey: string;
-  component: () => React.ReactNode;
-}
-
-const ActionDocumentation: FC = () => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const pluginStore = usePluginStore();
-
-  useScrollRestoration();
-
-  const useHorizontal = useMediaQuery(theme.breakpoints.down(1700));
-
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [tab, setTab] = useState(searchParams.get('tab') ?? 'introduction');
-
-  const onChange = useCallback(
-    (_tab: string) => {
-      setTab(_tab);
-      searchParams.set('tab', _tab);
-      setSearchParams(new URLSearchParams(searchParams));
-    },
-    [searchParams, setSearchParams]
-  );
-
-  const pluginDocumentation = useMemo(
-    () =>
-      howlerPluginStore.operations.map(operation =>
-        pluginStore.executeFunction(`operation.${operation}.documentation`)
-      ),
-    [pluginStore]
-  );
-
-  return (
-    <PageCenter margin={4} width="100%" maxWidth="1750px" textAlign="left">
-      <Stack sx={{ flexDirection: useHorizontal ? 'column' : 'row', '& h1': { mt: 0 } }}>
-        <HelpTabs value={tab}>
-          <Tab
-            label={<Typography variant="caption">{t('help.actions.introduction')}</Typography>}
-            value="introduction"
-            onClick={() => onChange('introduction')}
-          />
-          {pluginDocumentation.map(entry => (
-            <Tab
-              key={entry.id}
-              label={<Typography variant="caption">{t(entry.i18nKey)}</Typography>}
-              value={entry.id}
-              onClick={() => onChange(entry.id)}
-            />
-          ))}
-        </HelpTabs>
-        <Box>
-          {{
-            introduction: () => <ActionIntroductionDocumentation />,
-            ...Object.fromEntries(pluginDocumentation.map(entry => [entry.id, entry.component]))
-          }[tab]()}
-        </Box>
-      </Stack>
-    </PageCenter>
-  );
-};
-
-export default ActionDocumentation;

package/components/routes/help/ActionIntroductionDocumentation.tsx

@@ -1,128 +0,0 @@
-import { Close, Search } from '@mui/icons-material';
-import { IconButton, ListItemText, MenuItem, Select, Stack } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import Phrase from '@cccsaurora/howler-ui/components/elements/addons/search/phrase/Phrase';
-import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
-import { difference } from 'lodash-es';
-import type { ActionOperation } from '@cccsaurora/howler-ui/models/ActionTypes';
-import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
-import { useEffect, useMemo, useState, type FC } from 'react';
-import { useTranslation } from 'react-i18next';
-import { VALID_ACTION_TRIGGERS } from '@cccsaurora/howler-ui/utils/constants';
-import QueryResultText from '../../elements/display/QueryResultText';
-import ActionReportDisplay from '../action/shared/ActionReportDisplay';
-import OperationStep from '../action/shared/OperationStep';
-import ACTION_INTRO_EN from './markdown/en/actionIntroduction.md';
-import ACTION_INTRO_FR from './markdown/fr/actionIntroduction.md';
-
-const OPERATION_VALUES = {
-  category: 'generic',
-  label: 'Some Label Value'
-};
-
-const ActionIntroductionDocumentation: FC = () => {
-  const { i18n, t } = useTranslation();
-  const { user } = useAppUser<HowlerUser>();
-
-  const [operations, setOperations] = useState<ActionOperation[]>([]);
-  useEffect(() => {
-    api.action.operations
-      .get()
-      .then(_operations => _operations.filter(a => difference(a.roles, user.roles).length < 1))
-      .then(setOperations)
-      // eslint-disable-next-line no-console
-      .catch(console.debug);
-  }, [user.roles]);
-
-  const md = useMemo(() => (i18n.language === 'en' ? ACTION_INTRO_EN : ACTION_INTRO_FR), [i18n.language]);
-
-  return (
-    <Markdown
-      md={md}
-      components={{
-        action_count: <>{operations.length}</>,
-        action_list: (
-          <ul>
-            {operations.map(operation => (
-              <li key={operation.id}>
-                {t(`operations.${operation.id}`)} - {operation.description.short}
-              </li>
-            ))}
-          </ul>
-        ),
-        tui_phrase: (
-          <Stack spacing={1}>
-            <Phrase
-              onChange={() => {}}
-              fullWidth
-              autoComplete="off"
-              value="howler.id:*"
-              startAdornment={
-                <IconButton>
-                  <Search />
-                </IconButton>
-              }
-              endAdornment={
-                <IconButton>
-                  <Close />
-                </IconButton>
-              }
-            />
-            <QueryResultText count={134} query="howler.id:*" />
-          </Stack>
-        ),
-        operation_select: (
-          <Select value="add_label" size="small">
-            {operations.map(_a => (
-              <MenuItem key={_a.id} value={_a.id}>
-                <ListItemText primary={_a.i18nKey ? t(_a.i18nKey) : _a.title} secondary={_a.description?.short} />
-              </MenuItem>
-            ))}
-          </Select>
-        ),
-        operation_configuration: (
-          <>
-            {operations
-              .find(operation => operation.id === 'add_label')
-              ?.steps.map(step => (
-                <OperationStep
-                  key={Object.keys(step.args).join('')}
-                  step={step}
-                  query="howler.id:*"
-                  values={JSON.stringify(OPERATION_VALUES)}
-                  setValues={() => {}}
-                />
-              ))}
-          </>
-        ),
-        report: (
-          <ActionReportDisplay
-            report={{
-              add_label: [
-                {
-                  query: 'howler.id:*',
-                  outcome: 'skipped',
-                  title: 'Skipped Hit with Label',
-                  message: `These hits already have the label ${OPERATION_VALUES.label}.`
-                },
-                {
-                  query: 'howler.id:*',
-                  outcome: 'success',
-                  title: 'Executed Successfully',
-                  message: `Label '${OPERATION_VALUES.label}' added to category '${OPERATION_VALUES.category}' for all matching hits.`
-                }
-              ]
-            }}
-            operations={operations}
-          />
-        ),
-        automation_options: (
-          <>{VALID_ACTION_TRIGGERS.map(trigger => t(`route.actions.trigger.${trigger}`)).join(', ')}</>
-        )
-      }}
-    />
-  );
-};
-
-export default ActionIntroductionDocumentation;