@axinom/mosaic-ui 0.61.0 → 0.62.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.61.0",
+  "version": "0.62.0-rc.0",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -38,6 +38,7 @@
     "@mui/base": "5.0.0-beta.40",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
+    "json-to-graphql-query": "^2.3.0",
     "lodash": "^4.17.21",
     "luxon": "^3.3.0",
     "postcss": "^8.4.4",
@@ -76,6 +77,9 @@
     "@storybook/react-webpack5": "^7.0.6",
     "@storybook/testing-library": "^0.1.0",
     "@storybook/theming": "^7.0.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/luxon": "^3.2.0",
     "@types/react-beautiful-dnd": "^13.1.4",
     "@types/react-calendar": "^3.1.2",
@@ -108,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "97b214138211f566643e82543e96ffcc5e8e2d5a"
+  "gitHead": "6cafaac031044050d3a80103fdfed0aa8fc5c3ab"
 }

package/src/components/Accordion/Accordion.tsx

@@ -60,21 +60,23 @@ export const Accordion: React.FC<AccordionProps> = ({
   const [expanded, setExpanded] = useState<ExpandedState>({});
 
   useEffect(() => {
-    const updatedState: ExpandedState = { ...expanded };
-    React.Children.map(children, (child, i) => {
-      if (React.isValidElement(child)) {
-        if (child.type === AccordionItem) {
-          const keyString = String(child.key ?? i);
+    setExpanded((oldState) => {
+      const updatedState: ExpandedState = { ...oldState };
 
-          if (!Object.keys(updatedState).includes(keyString)) {
-            updatedState[keyString] = expandedByDefault;
+      React.Children.map(children, (child, i) => {
+        if (React.isValidElement(child)) {
+          if (child.type === AccordionItem) {
+            const keyString = String(child.key ?? i);
+
+            if (!Object.keys(updatedState).includes(keyString)) {
+              updatedState[keyString] = expandedByDefault;
+            }
           }
         }
-      }
-    });
+      });
 
-    setExpanded(updatedState);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+      return updatedState;
+    });
   }, [children, expandedByDefault]);
 
   useLayoutEffect(() => {

package/src/components/Explorer/BulkEdit/BulkEdit.model.ts

@@ -0,0 +1,21 @@
+export interface BulkEditFieldConfig {
+  type: string | { [key: string]: unknown }[];
+  label: string;
+  originalFieldName: string;
+  action: string;
+}
+
+export interface BulkEditFieldConfigMap {
+  [key: string]: BulkEditFieldConfig;
+}
+
+export interface BulkEditConfig {
+  mutation: string;
+  keys?: {
+    add: string;
+    remove: string;
+    set: string;
+    filter: string;
+  };
+  fields: BulkEditFieldConfigMap;
+}

package/src/components/Explorer/BulkEdit/BulkEditContext.tsx

@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+
+export interface BulkEditContextType {
+  cancel: () => void;
+  isBulkEditMode: boolean;
+}
+
+export const BulkEditContext = React.createContext<BulkEditContextType>(
+  undefined as any,
+);

package/src/components/Explorer/BulkEdit/FormFieldsConfigConverter.spec.tsx

@@ -0,0 +1,162 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { BulkEditFieldConfigMap } from './BulkEdit.model';
+import { BulkEditFormFieldsConfigConverter } from './FormFieldsConfigConverter';
+
+jest.mock('../../FormElements', () => ({
+  CheckboxField: jest.fn(({ name, label }) => (
+    <div data-testid="CheckboxField">{`${name}-${label}`}</div>
+  )),
+  CustomTagsField: jest.fn(({ name, label }) => (
+    <div data-testid="CustomTagsField">{`${name}-${label}`}</div>
+  )),
+  SingleLineTextField: jest.fn(({ name, label }) => (
+    <div data-testid="SingleLineTextField">{`${name}-${label}`}</div>
+  )),
+}));
+
+jest.mock('formik', () => ({
+  Field: jest.fn(({ name, label, as: Component }) => (
+    <div data-testid={`Field-${name}`}>
+      <Component name={name} label={label} />
+    </div>
+  )),
+}));
+
+describe('BulkEditFormFieldsConfigConverter', () => {
+  it('renders a Formik Field wrapping SingleLineTextField for String type', () => {
+    const config: BulkEditFieldConfigMap = {
+      title: {
+        type: 'String',
+        label: 'Title',
+        originalFieldName: 'title',
+        action: 'set',
+      },
+    };
+
+    const { getByTestId } = render(
+      <>{BulkEditFormFieldsConfigConverter(config)}</>,
+    );
+
+    expect(getByTestId('Field-title')).toBeInTheDocument();
+    expect(getByTestId('SingleLineTextField')).toHaveTextContent('title-Title');
+  });
+
+  it('renders a Formik Field wrapping CheckboxField for Boolean type', () => {
+    const config: BulkEditFieldConfigMap = {
+      isArchived: {
+        type: 'Boolean',
+        label: 'Is Archived',
+        originalFieldName: 'isArchived',
+        action: 'set',
+      },
+    };
+
+    const { getByTestId } = render(
+      <>{BulkEditFormFieldsConfigConverter(config)}</>,
+    );
+
+    expect(getByTestId('Field-isArchived')).toBeInTheDocument();
+    expect(getByTestId('CheckboxField')).toHaveTextContent(
+      'isArchived-Is Archived',
+    );
+  });
+
+  it('renders a Formik Field wrapping CustomTagsField for Array type', () => {
+    const config: BulkEditFieldConfigMap = {
+      tags: {
+        type: [
+          {
+            name: 'String!',
+          },
+        ],
+        label: 'Tags',
+        originalFieldName: 'tags',
+        action: 'relatedEntitiesToAdd',
+      },
+    };
+
+    const { getByTestId } = render(
+      <>{BulkEditFormFieldsConfigConverter(config)}</>,
+    );
+
+    expect(getByTestId('Field-tags')).toBeInTheDocument();
+    expect(getByTestId('CustomTagsField')).toHaveTextContent('tags-Tags');
+  });
+
+  it('renders multiple Formik Fields for multiple fields', () => {
+    const config: BulkEditFieldConfigMap = {
+      title: {
+        type: 'String',
+        label: 'Title',
+        originalFieldName: 'title',
+        action: 'set',
+      },
+      isArchived: {
+        type: 'Boolean',
+        label: 'Is Archived',
+        originalFieldName: 'isArchived',
+        action: 'set',
+      },
+      tags: {
+        type: [
+          {
+            name: 'String!',
+          },
+        ],
+        label: 'Tags',
+        originalFieldName: 'tags',
+        action: 'relatedEntitiesToAdd',
+      },
+    };
+
+    const { getByTestId } = render(
+      <>{BulkEditFormFieldsConfigConverter(config)}</>,
+    );
+
+    expect(getByTestId('Field-title')).toBeInTheDocument();
+    expect(getByTestId('SingleLineTextField')).toHaveTextContent('title-Title');
+
+    expect(getByTestId('Field-isArchived')).toBeInTheDocument();
+    expect(getByTestId('CheckboxField')).toHaveTextContent(
+      'isArchived-Is Archived',
+    );
+
+    expect(getByTestId('Field-tags')).toBeInTheDocument();
+    expect(getByTestId('CustomTagsField')).toHaveTextContent('tags-Tags');
+  });
+
+  it('logs a warning for unsupported field types', () => {
+    const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation();
+    const config: BulkEditFieldConfigMap = {
+      unsupportedField: {
+        type: 'UnsupportedType' as any,
+        label: 'Unsupported Field',
+        originalFieldName: 'unsupportedField',
+        action: 'set',
+      },
+    };
+
+    const { container } = render(
+      <>{BulkEditFormFieldsConfigConverter(config)}</>,
+    );
+
+    expect(consoleWarnSpy).toHaveBeenCalledWith(
+      'No component found for field type: UnsupportedType',
+    );
+    expect(container.firstChild).toBeNull();
+
+    consoleWarnSpy.mockRestore();
+  });
+
+  it('handles empty configuration gracefully', () => {
+    const config: BulkEditFieldConfigMap = {};
+
+    const { container } = render(
+      <>{BulkEditFormFieldsConfigConverter(config)}</>,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+});

package/src/components/Explorer/BulkEdit/FormFieldsConfigConverter.tsx

@@ -0,0 +1,45 @@
+import { Field } from 'formik';
+import React from 'react';
+import {
+  CheckboxField,
+  CustomTagsField,
+  SingleLineTextField,
+} from '../../FormElements';
+import { BulkEditFieldConfigMap } from './BulkEdit.model';
+
+export const defaultComponentMap = {
+  String: SingleLineTextField,
+  BigFloat: SingleLineTextField,
+  Boolean: CheckboxField,
+  Array: CustomTagsField, // Map array types to CustomTagsComponent
+};
+
+export const BulkEditFormFieldsConfigConverter = (
+  config: BulkEditFieldConfigMap,
+  componentMap: Record<string, React.ElementType> = defaultComponentMap,
+): JSX.Element[] => {
+  const keys = Object.keys(config);
+
+  return keys
+    .map((key) => {
+      const fieldConfig = config[key];
+
+      // Determine the type of the field
+      const fieldType = Array.isArray(fieldConfig.type)
+        ? 'Array' // Use 'Array' as the key for array types
+        : fieldConfig.type;
+
+      const Component = componentMap[fieldType as keyof typeof componentMap];
+
+      if (!Component) {
+        // eslint-disable-next-line no-console
+        console.warn(`No component found for field type: ${fieldType}`);
+        return null; // Filter out null entries later
+      }
+
+      return (
+        <Field name={key} key={key} label={fieldConfig.label} as={Component} />
+      );
+    })
+    .filter((element): element is JSX.Element => element !== null);
+};

package/src/components/Explorer/BulkEdit/GenerateMutation.spec.tsx

@@ -0,0 +1,141 @@
+import { BulkEditConfig } from './BulkEdit.model';
+import { generateBulkEditMutation } from './GenerateMutation';
+
+describe('generateBulkEditMutation', () => {
+  const BulkEditImagesAsyncFormFieldsConfig: BulkEditConfig = {
+    mutation: 'bulkEditImagesAsync',
+    fields: {
+      imagesTagsAdd: {
+        type: [
+          {
+            name: 'String!',
+          },
+        ],
+        label: 'imagesTags ( Add )',
+        originalFieldName: 'imagesTags',
+        action: 'relatedEntitiesToAdd',
+      },
+      imagesTagsRemove: {
+        type: [
+          {
+            name: 'String!',
+          },
+        ],
+        label: 'imagesTags ( Remove )',
+        originalFieldName: 'imagesTags',
+        action: 'relatedEntitiesToRemove',
+      },
+      altText: {
+        type: 'String',
+        label: 'altText',
+        originalFieldName: 'altText',
+        action: 'set',
+      },
+      focalX: {
+        type: 'BigFloat',
+        label: 'focalX',
+        originalFieldName: 'focalX',
+        action: 'set',
+      },
+      focalY: {
+        type: 'BigFloat',
+        label: 'focalY',
+        originalFieldName: 'focalY',
+        action: 'set',
+      },
+      isArchived: {
+        type: 'Boolean',
+        label: 'isArchived',
+        originalFieldName: 'isArchived',
+        action: 'set',
+      },
+      title: {
+        type: 'String',
+        label: 'title',
+        originalFieldName: 'title',
+        action: 'set',
+      },
+    },
+  };
+
+  it('should generate a mutation string with all fields populated', () => {
+    const sampleValues = {
+      imagesTagsAdd: ['tag1', 'tag2'],
+      imagesTagsRemove: ['tag3', 'tag4'],
+      altText: 'Sample Alt Text',
+      focalX: 0.5,
+      focalY: 0.5,
+      isArchived: false,
+      title: 'Sample Title',
+    };
+
+    const result = generateBulkEditMutation(
+      BulkEditImagesAsyncFormFieldsConfig,
+      sampleValues,
+    );
+
+    expect(result).toBe(
+      `mutation { bulkEditImagesAsync (relatedEntitiesToAdd: {imagesTags: [{name: "tag1"}, {name: "tag2"}]}, relatedEntitiesToRemove: {imagesTags: [{name: "tag3"}, {name: "tag4"}]}, set: {altText: "Sample Alt Text", focalX: 0.5, focalY: 0.5, isArchived: false, title: "Sample Title"}) { filterMatchedIds } }`,
+    );
+  });
+
+  it('should generate a mutation string with only relatedEntitiesToAdd', () => {
+    const sampleValues = {
+      imagesTagsAdd: ['tag1', 'tag2'],
+    };
+
+    const result = generateBulkEditMutation(
+      BulkEditImagesAsyncFormFieldsConfig,
+      sampleValues,
+    );
+
+    expect(result).toBe(
+      `mutation { bulkEditImagesAsync (relatedEntitiesToAdd: {imagesTags: [{name: "tag1"}, {name: "tag2"}]}) { filterMatchedIds } }`,
+    );
+  });
+
+  it('should generate a mutation string with only relatedEntitiesToRemove', () => {
+    const sampleValues = {
+      imagesTagsRemove: ['tag3', 'tag4'],
+    };
+
+    const result = generateBulkEditMutation(
+      BulkEditImagesAsyncFormFieldsConfig,
+      sampleValues,
+    );
+
+    expect(result).toBe(
+      `mutation { bulkEditImagesAsync (relatedEntitiesToRemove: {imagesTags: [{name: "tag3"}, {name: "tag4"}]}) { filterMatchedIds } }`,
+    );
+  });
+
+  it('should generate a mutation string with only set fields', () => {
+    const sampleValues = {
+      altText: 'Sample Alt Text',
+      focalX: 0.5,
+      focalY: 0.5,
+      isArchived: false,
+      title: 'Sample Title',
+    };
+
+    const result = generateBulkEditMutation(
+      BulkEditImagesAsyncFormFieldsConfig,
+      sampleValues,
+    );
+
+    expect(result).toBe(
+      `mutation { bulkEditImagesAsync (set: {altText: "Sample Alt Text", focalX: 0.5, focalY: 0.5, isArchived: false, title: "Sample Title"}) { filterMatchedIds } }`,
+    );
+  });
+
+  it('should generate an empty mutation string if no values are provided', () => {
+    const sampleValues = {};
+
+    expect(() =>
+      generateBulkEditMutation(
+        BulkEditImagesAsyncFormFieldsConfig,
+        sampleValues,
+      ),
+    ).toThrow('No valid fields to generate mutation');
+  });
+});

package/src/components/Explorer/BulkEdit/GenerateMutation.tsx

@@ -0,0 +1,90 @@
+import { jsonToGraphQLQuery } from 'json-to-graphql-query';
+import { Data } from '../../../types';
+import { BulkEditConfig } from './BulkEdit.model';
+
+export const generateBulkEditMutation = <T extends Data>(
+  config: BulkEditConfig,
+  values: T,
+  filter?: object,
+): string => {
+  const { mutation, fields, keys } = config;
+
+  const relatedEntitiesToAddKey = keys?.add ?? 'relatedEntitiesToAdd';
+  const relatedEntitiesToRemoveKey = keys?.remove ?? 'relatedEntitiesToRemove';
+  const setKey = keys?.set ?? 'set';
+  const filterKey = keys?.filter ?? 'filter';
+
+  const relatedEntitiesToAdd = Object.entries(fields)
+    .filter(([_, field]) => field.action === relatedEntitiesToAddKey)
+    .reduce((acc, [key, field]) => {
+      const fieldValues = values[key];
+
+      if (fieldValues) {
+        acc = {
+          ...acc,
+          [field.originalFieldName]: fieldValues.map((item: string) => ({
+            name: item,
+          })),
+        };
+      }
+      return acc;
+    }, {} as Record<string, unknown>);
+
+  const relatedEntitiesToRemove = Object.entries(fields)
+    .filter(([_, field]) => field.action === relatedEntitiesToRemoveKey)
+    .reduce((acc, [key, field]) => {
+      const fieldValues = values[key];
+
+      if (fieldValues) {
+        acc = {
+          ...acc,
+          [field.originalFieldName]: fieldValues.map((item: string) => ({
+            name: item,
+          })),
+        };
+      }
+      return acc;
+    }, {} as Record<string, unknown>);
+
+  const set = Object.entries(fields)
+    .filter(([_, field]) => field.action === setKey)
+    .reduce((acc, [key, field]) => {
+      const fieldValues = values[key];
+
+      if (fieldValues !== undefined && fieldValues !== null) {
+        acc = {
+          ...acc,
+          [field.originalFieldName]: fieldValues,
+        };
+      }
+      return acc;
+    }, {} as Record<string, unknown>);
+
+  if (
+    Object.keys(relatedEntitiesToAdd).length === 0 &&
+    Object.keys(relatedEntitiesToRemove).length === 0 &&
+    Object.keys(set).length === 0
+  ) {
+    throw new Error('No valid fields to generate mutation');
+  }
+
+  return jsonToGraphQLQuery({
+    mutation: {
+      [mutation]: {
+        __args: {
+          ...(Object.keys(relatedEntitiesToAdd).length > 0 && {
+            [relatedEntitiesToAddKey]: relatedEntitiesToAdd,
+          }),
+          ...(Object.keys(relatedEntitiesToRemove).length > 0 && {
+            [relatedEntitiesToRemoveKey]: relatedEntitiesToRemove,
+          }),
+          ...(Object.keys(set).length > 0 && {
+            [setKey]: set,
+          }),
+          ...(filter && { [filterKey]: filter }),
+        },
+        filterMatchedIds: true,
+      },
+    },
+  });
+};

package/src/components/Explorer/BulkEdit/index.ts

@@ -0,0 +1,8 @@
+export type * from './BulkEdit.model';
+export { BulkEditContext, BulkEditContextType } from './BulkEditContext';
+export {
+  BulkEditFormFieldsConfigConverter,
+  defaultComponentMap,
+} from './FormFieldsConfigConverter';
+export { generateBulkEditMutation } from './GenerateMutation';
+export { useBulkEdit } from './useBulkEdit';

package/src/components/Explorer/BulkEdit/useBulkEdit.tsx

@@ -0,0 +1,132 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Data } from '../../../types';
+import { FieldSelection } from '../../FieldSelection';
+import { FormStation } from '../../FormStation';
+import { IconName } from '../../Icons';
+import {
+  BulkEditRegistration,
+  ExplorerBulkAction,
+  ItemSelection,
+} from '../Explorer.model';
+import { BulkEditContext } from './BulkEditContext';
+import { BulkEditFormFieldsConfigConverter } from './FormFieldsConfigConverter';
+
+export interface useBulkEditProps<T extends Data> {
+  bulkEditRegistration?: BulkEditRegistration<T>;
+  getBulkActionSelection: () => ItemSelection<T>;
+}
+
+export interface useBulkEditReturnType<T extends Data> {
+  readonly isBulkEditMode: boolean;
+  readonly BulkEditComponent: JSX.Element | null;
+  readonly BulkEditContextProvider: React.FC;
+  readonly bulkEditAction?: ExplorerBulkAction<T>;
+  readonly closeBulkEdit: () => void;
+}
+
+export const useBulkEdit = <T extends Data>({
+  bulkEditRegistration,
+  getBulkActionSelection,
+}: useBulkEditProps<T>): useBulkEditReturnType<T> => {
+  const [isBulkEditMode, setIsBulkEditMode] = useState<boolean>(false);
+  const [noItemsSelected, setNoItemsSelected] = useState<boolean>(false);
+
+  // Keep selection in a ref to avoid re-renders when the selection changes
+  const selection = useRef<ItemSelection<T>>(getBulkActionSelection());
+
+  useEffect(() => {
+    selection.current = getBulkActionSelection();
+
+    if (
+      selection.current?.mode === 'SINGLE_ITEMS' &&
+      selection.current.items &&
+      selection.current.items.length === 0
+    ) {
+      setNoItemsSelected(true);
+    } else {
+      setNoItemsSelected(false);
+    }
+  }, [getBulkActionSelection]);
+
+  const BulkEditContextProvider: React.FC = useCallback(
+    ({ children }) => {
+      return (
+        <BulkEditContext.Provider
+          value={{
+            cancel: () => setIsBulkEditMode(false),
+            isBulkEditMode,
+          }}
+        >
+          {children}
+        </BulkEditContext.Provider>
+      );
+    },
+    [isBulkEditMode],
+  );
+
+  const bulkEditAction: ExplorerBulkAction<T> | undefined = useMemo(
+    () =>
+      bulkEditRegistration
+        ? {
+            label: bulkEditRegistration.label,
+            icon: bulkEditRegistration.icon ?? IconName.BulkEdit,
+            onClick: () => setIsBulkEditMode((prev) => !prev),
+          }
+        : undefined,
+    [bulkEditRegistration],
+  );
+
+  const handleSave = useCallback(
+    async (data) => {
+      await bulkEditRegistration?.saveData(data, selection.current);
+    },
+    [bulkEditRegistration],
+  );
+
+  const BulkEditContent = useMemo(() => {
+    if (bulkEditRegistration?.component) {
+      return bulkEditRegistration.component;
+    } else if (bulkEditRegistration?.config) {
+      return (
+        <FieldSelection>
+          {BulkEditFormFieldsConfigConverter(
+            bulkEditRegistration?.config.fields,
+          )}
+        </FieldSelection>
+      );
+    }
+    return null;
+  }, [bulkEditRegistration?.component, bulkEditRegistration?.config]);
+
+  const BulkEditComponent = useMemo(() => {
+    return (
+      <FormStation<T>
+        defaultTitle="Bulk Edit Properties"
+        saveData={handleSave}
+        initialData={{ loading: false }}
+        stationMessage={
+          noItemsSelected
+            ? { title: 'No items selected', type: 'warning' }
+            : undefined
+        }
+        showSaveHeaderAction={!noItemsSelected}
+      >
+        {BulkEditContent}
+      </FormStation>
+    );
+  }, [BulkEditContent, handleSave, noItemsSelected]);
+
+  return {
+    isBulkEditMode,
+    BulkEditComponent,
+    BulkEditContextProvider,
+    bulkEditAction,
+    closeBulkEdit: () => setIsBulkEditMode(false),
+  };
+};