@axinom/mosaic-ui 0.63.0-rc.3 → 0.63.0-rc.5

package/package.json

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

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,6 +58,7 @@ export const Accordion: React.FC<AccordionProps> = ({
 }) => {
   const expandAll = useExpand();
   const [expanded, setExpanded] = useState<ExpandedState>({});
+  const disabled = !React.Children.count(children);
 
   useEffect(() => {
     setExpanded((oldState) => {
@@ -110,8 +111,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,65 @@ 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, 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); // Clear the field value when removed
+      setFieldTouched(field, false); // Mark the field as not touched
+    };
 
-      const Component = componentMap[fieldType as keyof typeof componentMap];
+    // 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]);
 
-      if (!Component) {
-        // eslint-disable-next-line no-console
-        console.warn(`No component found for field type: ${fieldType}`);
-        return null; // Filter out null entries later
-      }
+    const fields = useMemo(
+      () =>
+        keys
+          .map((key) => {
+            const fieldConfig = config[key];
 
-      return (
-        <Field name={key} key={key} label={fieldConfig.label} as={Component} />
-      );
-    })
-    .filter((element): element is JSX.Element => element !== null);
+            // 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),
+      [],
+    );
+
+    return (
+      <FieldSelection onFieldRemoved={onFieldRemoved}>{fields}</FieldSelection>
+    );
+  };
+
+  return <FormFields />; // Return the FormFields component
 };

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

@@ -6,7 +6,6 @@ import React, {
   useState,
 } from 'react';
 import { Data } from '../../../types';
-import { FieldSelection } from '../../FieldSelection';
 import { FormStation } from '../../FormStation';
 import { IconName } from '../../Icons';
 import {
@@ -74,7 +73,7 @@ export const useBulkEdit = <T extends Data>({
     () =>
       bulkEditRegistration
         ? {
-            label: bulkEditRegistration.label,
+            label: bulkEditRegistration.label ?? 'Bulk Edit',
             icon: bulkEditRegistration.icon ?? IconName.BulkEdit,
             onClick: () => setIsBulkEditMode((prev) => !prev),
           }
@@ -93,12 +92,8 @@ export const useBulkEdit = <T extends Data>({
     if (bulkEditRegistration?.component) {
       return bulkEditRegistration.component;
     } else if (bulkEditRegistration?.config) {
-      return (
-        <FieldSelection>
-          {BulkEditFormFieldsConfigConverter(
-            bulkEditRegistration?.config.fields,
-          )}
-        </FieldSelection>
+      return BulkEditFormFieldsConfigConverter(
+        bulkEditRegistration?.config.fields,
       );
     }
     return null;
@@ -116,6 +111,8 @@ export const useBulkEdit = <T extends Data>({
             : undefined
         }
         showSaveHeaderAction={!noItemsSelected}
+        saveHeaderActionTitle="Apply"
+        saveNotificationMessage="Your changes are being applied to the selected items."
       >
         {BulkEditContent}
       </FormStation>

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

@@ -127,7 +127,7 @@ export interface QuickEditRegistration<T> {
 
 export interface BulkEditRegistration<T extends Data> {
   /** The label of the action. */
-  label: string;
+  label?: string;
   /** Optional built in icon. This prop also accepts an img src. */
   icon?: IconName | string;
   /** Component to render. This will override the component that is generated. */