Improvement/update tabs

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.124.0",
+    "@scality/core-ui": "^0.132.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/account/AccountDetails.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from 'styled-components';
 import type { Account } from '../../types/account';
-import { CustomTabs } from '../ui-elements/Tabs';
+import { Tabs } from '@scality/core-ui/dist/next';
 import Properties from './details/Properties';
 import { Warning } from '../ui-elements/Warning';
 import { useParams } from 'react-router-dom';
@@ -36,28 +36,22 @@ function AccountDetails({ account }: Props) {
   };
 
   return (
-    <CustomTabs
-      {...customTabStyle}
-      //@ts-expect-error fix this when you are working on it
-      style={{
-        backgroundColor: theme.backgroundLevel2,
-      }}
-    >
-      <CustomTabs.Tab exact label="Properties" path={``}>
+    <Tabs {...customTabStyle} tabLineColor={theme.backgroundLevel2}>
+      <Tabs.Tab exact label="Properties" path={``} withoutPadding>
         <Properties account={account} />
-      </CustomTabs.Tab>
+      </Tabs.Tab>
       {isStorageManager && (
-        <CustomTabs.Tab label="Locations" path={`locations`}>
+        <Tabs.Tab label="Locations" path={`locations`} withoutPadding>
           <AccountLocations />
-        </CustomTabs.Tab>
+        </Tabs.Tab>
       )}
-      <CustomTabs.Tab label="Users" path={`users`}>
+      <Tabs.Tab label="Users" path={`users`} withoutPadding>
         <AccountUserList accountName={accountName} />
-      </CustomTabs.Tab>
-      <CustomTabs.Tab label="Policies" path={`policies`}>
+      </Tabs.Tab>
+      <Tabs.Tab label="Policies" path={`policies`} withoutPadding>
         <AccountPoliciesList accountName={accountName} />
-      </CustomTabs.Tab>
-    </CustomTabs>
+      </Tabs.Tab>
+    </Tabs>
   );
 }
 

src/react/account/AccountLocations.tsx

@@ -1,4 +1,4 @@
-import { Loader, Stack } from '@scality/core-ui';
+import { Loader, Stack, spacing } from '@scality/core-ui';
 import { Table } from '@scality/core-ui/dist/next';
 import { useMemo } from 'react';
 import { CellProps, CoreUIColumn } from 'react-table';
@@ -33,7 +33,7 @@ export function AccountLocations() {
       (location: Location) => {
         return location;
       },
-      { flex: '0.5' },
+      { flex: '0.5', paddingRight: spacing.r16 },
     );
     const columns: CoreUIColumn<Location>[] = [
       {

src/react/account/iamAttachment/AttachmentTabs.tsx

@@ -14,7 +14,7 @@ import {
   getListUsersQuery,
   getUserListGroupsQuery,
 } from '../../queries';
-import { CustomTabs } from '../../ui-elements/Tabs';
+import { Tabs } from '@scality/core-ui/dist/next';
 import { useQueryParams } from '../../utils/hooks';
 import {
   AWS_PAGINATED_QUERY,
@@ -146,13 +146,14 @@ const AttachmentTabs = ({
     ) || [];
 
   return (
-    <CustomTabs {...customTabStyle}>
+    <Tabs {...customTabStyle}>
       {resourceType === 'policy' && (
-        <CustomTabs.Tab
+        <Tabs.Tab
           label="Users"
           path={pathname}
           query={{ ...queryObject, tab: null }}
           icon={<Icon name="User" />}
+          withoutPadding
         >
           <AttachmentTableProxy
             getAllEntitiesPaginatedQuery={() =>
@@ -187,14 +188,15 @@ const AttachmentTabs = ({
               setAttachmentOperations({ type: 'user', attachmentOperations })
             }
           />
-        </CustomTabs.Tab>
+        </Tabs.Tab>
       )}
       {resourceType === 'policy' && (
-        <CustomTabs.Tab
+        <Tabs.Tab
           label="Groups"
           path={pathname}
           query={{ ...queryObject, tab: 'groups' }}
           icon={<Icon name="Group" />}
+          withoutPadding
         >
           <AttachmentTableProxy
             getAllEntitiesPaginatedQuery={() =>
@@ -231,14 +233,15 @@ const AttachmentTabs = ({
               setAttachmentOperations({ type: 'group', attachmentOperations })
             }
           />
-        </CustomTabs.Tab>
+        </Tabs.Tab>
       )}
       {resourceType === 'user' && (
-        <CustomTabs.Tab
+        <Tabs.Tab
           label="Groups"
           path={pathname}
           query={{ ...queryObject, tab: null }}
           icon={<Icon name="Group" />}
+          withoutPadding
         >
           <AttachmentTableProxy
             getAllEntitiesPaginatedQuery={() =>
@@ -274,14 +277,15 @@ const AttachmentTabs = ({
               setAttachmentOperations({ type: 'group', attachmentOperations })
             }
           />
-        </CustomTabs.Tab>
+        </Tabs.Tab>
       )}
       {resourceType === 'policy' && (
-        <CustomTabs.Tab
+        <Tabs.Tab
           label="Roles"
           path={pathname}
           query={{ ...queryObject, tab: 'roles' }}
           icon={<Icon name="Role" />}
+          withoutPadding
         >
           <AttachmentTableProxy
             getAllEntitiesPaginatedQuery={() =>
@@ -323,14 +327,15 @@ const AttachmentTabs = ({
               setAttachmentOperations({ type: 'role', attachmentOperations })
             }
           />
-        </CustomTabs.Tab>
+        </Tabs.Tab>
       )}
       {resourceType === 'user' && (
-        <CustomTabs.Tab
+        <Tabs.Tab
           label="Policies"
           path={pathname}
           query={{ ...queryObject, tab: 'policies' }}
           icon={<Icon name="Policy" />}
+          withoutPadding
         >
           <AttachmentTableProxy
             getAllEntitiesPaginatedQuery={() =>
@@ -371,9 +376,9 @@ const AttachmentTabs = ({
               setAttachmentOperations({ type: 'policy', attachmentOperations })
             }
           />
-        </CustomTabs.Tab>
+        </Tabs.Tab>
       )}
-    </CustomTabs>
+    </Tabs>
   );
 };
 

src/react/databrowser/buckets/BucketDetails.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { CustomTabs } from '../../ui-elements/Tabs';
+
 import Overview from './details/Overview';
 import Workflow from './details/Workflow';
 import { Warning } from '../../ui-elements/Warning';
 import { useLocation } from 'react-router-dom';
 import type { WorkflowScheduleUnitState } from '../../../types/stats';
 import { useQueryParams } from '../../utils/hooks';
 import { Icon } from '@scality/core-ui';
+import { Tabs } from '@scality/core-ui/dist/next';
 import { Bucket } from '../../next-architecture/domain/entities/bucket';
 
 type Props = {
@@ -29,22 +30,23 @@ function BucketDetails({ bucket, ingestionStates }: Props) {
   return (
     <>
       {bucket && (
-        <CustomTabs>
-          <CustomTabs.Tab
+        <Tabs>
+          <Tabs.Tab
             label="Overview"
             path={pathname}
             query={{ ...queryObject, tab: null }}
           >
             <Overview bucket={bucket} ingestionStates={ingestionStates} />
-          </CustomTabs.Tab>
-          <CustomTabs.Tab
+          </Tabs.Tab>
+          <Tabs.Tab
             label="Workflow"
             path={pathname}
             query={{ ...queryObject, tab: 'workflow' }}
+            withoutPadding
           >
             <Workflow bucketName={bucket.name}></Workflow>
-          </CustomTabs.Tab>
-        </CustomTabs>
+          </Tabs.Tab>
+        </Tabs>
       )}
       {!bucket && <NotFound />}
     </>

src/react/databrowser/buckets/details/Workflow.tsx

@@ -73,6 +73,7 @@ function Workflow({ bucketName }: { bucketName: string }) {
       cellStyle: {
         flex: 1,
         textAlign: 'right',
+        paddingRight: spacing.r16,
       },
       Cell: ({ value }: { value: boolean }) => (value ? 'Active' : 'Inactive'),
       width: 0,

src/react/databrowser/objects/ObjectDetails.tsx

@@ -1,5 +1,5 @@
 import type { AppState } from '../../../types/state';
-import { CustomTabs } from '../../ui-elements/Tabs';
+
 import { List } from 'immutable';
 import type { ListObjectsType } from '../../../types/s3';
 import Metadata from './details/Metadata';
@@ -9,8 +9,8 @@ import { Warning } from '../../ui-elements/Warning';
 import { useLocation } from 'react-router-dom';
 import { useQueryParams } from '../../utils/hooks';
 import { useSelector } from 'react-redux';
-import { Box } from '@scality/core-ui/dist/next';
-import { Icon, spacing } from '@scality/core-ui';
+import { Tabs } from '@scality/core-ui/dist/next';
+
 export const MULTIPLE_ITEMS_SELECTED_MESSAGE = 'Multiple items selected';
 export const SELECT_AN_OBJECT_MESSAGE = 'Select an object';
 type Props = {
@@ -91,29 +91,29 @@ function ObjectDetails({ toggled, listType }: Props) {
   };
 
   return (
-    <CustomTabs>
-      <CustomTabs.Tab
+    <Tabs>
+      <Tabs.Tab
         label="Summary"
         path={pathname}
         query={{ ...queryObject, tab: null }}
       >
-        <Box style={{ padding: spacing.r16 }}>{details()}</Box>
-      </CustomTabs.Tab>
-      <CustomTabs.Tab
+        {details()}
+      </Tabs.Tab>
+      <Tabs.Tab
         label="Metadata"
         path={pathname}
         query={{ ...queryObject, tab: 'metadata' }}
       >
-        <Box style={{ padding: spacing.r16 }}>{details()}</Box>
-      </CustomTabs.Tab>
-      <CustomTabs.Tab
+        {details()}
+      </Tabs.Tab>
+      <Tabs.Tab
         label="Tags"
         path={pathname}
         query={{ ...queryObject, tab: 'tags' }}
       >
-        <Box style={{ padding: spacing.r16 }}>{details()}</Box>
-      </CustomTabs.Tab>
-    </CustomTabs>
+        {details()}
+      </Tabs.Tab>
+    </Tabs>
   );
 }
 

src/react/ui-elements/Container.ts

@@ -1,20 +1,20 @@
-import { spacing } from '@scality/core-ui/dist/style/theme';
+import { spacing } from '@scality/core-ui';
 import styled from 'styled-components';
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
 
   max-width: 600px;
-  margin: ${spacing.sp8};
-  padding: ${spacing.sp20};
+  margin: ${spacing.r8};
+  padding: ${spacing.r20};
   background-color: ${(props) => props.theme.backgroundLevel1};
 `;
 const ContainerFooter = styled.div`
   display: flex;
   justify-content: flex-end;
 
-  margin-top: ${spacing.sp8};
+  margin-top: ${spacing.r8};
 `;
 const LoaderContainer = styled.div`
   display: flex;
@@ -83,6 +83,7 @@ const ZenkoUIContainer = styled.div`
 const ButtonContainer = styled.div`
   display: flex;
   justify-content: flex-end;
+  padding-bottom: ${spacing.r16};
 `;
 const ButtonsContainer = styled.div`
   height: 100%;

src/react/ui-elements/DeleteBucket/index.tsx

@@ -38,7 +38,6 @@ export const DeleteBucket = ({ bucketName }: DeleteBucketProps) => {
             : 'Bucket is not empty'
         }
         overlayStyle={{
-          width: '9rem',
           display: isBucketEmpty ? undefined : 'none',
         }}
       >

src/react/ui-elements/Table.tsx

@@ -259,7 +259,6 @@ export const TableContainer = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
-  padding: ${spacing.r16};
 `;
 export const GentleEmphaseSecondaryText = styled(SecondaryText)<{
   alignRight?: boolean;

src/react/ui-elements/TableKeyValue2.tsx

@@ -147,6 +147,8 @@ export const ErrorContainer = styled.div`
   position: absolute;
 `;
 const Table = styled.div`
+  height: 100%;
+  overflow: auto;
   width: 100%;
 `;
 export const Header = styled.div<{ isRemoved?: boolean }>`