Improvement/artesca 10858 empty state

package.json

@@ -71,7 +71,7 @@
     "@hapi/joi-date": "^2.0.1",
     "@hookform/resolvers": "^2.8.8",
     "@monaco-editor/react": "^4.4.5",
-    "@scality/core-ui": "0.122.0",
+    "@scality/core-ui": "0.123.0",
     "@scality/module-federation": "github:scality/module-federation#1.1.0",
     "@types/react-table": "^7.7.10",
     "@types/react-virtualized": "^9.21.20",

src/react/Routes.tsx

@@ -1,4 +1,11 @@
-import { AppContainer, ErrorPage401, Icon, Sidebar } from '@scality/core-ui';
+import {
+  AppContainer,
+  EmptyState,
+  ErrorPage401,
+  Icon,
+  Loader,
+  Sidebar,
+} from '@scality/core-ui';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -32,11 +39,9 @@ import EndpointCreate from './endpoint/EndpointCreate';
 import Endpoints from './endpoint/Endpoints';
 import LocationEditor from './locations/LocationEditor';
 import { Locations } from './locations/Locations';
-import { EmptyStateContainer } from './ui-elements/Container';
-import Loader from './ui-elements/Loader';
 import ReauthDialog from './ui-elements/ReauthDialog';
 import VeeamSteppers from './ui-elements/Veeam/VeeamSteps';
-import { Warning } from './ui-elements/Warning';
+
 import { useAuthGroups } from './utils/hooks';
 
 export const RemoveTrailingSlash = ({ ...rest }) => {
@@ -68,17 +73,18 @@ const RedirectToAccount = () => {
       <Redirect to={`/accounts/${selectedAccount.Name}${pathname}${search}`} />
     );
   } else if (isStorageManager) {
-    const description = pathname === '/workflows' ? 'workflows' : 'data';
+    const description =
+      pathname === '/workflows'
+        ? { singular: 'Workflow', plural: 'Workflows' }
+        : { singular: 'Bucket', plural: 'Buckets' };
     return (
-      <EmptyStateContainer>
-        <Warning
-          centered={true}
-          icon={<Icon name="Account" size="5x" />}
-          title={`Before browsing your ${description}, create your first account.`}
-          btnTitle="Create Account"
-          btnAction={() => history.push('/create-account')}
-        />
-      </EmptyStateContainer>
+      <EmptyState
+        icon={pathname === '/workflows' ? 'Workflow' : 'Bucket'}
+        link="/create-account"
+        listedResource={description}
+        resourceToCreate="Account"
+        history={history}
+      ></EmptyState>
     );
   } else {
     return <ErrorPage401 />;
@@ -139,7 +145,7 @@ function PrivateRoutes() {
 
   if (!isClientsLoaded) {
     return (
-      <Loader>
+      <Loader centered>
         <div>Loading clients</div>
       </Loader>
     );

src/react/account/AccountList.tsx

@@ -1,34 +1,27 @@
-import React, { useMemo } from 'react';
-import { useHistory } from 'react-router-dom';
-import styled from 'styled-components';
-import { spacing } from '@scality/core-ui/dist/style/theme';
-import { Button } from '@scality/core-ui/dist/components/buttonv2/Buttonv2.component';
-import { Table } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
 import {
   ConstrainedText,
-  FormattedDateTime,
   Icon,
   Link,
   Stack,
+  FormattedDateTime,
 } from '@scality/core-ui';
-import { Account } from '../next-architecture/domain/entities/account';
+import { Button, Table } from '@scality/core-ui/dist/next';
+import React, { useMemo } from 'react';
+import { useHistory } from 'react-router-dom';
 import { CellProps, CoreUIColumn } from 'react-table';
+import { Account } from '../next-architecture/domain/entities/account';
+
+import { VEEAM_FEATURE } from '../../js/config';
 import {
   useCurrentAccount,
   useSetAssumedRole,
 } from '../DataServiceRoleProvider';
-import { useAuthGroups } from '../utils/hooks';
-import { getDataUsedColumn } from '../next-architecture/ui/metrics/DataUsedColumn';
-import { useMetricsAdapter } from '../next-architecture/ui/MetricsAdapterProvider';
 import { useAccountLatestUsedCapacity } from '../next-architecture/domain/business/accounts';
 import { useConfig } from '../next-architecture/ui/ConfigProvider';
-import { VEEAM_FEATURE } from '../../js/config';
-
-const TableAction = styled.div`
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: ${spacing.sp16};
-`;
+import { useMetricsAdapter } from '../next-architecture/ui/MetricsAdapterProvider';
+import { getDataUsedColumn } from '../next-architecture/ui/metrics/DataUsedColumn';
+import { TableHeaderWrapper } from '../ui-elements/Table';
+import { useAuthGroups } from '../utils/hooks';
 
 function useAutoAssumeRoleUponAccountDeletion({
   accounts,
@@ -118,7 +111,6 @@ function AccountList({ accounts }: { accounts: Account[] }) {
   return (
     <div
       style={{
-        padding: `${spacing.sp16}`,
         display: 'flex',
         flexDirection: 'column',
         flex: 1,
@@ -128,40 +120,40 @@ function AccountList({ accounts }: { accounts: Account[] }) {
         columns={columns}
         data={accounts}
         defaultSortingKey={'creationDate'}
+        entityName={{
+          en: {
+            singular: 'account',
+            plural: 'accounts',
+          },
+        }}
       >
-        <TableAction>
-          <Table.SearchWithQueryParams
-            displayedName={{
-              singular: 'account',
-              plural: 'accounts',
-            }}
-          />
-          {isStorageManager ? (
-            <Stack>
-              {features.includes(VEEAM_FEATURE) && (
+        <TableHeaderWrapper
+          search={<Table.SearchWithQueryParams />}
+          actions={
+            isStorageManager && (
+              <Stack>
+                {features.includes(VEEAM_FEATURE) && (
+                  <Button
+                    label="Start Configuration for Veeam"
+                    variant="secondary"
+                    onClick={() => history.push('/veeam/configuration')}
+                    type="button"
+                  />
+                )}
                 <Button
-                  label="Start Configuration for Veeam"
-                  variant="secondary"
-                  onClick={() => history.push('/veeam/configuration')}
-                  type="button"
-                />
-              )}
-              <Button
-                icon={<Icon name="Create-add" />}
-                label="Create Account"
-                variant="primary"
-                onClick={() => history.push('/create-account')}
-                type="submit"
-              ></Button>
-            </Stack>
-          ) : (
-            ''
-          )}
-        </TableAction>
+                  icon={<Icon name="Create-add" />}
+                  label="Create Account"
+                  variant="primary"
+                  onClick={() => history.push('/create-account')}
+                  type="submit"
+                ></Button>
+              </Stack>
+            )
+          }
+        />
         <Table.SingleSelectableContent
           rowHeight="h40"
           separationLineVariant="backgroundLevel1"
-          backgroundVariant="backgroundLevel3"
         />
       </Table>
     </div>

src/react/account/AccountLocations.tsx

@@ -1,4 +1,4 @@
-import { Icon, Loader, Stack } from '@scality/core-ui';
+import { Loader, Stack } from '@scality/core-ui';
 import { Table } from '@scality/core-ui/dist/next';
 import { useMemo } from 'react';
 import { CellProps, CoreUIColumn } from 'react-table';
@@ -9,10 +9,9 @@ import { useMetricsAdapter } from '../next-architecture/ui/MetricsAdapterProvide
 import { getDataUsedColumn } from '../next-architecture/ui/metrics/DataUsedColumn';
 import { ColdStorageIcon } from '../ui-elements/ColdStorageIcon';
 import { HelpLocationTargetBucket } from '../ui-elements/Help';
-import { Search } from '../ui-elements/Table';
-import { Warning } from '../ui-elements/Warning';
+
 import { getLocationType } from '../utils/storageOptions';
-import { CenterredSecondaryText } from './iamAttachment/AttachmentTable';
+import { TableHeaderWrapper } from '../ui-elements/Table';
 
 export function AccountLocations() {
   const metricsAdapter = useMetricsAdapter();
@@ -34,23 +33,28 @@ export function AccountLocations() {
       (location: Location) => {
         return location;
       },
-      { flex: '0.2' },
+      { flex: '0.5' },
     );
     const columns: CoreUIColumn<Location>[] = [
       {
         Header: 'Location Name',
         accessor: 'name',
         cellStyle: {
           textAlign: 'left',
-          minWidth: '20rem',
+          minWidth: '10rem',
+          flex: '1',
+          width: 'unset',
         },
       },
       {
         Header: 'Location Type',
         accessor: 'type',
         cellStyle: {
           textAlign: 'left',
-          minWidth: '24rem',
+          minWidth: '10rem',
+          flex: '1',
+
+          width: 'unset',
         },
         Cell(value: CellProps<Location>) {
           const rowValues = value.row.original;
@@ -75,7 +79,7 @@ export function AccountLocations() {
         accessor: 'details.bucketName',
         cellStyle: {
           textAlign: 'left',
-          flex: '0.3',
+          flex: '0.5',
         },
       },
       dataUsedColumn,
@@ -84,54 +88,40 @@ export function AccountLocations() {
     return columns;
   }, [locations]);
 
-  if (locations.status === 'loading' || locations.status === 'unknown') {
+  if (locations.status === 'unknown') {
     return (
       <Stack>
         <Loader size="huge" />
         <div>Loading locations...</div>
       </Stack>
     );
   }
-  if (locations.status === 'error') {
-    return (
-      <Warning
-        icon={<Icon name="Times-circle" size="2x" />}
-        title="Unable to load locations."
-      />
-    );
-  }
 
   return (
-    <Table columns={columns} data={data} defaultSortingKey={'name'}>
-      <Search>
-        <Table.SearchWithQueryParams
-          displayedName={{
-            singular: 'location',
-            plural: 'locations',
-          }}
-          queryParams={SEARCH_QUERY_PARAM}
-        />
-      </Search>
+    <Table
+      columns={columns}
+      data={data}
+      defaultSortingKey={'name'}
+      entityName={{ en: { singular: 'location', plural: 'locations' } }}
+      status={locations.status}
+    >
+      <TableHeaderWrapper
+        search={
+          <Table.SearchWithQueryParams queryParams={SEARCH_QUERY_PARAM} />
+        }
+      />
+
       <Table.SingleSelectableContent
         id="singleTable"
         rowHeight="h40"
         separationLineVariant="backgroundLevel1"
-        backgroundVariant="backgroundLevel3"
         //@ts-expect-error fix this when you are working on it
         customItemKey={(index: number, data: Array<Location>) =>
           data[index].name
         }
         //@ts-expect-error fix this when you are working on it
         key={(index: number, data: Array<Location>) => data[index].name}
-      >
-        {(Rows) =>
-          data.length === 0 ? (
-            <CenterredSecondaryText>No Locations</CenterredSecondaryText>
-          ) : (
-            <>{Rows}</>
-          )
-        }
-      </Table.SingleSelectableContent>
+      ></Table.SingleSelectableContent>
     </Table>
   );
 }