@scality/core-ui 0.121.0 → 0.123.0

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/components/vegachartv2/VegaChartV2.component.tsx

@@ -83,7 +83,7 @@ function VegaChartInternal(
         domainColor: 'transparent',
       },
       title: {
-        color: currentTheme.buttonDelete,
+        color: currentTheme.textPrimary,
         font: 'Lato',
       },
       view: {

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}</>;
             }}

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

@@ -32,6 +32,7 @@ import {
 } from './AttachmentTypes';
 import { useQuery, UseQueryOptions } from 'react-query';
 import { EmptyCell } from '../../components/tablev2/Tablev2.component';
+import { tableRowHeight } from '../../components/tablev2/TableUtils';
 
 type AttachableEntityWithPendingStatus<ENTITY_TYPE> = {
   isPending?: boolean;
@@ -104,11 +105,7 @@ const MenuContainer = styled.ul<{
 `;
 
 const SearchBoxContainer = styled.div`
-  margin-bottom: ${spacing.r24};
-  width: 78%;
-  .sc-tooltip {
-    width: 100%;
-  }
+  padding: ${spacing.r16};
 `;
 
 const StyledSearchInput = styled(SearchInput)`
@@ -134,6 +131,7 @@ const StyledTable = styled.div`
 const CenterredSecondaryText = styled(SecondaryText)`
   display: block;
   text-align: center;
+  line-height: ${tableRowHeight[rowHeight]}rem;
 `;
 
 const PrivateAttachmentContext = createContext<{
@@ -477,8 +475,12 @@ export const AttachmentTable = <ENTITY_TYPE,>({
       <SearchBoxContainer
         {...{
           ref: (element) => {
-            if (element) {
-              setSearchWidth(element.getBoundingClientRect().width - 2 + 'px');
+            if (element?.firstElementChild) {
+              setSearchWidth(
+                element.firstElementChild.getBoundingClientRect().width -
+                  2 +
+                  'px',
+              );
             }
           },
         }}
@@ -489,7 +491,7 @@ export const AttachmentTable = <ENTITY_TYPE,>({
               <>We failed to load the entities, hence search is disabled</>
             }
           >
-            <Box display="flex" alignItems="center" width="100%" gap={8}>
+            <Stack>
               <StyledSearchInput
                 placeholder={searchEntityPlaceholder}
                 {...getInputProps({
@@ -508,7 +510,7 @@ export const AttachmentTable = <ENTITY_TYPE,>({
                 disabled={filteredEntities.status === 'error'}
               />
               <Loader />
-            </Box>
+            </Stack>
           </Tooltip>
         ) : (
           <StyledSearchInput
@@ -595,7 +597,7 @@ export const AttachmentTable = <ENTITY_TYPE,>({
         <Table
           columns={[
             {
-              Header: <Box flex={1.5}>Name</Box>,
+              Header: 'Name',
               accessor: 'name',
               cellStyle: {
                 flex: 1.5,
@@ -639,7 +641,7 @@ export const AttachmentTable = <ENTITY_TYPE,>({
               },
             },
             {
-              Header: <Box flex={0.5}>Attachment status</Box>,
+              Header: 'Attachment',
               accessor: 'isPending',
               cellStyle: {
                 flex: 0.5,
@@ -690,7 +692,6 @@ export const AttachmentTable = <ENTITY_TYPE,>({
           defaultSortingKey="name"
         >
           <Table.SingleSelectableContent
-            backgroundVariant="backgroundLevel4"
             rowHeight={rowHeight}
             separationLineVariant="backgroundLevel2"
           >
@@ -698,7 +699,7 @@ export const AttachmentTable = <ENTITY_TYPE,>({
               <>
                 {initiallyAttachedEntitiesStatus === 'idle' ||
                 initiallyAttachedEntitiesStatus === 'loading' ? (
-                  <Wrap>
+                  <Wrap style={{ height: `${tableRowHeight[rowHeight]}rem` }}>
                     <p></p>
                     <Stack>
                       <Loader />
@@ -707,9 +708,17 @@ export const AttachmentTable = <ENTITY_TYPE,>({
                     <p></p>
                   </Wrap>
                 ) : initiallyAttachedEntitiesStatus === 'error' ? (
-                  <CenterredSecondaryText>
-                    Failed to load {entityName.plural}
-                  </CenterredSecondaryText>
+                  <Stack
+                    style={{
+                      justifyContent: 'center',
+                      height: `${tableRowHeight[rowHeight]}rem`,
+                    }}
+                  >
+                    <Icon name="Exclamation-circle" color="statusWarning" />
+                    <Text color="textSecondary">
+                      Failed to load attached {entityName.plural}.
+                    </Text>
+                  </Stack>
                 ) : (
                   desiredAttachedEntities.length === 0 && (
                     <CenterredSecondaryText>

package/stories/Checkbox/checkbox.guideline.mdx

@@ -0,0 +1,55 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  Primary,
+  Controls,
+  Unstyled,
+  Source,
+} from '@storybook/blocks';
+import { Checkbox } from '../../src/lib/components/checkbox/Checkbox.component';
+
+import * as CheckboxStories from './checkbox.stories';
+
+<Meta of={CheckboxStories} name="Guideline" />
+
+# Checkbox
+
+Checkboxes are used to select one or more options in a list.
+
+## Usage
+
+Unlike the radio element it is possible to select more than one option. \
+A tick/check indicates that the element is selected. \
+
+<Canvas of={CheckboxStories.ChoiceCheckbox} layout="fullscreen" />
+
+It is possible to use the checkbox to enable or disable an option:
+
+<Canvas of={CheckboxStories.OptionCheckbox} layout="fullscreen" />
+
+## State Variations
+
+### Indeterminate State
+
+Apart from checked and unchecked, checkboxes can be in a third state : indeterminate. \
+When a checkbox has sub-options checkboxes, this state indicates that some of the sub-options are checked. \
+Clicking on the main checkbox select or unselect all the sub-options boxes.
+
+<Canvas of={CheckboxStories.IndeterminateUseCase} layout="fullscreen" />
+
+### Disabled state
+
+Checkboxes can be disabled, making it impossible to change the box state. \
+A not-allowed cursor inform the user about the unavaibility of the action.
+
+<Canvas
+  of={CheckboxStories.DisabledCheckboxes}
+
+layout="fullscreen"
+/>
+
+### Playground
+
+<Canvas of={CheckboxStories.Playground} layout="fullscreen" />
+<Controls of={CheckboxStories.Playground} />