@scality/core-ui 0.121.0 → 0.123.0

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

@@ -1,11 +1,16 @@
-import { Select, Option } from '../selectv2/Selectv2.component';
-import React, { useState } from 'react';
-import { render as testingRender } from '@testing-library/react';
+import {
+  screen,
+  render as testingRender,
+  within,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Icon } from '../icon/Icon.component';
+import React, { useState } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { debug } from 'jest-preview';
+import { Icon } from '../icon/Icon.component';
+import { Option, Select } from '../selectv2/Selectv2.component';
 
-const render = (...args) => {
+const render = (args) => {
   return testingRender(
     <QueryClientProvider client={new QueryClient()}>
       {args}
@@ -274,4 +279,187 @@ describe('SelectV2', () => {
     );
     expect(onChange).toBeCalledTimes(0);
   });
+
+  it('should select with the right selector', async () => {
+    const accounts = [
+      {
+        name: 'Account 1',
+      },
+      {
+        name: 'Account 2',
+      },
+    ];
+
+    const MyWrapper = () => {
+      const [value, setValue] = useState('');
+      return (
+        <Select
+          id="select-account"
+          value={value}
+          onChange={(accountName) => {
+            setValue(accountName);
+          }}
+          size="1/2"
+          placeholder="Select Account"
+        >
+          {accounts.map((account) => (
+            <Select.Option key={`${account.name}`} value={account.name}>
+              {account.name}
+            </Select.Option>
+          ))}
+        </Select>
+      );
+    };
+
+    render(<MyWrapper />);
+
+    // If you only have one select, you can use the role, otherwise, you should use the label
+    // screen.getByLabelText(/select account/i)
+    // In a normal select, we should have a label span attach to it.
+    // 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 userEvent.click(screen.getByRole('option', { name: /account 1/i }));
+  });
+
+  it('should be testable if we have several select', async () => {
+    const MyWrapperWith2Select = () => {
+      const [value, setValue] = useState('');
+      const [value2, setValue2] = useState('');
+      const accounts = [
+        {
+          name: 'Account 1',
+        },
+        {
+          name: 'Account 2',
+        },
+      ];
+      const users = [
+        {
+          name: 'User 1',
+        },
+        {
+          name: 'User 2',
+        },
+      ];
+      return (
+        <div>
+          <Select
+            id="select-account"
+            value={value}
+            onChange={(accountName) => {
+              setValue(accountName);
+            }}
+            size="1/2"
+            placeholder="Select Account"
+          >
+            {accounts.map((account) => (
+              <Select.Option key={`${account.name}`} value={account.name}>
+                {account.name}
+              </Select.Option>
+            ))}
+          </Select>
+          <Select
+            id="select-user"
+            value={value2}
+            onChange={(accountName) => {
+              setValue2(accountName);
+            }}
+            size="1/2"
+            placeholder="Select User"
+          >
+            {users.map((user) => (
+              <Select.Option key={`${user.name}`} value={user.name}>
+                {user.name}
+              </Select.Option>
+            ))}
+          </Select>
+        </div>
+      );
+    };
+
+    render(<MyWrapperWith2Select />);
+
+    await userEvent.click(screen.getByLabelText(/select account/i));
+
+    await userEvent.click(screen.getByRole('option', { name: /account 1/i }));
+
+    await userEvent.click(screen.getByLabelText(/select user/i));
+
+    await 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 () => {
+    const MyWrapperWith2Select = () => {
+      const [value, setValue] = useState('');
+      const [value2, setValue2] = useState('');
+      const accounts = [
+        {
+          name: 'Account 1',
+        },
+        {
+          name: 'Account 2',
+        },
+      ];
+      const accounts2 = [
+        {
+          name: 'Account 1',
+        },
+        {
+          name: 'Account 2',
+        },
+      ];
+      return (
+        <div style={{ display: 'flex' }}>
+          <Select
+            id="select-account"
+            value={value}
+            onChange={(accountName) => {
+              setValue(accountName);
+            }}
+            size="1/2"
+            placeholder="Select Account"
+          >
+            {accounts.map((account) => (
+              <Select.Option key={`${account.name}`} value={account.name}>
+                {account.name}
+              </Select.Option>
+            ))}
+          </Select>
+          <Select
+            id="select-account2"
+            value={value2}
+            onChange={(accountName) => {
+              setValue2(accountName);
+            }}
+            size="1"
+            placeholder="Select Second Account"
+          >
+            {accounts2.map((user) => (
+              <Select.Option key={`${user.name}`} value={user.name}>
+                {user.name}
+              </Select.Option>
+            ))}
+          </Select>
+        </div>
+      );
+    };
+
+    render(<MyWrapperWith2Select />);
+
+    await userEvent.click(screen.getByLabelText(/select account/i));
+    await userEvent.click(screen.getByLabelText(/Select Second Account/i));
+
+    /**
+     * This is possible because only 1 select can be open at a time
+     * If for some reason, you have multiple select open at the same time, you can select the select by its label
+     * and check the option from it parent like this :
+     * const select = screen.getByLabelText(/select account/i);
+     * 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 }));
+  });
 });

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import {
@@ -30,6 +30,7 @@ export type WrapperProps = {
   hovered?: boolean;
 };
 const Wrapper = styled.div<WrapperProps>`
+  margin-top: 1px;
   flex-shrink: 0;
   ${(props) => {
     const { backgroundLevel1, textPrimary } = props.theme;
@@ -41,7 +42,6 @@ const Wrapper = styled.div<WrapperProps>`
       }
     `;
   }}
-  margin-top: 1px;
   border-right: 1px solid ${(props) => props.theme.backgroundLevel3};
   ${(props) => {
     if (props.expanded) {
@@ -66,6 +66,7 @@ const Wrapper = styled.div<WrapperProps>`
           height: 100%;
           background-color: ${backgroundLevel1};
           z-index: ${zIndex.sidebar};
+          border-right: 1px solid ${(props) => props.theme.backgroundLevel3};
         }
       `;
     }

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

@@ -39,6 +39,7 @@ const Circle = styled.div<{
   display: flex;
   justify-content: center;
   align-items: center;
+  line-height: 30px;
   width: 30px;
   height: 30px;
   border-radius: 50%;
@@ -74,14 +75,15 @@ const Circle = styled.div<{
   }};
 `;
 const StepHeader = styled.span<{ active?: boolean }>`
-  padding: 8px;
+  margin-left: ${spacing.r8};
+  line-height: 30px;
   color: ${(props) =>
     props.active
       ? getThemePropSelector('textPrimary')
       : getThemePropSelector('textSecondary')};
 `;
 const StepContent = styled.div`
-  padding: ${spacing.r8};
+  padding: ${spacing.r8} 0 ${spacing.r8} ${spacing.r8};
 `;
 const BottomBar = styled.hr<{ completed?: boolean }>`
   flex-grow: 1;
@@ -128,7 +130,15 @@ function Step(props: StepProps) {
         {!isLast && <BottomBar completed={completed} />}
       </Panel>
       <Panel>
-        <StepHeader active={active}>{title}</StepHeader>
+        <div
+          style={{
+            height: '30px',
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <StepHeader active={active}>{title}</StepHeader>
+        </div>
         {active && <StepContent>{content}</StepContent>}
       </Panel>
     </StepContainer>

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

@@ -4,7 +4,6 @@ import { areEqual } from 'react-window';
 import { useTableContext } from './Tablev2.component';
 import {
   HeadRow,
-  NoResult,
   SortCaret,
   TableBody,
   TableHeader,
@@ -15,26 +14,12 @@ import {
   TableLocalType,
   TableVariantType,
 } from './TableUtils';
-import { useTableScrollbar, VirtualizedRows } from './TableCommon';
+import { RenderRowType, TableRows, useTableScrollbar } from './TableCommon';
 import useSyncedScroll from './useSyncedScroll';
 import { Box } from '../box/Box';
 import { Loader } from '../loader/Loader.component';
 import { spacing } from '../../spacing';
 
-const translations = {
-  en: {
-    noResult: 'No results found',
-  },
-  fr: {
-    noResult: `Aucun résultat`,
-  },
-};
-
-type RenderRowType = {
-  index: number;
-  style: CSSProperties;
-};
-
 type MultiSelectableContentProps<
   DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
 > = {
@@ -43,7 +28,7 @@ type MultiSelectableContentProps<
   onToggleAll?: (selected: boolean) => void;
   rowHeight?: TableHeightKeyType;
   separationLineVariant?: TableVariantType;
-  backgroundVariant?: TableVariantType;
+
   locale?: TableLocalType;
   customItemKey?: (index: number, data: DATA_ROW) => string;
   hasScrollbar?: boolean;
@@ -59,7 +44,6 @@ type MultiSelectableContentProps<
 //   onMultiSelectionChanged: (rows: Row<ENTRY>[]) => void;
 //   rowHeight?: TableHeightKeyType;
 //   separationLineVariant?: TableVariantType;
-//   backgroundVariant?: TableVariantType;
 //   customItemKey?: (index: Number, data: ENTRY) => string;
 // } & ({
 //   locale: TableLocalType;
@@ -75,7 +59,7 @@ export const MultiSelectableContent = <
   onToggleAll,
   rowHeight = 'h40',
   separationLineVariant = 'backgroundLevel3',
-  backgroundVariant = 'backgroundLevel1',
+
   locale = 'en',
   customItemKey,
   isLoadingMoreItems,
@@ -88,8 +72,6 @@ export const MultiSelectableContent = <
     setRowHeight,
     setHiddenColumns,
     selectedRowIds,
-    onBottom,
-    onBottomOffset,
     isAllRowsSelected,
     toggleAllRowsSelected,
   } = useTableContext<DATA_ROW>();
@@ -132,21 +114,10 @@ export const MultiSelectableContent = <
     currentRow.toggleRowSelected(!currentRow.isSelected);
   };
 
-  const {
-    hasScrollbar,
-    setHasScrollbar,
-    scrollBarWidth,
-    handleScrollbarWidth,
-  } = useTableScrollbar();
+  const { hasScrollbar, scrollBarWidth, handleScrollbarWidth } =
+    useTableScrollbar();
 
-  const itemKey = (index, data) => {
-    if (typeof customItemKey === 'function') {
-      return customItemKey(index, data);
-    }
-    return index;
-  };
-
-  const { bodyRef, headerRef } = useSyncedScroll<DATA_ROW>();
+  const { headerRef } = useSyncedScroll<DATA_ROW>();
 
   const RenderRow = memo(({ index, style }: RenderRowType) => {
     const row = rows[index];
@@ -175,7 +146,6 @@ export const MultiSelectableContent = <
         {...rowProps}
         isSelected={row.isSelected}
         separationLineVariant={separationLineVariant}
-        backgroundVariant={backgroundVariant}
         className="tr"
       >
         {row.cells.map((cell) => {
@@ -232,6 +202,7 @@ export const MultiSelectableContent = <
             hasScrollBar={hasScrollbar}
             scrollBarWidth={scrollBarWidth}
             rowHeight={rowHeight}
+            separationLineVariant={separationLineVariant}
             ref={headerRef}
           >
             {headerGroup.headers.map((column) => {
@@ -291,33 +262,12 @@ export const MultiSelectableContent = <
       </div>
 
       <TableBody role="rowgroup" className="tbody" ref={handleScrollbarWidth}>
-        {typeof children === 'function' ? (
-          children(
-            <VirtualizedRows
-              rows={rows}
-              listRef={bodyRef}
-              itemKey={itemKey}
-              rowHeight={rowHeight}
-              setHasScrollbar={setHasScrollbar}
-              onBottom={onBottom}
-              onBottomOffset={onBottomOffset}
-              RenderRow={RenderRow}
-            />,
-          )
-        ) : rows.length ? (
-          <VirtualizedRows
-            rows={rows}
-            listRef={bodyRef}
-            itemKey={itemKey}
-            rowHeight={rowHeight}
-            setHasScrollbar={setHasScrollbar}
-            onBottom={onBottom}
-            onBottomOffset={onBottomOffset}
-            RenderRow={RenderRow}
-          />
-        ) : (
-          <NoResult>{translations[locale].noResult}</NoResult>
-        )}
+        <TableRows
+          locale={locale}
+          children={children}
+          customItemKey={customItemKey}
+          RenderRow={RenderRow}
+        />
       </TableBody>
       {isLoadingMoreItems && (
         <Box

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

@@ -15,12 +15,6 @@ export type DisplayedName = {
 export type SearchProps = {
   onChange: (arg0: string) => void;
   value?: string;
-  /**
-   * @deprecated
-   * All the Table should display the Total Number of Entity.
-   */
-  displayTotalOf?: boolean;
-  displayedName: DisplayedName;
   locale?: TableLocalType;
   totalCount?: number;
 } & Omit<Props, 'disableToggle' | 'onChange'>;
@@ -72,37 +66,32 @@ export const TableItemCount = ({
 };
 
 export function TableSearch(props: SearchProps) {
+  const { onChange, value = '', locale = 'en', totalCount, ...rest } = props;
   const {
-    onChange,
-    value = '',
-    displayTotalOf = true,
-    displayedName,
-    locale = 'en',
-    totalCount,
-    ...rest
-  } = props;
-  const { setGlobalFilter, rows, preGlobalFilteredRows } = useTableContext();
+    setGlobalFilter,
+    rows,
+    preGlobalFilteredRows,
+    entityName = { en: { singular: 'result', plural: 'results' } },
+  } = useTableContext();
   const totalDispayedRows = totalCount ? totalCount : rows.length;
   React.useEffect(() => {
     setGlobalFilter(value);
   }, [value, setGlobalFilter, preGlobalFilteredRows]);
   return (
     <SearchContainer>
-      {displayTotalOf && (
-        <TableItemCount
-          entity={displayedName}
-          count={totalDispayedRows}
-          locale={locale}
-        ></TableItemCount>
-      )}
+      <TableItemCount
+        entity={entityName[locale] || entityName.en}
+        count={totalDispayedRows}
+        locale={locale}
+      ></TableItemCount>
+
       <SearchInput
         value={value}
         placeholder={translations[locale].search}
         disableToggle
-        size="2/3"
+        size="1"
         onChange={(evt) => {
           if (typeof onChange === 'function') {
-            // @ts-ignore
             onChange(evt.target.value);
           }
         }}

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

@@ -1,4 +1,4 @@
-import { memo, CSSProperties, useEffect } from 'react';
+import React, { memo, useEffect } from 'react';
 import { areEqual } from 'react-window';
 import { Row } from 'react-table';
 import { useTableContext } from './Tablev2.component';
@@ -7,7 +7,6 @@ import {
   TableRow,
   TableBody,
   TableHeader,
-  NoResult,
   SortCaret,
 } from './Tablestyle';
 import {
@@ -15,7 +14,7 @@ import {
   TableLocalType,
   TableVariantType,
 } from './TableUtils';
-import { useTableScrollbar, VirtualizedRows } from './TableCommon';
+import { RenderRowType, TableRows, useTableScrollbar } from './TableCommon';
 import useSyncedScroll from './useSyncedScroll';
 import { Loader } from '../loader/Loader.component';
 import { Box } from '../box/Box';
@@ -26,28 +25,14 @@ export type SingleSelectableContentProps<
 > = {
   rowHeight: TableHeightKeyType;
   separationLineVariant: TableVariantType;
-  backgroundVariant: TableVariantType;
+
   onRowSelected?: (row: Row<DATA_ROW>) => void;
   selectedId?: string;
   locale?: TableLocalType;
-  customItemKey?: (index: Number, data: DATA_ROW) => string;
+  customItemKey?: (index: number, data: DATA_ROW) => string;
   hasScrollbar?: boolean;
   isLoadingMoreItems?: boolean;
-  children?: (rows: JSX.Element) => JSX.Element;
-};
-
-const translations = {
-  en: {
-    noResult: 'No results found',
-  },
-  fr: {
-    noResult: `Aucun résultat`,
-  },
-};
-
-type RenderRowType = {
-  index: number;
-  style: CSSProperties;
+  children?: (rows: React.JSX.Element) => React.JSX.Element;
 };
 
 export function SingleSelectableContent<
@@ -55,7 +40,7 @@ export function SingleSelectableContent<
 >({
   rowHeight = 'h40',
   separationLineVariant = 'backgroundLevel3',
-  backgroundVariant = 'backgroundLevel1',
+
   locale = 'en',
   selectedId,
   isLoadingMoreItems,
@@ -67,15 +52,9 @@ export function SingleSelectableContent<
     console.error('Please specify the onRowSelected function.');
   }
 
-  const { bodyRef, headerRef } = useSyncedScroll<DATA_ROW>();
-  const {
-    headerGroups,
-    prepareRow,
-    rows,
-    onBottom,
-    onBottomOffset,
-    setRowHeight,
-  } = useTableContext<DATA_ROW>();
+  const { headerRef } = useSyncedScroll<DATA_ROW>();
+  const { headerGroups, prepareRow, rows, setRowHeight } =
+    useTableContext<DATA_ROW>();
 
   useEffect(() => {
     setRowHeight(rowHeight);
@@ -120,7 +99,6 @@ export function SingleSelectableContent<
         isSelected={selectedId === row.id}
         aria-selected={selectedId === row.id ? 'true' : 'false'}
         separationLineVariant={separationLineVariant}
-        backgroundVariant={backgroundVariant}
         selectedId={selectedId}
         className="tr"
       >
@@ -146,20 +124,9 @@ export function SingleSelectableContent<
     );
   }, areEqual);
 
-  const {
-    hasScrollbar,
-    setHasScrollbar,
-    scrollBarWidth,
-    handleScrollbarWidth,
-  } = useTableScrollbar();
-
-  function itemKey(index, data) {
-    if (typeof customItemKey === 'function') {
-      return customItemKey(index, data);
-    }
+  const { hasScrollbar, scrollBarWidth, handleScrollbarWidth } =
+    useTableScrollbar();
 
-    return index;
-  }
   return (
     <>
       <div className="thead" role="rowgroup">
@@ -167,6 +134,7 @@ export function SingleSelectableContent<
           <HeadRow
             {...headerGroup.getHeaderGroupProps()}
             ref={headerRef}
+            separationLineVariant={separationLineVariant}
             hasScrollBar={hasScrollbar}
             scrollBarWidth={scrollBarWidth}
             rowHeight={rowHeight}
@@ -207,33 +175,12 @@ export function SingleSelectableContent<
         ))}
       </div>
       <TableBody role="rowgroup" className="tbody" ref={handleScrollbarWidth}>
-        {typeof children === 'function' ? (
-          children(
-            <VirtualizedRows
-              rows={rows}
-              listRef={bodyRef}
-              itemKey={itemKey}
-              rowHeight={rowHeight}
-              setHasScrollbar={setHasScrollbar}
-              onBottom={onBottom}
-              onBottomOffset={onBottomOffset}
-              RenderRow={RenderRow}
-            />,
-          )
-        ) : rows.length ? (
-          <VirtualizedRows
-            rows={rows}
-            listRef={bodyRef}
-            itemKey={itemKey}
-            rowHeight={rowHeight}
-            setHasScrollbar={setHasScrollbar}
-            onBottom={onBottom}
-            onBottomOffset={onBottomOffset}
-            RenderRow={RenderRow}
-          />
-        ) : (
-          <NoResult>{translations[locale].noResult}</NoResult>
-        )}
+        <TableRows
+          locale={locale}
+          children={children}
+          customItemKey={customItemKey}
+          RenderRow={RenderRow}
+        />
       </TableBody>
       {isLoadingMoreItems && (
         <Box