From ede2a283bece0b4e1810c1c4e25758e0d58302cb Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Fri, 15 Dec 2023 17:17:11 +0100 Subject: [PATCH 01/10] delete brand, remove theme from redux --- package-lock.json | 10 +++---- package.json | 2 +- src/react/ZenkoUI.tsx | 8 +---- src/react/account/AccountDetails.tsx | 8 ++--- src/react/account/AccountUserAccessKeys.tsx | 2 +- .../AttachmentConfirmationModal.tsx | 2 +- .../account/iamAttachment/AttachmentTable.tsx | 14 ++++----- .../account/iamAttachment/AttachmentTabs.tsx | 2 +- .../account/iamAttachment/Attachments.tsx | 4 +-- src/react/actions/__tests__/auth.test.ts | 6 ---- .../__tests__/utils/dispatchActionsList.ts | 6 ---- src/react/actions/auth.ts | 9 +----- .../databrowser/objects/ObjectDelete.tsx | 16 +++------- .../databrowser/objects/ObjectUpload.tsx | 2 +- .../ObjectRestorationButtonAndModal.tsx | 4 +-- src/react/reducers/index.ts | 2 -- src/react/reducers/initialConstants.ts | 1 - src/react/reducers/uiConfig.ts | 15 ---------- src/react/ui-elements/Activity.tsx | 6 ++-- src/react/ui-elements/Breadcrumb.tsx | 2 +- src/react/ui-elements/Container.ts | 4 +-- src/react/ui-elements/EditableKeyValue.tsx | 2 +- src/react/ui-elements/EntityHeader.tsx | 8 ++--- src/react/ui-elements/FormContainer.ts | 2 +- src/react/ui-elements/FormLayout.tsx | 16 +++++----- src/react/ui-elements/Hide.tsx | 2 +- src/react/ui-elements/Input.ts | 14 ++++----- src/react/ui-elements/NameLink.tsx | 6 ++-- src/react/ui-elements/Table.tsx | 30 +++++++++---------- src/react/ui-elements/TableKeyValue.ts | 2 +- src/react/ui-elements/TableKeyValue2.tsx | 4 +-- src/react/ui-elements/Veeam/VeeamSummary.tsx | 2 +- src/react/ui-elements/Warning.tsx | 4 +-- src/react/workflow/TransitionForm.tsx | 2 +- src/react/workflow/WorkflowList.tsx | 2 +- src/types/actions.ts | 5 ---- src/types/state.ts | 1 - 37 files changed, 83 insertions(+), 144 deletions(-) delete mode 100644 src/react/reducers/uiConfig.ts diff --git a/package-lock.json b/package-lock.json index 55518f967..44828a30a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "@hookform/resolvers": "^2.8.8", "@js-temporal/polyfill": "^0.4.3", "@monaco-editor/react": "^4.4.5", - "@scality/core-ui": "github:scality/core-ui#0.109.0", + "@scality/core-ui": "github:scality/core-ui#improvement/remove-defaultTheme-usage", "@scality/module-federation": "github:scality/module-federation#1.1.0", "@types/react-table": "^7.7.10", "@types/react-virtualized": "^9.21.20", @@ -3122,8 +3122,8 @@ "dev": true }, "node_modules/@scality/core-ui": { - "version": "0.109.0", - "resolved": "git+ssh://git@github.com/scality/core-ui.git#819abbd38ecbc0cb289ee4062dc06568ce6cae87", + "version": "0.107.0", + "resolved": "git+ssh://git@github.com/scality/core-ui.git#875eecfc5e8edeef90b01ebd3973be509bf6ed3d", "license": "SEE LICENSE IN LICENSE", "dependencies": { "@floating-ui/dom": "^0.1.10", @@ -23664,8 +23664,8 @@ "dev": true }, "@scality/core-ui": { - "version": "git+ssh://git@github.com/scality/core-ui.git#819abbd38ecbc0cb289ee4062dc06568ce6cae87", - "from": "@scality/core-ui@github:scality/core-ui#0.109.0", + "version": "git+ssh://git@github.com/scality/core-ui.git#875eecfc5e8edeef90b01ebd3973be509bf6ed3d", + "from": "@scality/core-ui@github:scality/core-ui#improvement/remove-defaultTheme-usage", "requires": { "@floating-ui/dom": "^0.1.10", "@storybook/preview-api": "^7.5.3", diff --git a/package.json b/package.json index bdcb72c07..c053e3920 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ "@hookform/resolvers": "^2.8.8", "@js-temporal/polyfill": "^0.4.3", "@monaco-editor/react": "^4.4.5", - "@scality/core-ui": "github:scality/core-ui#0.109.0", + "@scality/core-ui": "github:scality/core-ui#improvement/remove-defaultTheme-usage", "@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/ZenkoUI.tsx b/src/react/ZenkoUI.tsx index c4a8fd8ab..3a4805bdb 100644 --- a/src/react/ZenkoUI.tsx +++ b/src/react/ZenkoUI.tsx @@ -7,7 +7,6 @@ import { Banner, Icon, ScrollbarWrapper } from '@scality/core-ui'; import ErrorHandlerModal from './ui-elements/ErrorHandlerModal'; import Loader from './ui-elements/Loader'; import Routes from './Routes'; -import { ThemeProvider } from 'styled-components'; import { loadAppConfig } from './actions'; import { useConfig } from './next-architecture/ui/ConfigProvider'; import { useAuth } from './next-architecture/ui/AuthProvider'; @@ -22,7 +21,6 @@ function ZenkoUI() { const configFailureErrorMessage = useSelector((state: AppState) => state.uiErrors.errorType === 'byComponent' ? state.uiErrors.errorMsg : '', ); - const theme = useSelector((state: AppState) => state.uiConfig.theme); const dispatch = useDispatch(); const conf = useConfig(); const user = useAuth(); @@ -58,11 +56,7 @@ function ZenkoUI() { return Login in ; } - return ( - - {content()} - - ); + return {content()}; } export default ZenkoUI; diff --git a/src/react/account/AccountDetails.tsx b/src/react/account/AccountDetails.tsx index 8604c4c4d..5816b2728 100644 --- a/src/react/account/AccountDetails.tsx +++ b/src/react/account/AccountDetails.tsx @@ -29,16 +29,16 @@ function AccountDetails({ account }: Props) { } const customTabStyle = { - inactiveTabColor: theme.brand.backgroundLevel2, - activeTabColor: theme.brand.backgroundLevel3, - tabContentColor: theme.brand.backgroundLevel3, + inactiveTabColor: theme.backgroundLevel2, + activeTabColor: theme.backgroundLevel3, + tabContentColor: theme.backgroundLevel3, }; return ( diff --git a/src/react/account/AccountUserAccessKeys.tsx b/src/react/account/AccountUserAccessKeys.tsx index 7186d8689..d2b04f96c 100644 --- a/src/react/account/AccountUserAccessKeys.tsx +++ b/src/react/account/AccountUserAccessKeys.tsx @@ -27,7 +27,7 @@ import DeleteConfirmation from '../ui-elements/DeleteConfirmation'; import { getUserAccessKeysQuery } from '../queries'; const CustomIcon = styled.i` - color: ${(props) => props.color ?? props.theme.brand.infoPrimary}; + color: ${(props) => props.color ?? props.theme.infoPrimary}; font-size: 32px; `; diff --git a/src/react/account/iamAttachment/AttachmentConfirmationModal.tsx b/src/react/account/iamAttachment/AttachmentConfirmationModal.tsx index 27b867ad2..7849a38f5 100644 --- a/src/react/account/iamAttachment/AttachmentConfirmationModal.tsx +++ b/src/react/account/iamAttachment/AttachmentConfirmationModal.tsx @@ -254,7 +254,7 @@ function AttachmentConfirmationModal({ Attach ) : ( - + Detach ); diff --git a/src/react/account/iamAttachment/AttachmentTable.tsx b/src/react/account/iamAttachment/AttachmentTable.tsx index c8fbdc9ce..6647178f7 100644 --- a/src/react/account/iamAttachment/AttachmentTable.tsx +++ b/src/react/account/iamAttachment/AttachmentTable.tsx @@ -52,7 +52,7 @@ const MenuContainer = styled.ul<{ isOpen: boolean; searchInputIsFocused: boolean; }>` - background-color: ${(props) => props.theme.brand.backgroundLevel1}; + background-color: ${(props) => props.theme.backgroundLevel1}; background-clip: content-box; padding: 0; list-style: none; @@ -70,18 +70,18 @@ const MenuContainer = styled.ul<{ border-top-right-radius: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; - border: 1px solid ${props.theme.brand.selectedActive}; + border: 1px solid ${props.theme.selectedActive}; ` : props.searchInputIsFocused - ? `border-bottom: 1px solid ${props.theme.brand.selectedActive};` + ? `border-bottom: 1px solid ${props.theme.selectedActive};` : ''} border-top: 0; li { padding: ${spacing.sp8}; cursor: pointer; - border-top: 1px solid ${(props) => props.theme.brand.backgroundLevel2}; + border-top: 1px solid ${(props) => props.theme.backgroundLevel2}; &[aria-selected='true'] { - background: ${(props) => props.theme.brand.highlight}; + background: ${(props) => props.theme.highlight}; } } `; @@ -107,12 +107,12 @@ const StyledSearchInput = styled(SearchInput)` const AttachmentTableContainer = styled.div` height: 80%; - background: ${(props) => props.theme.brand.backgroundLevel3}; + background: ${(props) => props.theme.backgroundLevel3}; padding: ${spacing.sp24}; `; const StyledTable = styled.div` - background: ${(props) => props.theme.brand.backgroundLevel4}; + background: ${(props) => props.theme.backgroundLevel4}; height: 100%; `; diff --git a/src/react/account/iamAttachment/AttachmentTabs.tsx b/src/react/account/iamAttachment/AttachmentTabs.tsx index 04ce33b03..afd7fd5f2 100644 --- a/src/react/account/iamAttachment/AttachmentTabs.tsx +++ b/src/react/account/iamAttachment/AttachmentTabs.tsx @@ -131,7 +131,7 @@ const AttachmentTabs = ({ }, { user: [], role: [], policy: [], group: [] }, ); - const { backgroundLevel3, backgroundLevel4 } = theme.brand; + const { backgroundLevel3, backgroundLevel4 } = theme; const customTabStyle = { inactiveTabColor: backgroundLevel4, activeTabColor: backgroundLevel3, diff --git a/src/react/account/iamAttachment/Attachments.tsx b/src/react/account/iamAttachment/Attachments.tsx index 8b3ece257..723241f70 100644 --- a/src/react/account/iamAttachment/Attachments.tsx +++ b/src/react/account/iamAttachment/Attachments.tsx @@ -18,7 +18,7 @@ const AttachmentContainer = styled.div` `; const AttachmentFooterContainer = styled.div` - border-top: 1px solid ${(props) => props.theme.brand.backgroundLevel2}; + border-top: 1px solid ${(props) => props.theme.backgroundLevel2}; margin-top: 3%; padding-top: 1%; padding-left: 1%; @@ -36,7 +36,7 @@ const TitleBlock = styled(LargerText)` padding: 1rem 0; margin-bottom: 1rem; gap: 2rem; - border-bottom: 1px solid ${(props) => props.theme.brand.backgroundLevel2}; + border-bottom: 1px solid ${(props) => props.theme.backgroundLevel2}; `; const DescriptiveBlock = styled(BasicText)` diff --git a/src/react/actions/__tests__/auth.test.ts b/src/react/actions/__tests__/auth.test.ts index 5b2cd1b74..5078fa4bf 100644 --- a/src/react/actions/__tests__/auth.test.ts +++ b/src/react/actions/__tests__/auth.test.ts @@ -4,7 +4,6 @@ import { APP_CONFIG, INSTANCE_ID, LOGOUT_MOCK, - THEME, initState, testActionFunction, testDispatchFunction, @@ -50,11 +49,6 @@ describe.skip('auth actions', () => { fn: actions.configAuthFailure(), expectedActions: [dispatchAction.CONFIG_AUTH_FAILURE_ACTION], }, - { - it: 'should return SET_THEME action', - fn: actions.setTheme(THEME), - expectedActions: [dispatchAction.SET_THEME_ACTION], - }, { it: 'should return SET_OIDC_LOGOUT action', fn: actions.setOIDCLogout(LOGOUT_MOCK), diff --git a/src/react/actions/__tests__/utils/dispatchActionsList.ts b/src/react/actions/__tests__/utils/dispatchActionsList.ts index 1a0640712..49ae0768d 100644 --- a/src/react/actions/__tests__/utils/dispatchActionsList.ts +++ b/src/react/actions/__tests__/utils/dispatchActionsList.ts @@ -35,7 +35,6 @@ import type { SetManagementClientAction, SetOIDCLogoutAction, SetSTSClientAction, - SetThemeAction, SetZenkoClientAction, ToggleAllObjectsAction, ToggleObjectAction, @@ -68,7 +67,6 @@ import { INSTANCE_STATUS_RUNNINGv2, LATEST_OVERLAY, LOGOUT_MOCK, - THEME, } from './testUtil'; // auth actions export const SET_MANAGEMENT_CLIENT_ACTION: SetManagementClientAction = { @@ -108,10 +106,6 @@ export const SELECT_ACCOUNT_ACTION: SelectAccountAction = { type: 'SELECT_ACCOUNT', account: ACCOUNT, }; -export const SET_THEME_ACTION: SetThemeAction = { - type: 'SET_THEME', - theme: THEME, -}; export const SET_OIDC_LOGOUT_ACTION: SetOIDCLogoutAction = { type: 'SET_OIDC_LOGOUT', logout: LOGOUT_MOCK, diff --git a/src/react/actions/auth.ts b/src/react/actions/auth.ts index cb9f3761c..367f8bbe7 100644 --- a/src/react/actions/auth.ts +++ b/src/react/actions/auth.ts @@ -9,12 +9,11 @@ import type { SetManagementClientAction, SetOIDCLogoutAction, SetSTSClientAction, - SetThemeAction, ThunkNonStateAction, ThunkStatePromisedAction, } from '../../types/actions'; import type { OidcLogoutFunction } from '../../types/auth'; -import type { AppConfig, InstanceId, Theme } from '../../types/entities'; +import type { AppConfig, InstanceId } from '../../types/entities'; import type { ManagementClient as ManagementClientInterface } from '../../types/managementClient'; import type { STSClient as STSClientInterface } from '../../types/sts'; import { @@ -73,12 +72,6 @@ export function configAuthFailure(): ConfigAuthFailureAction { type: 'CONFIG_AUTH_FAILURE', }; } -export function setTheme(theme: Theme): SetThemeAction { - return { - type: 'SET_THEME', - theme, - }; -} export function loadAppConfig(config: AppConfig, user): ThunkNonStateAction { return (dispatch) => { dispatch(addOIDCUser(user.original)); diff --git a/src/react/databrowser/objects/ObjectDelete.tsx b/src/react/databrowser/objects/ObjectDelete.tsx index 903071fd3..de3033fa0 100644 --- a/src/react/databrowser/objects/ObjectDelete.tsx +++ b/src/react/databrowser/objects/ObjectDelete.tsx @@ -35,7 +35,7 @@ const Files = styled.div` width: 31.25rem; overflow-y: scroll; margin: ${spacing.sp8} 0rem; - border: ${spacing.sp1} solid ${(props) => props.theme.brand.border}; + border: ${spacing.sp1} solid ${(props) => props.theme.border}; `; const VersionId = styled.div` font-size: ${fontSize.small}; @@ -323,11 +323,7 @@ const ObjectDelete = ({ bucketName, toggled, prefixWithSlash }: Props) => { if (s3Object.lockStatus === 'LOCKED' && s3Object.versionId) { if (s3Object.objectRetention?.mode === 'COMPLIANCE') { return ( - + Protected (compliance), won't be deleted @@ -335,11 +331,7 @@ const ObjectDelete = ({ bucketName, toggled, prefixWithSlash }: Props) => { } if (s3Object.objectRetention?.mode === 'GOVERNANCE') { return ( - + Protected (governance), will be deleted @@ -348,7 +340,7 @@ const ObjectDelete = ({ bucketName, toggled, prefixWithSlash }: Props) => { } if (s3Object.isLegalHoldEnabled && s3Object.versionId) { return ( - + Protected (legal hold), won't be deleted diff --git a/src/react/databrowser/objects/ObjectUpload.tsx b/src/react/databrowser/objects/ObjectUpload.tsx index 90bdba871..fabbddc70 100644 --- a/src/react/databrowser/objects/ObjectUpload.tsx +++ b/src/react/databrowser/objects/ObjectUpload.tsx @@ -24,7 +24,7 @@ const DropZone = styled.div` padding: ${spacing.sp20}; border-width: ${spacing.sp2}; border-radius: ${spacing.sp2}; - border-color: ${(props) => props.theme.brand.border}; + border-color: ${(props) => props.theme.border}; border-style: dashed; `; const RemoveCell = styled(T.Cell)` diff --git a/src/react/databrowser/objects/details/ObjectRestorationButtonAndModal.tsx b/src/react/databrowser/objects/details/ObjectRestorationButtonAndModal.tsx index 07af9461d..93aa453a3 100644 --- a/src/react/databrowser/objects/details/ObjectRestorationButtonAndModal.tsx +++ b/src/react/databrowser/objects/details/ObjectRestorationButtonAndModal.tsx @@ -39,7 +39,7 @@ const ObjectRestorationButtonAndModal = ({ return ( - + @@ -47,7 +47,7 @@ const ObjectRestorationButtonAndModal = ({ - +
Name Last Modified On Size
{objectMetadata.objectKey} {formatShortDate(new Date(objectMetadata.lastModified))} diff --git a/src/react/reducers/index.ts b/src/react/reducers/index.ts index a2b9d425d..10f10cbb3 100644 --- a/src/react/reducers/index.ts +++ b/src/react/reducers/index.ts @@ -12,7 +12,6 @@ import secrets from './secrets'; import stats from './stats'; import uiAccounts from './uiAccounts'; import uiBuckets from './uiBuckets'; -import uiConfig from './uiConfig'; import uiErrors from './uiErrors'; import uiLocations from './uiLocations'; import uiObjects from './uiObjects'; @@ -31,7 +30,6 @@ const zenkoUIReducer = () => networkActivity, uiAccounts, uiBuckets, - uiConfig, uiErrors, uiLocations, uiObjects, diff --git a/src/react/reducers/initialConstants.ts b/src/react/reducers/initialConstants.ts index 3575156ea..418f6b639 100644 --- a/src/react/reducers/initialConstants.ts +++ b/src/react/reducers/initialConstants.ts @@ -207,7 +207,6 @@ export const initialFullState = { secrets: initialSecretsState, stats: initialStatsState, uiAccounts: initialAccountsUIState, - uiConfig: initialConfigUIState, uiUser: initialUserUIState, uiLocations: initialLocationsUIState, uiObjects: initialObjectUIState, diff --git a/src/react/reducers/uiConfig.ts b/src/react/reducers/uiConfig.ts deleted file mode 100644 index eed6f27ed..000000000 --- a/src/react/reducers/uiConfig.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { ConfigUIState } from '../../types/state'; -import type { SetThemeAction } from '../../types/actions'; -import { initialConfigUIState } from './initialConstants'; -export default function uiConfig( - state: ConfigUIState = initialConfigUIState, - action: SetThemeAction, -) { - switch (action.type) { - case 'SET_THEME': - return { ...state, theme: action.theme }; - - default: - return state; - } -} \ No newline at end of file diff --git a/src/react/ui-elements/Activity.tsx b/src/react/ui-elements/Activity.tsx index df2ed3398..d65432053 100644 --- a/src/react/ui-elements/Activity.tsx +++ b/src/react/ui-elements/Activity.tsx @@ -12,7 +12,7 @@ const ActivityContainer = styled.div` right: 0px; padding: 1em; margin: 2em; - background-color: ${(props) => props.theme.brand.highlight}; + background-color: ${(props) => props.theme.highlight}; border-radius: ${spacing.sp8}; vertical-align: 50%; z-index: 1100; @@ -23,7 +23,7 @@ const ActivityContainer = styled.div` } svg { - fill: ${(props) => props.theme.brand.text}; + fill: ${(props) => props.theme.text}; } `; @@ -47,4 +47,4 @@ const Activity = () => { ); }; -export default Activity; \ No newline at end of file +export default Activity; diff --git a/src/react/ui-elements/Breadcrumb.tsx b/src/react/ui-elements/Breadcrumb.tsx index 78649ba37..1fd181184 100644 --- a/src/react/ui-elements/Breadcrumb.tsx +++ b/src/react/ui-elements/Breadcrumb.tsx @@ -20,7 +20,7 @@ export const CustomBreadCrumb = styled(CoreUIBreadcrumb)` text-decoration: none; overflow: visible; * { - color: ${(props) => props.theme.brand.textPrimary}; + color: ${(props) => props.theme.textPrimary}; } border-bottom: 0 !important; min-width: auto; diff --git a/src/react/ui-elements/Container.ts b/src/react/ui-elements/Container.ts index 164f1f89e..b0cb35636 100644 --- a/src/react/ui-elements/Container.ts +++ b/src/react/ui-elements/Container.ts @@ -8,7 +8,7 @@ const Container = styled.div` max-width: 600px; margin: ${spacing.sp8}; padding: ${spacing.sp20}; - background-color: ${(props) => props.theme.brand.backgroundLevel1}; + background-color: ${(props) => props.theme.backgroundLevel1}; `; const ContainerFooter = styled.div` display: flex; @@ -27,7 +27,7 @@ export const EmptyStateContainer = styled.div` flex: 1; flex-direction: column; width: 100%; - background: ${(props) => props.theme.brand.backgroundLevel1}; + background: ${(props) => props.theme.backgroundLevel1}; `; const NavbarContainer = styled.div` display: flex; diff --git a/src/react/ui-elements/EditableKeyValue.tsx b/src/react/ui-elements/EditableKeyValue.tsx index 82fcfa1e9..88ad57462 100644 --- a/src/react/ui-elements/EditableKeyValue.tsx +++ b/src/react/ui-elements/EditableKeyValue.tsx @@ -81,7 +81,7 @@ export const InputValue = styled(Input)<{ isShrink?: boolean }>` flex: 0 ${(props) => (props.isShrink ? '22%' : '39%')}; width: ${(props) => (props.isShrink ? '22%' : '39%')}; min-width: ${(props) => (props.isShrink ? '22%' : '39%')}; - background-color: ${(props) => props.theme.brand.backgroundLevel1}; + background-color: ${(props) => props.theme.backgroundLevel1}; `; export const InputTag = styled(Input)` flex: 1 40%; diff --git a/src/react/ui-elements/EntityHeader.tsx b/src/react/ui-elements/EntityHeader.tsx index ca7c2ae79..ea2837113 100644 --- a/src/react/ui-elements/EntityHeader.tsx +++ b/src/react/ui-elements/EntityHeader.tsx @@ -11,10 +11,10 @@ type Props = { export const HeadIcon = styled.i` display: flex; - color: ${(props) => props.theme.brand.infoPrimary}; - background-color: ${(props) => props.theme.brand.backgroundLevel1}; + color: ${(props) => props.theme.infoPrimary}; + background-color: ${(props) => props.theme.backgroundLevel1}; border-radius: 100%; - border: ${spacing.f1} solid ${(props) => props.theme.brand.infoPrimary}; + border: ${spacing.f1} solid ${(props) => props.theme.infoPrimary}; width: 80px; height: 80px; text-align: center; @@ -28,7 +28,7 @@ export const HeadIcon = styled.i` export const HeadTitle = styled.div` display: flex; - color: ${(props) => props.theme.brand.textSecondary}; + color: ${(props) => props.theme.textSecondary}; font-size: ${fontSize.large}; align-items: center; `; diff --git a/src/react/ui-elements/FormContainer.ts b/src/react/ui-elements/FormContainer.ts index 75337d56f..7573d50c5 100644 --- a/src/react/ui-elements/FormContainer.ts +++ b/src/react/ui-elements/FormContainer.ts @@ -8,7 +8,7 @@ const FormContainer = styled.form` max-width: 600px; margin: ${spacing.sp8}; padding: ${spacing.sp20}; - background-color: ${(props) => props.theme.brand.backgroundLevel4}; + background-color: ${(props) => props.theme.backgroundLevel4}; // TODO: fix inside core-ui .sc-select__single-value { diff --git a/src/react/ui-elements/FormLayout.tsx b/src/react/ui-elements/FormLayout.tsx index a665f7555..140eade6d 100644 --- a/src/react/ui-elements/FormLayout.tsx +++ b/src/react/ui-elements/FormLayout.tsx @@ -43,12 +43,12 @@ export const Title = styled(LargerText)` `; export const SubTitle = styled.div` display: flex; - color: ${(props) => props.theme.brand.textPrimary}; + color: ${(props) => props.theme.textPrimary}; font-weight: bold; `; export const SectionTitle = styled.div<{ fontSize?: string }>` display: flex; - color: ${(props) => props.theme.brand.textPrimary}; + color: ${(props) => props.theme.textPrimary}; font-size: ${(props) => props.fontSize || 'inherit'}; `; export const Fieldset = styled.fieldset<{ @@ -100,7 +100,7 @@ export const LargeCustomInput = styled(TextArea)` }} `; export const Hr = styled.hr` - border-color: ${(props) => props.theme.brand.buttonSecondary}; + border-color: ${(props) => props.theme.buttonSecondary}; height: 0.05rem; width: 40rem; margin-bottom: 1rem; @@ -113,19 +113,19 @@ export const SessionSeperation = styled.div` width: 23px; height: 1px; margin: ${spacing.sp16} 0px ${spacing.sp16} 0px; - background-color: ${(props) => props.theme.brand.buttonSecondary}; + background-color: ${(props) => props.theme.buttonSecondary}; `; export const LabelSecondary = styled(SmallerText)` - color: ${(props) => props.theme.brand.textSecondary}; + color: ${(props) => props.theme.textSecondary}; `; // * ErrorInput const ErrorInputContainer = styled.div` height: ${spacing.sp16}; - color: ${(props) => props.theme.brand.statusCritical}; + color: ${(props) => props.theme.statusCritical}; `; const WarningInputContainer = styled.div` height: ${spacing.sp16}; - color: ${(props) => props.theme.brand.statusWarning}; + color: ${(props) => props.theme.statusWarning}; `; type ErrorInputProps = { error?: React.ReactNode; @@ -229,7 +229,7 @@ export const FooterButtons = styled.div` export const Form = styled.form` display: flex; flex-direction: column; - background-color: ${(props) => props.theme.brand?.backgroundLevel1}; + background-color: ${(props) => props.theme?.backgroundLevel1}; padding-top: 1%; padding-left: 20%; padding-right: 20%; diff --git a/src/react/ui-elements/Hide.tsx b/src/react/ui-elements/Hide.tsx index c4458566a..cff70bd6a 100644 --- a/src/react/ui-elements/Hide.tsx +++ b/src/react/ui-elements/Hide.tsx @@ -10,7 +10,7 @@ const HideValue = styled.div<{ shown?: boolean }>` `; const HideAction = styled.div` margin-left: ${spacing.sp8}; - color: ${(props) => props.theme.brand.textLink}; + color: ${(props) => props.theme.textLink}; text-decoration: none; cursor: pointer; &:hover { diff --git a/src/react/ui-elements/Input.ts b/src/react/ui-elements/Input.ts index 0f843231a..c0c7de024 100644 --- a/src/react/ui-elements/Input.ts +++ b/src/react/ui-elements/Input.ts @@ -3,33 +3,33 @@ import styled from 'styled-components'; export const Hints = styled.div` position: absolute; z-index: 1; - background-color: ${(props) => props.theme.brand?.backgroundLevel1}; + background-color: ${(props) => props.theme?.backgroundLevel1}; margin-top: ${spacing.sp40}; padding: ${spacing.sp8}; `; export const HintsTitle = styled.div` font-style: italic; padding: ${spacing.sp2} 0px ${spacing.sp4} ${spacing.sp4}; - color: ${(props) => props.theme.brand.textSecondary}; + color: ${(props) => props.theme.textSecondary}; `; export const Hint = styled.div` padding: ${spacing.sp4}; cursor: pointer; &:hover { - background-color: ${(props) => props.theme.brand.secondaryDark1}; + background-color: ${(props) => props.theme.secondaryDark1}; } `; // make my own import due to some imput event target undefined issue const Input = styled.input<{ hasError?: boolean }>` display: flex; - background-color: ${(props) => props.theme.brand?.backgroundLevel1}; - color: ${(props) => props.theme.brand?.textPrimary}; + background-color: ${(props) => props.theme?.backgroundLevel1}; + color: ${(props) => props.theme?.textPrimary}; border-width: ${spacing.sp1}; border-style: solid; border-color: ${(props) => - props.hasError ? props.theme.brand.danger : props.theme.brand?.border}; + props.hasError ? props.theme.danger : props.theme?.border}; padding: 0px ${spacing.sp8}; font-size: ${fontSize.base}; border-radius: ${spacing.sp4}; @@ -44,7 +44,7 @@ const Input = styled.input<{ hasError?: boolean }>` :focus { outline: none; - border: ${spacing.sp1} solid ${(props) => props.theme.brand?.selectedActive}; + border: ${spacing.sp1} solid ${(props) => props.theme?.selectedActive}; } ${(props) => props.disabled && diff --git a/src/react/ui-elements/NameLink.tsx b/src/react/ui-elements/NameLink.tsx index fb8e7fdd6..cd6f8a896 100644 --- a/src/react/ui-elements/NameLink.tsx +++ b/src/react/ui-elements/NameLink.tsx @@ -1,4 +1,4 @@ -import { padding} from '@scality/core-ui/dist/style/theme'; +import { padding } from '@scality/core-ui/dist/style/theme'; import styled from 'styled-components'; export const NameLinkContaner = styled.div` @@ -8,5 +8,5 @@ export const NameLinkContaner = styled.div` text-decoration: underline; } padding-right: ${padding.small}; - color: ${(props) => props.theme.brand.textLink}; -`; \ No newline at end of file + color: ${(props) => props.theme.textLink}; +`; diff --git a/src/react/ui-elements/Table.tsx b/src/react/ui-elements/Table.tsx index d0766757d..e543e7fbd 100644 --- a/src/react/ui-elements/Table.tsx +++ b/src/react/ui-elements/Table.tsx @@ -40,8 +40,7 @@ export const Container = styled.div` `; // * table head export const Head = styled.thead` - border-bottom: ${spacing.sp1} solid - ${(props) => props.theme.brand.backgroundLevel1}; + border-bottom: ${spacing.sp1} solid ${(props) => props.theme.backgroundLevel1}; `; export const HeadRow = styled.tr` align-items: center; @@ -71,9 +70,9 @@ export const BodyWindowing = styled.tbody` export const Row = styled(HeadRow)` // it's better to use 1px instead of spacing.sp1, otherwise the border of some rows // can look different cause of subpixel positioning - border-bottom: 1px solid ${(props) => props.theme.brand.backgroundLevel1}; + border-bottom: 1px solid ${(props) => props.theme.backgroundLevel1}; &:hover { - background-color: ${(props) => props.theme.brand.secondaryDark1}; + background-color: ${(props) => props.theme.secondaryDark1}; } cursor: ${(props) => (props.onClick ? 'pointer' : 'default')}; box-sizing: border-box; @@ -82,35 +81,34 @@ export const Row = styled(HeadRow)` ${({ isSelected, theme }) => isSelected && ` - background-color: ${theme.brand.highlight}; - border-right: ${spacing.sp4} solid ${theme.brand.selectedActive}; + background-color: ${theme.highlight}; + border-right: ${spacing.sp4} solid ${theme.selectedActive}; `} `; export const Cell = styled.td<{ shade?: boolean }>` vertical-align: middle; - color: ${(props) => - props.shade ? props.theme.brand.base : props.theme.brand.text}; + color: ${(props) => (props.shade ? props.theme.base : props.theme.text)}; padding: ${spacing.sp4} ${spacing.sp16} ${spacing.sp4} ${spacing.sp16}; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; `; export const CellLink = styled(Link)` - color: ${(props) => props.theme.brand.textLink}; + color: ${(props) => props.theme.textLink}; text-decoration: none; &:hover { text-decoration: underline; } `; export const CellClick = styled.span` - color: ${(props) => props.theme.brand.textLink}; + color: ${(props) => props.theme.textLink}; text-decoration: none; &:hover { text-decoration: underline; } `; export const CellA = styled.a` - color: ${(props) => props.theme.brand.textLink}; + color: ${(props) => props.theme.textLink}; text-decoration: none; &:hover { text-decoration: underline; @@ -181,7 +179,7 @@ const Table = styled.table` `; // specific to listobject/md search export const SearchMetadataInput = styled(Input)` - background-color: ${(props) => props.theme.brand.backgroundLevel1}; + background-color: ${(props) => props.theme.backgroundLevel1}; padding: 0px ${spacing.sp32}; max-height: ${spacing.sp32}; box-sizing: border-box; @@ -196,7 +194,7 @@ export const SearchInputIcon = styled.i<{ isHidden?: boolean }>` right: 10px; cursor: pointer; &:hover { - color: ${(props) => props.theme.brand.base}; + color: ${(props) => props.theme.base}; } `; const ValidationIcon = styled.i` @@ -204,10 +202,10 @@ const ValidationIcon = styled.i` left: 10px; color: ${(props) => props.className === 'fa fa-times' - ? props.theme.brand.danger + ? props.theme.danger : props.className === 'fas fa-check' - ? props.theme.brand.success - : props.theme.brand.base}; + ? props.theme.success + : props.theme.base}; `; type Props = { isMetadataType: boolean; diff --git a/src/react/ui-elements/TableKeyValue.ts b/src/react/ui-elements/TableKeyValue.ts index f954942ac..a1c4ce763 100644 --- a/src/react/ui-elements/TableKeyValue.ts +++ b/src/react/ui-elements/TableKeyValue.ts @@ -20,7 +20,7 @@ export const Row = styled.tr``; export const Key = styled.td` white-space: nowrap; padding: ${spacing.sp8} 0px; - color: ${(props) => props.theme.brand.textSecondary}; + color: ${(props) => props.theme.textSecondary}; `; export const Value = styled.td` padding-left: 40px; diff --git a/src/react/ui-elements/TableKeyValue2.tsx b/src/react/ui-elements/TableKeyValue2.tsx index 267aa790e..e6298507f 100644 --- a/src/react/ui-elements/TableKeyValue2.tsx +++ b/src/react/ui-elements/TableKeyValue2.tsx @@ -81,9 +81,7 @@ export const Row = styled.div` `; const RawKey = styled.div<{ principal?: boolean; required?: boolean }>` color: ${(props) => - props.principal - ? props.theme.brand.textPrimary - : props.theme.brand?.textSecondary}; + props.principal ? props.theme.textPrimary : props.theme?.textSecondary}; font-weight: ${(props) => (props.principal ? 'bold' : 'normal')}; ${(props) => props.required diff --git a/src/react/ui-elements/Veeam/VeeamSummary.tsx b/src/react/ui-elements/Veeam/VeeamSummary.tsx index 5adbd01b2..ce751c523 100644 --- a/src/react/ui-elements/Veeam/VeeamSummary.tsx +++ b/src/react/ui-elements/Veeam/VeeamSummary.tsx @@ -43,7 +43,7 @@ const Level4FormSection = ({ title, }: Parameters[0]) => { const Container = styled.div` - background-color: ${(props) => props.theme.brand.backgroundLevel4}; + background-color: ${(props) => props.theme.backgroundLevel4}; padding: ${spacing.r16}; `; return ( diff --git a/src/react/ui-elements/Warning.tsx b/src/react/ui-elements/Warning.tsx index d1b9faf38..aa7f115fc 100644 --- a/src/react/ui-elements/Warning.tsx +++ b/src/react/ui-elements/Warning.tsx @@ -10,7 +10,7 @@ const Container = styled.div<{ centered?: boolean }>` flex-direction: column; text-align: center; margin-top: ${spacing.sp20}; - color: ${(props) => props.theme.brand.textPrimary}; + color: ${(props) => props.theme.textPrimary}; ${(props) => { if (props.centered) { return css` @@ -26,7 +26,7 @@ const Container = styled.div<{ centered?: boolean }>` const Container2 = styled.div` text-align: center; margin: ${spacing.sp32} 0px; - color: ${(props) => props.theme.brand.textPrimary}; + color: ${(props) => props.theme.textPrimary}; `; const Title = styled.div` margin-top: ${spacing.sp8}; diff --git a/src/react/workflow/TransitionForm.tsx b/src/react/workflow/TransitionForm.tsx index 62d6356f2..4d6e5b82c 100644 --- a/src/react/workflow/TransitionForm.tsx +++ b/src/react/workflow/TransitionForm.tsx @@ -275,7 +275,7 @@ export const TransitionForm = ({ prefix = '' }: Props) => { } /> diff --git a/src/types/actions.ts b/src/types/actions.ts index 2a13c8e6f..57d6fb3fa 100644 --- a/src/types/actions.ts +++ b/src/types/actions.ts @@ -76,10 +76,6 @@ export type SelectAccountAction = { readonly type: 'SELECT_ACCOUNT'; readonly account: Account; }; -export type SetThemeAction = { - readonly type: 'SET_THEME'; - readonly theme: Theme; -}; export type SetOIDCLogoutAction = { readonly type: 'SET_OIDC_LOGOUT'; readonly logout: OidcLogoutFunction | null; @@ -359,7 +355,6 @@ export type Action = | NetworkActivityAction | ConfigurationAction | AccountUIAction - | SetThemeAction | StatsAction | WorkflowUIAction | ZenkoAction; diff --git a/src/types/state.ts b/src/types/state.ts index 1b623dec8..ac0bab82c 100644 --- a/src/types/state.ts +++ b/src/types/state.ts @@ -134,7 +134,6 @@ export type AppState = { readonly uiEndpoints: EndpointsUIState; readonly uiAccounts: AccountsUIState; readonly uiBuckets: BucketsUIState; - readonly uiConfig: ConfigUIState; readonly uiObjects: ObjectsUIState; readonly stats: StatsState; readonly s3: S3State; From 9b00a626fdf8b39abfce8305a25746d884a5e8b2 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Fri, 15 Dec 2023 17:32:16 +0100 Subject: [PATCH 02/10] remove brand from test, remove brand types --- src/react/actions/__tests__/utils/testUtil.ts | 44 +---------- src/react/reducers/initialConstants.ts | 6 +- src/react/utils/testUtil.tsx | 64 +++------------ src/types/actions.ts | 2 +- src/types/entities.ts | 25 ------ src/types/state.ts | 5 +- src/types/styled.ts | 78 +------------------ 7 files changed, 15 insertions(+), 209 deletions(-) diff --git a/src/react/actions/__tests__/utils/testUtil.ts b/src/react/actions/__tests__/utils/testUtil.ts index 8bf8fc730..be464f5b2 100644 --- a/src/react/actions/__tests__/utils/testUtil.ts +++ b/src/react/actions/__tests__/utils/testUtil.ts @@ -123,49 +123,7 @@ export const INSTANCE_STATUS_RUNNINGv2 = { ...instanceStatus, state: { ...instanceStatus.state, runningConfigurationVersion: 2 }, }; -export const THEME = { - brand: { - statusHealthy: '#0AADA6', - statusWarning: '#F8F32B', - statusCritical: '#E84855', - selectedActive: '#037AFF', - highlight: '#1A3C75', - border: '#313131', - buttonPrimary: '#2F4185', - buttonSecondary: '#595A78', - buttonDelete: '#3D0808', - infoPrimary: '#8E8EAC', - infoSecondary: '#333366', - backgroundLevel1: '#121219', - backgroundLevel2: '#323245', - backgroundLevel3: '#232331', - backgroundLevel4: '#171721', - textPrimary: '#FFFFFF', - textSecondary: '#EAEAEA', - textTertiary: '#B5B5B5', - textReverse: '#000000', - textLink: '#71AEFF', - // degraded colors - alert: '#FFE508', - base: '#7B7B7B', - primary: '#1D1D1D', - primaryDark1: '#171717', - primaryDark2: '#0A0A0A', - secondary: '#0F7FFF', - secondaryDark1: '#1C3D59', - secondaryDark2: '#1C2E3F', - success: '#006F62', - healthy: '#30AC26', - healthyLight: '#69E44C', - warning: '#FFC10A', - danger: '#AA1D05', - critical: '#BE321F', - background: '#121212', - backgroundBluer: '#192A41', - borderLight: '#A5A5A5', - info: '#434343', - }, -}; + export function errorManagementState(): AppState { const state = initState; return { diff --git a/src/react/reducers/initialConstants.ts b/src/react/reducers/initialConstants.ts index 418f6b639..d0660fdc5 100644 --- a/src/react/reducers/initialConstants.ts +++ b/src/react/reducers/initialConstants.ts @@ -38,11 +38,7 @@ export const initialAuthState: AuthState = { config: { features: [] }, oidcLogout: null, }; -export const initialConfigUIState = { - theme: { - brand: defaultTheme.darkRebrand, - }, -}; + export const initialS3State: S3State = { listBucketsResults: { list: List(), diff --git a/src/react/utils/testUtil.tsx b/src/react/utils/testUtil.tsx index 99968b249..df07020ef 100644 --- a/src/react/utils/testUtil.tsx +++ b/src/react/utils/testUtil.tsx @@ -40,54 +40,8 @@ import { INSTANCE_ID } from '../actions/__tests__/utils/testUtil'; import { AccessibleAccountsAdapterProvider } from '../next-architecture/ui/AccessibleAccountsAdapterProvider'; import { AccountsLocationsEndpointsAdapterProvider } from '../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider'; import { ToastProvider } from '@scality/core-ui'; +import { coreUIAvailableThemes } from '@scality/core-ui/dist/style/theme'; -//LocationTestOK -export const theme = { - name: 'Dark Rebrand Theme', - statusHealthy: '#0AADA6', - statusWarning: '#F8F32B', - statusCritical: '#E84855', - selectedActive: '#037AFF', - highlight: '#1A3C75', - border: '#313131', - buttonPrimary: '#2F4185', - buttonSecondary: '#595A78', - buttonDelete: '#3D0808', - infoPrimary: '#8E8EAC', - infoSecondary: '#333366', - backgroundLevel1: '#121219', - backgroundLevel2: '#323245', - backgroundLevel3: '#232331', - backgroundLevel4: '#171721', - textPrimary: '#FFFFFF', - textSecondary: '#EAEAEA', - textTertiary: '#B5B5B5', - textReverse: '#000000', - textLink: '#71AEFF', - brand: { - // Dark Rebrand - statusHealthy: '#0AADA6', - statusWarning: '#F8F32B', - statusCritical: '#E84855', - selectedActive: '#037AFF', - highlight: '#1A3C75', - border: '#313131', - buttonPrimary: '#2F4185', - buttonSecondary: '#595A78', - buttonDelete: '#3D0808', - infoPrimary: '#8E8EAC', - infoSecondary: '#333366', - backgroundLevel1: '#121219', - backgroundLevel2: '#323245', - backgroundLevel3: '#232331', - backgroundLevel4: '#171721', - textPrimary: '#FFFFFF', - textSecondary: '#EAEAEA', - textTertiary: '#B5B5B5', - textReverse: '#000000', - textLink: '#71AEFF', - }, -}; export const history = createMemoryHistory(); export const configuration = { latest: { @@ -259,7 +213,7 @@ export const reduxMount = (component: React.ReactNode, testState?: any) => { const store = newTestStore(testState); return { component: mount( - + {component} @@ -320,7 +274,7 @@ export const reduxRender = (component: JSX.Element, testState?: unknown) => { return { component: render( - + <> @@ -353,7 +307,7 @@ export async function reduxMountAct(component, testState) { }) } > - + {component} @@ -365,7 +319,7 @@ export async function reduxMountAct(component, testState) { export const themeMount = (component: React.ReactNode) => { return mount( - {component} + {component} , ); }; @@ -422,7 +376,7 @@ export function testTableRow( export const simpleRender = (component: React.ReactNode) => { return render( - {component} + {component} , ); }; @@ -443,7 +397,7 @@ export function renderWithRouterMatch( return { ...render( - + @@ -504,7 +458,7 @@ export const renderWithCustomRoute = ( return { ...render( - + <_ConfigContext.Provider value={zenkoUITestConfig}> @@ -583,7 +537,7 @@ export const NewWrapper = return ( - + diff --git a/src/types/actions.ts b/src/types/actions.ts index 57d6fb3fa..81e231cc0 100644 --- a/src/types/actions.ts +++ b/src/types/actions.ts @@ -1,7 +1,7 @@ import type { AccessKey, Account, SecretKey } from './account'; import type { AuthUser, OidcLogoutFunction } from './auth'; import type { ConfigurationOverlay, Hostname } from './config'; -import type { AppConfig, InstanceId, Theme } from './entities'; +import type { AppConfig, InstanceId } from './entities'; import type { ManagementClient } from './managementClient'; import type { BucketInfo, diff --git a/src/types/entities.ts b/src/types/entities.ts index 63f8378d4..520c5fdad 100644 --- a/src/types/entities.ts +++ b/src/types/entities.ts @@ -12,28 +12,3 @@ export type AppConfig = { readonly basePath: string; readonly features: string[]; }; -export type Brand = { - statusHealthy: string; - statusWarning: string; - statusCritical: string; - selectedActive: string; - highlight: string; - border: string; - buttonPrimary: string; - buttonSecondary: string; - buttonDelete: string; - infoPrimary: string; - infoSecondary: string; - backgroundLevel1: string; - backgroundLevel2: string; - backgroundLevel3: string; - backgroundLevel4: string; - textPrimary: string; - textSecondary: string; - textTertiary: string; - textReverse: string; - textLink: string; -}; -export type Theme = { - brand: Brand; -}; diff --git a/src/types/state.ts b/src/types/state.ts index ac0bab82c..3f956cbb6 100644 --- a/src/types/state.ts +++ b/src/types/state.ts @@ -1,5 +1,5 @@ import type { Account, AccountKey } from './account'; -import type { AppConfig, InstanceId, Theme } from './entities'; +import type { AppConfig, InstanceId } from './entities'; import type { AuthUser, OidcLogoutFunction } from './auth'; import type { BucketInfo, @@ -80,9 +80,6 @@ export type LocationsUIState = { export type StatsState = { readonly bucketList: BucketList; }; -export type ConfigUIState = { - readonly theme: Theme; -}; export type S3State = { readonly listBucketsResults: { readonly list: S3BucketList; diff --git a/src/types/styled.ts b/src/types/styled.ts index b547116d7..1b0ee12eb 100644 --- a/src/types/styled.ts +++ b/src/types/styled.ts @@ -1,80 +1,6 @@ import 'styled-components'; +import { CoreUITheme } from '@scality/core-ui/dist/style/theme'; declare module 'styled-components' { - export interface DefaultTheme { - statusHealthy: string; - statusWarning: string; - statusCritical: string; - selectedActive: string; - highlight: string; - border: string; - buttonPrimary: string; - buttonSecondary: string; - buttonDelete: string; - infoPrimary: string; - infoSecondary: string; - backgroundLevel1: string; - backgroundLevel2: string; - backgroundLevel3: string; - backgroundLevel4: string; - textPrimary: string; - textSecondary: string; - textTertiary: string; - textReverse: string; - textLink: string; - space: string[]; - fontSizes: { - smaller: string; - small: string; - base: string; - large: string; - larger: string; - huge: string; - massive: string; - }; - colors: { - statusHealthy: string; - statusWarning: string; - statusCritical: string; - selectedActive: string; - highlight: string; - border: string; - buttonPrimary: string; - buttonSecondary: string; - buttonDelete: string; - infoPrimary: string; - infoSecondary: string; - backgroundLevel1: string; - backgroundLevel2: string; - backgroundLevel3: string; - backgroundLevel4: string; - textPrimary: string; - textSecondary: string; - textTertiary: string; - textReverse: string; - textLink: string; - }; - brand: { - statusHealthy: string; - statusWarning: string; - statusCritical: string; - selectedActive: string; - highlight: string; - border: string; - buttonPrimary: string; - buttonSecondary: string; - buttonDelete: string; - infoPrimary: string; - infoSecondary: string; - backgroundLevel1: string; - backgroundLevel2: string; - backgroundLevel3: string; - backgroundLevel4: string; - textPrimary: string; - textSecondary: string; - textTertiary: string; - textReverse: string; - textLink: string; - }; - } + export interface DefaultTheme extends CoreUITheme {} } From ef78f2bdc0b8dff684d8749b918c6fd1203b388c Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 19 Dec 2023 15:00:40 +0100 Subject: [PATCH 03/10] update core ui to 0.110.0 --- package-lock.json | 10 +++++----- package.json | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 44828a30a..dc3c77735 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "@hookform/resolvers": "^2.8.8", "@js-temporal/polyfill": "^0.4.3", "@monaco-editor/react": "^4.4.5", - "@scality/core-ui": "github:scality/core-ui#improvement/remove-defaultTheme-usage", + "@scality/core-ui": "github:scality/core-ui#0.110.0", "@scality/module-federation": "github:scality/module-federation#1.1.0", "@types/react-table": "^7.7.10", "@types/react-virtualized": "^9.21.20", @@ -3122,8 +3122,8 @@ "dev": true }, "node_modules/@scality/core-ui": { - "version": "0.107.0", - "resolved": "git+ssh://git@github.com/scality/core-ui.git#875eecfc5e8edeef90b01ebd3973be509bf6ed3d", + "version": "0.110.0", + "resolved": "git+ssh://git@github.com/scality/core-ui.git#0ec1e54c5d59edde5f7ec2110864a82e0da4d7a4", "license": "SEE LICENSE IN LICENSE", "dependencies": { "@floating-ui/dom": "^0.1.10", @@ -23664,8 +23664,8 @@ "dev": true }, "@scality/core-ui": { - "version": "git+ssh://git@github.com/scality/core-ui.git#875eecfc5e8edeef90b01ebd3973be509bf6ed3d", - "from": "@scality/core-ui@github:scality/core-ui#improvement/remove-defaultTheme-usage", + "version": "git+ssh://git@github.com/scality/core-ui.git#0ec1e54c5d59edde5f7ec2110864a82e0da4d7a4", + "from": "@scality/core-ui@github:scality/core-ui#0.110.0", "requires": { "@floating-ui/dom": "^0.1.10", "@storybook/preview-api": "^7.5.3", diff --git a/package.json b/package.json index c053e3920..7d498828a 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ "@hookform/resolvers": "^2.8.8", "@js-temporal/polyfill": "^0.4.3", "@monaco-editor/react": "^4.4.5", - "@scality/core-ui": "github:scality/core-ui#improvement/remove-defaultTheme-usage", + "@scality/core-ui": "github:scality/core-ui#0.110.0", "@scality/module-federation": "github:scality/module-federation#1.1.0", "@types/react-table": "^7.7.10", "@types/react-virtualized": "^9.21.20", From 32fad2dc04cfd3c52e87b0b9568c78c6509147cb Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 19 Dec 2023 15:01:33 +0100 Subject: [PATCH 04/10] delete import of defaultTheme --- src/react/account/AccountDetails.tsx | 4 ++-- src/react/reducers/initialConstants.ts | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/react/account/AccountDetails.tsx b/src/react/account/AccountDetails.tsx index 5816b2728..5112cdc50 100644 --- a/src/react/account/AccountDetails.tsx +++ b/src/react/account/AccountDetails.tsx @@ -1,4 +1,4 @@ -import { DefaultTheme, useTheme } from 'styled-components'; +import { useTheme } from 'styled-components'; import type { Account } from '../../types/account'; import { CustomTabs } from '../ui-elements/Tabs'; import Properties from './details/Properties'; @@ -20,7 +20,7 @@ const NotFound = () => ( ); function AccountDetails({ account }: Props) { - const theme: DefaultTheme = useTheme(); + const theme = useTheme(); const { accountName } = useParams<{ accountName: string }>(); const { isStorageManager } = useAuthGroups(); diff --git a/src/react/reducers/initialConstants.ts b/src/react/reducers/initialConstants.ts index d0660fdc5..f0bad2fe3 100644 --- a/src/react/reducers/initialConstants.ts +++ b/src/react/reducers/initialConstants.ts @@ -19,7 +19,6 @@ import { List } from 'immutable'; import { MockManagementClient } from '../../js/mock/managementClient'; import { MockSTSClient } from '../../js/mock/STSClient'; import { MockZenkoClient } from '../../js/mock/ZenkoClient'; -import { defaultTheme } from '@scality/core-ui/dist/style/theme'; export const initialAccountState: AccountState = { display: {}, From 945067c8e0e9bf796e114e598cccc716be91f16b Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 19 Dec 2023 17:13:39 +0100 Subject: [PATCH 05/10] remove getTheme, use new spacing change import --- src/react/ui-elements/FormLayout.tsx | 53 +++++++++++++++------------- 1 file changed, 28 insertions(+), 25 deletions(-) diff --git a/src/react/ui-elements/FormLayout.tsx b/src/react/ui-elements/FormLayout.tsx index 140eade6d..3abeb86ad 100644 --- a/src/react/ui-elements/FormLayout.tsx +++ b/src/react/ui-elements/FormLayout.tsx @@ -1,13 +1,16 @@ -import { Checkbox as BasicCheckbox, TextArea, Tooltip } from '@scality/core-ui'; +import { + Checkbox as BasicCheckbox, + TextArea, + Tooltip, + spacing, +} from '@scality/core-ui'; import { LargerText, SmallerText, } from '@scality/core-ui/dist/components/text/Text.component'; import { Select as BasicSelect } from '@scality/core-ui/dist/next'; -import { spacing } from '@scality/core-ui/dist/style/theme'; -import { getTheme } from '@scality/core-ui/dist/utils'; -import { HTMLAttributes, LabelHTMLAttributes } from 'react'; -import styled, { css } from 'styled-components'; +import { HTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react'; +import styled, { CSSProperties, css } from 'styled-components'; import { IconQuestionCircle } from './Icons'; import { default as BasicInput } from './Input'; import { default as BasicInputList } from './InputList'; @@ -39,7 +42,7 @@ import { default as BasicInputList } from './InputList'; export const Title = styled(LargerText)` display: flex; text-transform: capitalize; - margin-bottom: ${spacing.sp16}; + margin-bottom: ${spacing.r16}; `; export const SubTitle = styled.div` display: flex; @@ -60,34 +63,34 @@ export const Fieldset = styled.fieldset<{ ${(props) => (props.alignItems ? `align-items: ${props.alignItems};` : '')} border: 0; padding: 0; - margin-top: ${spacing.sp12}; + margin-top: ${spacing.r12}; `; export const Select = styled(BasicSelect)` - margin: ${spacing.sp8} 0px ${spacing.sp4} 0px; + margin: ${spacing.r8} 0px ${spacing.r4} 0px; `; export const CheckboxContainer = styled.div` display: block; - margin: ${spacing.sp8} 0px ${spacing.sp4} 0px; + margin: ${spacing.r8} 0px ${spacing.r4} 0px; align-items: baseline; .sc-checkbox { - margin-right: ${spacing.sp8}; + margin-right: ${spacing.r8}; } `; export const Checkbox = styled(BasicCheckbox)``; export const Input = styled(BasicInput)` - margin: ${spacing.sp8} 0px ${spacing.sp4} 0px; + margin: ${spacing.r8} 0px ${spacing.r4} 0px; `; export const LargeCustomInput = styled(TextArea)` display: inline; float: left; margin: 1rem 0.1rem 0.3rem 0rem; - padding: ${spacing.sp1}; + padding: ${spacing.r1}; border-radius: 4px; ${(props) => { const { border, textSecondary, backgroundLevel1, selectedActive } = - getTheme(props); + props.theme; return css` border-color: ${border}; color: ${textSecondary}; @@ -106,13 +109,13 @@ export const Hr = styled.hr` margin-bottom: 1rem; `; export const InputList = styled((props) => )` - margin: ${spacing.sp8} 0px ${spacing.sp4} 0px; + margin: ${spacing.r8} 0px ${spacing.r4} 0px; `; export const SessionSeperation = styled.div` width: 23px; height: 1px; - margin: ${spacing.sp16} 0px ${spacing.sp16} 0px; + margin: ${spacing.r16} 0px ${spacing.r16} 0px; background-color: ${(props) => props.theme.buttonSecondary}; `; export const LabelSecondary = styled(SmallerText)` @@ -120,11 +123,11 @@ export const LabelSecondary = styled(SmallerText)` `; // * ErrorInput const ErrorInputContainer = styled.div` - height: ${spacing.sp16}; + height: ${spacing.r16}; color: ${(props) => props.theme.statusCritical}; `; const WarningInputContainer = styled.div` - height: ${spacing.sp16}; + height: ${spacing.r16}; color: ${(props) => props.theme.statusWarning}; `; type ErrorInputProps = { @@ -156,16 +159,16 @@ const LabelContainer = styled.label<{ required?: boolean }>` `; const RequiredField = styled.span` - margin-left: ${spacing.sp2}; + margin-left: ${spacing.r2}; `; export const TooltipContainer = styled.div` - margin-left: ${spacing.sp8}; + margin-left: ${spacing.r8}; display: inline; `; const UlOverlay = styled.ul` text-align: left; - padding: 0px 0px 0px ${spacing.sp20}; + padding: 0px 0px 0px ${spacing.r20}; `; type LabelProps = { children: ReactNode; @@ -217,13 +220,13 @@ export const Footer = styled.div` export const FooterError = styled.div` flex: 1 1 auto; height: inherit; - margin-right: ${spacing.sp4}; + margin-right: ${spacing.r4}; `; export const FooterButtons = styled.div` flex: 0 0 auto; button { - margin-left: ${spacing.sp24}; + margin-left: ${spacing.r24}; } `; export const Form = styled.form` @@ -236,7 +239,7 @@ export const Form = styled.form` `; export const CustomForm = styled.form` height: calc(100vh - 510px); - margin: ${spacing.sp32}; + margin: ${spacing.r32}; `; const FormContainer = styled.div` height: 100%; @@ -245,7 +248,7 @@ const FormContainer = styled.div` export const FormScrollArea = styled.div` overflow: auto; max-height: calc(100vh - 19rem); - margin-right: ${spacing.sp12}; - padding-bottom: ${spacing.sp40}; + margin-right: ${spacing.r12}; + padding-bottom: ${spacing.r40}; `; export default FormContainer; From d1eeeeec63f2bcd28168088c385836c821898ecf Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 19 Dec 2023 18:11:18 +0100 Subject: [PATCH 06/10] fix test by properly passing new theme declaration --- .../objects/__tests__/FolderCreate.test.tsx | 2 ++ src/react/utils/testUtil.tsx | 18 +++++++++--------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/react/databrowser/objects/__tests__/FolderCreate.test.tsx b/src/react/databrowser/objects/__tests__/FolderCreate.test.tsx index d7f58db00..ec624c1e2 100644 --- a/src/react/databrowser/objects/__tests__/FolderCreate.test.tsx +++ b/src/react/databrowser/objects/__tests__/FolderCreate.test.tsx @@ -9,6 +9,8 @@ import { } from '../../../actions/__tests__/utils/testUtil'; import FolderCreate from '../FolderCreate'; import { reduxMount, renderWithRouterMatch } from '../../../utils/testUtil'; +import { ThemeProvider } from 'styled-components'; +import { coreUIAvailableThemes } from '@scality/core-ui/dist/style/theme'; describe('FolderCreate', () => { const modalTitle = 'Create a folder'; diff --git a/src/react/utils/testUtil.tsx b/src/react/utils/testUtil.tsx index df07020ef..d50b6e0d6 100644 --- a/src/react/utils/testUtil.tsx +++ b/src/react/utils/testUtil.tsx @@ -41,7 +41,7 @@ import { AccessibleAccountsAdapterProvider } from '../next-architecture/ui/Acces import { AccountsLocationsEndpointsAdapterProvider } from '../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider'; import { ToastProvider } from '@scality/core-ui'; import { coreUIAvailableThemes } from '@scality/core-ui/dist/style/theme'; - +export const theme = coreUIAvailableThemes.darkRebrand; export const history = createMemoryHistory(); export const configuration = { latest: { @@ -213,7 +213,7 @@ export const reduxMount = (component: React.ReactNode, testState?: any) => { const store = newTestStore(testState); return { component: mount( - + {component} @@ -274,7 +274,7 @@ export const reduxRender = (component: JSX.Element, testState?: unknown) => { return { component: render( - + <> @@ -307,7 +307,7 @@ export async function reduxMountAct(component, testState) { }) } > - + {component} @@ -319,7 +319,7 @@ export async function reduxMountAct(component, testState) { export const themeMount = (component: React.ReactNode) => { return mount( - {component} + {component} , ); }; @@ -376,7 +376,7 @@ export function testTableRow( export const simpleRender = (component: React.ReactNode) => { return render( - {component} + {component} , ); }; @@ -397,7 +397,7 @@ export function renderWithRouterMatch( return { ...render( - + @@ -458,7 +458,7 @@ export const renderWithCustomRoute = ( return { ...render( - + <_ConfigContext.Provider value={zenkoUITestConfig}> @@ -537,7 +537,7 @@ export const NewWrapper = return ( - + From eac0f82118504f1530e4beb2d9245ce84e363c6d Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Wed, 20 Dec 2023 14:24:02 +0100 Subject: [PATCH 07/10] add eslint ignore to styled.ts --- src/types/styled.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/types/styled.ts b/src/types/styled.ts index 1b0ee12eb..0e382158a 100644 --- a/src/types/styled.ts +++ b/src/types/styled.ts @@ -2,5 +2,6 @@ import 'styled-components'; import { CoreUITheme } from '@scality/core-ui/dist/style/theme'; declare module 'styled-components' { + // eslint-disable-next-line @typescript-eslint/no-empty-interface export interface DefaultTheme extends CoreUITheme {} } From 64fe8c24cd3618c0c72223253abd5cd59c742d7e Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Wed, 20 Dec 2023 15:14:42 +0100 Subject: [PATCH 08/10] replace degraded colors --- src/react/ui-elements/Input.ts | 4 ++-- src/react/ui-elements/Table.tsx | 13 +++++++------ 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/react/ui-elements/Input.ts b/src/react/ui-elements/Input.ts index c0c7de024..19a31ec5d 100644 --- a/src/react/ui-elements/Input.ts +++ b/src/react/ui-elements/Input.ts @@ -17,7 +17,7 @@ export const Hint = styled.div` cursor: pointer; &:hover { - background-color: ${(props) => props.theme.secondaryDark1}; + background-color: ${(props) => props.theme.backgroundLevel3}; } `; // make my own import due to some imput event target undefined issue @@ -29,7 +29,7 @@ const Input = styled.input<{ hasError?: boolean }>` border-width: ${spacing.sp1}; border-style: solid; border-color: ${(props) => - props.hasError ? props.theme.danger : props.theme?.border}; + props.hasError ? props.theme.statusCritical : props.theme?.border}; padding: 0px ${spacing.sp8}; font-size: ${fontSize.base}; border-radius: ${spacing.sp4}; diff --git a/src/react/ui-elements/Table.tsx b/src/react/ui-elements/Table.tsx index e543e7fbd..a7ff44818 100644 --- a/src/react/ui-elements/Table.tsx +++ b/src/react/ui-elements/Table.tsx @@ -72,7 +72,7 @@ export const Row = styled(HeadRow)` // can look different cause of subpixel positioning border-bottom: 1px solid ${(props) => props.theme.backgroundLevel1}; &:hover { - background-color: ${(props) => props.theme.secondaryDark1}; + background-color: ${(props) => props.theme.backgroundLevel3}; } cursor: ${(props) => (props.onClick ? 'pointer' : 'default')}; box-sizing: border-box; @@ -87,7 +87,8 @@ export const Row = styled(HeadRow)` `; export const Cell = styled.td<{ shade?: boolean }>` vertical-align: middle; - color: ${(props) => (props.shade ? props.theme.base : props.theme.text)}; + color: ${(props) => + props.shade ? props.theme.infoPrimary : props.theme.textPrimary}; padding: ${spacing.sp4} ${spacing.sp16} ${spacing.sp4} ${spacing.sp16}; text-overflow: ellipsis; overflow: hidden; @@ -194,7 +195,7 @@ export const SearchInputIcon = styled.i<{ isHidden?: boolean }>` right: 10px; cursor: pointer; &:hover { - color: ${(props) => props.theme.base}; + color: ${(props) => props.theme.infoPrimary}; } `; const ValidationIcon = styled.i` @@ -202,10 +203,10 @@ const ValidationIcon = styled.i` left: 10px; color: ${(props) => props.className === 'fa fa-times' - ? props.theme.danger + ? props.theme.statusCritical : props.className === 'fas fa-check' - ? props.theme.success - : props.theme.base}; + ? props.theme.statusHealthy + : props.theme.infoSecondary}; `; type Props = { isMetadataType: boolean; From 9b5ff917d0b5ae1ffdc6459f794625c3db039d89 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Fri, 22 Dec 2023 16:46:17 +0100 Subject: [PATCH 09/10] change tsconfig to include CoreUITheme type --- tsconfig.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index a7a5ed709..2af4fcbe2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -69,6 +69,7 @@ /* Advanced Options */ "skipLibCheck": true /* Skip type checking of declaration files. */, "resolveJsonModule": true, - "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ + "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */, + "types": ["@scality/core-ui/types/styled.d.ts", "@types"] } } From 8f27ce9869e40c919e34adfc0f3572c495f0697d Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Fri, 29 Dec 2023 17:31:20 +0100 Subject: [PATCH 10/10] delete useless styled.ts after import in tsconfig --- src/types/styled.ts | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 src/types/styled.ts diff --git a/src/types/styled.ts b/src/types/styled.ts deleted file mode 100644 index 0e382158a..000000000 --- a/src/types/styled.ts +++ /dev/null @@ -1,7 +0,0 @@ -import 'styled-components'; -import { CoreUITheme } from '@scality/core-ui/dist/style/theme'; - -declare module 'styled-components' { - // eslint-disable-next-line @typescript-eslint/no-empty-interface - export interface DefaultTheme extends CoreUITheme {} -}