@scality/core-ui 0.162.0 → 0.164.0

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/infomessage/InfoMessageUtils.test.tsx

@@ -1,6 +1,5 @@
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
-import React from 'react';
 import { coreUIAvailableThemes } from '../../style/theme';
 import { CoreUiThemeProvider } from '../coreuithemeprovider/CoreUiThemeProvider';
 import { useComputeBackgroundColor } from './InfoMessageUtils';

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

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import {
   QueryClient,
   QueryClientProvider,
@@ -7,10 +7,10 @@ import {
 } from 'react-query';
 import { ToastProvider } from '../toast/ToastProvider';
 import {
+  act,
   render,
   screen,
   waitFor,
-  waitForElementToBeRemoved,
   within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -68,17 +68,19 @@ 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}'));
+      await waitFor(() => screen.findByText('testnew value'));
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
 
       //V
       expect(mock).toHaveBeenCalledWith('testnew value');
@@ -105,24 +107,26 @@ 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}'));
+      await waitFor(() => screen.findByRole('dialog', { name: /Confirm/i }));
       /// 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 +151,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 +186,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(),
@@ -205,7 +211,7 @@ describe('InlineInput', () => {
       //V
       expect(mock).not.toHaveBeenCalled();
       expect(screen.getByRole('textbox')).toBeInTheDocument();
-      expect(screen.getByRole('textbox').value).toBe('testnew value');
+      expect((screen.getByRole('textbox') as HTMLInputElement).value).toBe('testnew value');
     });
   });
 });

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

@@ -1,24 +1,20 @@
-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[]>) => {
+  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 +22,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 +48,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');
 

package/src/lib/components/linetemporalchart/ChartUtil.test.ts

@@ -3,7 +3,8 @@ import {
   getUnitLabel,
   addMissingDataPoint,
 } from './ChartUtil';
-const series = [
+import { Serie } from './LineTemporalChart.component';
+const series: Serie[] = [
   {
     resource: 'node1',
     data: [
@@ -11,7 +12,7 @@ const series = [
       [1627460952, '18.73333333333335'],
     ],
     getTooltipLabel: (metricPrefix, resource) => {
-      return resource;
+      return `${resource}`;
     },
     isLineDashed: false,
   },
@@ -22,12 +23,12 @@ const series = [
       [1627460952, null],
     ],
     getTooltipLabel: (metricPrefix, resource) => {
-      return resource;
+      return `${resource}`;
     },
     isLineDashed: false,
   },
 ];
-const seriesSymmetrical = [
+const seriesSymmetrical: Serie[] = [
   {
     metricPrefix: 'read',
     resource: 'node1',