@scality/core-ui 0.122.0 → 0.124.0

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

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

@@ -1,4 +1,4 @@
-import { ComponentType, LegacyRef, useCallback, useState } from 'react';
+import React, { ComponentType, LegacyRef, useCallback, useState } from 'react';
 import { Row } from 'react-table';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import {
@@ -9,9 +9,18 @@ import {
 } from 'react-window';
 import {
   convertRemToPixels,
+  translatedMessages,
   TableHeightKeyType,
+  TableLocalType,
   tableRowHeight,
 } from './TableUtils';
+import { useTableContext } from './Tablev2.component';
+import { NoResult } from './Tablestyle';
+import { Loader } from '../loader/Loader.component';
+import { Text } from '../text/Text.component';
+import { Icon } from '../icon/Icon.component';
+import useSyncedScroll from './useSyncedScroll';
+import { CSSProperties } from 'styled-components';
 
 type VirtualizedRowsType<
   DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
@@ -100,3 +109,93 @@ export const useTableScrollbar = () => {
     handleScrollbarWidth,
   };
 };
+
+export type RenderRowType = {
+  index: number;
+  style: CSSProperties;
+};
+
+type TableRowsProps<
+  DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
+> = {
+  locale?: TableLocalType;
+  children?: (children: JSX.Element) => JSX.Element;
+  customItemKey?: (index: number, data: DATA_ROW) => string;
+  RenderRow: React.MemoExoticComponent<
+    ({ index, style }: RenderRowType) => JSX.Element
+  >;
+};
+export function TableRows<
+  DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
+>({ locale, children, customItemKey, RenderRow }: TableRowsProps<DATA_ROW>) {
+  const { setHasScrollbar } = useTableScrollbar();
+  const { rows, status, entityName, rowHeight, onBottom, onBottomOffset } =
+    useTableContext();
+  const { bodyRef } = useSyncedScroll();
+
+  function itemKey(index, data) {
+    if (typeof customItemKey === 'function') {
+      return customItemKey(index, data);
+    }
+
+    return index;
+  }
+
+  if (status === 'idle' || status === 'loading') {
+    return (
+      <NoResult rowHeight={rowHeight}>
+        <Loader />
+        <Text color="textSecondary">
+          {translatedMessages('loading', entityName, locale)}
+        </Text>
+      </NoResult>
+    );
+  }
+  if (status === 'error') {
+    return (
+      <NoResult rowHeight={rowHeight}>
+        <Icon name="Exclamation-circle" color="statusWarning" />
+        <Text color="textSecondary">
+          {translatedMessages('error', entityName, locale)}
+        </Text>
+      </NoResult>
+    );
+  }
+  if (status === 'success' || status === undefined) {
+    if (typeof children === 'function') {
+      return children(
+        <VirtualizedRows
+          rows={rows}
+          listRef={bodyRef}
+          itemKey={itemKey}
+          rowHeight={rowHeight}
+          setHasScrollbar={setHasScrollbar}
+          onBottom={onBottom}
+          onBottomOffset={onBottomOffset}
+          RenderRow={RenderRow}
+        />,
+      );
+    } else if (rows.length) {
+      return (
+        <VirtualizedRows
+          rows={rows}
+          listRef={bodyRef}
+          setHasScrollbar={setHasScrollbar}
+          onBottom={onBottom}
+          onBottomOffset={onBottomOffset}
+          itemKey={itemKey}
+          rowHeight={rowHeight}
+          RenderRow={RenderRow}
+        />
+      );
+    } else {
+      return (
+        <NoResult rowHeight={rowHeight}>
+          {translatedMessages('noResult', entityName, locale)}
+        </NoResult>
+      );
+    }
+  }
+
+  return null;
+}

package/src/lib/components/tablev2/TableUtils.ts

@@ -58,3 +58,40 @@ export const tableRowHeight = {
   h48: '3.428', //2 line
   h64: '4.572', //3 line
 };
+
+type TableMessagesType = 'error' | 'loading' | 'noResult';
+
+export const translatedMessages = (
+  type: TableMessagesType,
+  entityName?: {
+    en: { singular: string; plural: string };
+    fr?: { singular: string; plural: string };
+  },
+  locale?: TableLocalType,
+) => {
+  if (type === 'error') {
+    if (locale === 'fr') {
+      return `Erreur lors du chargement des ${
+        entityName?.fr?.plural || 'données'
+      }, veuillez rafraîchir la page.`;
+    }
+    return `An error occurred while loading ${
+      entityName ? `the ${entityName.en.plural}` : 'data'
+    }, please refresh the
+    page.`;
+  }
+  if (type === 'loading') {
+    if (locale === 'fr') {
+      return `Chargement des ${entityName?.fr?.plural || 'données'}...`;
+    }
+    return `Loading ${entityName?.en.plural || 'data'}...`;
+  }
+  if (type === 'noResult') {
+    if (locale === 'fr') {
+      return `Aucun ${entityName?.fr?.singular || 'résultat'} trouvé`;
+    }
+    return `No ${entityName?.en.plural || 'results'} found`;
+  }
+
+  return '';
+};

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

@@ -1,6 +1,4 @@
 import styled, { css } from 'styled-components';
-
-import { spacing } from '../../style/theme';
 import {
   TableHeightKeyType,
   tableRowHeight,
@@ -9,6 +7,8 @@ import {
 import { HeaderGroup } from 'react-table';
 import { Icon } from '../icon/Icon.component';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
+import { spacing } from '../../spacing';
+import { Box } from '../box/Box';
 
 const borderSize = '4px';
 export const SortIncentive = styled.span`
@@ -16,7 +16,7 @@ export const SortIncentive = styled.span`
   display: none;
 `;
 export const SortCaretWrapper = styled.span`
-  padding-left: ${spacing.sp4};
+  padding-left: ${spacing.r4};
   position: absolute;
 `;
 export const TableHeader = styled.div<{
@@ -45,11 +45,14 @@ type HeadRowType = {
   hasScrollBar: boolean;
   scrollBarWidth: number;
   rowHeight: TableHeightKeyType;
+  separationLineVariant: TableVariantType;
 };
 
 export const HeadRow = styled.div<HeadRowType>`
+  box-sizing: border-box;
   display: flex;
   align-items: center;
+  gap: ${spacing.r16};
   height: 2.286rem;
   width: ${(props) =>
     props.hasScrollBar
@@ -60,23 +63,26 @@ export const HeadRow = styled.div<HeadRowType>`
   color: ${(props) => props.theme.textPrimary};
   font-weight: bold;
   overflow: hidden;
+  border-bottom: 1px solid
+    ${(props) => props.theme[props.separationLineVariant]};
+  padding-right: ${borderSize};
+  padding-left: ${spacing.r16};
 `;
 
 type TableRowType = {
   isSelected: boolean;
   selectedId?: string;
   separationLineVariant: TableVariantType;
-  backgroundVariant: TableVariantType;
 };
 export const TableRow = styled.div<TableRowType>`
   color: ${(props) => props.theme.textPrimary};
-  border-top: 1px solid ${(props) => props.theme[props.separationLineVariant]};
-  :last-child {
-    border-bottom: 1px solid
-      ${(props) => props.theme[props.separationLineVariant]};
-  }
+  gap: ${spacing.r16};
+  border-bottom: 1px solid
+    ${(props) => props.theme[props.separationLineVariant]};
   cursor: default;
   box-sizing: border-box;
+  padding-left: ${spacing.r16};
+  padding-right: ${borderSize};
 
   // single selectable case
   ${(props) => {
@@ -101,11 +107,6 @@ export const TableRow = styled.div<TableRowType>`
         background-color: ${props.theme.highlight};
         border-right: ${borderSize} solid ${props.theme.selectedActive};
       `;
-    } else {
-      const color = props.theme[props.backgroundVariant];
-      return css`
-        border-right: ${borderSize} solid ${color};
-      `;
     }
   }}
 `;
@@ -113,41 +114,32 @@ export const TableRow = styled.div<TableRowType>`
 type TableRowMultiSelectableType = {
   isSelected: boolean;
   separationLineVariant: TableVariantType;
-  backgroundVariant: TableVariantType;
 };
 export const TableRowMultiSelectable = styled.div<TableRowMultiSelectableType>`
   color: ${(props) => props.theme.textPrimary};
-  border-top: 1px solid ${(props) => props.theme[props.separationLineVariant]};
-  :last-child {
-    border-bottom: 1px solid
-      ${(props) => props.theme[props.separationLineVariant]};
-  }
-
+  border-bottom: 1px solid
+    ${(props) => props.theme[props.separationLineVariant]};
   box-sizing: border-box;
-
-  &:hover,
-  &:focus {
-    background-color: ${(props) => props.theme.highlight};
-    outline: none;
-    cursor: pointer;
-  }
-
   ${(props) => {
     if (props.isSelected) {
       return css`
         background-color: ${(props) => props.theme.highlight};
         border-right: ${borderSize} solid ${props.theme.selectedActive};
       `;
-    } else {
-      const color = props.theme[props.backgroundVariant];
-      return css`
-        border-right: ${borderSize} solid ${color};
-      `;
     }
   }}
+  padding-right: ${borderSize};
+  padding-left: ${spacing.r16};
+  &:hover,
+  &:focus {
+    background-color: ${(props) => props.theme.highlight};
+    outline: none;
+    cursor: pointer;
+  }
 `;
 
 export const TableBody = styled.div`
+  box-sizing: border-box;
   display: block;
   flex-grow: 1;
   height: 100%;
@@ -164,12 +156,13 @@ export const TooltipContent = styled.div`
   min-width: 60px;
 `;
 
-export const NoResult = styled.div`
+export const NoResult = styled(Box)<{ rowHeight: TableHeightKeyType }>`
   display: flex;
   justify-content: center;
+  align-items: center;
   color: ${(props) => props.theme.textSecondary};
-  padding-top: ${spacing.sp8};
-  border-top: 1px solid ${(props) => props.theme.backgroundLevel3};
+  height: ${(props) => tableRowHeight[props.rowHeight]}rem;
+  gap: ${spacing.r8};
 `;
 
 export const SortCaret = <

package/src/lib/components/tablev2/Tablev2.component.tsx

@@ -67,6 +67,11 @@ export type TableProps<
   onBottom?: (rowLength: number) => void;
   onBottomOffset?: number;
   allFilters?: { id: string; value: string }[];
+  status?: 'idle' | 'loading' | 'error' | 'success';
+  entityName?: {
+    en: { singular: string; plural: string };
+    fr?: { singular: string; plural: string };
+  };
   initiallySelectedRowsIds?: Set<string | number>;
   //To call it from the Cell renderer to update the original data
 } & UpdateTableData<DATA_ROW>;
@@ -95,6 +100,11 @@ type TableContextType<
   setHiddenColumns: (param: string[] | setHiddenColumnFuncType) => void;
   isAllRowsSelected?: boolean;
   toggleAllRowsSelected: (value?: boolean) => void;
+  status?: 'idle' | 'loading' | 'error' | 'success';
+  entityName?: {
+    en: { singular: string; plural: string };
+    fr?: { singular: string; plural: string };
+  };
 };
 const TableContext = React.createContext<TableContextType | null>(null);
 
@@ -168,6 +178,8 @@ function Table<
   onBottomOffset = 10,
   initiallySelectedRowsIds,
   updateTableData,
+  status,
+  entityName,
 }: TableProps<DATA_ROW>) {
   sortTypes = {
     health: (row1, row2) => {
@@ -296,6 +308,8 @@ function Table<
     setHiddenColumns,
     isAllRowsSelected,
     toggleAllRowsSelected,
+    status,
+    entityName,
   };
   return (
     <TableContext.Provider

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

@@ -72,7 +72,6 @@ describe('TableV2', () => {
             <Table.SingleSelectableContent
               rowHeight="h40"
               separationLineVariant="backgroundLevel3"
-              backgroundVariant="backgroundLevel1"
             />
           </Table>
         </div>
@@ -92,7 +91,6 @@ describe('TableV2', () => {
             <Table.SingleSelectableContent
               rowHeight="h40"
               separationLineVariant="backgroundLevel3"
-              backgroundVariant="backgroundLevel1"
             />
           </Table>
         </div>
@@ -117,7 +115,6 @@ describe('TableV2', () => {
             <Table.SingleSelectableContent
               rowHeight="h40"
               separationLineVariant="backgroundLevel3"
-              backgroundVariant="backgroundLevel1"
             />
           </Table>
         </div>

package/src/lib/components/tabsv2/StyledTabs.ts

@@ -1,9 +1,11 @@
 import styled from 'styled-components';
-import { spacing } from '../../style/theme';
+
 import { getThemePropSelector } from '../../utils';
+import { spacing } from '../../spacing';
+
 export const TabBar = styled.div`
   display: flex;
-  height: ${spacing.sp40};
+  height: ${spacing.r40};
 `;
 export const TabItem = styled.div<{
   selected?: boolean;
@@ -14,15 +16,15 @@ export const TabItem = styled.div<{
 }>`
   display: flex;
   align-items: center;
-  padding: 0 ${spacing.sp24} 0 ${spacing.sp24};
-  border-radius: ${spacing.sp4} ${spacing.sp4} 0 0;
-  border: ${spacing.sp1} solid transparent;
+  padding: 0 ${spacing.r24} 0 ${spacing.r24};
+  border-radius: ${spacing.r4} ${spacing.r4} 0 0;
+  border: ${spacing.r1} solid transparent;
   min-width: 5rem;
 
   &:focus-visible {
     outline: 0;
     position: relative;
-    border: ${spacing.sp1} dashed ${getThemePropSelector('selectedActive')};
+    border: ${spacing.r1} dashed ${getThemePropSelector('selectedActive')};
   }
 
   &:focus-within {
@@ -39,19 +41,19 @@ export const TabItem = styled.div<{
           content: "";
           background: ${props.activeTabSeparator || selectedActive};
           position: absolute;
-          border-radius: ${spacing.sp2} ${spacing.sp2} 0 0;
+          border-radius: ${spacing.r2} ${spacing.r2} 0 0;
           bottom: 0;
           right: 0;
-          left: calc(50% - ${spacing.sp16});
-          height: ${spacing.sp2};
-          width: ${spacing.sp32};
+          left: calc(50% - ${spacing.r16});
+          height: ${spacing.r2};
+          width: ${spacing.r32};
         }
       `
       : `
         background-color: ${props.inactiveTabColor || backgroundLevel3};
         &:hover {
           cursor: pointer;
-          border: ${spacing.sp1} solid ${props.tabHoverColor || highlight};
+          border: ${spacing.r1} solid ${props.tabHoverColor || highlight};
         }
       `;
   }}
@@ -73,16 +75,16 @@ export const TabsContainer = styled.div<{
   }
 
   & ${TabItem}::before {
-    content: "";
+    content: '';
     background: ${(props) => props.separatorColor || props.theme.infoSecondary};
     position: absolute;
     bottom: 25%;
     right: 0;
-    height: ${spacing.sp16};
+    height: ${spacing.r16};
     width: 1px;
     margin-right: -1px;
   }
-}`;
+`;
 export const TabContent = styled.div<{ tabContentColor?: string }>`
   margin: 0;
   padding: 0;

package/src/lib/components/toast/Toast.component.tsx

@@ -165,6 +165,7 @@ function Toast({
             icon={<Icon name="Close" size="lg" color="textSecondary" />}
             onClick={params?.onClose}
             aria-label="Close"
+            tooltip={{ overlay: 'Close', placement: 'top' }}
           />
         </Box>
       </motion.div>

package/src/lib/components/toast/useMutationsHandler.ts

@@ -86,7 +86,7 @@ type Props<MainMutationType, T extends any[]> = {
   | { onAllMutationsSuccess?: () => void; onMainMutationSuccess?: never }
 );
 
-type MinimalMutationResult<TData, TError> = Pick<
+export type MinimalMutationResult<TData, TError> = Pick<
   UseMutationResult<TData, TError, unknown, unknown>,
   'isError' | 'isIdle' | 'isSuccess' | 'isLoading' | 'error' | 'data'
 >;
@@ -122,7 +122,9 @@ export const useMutationsHandler = <
 
     const mainMutationDesc: GetDescriptionBuilder<MainMutationType> = {
       data: mainMutation.mutation?.data,
-      status: DescriptionBuilderStatus.Success,
+      status: mainMutation.mutation?.isSuccess
+        ? DescriptionBuilderStatus.Success
+        : DescriptionBuilderStatus.Error,
       name: mainMutation.name,
     } as GetDescriptionBuilder<MainMutationType>;
     const descriptionBuilders = [

package/src/lib/organisms/attachments/AttachmentConfirmationModal.tsx

@@ -259,7 +259,6 @@ export function AttachmentConfirmationModal<ENTITY_TYPE, RESOURCE_TYPE>({
           <Table.SingleSelectableContent
             rowHeight="h32"
             separationLineVariant="backgroundLevel3"
-            backgroundVariant="backgroundLevel1"
             children={(Rows) => {
               return <>{Rows}</>;
             }}