@scality/core-ui 0.162.0 → 0.163.0

package/src/lib/components/chartlegend/ChartLegendWrapper.tsx

@@ -0,0 +1,85 @@
+import { createContext, useContext, useState, ReactNode, useMemo, useCallback } from 'react';
+import { ChartColors } from '../../style/theme';
+
+export type ChartLegendState = {
+  selectedResources: string[];
+  addSelectedResource: (resource: string) => void;
+  removeSelectedResource: (resource: string) => void;
+  isSelected: (resource: string) => boolean;
+  getColor: (resource: string) => string | undefined;
+  listResources: () => string[];
+};
+
+const ChartLegendContext = createContext<ChartLegendState | null>(null);
+
+export type ChartLegendWrapperProps = {
+  children: ReactNode;
+  colorSet: Record<string, ChartColors | string>;
+};
+
+export const ChartLegendWrapper = ({
+  children,
+  colorSet,
+}: ChartLegendWrapperProps) => {
+  const [selectedResources, setSelectedResources] = useState<string[]>([]);
+
+  const addSelectedResource = useCallback((resource: string) => {
+    setSelectedResources((prev) =>
+      prev.includes(resource) ? prev : [...prev, resource],
+    );
+  }, []);
+
+  const removeSelectedResource = useCallback((resource: string) => {
+    setSelectedResources((prev) => prev.filter((r) => r !== resource));
+  }, []);
+
+  const isSelected = useCallback((resource: string) => {
+    return selectedResources.includes(resource);
+  }, [selectedResources]);
+
+  const getColor = useCallback((resource: string) => {
+    const color = colorSet[resource];
+    if (!color) {
+      console.warn(
+        `ChartLegendWrapper: No color defined for resource "${resource}"`,
+      );
+      return undefined;
+    }
+    return color;
+  }, [colorSet]);
+
+  const listResources = useCallback(() => {
+    return Object.keys(colorSet);
+  }, [colorSet]);
+
+  const chartLegendState = useMemo(() => ({
+    selectedResources,
+    addSelectedResource,
+    removeSelectedResource,
+    isSelected,
+    getColor,
+    listResources,
+  }), [
+    selectedResources,
+    addSelectedResource,
+    removeSelectedResource,
+    isSelected,
+    getColor,
+    listResources,
+  ]);
+
+  return (
+    <ChartLegendContext.Provider value={chartLegendState}>
+      {children}
+    </ChartLegendContext.Provider>
+  );
+};
+
+// Hook for accessing legend state in custom components
+export const useChartLegend = () => {
+  const context = useContext(ChartLegendContext);
+  if (!context) {
+    throw new Error('useChartLegend must be used within a ChartLegendWrapper');
+  }
+  return context;
+};

package/src/lib/components/date/FormattedDateTime.spec.tsx

@@ -214,4 +214,28 @@ describe('FormatttedDateTime', () => {
     //V
     expect(screen.getByText('2022-12-12 11:57:26')).toBeInTheDocument();
   });
+
+  it('should display the date in the expected format of the xaxis tick in the chart', () => {
+    //S
+    render(
+      <FormattedDateTime
+        format="day-month-abbreviated-hour-minute"
+        value={new Date('2022-10-06T18:33:00Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('6 Oct 18:33')).toBeInTheDocument();
+  });
+
+  it('should display the date in the expected format of date in the chart', () => {
+    //S
+    render(
+      <FormattedDateTime
+        format="day-month-abbreviated-hour-minute-second"
+        value={new Date('2022-10-06T18:33:00Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('6 Oct 18:33:00')).toBeInTheDocument();
+  });
 });

package/src/lib/components/date/FormattedDateTime.tsx

@@ -27,6 +27,26 @@ export const TIME_FORMATER = Intl.DateTimeFormat('en-GB', {
   minute: '2-digit',
 });
 
+export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat(
+  'en-GB',
+  {
+    day: 'numeric',
+    month: 'short',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  },
+);
+
+export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
+  day: 'numeric',
+  month: 'short',
+  hour: '2-digit',
+  minute: '2-digit',
+  hour12: false,
+});
+
 type FormattedDateTimeProps = {
   format:
     | 'date'
@@ -34,7 +54,9 @@ type FormattedDateTimeProps = {
     | 'date-time-second'
     | 'time'
     | 'time-second'
-    | 'relative';
+    | 'relative'
+    | 'day-month-abbreviated-hour-minute'
+    | 'day-month-abbreviated-hour-minute-second';
   value: Date;
 };
 
@@ -149,7 +171,19 @@ export const FormattedDateTime = ({
           few seconds ago
         </Tooltip>
       );
-    //TO FINISH
+    case 'day-month-abbreviated-hour-minute':
+      return (
+        <>{DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(value).replace(',', '')}</>
+      );
+    case 'day-month-abbreviated-hour-minute-second':
+      return (
+        <>
+          {DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND.format(value).replace(
+            ',',
+            '',
+          )}
+        </>
+      );
     default:
       return <></>;
   }

package/src/lib/components/healthselectorv2/HealthSelector.component.test.tsx

@@ -3,18 +3,18 @@ import {
   optionsDefaultConfiguration,
 } from './HealthSelector.component';
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { QueryClient, QueryClientProvider } from 'react-query';
 import { getWrapper } from '../../testUtils';
 describe('HealthSelector', () => {
-  it('should display correctly without any props and select first option', () => {
+  it('should display correctly without any props and select first option', async () => {
     const { Wrapper } = getWrapper();
     const { getByText } = render(
       <Wrapper>
         <HealthSelector id="health" onChange={() => {}} />
       </Wrapper>,
     );
+    await waitFor(() => screen.findByRole('img', { hidden: true }));
     const input = screen.getByRole('textbox');
 
     // open the menu

package/src/lib/components/icon/Icon.component.tsx

@@ -7,12 +7,14 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { useQuery } from 'react-query';
 import styled, { css } from 'styled-components';
 import { CoreUITheme } from '../../style/theme';
 import { Loader } from '../loader/Loader.component';
 import { RemoteGroup, RemoteUser } from './CustomsIcons';
 
+// Module-level cache for imported icons
+const iconCache: Record<string, any> = {};
+
 export const iconTable = {
   Account: 'fas faWallet',
   Backend: 'fas faNetworkWired',
@@ -141,10 +143,10 @@ export const iconTable = {
 };
 
 export const customIcons = {
-  'Remote-user': ({ ariaLabel, color, size }) => (
+  'Remote-user': ({ 'aria-label': ariaLabel, color, size }) => (
     <RemoteUser ariaLabel={ariaLabel} color={color} size={size} />
   ),
-  'Remote-group': ({ ariaLabel, color, size }) => (
+  'Remote-group': ({ 'aria-label': ariaLabel, color, size }) => (
     <RemoteGroup ariaLabel={ariaLabel} color={color} size={size} />
   ),
 };
@@ -169,7 +171,7 @@ type Props = {
   ariaLabel?: string;
   withWrapper?: boolean;
   style?: CSSProperties;
-  onClick?: (event: MouseEvent) => void;
+  onClick?: (event: React.MouseEvent) => void;
   title?: string;
 };
 
@@ -226,7 +228,7 @@ export const IconWrapper = styled.div<{ size: SizeProp }>`
 function NonWrappedIcon({
   name,
   size = '1x',
-  color = undefined,
+  color,
   ariaLabel = '',
   title,
   ...rest
@@ -234,63 +236,49 @@ function NonWrappedIcon({
   const iconInfo = iconTable[name] || customIcons[name];
   if (!iconInfo) throw new Error(`${name}: is not a valid icon.`);
 
-  const { data, status } = useQuery({
-    queryKey: ['icon', name],
-    queryFn: async () => {
-      if (customIcons[name]) {
-        return {
-          default: customIcons[name],
-        };
-      }
-      const [iconType, iconClass] = iconInfo.split(' ');
-      try {
-        const fontAwesomeType =
-          iconType === 'far'
-            ? 'free-regular-svg-icons'
-            : 'free-solid-svg-icons';
-        const icon = await import(
-          `@fortawesome/${fontAwesomeType}/${iconClass}.js`
-        );
-        return {
-          default: ({ name, color, size, ariaLabel, ...rest }) => (
-            <IconStyled
-              color={color}
-              icon={icon[iconClass]}
-              size={size}
-              aria-label={`${name} ${ariaLabel}`}
-              {...rest}
-            />
-          ),
-        };
-      } catch {
-        return {
-          default: ({ name, ariaLabel }) => (
-            <Loader size="base" aria-label={`${name} ${ariaLabel}`} />
-          ),
-        };
-      }
-    },
-  });
+  // Loaded fortawesome icon if not a custom icon
+  const [icon, setIcon] = useState();
 
-  return (
-    <>
-      {(status === 'loading' || status === 'error') && (
-        <DelayedFallback aria-label={`${name} ${ariaLabel}`}>
-          <Loader size="base" />
-        </DelayedFallback>
-      )}
+  useEffect(() => {
+    if (customIcons[name]) {
+      return;
+    }
+
+    const [iconType, iconClass] = iconInfo.split(' ');
+    const fontAwesomeType = iconType === 'far' ? 'free-regular-svg-icons' : 'free-solid-svg-icons';
+    const cacheKey = `${fontAwesomeType}/${iconClass}`;
+    if (iconCache[cacheKey]) {
+      setIcon(iconCache[cacheKey]);
+      return () => setIcon(undefined);
+    }
 
-      {status === 'success' && (
-        <data.default
-          name={name}
-          color={color}
-          size={size}
-          ariaLabel={ariaLabel}
-          title={title}
-          {...rest}
-        />
-      )}
-    </>
+    // Handle FontAwesome icons with dynamic import
+    import(`@fortawesome/${fontAwesomeType}/${iconClass}.js`)
+      .then((module) => {
+        setIcon(module[iconClass]);
+        iconCache[cacheKey] = module[iconClass];
+      });
+    return () => setIcon(undefined);
+  }, [name, iconInfo]);
+
+  if (!icon && !customIcons[name]) {
+    return (
+      <DelayedFallback aria-label={`${name} ${ariaLabel}`}>
+        <Loader size="base" />
+      </DelayedFallback>
+    );
+  }
+
+  const IconComponent = customIcons[name] ?? IconStyled;
+  return (
+    <IconComponent
+      color={color}
+      icon={icon}
+      size={size}
+      title={title}
+      aria-label={`${name} ${ariaLabel}`}
+      {...rest}
+      />
   );
 }
 

package/src/lib/components/inlineinput/InlineInput.test.tsx

@@ -7,6 +7,7 @@ import {
 } from 'react-query';
 import { ToastProvider } from '../toast/ToastProvider';
 import {
+  act,
   render,
   screen,
   waitFor,
@@ -68,17 +69,18 @@ describe('InlineInput', () => {
         </ChangeMutationProvider>,
         { wrapper: Wrapper },
       );
+      await waitFor(() => screen.findByRole('img', { hidden: true }));
 
       //E
       /// First focus the edit button
       await userEvent.tab();
       /// Then press enter to edit the input
-      await userEvent.keyboard('{enter}');
+      await act(() => userEvent.keyboard('{enter}'));
       /// Then type a new value
-      await userEvent.type(document.activeElement, 'new value');
+      await act(() => userEvent.type(document.activeElement, 'new value'));
       /// Then press enter to confirm the new value
-      await userEvent.keyboard('{enter}');
-      await waitForElementToBeRemoved(() => screen.getByRole('textbox'));
+      await act(() => userEvent.keyboard('{enter}'));
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
 
       //V
       expect(mock).toHaveBeenCalledWith('testnew value');
@@ -105,24 +107,23 @@ describe('InlineInput', () => {
         </ChangeMutationProvider>,
         { wrapper: Wrapper },
       );
+      await waitFor(() => screen.findByRole('img', { hidden: true }));
 
       //E
       /// First focus the edit button
       await userEvent.tab();
       /// Then press enter to edit the input
-      await userEvent.keyboard('{enter}');
+      await act(() => userEvent.keyboard('{enter}'));
       /// Then type a new value
-      await userEvent.type(document.activeElement, 'new value');
+      await act(() => userEvent.type(document.activeElement, 'new value'));
       /// Then press enter to confirm the new value
-      await userEvent.keyboard('{enter}');
+      await act(() => userEvent.keyboard('{enter}'));
       /// Expect the confirmation modal to be opened
-      await waitFor(() =>
-        expect(selectors.confirmationModal()).toBeInTheDocument(),
-      );
+      expect(selectors.confirmationModal()).toBeInTheDocument()
       /// Click the confirm button
-      await userEvent.click(screen.getByRole('button', { name: /confirm/i }));
-      /// Wait for modal to be closed
-      await waitForElementToBeRemoved(() => selectors.confirmationModal());
+      await act(() => userEvent.click(screen.getByRole('button', { name: /confirm/i })));
+      /// modal should be closed
+      expect(screen.queryByRole('dialog', { name: /Confirm/i })).not.toBeInTheDocument();
 
       //V
       expect(mock).toHaveBeenCalledWith('testnew value');
@@ -147,16 +148,17 @@ describe('InlineInput', () => {
         </ChangeMutationProvider>,
         { wrapper: Wrapper },
       );
+      await waitFor(() => screen.findByRole('img', { hidden: true }));
 
       //E
       /// First focus the edit button
       await userEvent.tab();
       /// Then press enter to edit the input
-      await userEvent.keyboard('{enter}');
+      await act(() => userEvent.keyboard('{enter}'));
       /// Then type a new value
-      await userEvent.type(document.activeElement, 'new value');
+      await act(() => userEvent.type(document.activeElement, 'new value'));
       /// Then press escape to cancel the new value
-      await userEvent.keyboard('{esc}');
+      await act(() => userEvent.keyboard('{esc}'));
 
       //V
       expect(mock).not.toHaveBeenCalled();
@@ -181,16 +183,17 @@ describe('InlineInput', () => {
         </ChangeMutationProvider>,
         { wrapper: Wrapper },
       );
+      await waitFor(() => screen.findByRole('img', { hidden: true }));
 
       //E
       /// First focus the edit button
       await userEvent.tab();
       /// Then press enter to edit the input
-      await userEvent.keyboard('{enter}');
+      await act(() => userEvent.keyboard('{enter}'));
       /// Then type a new value
-      await userEvent.type(document.activeElement, 'new value');
+      await act(() => userEvent.type(document.activeElement, 'new value'));
       /// Then press enter to confirm the new value
-      await userEvent.keyboard('{enter}');
+      await act(() => userEvent.keyboard('{enter}'));
       /// Expect the confirmation modal to be opened
       await waitFor(() =>
         expect(selectors.confirmationModal()).toBeInTheDocument(),

package/src/lib/components/inputlist/InputList.test.tsx

@@ -1,24 +1,21 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
 import { InputList, InputListProps } from './InputList.component';
 import { FormSection } from '../form/Form.component';
-import { QueryClient, QueryClientProvider } from 'react-query';
 
 describe('InputList', () => {
   const onChangeMock = jest.fn();
 
   const renderInputList = (props: InputListProps<string[]>) => {
     render(
-      <QueryClientProvider client={new QueryClient()}>
-        <FormSection>
-          <InputList
-            placeholder="Input list Test"
-            onChange={onChangeMock}
-            value={props.value}
-            name="inputListTest"
-          />
-        </FormSection>
-      </QueryClientProvider>,
+      <FormSection>
+        <InputList
+          placeholder="Input list Test"
+          onChange={onChangeMock}
+          value={props.value}
+          name="inputListTest"
+        />
+      </FormSection>
     );
   };
 
@@ -26,20 +23,22 @@ describe('InputList', () => {
     onChangeMock.mockClear();
   });
 
-  it('should render an empty input list', () => {
+  it('should render an empty input list', async () => {
     renderInputList({
       value: [''],
     });
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
 
     expect(screen.getByLabelText('inputListTest0')).toHaveValue('');
   });
 
-  it('should render an input list with initial values', () => {
+  it('should render an input list with initial values', async () => {
     const initialValues = ['Value 1', 'Value 2', 'Value 3'];
 
     renderInputList({
       value: initialValues,
     });
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
 
     const inputElements = screen.getAllByRole('textbox');
 
@@ -50,44 +49,47 @@ describe('InputList', () => {
     });
   });
 
-  it('should add a new input when clicking the add button', () => {
+  it('should add a new input when clicking the add button', async () => {
     const initialValues = ['Value 1', 'Value 2'];
 
     renderInputList({
       value: initialValues,
     });
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
 
     const addButton = screen.getByLabelText('Add1');
 
-    fireEvent.click(addButton);
+    await act(() => fireEvent.click(addButton));
 
     expect(onChangeMock).toHaveBeenCalledWith({
       target: { value: [...initialValues, ''] },
     });
   });
 
-  it('should delete an input when clicking the delete button', () => {
+  it('should delete an input when clicking the delete button', async () => {
     const initialValues = ['Value 1', 'Value 2', 'Value 3'];
 
     renderInputList({
       value: initialValues,
     });
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
 
     const deleteButton = screen.getByLabelText('Remove1');
 
-    fireEvent.click(deleteButton);
+    await act(() => fireEvent.click(deleteButton));
 
     expect(onChangeMock).toHaveBeenCalledWith({
       target: { value: ['Value 1', 'Value 3'] },
     });
   });
 
-  it('should update the value of an input', () => {
+  it('should update the value of an input', async () => {
     const initialValues = ['Value 1', 'Value 2', 'Value 3'];
 
     renderInputList({
       value: initialValues,
     });
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
 
     const inputElements = screen.getAllByRole('textbox');