@axinom/mosaic-ui 0.63.0-rc.1 → 0.63.0-rc.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.63.0-rc.1",
+  "version": "0.63.0-rc.10",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6425b41d87ac24779772f202eb544e2574d9f614"
+  "gitHead": "1190cb91471f96c64d9c8c49574a4963f7b560c8"
 }

package/src/components/Accordion/Accordion.scss

@@ -42,6 +42,7 @@
 
     .button {
       transition: transform 200ms ease;
+
       svg {
         height: 40%;
       }
@@ -49,10 +50,19 @@
       svg * {
         stroke: var(--accordion-item-arrow-color, $accordion-item-arrow-color);
       }
+
+      &.disabled {
+        svg * {
+          stroke: var(
+            --accordion-item-arrow-disabled-color,
+            $accordion-item-arrow-disabled-color
+          );
+        }
+      }
+
+      &.rotated {
+        transform: rotate(90deg);
+      }
     }
   }
 }
-
-.rotated {
-  transform: rotate(90deg);
-}

package/src/components/Accordion/Accordion.spec.tsx

@@ -1,59 +1,30 @@
-import { mount, shallow } from 'enzyme';
+import '@testing-library/jest-dom';
+import { configure, fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
-import { Button } from '../Buttons';
-import { IconName } from '../Icons';
 import { Accordion } from './Accordion';
 import { AccordionItem } from './AccordionItem/AccordionItem';
 
+configure({ testIdAttribute: 'data-test-id' });
+
 describe('Accordion', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<Accordion />);
-
-    expect(wrapper).toBeTruthy();
-  });
+    render(<Accordion />);
 
-  it('contains a wrapper', () => {
-    const wrapper = shallow(<Accordion header={<b>Header</b>} />);
-
-    const accWrapper = wrapper.find('.container > div');
-
-    expect(accWrapper.hasClass('wrapper')).toBe(true);
+    expect(screen.getByTestId('accordion')).toBeInTheDocument();
   });
 
   it('renders the component header', () => {
-    const wrapper = shallow(<Accordion header={<b>Header</b>} />);
-
-    expect(wrapper.find('.header').exists()).toBeTruthy();
+    render(<Accordion header={<b>Header</b>} />);
+    expect(screen.getByTestId('accordion-header')).toBeInTheDocument();
   });
 
   it('does not render a header when the prop is not provided', () => {
-    const wrapper = shallow(<Accordion />);
-
-    expect(wrapper.find('.header').exists()).toBeFalsy();
-  });
-
-  it('populates toggleExpanded and isExpanded props of child AccordionItem components', () => {
-    const wrapper = mount(
-      <Accordion header={<b>Header</b>}>
-        <div id="extra"></div>
-        <AccordionItem header={<b>Item 1</b>}>
-          <p>Content 1</p>
-        </AccordionItem>
-      </Accordion>,
-    );
-
-    const item = wrapper.find(AccordionItem);
-    const extra = wrapper.find('#extra');
-
-    expect(item.prop('isExpanded')).toBeDefined();
-    expect(item.prop('toggleExpanded')).toBeDefined();
-
-    expect(extra.prop('isExpanded')).toBeUndefined();
-    expect(extra.prop('toggleExpanded')).toBeUndefined();
+    render(<Accordion />);
+    expect(screen.queryByTestId('accordion-header')).not.toBeInTheDocument();
   });
 
   it('expands / collapses all children when the button is clicked', () => {
-    const wrapper = mount(
+    render(
       <Accordion header={<b>Header</b>}>
         <AccordionItem header={<b>Item 1</b>}>
           <p>Content 1</p>
@@ -67,26 +38,31 @@ describe('Accordion', () => {
       </Accordion>,
     );
 
-    const button = wrapper.find('.header .button').first();
-    button.simulate('click');
+    // Find the expand/collapse all button (assuming it's the first button in header)
+    const headerButton = screen.getByTestId('accordion-toggle-all');
+    fireEvent.click(headerButton);
 
-    let items = wrapper.find(AccordionItem);
+    // All items should be expanded (content visible)
+    let rows = screen.getAllByTestId('accordion-item-content');
+    expect(rows).toHaveLength(3);
 
-    items.forEach((item) => {
-      expect(item.prop('isExpanded')).toBe(true);
+    rows.forEach((row) => {
+      expect(row).toHaveClass('expanded');
     });
 
-    button.simulate('click');
+    fireEvent.click(headerButton);
 
-    items = wrapper.find(AccordionItem);
+    // All items should be collapsed (content not visible)
+    rows = screen.getAllByTestId('accordion-item-content');
+    expect(rows).toHaveLength(3);
 
-    items.forEach((item) => {
-      expect(item.prop('isExpanded')).toBe(false);
+    rows.forEach((row) => {
+      expect(row).not.toHaveClass('expanded');
     });
   });
 
   it('displays rotated ChevronRight icon when one or more children are expanded', () => {
-    const wrapper = mount(
+    render(
       <Accordion header={<b>Header</b>}>
         <AccordionItem header={<b>Item 1</b>}>
           <p>Content 1</p>
@@ -100,25 +76,29 @@ describe('Accordion', () => {
       </Accordion>,
     );
 
-    let button = wrapper.find(Button).first();
-
-    expect(button.prop('icon')).toBe(IconName.ChevronRight);
-    expect(button.hasClass('rotated')).toBe(false);
+    // The button in the header should have the ChevronRight icon and not be rotated initially
+    const headerButton = screen.getByTestId('accordion-toggle-all');
+    expect(headerButton.querySelector('.rotated')).not.toBeInTheDocument();
 
-    const item = wrapper.find(AccordionItem).last();
+    // Expand the last item
+    const lastItemButton = screen.getAllByRole('button')[2];
+    fireEvent.click(lastItemButton);
 
-    item.find('button').simulate('click');
+    // Now the header button should have the rotated class
+    expect(headerButton).toHaveClass('rotated');
 
-    button = wrapper.find(Button).first();
+    // Collapse the last item
+    fireEvent.click(lastItemButton);
 
-    expect(button.prop('icon')).toBe(IconName.ChevronRight);
-    expect(button.hasClass('rotated')).toBe(true);
-
-    item.find('button').simulate('click');
+    // The header button should not have the rotated class anymore
+    expect(headerButton).not.toHaveClass('rotated');
+  });
 
-    button = wrapper.find(Button).first();
+  it('disables the expand/collapse all button when there are no children', () => {
+    render(<Accordion header={<b>Header</b>} />);
 
-    expect(button.prop('icon')).toBe(IconName.ChevronRight);
-    expect(button.hasClass('rotated')).toBe(false);
+    // The button should be disabled when there are no children
+    const headerButton = screen.getByTestId('accordion-toggle-all');
+    expect(headerButton).toBeDisabled();
   });
 });

package/src/components/Accordion/Accordion.stories.tsx

@@ -145,3 +145,11 @@ export const NestedSticky: StoryObj<typeof Accordion> = {
   },
   name: 'Nested Sticky',
 };
+
+export const NoChildren: StoryObj<typeof Accordion> = {
+  args: {
+    ...Default.args,
+    children: undefined,
+  },
+  name: 'No children',
+};

package/src/components/Accordion/Accordion.tsx

@@ -58,18 +58,21 @@ export const Accordion: React.FC<AccordionProps> = ({
 }) => {
   const expandAll = useExpand();
   const [expanded, setExpanded] = useState<ExpandedState>({});
+  const disabled = !React.Children.count(children);
 
   useEffect(() => {
     setExpanded((oldState) => {
-      const updatedState: ExpandedState = { ...oldState };
+      const updatedState: ExpandedState = {};
 
-      React.Children.map(children, (child, i) => {
+      React.Children.forEach(children, (child, i) => {
         if (React.isValidElement(child)) {
           if (child.type === AccordionItem) {
             const keyString = String(child.key ?? i);
 
-            if (!Object.keys(updatedState).includes(keyString)) {
+            if (!Object.keys(oldState).includes(keyString)) {
               updatedState[keyString] = expandedByDefault;
+            } else {
+              updatedState[keyString] = oldState[keyString];
             }
           }
         }
@@ -110,8 +113,11 @@ export const Accordion: React.FC<AccordionProps> = ({
               }}
               className={clsx(classes.button, {
                 [classes.rotated]: expandAll.isExpanded,
+                [classes.disabled]: disabled,
               })}
               buttonContext={ButtonContext.None}
+              disabled={disabled}
+              dataTestId="accordion-toggle-all"
             ></Button>
             {header}
           </div>

package/src/components/Accordion/AccordionItem/AccordionItem.spec.tsx

@@ -1,111 +1,73 @@
-import { mount, shallow } from 'enzyme';
+import '@testing-library/jest-dom';
+import { configure, fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { AccordionItem } from './AccordionItem';
 
-describe('AccordionItem', () => {
-  it('renders the component without crashing', () => {
-    const wrapper = shallow(<AccordionItem header={<b>Item 1</b>} />);
-
-    expect(wrapper).toBeTruthy();
-  });
+configure({ testIdAttribute: 'data-test-id' });
 
-  it('renders expanded content', () => {
-    const wrapper = shallow(
-      <AccordionItem header={<b>Item 1</b>} isExpanded={true} />,
-    );
-
-    const content = wrapper.find('.expanded');
+describe('AccordionItem', () => {
+  const header = <span>Header</span>;
+  const content = <div>Accordion Content</div>;
 
-    expect(content).toHaveLength(1);
+  it('renders header and children', () => {
+    render(<AccordionItem header={header}>{content}</AccordionItem>);
+    expect(screen.getByText('Header')).toBeInTheDocument();
+    expect(screen.getByText('Accordion Content')).toBeInTheDocument();
   });
 
-  it('does not render expanded content when isExpanded is false', () => {
-    const wrapper = shallow(
-      <AccordionItem header={<b>Item 1</b>} isExpanded={false} />,
+  it('calls toggleExpanded when row is clicked', () => {
+    const toggleExpanded = jest.fn();
+    render(
+      <AccordionItem header={header} toggleExpanded={toggleExpanded}>
+        {content}
+      </AccordionItem>,
     );
-
-    const content = wrapper.find('.expanded');
-
-    expect(content).toHaveLength(0);
+    fireEvent.click(screen.getByTestId('accordion-item-row'));
+    expect(toggleExpanded).toHaveBeenCalled();
   });
 
-  it('triggers toggleExpanded callback when the expand button is pressed', () => {
-    const spy = jest.fn();
-    const wrapper = mount(
-      <AccordionItem header={<b>Item 1</b>} toggleExpanded={spy} />,
-    );
-
-    const button = wrapper.find('button');
-
-    button.simulate('click');
-
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
-
-  it('adds 50px spacing element by default', () => {
-    const wrapper = shallow(
-      <AccordionItem header={<b>Item 1</b>}>
-        <div></div>
+  it('shows expanded styles and rotates icon when isExpanded is true', () => {
+    render(
+      <AccordionItem header={header} isExpanded>
+        {content}
       </AccordionItem>,
     );
-
-    const contentStyles = wrapper
-      .find('.content')
-      .prop('style') as React.CSSProperties;
-    const children = wrapper.find('.content > div');
-
-    expect(contentStyles.gridTemplateColumns).toBeUndefined();
-    expect(children).toHaveLength(2);
+    const row = screen.getByTestId('accordion-item-row');
+    expect(row.className).toMatch(/rowExpanded/);
+    const button = row.querySelector('button');
+    expect(button?.className).toMatch(/rotated/);
+    const contentDiv = screen.getByTestId('accordion-item-content');
+    expect(contentDiv.className).toMatch(/expanded/);
   });
 
-  it(`doesn't add 50px spacing element if 'allowLeftSpacing' is set to false`, () => {
-    const wrapper = shallow(
-      <AccordionItem header={<b>Item 1</b>} allowLeftSpacing={false}>
-        <div></div>
+  it('applies sticky class when sticky is true', () => {
+    render(
+      <AccordionItem header={header} sticky>
+        {content}
       </AccordionItem>,
     );
-
-    const contentStyles = wrapper
-      .find('.content')
-      .prop('style') as React.CSSProperties;
-    const children = wrapper.find('.content > div');
-
-    expect(contentStyles.gridTemplateColumns).toBe('1fr');
-    expect(children).toHaveLength(1);
+    const row = screen.getByTestId('accordion-item-row');
+    expect(row.className).toMatch(/sticky/);
   });
 
-  it(`should set expanded class when 'isExpanded' is true`, () => {
-    const wrapper = mount(
-      <AccordionItem header={<b>Item 1</b>} isExpanded={true}>
-        <div></div>
+  it('does not add left spacing when allowLeftSpacing is false', () => {
+    render(
+      <AccordionItem header={header} allowLeftSpacing={false}>
+        {content}
       </AccordionItem>,
     );
-
-    const expanded = wrapper.find('.expanded');
-
-    expect(expanded).toHaveLength(1);
+    const contentDiv = screen.getByText('Accordion Content').parentElement;
+    expect(contentDiv).toHaveStyle('grid-template-columns: 1fr');
   });
 
-  it(`should not set expanded class when 'isExpanded' is true`, () => {
-    const wrapper = mount(
-      <AccordionItem header={<b>Item 1</b>} isExpanded={false}>
-        <div></div>
+  it('applies custom className to root element', () => {
+    render(
+      <AccordionItem header={header} className="custom-class">
+        {content}
       </AccordionItem>,
     );
-
-    const expanded = wrapper.find('.expanded');
-
-    expect(expanded).toHaveLength(0);
-  });
-
-  it('creates a class based off of the className prop', () => {
-    const mockClassName = 'test-class';
-    const wrapper = shallow(
-      <AccordionItem header={<b>Item 1</b>} className={mockClassName} />,
+    expect(screen.getByTestId('accordion-item').className).toContain(
+      'custom-class',
     );
-
-    const item = wrapper.find('.test-class');
-
-    expect(item.hasClass(mockClassName)).toBe(true);
   });
 });

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

@@ -16,12 +16,22 @@ jest.mock('../../FormElements', () => ({
   )),
 }));
 
+jest.mock('../../FieldSelection', () => ({
+  FieldSelection: jest.fn(({ children }) => (
+    <div data-testid="FieldSelection">{children}</div>
+  )),
+}));
+
 jest.mock('formik', () => ({
   Field: jest.fn(({ name, label, as: Component }) => (
     <div data-testid={`Field-${name}`}>
       <Component name={name} label={label} />
     </div>
   )),
+  useFormikContext: jest.fn(() => ({
+    setFieldValue: jest.fn(),
+    setFieldTouched: jest.fn(),
+  })),
 }));
 
 describe('BulkEditFormFieldsConfigConverter', () => {
@@ -35,9 +45,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
       },
     };
 
-    const { getByTestId } = render(
-      <>{BulkEditFormFieldsConfigConverter(config)}</>,
-    );
+    const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
 
     expect(getByTestId('Field-title')).toBeInTheDocument();
     expect(getByTestId('SingleLineTextField')).toHaveTextContent('title-Title');
@@ -53,9 +61,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
       },
     };
 
-    const { getByTestId } = render(
-      <>{BulkEditFormFieldsConfigConverter(config)}</>,
-    );
+    const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
 
     expect(getByTestId('Field-isArchived')).toBeInTheDocument();
     expect(getByTestId('CheckboxField')).toHaveTextContent(
@@ -77,9 +83,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
       },
     };
 
-    const { getByTestId } = render(
-      <>{BulkEditFormFieldsConfigConverter(config)}</>,
-    );
+    const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
 
     expect(getByTestId('Field-tags')).toBeInTheDocument();
     expect(getByTestId('CustomTagsField')).toHaveTextContent('tags-Tags');
@@ -111,9 +115,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
       },
     };
 
-    const { getByTestId } = render(
-      <>{BulkEditFormFieldsConfigConverter(config)}</>,
-    );
+    const { getByTestId } = render(BulkEditFormFieldsConfigConverter(config));
 
     expect(getByTestId('Field-title')).toBeInTheDocument();
     expect(getByTestId('SingleLineTextField')).toHaveTextContent('title-Title');
@@ -138,14 +140,15 @@ describe('BulkEditFormFieldsConfigConverter', () => {
       },
     };
 
-    const { container } = render(
-      <>{BulkEditFormFieldsConfigConverter(config)}</>,
+    const { container, getByTestId } = render(
+      BulkEditFormFieldsConfigConverter(config),
     );
 
     expect(consoleWarnSpy).toHaveBeenCalledWith(
       'No component found for field type: UnsupportedType',
     );
-    expect(container.firstChild).toBeNull();
+    expect(getByTestId('FieldSelection')).toBeInTheDocument();
+    expect(container.firstChild).toBeEmptyDOMElement();
 
     consoleWarnSpy.mockRestore();
   });
@@ -153,10 +156,11 @@ describe('BulkEditFormFieldsConfigConverter', () => {
   it('handles empty configuration gracefully', () => {
     const config: BulkEditFieldConfigMap = {};
 
-    const { container } = render(
-      <>{BulkEditFormFieldsConfigConverter(config)}</>,
+    const { container, getByTestId } = render(
+      BulkEditFormFieldsConfigConverter(config),
     );
 
-    expect(container.firstChild).toBeNull();
+    expect(getByTestId('FieldSelection')).toBeInTheDocument();
+    expect(container.firstChild).toBeEmptyDOMElement();
   });
 });

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

@@ -1,5 +1,7 @@
-import { Field } from 'formik';
-import React from 'react';
+import { Field, useFormikContext } from 'formik';
+import React, { useEffect, useMemo } from 'react';
+import { Data } from '../../../types';
+import { FieldSelection } from '../../FieldSelection';
 import {
   CheckboxField,
   CustomTagsField,
@@ -17,29 +19,101 @@ export const defaultComponentMap = {
 export const BulkEditFormFieldsConfigConverter = (
   config: BulkEditFieldConfigMap,
   componentMap: Record<string, React.ElementType> = defaultComponentMap,
-): JSX.Element[] => {
+): JSX.Element => {
   const keys = Object.keys(config);
 
-  return keys
-    .map((key) => {
-      const fieldConfig = config[key];
+  const FormFields: React.FC = () => {
+    const {
+      setFieldValue,
+      setFieldTouched,
+      setErrors,
+      errors,
+      validateForm,
+      values,
+    } = useFormikContext<Data>();
 
-      // Determine the type of the field
-      const fieldType = Array.isArray(fieldConfig.type)
-        ? 'Array' // Use 'Array' as the key for array types
-        : fieldConfig.type;
+    const onFieldRemoved = (field: string): void => {
+      setFieldValue(field, undefined, false); // Clear the field value when removed
+      setFieldTouched(field, false, false); // Mark the field as not touched
 
-      const Component = componentMap[fieldType as keyof typeof componentMap];
+      if (errors[field]) {
+        // If there was an error for this field, clear it
+        const newErrors = { ...errors };
+        delete newErrors[field];
 
-      if (!Component) {
-        // eslint-disable-next-line no-console
-        console.warn(`No component found for field type: ${fieldType}`);
-        return null; // Filter out null entries later
+        setErrors(newErrors);
+
+        validateForm();
       }
+    };
+
+    // Effect to clear empty fields
+    // This will set fields with empty strings or empty arrays to undefined
+    useEffect(() => {
+      values &&
+        Object.keys(values).forEach((key) => {
+          if (values[key] === '' || values[key].length === 0) {
+            setFieldValue(key, undefined);
+          }
+        });
+    }, [setFieldValue, values]);
+
+    const onFieldAdded = (field: string): void => {
+      setFieldTouched(field, true); // Mark the field as touched when added
+    };
+
+    const fields = useMemo(
+      () =>
+        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}
+                validate={(value: unknown) => {
+                  if (fieldType === 'Array') {
+                    // Array can be empty, so no validation needed
+                    return;
+                  }
+                  if (value === null || value === undefined || value === '') {
+                    return 'This field is required';
+                  }
+                }}
+                autoFocus={true}
+                as={Component}
+              />
+            );
+          })
+          .filter((element): element is JSX.Element => element !== null),
+      [],
+    );
+
+    return (
+      <FieldSelection
+        onFieldRemoved={onFieldRemoved}
+        onFieldAdded={onFieldAdded}
+      >
+        {fields}
+      </FieldSelection>
+    );
+  };
 
-      return (
-        <Field name={key} key={key} label={fieldConfig.label} as={Component} />
-      );
-    })
-    .filter((element): element is JSX.Element => element !== null);
+  return <FormFields />;
 };