@scality/core-ui 0.121.0 → 0.123.0

package/dist/components/toast/Toast.component.js

@@ -101,6 +101,6 @@ function Toast({ open, message, onClose, position = 'top-right', status = 'info'
                     display: 'flex',
                     borderRadius: '4px',
                     position: 'relative',
-                }, children: [_jsx(IconContainer, { bgColor: rgbBgColor, children: icon }), _jsx(ContentContainer, { children: _jsx(BasicText, { children: message }) }), _jsx(Box, { display: "flex", alignItems: "center", alignSelf: "stretch", children: _jsx(Button, { icon: _jsx(Icon, { name: "Close", size: "lg", color: "textSecondary" }), onClick: params === null || params === void 0 ? void 0 : params.onClose, "aria-label": "Close" }) })] }, "toast"), withProgressBar && (_jsx(DurationBasedProgressBar, { duration: autoDismiss ? duration : null, color: bgColor }))] }));
+                }, children: [_jsx(IconContainer, { bgColor: rgbBgColor, children: icon }), _jsx(ContentContainer, { children: _jsx(BasicText, { children: message }) }), _jsx(Box, { display: "flex", alignItems: "center", alignSelf: "stretch", children: _jsx(Button, { icon: _jsx(Icon, { name: "Close", size: "lg", color: "textSecondary" }), onClick: params === null || params === void 0 ? void 0 : params.onClose, "aria-label": "Close", tooltip: { overlay: 'Close', placement: 'top' } }) })] }, "toast"), withProgressBar && (_jsx(DurationBasedProgressBar, { duration: autoDismiss ? duration : null, color: bgColor }))] }));
 }
 export { Toast };

package/dist/components/toast/useMutationsHandler.d.ts

@@ -34,7 +34,7 @@ type Props<MainMutationType, T extends any[]> = {
     onAllMutationsSuccess?: () => void;
     onMainMutationSuccess?: never;
 });
-type MinimalMutationResult<TData, TError> = Pick<UseMutationResult<TData, TError, unknown, unknown>, 'isError' | 'isIdle' | 'isSuccess' | 'isLoading' | 'error' | 'data'>;
+export type MinimalMutationResult<TData, TError> = Pick<UseMutationResult<TData, TError, unknown, unknown>, 'isError' | 'isIdle' | 'isSuccess' | 'isLoading' | 'error' | 'data'>;
 export declare const useMutationsHandler: <MainMutationType extends MinimalMutationResult<unknown, unknown>, T extends any[] | []>({ mainMutation, dependantMutations, messageDescriptionBuilder, toastProps, ...rest }: Props<MainMutationType, T>) => void;
 export {};
 //# sourceMappingURL=useMutationsHandler.d.ts.map

package/dist/components/toast/useMutationsHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMutationsHandler.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/useMutationsHandler.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useMutationsHandler.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/useMutationsHandler.ts"],"names":[],"mappings":"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"}

package/dist/components/toast/useMutationsHandler.js

@@ -12,14 +12,16 @@ export const useMutationsHandler = ({ mainMutation, dependantMutations, messageD
         ...(dependantMutations ? dependantMutations : []),
     ];
     const handleMutationsCompletion = useCallback(async () => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         const results = await Promise.all(mutations.map((m) => m.mutation));
         const loadingMutations = mutations.filter((_, index) => results[index].isLoading);
         const successMutations = mutations.filter((_, index) => results[index].isSuccess);
         const errorMutations = mutations.filter((_, index) => results[index].isError);
         const mainMutationDesc = {
             data: (_a = mainMutation.mutation) === null || _a === void 0 ? void 0 : _a.data,
-            status: DescriptionBuilderStatus.Success,
+            status: ((_b = mainMutation.mutation) === null || _b === void 0 ? void 0 : _b.isSuccess)
+                ? DescriptionBuilderStatus.Success
+                : DescriptionBuilderStatus.Error,
             name: mainMutation.name,
         };
         const descriptionBuilders = [
@@ -35,8 +37,8 @@ export const useMutationsHandler = ({ mainMutation, dependantMutations, messageD
         ];
         if (loadingMutations.length === 0) {
             if (errorMutations.length > 0) {
-                if ((_b = mainMutation.mutation) === null || _b === void 0 ? void 0 : _b.isSuccess) {
-                    'onMainMutationSuccess' in rest && ((_c = rest === null || rest === void 0 ? void 0 : rest.onMainMutationSuccess) === null || _c === void 0 ? void 0 : _c.call(rest));
+                if ((_c = mainMutation.mutation) === null || _c === void 0 ? void 0 : _c.isSuccess) {
+                    'onMainMutationSuccess' in rest && ((_d = rest === null || rest === void 0 ? void 0 : rest.onMainMutationSuccess) === null || _d === void 0 ? void 0 : _d.call(rest));
                 }
                 showToast({
                     open: true,
@@ -47,9 +49,9 @@ export const useMutationsHandler = ({ mainMutation, dependantMutations, messageD
                 return;
             }
             else if (successMutations.length > 0) {
-                'onMainMutationSuccess' in rest && ((_d = rest === null || rest === void 0 ? void 0 : rest.onMainMutationSuccess) === null || _d === void 0 ? void 0 : _d.call(rest));
+                'onMainMutationSuccess' in rest && ((_e = rest === null || rest === void 0 ? void 0 : rest.onMainMutationSuccess) === null || _e === void 0 ? void 0 : _e.call(rest));
                 if (successMutations.length === mutations.length) {
-                    'onAllMutationsSuccess' in rest && ((_e = rest === null || rest === void 0 ? void 0 : rest.onAllMutationsSuccess) === null || _e === void 0 ? void 0 : _e.call(rest));
+                    'onAllMutationsSuccess' in rest && ((_f = rest === null || rest === void 0 ? void 0 : rest.onAllMutationsSuccess) === null || _f === void 0 ? void 0 : _f.call(rest));
                 }
                 showToast({
                     open: true,

package/dist/components/vegachartv2/VegaChartV2.component.js

@@ -58,7 +58,7 @@ function VegaChartInternal({ spec, tooltipPosition = BOTTOM, theme = 'custom', f
                 domainColor: 'transparent',
             },
             title: {
-                color: currentTheme.buttonDelete,
+                color: currentTheme.textPrimary,
                 font: 'Lato',
             },
             view: {

package/dist/organisms/attachments/AttachmentConfirmationModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentConfirmationModal.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/attachments/AttachmentConfirmationModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAe,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAQ1E,wBAAgB,2BAA2B,CAAC,WAAW,EAAE,aAAa,EAAE,EACtE,oBAAoB,EACpB,4BAA4B,EAC5B,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,oBAAoB,EACpB,QAAQ,EACR,MAAM,GACP,EAAE;IACD,oBAAoB,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,CAAC;IACzD,4BAA4B,EAAE,MAAM,kBAAkB,CACpD,OAAO,EACP,OAAO,EACP;QACE,MAAM,EAAE,gBAAgB,CAAC;QACzB,IAAI,EAAE,WAAW,CAAC;QAClB,UAAU,EAAE,MAAM,CAAC;QACnB,EAAE,EAAE,MAAM,CAAC;KACZ,CACF,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,aAAa,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,aAAa,CAAC;QAAE,IAAI,EAAE,WAAW,GAAG,aAAa,CAAA;KAAE,CAAC,CAAC;IACjE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,CACP,qBAAqB,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,EACzD,gBAAgB,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,KACjD,IAAI,CAAC;CACX,eA0QA"}
+{"version":3,"file":"AttachmentConfirmationModal.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/attachments/AttachmentConfirmationModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAe,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAQ1E,wBAAgB,2BAA2B,CAAC,WAAW,EAAE,aAAa,EAAE,EACtE,oBAAoB,EACpB,4BAA4B,EAC5B,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,oBAAoB,EACpB,QAAQ,EACR,MAAM,GACP,EAAE;IACD,oBAAoB,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,CAAC;IACzD,4BAA4B,EAAE,MAAM,kBAAkB,CACpD,OAAO,EACP,OAAO,EACP;QACE,MAAM,EAAE,gBAAgB,CAAC;QACzB,IAAI,EAAE,WAAW,CAAC;QAClB,UAAU,EAAE,MAAM,CAAC;QACnB,EAAE,EAAE,MAAM,CAAC;KACZ,CACF,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,aAAa,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,aAAa,CAAC;QAAE,IAAI,EAAE,WAAW,GAAG,aAAa,CAAA;KAAE,CAAC,CAAC;IACjE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,CACP,qBAAqB,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,EACzD,gBAAgB,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,KACjD,IAAI,CAAC;CACX,eAyQA"}

package/dist/organisms/attachments/AttachmentConfirmationModal.js

@@ -127,7 +127,7 @@ export function AttachmentConfirmationModal({ attachmentOperations, getAttachmen
                 },
             },
         ];
-        return (_jsxs("div", { style: { height: '25rem', width: '50rem' }, children: [_jsx("div", { children: "The following entities will be attached or detached: " }), _jsxs(Box, { display: "flex", gap: 24, alignItems: "center", children: [_jsx(SecondaryText, { children: _jsx(EntityIcon, { type: resourceType }) }), _jsx("p", { children: resourceName })] }), _jsx(Table, { columns: columns, data: attachmentOperationsFlat, defaultSortingKey: 'entityName', children: _jsx(Table.SingleSelectableContent, { rowHeight: "h32", separationLineVariant: "backgroundLevel3", backgroundVariant: "backgroundLevel1", children: (Rows) => {
+        return (_jsxs("div", { style: { height: '25rem', width: '50rem' }, children: [_jsx("div", { children: "The following entities will be attached or detached: " }), _jsxs(Box, { display: "flex", gap: 24, alignItems: "center", children: [_jsx(SecondaryText, { children: _jsx(EntityIcon, { type: resourceType }) }), _jsx("p", { children: resourceName })] }), _jsx(Table, { columns: columns, data: attachmentOperationsFlat, defaultSortingKey: 'entityName', children: _jsx(Table.SingleSelectableContent, { rowHeight: "h32", separationLineVariant: "backgroundLevel3", children: (Rows) => {
                             return _jsx(_Fragment, { children: Rows });
                         } }) })] }));
     }

package/dist/organisms/attachments/AttachmentTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentTable.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/attachments/AttachmentTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAef,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAY,eAAe,EAAE,MAAM,aAAa,CAAC;AAOxD,MAAM,MAAM,oBAAoB,CAAC,WAAW,IAAI;IAC9C,yBAAyB,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAC;IAC3D,+BAA+B,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1E,2BAA2B,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,CAAC;IAChE,UAAU,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,gBAAgB,CAAC,WAAW,CAAC,KAClC,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IAC/C,uBAAuB,EAAE,MAAM,CAAC;IAChC,8BAA8B,EAAE,CAC9B,oBAAoB,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,KACrD,IAAI,CAAC;IACV,gBAAgB,EACZ;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,GAClB;QACE,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;QAC5B,IAAI,CAAC,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAA;SAAE,CAAC;KACtE,GACD;QACE,MAAM,EAAE,SAAS,CAAC;QAClB,IAAI,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAA;SAAE,CAAC;KACrE,CAAC;IACN,oBAAoB,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD,CAAC;AA6FF,eAAO,MAAM,kBAAkB,+CAE5B,kBAAkB,EAAE,CAAC,gBAmBvB,CAAC;AAEF,eAAO,MAAM,uBAAuB;sDA5BL,iBAAiB,GAAG,CAAC,EAAE,+BACrB,oBAAoB,GAAG,CAAC,EAAE,KACpD,IAAI;CAkCV,CAAC;AAEF,eAAO,MAAM,eAAe,0RA2hB3B,CAAC"}
+{"version":3,"file":"AttachmentTable.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/attachments/AttachmentTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAef,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAY,eAAe,EAAE,MAAM,aAAa,CAAC;AAQxD,MAAM,MAAM,oBAAoB,CAAC,WAAW,IAAI;IAC9C,yBAAyB,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAC;IAC3D,+BAA+B,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1E,2BAA2B,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,CAAC;IAChE,UAAU,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,gBAAgB,CAAC,WAAW,CAAC,KAClC,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IAC/C,uBAAuB,EAAE,MAAM,CAAC;IAChC,8BAA8B,EAAE,CAC9B,oBAAoB,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,KACrD,IAAI,CAAC;IACV,gBAAgB,EACZ;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,GAClB;QACE,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;QAC5B,IAAI,CAAC,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAA;SAAE,CAAC;KACtE,GACD;QACE,MAAM,EAAE,SAAS,CAAC;QAClB,IAAI,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAA;SAAE,CAAC;KACrE,CAAC;IACN,oBAAoB,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD,CAAC;AA0FF,eAAO,MAAM,kBAAkB,+CAE5B,kBAAkB,EAAE,CAAC,gBAmBvB,CAAC;AAEF,eAAO,MAAM,uBAAuB;sDA5BL,iBAAiB,GAAG,CAAC,EAAE,+BACrB,oBAAoB,GAAG,CAAC,EAAE,KACpD,IAAI;CAkCV,CAAC;AAEF,eAAO,MAAM,eAAe,0RAsiB3B,CAAC"}

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.121.0",
+  "version": "0.123.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -18,7 +18,8 @@
     "test": "jest",
     "storybook": "storybook dev -p 3000",
     "build-storybook": "storybook build",
-    "storybook:deploy": "storybook-to-ghpages"
+    "storybook:deploy": "storybook-to-ghpages",
+    "preview": "jest-preview"
   },
   "keywords": [],
   "browserslist": [
@@ -71,6 +72,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-canvas-mock": "^2.3.1",
+    "jest-preview": "^0.3.1",
     "plop": "^2.4.0",
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.0",
@@ -101,10 +103,10 @@
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@js-temporal/polyfill": "^0.4.4",
     "@storybook/preview-api": "^7.6.17",
+    "downshift": "^7.0.5",
     "framer-motion": "^4.1.17",
     "polished": "3.4.1",
     "pretty-bytes": "^5.6.0",
-    "downshift": "^7.0.5",
     "react": "^17.0.2",
     "react-debounce-input": "3.2.2",
     "react-dom": "^17.0.2",

package/src/lib/components/card/Card.component.tsx

@@ -3,6 +3,7 @@ import { HTMLProps } from 'react';
 import { createContext } from 'react';
 import styled, { css } from 'styled-components';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
+import { hex2RGB } from '../../utils';
 const CardContext = createContext(null);
 type CardElementProps = {
   children: React.ReactNode;
@@ -85,9 +86,10 @@ const StyledCard = styled.div<{
   ${StyledCardHeader} {
     color: ${(props) => props.theme.textPrimary};
     background: ${(props) =>
-      props.theme[props.colorStatus || props.headerBackgroundColor]};
-    opacity: ${(props) =>
-      props.colorStatus && props.colorStatus !== 'backgroundLevel4' ? 0.4 : 1};
+      props.colorStatus
+        ? `rgba(${hex2RGB(props.theme[props.colorStatus]).join(',')}, 0.7)`
+        : props.theme[props.headerBackgroundColor]};
+
     ${(props) => props.disabled && 'opacity: 0.3;'}
   }
 
@@ -140,9 +142,8 @@ function Card({
 
   if (status) {
     colorStatus =
-      status === 'healthy'
-        ? 'backgroundLevel4'
-        : 'status' + status.replace(/^\w/, (c) => c.toUpperCase());
+      status != 'healthy' &&
+      'status' + status.replace(/^\w/, (c) => c.toUpperCase());
   }
 
   return (

package/src/lib/components/checkbox/Checkbox.component.tsx

@@ -5,7 +5,7 @@ import { spacing, Stack } from '../../spacing';
 import { Text } from '../text/Text.component';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 
-type Props = {
+export type Props = {
   label?: string;
   value?: string;
   checked?: boolean;
@@ -53,6 +53,8 @@ const StyledCheckbox = styled.label<{
     color: ${(props) => props.theme.textPrimary};
     vertical-align: middle;
     -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
     background: none;
     border: 0;
     outline: 0;

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/layout/v2/AppContainer.tsx

@@ -53,7 +53,7 @@ const OverallSummaryContainer = styled.div<{
   background?: ThemeColors;
 }>`
   background: ${(props) => props.theme[props.background || 'backgroundLevel2']};
-  height: 6rem;
+  min-height: 6rem;
   padding: ${({ noPadding }) => (noPadding ? '0' : '0 1rem')};
   margin-bottom: ${({ noBottomMargin }) =>
     noBottomMargin ? '0' : sectionDistance};

package/src/lib/components/linetemporalchart/LineTemporalChart.component.tsx

@@ -327,8 +327,7 @@ function LineTemporalChart({
         //https://vega.github.io/vega-lite/docs/datetime.html
       },
       color: {
-        value: theme.highlight,
-        opacity: 0.3,
+        value: theme.selectedActive,
       },
 
       /* 

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);
@@ -79,12 +79,7 @@ export function Option({
 }
 
 const Input = (props) => {
-  const ariaProps = {
-    role: props.selectProps.isSearchable ? 'combobox' : 'listbox',
-    'aria-expanded': props.selectProps.menuIsOpen,
-    'aria-autocomplete': 'list',
-  };
-  return <components.Input {...props} {...ariaProps} />;
+  return <components.Input {...props} />;
 };
 
 const selectDropdownIndicator = (
@@ -285,8 +280,17 @@ const MenuList = (props) => {
 const ValueContainer = ({ children, ...props }) => {
   const selectedOption = props.selectProps.selectedOption;
   const icon = selectedOption ? selectedOption.icon : null;
+  const ariaProps = {
+    innerProps: {
+      role: props.selectProps.isSearchable ? 'combobox' : 'listbox',
+      'aria-expanded': props.selectProps.menuIsOpen,
+      'aria-autocomplete': 'list',
+      'aria-label': props.selectProps.placeholder,
+    },
+  };
+
   return (
-    <components.ValueContainer {...props}>
+    <components.ValueContainer {...props} {...ariaProps}>
       {icon ? <div className="value-container-icon">{icon}</div> : null}
       <div>{children}</div>
     </components.ValueContainer>