@scality/core-ui 0.161.0 → 0.163.0

package/src/lib/components/searchinput/SearchInput.test.tsx

@@ -1,16 +1,11 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { SearchInput, Props } from './SearchInput.component';
-import { QueryClient, QueryClientProvider } from 'react-query';
 import userEvent from '@testing-library/user-event';
 
-const queryClient = new QueryClient();
-
 const SearchInputRender = (props: Props) => {
   return (
-    <QueryClientProvider client={queryClient}>
-      <SearchInput {...props} />
-    </QueryClientProvider>
+    <SearchInput {...props} />
   );
 };
 
@@ -19,8 +14,9 @@ describe('SearchInput', () => {
     searchInput: () => screen.getByRole('searchbox'),
     clearButton: () => screen.queryByRole('button'),
   };
-  it('should render the SearchInput component', () => {
+  it('should render the SearchInput component', async () => {
     render(<SearchInputRender value="" onChange={() => {}} />);
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
 
     const searchInput = selectors.searchInput();
     expect(searchInput).toBeInTheDocument();

package/src/lib/components/selectv2/Selectv2.component.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   createContext,
   useContext,
   useState,
@@ -8,6 +8,10 @@ import React, {
   ForwardRefExoticComponent,
   RefAttributes,
   useImperativeHandle,
+  ReactNode,
+  Ref,
+  useMemo,
+  useCallback,
 } from 'react';
 import { ScrollbarWrapper, Tooltip } from '../../index';
 import {
@@ -31,10 +35,10 @@ const NOPT_SEARCH = 8;
 export type OptionProps = {
   title?: string;
   disabled?: boolean;
-  icon?: React.ReactNode;
-  children?: React.ReactNode;
+  icon?: ReactNode;
+  children?: ReactNode;
   value: string;
-  disabledReason?: React.ReactNode;
+  disabledReason?: ReactNode;
 };
 const usePreviousValue = (value) => {
   const ref = useRef(null);
@@ -335,7 +339,7 @@ export type SelectProps = {
   id: string;
   placeholder?: string;
   disabled?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
   value?: string;
   onFocus?: (event: FocusEvent) => void;
   onBlur?: (event: FocusEvent) => void;
@@ -349,11 +353,11 @@ export type SelectProps = {
 
 type SelectOptionProps = {
   value: string;
-  label: React.ReactNode;
+  label: ReactNode;
   isDisabled: boolean;
-  icon?: React.ReactNode;
+  icon?: ReactNode;
   optionProps: any;
-  disabledReason?: React.ReactNode;
+  disabledReason?: ReactNode;
 };
 
 type SelectComponentType<
@@ -388,7 +392,7 @@ function SelectBox<
   selectRef,
   ...rest
 }: SelectProps & {
-  selectRef?: React.Ref<SelectRef<OptionType, IsMulti, GroupType>>;
+  selectRef?: Ref<SelectRef<OptionType, IsMulti, GroupType>>;
 }) {
   const [keyboardFocusEnabled, setKeyboardFocusEnabled] = useState(false);
   const [searchSelection, setSearchSelection] = useState('');
@@ -560,22 +564,28 @@ const SelectWithOptionContext = forwardRef<
 >((props, ref) => {
   const [options, setOptions] = useState<Record<string, SelectOptionProps>>({});
 
-  const register = (option: SelectOptionProps) => {
+  const register = useCallback((option: SelectOptionProps) => {
     setOptions((prevOptions) => ({
       ...prevOptions,
       [option.value]: option,
     }));
-  };
+  }, []);
 
-  const unregister = (value: string) => {
+  const unregister = useCallback((value: string) => {
     setOptions((prevOptions) => {
       const { [value]: _, ...rest } = prevOptions;
       return rest;
     });
-  };
+  }, []);
+
+  const contextValue = useMemo(() => ({
+    options, 
+    register, 
+    unregister
+  }), [options, register, unregister]);
 
   return (
-    <OptionContext.Provider value={{ options, register, unregister }}>
+    <OptionContext.Provider value={contextValue}>
       <>
         <SelectBox {...props} selectRef={ref} />
         {props.children}

package/src/lib/components/selectv2/selectv2.test.tsx

@@ -1,15 +1,10 @@
-import { screen, render as testingRender } from '@testing-library/react';
+import { act, screen, render as testingRender, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React, { useState, useRef } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
 import { Option, Select, SelectRef } from '../selectv2/Selectv2.component';
 
 const render = (args) => {
-  return testingRender(
-    <QueryClientProvider client={new QueryClient()}>
-      {args}
-    </QueryClientProvider>,
-  );
+  return testingRender(args);
 };
 
 const generateOptionsData = (n: number) =>
@@ -74,27 +69,29 @@ describe('SelectV2', () => {
     expect(() => render(<Option value="Option 1" />)).toThrowError();
   });
 
-  it('should open/close on click', () => {
+  it('should open/close on click', async () => {
     render(<SelectWrapper />);
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
     const select = selectors.select();
     expect(select).toBeInTheDocument();
     let options = selectors.options();
     expect(options).toHaveLength(0);
 
     // should open on click
-    userEvent.click(select);
+    await act(() => userEvent.click(select));
     simpleOptions.forEach((opt) => {
       const option = selectors.option(opt.props.label);
       expect(option).toBeInTheDocument();
     });
 
-    userEvent.click(select);
+    await act(() => userEvent.click(select));
     options = selectors.options();
     expect(options).toHaveLength(0);
   });
 
-  it('should open/close with keyboard', () => {
+  it('should open/close with keyboard', async () => {
     render(<SelectWrapper />);
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
     const select = selectors.select();
     expect(select).toBeInTheDocument();
     const options = selectors.options();
@@ -102,7 +99,7 @@ describe('SelectV2', () => {
 
     // should open on Enter
     userEvent.tab();
-    userEvent.keyboard('{Enter}');
+    await act(() => userEvent.keyboard('{Enter}'));
     simpleOptions.forEach((opt) => {
       const option = selectors.option(opt.props.label);
       expect(option).toBeInTheDocument();
@@ -121,13 +118,14 @@ describe('SelectV2', () => {
     });
   });
 
-  it('should display custom placeholder', () => {
+  it('should display custom placeholder', async () => {
     const placeholder = 'My placeholder...';
     render(<SelectWrapper placeholder={placeholder} />);
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
     expect(screen.getByText(placeholder)).toBeInTheDocument();
   });
 
-  it('should be disabled', () => {
+  it('should be disabled', async () => {
     render(
       <SelectWrapper value="1" disabled={true}>
         {simpleOptions}
@@ -139,27 +137,29 @@ describe('SelectV2', () => {
     // use input instead of select because select will still trigger the open/close action
     // despite select container not being clickable and input being disabled
     const input = selectors.input();
-    userEvent.click(input);
+    await act(() => userEvent.click(input));
     const options = selectors.options();
     expect(options).toHaveLength(0);
   });
 
-  it('should display no option', () => {
+  it('should display no option', async () => {
     render(
       <SelectWrapper>
         <></>
       </SelectWrapper>,
     );
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
     const select = selectors.select();
-    userEvent.click(select);
+    await act(() => userEvent.click(select));
     const noOptions = selectors.noOptions();
     expect(noOptions).toBeInTheDocument();
   });
 
-  it('should filter and highlight on search', () => {
+  it('should filter and highlight on search', async () => {
     render(<SelectWrapper>{optionsWithScrollSearchBar} </SelectWrapper>);
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
     const select = selectors.select(true);
-    userEvent.click(select);
+    await act(() => userEvent.click(select));
     const input = selectors.input();
 
     userEvent.type(input, '2');
@@ -169,25 +169,26 @@ describe('SelectV2', () => {
     expect(searchedText).toHaveTextContent('2');
   });
 
-  it('should unfocus the search input when the select is closed', () => {
+  it('should unfocus the search input when the select is closed', async () => {
     render(<SelectWrapper>{optionsWithScrollSearchBar} </SelectWrapper>);
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
     const select = selectors.select(true);
-    userEvent.click(select);
+    await act(() => userEvent.click(select));
     let input = selectors.input();
     expect(input).toHaveFocus();
     const option = selectors.option(/Item 1/);
-    userEvent.click(option);
+    await act(() => userEvent.click(option));
     input = selectors.input();
     expect(input).not.toHaveFocus();
   });
 
-  it('should be possible to use searchbar when option is selected', () => {
+  it('should be possible to use searchbar when option is selected', async () => {
     render(
       <SelectWrapper value="1">{optionsWithScrollSearchBar}</SelectWrapper>,
     );
     expect(screen.getByText(/Item 1/)).toBeVisible();
     const select = selectors.select(true);
-    userEvent.click(select);
+    await act(() => userEvent.click(select));
     const input = selectors.input();
     userEvent.type(input, '2');
     expect(screen.queryByText(/Item 1/)).not.toBeInTheDocument();
@@ -195,47 +196,48 @@ describe('SelectV2', () => {
     expect(options).toHaveLength(1);
   });
 
-  it('should select/unselect option with keyboard', () => {
+  it('should select/unselect option with keyboard', async () => {
     render(<SelectWrapper />);
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
     const select = selectors.select();
     userEvent.tab();
-    userEvent.keyboard('{ArrowDown}');
+    act(() => userEvent.keyboard('{ArrowDown}'));
 
     // should select first option
-    userEvent.keyboard('{Enter}');
+    await act(() => userEvent.keyboard('{Enter}'));
     expect(select).toHaveTextContent('Item 0');
 
     // should select second option
     userEvent.tab();
-    userEvent.keyboard('{ArrowDown}');
-    userEvent.keyboard('{ArrowDown}');
+    await act(() => userEvent.keyboard('{ArrowDown}'));
+    await act(() => userEvent.keyboard('{ArrowDown}'));
 
-    userEvent.keyboard('{Enter}');
+    await act(() => userEvent.keyboard('{Enter}'));
     expect(select).toHaveTextContent('Item 1');
   });
 
-  it('should scroll to selected value when opening select', () => {
+  it('should scroll to selected value when opening select', async () => {
     render(
       <SelectWrapper value={optionsWithScrollSearchBar[9].props.value}>
         {optionsWithScrollSearchBar}
       </SelectWrapper>,
     );
     const select = selectors.select(true);
-    userEvent.click(select);
+    await act(() => userEvent.click(select));
     const option = selectors.option(/Item 9/);
     expect(screen.queryByRole('option', { name: /Item 1/i })).toBeNull();
     expect(option).toBeVisible();
   });
 
-  it('should be able to reset the value', () => {
+  it('should be able to reset the value', async () => {
     render(<SelectReset>{simpleOptions}</SelectReset>);
     const button = screen.getByText(/reset/);
-    userEvent.click(button);
+    await act(() => userEvent.click(button));
     const select = selectors.select();
     expect(select).toHaveTextContent('Select...');
   });
 
-  it('should not be possible to select an option if it is disabled', () => {
+  it('should not be possible to select an option if it is disabled', async () => {
     render(
       <SelectWrapper>
         <Option value="1" disabled>
@@ -245,15 +247,15 @@ describe('SelectV2', () => {
       </SelectWrapper>,
     );
     const select = selectors.select();
-    userEvent.click(select);
+    await act(() => userEvent.click(select));
     const option = selectors.option(/Item 1/);
 
-    userEvent.click(option);
+    await act(() => userEvent.click(option));
     const option2 = selectors.option(/Item 2/);
     expect(option2).toBeVisible();
   });
 
-  it('should display a tooltip if the option is disabled with a reason', () => {
+  it('should display a tooltip if the option is disabled with a reason', async () => {
     render(
       <SelectWrapper>
         <Option value="1" disabled disabledReason="This option is disabled">
@@ -262,10 +264,10 @@ describe('SelectV2', () => {
       </SelectWrapper>,
     );
     const select = selectors.select();
-    userEvent.click(select);
+    await act(() => userEvent.click(select));
     const option = selectors.option(/Item 1/);
     expect(option).toHaveAttribute('aria-disabled', 'true');
-    userEvent.hover(option);
+    await act(() => userEvent.hover(option));
     const tooltip = screen.getByText(/This option is disabled/);
     expect(tooltip).toBeInTheDocument();
   });
@@ -309,9 +311,9 @@ describe('SelectV2', () => {
     // It's not our case here, so it makes thing difficult to select the right select
     // I workaround this by using setting the aria-label to the select container (cf: test below)
     const singleSelect = screen.getByRole('listbox');
-    await userEvent.click(singleSelect);
+    await act(() => userEvent.click(singleSelect));
 
-    await userEvent.click(screen.getByRole('option', { name: /account 1/i }));
+    await act(() => userEvent.click(screen.getByRole('option', { name: /account 1/i })));
   });
 
   it('should be testable if we have several select', async () => {
@@ -372,13 +374,13 @@ describe('SelectV2', () => {
 
     render(<MyWrapperWith2Select />);
 
-    await userEvent.click(screen.getByLabelText(/select account/i));
+    await act(() => userEvent.click(screen.getByLabelText(/select account/i)));
 
-    await userEvent.click(screen.getByRole('option', { name: /account 1/i }));
+    await act(() => userEvent.click(screen.getByRole('option', { name: /account 1/i })));
 
-    await userEvent.click(screen.getByLabelText(/select user/i));
+    await act(() => userEvent.click(screen.getByLabelText(/select user/i)));
 
-    await userEvent.click(screen.getByRole('option', { name: /user 1/i }));
+    await act(() => userEvent.click(screen.getByRole('option', { name: /user 1/i })));
   });
 
   it('should be testable even if we have several select with the same value, the placeholder should be different', async () => {
@@ -439,8 +441,8 @@ describe('SelectV2', () => {
 
     render(<MyWrapperWith2Select />);
 
-    await userEvent.click(screen.getByLabelText(/select account/i));
-    await userEvent.click(screen.getByLabelText(/Select Second Account/i));
+    await act(() => userEvent.click(screen.getByLabelText(/select account/i)));
+    await act(() => userEvent.click(screen.getByLabelText(/Select Second Account/i)));
 
     /**
      * This is possible because only 1 select can be open at a time
@@ -450,7 +452,7 @@ describe('SelectV2', () => {
      * const selectContainer = select?.parentElement?.parentElement;
      * const option = within(selectContainer).getByRole('option', { name: /account 1/i });
      */
-    await userEvent.click(screen.getByRole('option', { name: /account 1/i }));
+    await act(() => userEvent.click(screen.getByRole('option', { name: /account 1/i })));
   });
 
   describe('Ref API', () => {
@@ -478,7 +480,7 @@ describe('SelectV2', () => {
       render(<RefTestComponent />);
       expect(selectors.input()).not.toHaveFocus();
 
-      userEvent.click(screen.getByRole('button', { name: /Focus/i }));
+      await act(() => userEvent.click(screen.getByRole('button', { name: /Focus/i })));
       expect(selectors.input()).toHaveFocus();
     });
 
@@ -511,14 +513,14 @@ describe('SelectV2', () => {
       render(<RefTestComponent />);
       expect(selectors.options()).toHaveLength(0);
 
-      userEvent.click(screen.getByRole('button', { name: /Open Menu/i }));
+      await act(() => userEvent.click(screen.getByRole('button', { name: /Open Menu/i })));
       expect(selectors.options().length).toBeGreaterThan(0);
       simpleOptions.forEach((opt) => {
         const option = selectors.option(opt.props.label);
         expect(option).toBeInTheDocument();
       });
 
-      userEvent.click(screen.getByRole('button', { name: /Close Menu/i }));
+      await act(() => userEvent.click(screen.getByRole('button', { name: /Close Menu/i })));
       expect(selectors.options()).toHaveLength(0);
     });
 
@@ -565,13 +567,16 @@ describe('SelectV2', () => {
 
       render(<RefTestComponent />);
 
-      const select = selectors.select();
+      let select;
+      await act(() => {
+        select = selectors.select();
+      });
       expect(select).toHaveTextContent('Select with ref');
 
-      userEvent.click(screen.getByRole('button', { name: /Set Value/i }));
+      await act(() => userEvent.click(screen.getByRole('button', { name: /Set Value/i })));
       expect(select).toHaveTextContent('Item 0');
 
-      userEvent.click(screen.getByRole('button', { name: /Clear/i }));
+      await act(() => userEvent.click(screen.getByRole('button', { name: /Clear/i })));
       expect(select).toHaveTextContent('Select with ref');
     });
 
@@ -599,10 +604,10 @@ describe('SelectV2', () => {
 
       render(<RefTestComponent />);
 
-      userEvent.click(screen.getByRole('button', { name: /Focus/i }));
+      await act(() => userEvent.click(screen.getByRole('button', { name: /Focus/i })));
       expect(selectors.input()).toHaveFocus();
 
-      userEvent.click(screen.getByRole('button', { name: /Blur/i }));
+      await act(() => userEvent.click(screen.getByRole('button', { name: /Blur/i })));
       expect(selectors.input()).not.toHaveFocus();
     });
   });

package/src/lib/components/sidebar/Sidebar.component.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import {

package/src/lib/components/statuswrapper/Statuswrapper.component.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styled, { css } from 'styled-components';
 
 import {

package/src/lib/components/steppers/Stepper.component.tsx

@@ -1,5 +1,5 @@
 /// <reference path="./Stepper.component.d.ts" />
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useState, useCallback, useMemo } from 'react';
 import { Steppers } from './Steppers.component';
 import { Box } from '../box/Box';
 export interface StepperContextType {
@@ -33,19 +33,21 @@ export const Stepper: Stepper = ({ steps }) => {
     props: Record<string, unknown>;
   }>({ step: 0, props: {} });
 
-  const next = (props: Record<string, unknown>) => {
-    setStepProps({ step: stepProps.step + 1, props });
-  };
+  const next = useCallback((props: Record<string, unknown>) => {
+    setStepProps(current => ({ step: current.step + 1, props }));
+  }, []);
 
-  const prev = (props: Record<string, unknown>) => {
-    setStepProps({ step: stepProps.step - 1, props });
-  };
+  const prev = useCallback((props: Record<string, unknown>) => {
+    setStepProps(current => ({ step: current.step - 1, props }));
+  }, []);
 
   const { Component } = steps[stepProps.step];
   const StepperContext = window.StepperContext;
 
+  const stepperValue = useMemo(() => ({ next, prev }), [next, prev]);
+
   return (
-    <StepperContext.Provider value={{ next, prev }}>
+    <StepperContext.Provider value={stepperValue}>
       <Box display="flex" gap={32} flex={1} height="100%">
         <Steppers
           activeStep={stepProps.step}

package/src/lib/components/tablev2/Search.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import styled from 'styled-components';
+import { useEffect } from 'react';
 import { useTableContext } from './Tablev2.component';
 import { SearchInput } from '../searchinput/SearchInput.component';
 import { Props } from '../searchinput/SearchInput.component';
@@ -74,7 +74,7 @@ export function TableSearch(props: SearchProps) {
     entityName = { en: { singular: 'result', plural: 'results' } },
   } = useTableContext();
   const totalDispayedRows = totalCount ? totalCount : rows.length;
-  React.useEffect(() => {
+  useEffect(() => {
     setGlobalFilter(value);
   }, [value, setGlobalFilter, preGlobalFilteredRows]);
   return (

package/src/lib/components/tablev2/SingleSelectableContent.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useEffect } from 'react';
+import { memo, useEffect } from 'react';
 import { areEqual } from 'react-window';
 import { Row } from 'react-table';
 import { useTableContext } from './Tablev2.component';
@@ -32,7 +32,7 @@ export type SingleSelectableContentProps<
   customItemKey?: (index: number, data: DATA_ROW) => string;
   hasScrollbar?: boolean;
   isLoadingMoreItems?: boolean;
-  children?: (rows: React.JSX.Element) => React.JSX.Element;
+  children?: (rows: JSX.Element) => JSX.Element;
 };
 
 export function SingleSelectableContent<

package/src/lib/components/tablev2/TableCommon.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType, LegacyRef, useCallback, useState } from 'react';
+import { ComponentType, LegacyRef, useCallback, useState } from 'react';
 import { Row } from 'react-table';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import {

package/src/lib/components/tablev2/TableSync.test.tsx

@@ -0,0 +1,28 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { TableSync } from './TableSync';
+
+describe('TableSync', () => {
+  it('should render correctly', async () => {
+    const onSync = jest.fn();
+    render(
+      <TableSync onSync={onSync} />
+    );
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('should call onSync when clicked', async () => {
+    const onSync = jest.fn();
+    render(
+      <TableSync onSync={onSync} />
+    );
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
+
+    const button = screen.getByRole('button');
+    await act(() => fireEvent.click(button));
+    expect(onSync).toHaveBeenCalledTimes(1);
+  });
+});

package/src/lib/components/tablev2/TableSync.tsx

@@ -0,0 +1,36 @@
+import { ButtonHTMLAttributes } from 'react';
+import styled from 'styled-components';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon } from '../icon/Icon.component';
+
+export type TableSyncProps = {
+  onSync: () => void;
+  tooltipOverlay?: string;
+  loading?: boolean;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
+
+const TableSyncContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export function TableSync({
+  onSync,
+  tooltipOverlay,
+  loading = false,
+  ...rest
+}: TableSyncProps) {
+  return (
+    <TableSyncContainer>
+      <Button
+        icon={<Icon name="Sync" />}
+        tooltip={tooltipOverlay ? { overlay: tooltipOverlay } : undefined}
+        onClick={onSync}
+        aria-label="Synchronize table data"
+        role="button"
+        isLoading={loading}
+        {...rest}
+      />
+    </TableSyncContainer>
+  );
+}