Merge branch 'improvement/ZKUI-430' into q/2.2

scality · Dec 29, 2023 · 26aaa0a · 26aaa0a
2 parents 69ca5f5 + 8f27ce9
commit 26aaa0a
Show file tree

Hide file tree

Showing 43 changed files with 123 additions and 378 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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#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",

diff --git 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 <Loader> Login in </Loader>;
   }
 
-  return (
-    <ThemeProvider theme={theme}>
-      <ScrollbarWrapper>{content()}</ScrollbarWrapper>
-    </ThemeProvider>
-  );
+  return <ScrollbarWrapper>{content()}</ScrollbarWrapper>;
 }
 
 export default ZenkoUI;
diff --git 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();
 
@@ -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 (
     <CustomTabs
       {...customTabStyle}
       style={{
-        backgroundColor: theme.brand.backgroundLevel2,
+        backgroundColor: theme.backgroundLevel2,
       }}
     >
       <CustomTabs.Tab exact label="Properties" path={``}>

diff --git 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
@@ -254,7 +254,7 @@ function AttachmentConfirmationModal({
               <Icon name="Link" /> Attach
             </span>
           ) : (
-            <Box color={theme.brand.statusCritical}>
+            <Box color={theme.statusCritical}>
               <Icon name="Unlink" /> Detach
             </Box>
           );

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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/__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/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
@@ -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,23 +323,15 @@ const ObjectDelete = ({ bucketName, toggled, prefixWithSlash }: Props) => {
     if (s3Object.lockStatus === 'LOCKED' && s3Object.versionId) {
       if (s3Object.objectRetention?.mode === 'COMPLIANCE') {
         return (
-          <Box
-            display="flex"
-            color={theme.brand?.textTertiary}
-            gap={spacing.sp4}
-          >
+          <Box display="flex" color={theme?.textTertiary} gap={spacing.sp4}>
             <Icon color="buttonSecondary" name="Lock" />
             <span>Protected (compliance), won't be deleted</span>
           </Box>
         );
       }
       if (s3Object.objectRetention?.mode === 'GOVERNANCE') {
         return (
-          <Box
-            display="flex"
-            color={theme.brand?.textTertiary}
-            gap={spacing.sp4}
-          >
+          <Box display="flex" color={theme?.textTertiary} gap={spacing.sp4}>
             <Icon color="buttonSecondary" name="Lock" />
             <span>Protected (governance), will be deleted</span>
           </Box>
@@ -348,7 +340,7 @@ const ObjectDelete = ({ bucketName, toggled, prefixWithSlash }: Props) => {
     }
     if (s3Object.isLegalHoldEnabled && s3Object.versionId) {
       return (
-        <Box display="flex" color={theme.brand?.textTertiary} gap={spacing.sp4}>
+        <Box display="flex" color={theme?.textTertiary} gap={spacing.sp4}>
           <Icon color="buttonSecondary" name="Lock" />
           <span>Protected (legal hold), won't be deleted</span>
         </Box>

diff --git 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/__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';