@gen-epix/ui 1.15.0 → 1.15.2

package/src/pages/CrudPage/CrudPageDeleteDialog.tsx

@@ -1,85 +0,0 @@
-import type { ReactElement } from 'react';
-import {
-  useCallback,
-  useEffect,
-} from 'react';
-import SaveIcon from '@mui/icons-material/Save';
-import { useTranslation } from 'react-i18next';
-import { Box } from '@mui/material';
-
-import type { DialogAction } from '../../components/ui/Dialog';
-import type {
-  WithDialogRenderProps,
-  WithDialogRefMethods,
-} from '../../hoc/withDialog';
-import { withDialog } from '../../hoc/withDialog';
-import type { GenericData } from '../../models/data';
-import { TestIdUtil } from '../../utils/TestIdUtil';
-
-
-export interface CrudPageDeleteDialogOpenProps<TData extends GenericData> {
-  readonly item: TData;
-}
-export interface CrudPageDeleteDialogProps<TData extends GenericData> extends WithDialogRenderProps<CrudPageDeleteDialogOpenProps<TData>> {
-  readonly onConfirm: (item: TData) => void;
-  readonly getName: (item: TData) => string;
-  readonly createItemDialogTitle?: string;
-}
-export type CrudPageDeleteDialogRefMethods<TData extends GenericData> = WithDialogRefMethods<CrudPageDeleteDialogProps<TData>, CrudPageDeleteDialogOpenProps<TData>>;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const CrudPageDeleteDialog = withDialog<CrudPageDeleteDialogProps<any>, CrudPageDeleteDialogOpenProps<any>>(<TData extends GenericData>(
-  {
-    onConfirm,
-    onClose,
-    openProps,
-    onTitleChange,
-    onActionsChange,
-    getName,
-    createItemDialogTitle,
-  }: CrudPageDeleteDialogProps<TData>,
-): ReactElement => {
-  const { t } = useTranslation();
-
-  const onConfirmButtonClick = useCallback(() => {
-    onConfirm(openProps.item);
-    onClose();
-  }, [onClose, onConfirm, openProps.item]);
-
-  useEffect(() => {
-    const actions: DialogAction[] = [];
-    actions.push({
-      ...TestIdUtil.createAttributes('CrudPageDeleteDialog-closeButton'),
-      color: 'primary',
-      autoFocus: true,
-      variant: 'outlined',
-      onClick: onClose,
-      label: t`Cancel`,
-    });
-    actions.push({
-      ...TestIdUtil.createAttributes('CrudPageDeleteDialog-confirmButton'),
-      color: 'secondary',
-      variant: 'contained',
-      onClick: onConfirmButtonClick,
-      label: t`Confirm`,
-      startIcon: <SaveIcon />,
-    });
-
-    onActionsChange(actions);
-  }, [onActionsChange, t, openProps, onConfirmButtonClick, onClose]);
-
-  useEffect(() => {
-    onTitleChange(t('Delete item: {{itemName}}', { itemName: getName(openProps.item) }));
-  }, [getName, onTitleChange, openProps, t, createItemDialogTitle]);
-
-  return (
-    <Box>
-      {t('Are you sure you want to delete the item "{{itemName}}"?', { itemName: getName(openProps.item) })}
-    </Box>
-  );
-}, {
-  testId: 'CrudPageDeleteDialog',
-  maxWidth: 'lg',
-  fullWidth: true,
-  defaultTitle: '',
-});

package/src/pages/CrudPage/CrudPageEditDialog.tsx

@@ -1,165 +0,0 @@
-import type { ReactElement } from 'react';
-import {
-  useCallback,
-  useEffect,
-  useId,
-  useMemo,
-  useState,
-} from 'react';
-import SaveIcon from '@mui/icons-material/Save';
-import { useTranslation } from 'react-i18next';
-import type {
-  ObjectSchema,
-  AnyObject,
-} from 'yup';
-import { yupResolver } from '@hookform/resolvers/yup';
-import type {
-  Resolver,
-  UseFormReturn,
-} from 'react-hook-form';
-import { useForm } from 'react-hook-form';
-import { useDebouncedCallback } from 'use-debounce';
-
-import { GenericForm } from '../../components/form/helpers/GenericForm';
-import type { DialogAction } from '../../components/ui/Dialog';
-import type {
-  WithDialogRenderProps,
-  WithDialogRefMethods,
-} from '../../hoc/withDialog';
-import { withDialog } from '../../hoc/withDialog';
-import type { GenericData } from '../../models/data';
-import { FormUtil } from '../../utils/FormUtil';
-import { TestIdUtil } from '../../utils/TestIdUtil';
-import type { FormFieldDefinition } from '../../models/form';
-
-
-export interface CrudPageEditDialogOpenProps<TData extends GenericData> {
-  readonly item?: TData;
-  readonly extraActionsFactory?: (item: TData) => DialogAction[];
-  readonly canSave: boolean;
-}
-export interface CrudPageEditDialogProps<TData extends GenericData, TFormFields extends AnyObject> extends WithDialogRenderProps<CrudPageEditDialogOpenProps<TData>> {
-  readonly onSave: (formValues: TFormFields, item: TData) => void;
-  readonly onChange?: (item: TData, formValues: TFormFields, formMethods: UseFormReturn<TFormFields>) => void;
-  readonly formFieldDefinitions: FormFieldDefinition<TFormFields>[] | ((item: TData, values?: TFormFields) => FormFieldDefinition<TFormFields>[]);
-  readonly getName: (item: TData | TFormFields) => string;
-  readonly createItemDialogTitle?: string;
-  readonly defaultNewItem?: Partial<TFormFields>;
-  readonly schema: ObjectSchema<TFormFields, TFormFields>;
-}
-export type CrudPageEditDialogRefMethods<TData extends GenericData, TFormFields extends AnyObject> = WithDialogRefMethods<CrudPageEditDialogProps<TData, TFormFields>, CrudPageEditDialogOpenProps<TData>>;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const CrudPageEditDialog = withDialog<CrudPageEditDialogProps<any, any>, CrudPageEditDialogOpenProps<any>>(<TData extends GenericData, TFormFields extends AnyObject>(
-  {
-    onSave,
-    onClose,
-    onChange,
-    openProps,
-    onTitleChange,
-    onActionsChange,
-    formFieldDefinitions,
-    schema,
-    getName,
-    createItemDialogTitle,
-    defaultNewItem,
-  }: CrudPageEditDialogProps<TData, TFormFields>,
-): ReactElement => {
-  const { t } = useTranslation();
-  const formId = useId();
-
-  const initialFormFieldDefinitions = useMemo(() => {
-    return typeof formFieldDefinitions === 'function' ? formFieldDefinitions(openProps.item) : formFieldDefinitions;
-  }, [formFieldDefinitions, openProps.item]);
-
-  const [resolvedFormFieldDefinitions, setResolvedFormFieldDefinitions] = useState<FormFieldDefinition<TFormFields>[]>(initialFormFieldDefinitions);
-
-  useEffect(() => {
-    const actions: DialogAction[] = [];
-    if (openProps.extraActionsFactory) {
-      actions.push(...openProps.extraActionsFactory(openProps.item));
-    }
-    actions.push({
-      ...TestIdUtil.createAttributes('CrudPageEditDialog-saveButton'),
-      color: 'secondary',
-      autoFocus: true,
-      variant: 'contained',
-      form: formId,
-      type: 'submit',
-      label: t`Save`,
-      startIcon: <SaveIcon />,
-      disabled: !openProps.canSave || resolvedFormFieldDefinitions.some(def => def.loading),
-    });
-    onActionsChange(actions);
-  }, [onActionsChange, formId, t, resolvedFormFieldDefinitions, openProps]);
-
-  const values = useMemo<TFormFields>(() => {
-    return { ...defaultNewItem, ...FormUtil.createFormValues(resolvedFormFieldDefinitions, { ...defaultNewItem, ...openProps.item }) };
-  }, [resolvedFormFieldDefinitions, openProps.item, defaultNewItem]);
-
-  useEffect(() => {
-    if (openProps.item) {
-      onTitleChange(`Edit item: ${getName({ ...defaultNewItem as TFormFields, ...openProps.item ?? {} })}`);
-    } else {
-      onTitleChange(createItemDialogTitle ?? t`Create new item`);
-    }
-  }, [getName, onTitleChange, openProps, t, createItemDialogTitle, defaultNewItem]);
-
-
-  const formMethods = useForm<TFormFields>({
-    resolver: yupResolver(schema) as Resolver<TFormFields>,
-    values,
-  });
-  const { handleSubmit, formState, subscribe } = formMethods;
-
-  const debouncedHandleValuesChange = useDebouncedCallback((formValues: TFormFields) => {
-    if (onChange) {
-      onChange(openProps.item, formValues, formMethods);
-    }
-
-    if (typeof formFieldDefinitions !== 'function') {
-      return;
-    }
-    setResolvedFormFieldDefinitions(formFieldDefinitions(openProps.item, formValues));
-  }, 500, {
-    leading: false,
-    trailing: true,
-  });
-
-  useEffect(() => {
-    const unsubscribe = subscribe({
-      formState: {
-        values: true,
-      },
-      callback: ({ values: formValues }) => {
-        debouncedHandleValuesChange(formValues);
-      },
-    });
-    return () => unsubscribe();
-  }, [debouncedHandleValuesChange, formFieldDefinitions, subscribe]);
-
-  if (formState.errors && Object.keys(formState.errors).length > 0) {
-    console.table(formState.errors);
-  }
-
-  const onFormSubmit = useCallback((formFields: TFormFields): void => {
-    onSave(formFields, openProps.item);
-    onClose();
-  }, [onClose, onSave, openProps.item]);
-
-  return (
-    <GenericForm<TFormFields>
-      schema={schema}
-      disableAll={!openProps.canSave}
-      formFieldDefinitions={resolvedFormFieldDefinitions}
-      formId={formId}
-      formMethods={formMethods}
-      onSubmit={openProps.canSave ? handleSubmit(onFormSubmit) : undefined}
-    />
-  );
-}, {
-  testId: 'CrudPageEditDialog',
-  maxWidth: 'lg',
-  fullWidth: true,
-  defaultTitle: '',
-});

package/src/pages/CrudPage/index.ts

@@ -1 +0,0 @@
-export * from './CrudPage';

package/src/pages/DataCollectionSetsAdminPage/DataCollectionSetsAdminPage.tsx

@@ -1,156 +0,0 @@
-import {
-  useCallback,
-  useMemo,
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  array,
-  object,
-  string,
-} from 'yup';
-
-import { CrudPage } from '../CrudPage';
-import type {
-  DataCollectionSet,
-  DataCollectionSetMember,
-} from '../../api';
-import {
-  OrganizationApi,
-  CommandName,
-} from '../../api';
-import { useDataCollectionOptionsQuery } from '../../dataHooks/useDataCollectionsQuery';
-import { useDataCollectionSetMembersQuery } from '../../dataHooks/useDataCollectionSetMembersQuery';
-import { useArray } from '../../hooks/useArray';
-import type { FormFieldDefinition } from '../../models/form';
-import { FORM_FIELD_DEFINITION_TYPE } from '../../models/form';
-import { QUERY_KEY } from '../../models/query';
-import type { TableColumn } from '../../models/table';
-import { TableUtil } from '../../utils/TableUtil';
-import { TestIdUtil } from '../../utils/TestIdUtil';
-
-type TableData = DataCollectionSet & { dataCollectionIds: string[] };
-
-type FormFields = Pick<TableData, 'name' | 'description' | 'dataCollectionIds'>;
-
-export const DataCollectionSetsAdminPage = () => {
-  const { t } = useTranslation();
-
-  const dataCollectionSetMembersQuery = useDataCollectionSetMembersQuery();
-  const dataCollectionOptionsQuery = useDataCollectionOptionsQuery();
-
-  const loadables = useArray([dataCollectionSetMembersQuery, dataCollectionOptionsQuery]);
-
-  const fetchAll = useCallback(async (signal: AbortSignal) => {
-    return (await OrganizationApi.instance.dataCollectionSetsGetAll({ signal }))?.data;
-  }, []);
-
-  const deleteOne = useCallback(async (item: DataCollectionSet) => {
-    return await OrganizationApi.instance.dataCollectionSetsDeleteOne(item.id);
-  }, []);
-
-  const updateOne = useCallback(async (variables: FormFields, item: DataCollectionSet) => {
-    await OrganizationApi.instance.dataCollectionSetsPutDataCollections(item.id, {
-      data_collection_set_members: variables.dataCollectionIds.map<DataCollectionSetMember>(data_collection_id => ({
-        data_collection_id,
-        data_collection_set_id: item.id,
-      })),
-    });
-    return (await OrganizationApi.instance.dataCollectionSetsPutOne(item.id, { id: item.id, ...variables })).data;
-  }, []);
-
-  const createOne = useCallback(async (variables: FormFields) => {
-    const resultItem = (await OrganizationApi.instance.dataCollectionSetsPostOne(variables)).data;
-    await OrganizationApi.instance.dataCollectionSetsPutDataCollections(resultItem.id, {
-      data_collection_set_members: variables.dataCollectionIds.map<DataCollectionSetMember>(data_collection_id => ({
-        data_collection_id,
-        data_collection_set_id: resultItem.id,
-      })),
-    });
-    return resultItem;
-  }, []);
-
-  const getName = useCallback((item: DataCollectionSet) => {
-    return item.name;
-  }, []);
-
-  const schema = useMemo(() => {
-    return object<FormFields>().shape({
-      name: string().extendedAlphaNumeric().required().max(100),
-      description: string().freeFormText().required().max(1000),
-      dataCollectionIds: array().of(string().uuid4()).min(1).required(),
-    });
-  }, []);
-
-  const formFieldDefinitions = useMemo<FormFieldDefinition<FormFields>[]>(() => {
-    return [
-      {
-        definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD,
-        name: 'name',
-        label: t`Name`,
-      } as const satisfies FormFieldDefinition<FormFields>,
-      {
-        definition: FORM_FIELD_DEFINITION_TYPE.RICH_TEXT,
-        name: 'description',
-        label: t`Description`,
-      } as const satisfies FormFieldDefinition<FormFields>,
-      {
-        definition: FORM_FIELD_DEFINITION_TYPE.TRANSFER_LIST,
-        name: 'dataCollectionIds',
-        label: t`Columns`,
-        options: dataCollectionOptionsQuery.options,
-        loading: dataCollectionOptionsQuery.isLoading,
-      } as const satisfies FormFieldDefinition<FormFields>,
-    ] as const;
-  }, [dataCollectionOptionsQuery.isLoading, dataCollectionOptionsQuery.options, t]);
-
-  const tableColumns = useMemo((): TableColumn<TableData>[] => {
-    return [
-      TableUtil.createTextColumn<TableData>({ id: 'name', name: t`Name`, advancedSort: true }),
-      {
-        type: 'number',
-        id: 'numDataCollections',
-        textAlign: 'right',
-        valueGetter: (item) => item.row.dataCollectionIds.length,
-        displayValueGetter: (item) => `${item.row.dataCollectionIds.length} / ${dataCollectionOptionsQuery.options.length}`,
-        headerName: t`Data collections`,
-        widthFlex: 0.5,
-        isInitiallyVisible: true,
-      },
-    ];
-  }, [dataCollectionOptionsQuery.options.length, t]);
-
-  const convertToTableData = useCallback((items: DataCollectionSet[]) => {
-    if (!items || !dataCollectionSetMembersQuery.data) {
-      return [];
-    }
-    return items.map<TableData>((item) => {
-      const dataCollectionIds = dataCollectionSetMembersQuery.data.filter(member => member.data_collection_set_id === item.id).map(member => member.data_collection_id);
-      return {
-        ...item,
-        dataCollectionIds,
-      } satisfies TableData;
-    });
-  }, [dataCollectionSetMembersQuery.data]);
-
-  return (
-    <CrudPage<FormFields, DataCollectionSet, TableData>
-      convertToTableData={convertToTableData}
-      createOne={createOne}
-      crudCommandType={CommandName.DataCollectionSetCrudCommand}
-      createItemDialogTitle={t`Create new data collection set`}
-      defaultSortByField={'name'}
-      defaultSortDirection={'asc'}
-      deleteOne={deleteOne}
-      fetchAll={fetchAll}
-      formFieldDefinitions={formFieldDefinitions}
-      getName={getName}
-      loadables={loadables}
-      resourceQueryKeyBase={QUERY_KEY.DATA_COLLECTION_SETS}
-      schema={schema}
-      tableColumns={tableColumns}
-      testIdAttributes={TestIdUtil.createAttributes('DataCollectionSetsAdminPage')}
-      title={t`Data collection sets`}
-      updateOne={updateOne}
-    />
-  );
-};

package/src/pages/DataCollectionSetsAdminPage/index.ts

@@ -1 +0,0 @@
-export * from './DataCollectionSetsAdminPage';

package/src/pages/DataCollectionVisualizationPage/DataCollectionVisualizationPage.tsx

@@ -1,238 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { Box } from '@mui/material';
-import type { EChartsReactProps } from 'echarts-for-react';
-import EChartsReact from 'echarts-for-react';
-import * as echarts from 'echarts/core';
-import { CanvasRenderer } from 'echarts/renderers';
-import {
-  TooltipComponent,
-  LegendComponent,
-} from 'echarts/components';
-import {
-  useCallback,
-  useMemo,
-  useRef,
-} from 'react';
-
-import { PageContainer } from '../../components/ui/PageContainer';
-import { ResponseHandler } from '../../components/ui/ResponseHandler';
-import { useDataCollectionsQuery } from '../../dataHooks/useDataCollectionsQuery';
-import { useOrganizationMapQuery } from '../../dataHooks/useOrganizationsQuery';
-import { useArray } from '../../hooks/useArray';
-import { TestIdUtil } from '../../utils/TestIdUtil';
-
-
-echarts.use([TooltipComponent, LegendComponent, CanvasRenderer]);
-
-type Node = {
-  id: string;
-  name: string;
-  symbolSize: number;
-  x: number;
-  y: number;
-  value: number;
-  category: number;
-};
-
-type Links = {
-  source: string;
-  target: string;
-};
-
-type Category = {
-  name: string;
-};
-
-type Graph = {
-  nodes: Node[];
-  links: Links[];
-  categories: Category[];
-};
-
-const DataCollectionVisualizationPageInner = () => {
-  const dataCollectionsQuery = useDataCollectionsQuery();
-  const organizationMapQuery = useOrganizationMapQuery();
-
-  const loadables = useArray([
-    dataCollectionsQuery,
-    organizationMapQuery,
-  ]);
-
-  const chartRef = useRef<EChartsReact>(null);
-
-  const events = useMemo<EChartsReactProps['onEvents']>(() => {
-    return {
-      click: (event: unknown) => {
-        console.log(event);
-      },
-    };
-  }, []);
-
-  const graph = useMemo<Graph>(() => {
-    if (loadables.some((loadable) => loadable.isLoading)) {
-      return {
-        categories: [],
-        links: [],
-        nodes: [],
-      };
-    }
-
-    const categories: Category[] = [
-      {
-        name: 'Data Collection',
-      },
-      {
-        name: 'Organization',
-      },
-    ];
-
-    const dataCollectionNodes: Node[] = [];
-    const dataCollectionsLinks: Links[] = [];
-
-    const organizationNodes: Node[] = [];
-    const organizationLinks: Links[] = [];
-    const numDataCollectionSourceLinks: { [key: string]: number } = {};
-    const numOrganizationPolicies: { [key: string]: number } = {};
-
-    // organizationDataCollectionPolicies.data?.forEach((organizationDataCollectionPolicy) => {
-    //   // dataCollectionsLinks.push({
-    //   //   source: organizationDataCollectionPolicy.source_data_collection_id,
-    //   //   target: organizationDataCollectionPolicy.data_collection_id,
-    //   // });
-    //   organizationLinks.push({
-    //     source: organizationDataCollectionPolicy.organization_id,
-    //     target: organizationDataCollectionPolicy.data_collection_id,
-    //   });
-
-    //   if (!numDataCollectionSourceLinks[organizationDataCollectionPolicy.data_collection_id]) {
-    //     numDataCollectionSourceLinks[organizationDataCollectionPolicy.data_collection_id] = 0;
-    //   }
-    //   numDataCollectionSourceLinks[organizationDataCollectionPolicy.data_collection_id]++;
-
-    //   if (!numOrganizationPolicies[organizationDataCollectionPolicy.organization_id]) {
-    //     numOrganizationPolicies[organizationDataCollectionPolicy.organization_id] = 0;
-    //   }
-    //   numOrganizationPolicies[organizationDataCollectionPolicy.organization_id]++;
-    // });
-
-    Object.entries(numOrganizationPolicies).forEach(([organizationId, numPolicies]) => {
-      organizationNodes.push({
-        id: organizationId,
-        name: organizationMapQuery.map.get(organizationId)?.name || 'Unknown',
-        symbolSize: 15 + (numPolicies * 0.5),
-        // eslint-disable-next-line react-hooks/purity
-        x: Math.random() * 1000,
-        // eslint-disable-next-line react-hooks/purity
-        y: Math.random() * 1000,
-        value: 1,
-        category: 1,
-      });
-    });
-
-    dataCollectionsQuery.data?.forEach((dataCollection) => {
-      dataCollectionNodes.push({
-        id: dataCollection.id,
-        name: dataCollection.name,
-        symbolSize: 15 + ((numDataCollectionSourceLinks[dataCollection.id] || 1) * 1.5),
-        // eslint-disable-next-line react-hooks/purity
-        x: 1000 + Math.random() * 1000,
-        // eslint-disable-next-line react-hooks/purity
-        y: Math.random() * 1000,
-        value: 1,
-        category: 0,
-      });
-    });
-
-    return {
-      categories,
-      links: [...dataCollectionsLinks, ...organizationLinks],
-      nodes: [...dataCollectionNodes, ...organizationNodes],
-    } satisfies Graph;
-  }, [dataCollectionsQuery.data, loadables, organizationMapQuery.map]);
-
-  const getOptions = useCallback(() => {
-    return {
-      tooltip: {},
-      legend: [
-        {
-          // selectedMode: 'single',
-          data: graph.categories.map((a) => a.name),
-        },
-      ],
-      animationDuration: 1500,
-      animationEasingUpdate: 'quinticInOut',
-      series: [
-        {
-          // name: 'Les Miserables',
-          type: 'graph',
-          legendHoverLink: false,
-          layout: 'none',
-          data: graph.nodes,
-          links: graph.links,
-          categories: graph.categories,
-          roam: true,
-          label: {
-            show: true,
-            position: 'right',
-            formatter: '{b}',
-          },
-          labelLayout: {
-            hideOverlap: true,
-          },
-          lineStyle: {
-            color: 'source',
-            curveness: 0.3,
-          },
-          emphasis: {
-            focus: 'adjacency',
-            lineStyle: {
-              width: 10,
-            },
-          },
-        },
-      ],
-    };
-  }, [graph.categories, graph.links, graph.nodes]);
-
-  return (
-    <Box
-      sx={{
-        display: 'grid',
-        gap: 2,
-        gridTemplateRows: 'auto max-content',
-        height: '100%',
-      }}
-    >
-      <ResponseHandler
-        loadables={loadables}
-      >
-        <EChartsReact
-          ref={chartRef}
-          notMerge
-          echarts={echarts}
-          option={getOptions()}
-          style={{
-            width: '100%',
-            height: '100%',
-            position: 'absolute',
-          }}
-          onEvents={events}
-        />
-      </ResponseHandler>
-    </Box>
-  );
-};
-
-export const DataCollectionVisualizationPage = () => {
-  const { t } = useTranslation();
-
-  return (
-    <PageContainer
-      showBreadcrumbs
-      testIdAttributes={TestIdUtil.createAttributes('DataCollectionVisualizationPage')}
-      title={t`Data collection visualization`}
-    >
-      <DataCollectionVisualizationPageInner />
-    </PageContainer>
-  );
-};

package/src/pages/DataCollectionVisualizationPage/index.ts

@@ -1 +0,0 @@
-export * from './DataCollectionVisualizationPage';