@gen-epix/ui 1.14.4 → 1.15.0

package/src/dataHooks/useUserEffectiveRightsQuery/useUserEffectiveRightsQuery.ts

@@ -0,0 +1,125 @@
+import { useMemo } from 'react';
+import type { UseQueryResult } from '@tanstack/react-query';
+
+import type {
+  ColSet,
+  ColSetMember,
+  CaseTypeSetMember,
+  OrganizationAccessCasePolicy,
+  OrganizationShareCasePolicy,
+  User,
+  UserAccessCasePolicy,
+  UserShareCasePolicy,
+} from '../../api';
+import { OrganizationApi } from '../../api';
+import { useArray } from '../../hooks/useArray';
+import { useItemQuery } from '../../hooks/useItemQuery';
+import type { UserEffectiveRight } from '../../models/caseAccess';
+import { QUERY_KEY } from '../../models/query';
+import { EffectiveRightsUtil } from '../../utils/EffectiveRightsUtil';
+import { useColSetMembersQuery } from '../useColSetMembersQuery';
+import { useColSetMapQuery } from '../useColSetsQuery';
+import { useCaseTypeSetMembersQuery } from '../useCaseTypeSetMembersQuery';
+import {
+  useCaseTypeSetsMapQuery,
+  useCaseTypeSetNameFactory,
+} from '../useCaseTypeSetsQuery';
+import {
+  useDataCollectionsMapQuery,
+  useDataCollectionOptionsQuery,
+} from '../useDataCollectionsQuery';
+import { useOrganizationAccessCasePoliciesQuery } from '../useOrganizationAccessCasePoliciesQuery';
+import { useOrganizationShareCasePoliciesQuery } from '../useOrganizationShareCasePoliciesQuery';
+import { useUserAccessCasePoliciesQuery } from '../useUserAccessCasePoliciesQuery';
+import { useUserShareCasePoliciesQuery } from '../useUserShareCasePoliciesQuery';
+import type { UseMap } from '../../models/dataHooks';
+
+export type UserEffectiveRightsQueryResult = {
+  effectiveRights: UserEffectiveRight[];
+  user: User;
+  organizationAccessCasePolicies: OrganizationAccessCasePolicy[];
+  organizationShareCasePolicies: OrganizationShareCasePolicy[];
+  userAccessCasePolicies: UserAccessCasePolicy[];
+  userShareCasePolicies: UserShareCasePolicy[];
+  caseTypeSetMembers: CaseTypeSetMember[];
+  colSetMembers: ColSetMember[];
+  colSetsMap: UseMap<ColSet>['map'];
+};
+
+
+export const useUserEffectiveRightsQuery = (userId: string): Partial<UseQueryResult<UserEffectiveRightsQueryResult>> => {
+  const userQuery = useItemQuery<User>({
+    baseQueryKey: QUERY_KEY.USERS,
+    itemId: userId,
+    useQueryOptions: {
+      queryFn: async ({ signal }) => {
+        const response = await OrganizationApi.instance.usersGetOne(userId, { signal });
+        return response.data;
+      },
+    },
+  });
+
+  const { data: user } = userQuery;
+
+  const colSetMembersQuery = useColSetMembersQuery();
+  const caseTypeSetsMapQuery = useCaseTypeSetsMapQuery();
+  const colSetMapQuery = useColSetMapQuery();
+  const caseTypeSetMembersQuery = useCaseTypeSetMembersQuery();
+  const caseTypeSetNameFactory = useCaseTypeSetNameFactory();
+  const dataCollectionMapQuery = useDataCollectionsMapQuery();
+  const dataCollectionOptionsQuery = useDataCollectionOptionsQuery();
+  const organizationAccessCasePoliciesQuery = useOrganizationAccessCasePoliciesQuery(policies => policies.filter(policy => policy.is_active && policy.organization_id === user.organization_id));
+  const organizationShareCasePoliciesQuery = useOrganizationShareCasePoliciesQuery(policies => policies.filter(policy => policy.is_active && policy.organization_id === user.organization_id));
+  const userAccessCasePoliciesQuery = useUserAccessCasePoliciesQuery(policies => policies.filter(policy => policy.is_active && policy.user_id === user.id));
+  const userShareCasePoliciesQuery = useUserShareCasePoliciesQuery(policies => policies.filter(policy => policy.is_active && policy.user_id === user.id));
+
+  const loadables = useArray([
+    userQuery,
+    organizationAccessCasePoliciesQuery,
+    organizationShareCasePoliciesQuery,
+    userAccessCasePoliciesQuery,
+    userShareCasePoliciesQuery,
+    caseTypeSetMembersQuery,
+    colSetMembersQuery,
+    dataCollectionMapQuery,
+    dataCollectionOptionsQuery,
+    colSetMapQuery,
+    caseTypeSetNameFactory,
+    caseTypeSetsMapQuery,
+  ]);
+
+
+  const effectiveRights = useMemo<UserEffectiveRight[]>(() => {
+
+    return EffectiveRightsUtil.assembleUserEffectiveRights({
+      user,
+      organizationAccessCasePolicies: organizationAccessCasePoliciesQuery.data || [],
+      organizationShareCasePolicies: organizationShareCasePoliciesQuery.data || [],
+      userAccessCasePolicies: userAccessCasePoliciesQuery.data || [],
+      userShareCasePolicies: userShareCasePoliciesQuery.data || [],
+      caseTypeSetMembers: caseTypeSetMembersQuery.data || [],
+      colSetMembers: colSetMembersQuery.data || [],
+    });
+
+  }, [colSetMembersQuery, caseTypeSetMembersQuery, organizationAccessCasePoliciesQuery, organizationShareCasePoliciesQuery, user, userAccessCasePoliciesQuery, userShareCasePoliciesQuery]);
+
+  const result = useMemo(() => {
+    return {
+      loading: loadables.some(x => x.isLoading),
+      error: (loadables.find(x => x.error)?.error ?? null) as Error,
+      data: {
+        effectiveRights,
+        user,
+        organizationAccessCasePolicies: organizationAccessCasePoliciesQuery.data,
+        organizationShareCasePolicies: organizationShareCasePoliciesQuery.data,
+        userAccessCasePolicies: userAccessCasePoliciesQuery.data,
+        userShareCasePolicies: userShareCasePoliciesQuery.data,
+        caseTypeSetMembers: caseTypeSetMembersQuery.data,
+        colSetMembers: colSetMembersQuery.data,
+        colSetsMap: colSetMapQuery.map,
+      },
+    };
+  }, [colSetMembersQuery.data, colSetMapQuery.map, caseTypeSetMembersQuery.data, effectiveRights, loadables, organizationAccessCasePoliciesQuery.data, organizationShareCasePoliciesQuery.data, user, userAccessCasePoliciesQuery.data, userShareCasePoliciesQuery.data]);
+
+  return result;
+};

package/src/dataHooks/useUserShareCasePoliciesQuery/index.ts

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

package/src/dataHooks/useUserShareCasePoliciesQuery/useUserShareCasePoliciesQuery.ts

@@ -0,0 +1,18 @@
+import type { UseQueryResult } from '@tanstack/react-query';
+
+import type { UserShareCasePolicy } from '../../api';
+import { AbacApi } from '../../api';
+import { QUERY_KEY } from '../../models/query';
+import { QueryUtil } from '../../utils/QueryUtil';
+import { useQueryMemo } from '../../hooks/useQueryMemo';
+
+export const useUserShareCasePoliciesQuery = (select?: (data: UserShareCasePolicy[]) => UserShareCasePolicy[]): UseQueryResult<UserShareCasePolicy[]> => {
+  return useQueryMemo({
+    queryKey: QueryUtil.getGenericKey(QUERY_KEY.USER_SHARE_CASE_POLICIES),
+    queryFn: async ({ signal }) => {
+      const response = await AbacApi.instance.userShareCasePoliciesGetAll({ signal });
+      return response.data;
+    },
+    select: select ? (data) => select(data) : undefined,
+  });
+};

package/src/dataHooks/useUsersQuery/index.ts

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

package/src/dataHooks/useUsersQuery/useUsersQuery.ts

@@ -0,0 +1,43 @@
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { useMemo } from 'react';
+
+import type { User } from '../../api';
+import { OrganizationApi } from '../../api';
+import type {
+  UseMap,
+  UseOptions,
+} from '../../models/dataHooks';
+import { QUERY_KEY } from '../../models/query';
+import { DataHookUtil } from '../../utils/DataHookUtil';
+import { QueryUtil } from '../../utils/QueryUtil';
+import { useQueryMemo } from '../../hooks/useQueryMemo';
+import { DataUtil } from '../../utils/DataUtil';
+
+export const useUsersQuery = (): UseQueryResult<User[]> => {
+  return useQueryMemo({
+    queryKey: QueryUtil.getGenericKey(QUERY_KEY.USERS),
+    queryFn: async ({ signal }) => {
+      const response = await OrganizationApi.instance.usersGetAll({ signal });
+      return response.data;
+    },
+  });
+};
+
+export const useUsersMapQuery = (): UseMap<User> => {
+  const usersQuery = useUsersQuery();
+
+  return useMemo(() => {
+    return DataHookUtil.createUseMapDataHook<User>(usersQuery, item => item.id);
+  }, [usersQuery]);
+};
+
+export const useUserOptionsQuery = (): UseOptions<string> => {
+  const usersQuery = useUsersQuery();
+  const { t } = useTranslation();
+
+  return useMemo(() => {
+    return DataHookUtil.createUseOptionsDataHook<User>(usersQuery, item => item.id, item => DataUtil.getUserDisplayValue(item, t));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [usersQuery]);
+};

package/src/hoc/withDialog/index.ts

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

package/src/hoc/withDialog/withDialog.tsx

@@ -0,0 +1,132 @@
+import type { DialogProps as MuiDialogProps } from '@mui/material';
+import type {
+  ComponentClass,
+  ComponentType,
+  RefObject,
+} from 'react';
+import {
+  Component,
+  createRef,
+} from 'react';
+
+import {
+  Dialog,
+  type DialogAction,
+  type DialogProps,
+} from '../../components/ui/Dialog';
+
+export interface WithDialogState<TOpenProps> {
+  isOpen: boolean;
+  title: string;
+  permalink: string;
+  actions: DialogAction[];
+  openProps: TOpenProps;
+}
+
+export interface WithDialogRefMethods<TProps extends WithDialogRenderProps<TOpenProps>, TOpenProps = never> extends Component<TProps, WithDialogState<TOpenProps>> {
+  open: (props?: TOpenProps) => void;
+  close: () => void;
+}
+
+export type WithDialogRenderProps<TOpenProps = never> = {
+  maxWidth?: MuiDialogProps['maxWidth'];
+  onActionsChange?: (config: DialogAction[]) => void;
+  onClose?: () => void;
+  onTitleChange?: (title: string) => void;
+  title?: string;
+  permalink?: string;
+  onPermalinkChange?: (permalink: string) => void;
+  openProps?: TOpenProps;
+  dialogContentRef?: RefObject<HTMLDivElement>;
+};
+
+export type WithDialogOptions = {
+  defaultTitle?: string;
+  noCloseButton?: boolean;
+  disableBackdropClick?: boolean;
+  noTitle?: boolean;
+  testId?: string;
+} & Pick<DialogProps, 'maxWidth' | 'fullWidth' | 'noPadding' | 'fullScreen' | 'titleVariant'>;
+
+export const withDialog = <TProps extends WithDialogRenderProps<TOpenProps>, TOpenProps = never>(Content: ComponentType<TProps>, withDialogOptions: WithDialogOptions = {}): ComponentClass<TProps, WithDialogState<TOpenProps>> => {
+  return class WithDialog extends Component<TProps, WithDialogState<TOpenProps>> implements WithDialogRefMethods<TProps, TOpenProps> {
+    private readonly dialogContentRef: RefObject<HTMLDivElement>;
+
+    public constructor(props: TProps) {
+      super(props);
+      this.state = {
+        isOpen: false,
+        title: props.title || withDialogOptions?.defaultTitle,
+        permalink: props.permalink,
+        actions: null,
+        openProps: undefined,
+      };
+      this.onClose = this.onClose.bind(this);
+      this.onPermalinkChange = this.onPermalinkChange.bind(this);
+      this.onTitleChange = this.onTitleChange.bind(this);
+      this.onActionsChange = this.onActionsChange.bind(this);
+      this.dialogContentRef = createRef<HTMLDivElement>();
+    }
+
+    private onPermalinkChange(permalink: string): void {
+      this.setState({ permalink });
+    }
+
+    private onTitleChange(title: string): void {
+      this.setState({ title });
+    }
+
+    private onActionsChange(actions: DialogAction[]): void {
+      this.setState({ actions });
+    }
+
+    private onClose(): void {
+      this.close();
+      this.props.onClose?.();
+    }
+
+    public render() {
+      const { isOpen } = this.state;
+      if (!isOpen) {
+        return null;
+      }
+
+      return (
+        <Dialog
+          actions={this.state.actions}
+          dialogContentRef={this.dialogContentRef}
+          disableBackdropClick={withDialogOptions?.disableBackdropClick}
+          fullScreen={withDialogOptions.fullScreen}
+          fullWidth={withDialogOptions.fullWidth}
+          maxWidth={withDialogOptions.maxWidth}
+          noCloseButton={withDialogOptions?.noCloseButton}
+          noPadding={withDialogOptions.noPadding}
+          noTitle={withDialogOptions?.noTitle}
+          permalink={this.state.permalink}
+          testId={withDialogOptions?.testId}
+          title={this.state.title}
+          titleVariant={withDialogOptions?.titleVariant}
+          onClose={this.onClose}
+        >
+          <Content
+            {...this.props as TProps}
+            dialogContentRef={this.dialogContentRef}
+            openProps={this.state.openProps}
+            onActionsChange={this.onActionsChange}
+            onClose={this.onClose}
+            onPermalinkChange={this.onPermalinkChange}
+            onTitleChange={this.onTitleChange}
+          />
+        </Dialog>
+      );
+    }
+
+    public open(openProps: TOpenProps): void {
+      this.setState({ isOpen: true, openProps });
+    }
+
+    public close(): void {
+      this.setState({ isOpen: false });
+    }
+  };
+};

package/src/hoc/withPermissions/index.ts

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

package/src/hoc/withPermissions/withPermissions.tsx

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import type { ComponentType } from 'react';
+
+import { AuthorizationManager } from '../../classes/managers/AuthorizationManager';
+import type { ApiPermission } from '../../api';
+
+export interface WithPermissionsOptions {
+  readonly requiredPermissions: ApiPermission[];
+  readonly fallback?: ComponentType | null;
+}
+
+export const withPermissions = <TProps extends object>(
+  Component: ComponentType<TProps>,
+  options: WithPermissionsOptions,
+) => {
+  const WrappedComponent = (props: TProps) => {
+    const authorizationManager = useMemo(() => AuthorizationManager.instance, []);
+
+    if (!authorizationManager.doesUserHavePermission(options.requiredPermissions)) {
+      if (options.fallback) {
+        const FallbackComponent = options.fallback;
+        return <FallbackComponent />;
+      }
+      return null;
+    }
+
+    return <Component {...props} />;
+  };
+
+  // Set display name for better debugging
+  WrappedComponent.displayName = `withPermissions(${Component.displayName || Component.name})`;
+
+  return WrappedComponent;
+};

package/src/hooks/useArray/index.ts

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

package/src/hooks/useArray/useArray.ts

@@ -0,0 +1,5 @@
+import { useMemo } from 'react';
+
+export const useArray = <T extends Array<unknown>>(items: T): T => {
+  return useMemo(() => items, [items]);
+};

package/src/hooks/useColumnsMenu/index.ts

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

package/src/hooks/useColumnsMenu/useColumnsMenu.tsx

@@ -0,0 +1,152 @@
+import { produce } from 'immer';
+import { useStore } from 'zustand';
+import { useShallow } from 'zustand/shallow';
+import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';
+import CheckBoxOutlineBlankOutlinedIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
+import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox';
+import {
+  useCallback,
+  useMemo,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { MenuItemData } from '../../models/nestedMenu';
+import type { HasCellDataFn } from '../../models/table';
+import { useTableStoreContext } from '../../stores/tableStore';
+import { TableUtil } from '../../utils/TableUtil';
+
+
+export type UseColumnsMenuProps<TRowData> = {
+  readonly hasCellData?: HasCellDataFn<TRowData>;
+};
+
+//Note: must be CamelCase because of HMR
+export const UseColumnsMenu = <TRowData,>({ hasCellData }: UseColumnsMenuProps<TRowData>): MenuItemData => {
+  const tableStore = useTableStoreContext<TRowData>();
+  const emitTableEvent = useStore(tableStore, useShallow((state) => state.emitEvent));
+  const tableColumns = useStore(tableStore, useShallow((state) => state.columns));
+  const visibleColumnIds = useStore(tableStore, useShallow((state) => state.columnSettings.filter(c => c.isVisible).map(c => c.id)));
+  const columnDimensions = useStore(tableStore, useShallow((state) => state.columnDimensions));
+  const sortedData = useStore(tableStore, useShallow((state) => state.sortedData));
+  const { t } = useTranslation();
+
+  const onColumnsEditorMenuItemClick = useCallback(() => {
+    emitTableEvent('openColumnsEditorDialog', hasCellData as HasCellDataFn<unknown>);
+  }, [emitTableEvent, hasCellData]);
+
+  const toggleItem = useCallback((columnId: string): void => {
+    const newVisibleColumnIds = produce(visibleColumnIds, (draft) => {
+      if (draft.includes(columnId)) {
+        return draft.filter(c => c !== columnId);
+      }
+      draft.push(columnId);
+      return draft;
+    });
+    emitTableEvent('columnVisibilityChange', newVisibleColumnIds);
+  }, [emitTableEvent, visibleColumnIds]);
+
+  const toggleDimension = useCallback((dimensionColumnIds: string[]): void => {
+    const areAllVisible = dimensionColumnIds.every(columnId => visibleColumnIds.includes(columnId));
+    const newVisibleColumnIds = produce(visibleColumnIds, (draft) => {
+      if (areAllVisible) {
+        return draft.filter(c => !dimensionColumnIds.includes(c));
+      }
+      dimensionColumnIds.forEach((columnId) => {
+        if (!draft.includes(columnId)) {
+          draft.push(columnId);
+        }
+      });
+      return draft;
+    });
+    emitTableEvent('columnVisibilityChange', newVisibleColumnIds);
+  }, [emitTableEvent, visibleColumnIds]);
+
+  const onHideColumnsWithoutDataClick = useCallback(() => {
+    emitTableEvent('columnVisibilityChange', TableUtil.getColumnIdsWithData({
+      visibleColumnIds,
+      tableColumns,
+      sortedData,
+      hasCellData,
+    }));
+
+  }, [emitTableEvent, hasCellData, sortedData, tableColumns, visibleColumnIds]);
+
+  const menuItemData: MenuItemData = useMemo(() => {
+    const items: MenuItemData[] = [
+      {
+        label: t`Change order / visibility`,
+        callback: () => onColumnsEditorMenuItemClick(),
+        divider: true,
+      },
+      {
+        label: t`Reset`,
+        callback: () => emitTableEvent('reset'),
+        autoCloseDisabled: true,
+      },
+      {
+        label: t`Show all`,
+        callback: () => {
+          emitTableEvent('columnVisibilityChange', [...tableColumns.map(c => c.id)]);
+        },
+        autoCloseDisabled: true,
+      },
+      {
+        label: t`Hide all`,
+        callback: () => {
+          emitTableEvent('columnVisibilityChange', [...tableColumns.filter(c => c.isStatic).map(c => c.id)]);
+        },
+        autoCloseDisabled: true,
+      },
+      {
+        label: t`Hide columns without data`,
+        callback: () => onHideColumnsWithoutDataClick(),
+        divider: true,
+        autoCloseDisabled: true,
+      },
+    ];
+
+    if (columnDimensions) {
+      columnDimensions.forEach((columnDimension) => {
+        const areAllVisible = columnDimension.columnIds.every(columnId => visibleColumnIds.includes(columnId));
+        const areSomeVisible = columnDimension.columnIds.some(columnId => visibleColumnIds.includes(columnId));
+        items.push({
+          autoCloseDisabled: true,
+          label: columnDimension.label,
+          callback: () => toggleDimension(columnDimension.columnIds),
+          // eslint-disable-next-line no-nested-ternary
+          rightIcon: areAllVisible ? <CheckBoxOutlinedIcon /> : areSomeVisible ? <IndeterminateCheckBoxIcon /> : <CheckBoxOutlineBlankOutlinedIcon />,
+          // eslint-disable-next-line no-nested-ternary
+          checked: areAllVisible ? 'true' : areSomeVisible ? 'mixed' : 'false',
+          items: columnDimension.columnIds.map((columnId) => {
+            const checked = visibleColumnIds.includes(columnId);
+            return {
+              autoCloseDisabled: true,
+              label: tableColumns.find(c => c.id === columnId)?.headerName ?? '',
+              callback: () => toggleItem(columnId),
+              rightIcon: checked ? <CheckBoxOutlinedIcon /> : <CheckBoxOutlineBlankOutlinedIcon />,
+              checked: checked ? 'true' : 'false',
+            };
+          }),
+        });
+      });
+    } else {
+      tableColumns.filter(c => !c.isStatic).forEach((column) => {
+        const checked = visibleColumnIds.includes(column.id);
+        items.push({
+          autoCloseDisabled: true,
+          label: column.headerName,
+          callback: () => toggleItem(column.id),
+          rightIcon: checked ? <CheckBoxOutlinedIcon /> : <CheckBoxOutlineBlankOutlinedIcon />,
+          checked: checked ? 'true' : 'false',
+        });
+      });
+    }
+
+    return {
+      label: t`Columns`,
+      items,
+    };
+  }, [t, columnDimensions, onColumnsEditorMenuItemClick, emitTableEvent, tableColumns, onHideColumnsWithoutDataClick, visibleColumnIds, toggleDimension, toggleItem]);
+
+  return menuItemData;
+};

package/src/hooks/useCreateMutation/index.ts

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

package/src/hooks/useCreateMutation/useCreateMutation.ts

@@ -0,0 +1,103 @@
+import { useMutation } from '@tanstack/react-query';
+import type { ReactElement } from 'react';
+import { useMemo } from 'react';
+
+import { NotificationManager } from '../../classes/managers/NotificationManager';
+import { QueryClientManager } from '../../classes/managers/QueryClientManager';
+import type { GenericData } from '../../models/data';
+import { QueryUtil } from '../../utils/QueryUtil';
+import { StringUtil } from '../../utils/StringUtil';
+import { NotificationUtil } from '../../utils/NotificationUtil';
+
+
+export type MutationContextCreate<TData> = { previousData?: TData[]; temporaryId?: string; notificationKey?: string };
+
+export type UseCreateMutationProps<TData extends GenericData | GenericData[], TVariables = TData> = {
+  readonly queryFn?: (item: TVariables) => Promise<TData>;
+  readonly resourceQueryKey?: string[];
+  readonly associationQueryKeys?: string[][];
+  readonly getProgressNotificationMessage: (data: TVariables) => string | ReactElement;
+  readonly getErrorNotificationMessage: (data: TVariables, error: unknown) => string | ReactElement;
+  readonly getSuccessNotificationMessage: (data: TData, context: MutationContextCreate<TData>) => string | ReactElement;
+  readonly onSuccess?: (item: TData, variables: TVariables, context: MutationContextCreate<TData>) => Promise<void>;
+  readonly onError?: (error: unknown, variables: TVariables, context: MutationContextCreate<TData>) => Promise<void>;
+};
+
+export const useCreateMutation = <TData extends GenericData | GenericData[], TVariables = TData>({
+  queryFn,
+  resourceQueryKey,
+  getErrorNotificationMessage,
+  getSuccessNotificationMessage,
+  getProgressNotificationMessage,
+  associationQueryKeys,
+  onSuccess,
+  onError,
+}: UseCreateMutationProps<TData, TVariables>) => {
+  const queryClient = QueryClientManager.instance.queryClient;
+
+  const createMutation = useMutation<TData, Error, TVariables, MutationContextCreate<TData>>({
+    mutationFn: async (item) => {
+      return queryFn(item);
+    },
+    onMutate: async (variables) => {
+      const notificationKey = NotificationManager.instance.showNotification({
+        message: getProgressNotificationMessage(variables),
+        severity: 'info',
+        isLoading: true,
+      });
+      if (resourceQueryKey) {
+        await queryClient.cancelQueries({ queryKey: resourceQueryKey });
+        const previousData = queryClient.getQueryData<TData[]>(resourceQueryKey);
+        if (Array.isArray(previousData)) {
+          const temporaryId = StringUtil.createUuid();
+          queryClient.setQueryData<TData[]>(resourceQueryKey, (oldItems: TData[]) => {
+            return [
+              {
+                ...variables,
+                id: temporaryId,
+              },
+              ...oldItems,
+            ] as TData[];
+          });
+          return { previousData, temporaryId, notificationKey };
+        }
+      }
+      return { notificationKey };
+    },
+    onError: async (error, variables, context) => {
+      if (resourceQueryKey) {
+        queryClient.setQueryData<TData[]>(resourceQueryKey, (oldItems: TData[]) => {
+          if (!Array.isArray(oldItems)) {
+            return oldItems;
+          }
+          return [...oldItems.filter(item => (item as GenericData)?.id !== context.temporaryId)];
+        });
+      }
+      await QueryUtil.invalidateQueryKeys(associationQueryKeys);
+      if (onError) {
+        await onError(error, variables, context);
+      }
+      NotificationManager.instance.fulfillNotification(context.notificationKey, NotificationUtil.wrapErrorNotificationMessage(getErrorNotificationMessage(variables, error), error), 'error');
+    },
+    onSuccess: async (item, variables, context) => {
+      if (resourceQueryKey && Array.isArray(context?.previousData) && !Array.isArray(item)) {
+        queryClient.setQueryData<GenericData[]>(resourceQueryKey, (oldItems) => {
+          return [
+            item,
+            ...oldItems.filter(x => x.id !== context.temporaryId),
+          ];
+        });
+      }
+      await QueryUtil.invalidateQueryKeys(associationQueryKeys);
+      if (onSuccess) {
+        await onSuccess(item, variables, context);
+      }
+      NotificationManager.instance.fulfillNotification(context.notificationKey, getSuccessNotificationMessage(item, context), 'success');
+    },
+  });
+
+  // Note: must be done in useMemo to avoid render loops (useMutation returns a new object every time)
+  const mutate = useMemo(() => createMutation.mutate, [createMutation.mutate]);
+  const isMutating = useMemo(() => createMutation.isPending, [createMutation.isPending]);
+  return useMemo(() => ({ mutate, isMutating }), [isMutating, mutate]);
+};

package/src/hooks/useDeleteMutation/index.ts

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