From 9ac7a956f3c36be2fae4197267621bb5dd055f2c Mon Sep 17 00:00:00 2001 From: Patrick Ear Date: Tue, 17 Sep 2024 15:18:26 +0200 Subject: [PATCH 1/3] fix icons issues --- src/react/account/AccountDetails.tsx | 18 +++--- src/react/account/AccountUserAccessKeys.tsx | 17 ++---- .../databrowser/buckets/ObjectLockSetting.tsx | 2 +- .../databrowser/objects/MetadataSearch.tsx | 55 +++++++++++++------ .../databrowser/objects/ObjectListTable.tsx | 32 ++++------- .../LocationDetails/LocationDetails.tsx | 4 +- src/react/ui-elements/Table.tsx | 52 ++++++------------ 7 files changed, 86 insertions(+), 94 deletions(-) diff --git a/src/react/account/AccountDetails.tsx b/src/react/account/AccountDetails.tsx index 3bc15fbd7..8522011f6 100644 --- a/src/react/account/AccountDetails.tsx +++ b/src/react/account/AccountDetails.tsx @@ -1,21 +1,23 @@ +import { Icon } from '@scality/core-ui'; +import { Tabs } from '@scality/core-ui/dist/next'; +import { useParams } from 'react-router-dom'; import { useTheme } from 'styled-components'; import { Account } from '../../types/account'; -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'; -import AccountUserList from './AccountUserList'; -import AccountPoliciesList from './AccountPoliciesList'; -import { AccountLocations } from './AccountLocations'; import { useAuthGroups } from '../utils/hooks'; +import { AccountLocations } from './AccountLocations'; +import AccountPoliciesList from './AccountPoliciesList'; +import AccountUserList from './AccountUserList'; +import Properties from './details/Properties'; + type Props = { account: Account | null | undefined; }; const NotFound = () => ( } title="Account not found." /> ); diff --git a/src/react/account/AccountUserAccessKeys.tsx b/src/react/account/AccountUserAccessKeys.tsx index 330ca4129..9161d76f6 100644 --- a/src/react/account/AccountUserAccessKeys.tsx +++ b/src/react/account/AccountUserAccessKeys.tsx @@ -21,7 +21,7 @@ import { useRouteMatch, } from 'react-router-dom'; import { Column } from 'react-table'; -import styled, { useTheme } from 'styled-components'; +import { useTheme } from 'styled-components'; import { useIAMClient } from '../IAMProvider'; import { getUserAccessKeysQuery } from '../queries'; import { BreadcrumbAccount } from '../ui-elements/Breadcrumb'; @@ -34,15 +34,6 @@ import { import AccountUserSecretKeyModal from './AccountUserSecretKeyModal'; import { TableHeaderWrapper } from '../ui-elements/Table'; -const CustomIcon = styled.i` - color: ${(props) => props.theme.textSecondary}; - font-size: 32px; - cursor: pointer; - :hover { - color: ${(props) => props.theme.textPrimary}; - } -`; - const CreatedOnCell = (rowValue) => { const outdatedAlert = useAccessKeyOutdatedStatus(rowValue); return ( @@ -286,8 +277,10 @@ const AccountUserAccessKeys = () => { <> - { history.push('../'); }} diff --git a/src/react/databrowser/buckets/ObjectLockSetting.tsx b/src/react/databrowser/buckets/ObjectLockSetting.tsx index 851651fe3..7411ad21f 100644 --- a/src/react/databrowser/buckets/ObjectLockSetting.tsx +++ b/src/react/databrowser/buckets/ObjectLockSetting.tsx @@ -133,7 +133,7 @@ export default function ObjectLockSetting() { type="submit" variant="primary" label="Save" - icon={} + icon={} /> } diff --git a/src/react/databrowser/objects/MetadataSearch.tsx b/src/react/databrowser/objects/MetadataSearch.tsx index 00d0981da..e506f01d5 100644 --- a/src/react/databrowser/objects/MetadataSearch.tsx +++ b/src/react/databrowser/objects/MetadataSearch.tsx @@ -1,20 +1,21 @@ import { useRef, useState } from 'react'; import { useHistory, useLocation } from 'react-router-dom'; +import styled from 'styled-components'; import { Hint, Hints, HintsTitle } from '../../ui-elements/Input'; import { SearchButton, - SearchInputIcon, SearchMetadataContainer, - SearchMetadataInput, SearchMetadataInputAndIcon, SearchValidationIcon, } from '../../ui-elements/Table'; import { useOutsideClick, - useQueryParams, usePrefixWithSlash, + useQueryParams, } from '../../utils/hooks'; +import { Icon, spacing } from '@scality/core-ui'; +import { Input } from '@scality/core-ui/dist/next'; export const METADATA_SEARCH_HINT_ITEMS = [ { @@ -50,6 +51,19 @@ export const METADATA_SEARCH_HINT_ITEMS = [ q: 'replication-status="PENDING"', }, ]; + +const SearchMetadataInputContainer = styled.div` + width: 100%; + > div { + width: 100%; + } +`; +const SearchMetadataInput = styled(Input)` + background-color: ${(props) => props.theme.backgroundLevel1}; + padding: 0px ${spacing.r32}; + max-height: ${spacing.r32}; + box-sizing: border-box; +`; type Props = { isMetadataType: boolean; errorZenkoMsg: string | null | undefined; @@ -110,6 +124,8 @@ const MetadataSearch = ({ isMetadataType, errorZenkoMsg }: Props) => { setHintsShown(true); }; + const isHidden = !isMetadataType && !errorZenkoMsg; + return ( { isMetadataType={isMetadataType} isError={!!errorZenkoMsg} /> - - + + + + {hintsShown && !inputText && ( diff --git a/src/react/databrowser/objects/ObjectListTable.tsx b/src/react/databrowser/objects/ObjectListTable.tsx index 47936ff49..72b7ab338 100644 --- a/src/react/databrowser/objects/ObjectListTable.tsx +++ b/src/react/databrowser/objects/ObjectListTable.tsx @@ -5,10 +5,9 @@ import { AutoSizer } from 'react-virtualized'; import { FixedSizeList } from 'react-window'; import InfiniteLoader from 'react-window-infinite-loader'; import { List } from 'immutable'; -import { FormattedDateTime, PrettyBytes, Text } from '@scality/core-ui'; +import { FormattedDateTime, Icon, PrettyBytes, Text } from '@scality/core-ui'; import { convertRemToPixels } from '@scality/core-ui/dist/utils'; import { spacing } from '@scality/core-ui'; -import styled from 'styled-components'; import { useHistory, useParams } from 'react-router-dom'; import { useQuery } from 'react-query'; @@ -34,10 +33,6 @@ import { useAccountsLocationsAndEndpoints } from '../../next-architecture/domain import { useAccountsLocationsEndpointsAdapter } from '../../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider'; import { EmptyCell } from '@scality/core-ui/dist/components/tablev2/Tablev2.component'; -export const Icon = styled.i<{ isMargin?: boolean }>` - margin-right: ${spacing.r4}; - margin-left: ${(props) => (props.isMargin ? spacing.r16 : '0px')}; -`; type CellProps = { row: { original: ObjectEntity; @@ -195,7 +190,7 @@ export default function ObjectListTable({ if (original.isFolder) { return ( - + @@ -205,14 +200,16 @@ export default function ObjectListTable({ ); } + const iconStyle = { + marginRight: spacing.r4, + marginLeft: !original.isLatest ? spacing.r16 : 0, + }; + if (original.isDeleteMarker) { return ( {' '} - + {original.name} ); @@ -220,19 +217,14 @@ export default function ObjectListTable({ return ( - + {original.lockStatus === 'LOCKED' && ( - + )} {original.lockStatus === 'RELEASED' && ( - - )} - {original.isLegalHoldEnabled && ( - + )} + {original.isLegalHoldEnabled && } {isObjectInColdStorage && (headObjectStatus === 'idle' || headObjectStatus === 'loading' || diff --git a/src/react/locations/LocationDetails/LocationDetails.tsx b/src/react/locations/LocationDetails/LocationDetails.tsx index b67a58478..f90ad3fb2 100644 --- a/src/react/locations/LocationDetails/LocationDetails.tsx +++ b/src/react/locations/LocationDetails/LocationDetails.tsx @@ -4,7 +4,7 @@ import { LocationTypeKey, } from '../../../types/config'; import React from 'react'; -import { Tooltip } from '@scality/core-ui'; +import { Tooltip, Icon } from '@scality/core-ui'; import { storageOptions } from './storageOptions'; type Props = { @@ -66,7 +66,7 @@ export default class LocationDetails extends React.Component { } else if (this.props.repStatus === 'disabled') { msg = (
- + Your instance failed to automatically resume this location. Please resume manually. diff --git a/src/react/ui-elements/Table.tsx b/src/react/ui-elements/Table.tsx index df8bf5ba7..6da3da2ef 100644 --- a/src/react/ui-elements/Table.tsx +++ b/src/react/ui-elements/Table.tsx @@ -1,6 +1,6 @@ import { fontSize } from '@scality/core-ui/dist/style/theme'; -import { spacing, SecondaryText, Wrap } from '@scality/core-ui'; +import { spacing, SecondaryText, Wrap, Icon } from '@scality/core-ui'; import { Box, Button, Input } from '@scality/core-ui/dist/next'; import { Link } from 'react-router-dom'; @@ -68,9 +68,7 @@ export const HeadCell = styled.th` text-align: left; padding: ${spacing.r16}; `; -export const Icon = styled.i` - margin-left: ${spacing.r4}; -`; + // * table body export const Body = styled.tbody` // following is needed to display scroll bar onto the table @@ -192,46 +190,30 @@ const Table = styled.table` border-collapse: collapse; `; // specific to listobject/md search -export const SearchMetadataInput = styled(Input)` - background-color: ${(props) => props.theme.backgroundLevel1}; - padding: 0px ${spacing.r32}; - max-height: ${spacing.r32}; - box-sizing: border-box; -`; export const ContainerWithSubHeader = styled(Container)` height: 100%; margin-top: 0px; `; -export const SearchInputIcon = styled.i<{ isHidden?: boolean }>` - position: absolute; - visibility: ${(props) => (props.isHidden ? 'hidden' : 'visible')}; - right: 10px; - cursor: pointer; - &:hover { - color: ${(props) => props.theme.infoPrimary}; - } -`; -const ValidationIcon = styled.i` - position: absolute; - left: 10px; - color: ${(props) => - props.className === 'fa fa-times' - ? props.theme.statusCritical - : props.className === 'fas fa-check' - ? props.theme.statusHealthy - : props.theme.infoSecondary}; -`; + type Props = { isMetadataType: boolean; isError: boolean; }; export const SearchValidationIcon = ({ isMetadataType, isError }: Props) => { - const className = isError - ? 'fa fa-times' - : isMetadataType - ? 'fas fa-check' - : 'fas fa-search'; - return ; + const style = { + position: 'absolute' as const, + left: '10px', + marginLeft: `${spacing.r4}`, + }; + if (isError) { + return ; + } + + if (isMetadataType) { + return ; + } + + return ; }; export const SearchButton = styled(Button)` flex: 0 0 auto; From fc17b008fb756cb46442b4d91411d51f6c47aa52 Mon Sep 17 00:00:00 2001 From: Patrick Ear Date: Tue, 17 Sep 2024 15:19:30 +0200 Subject: [PATCH 2/3] update core-ui --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index ba3c0ccfe..194e2de13 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.138.0", + "@scality/core-ui": "^0.141.0", "@scality/module-federation": "^1.3.2", "@types/react-table": "^7.7.10", "@types/react-virtualized": "^9.21.20", @@ -4183,9 +4183,9 @@ } }, "node_modules/@scality/core-ui": { - "version": "0.138.0", - "resolved": "https://registry.npmjs.org/@scality/core-ui/-/core-ui-0.138.0.tgz", - "integrity": "sha512-kjhLrmsd2jI+15FfaWRj0J01k7ZzfB8mMeAJKzQC1bM8Lm96s/vSY599MGCnDw5MKinzUjLuQ5svjKm5nXrdxg==", + "version": "0.141.0", + "resolved": "https://registry.npmjs.org/@scality/core-ui/-/core-ui-0.141.0.tgz", + "integrity": "sha512-wbWla/v+A4ApEn+UvjlAN/Ep8NCls+Ow1CDuY9Jun4v45a2LcxGtcUi+8kusbd1gvLJZHO0LXS7SosEaWQc44A==", "dependencies": { "@floating-ui/dom": "^1.6.3", "@fortawesome/fontawesome-free": "^5.10.2", @@ -21223,9 +21223,9 @@ } }, "@scality/core-ui": { - "version": "0.138.0", - "resolved": "https://registry.npmjs.org/@scality/core-ui/-/core-ui-0.138.0.tgz", - "integrity": "sha512-kjhLrmsd2jI+15FfaWRj0J01k7ZzfB8mMeAJKzQC1bM8Lm96s/vSY599MGCnDw5MKinzUjLuQ5svjKm5nXrdxg==", + "version": "0.141.0", + "resolved": "https://registry.npmjs.org/@scality/core-ui/-/core-ui-0.141.0.tgz", + "integrity": "sha512-wbWla/v+A4ApEn+UvjlAN/Ep8NCls+Ow1CDuY9Jun4v45a2LcxGtcUi+8kusbd1gvLJZHO0LXS7SosEaWQc44A==", "requires": { "@floating-ui/dom": "^1.6.3", "@fortawesome/fontawesome-free": "^5.10.2", diff --git a/package.json b/package.json index ce578ec4e..3837c615b 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "@hapi/joi-date": "^2.0.1", "@hookform/resolvers": "^2.8.8", "@monaco-editor/react": "^4.4.5", - "@scality/core-ui": "^0.138.0", + "@scality/core-ui": "^0.141.0", "@scality/module-federation": "^1.3.2", "@types/react-table": "^7.7.10", "@types/react-virtualized": "^9.21.20", From 740f9945759f5d8fe28fa70ddfafcc1c451407f8 Mon Sep 17 00:00:00 2001 From: Patrick Ear Date: Wed, 18 Sep 2024 16:47:40 +0200 Subject: [PATCH 3/3] ARTESCA-13460 - fix error when create ring location --- src/react/locations/LocationEditor.tsx | 2 +- .../__tests__/LocationEditor.test.tsx | 126 +++++++++++++++++- src/react/utils/storageOptions.ts | 2 +- tsconfig.json | 2 +- 4 files changed, 127 insertions(+), 5 deletions(-) diff --git a/src/react/locations/LocationEditor.tsx b/src/react/locations/LocationEditor.tsx index 1dbcb614d..cdd221a65 100644 --- a/src/react/locations/LocationEditor.tsx +++ b/src/react/locations/LocationEditor.tsx @@ -357,7 +357,7 @@ function LocationEditor() { content={