@axinom/mosaic-ui 0.64.0-rc.14 → 0.64.0-rc.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.64.0-rc.14",
+  "version": "0.64.0-rc.16",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2d29bbc90e5ee2b89810523b9afb2eac1647bd07"
+  "gitHead": "36be53de98dc95441930f738df41d7fb21192bde"
 }

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

@@ -17,24 +17,43 @@ jest.mock('../../FormElements', () => ({
 }));
 
 jest.mock('../../FieldSelection', () => ({
-  FieldSelection: jest.fn(({ children }) => (
-    <div data-testid="FieldSelection">{children}</div>
+  FieldSelection: jest.fn(({ children, onFieldRemoved, onFieldAdded }) => (
+    <div
+      data-testid="FieldSelection"
+      data-on-field-removed={!!onFieldRemoved}
+      data-on-field-added={!!onFieldAdded}
+    >
+      {children}
+    </div>
   )),
 }));
 
+const mockSetFieldValue = jest.fn();
+const mockSetFieldTouched = jest.fn();
+const mockSetErrors = jest.fn();
+const mockValidateForm = jest.fn();
+
 jest.mock('formik', () => ({
-  Field: jest.fn(({ name, label, as: Component }) => (
-    <div data-testid={`Field-${name}`}>
+  Field: jest.fn(({ name, label, as: Component, validate }) => (
+    <div data-testid={`Field-${name}`} data-has-validation={!!validate}>
       <Component name={name} label={label} />
     </div>
   )),
   useFormikContext: jest.fn(() => ({
-    setFieldValue: jest.fn(),
-    setFieldTouched: jest.fn(),
+    setFieldValue: mockSetFieldValue,
+    setFieldTouched: mockSetFieldTouched,
+    setErrors: mockSetErrors,
+    errors: {},
+    validateForm: mockValidateForm,
+    values: {},
   })),
 }));
 
 describe('BulkEditFormFieldsConfigConverter', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('renders a Formik Field wrapping SingleLineTextField for String type', () => {
     const config: BulkEditFieldConfigMap = {
       title: {
@@ -48,7 +67,19 @@ describe('BulkEditFormFieldsConfigConverter', () => {
     const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
 
     expect(getByTestId('Field-title')).toBeInTheDocument();
+    expect(getByTestId('Field-title')).toHaveAttribute(
+      'data-has-validation',
+      'true',
+    );
     expect(getByTestId('SingleLineTextField')).toHaveTextContent('title-Title');
+    expect(getByTestId('FieldSelection')).toHaveAttribute(
+      'data-on-field-removed',
+      'true',
+    );
+    expect(getByTestId('FieldSelection')).toHaveAttribute(
+      'data-on-field-added',
+      'true',
+    );
   });
 
   it('renders a Formik Field wrapping CheckboxField for Boolean type', () => {
@@ -64,6 +95,10 @@ describe('BulkEditFormFieldsConfigConverter', () => {
     const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
 
     expect(getByTestId('Field-isArchived')).toBeInTheDocument();
+    expect(getByTestId('Field-isArchived')).toHaveAttribute(
+      'data-has-validation',
+      'true',
+    );
     expect(getByTestId('CheckboxField')).toHaveTextContent(
       'isArchived-Is Archived',
     );
@@ -86,6 +121,10 @@ describe('BulkEditFormFieldsConfigConverter', () => {
     const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
 
     expect(getByTestId('Field-tags')).toBeInTheDocument();
+    expect(getByTestId('Field-tags')).toHaveAttribute(
+      'data-has-validation',
+      'true',
+    );
     expect(getByTestId('CustomTagsField')).toHaveTextContent('tags-Tags');
   });
 
@@ -127,6 +166,20 @@ describe('BulkEditFormFieldsConfigConverter', () => {
 
     expect(getByTestId('Field-tags')).toBeInTheDocument();
     expect(getByTestId('CustomTagsField')).toHaveTextContent('tags-Tags');
+
+    // Check that all fields have validation
+    expect(getByTestId('Field-title')).toHaveAttribute(
+      'data-has-validation',
+      'true',
+    );
+    expect(getByTestId('Field-isArchived')).toHaveAttribute(
+      'data-has-validation',
+      'true',
+    );
+    expect(getByTestId('Field-tags')).toHaveAttribute(
+      'data-has-validation',
+      'true',
+    );
   });
 
   it('logs a warning for unsupported field types', () => {
@@ -140,15 +193,20 @@ describe('BulkEditFormFieldsConfigConverter', () => {
       },
     };
 
-    const { container, getByTestId } = render(
-      BulkEditFormFieldsConfigConverter(config),
-    );
+    const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
 
     expect(consoleWarnSpy).toHaveBeenCalledWith(
       'Bulk Edit: No component found for field type: UnsupportedType',
     );
     expect(getByTestId('FieldSelection')).toBeInTheDocument();
-    expect(container.firstChild).toBeEmptyDOMElement();
+    expect(getByTestId('FieldSelection')).toHaveAttribute(
+      'data-on-field-removed',
+      'true',
+    );
+    expect(getByTestId('FieldSelection')).toHaveAttribute(
+      'data-on-field-added',
+      'true',
+    );
 
     consoleWarnSpy.mockRestore();
   });
@@ -156,11 +214,97 @@ describe('BulkEditFormFieldsConfigConverter', () => {
   it('handles empty configuration gracefully', () => {
     const config: BulkEditFieldConfigMap = {};
 
-    const { container, getByTestId } = render(
-      BulkEditFormFieldsConfigConverter(config),
-    );
+    const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
 
     expect(getByTestId('FieldSelection')).toBeInTheDocument();
-    expect(container.firstChild).toBeEmptyDOMElement();
+    expect(getByTestId('FieldSelection')).toHaveAttribute(
+      'data-on-field-removed',
+      'true',
+    );
+    expect(getByTestId('FieldSelection')).toHaveAttribute(
+      'data-on-field-added',
+      'true',
+    );
+  });
+
+  it('validates field values correctly', () => {
+    const config: BulkEditFieldConfigMap = {
+      title: {
+        type: 'String',
+        label: 'Title',
+        originalFieldName: 'title',
+        action: 'set',
+      },
+    };
+
+    render(BulkEditFormFieldsConfigConverter(config));
+
+    // Get the validation function from the Field mock
+    const mockField = jest.mocked(jest.requireMock('formik').Field);
+    const fieldCall = mockField.mock.calls[0][0] as any;
+    const validateFn = fieldCall.validate;
+
+    // Test validation for empty values
+    expect(validateFn(null)).toBe('Please provide a value');
+    expect(validateFn(undefined)).toBe('Please provide a value');
+    expect(validateFn('')).toBe('Please provide a value');
+    expect(validateFn([])).toBe('Please provide a value');
+
+    // Test validation for valid values
+    expect(validateFn('valid value')).toBeUndefined();
+    expect(validateFn(['valid', 'array'])).toBeUndefined();
+  });
+
+  it('supports BigFloat type with SingleLineTextField', () => {
+    const config: BulkEditFieldConfigMap = {
+      price: {
+        type: 'BigFloat',
+        label: 'Price',
+        originalFieldName: 'price',
+        action: 'set',
+      },
+    };
+
+    const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
+
+    expect(getByTestId('Field-price')).toBeInTheDocument();
+    expect(getByTestId('SingleLineTextField')).toHaveTextContent('price-Price');
+  });
+
+  it('calls useFormikContext hooks correctly', () => {
+    const config: BulkEditFieldConfigMap = {
+      title: {
+        type: 'String',
+        label: 'Title',
+        originalFieldName: 'title',
+        action: 'set',
+      },
+    };
+
+    render(BulkEditFormFieldsConfigConverter(config));
+
+    // Verify that useFormikContext was called
+    expect(mockSetFieldValue).toBeDefined();
+    expect(mockSetFieldTouched).toBeDefined();
+    expect(mockSetErrors).toBeDefined();
+    expect(mockValidateForm).toBeDefined();
+  });
+
+  it('handles field clearing functionality through FieldSelection callbacks', () => {
+    const config: BulkEditFieldConfigMap = {
+      title: {
+        type: 'String',
+        label: 'Title',
+        originalFieldName: 'title',
+        action: 'set',
+      },
+    };
+
+    const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
+    const fieldSelection = getByTestId('FieldSelection');
+
+    // Verify that the FieldSelection component receives the callback props
+    expect(fieldSelection).toHaveAttribute('data-on-field-removed', 'true');
+    expect(fieldSelection).toHaveAttribute('data-on-field-added', 'true');
   });
 });

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

@@ -13,7 +13,7 @@ export const defaultComponentMap = {
   String: SingleLineTextField,
   BigFloat: SingleLineTextField,
   Boolean: CheckboxField,
-  Array: CustomTagsField, // Map array types to CustomTagsComponent
+  Tags: CustomTagsField, // Map array types to CustomTagsComponent
 };
 
 export const BulkEditFormFieldsConfigConverter = (
@@ -73,7 +73,7 @@ export const BulkEditFormFieldsConfigConverter = (
 
             // Determine the type of the field
             const fieldType = Array.isArray(fieldConfig.type)
-              ? 'Array' // Use 'Array' as the key for array types
+              ? 'Tags' // Treat single String type as Tags
               : fieldConfig.type;
 
             const Component =

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

@@ -138,4 +138,213 @@ describe('generateBulkEditMutation', () => {
       ),
     ).toThrow('No valid fields to generate mutation');
   });
+
+  it('should include filter parameter when provided', () => {
+    const sampleValues = {
+      altText: 'Sample Alt Text',
+    };
+    const filter = { id: { in: ['1', '2', '3'] } };
+
+    const result = generateBulkEditMutation(
+      BulkEditImagesAsyncFormFieldsConfig,
+      sampleValues,
+      filter,
+    );
+
+    expect(result).toBe(
+      `mutation { bulkEditImagesAsync (set: {altText: "Sample Alt Text"}, filter: {id: {in: ["1", "2", "3"]}}) { filterMatchedIds } }`,
+    );
+  });
+
+  it('should use custom key names when provided in config', () => {
+    const configWithCustomKeys: BulkEditConfig = {
+      mutation: 'bulkEditCustom',
+      keys: {
+        add: 'customAdd',
+        remove: 'customRemove',
+        set: 'customSet',
+        filter: 'customFilter',
+      },
+      fields: {
+        tagsAdd: {
+          type: [{ name: 'String!' }],
+          label: 'Tags Add',
+          originalFieldName: 'tags',
+          action: 'customAdd',
+        },
+        tagsRemove: {
+          type: [{ name: 'String!' }],
+          label: 'Tags Remove',
+          originalFieldName: 'tags',
+          action: 'customRemove',
+        },
+        title: {
+          type: 'String',
+          label: 'Title',
+          originalFieldName: 'title',
+          action: 'customSet',
+        },
+      },
+    };
+
+    const sampleValues = {
+      tagsAdd: ['tag1'],
+      tagsRemove: ['tag2'],
+      title: 'Custom Title',
+    };
+    const filter = { active: true };
+
+    const result = generateBulkEditMutation(
+      configWithCustomKeys,
+      sampleValues,
+      filter,
+    );
+
+    expect(result).toBe(
+      `mutation { bulkEditCustom (customAdd: {tags: [{name: "tag1"}]}, customRemove: {tags: [{name: "tag2"}]}, customSet: {title: "Custom Title"}, customFilter: {active: true}) { filterMatchedIds } }`,
+    );
+  });
+
+  it('should handle object values in related entities arrays', () => {
+    const configWithObjectValues: BulkEditConfig = {
+      mutation: 'bulkEditObjects',
+      fields: {
+        categoriesAdd: {
+          type: [{ id: 'String!', name: 'String!' }],
+          label: 'Categories Add',
+          originalFieldName: 'categories',
+          action: 'relatedEntitiesToAdd',
+        },
+      },
+    };
+
+    const sampleValues = {
+      categoriesAdd: [
+        { id: '1', name: 'Category 1' },
+        { id: '2', name: 'Category 2' },
+      ],
+    };
+
+    const result = generateBulkEditMutation(
+      configWithObjectValues,
+      sampleValues,
+    );
+
+    expect(result).toBe(
+      `mutation { bulkEditObjects (relatedEntitiesToAdd: {categories: [{id: "1", name: "Category 1"}, {id: "2", name: "Category 2"}]}) { filterMatchedIds } }`,
+    );
+  });
+
+  it('should handle null and undefined values correctly', () => {
+    const sampleValues = {
+      altText: null,
+      focalX: undefined,
+      title: '',
+      isArchived: false,
+    };
+
+    const result = generateBulkEditMutation(
+      BulkEditImagesAsyncFormFieldsConfig,
+      sampleValues,
+    );
+
+    // Note: null and undefined values are excluded by the implementation's fieldValues !== undefined && fieldValues !== null check
+    // Only non-null/undefined values are included in the 'set' operation
+    expect(result).toBe(
+      `mutation { bulkEditImagesAsync (set: {isArchived: false, title: ""}) { filterMatchedIds } }`,
+    );
+  });
+
+  it('should include null values explicitly in set operations when they are the only value', () => {
+    const sampleValues = {
+      altText: null,
+    };
+
+    // This test demonstrates the current behavior - null values are excluded
+    // This might be a bug in the implementation, as setting a field to null might be intentional
+    expect(() =>
+      generateBulkEditMutation(
+        BulkEditImagesAsyncFormFieldsConfig,
+        sampleValues,
+      ),
+    ).toThrow('No valid fields to generate mutation');
+  });
+
+  it('should handle zero and false values correctly (they should be included)', () => {
+    const sampleValues = {
+      focalX: 0,
+      focalY: 0,
+      isArchived: false,
+      title: '',
+    };
+
+    const result = generateBulkEditMutation(
+      BulkEditImagesAsyncFormFieldsConfig,
+      sampleValues,
+    );
+
+    expect(result).toBe(
+      `mutation { bulkEditImagesAsync (set: {focalX: 0, focalY: 0, isArchived: false, title: ""}) { filterMatchedIds } }`,
+    );
+  });
+
+  it('should handle empty arrays in related entities', () => {
+    const sampleValues = {
+      imagesTagsAdd: [],
+      imagesTagsRemove: ['tag1'],
+      altText: 'Test',
+    };
+
+    const result = generateBulkEditMutation(
+      BulkEditImagesAsyncFormFieldsConfig,
+      sampleValues,
+    );
+
+    // Note: Empty arrays are truthy, so they get included in the mutation
+    expect(result).toBe(
+      `mutation { bulkEditImagesAsync (relatedEntitiesToAdd: {imagesTags: []}, relatedEntitiesToRemove: {imagesTags: [{name: "tag1"}]}, set: {altText: "Test"}) { filterMatchedIds } }`,
+    );
+  });
+
+  it('should handle mixed string and object values in the same field', () => {
+    const configWithMixedValues: BulkEditConfig = {
+      mutation: 'bulkEditMixed',
+      fields: {
+        itemsAdd: {
+          type: [{ id: 'String!' }],
+          label: 'Items Add',
+          originalFieldName: 'items',
+          action: 'relatedEntitiesToAdd',
+        },
+      },
+    };
+
+    const sampleValues = {
+      itemsAdd: ['string-id', { id: 'object-id', extra: 'data' }],
+    };
+
+    const result = generateBulkEditMutation(
+      configWithMixedValues,
+      sampleValues,
+    );
+
+    expect(result).toBe(
+      `mutation { bulkEditMixed (relatedEntitiesToAdd: {items: [{id: "string-id"}, {id: "object-id", extra: "data"}]}) { filterMatchedIds } }`,
+    );
+  });
+
+  it('should throw error when all provided values are falsy but not explicitly null/false', () => {
+    const sampleValues = {
+      imagesTagsAdd: undefined,
+      imagesTagsRemove: null,
+      altText: undefined,
+    };
+
+    expect(() =>
+      generateBulkEditMutation(
+        BulkEditImagesAsyncFormFieldsConfig,
+        sampleValues,
+      ),
+    ).toThrow('No valid fields to generate mutation');
+  });
 });

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

@@ -20,12 +20,45 @@ export const generateBulkEditMutation = <T extends Data>(
       const fieldValues = values[key];
 
       if (fieldValues) {
-        acc = {
-          ...acc,
-          [field.originalFieldName]: fieldValues.map((item: string) => ({
-            name: item,
-          })),
-        };
+        if (Array.isArray(fieldValues)) {
+          return {
+            ...acc,
+            [field.originalFieldName]: [
+              ...(Array.isArray(acc[field.originalFieldName])
+                ? (acc[field.originalFieldName] as unknown[])
+                : []),
+              ...fieldValues.map((item: string | object) => {
+                if (typeof item === 'object') {
+                  return { ...item };
+                }
+                if (
+                  Array.isArray(field.type) &&
+                  field.type.length > 0 &&
+                  field.type[0] &&
+                  typeof field.type[0] === 'object' &&
+                  Object.keys(field.type[0]).length > 0
+                ) {
+                  const key = Object.keys(field.type[0])[0];
+                  return {
+                    [key]: item,
+                  };
+                } else {
+                  throw new Error(
+                    `Invalid field type. Check generated bulk edit configuration. Generating graphql mutation for field: ${JSON.stringify(
+                      field,
+                    )}`,
+                  );
+                }
+              }),
+            ],
+          };
+        } else {
+          throw new Error(
+            `Assignment field is not an array. Generating graphql mutation for field: ${JSON.stringify(
+              field,
+            )}`,
+          );
+        }
       }
       return acc;
     }, {} as Record<string, unknown>);
@@ -36,12 +69,45 @@ export const generateBulkEditMutation = <T extends Data>(
       const fieldValues = values[key];
 
       if (fieldValues) {
-        acc = {
-          ...acc,
-          [field.originalFieldName]: fieldValues.map((item: string) => ({
-            name: item,
-          })),
-        };
+        if (Array.isArray(fieldValues)) {
+          return {
+            ...acc,
+            [field.originalFieldName]: [
+              ...(Array.isArray(acc[field.originalFieldName])
+                ? (acc[field.originalFieldName] as unknown[])
+                : []),
+              ...fieldValues.map((item: string | object) => {
+                if (typeof item === 'object') {
+                  return { ...item };
+                }
+                if (
+                  Array.isArray(field.type) &&
+                  field.type.length > 0 &&
+                  field.type[0] &&
+                  typeof field.type[0] === 'object' &&
+                  Object.keys(field.type[0]).length > 0
+                ) {
+                  const key = Object.keys(field.type[0])[0];
+                  return {
+                    [key]: item,
+                  };
+                } else {
+                  throw new Error(
+                    `Invalid field type. Check generated bulk edit configuration. Generating graphql mutation for field: ${JSON.stringify(
+                      field,
+                    )}`,
+                  );
+                }
+              }),
+            ],
+          };
+        } else {
+          throw new Error(
+            `Assignment field is not an array. Generating graphql mutation for field: ${JSON.stringify(
+              field,
+            )}`,
+          );
+        }
       }
       return acc;
     }, {} as Record<string, unknown>);

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

@@ -1,3 +1,4 @@
+export { EnumType as BulkEditEnumType } from 'json-to-graphql-query';
 export type * from './BulkEdit.model';
 export { BulkEditContext, BulkEditContextType } from './BulkEditContext';
 export {

package/src/components/Explorer/index.ts

@@ -2,6 +2,7 @@ export {
   BulkEditConfig,
   BulkEditContext,
   BulkEditContextType,
+  BulkEditEnumType,
   BulkEditFieldConfig,
   BulkEditFieldConfigMap,
   BulkEditFormFieldsConfigConverter,

package/src/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup.scss

@@ -32,46 +32,46 @@
     background-color: white;
 
     z-index: 2;
-  }
-}
 
-.dropDown {
-  height: unset;
-  width: unset;
+    .dropDown {
+      height: unset;
+      width: unset;
 
-  display: grid;
-  grid-template-columns: 1fr 40px;
-  grid-template-rows: 1fr;
+      display: grid;
+      grid-template-columns: 1fr 40px;
+      grid-template-rows: 1fr;
 
-  // icon
-  div:first-child {
-    display: grid;
-    align-items: center;
-    grid-row: 1 / span 1;
-    justify-items: start;
-    grid-column: 2 / span 1;
-    padding: 0px;
+      // icon
+      div:first-child {
+        display: grid;
+        align-items: center;
+        grid-row: 1 / span 1;
+        justify-items: start;
+        grid-column: 2 / span 1;
+        padding: 0px;
 
-    svg,
-    img {
-      height: 30px;
-    }
-  }
+        svg,
+        img {
+          height: 30px;
+        }
+      }
 
-  // label
-  div:last-child {
-    display: grid;
-    align-items: center;
-    grid-column: 1 / span 1;
-    justify-items: start;
+      // label
+      div:last-child {
+        display: grid;
+        align-items: center;
+        grid-column: 1 / span 1;
+        justify-items: start;
 
-    padding: 0px 0px 0px 20px;
+        padding: 0px 0px 0px 20px;
 
-    span {
-      height: 30px;
+        span {
+          height: 30px;
 
-      display: grid;
-      align-items: center;
+          display: grid;
+          align-items: center;
+        }
+      }
     }
   }
 }