@scality/core-ui 0.122.0 → 0.123.0

package/dist/organisms/attachments/AttachmentTable.js

@@ -8,6 +8,7 @@ import { spacing, Stack, Wrap } from '../../spacing';
 import { AttachmentAction, } from './AttachmentTypes';
 import { useQuery } from 'react-query';
 import { EmptyCell } from '../../components/tablev2/Tablev2.component';
+import { tableRowHeight } from '../../components/tablev2/TableUtils';
 const rowHeight = 'h48';
 const MenuContainer = styled.ul `
   background-color: ${(props) => props.theme.backgroundLevel1};
@@ -43,11 +44,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) `
   flex-grow: 1;
@@ -69,6 +66,7 @@ const StyledTable = styled.div `
 const CenterredSecondaryText = styled(SecondaryText) `
   display: block;
   text-align: center;
+  line-height: ${tableRowHeight[rowHeight]}rem;
 `;
 const PrivateAttachmentContext = createContext(null);
 const AttachmentContext = createContext(null);
@@ -264,10 +262,12 @@ export const AttachmentTable = ({ initiallyAttachedEntities, initiallyAttachedEn
     const [searchWidth, setSearchWidth] = useState('0px');
     const [searchInputIsFocused, setSearchInputIsFocused] = useState(false);
     return (_jsxs(AttachmentTableContainer, { children: [_jsx(SearchBoxContainer, { ref: (element) => {
-                    if (element) {
-                        setSearchWidth(element.getBoundingClientRect().width - 2 + 'px');
+                    if (element === null || element === void 0 ? void 0 : element.firstElementChild) {
+                        setSearchWidth(element.firstElementChild.getBoundingClientRect().width -
+                            2 +
+                            'px');
                     }
-                }, children: filteredEntities.status === 'error' ? (_jsx(Tooltip, { overlay: _jsx(_Fragment, { children: "We failed to load the entities, hence search is disabled" }), children: _jsxs(Box, { display: "flex", alignItems: "center", width: "100%", gap: 8, children: [_jsx(StyledSearchInput, { placeholder: searchEntityPlaceholder, ...getInputProps({
+                }, children: filteredEntities.status === 'error' ? (_jsx(Tooltip, { overlay: _jsx(_Fragment, { children: "We failed to load the entities, hence search is disabled" }), children: _jsxs(Stack, { children: [_jsx(StyledSearchInput, { placeholder: searchEntityPlaceholder, ...getInputProps({
                                     ref: (element) => {
                                         if (element)
                                             searchInputRef.current = element;
@@ -305,7 +305,7 @@ export const AttachmentTable = ({ initiallyAttachedEntities, initiallyAttachedEn
                         filteredEntities.status === 'success' &&
                         ((_k = filteredEntities.data) === null || _k === void 0 ? void 0 : _k.entities.length) === 0 && (_jsx("li", { children: _jsxs(Text, { isGentleEmphazed: true, color: "textSecondary", children: ["No ", entityName.plural, " found matching your search."] }) }))] }), _jsx(StyledTable, { children: _jsx(Table, { columns: [
                         {
-                            Header: _jsx(Box, { flex: 1.5, children: "Name" }),
+                            Header: 'Name',
                             accessor: 'name',
                             cellStyle: {
                                 flex: 1.5,
@@ -337,7 +337,7 @@ export const AttachmentTable = ({ initiallyAttachedEntities, initiallyAttachedEn
                             },
                         },
                         {
-                            Header: _jsx(Box, { flex: 0.5, children: "Attachment status" }),
+                            Header: 'Attachment',
                             accessor: 'isPending',
                             cellStyle: {
                                 flex: 0.5,
@@ -370,6 +370,9 @@ export const AttachmentTable = ({ initiallyAttachedEntities, initiallyAttachedEn
                         ...entity,
                         isPending: entity.isPending || false,
                         action: null,
-                    })), defaultSortingKey: "name", children: _jsx(Table.SingleSelectableContent, { backgroundVariant: "backgroundLevel4", rowHeight: rowHeight, separationLineVariant: "backgroundLevel2", children: (rows) => (_jsxs(_Fragment, { children: [initiallyAttachedEntitiesStatus === 'idle' ||
-                                    initiallyAttachedEntitiesStatus === 'loading' ? (_jsxs(Wrap, { children: [_jsx("p", {}), _jsxs(Stack, { children: [_jsx(Loader, {}), _jsxs(Text, { children: ["Loading ", entityName.plural, "..."] })] }), _jsx("p", {})] })) : initiallyAttachedEntitiesStatus === 'error' ? (_jsxs(CenterredSecondaryText, { children: ["Failed to load ", entityName.plural] })) : (desiredAttachedEntities.length === 0 && (_jsxs(CenterredSecondaryText, { children: ["No ", entityName.plural, " attached"] }))), desiredAttachedEntities.length > 0 && rows] })) }) }) })] }));
+                    })), defaultSortingKey: "name", children: _jsx(Table.SingleSelectableContent, { rowHeight: rowHeight, separationLineVariant: "backgroundLevel2", children: (rows) => (_jsxs(_Fragment, { children: [initiallyAttachedEntitiesStatus === 'idle' ||
+                                    initiallyAttachedEntitiesStatus === 'loading' ? (_jsxs(Wrap, { style: { height: `${tableRowHeight[rowHeight]}rem` }, children: [_jsx("p", {}), _jsxs(Stack, { children: [_jsx(Loader, {}), _jsxs(Text, { children: ["Loading ", entityName.plural, "..."] })] }), _jsx("p", {})] })) : initiallyAttachedEntitiesStatus === 'error' ? (_jsxs(Stack, { style: {
+                                        justifyContent: 'center',
+                                        height: `${tableRowHeight[rowHeight]}rem`,
+                                    }, children: [_jsx(Icon, { name: "Exclamation-circle", color: "statusWarning" }), _jsxs(Text, { color: "textSecondary", children: ["Failed to load attached ", entityName.plural, "."] })] })) : (desiredAttachedEntities.length === 0 && (_jsxs(CenterredSecondaryText, { children: ["No ", entityName.plural, " attached"] }))), desiredAttachedEntities.length > 0 && rows] })) }) }) })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.122.0",
+  "version": "0.123.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",

package/src/lib/components/constrainedtext/Constrainedtext.component.tsx

@@ -28,10 +28,7 @@ const ConstrainedTextContainer = styled.div`
   overflow-wrap: break-word;
   `
       : `overflow-wrap: break-word;
-      white-space: nowrap;`}
-}
-
-;
+      white-space: nowrap;`};
 `;
 const BlockTooltip = styled.div`
   width: stretch;

package/src/lib/components/emptystate/Emptystate.component.tsx

@@ -4,17 +4,30 @@ import { spacing } from '../../spacing';
 import { Button } from '../buttonv2/Buttonv2.component';
 import { Icon, IconName } from '../icon/Icon.component';
 import { LargeText } from '../text/Text.component';
+import { CoreUITheme } from '../../style/theme';
 type Props = {
-  label: string;
+  listedResource: {
+    singular: string;
+    plural: string;
+  };
   icon: IconName;
   link?: string;
   history?: Record<string, any>;
+  backgroundColor?: keyof CoreUITheme;
+  /**
+   * The resource to create before browsing the listed resource
+   * Only used when resource to create is different from listed resource
+   */
+  resourceToCreate?: string;
 };
-const EmptystateContainer = styled.div`
+const EmptystateContainer = styled.div<{ backgroundColor?: keyof CoreUITheme }>`
   ${(props) => {
-    const brand = props.theme;
+    const { theme, backgroundColor } = props;
     return css`
-      color: ${brand.textSecondary};
+      color: ${theme.textSecondary};
+      background-color: ${backgroundColor
+        ? theme[backgroundColor]
+        : 'transparent'};
     `;
   }}
   display: flex;
@@ -33,25 +46,36 @@ export const ActionWrapper = styled.div`
 `;
 
 function EmptyState(props: Props) {
-  const { icon, label, link, history } = props;
+  const {
+    icon,
+    listedResource,
+    link,
+    history,
+    resourceToCreate,
+    backgroundColor,
+  } = props;
   return (
-    <EmptystateContainer className="sc-emptystate">
+    <EmptystateContainer
+      className="sc-emptystate"
+      backgroundColor={backgroundColor}
+    >
       <EmptyStateRow>
         <Icon name={icon} color="infoPrimary" size="5x" withWrapper />
       </EmptyStateRow>
       <EmptyStateRow>
-        <LargeText>A list of {`${label}s`} will appear here.</LargeText>
+        <LargeText>{`A list of ${listedResource.plural} will appear here.`}</LargeText>
       </EmptyStateRow>
       <EmptyStateRow>
         <LargeText>
-          There are no {`${label}s`} created yet, let's create your first{' '}
-          {label}.
+          {!resourceToCreate
+            ? `There are no ${listedResource.plural} created yet, let's create your first ${listedResource.singular}.`
+            : `Before browsing your ${listedResource.plural}, create your first ${resourceToCreate}.`}
         </LargeText>
       </EmptyStateRow>
       {history && (
         <ActionWrapper>
           <Button
-            label={`Create ${label}`}
+            label={`Create ${resourceToCreate || listedResource.singular}`}
             icon={<Icon name="Create-add" />}
             type="button"
             variant="primary"

package/src/lib/components/icon/Icon.component.tsx

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 import styled, { css } from 'styled-components';
-import { brand } from '../../style/theme';
+import { CoreUITheme } from '../../style/theme';
 
 import { Loader } from '../loader/Loader.component';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -142,7 +142,7 @@ const IconStyled = styled(FontAwesomeIcon)`
 `;
 
 export type IconName = keyof typeof iconTable;
-export type IconColor = keyof typeof brand;
+export type IconColor = keyof CoreUITheme;
 type Props = {
   name: IconName;
   size?: SizeProp;

package/src/lib/components/infomessage/InfoMessageUtils.ts

@@ -1,39 +1,45 @@
-import { DefaultTheme, useTheme } from "styled-components";
-import { hex2RGB } from "../../utils";
-import { useEffect, useRef, useState } from "react";
+import { DefaultTheme, useTheme } from 'styled-components';
+import { hex2RGB } from '../../utils';
+import { useEffect, useRef, useState } from 'react';
 
 export const useComputeBackgroundColor = () => {
-    const theme = useTheme();
-    const containerRef = useRef<HTMLDivElement | null>(null);
-    const [backgroundColor, setBackgroundColor] = useState('');
-  
-    useEffect(() => {
-      containerRef.current &&
-        setBackgroundColor(getBackgroundColor(containerRef.current, theme));
-    }, [containerRef,theme]);
-  
-    return {
-      containerRef,
-      backgroundColor,
-    };
+  const theme = useTheme();
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [backgroundColor, setBackgroundColor] = useState('');
+
+  useEffect(() => {
+    containerRef.current &&
+      setBackgroundColor(getBackgroundColor(containerRef.current, theme));
+  }, [containerRef, theme]);
+
+  return {
+    containerRef,
+    backgroundColor,
   };
+};
 
-export const getBackgroundColor = (element: HTMLElement, theme: DefaultTheme) => {
-    if (element.parentElement) {
-      const parentElementBackgroundColor = window.getComputedStyle(
-        element.parentElement,
-      )['background-color'];
-      if (/rgba\([0-9]+, [0-9]+, [0-9]+, 0\)/.test(parentElementBackgroundColor) || !window.getComputedStyle(element.parentElement,)['background-color']) {
-        return getBackgroundColor(element.parentElement, theme);
-      } else {
-        const rgbArray = hex2RGB(theme.backgroundLevel2);
-        if (
-          `rgb(${rgbArray[0]}, ${rgbArray[1]}, ${rgbArray[2]})` ===
-          parentElementBackgroundColor
-        ) {
-          return theme.backgroundLevel3;
-        }
+export const getBackgroundColor = (
+  element: HTMLElement,
+  theme: DefaultTheme,
+) => {
+  if (element.parentElement) {
+    const parentElementBackgroundColor = window.getComputedStyle(
+      element.parentElement,
+    )['background-color'];
+    if (
+      /rgba\([0-9]+, [0-9]+, [0-9]+, 0\)/.test(parentElementBackgroundColor) ||
+      !window.getComputedStyle(element.parentElement)['background-color']
+    ) {
+      return getBackgroundColor(element.parentElement, theme);
+    } else {
+      const rgbArray = hex2RGB(theme.backgroundLevel2);
+      if (
+        `rgb(${rgbArray[0]}, ${rgbArray[1]}, ${rgbArray[2]})` ===
+        parentElementBackgroundColor
+      ) {
+        return theme.backgroundLevel3;
       }
     }
-    return theme.backgroundLevel2;
-  };
+  }
+  return theme.backgroundLevel2;
+};

package/src/lib/components/navbar/Navbar.component.tsx

@@ -37,6 +37,7 @@ const NavbarContainer = styled.div`
       color: ${getThemePropSelector('textPrimary')};
     }
     border-bottom: 0.5px solid ${(props) => props.theme.backgroundLevel3};
+    box-sizing: border-box;
   `};
 `;
 const NavbarMenu = styled.div`

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ChangeEvent, forwardRef, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { Icon } from '../icon/Icon.component';

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

@@ -24,7 +24,7 @@ export type OptionProps = {
   icon?: React.ReactNode;
   children?: React.ReactNode;
   value: string;
-  disabledReason?: JSX.Element;
+  disabledReason?: React.ReactNode;
 };
 const usePreviousValue = (value) => {
   const ref = useRef(null);

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