chore: update UI5 from v1 to v2

package.json

@@ -62,14 +62,16 @@
     "@types/jsonpath": "^0.2.0",
     "@types/pluralize": "^0.0.29",
     "@ui-schema/ui-schema": "^0.4.5",
-    "@ui5/webcomponents": "^1.24.0",
-    "@ui5/webcomponents-base": "^1.24.0",
-    "@ui5/webcomponents-fiori": "^1.24.0",
-    "@ui5/webcomponents-icons": "^1.24.0",
-    "@ui5/webcomponents-icons-tnt": "^1.24.0",
-    "@ui5/webcomponents-react": "~1.28.1",
-    "@ui5/webcomponents-react-base": "^1.28.1",
-    "@ui5/webcomponents-react-charts": "^1.28.1",
+    "@ui5/webcomponents": "^2.3.0",
+    "@ui5/webcomponents-base": "^2.3.0",
+    "@ui5/webcomponents-compat": "^2.3.0",
+    "@ui5/webcomponents-fiori": "^2.3.0",
+    "@ui5/webcomponents-icons": "^2.3.0",
+    "@ui5/webcomponents-icons-tnt": "^2.3.0",
+    "@ui5/webcomponents-react": "^2.2.0",
+    "@ui5/webcomponents-react-base": "^2.2.0",
+    "@ui5/webcomponents-react-charts": "^2.2.0",
+    "@ui5/webcomponents-react-compat": "^2.3.0",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "core-js": "^3.3.6",
@@ -94,8 +96,8 @@
     "pako": "^2.0.4",
     "pluralize": "^8.0.0",
     "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-i18next": "^11.18.6",
     "react-router-dom": "^6.3.0",
     "react-tippy": "^1.4.0",
@@ -107,7 +109,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^12.1.3",
+    "@testing-library/react": "^16.0.1",
     "@types/didyoumean": "^1.2.0",
     "@types/enzyme": "^3.10.12",
     "@types/file-saver": "^2.0.5",
@@ -119,7 +121,6 @@
     "@types/react-dom": "^18.0.6",
     "@types/uuid": "^9.0.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "babel-polyfill": "^6.26.0",
     "babel-preset-vite": "^1.1.3",
     "concurrently": "^7.6.0",

src/command-pallette/CommandPalletteUI/components/components.tsx

@@ -4,7 +4,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
 import { HelpEntries } from '../types';
 
-import { spacing } from '@ui5/webcomponents-react-base';
+import { spacing } from 'shared/helpers/spacing';
 import './components.scss';
 
 export function SuggestedQuery({

src/components/App/App.tsx

@@ -42,11 +42,10 @@ export default function App() {
   const setNamespace = useSetRecoilState(activeNamespaceIdState);
   const { namespace } = useUrl();
   const makeGardenerLoginRoute = useMakeGardenerLoginRoute();
+  const { t, i18n } = useTranslation();
 
   useInitTheme();
 
-  const { t, i18n } = useTranslation();
-
   useEffect(() => {
     setNamespace(namespace);
   }, [setNamespace, namespace]);

src/components/App/ContentWrapper/ContentWrapper.scss

@@ -1,5 +1,5 @@
 :root {
-  --solidBg: var(--_ui5-v1-24-0_fcl_solid_bg);
+  --solidBg: var(--_ui5-v2-3-0_fcl_solid_bg);
 }
 
 #content-wrap {

src/components/App/ContentWrapper/ContentWrapper.tsx

@@ -1,4 +1,4 @@
-import { spacing } from '@ui5/webcomponents-react-base';
+import { spacing } from 'shared/helpers/spacing';
 import './ContentWrapper.scss';
 
 type ContentWrapperProps = {

src/components/BusolaExtensions/BusolaExtensionDetails.js

@@ -16,7 +16,7 @@ import { ModalWithForm } from 'shared/components/ModalWithForm/ModalWithForm';
 import { ErrorBoundary } from 'shared/components/ErrorBoundary/ErrorBoundary';
 import { extensibilitySchemasState } from 'state/extensibilitySchemasAtom';
 import { useUrl } from 'hooks/useUrl';
-import { spacing } from '@ui5/webcomponents-react-base';
+import { spacing } from 'shared/helpers/spacing';
 
 import {
   formatCurrentVersion,
@@ -194,8 +194,7 @@ export function BusolaExtensionDetails({ name, namespace }) {
                 <>
                   <Button
                     disabled={currentVersion === getLatestVersion()}
-                    icon="forward"
-                    iconEnd
+                    endIcon="forward"
                     onClick={() => {
                       const newBusolaExtension = migrateToLatest(configmap);
                       updateBusolaExtension(newBusolaExtension, configmap);

src/components/BusolaExtensions/ColumnsInput.js

@@ -6,7 +6,7 @@ export function ColumnsInput({ value: columns, setValue: setColumns }) {
 
   if (!columns?.length) {
     return (
-      <MessageStrip design="Warning" hideCloseButton>
+      <MessageStrip design="Critical" hideCloseButton>
         {t('extensibility.starter-modal.messages.no-columns')}
       </MessageStrip>
     );

src/components/Clusters/components/AddClusterDialog.js

@@ -29,7 +29,7 @@ export function AddClusterDialog() {
       open={showWizard}
       className="add-cluster-wizard-dialog"
       headerText={t('clusters.add.title')}
-      onAfterClose={() => setShowWizard(false)}
+      onClose={() => setShowWizard(false)}
     >
       <ErrorBoundary>
         <AddClusterDialogComponent />

src/components/Clusters/components/AddClusterWizard.js

@@ -27,7 +27,7 @@ import { ChooseStorage } from './ChooseStorage';
 import { WizardButtons } from 'shared/components/WizardButtons/WizardButtons';
 import { ClusterPreview } from './ClusterPreview';
 
-import { spacing } from '@ui5/webcomponents-react-base';
+import { spacing } from 'shared/helpers/spacing';
 import './AddClusterWizard.scss';
 import { isFormOpenState } from 'state/formOpenAtom';
 
@@ -171,7 +171,6 @@ export function AddClusterWizard({ kubeconfig, setKubeconfig, config }) {
           className="cluster-wizard__buttons__sticky"
         />
       </WizardStep>
-
       {kubeconfig && (!hasAuth || !hasOneContext) && (
         <WizardStep
           titleText={t('clusters.wizard.authentication')}
@@ -203,7 +202,6 @@ export function AddClusterWizard({ kubeconfig, setKubeconfig, config }) {
           />
         </WizardStep>
       )}
-
       <WizardStep
         titleText={t('clusters.wizard.storage')}
         selected={
@@ -233,8 +231,8 @@ export function AddClusterWizard({ kubeconfig, setKubeconfig, config }) {
                 <Popover
                   opener="storageDescriptionOpener"
                   open={showTitleDescription}
-                  onAfterClose={() => setShowTitleDescription(false)}
-                  placementType="Right"
+                  onClose={() => setShowTitleDescription(false)}
+                  placement="End"
                 >
                   <Text className="description">
                     {t('clusters.storage.info')}

src/components/Clusters/components/AuthForm.js

@@ -8,7 +8,7 @@ import { ResourceForm } from 'shared/ResourceForm';
 import * as Inputs from 'shared/ResourceForm/inputs';
 import { getUser, getUserIndex } from '../shared';
 
-import { spacing } from '@ui5/webcomponents-react-base';
+import { spacing } from 'shared/helpers/spacing';
 import { TextArrayInput } from 'shared/ResourceForm/fields';
 
 const OIDCform = ({ resource, setResource, ...props }) => {
@@ -127,7 +127,7 @@ export function AuthForm({
       <div className="add-cluster__content-container">
         <Title level="H5">{t('clusters.wizard.update')}</Title>
         <MessageStrip
-          design="Warning"
+          design="Critical"
           hideCloseButton
           style={spacing.sapUiSmallMarginTopBottom}
         >

src/components/Clusters/components/ChooseStorage.js

@@ -1,6 +1,6 @@
 import { FlexBox, RadioButton } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
-import { spacing } from '@ui5/webcomponents-react-base';
+import { spacing } from 'shared/helpers/spacing';
 import './ChooseStorage.scss';
 
 export function ChooseStorage({ storage, setStorage }) {

src/components/Clusters/components/ClusterPreview.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, FlexBox, RadioButton, Title } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
 import './ClusterPreview.scss';
-import { spacing } from '@ui5/webcomponents-react-base';
+import { spacing } from 'shared/helpers/spacing';
 import {
   findInitialValue,
   findInitialValues,

src/components/Clusters/components/ContextChooser/ContextChooser.js

@@ -3,7 +3,7 @@ import { MessageStrip, Select, Option, Title } from '@ui5/webcomponents-react';
 
 import { ResourceForm } from 'shared/ResourceForm';
 
-import { spacing } from '@ui5/webcomponents-react-base';
+import { spacing } from 'shared/helpers/spacing';
 import './ContextChooser.scss';
 
 export function ContextChooser(params) {

src/components/Clusters/components/KubeconfigUpload/KubeconfigFileUpload.js

@@ -3,7 +3,7 @@ import { FileInput } from 'shared/components/FileInput/FileInput';
 import { Title, Button, Popover, Text } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
 import { createPortal } from 'react-dom';
-import { spacing } from '@ui5/webcomponents-react-base';
+import { spacing } from 'shared/helpers/spacing';
 
 export function KubeconfigFileUpload({ onKubeconfigTextAdded }) {
   const { t } = useTranslation();
@@ -40,8 +40,8 @@ export function KubeconfigFileUpload({ onKubeconfigTextAdded }) {
             <Popover
               opener="descriptionOpener"
               open={showTitleDescription}
-              onAfterClose={() => setShowTitleDescription(false)}
-              placementType="Right"
+              onClose={() => setShowTitleDescription(false)}
+              placement="End"
             >
               <Text className="description">{t('clusters.wizard.intro')}</Text>
             </Popover>,

src/components/Clusters/components/KubeconfigUpload/KubeconfigUpload.js

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { KubeconfigFileUpload } from './KubeconfigFileUpload';
 import jsyaml from 'js-yaml';
 
-import { spacing } from '@ui5/webcomponents-react-base';
+import { spacing } from 'shared/helpers/spacing';
 import './KubeconfigUpload.scss';
 import { ClusterDataForm } from 'components/Clusters/views/EditCluster/EditCluster';
 

src/components/Clusters/views/ClusterList.js

@@ -23,7 +23,7 @@ import { useFeature } from 'hooks/useFeature';
 import { useNavigate } from 'react-router-dom';
 import { createPortal } from 'react-dom';
 
-import { spacing } from '@ui5/webcomponents-react-base';
+import { spacing } from 'shared/helpers/spacing';
 import './ClusterList.scss';
 import { useSetRecoilState } from 'recoil';
 import { showAddClusterWizard } from 'state/showAddClusterWizard';

src/components/Clusters/views/ClusterOverview/ClusterDetails.js

@@ -10,7 +10,7 @@ import { CountingCard } from 'shared/components/CountingCard/CountingCard';
 import { useKymaModulesQuery } from 'components/KymaModules/KymaModulesQuery';
 import { useUrl } from 'hooks/useUrl';
 import { useNavigate } from 'react-router-dom';
-import { spacing } from '@ui5/webcomponents-react-base';
+import { spacing } from 'shared/helpers/spacing';
 
 const GardenerProvider = () => {
   const { t } = useTranslation();

src/components/Clusters/views/ClusterOverview/ClusterNodes.js

@@ -19,7 +19,7 @@ export function ClusterNodes({ data, error, loading }) {
   const { t } = useTranslation();
 
   const getStatusType = status => {
-    if (status === 'Ready') return 'Success';
+    if (status === 'Ready') return 'Positive';
     return undefined;
   };
 

src/components/Clusters/views/ClusterOverview/ClusterOverview.js

@@ -15,7 +15,7 @@ import { useClustersInfo } from 'state/utils/getClustersInfo';
 import { useNotification } from 'shared/contexts/NotificationContext';
 import { useNavigate } from 'react-router-dom';
 import { deleteCluster } from 'components/Clusters/shared';
-import { spacing } from '@ui5/webcomponents-react-base';
+import { spacing } from 'shared/helpers/spacing';
 import './ClusterOverview.scss';
 import { useSetRecoilState } from 'recoil';
 import { showYamlUploadDialogState } from 'state/showYamlUploadDialogAtom';
@@ -90,6 +90,7 @@ export function ClusterOverview() {
             />
             <Title
               level="H3"
+              size="H3"
               style={{
                 ...spacing.sapUiMediumMarginBegin,
                 ...spacing.sapUiMediumMarginTopBottom,

src/components/Clusters/views/ClusterOverview/ClusterStats.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { spacing } from '@ui5/webcomponents-react-base';
+import { spacing } from 'shared/helpers/spacing';
 import { useTranslation } from 'react-i18next';
 import { UI5RadialChart } from 'shared/components/UI5RadialChart/UI5RadialChart';
 import { Card, CardHeader, Title } from '@ui5/webcomponents-react';
@@ -108,6 +108,7 @@ export default function ClusterStats({ nodesData }) {
     <>
       <Title
         level="H3"
+        size="H3"
         style={{
           ...spacing.sapUiMediumMarginBegin,
           ...spacing.sapUiMediumMarginTopBottom,

src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx

@@ -18,7 +18,6 @@ import {
   Card,
   CardHeader,
   FlexBox,
-  Loader,
   ProgressIndicator,
 } from '@ui5/webcomponents-react';
 import { ClusterValidationConfigurationDialog } from './ClusterValidationConfiguration';
@@ -154,29 +153,25 @@ export const ClusterValidation = () => {
       headerActions={
         <>
           <Button
-            icon="play"
-            iconEnd
+            endIcon="play"
             onClick={scan}
             disabled={!!scanProgress || !scanReady}
           >
             {t('cluster-validation.scan.buttons.scan')}
           </Button>
           <Button
-            icon="settings"
-            iconEnd
+            endIcon="settings"
             onClick={configure}
             disabled={!!scanProgress || !scanReady}
           >
             {t('cluster-validation.scan.buttons.configure')}
           </Button>
-          <Button icon="reset" iconEnd onClick={clear} disabled={!scanProgress}>
+          <Button endIcon="reset" onClick={clear} disabled={!scanProgress}>
             {t('cluster-validation.scan.buttons.clear')}
           </Button>
         </>
       }
     >
-      {!scanReady && <Loader type="Indeterminate" />}
-
       <Section titleText={t('cluster-validation.scan.scope')}>
         <FlexBox className="bsl-has-padding-small">
           <InfoTile
@@ -193,7 +188,6 @@ export const ClusterValidation = () => {
           />
         </FlexBox>
       </Section>
-
       {scanProgress && (
         <Section
           titleText={t('cluster-validation.scan.progress')}
@@ -213,20 +207,18 @@ export const ClusterValidation = () => {
             }
             valueState={
               scanProgress && scanProgress.total === scanProgress.scanned
-                ? 'Success'
+                ? 'Positive'
                 : 'None'
             }
             style={{ width: '96%', padding: '5px 2%' }}
           />
         </Section>
       )}
-
       {scanResult && (
         <Section titleText={t('cluster-validation.scan.result')}>
           <ScanResultTree scanResult={scanResult} />
         </Section>
       )}
-
       {createPortal(
         <ClusterValidationConfigurationDialog
           show={isConfigurationOpen}
@@ -275,7 +267,7 @@ const Section = ({
             <CardHeader
               titleText={titleText}
               subtitleText={subtitleText}
-              status={status}
+              additionalText={status}
             />
           ) : (
             header

src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidationConfiguration.js

@@ -186,7 +186,7 @@ export function ClusterValidationConfigurationDialog({
 
   return (
     <Dialog
-      onAfterClose={onCancel}
+      onClose={onCancel}
       open={show}
       headerText={t('cluster-validation.scan.common.headers.configuration')}
       footer={

src/components/Clusters/views/ClusterStorageType.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { HintButton } from 'shared/components/DescriptionHint/DescriptionHint';
 import { useTranslation } from 'react-i18next';
-import { spacing } from '@ui5/webcomponents-react-base';
+import { spacing } from 'shared/helpers/spacing';
 
 export function ClusterStorageType({ clusterConfig }) {
   const { t } = useTranslation();