diff --git a/package-lock.json b/package-lock.json index a9d9aa8d8..57f519173 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,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", @@ -3322,9 +3322,9 @@ "dev": true }, "node_modules/@scality/core-ui": { - "version": "0.124.0", - "resolved": "https://registry.npmjs.org/@scality/core-ui/-/core-ui-0.124.0.tgz", - "integrity": "sha512-64fyZUkrm4CV/ZM6Vt+Qe2wVqrDHAkMzpNWWD/HMZwdfjlvS5bkg6/6pyM4H/s2zySKhg5g0wvsA2RAyJaoDvg==", + "version": "0.132.0", + "resolved": "https://registry.npmjs.org/@scality/core-ui/-/core-ui-0.132.0.tgz", + "integrity": "sha512-jIwdxPXVF/NViK91FnL3x2dhFfpiW6q/blEivaLZrWRMXJQhBmj3Y9TFFCyzPht1nHXNBufHhZBArxhDXLafjA==", "dependencies": { "@floating-ui/dom": "^1.6.3", "@fortawesome/fontawesome-free": "^5.10.2", @@ -22285,9 +22285,9 @@ "dev": true }, "@scality/core-ui": { - "version": "0.124.0", - "resolved": "https://registry.npmjs.org/@scality/core-ui/-/core-ui-0.124.0.tgz", - "integrity": "sha512-64fyZUkrm4CV/ZM6Vt+Qe2wVqrDHAkMzpNWWD/HMZwdfjlvS5bkg6/6pyM4H/s2zySKhg5g0wvsA2RAyJaoDvg==", + "version": "0.132.0", + "resolved": "https://registry.npmjs.org/@scality/core-ui/-/core-ui-0.132.0.tgz", + "integrity": "sha512-jIwdxPXVF/NViK91FnL3x2dhFfpiW6q/blEivaLZrWRMXJQhBmj3Y9TFFCyzPht1nHXNBufHhZBArxhDXLafjA==", "requires": { "@floating-ui/dom": "^1.6.3", "@fortawesome/fontawesome-free": "^5.10.2", diff --git a/package.json b/package.json index 97234b10e..7133405bb 100644 --- a/package.json +++ b/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", diff --git a/src/react/account/AccountDetails.tsx b/src/react/account/AccountDetails.tsx index 94285019b..576e0b40f 100644 --- a/src/react/account/AccountDetails.tsx +++ b/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 ( - - + + - + {isStorageManager && ( - + - + )} - + - - + + - - + + ); } diff --git a/src/react/account/AccountLocations.tsx b/src/react/account/AccountLocations.tsx index 9b40d0438..c174e3611 100644 --- a/src/react/account/AccountLocations.tsx +++ b/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[] = [ { diff --git a/src/react/account/iamAttachment/AttachmentTabs.tsx b/src/react/account/iamAttachment/AttachmentTabs.tsx index d04930539..d3e391729 100644 --- a/src/react/account/iamAttachment/AttachmentTabs.tsx +++ b/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 ( - + {resourceType === 'policy' && ( - } + withoutPadding > @@ -187,14 +188,15 @@ const AttachmentTabs = ({ setAttachmentOperations({ type: 'user', attachmentOperations }) } /> - + )} {resourceType === 'policy' && ( - } + withoutPadding > @@ -231,14 +233,15 @@ const AttachmentTabs = ({ setAttachmentOperations({ type: 'group', attachmentOperations }) } /> - + )} {resourceType === 'user' && ( - } + withoutPadding > @@ -274,14 +277,15 @@ const AttachmentTabs = ({ setAttachmentOperations({ type: 'group', attachmentOperations }) } /> - + )} {resourceType === 'policy' && ( - } + withoutPadding > @@ -323,14 +327,15 @@ const AttachmentTabs = ({ setAttachmentOperations({ type: 'role', attachmentOperations }) } /> - + )} {resourceType === 'user' && ( - } + withoutPadding > @@ -371,9 +376,9 @@ const AttachmentTabs = ({ setAttachmentOperations({ type: 'policy', attachmentOperations }) } /> - + )} - + ); }; diff --git a/src/react/databrowser/buckets/BucketDetails.tsx b/src/react/databrowser/buckets/BucketDetails.tsx index c4f8bd76d..60f660845 100644 --- a/src/react/databrowser/buckets/BucketDetails.tsx +++ b/src/react/databrowser/buckets/BucketDetails.tsx @@ -1,5 +1,5 @@ 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'; @@ -7,6 +7,7 @@ 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 && ( - - + - - + - - + + )} {!bucket && } diff --git a/src/react/databrowser/buckets/details/Workflow.tsx b/src/react/databrowser/buckets/details/Workflow.tsx index 21f27f82e..8c34dc71a 100644 --- a/src/react/databrowser/buckets/details/Workflow.tsx +++ b/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, diff --git a/src/react/databrowser/objects/ObjectDetails.tsx b/src/react/databrowser/objects/ObjectDetails.tsx index d9f5411a1..d601e20e5 100644 --- a/src/react/databrowser/objects/ObjectDetails.tsx +++ b/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 ( - - + - {details()} - - + - {details()} - - + - {details()} - - + {details()} + + ); } diff --git a/src/react/ui-elements/Container.ts b/src/react/ui-elements/Container.ts index 82cad2c5c..87f3af7c6 100644 --- a/src/react/ui-elements/Container.ts +++ b/src/react/ui-elements/Container.ts @@ -1,4 +1,4 @@ -import { spacing } from '@scality/core-ui/dist/style/theme'; +import { spacing } from '@scality/core-ui'; import styled from 'styled-components'; const Container = styled.div` @@ -6,15 +6,15 @@ const Container = styled.div` 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%; diff --git a/src/react/ui-elements/DeleteBucket/index.tsx b/src/react/ui-elements/DeleteBucket/index.tsx index 821540465..22b6fdbea 100644 --- a/src/react/ui-elements/DeleteBucket/index.tsx +++ b/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', }} > diff --git a/src/react/ui-elements/Table.tsx b/src/react/ui-elements/Table.tsx index 0a28da80e..eec3cf906 100644 --- a/src/react/ui-elements/Table.tsx +++ b/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; diff --git a/src/react/ui-elements/TableKeyValue2.tsx b/src/react/ui-elements/TableKeyValue2.tsx index 11af3f30a..1f8ceb2fb 100644 --- a/src/react/ui-elements/TableKeyValue2.tsx +++ b/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 }>` diff --git a/src/react/ui-elements/Tabs.ts b/src/react/ui-elements/Tabs.ts deleted file mode 100644 index 6e8eb1263..000000000 --- a/src/react/ui-elements/Tabs.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Tabs } from '@scality/core-ui/dist/next'; - -import styled from 'styled-components'; -export const CustomTabs = styled(Tabs)` - display: flex; - flex: 1; - .sc-tabs-item-content { - overflow-y: auto; - overflow-x: scroll; - } -`; diff --git a/src/react/workflow/ConfigurationTab.tsx b/src/react/workflow/ConfigurationTab.tsx index 25dc3ce66..fd6e29dc6 100644 --- a/src/react/workflow/ConfigurationTab.tsx +++ b/src/react/workflow/ConfigurationTab.tsx @@ -578,93 +578,88 @@ function EditForm({ }; return ( - - -
} - variant="warning" - > - If you leave this screen without saving, your changes will be - lost. - - ) - } - layout={{ kind: 'tab' }} - onSubmit={handleSubmit(onSubmit)} - rightActions={ - -