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

package/components/routes/action/view/ActionSearch.tsx

@@ -1,249 +0,0 @@
-import { Delete, Engineering, Terminal } from '@mui/icons-material';
-import {
-  Autocomplete,
-  Card,
-  CardContent,
-  CardHeader,
-  Chip,
-  Grid,
-  IconButton,
-  Stack,
-  TextField,
-  Tooltip,
-  Typography
-} from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
-import { TuiListProvider, type TuiListItemProps } from '@cccsaurora/howler-ui/components/elements/addons/lists';
-import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
-import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
-import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
-import type { Action } from '@cccsaurora/howler-ui/models/entities/generated/Action';
-import { useCallback, useContext, useEffect, useState, type FC } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import { StorageKey, VALID_ACTION_TRIGGERS } from '@cccsaurora/howler-ui/utils/constants';
-import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
-import useMyActionFunctions from '../useMyActionFunctions';
-
-const ActionSearch: FC = () => {
-  const navigate = useNavigate();
-  const { t } = useTranslation();
-  const { user } = useAppUser<HowlerUser>();
-  const { dispatchApi } = useMyApi();
-  const { load } = useContext(TuiListMethodContext);
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { deleteAction } = useMyActionFunctions();
-  const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
-
-  const [searching, setSearching] = useState<boolean>(false);
-  const [hasError, setHasError] = useState(false);
-  const [phrase, setPhrase] = useState(searchParams.get('phrase') || '');
-  const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
-  const [response, setResponse] = useState<HowlerSearchResponse<Action>>(null);
-  const [searchModifiers, setSearchModifiers] = useState<string[]>([]);
-
-  // Search Handler.
-  const onSearch = useCallback(async () => {
-    setSearching(true);
-    setHasError(false);
-
-    if (phrase) {
-      searchParams.set('phrase', phrase);
-    } else {
-      searchParams.delete('phrase');
-    }
-    setSearchParams(searchParams, { replace: true });
-
-    try {
-      const sanitizedPhrase = sanitizeLuceneQuery(phrase);
-      let query = `name:(*${sanitizedPhrase}*) OR query:(*${sanitizedPhrase}*)`;
-
-      if (searchModifiers.length > 0) {
-        query = `(${query}) AND (triggers:(${searchModifiers.join(' OR ')}))`;
-      }
-
-      const _response = await dispatchApi(
-        api.search.action.post({
-          query,
-          rows: pageCount,
-          offset
-        })
-      );
-      setResponse(_response);
-      load(_response.items.map(u => ({ id: u.action_id, item: u })));
-    } catch (e) {
-      setHasError(true);
-    } finally {
-      setSearching(false);
-    }
-  }, [dispatchApi, load, offset, pageCount, phrase, searchModifiers, searchParams, setSearchParams]);
-
-  const onPageChange = useCallback(
-    (_offset: number) => {
-      if (_offset !== offset) {
-        searchParams.set('offset', _offset.toString());
-        setSearchParams(searchParams, { replace: true });
-        setOffset(_offset);
-      }
-    },
-    [offset, searchParams, setSearchParams]
-  );
-
-  // Effect to initialize list of users.
-  useEffect(
-    () => {
-      onSearch();
-
-      if (!searchParams.has('offset')) {
-        searchParams.set('offset', '0');
-        setSearchParams(searchParams, { replace: true });
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-
-  useEffect(() => {
-    if (response?.total <= offset) {
-      setOffset(0);
-      searchParams.set('offset', '0');
-      setSearchParams(searchParams, { replace: true });
-    }
-  }, [offset, response?.total, searchParams, setSearchParams]);
-
-  useEffect(() => {
-    if (!searching) {
-      onSearch();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [offset]);
-
-  useEffect(() => {
-    onSearch();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchModifiers]);
-
-  // Search result list item renderer.
-  const renderer = useCallback(
-    ({ item }: TuiListItemProps<Action>, classRenderer: () => string) => {
-      return (
-        <Card
-          key={item.item.name}
-          onClick={() => navigate(`/action/${item.item.action_id}`)}
-          variant="outlined"
-          className={classRenderer()}
-          sx={{
-            '&:hover': { borderColor: 'primary.main' },
-            transitionProperty: 'border-color',
-            cursor: 'pointer',
-            mt: 1
-          }}
-        >
-          <CardHeader
-            title={
-              <Stack direction="row" spacing={1} alignItems="center">
-                <Typography variant="h5">{item.item.name}</Typography>
-                {item.item.triggers.length > 0 && (
-                  <Tooltip
-                    title={
-                      <Trans
-                        i18nKey="route.actions.trigger.description"
-                        values={{ triggers: item.item.triggers.join(', ') }}
-                        components={{ bold: <strong /> }}
-                      />
-                    }
-                  >
-                    <Engineering />
-                  </Tooltip>
-                )}
-                <FlexOne />
-                {(item.item.owner_id === user.username || user.roles?.includes('admin')) && (
-                  <IconButton
-                    size="small"
-                    onClick={async e => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      await deleteAction(item.item.action_id);
-                      onSearch();
-                    }}
-                  >
-                    <Delete />
-                  </IconButton>
-                )}
-                <HowlerAvatar
-                  sx={{ width: 24, height: 24, marginRight: '8px !important' }}
-                  userId={item.item.owner_id}
-                />
-              </Stack>
-            }
-            subheader={item.item.query}
-          />
-          <CardContent sx={{ paddingTop: 0 }}>
-            <Grid container spacing={1}>
-              {item.item.operations.map(d => (
-                <Grid item key={d.operation_id}>
-                  <Chip size="small" label={t(`operations.${d.operation_id}`)} />
-                </Grid>
-              ))}
-            </Grid>
-          </CardContent>
-        </Card>
-      );
-    },
-    [deleteAction, navigate, onSearch, t, user.roles, user.username]
-  );
-
-  return (
-    <ItemManager
-      onSearch={onSearch}
-      onCreate={() => navigate('/action/execute')}
-      onPageChange={onPageChange}
-      phrase={phrase}
-      setPhrase={setPhrase}
-      hasError={hasError}
-      searching={searching}
-      aboveSearch={
-        <Typography
-          sx={theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 })}
-          variant="body2"
-        >
-          {t('route.actions.search.prompt')}
-        </Typography>
-      }
-      searchFilters={
-        <Autocomplete
-          multiple
-          size="small"
-          value={searchModifiers}
-          onChange={(__, values) => setSearchModifiers(values)}
-          getOptionLabel={trigger => t(`route.actions.trigger.${trigger}`)}
-          options={VALID_ACTION_TRIGGERS}
-          renderInput={params => (
-            <TextField {...params} sx={{ maxWidth: '500px' }} label={t('route.actions.trigger')} />
-          )}
-        />
-      }
-      renderer={renderer}
-      response={response}
-      createPrompt="route.actions.create"
-      searchPrompt="route.actions.search"
-      createIcon={<Terminal sx={{ mr: 1 }} />}
-    />
-  );
-};
-
-const ActionSearchProvider: FC = () => {
-  return (
-    <TuiListProvider>
-      <ActionSearch />
-    </TuiListProvider>
-  );
-};
-
-export default ActionSearchProvider;

package/components/routes/action/view/Integrations.tsx

@@ -1,49 +0,0 @@
-import { Stack, Tab, Tabs } from '@mui/material';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
-import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import type { FC } from 'react';
-import { useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { usePluginStore } from 'react-pluggable';
-import { useSearchParams } from 'react-router-dom';
-
-const Integrations: FC = () => {
-  const { t } = useTranslation();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const pluginStore = usePluginStore();
-
-  const pluginIntegrations = useMemo(
-    () =>
-      Object.fromEntries(
-        howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.integrations`))
-      ),
-    [pluginStore]
-  );
-
-  const [tab, setTab] = useState(Object.keys(pluginIntegrations)[0] ?? '');
-
-  useEffect(() => {
-    searchParams.set('tab', tab);
-    setSearchParams(searchParams);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tab]);
-
-  const tabData = useMemo(() => {
-    return pluginIntegrations[tab]();
-  }, [pluginIntegrations, tab]);
-
-  return (
-    <PageCenter maxWidth="1500px" textAlign="left" height="100%">
-      <Stack spacing={1}>
-        <Tabs value={tab} onChange={(_, _tab) => setTab(_tab)}>
-          {Object.keys(pluginIntegrations).map(integration => (
-            <Tab key={integration} label={t(`route.integrations.${integration}`)} value={integration} />
-          ))}
-        </Tabs>
-        {tabData}
-      </Stack>
-    </PageCenter>
-  );
-};
-
-export default Integrations;

package/components/routes/admin/users/UserEditor.tsx

@@ -1,55 +0,0 @@
-import api from '@cccsaurora/howler-ui/api';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import UserPageWrapper from '@cccsaurora/howler-ui/components/elements/display/UserPageWrapper';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import useMyUserFunctions from '@cccsaurora/howler-ui/components/hooks/useMyUserFunctions';
-import ProfileSection from '@cccsaurora/howler-ui/components/routes/settings/ProfileSection';
-import SecuritySection from '@cccsaurora/howler-ui/components/routes/settings/SecuritySection';
-import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
-import { useCallback, useEffect, useState, type FC } from 'react';
-import { useParams } from 'react-router-dom';
-
-const UserEditor: FC = () => {
-  const { dispatchApi } = useMyApi();
-  const { id } = useParams();
-  const [user, setUser] = useState<HowlerUser>();
-  const { user: currentUser } = useAppUser<HowlerUser>();
-  const isAdmin = currentUser.is_admin;
-
-  const { editName, editPassword, editQuota, addRole, removeRole, addApiKey, removeApiKey, viewGroups } =
-    useMyUserFunctions();
-
-  const userWrapper = useCallback(
-    (fn: (user: HowlerUser, newValue: unknown) => Promise<HowlerUser>) => {
-      return async (value: unknown) => setUser(await fn(user, value));
-    },
-    [user, setUser]
-  );
-
-  useEffect(() => {
-    if (id && !user) {
-      dispatchApi(api.user.get(id)).then(setUser);
-    }
-  }, [dispatchApi, id, user]);
-
-  return (
-    <UserPageWrapper user={user}>
-      <ProfileSection
-        user={user}
-        editName={(isAdmin || currentUser.username === user?.username) && userWrapper(editName)}
-        addRole={isAdmin && userWrapper(addRole)}
-        removeRole={isAdmin && userWrapper(removeRole)}
-        viewGroups={currentUser.username === user?.username && viewGroups}
-      />
-      <SecuritySection
-        user={user}
-        editPassword={currentUser.username === user?.username && editPassword}
-        addApiKey={currentUser.username === user?.username && addApiKey}
-        removeApiKey={(isAdmin || currentUser.username === user?.username) && userWrapper(removeApiKey)}
-        editQuota={isAdmin && userWrapper(editQuota)}
-      />
-    </UserPageWrapper>
-  );
-};
-
-export default UserEditor;

package/components/routes/admin/users/UserSearch.tsx

@@ -1,228 +0,0 @@
-import { Close, Search } from '@mui/icons-material';
-import { Box, Chip, Grid, IconButton, LinearProgress, Stack, TextField, Typography } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
-import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
-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 type { TuiListItemOnSelect } from '@cccsaurora/howler-ui/components/elements/addons/lists';
-import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
-import type { TuiTableCellRenderer, TuiTableColumn } from '@cccsaurora/howler-ui/components/elements/addons/lists/table';
-import TuiTable from '@cccsaurora/howler-ui/components/elements/addons/lists/table/TuiTable';
-import { TuiListMethodContext, type TuiListMethodsState } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
-import SearchPagination from '@cccsaurora/howler-ui/components/elements/addons/search/SearchPagination';
-import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
-import type { ChangeEvent, FC, KeyboardEvent } from 'react';
-import { useCallback, useContext, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
-
-const COLUMN: TuiTableColumn[] = [
-  { column: 'uname', i18nKey: 'page.user.search.column.username' },
-  { column: 'name', i18nKey: 'page.user.search.column.fullname' },
-  { column: 'email', i18nKey: 'page.user.search.column.email' }
-];
-
-const UserSearch: FC = () => {
-  const navigate = useNavigate();
-  const { t } = useTranslation();
-  const { dispatchApi } = useMyApi();
-  const { load } = useContext<TuiListMethodsState<HowlerUser>>(TuiListMethodContext);
-  const [searchParams, setSearchParams] = useSearchParams();
-  const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
-
-  const [searching, setSearching] = useState<boolean>(false);
-  const [phrase, setPhrase] = useState('');
-  const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
-  const [response, setResponse] = useState<HowlerSearchResponse<HowlerUser>>(null);
-
-  // Search Handler.
-  const onSearch = useCallback(async () => {
-    setSearching(true);
-    try {
-      const sanitizedPhrase = sanitizeLuceneQuery(phrase);
-      const _response = await dispatchApi(
-        api.search.user.post({
-          query: `name:*${sanitizedPhrase}* OR uname:*${sanitizedPhrase}* OR email:*${sanitizedPhrase}*`,
-          rows: pageCount,
-          offset
-        })
-      );
-      setResponse(_response);
-      load(_response.items.map(u => ({ id: u.username, item: u })));
-    } finally {
-      setSearching(false);
-    }
-  }, [dispatchApi, load, offset, pageCount, phrase]);
-
-  const onPageChange = useCallback(
-    (_offset: number) => {
-      if (_offset !== offset) {
-        searchParams.set('offset', _offset.toString());
-        setSearchParams(searchParams);
-        setOffset(_offset);
-      }
-    },
-    [offset, searchParams, setSearchParams]
-  );
-
-  // Handler for when search term value changes.
-  const onValueChange = useCallback((event: ChangeEvent<HTMLInputElement>) => setPhrase(event.target.value), []);
-
-  // Handler for keyboard event in order to trigger search onEnter.
-  const onKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLElement>) => {
-      const { isEnter } = parseEvent(event);
-      if (isEnter) {
-        onSearch();
-      }
-    },
-    [onSearch]
-  );
-
-  // Clean button handler.
-  const onClear = useCallback(() => {
-    setPhrase('');
-    onSearch();
-  }, [onSearch]);
-
-  // Effect to initialize list of users.
-  useEffect(
-    () => {
-      onSearch();
-
-      if (!searchParams.has('offset')) {
-        searchParams.set('offset', '0');
-        setSearchParams(searchParams);
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-
-  useEffect(() => {
-    if (response?.total <= offset) {
-      setOffset(0);
-      searchParams.set('offset', '0');
-      setSearchParams(searchParams);
-    }
-  }, [offset, response?.total, searchParams, setSearchParams]);
-
-  useEffect(() => {
-    if (!searching) {
-      onSearch();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [offset]);
-
-  // TuiTable cell renderer
-  const cellRenderer: TuiTableCellRenderer<HowlerUser> = useCallback((_value: string[], _, column) => {
-    if (column.column !== 'groups') {
-      return <div style={{ height: '100%', display: 'flex', alignItems: 'center' }}>{_value.toString()}</div>;
-    } else {
-      return (
-        <Grid container spacing={1}>
-          {_value.map(g => (
-            <Grid key={g} item>
-              <Chip label={g} size="small" sx={{ fontSize: '11px' }} />
-            </Grid>
-          ))}
-        </Grid>
-      );
-    }
-  }, []);
-
-  // TuiTable handler for when selecting/clicking a Row.
-  const onRowSelect: TuiListItemOnSelect<HowlerUser> = useCallback(
-    selection => {
-      navigate(selection.item.username);
-    },
-    [navigate]
-  );
-
-  return (
-    <VSBox>
-      <VSBoxHeader>
-        <Typography
-          sx={theme => ({ fontStyle: 'italic  ', color: theme.palette.text.disabled, mb: 0.5 })}
-          variant="body2"
-        >
-          {t('page.user.search.prompt')}
-        </Typography>
-        <TextField
-          fullWidth
-          autoComplete="off"
-          value={phrase}
-          onChange={onValueChange}
-          onKeyDown={onKeyDown}
-          InputProps={{
-            startAdornment: (
-              <>
-                <IconButton onClick={onSearch}>
-                  <Search />
-                </IconButton>
-              </>
-            ),
-            endAdornment: (
-              <>
-                <IconButton onClick={onClear}>
-                  <Close />
-                </IconButton>
-              </>
-            )
-          }}
-        />
-        {searching && (
-          <LinearProgress
-            sx={theme => ({
-              mt: -0.5,
-              borderBottomLeftRadius: theme.shape.borderRadius,
-              borderBottomRightRadius: theme.shape.borderRadius
-            })}
-          />
-        )}
-        {response && (
-          <Stack direction="row" alignItems="center" mt={0.5}>
-            <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={onPageChange}
-            />
-          </Stack>
-        )}
-      </VSBoxHeader>
-      <VSBoxContent sx={{ mt: 1 }}>
-        <TuiTable columns={COLUMN} onRowSelect={onRowSelect}>
-          {cellRenderer}
-        </TuiTable>
-      </VSBoxContent>
-    </VSBox>
-  );
-};
-
-const UserSearchProvider: FC = () => {
-  return (
-    <PageCenter textAlign="left">
-      <TuiListProvider>
-        <UserSearch />
-      </TuiListProvider>
-    </PageCenter>
-  );
-};
-
-export default UserSearchProvider;