From 64321f0c929613b16ec7dae48201cd67afe14c6b Mon Sep 17 00:00:00 2001
From: Oliwia Gowor <oliwiagowor@gmail.com>
Date: Tue, 22 Oct 2024 15:42:04 +0200
Subject: [PATCH 1/4] fix: ui5 codemode adjustments

---
 .../BusolaExtensionDetails.js                 |  3 +-
 .../BusolaExtensions/ColumnsInput.js          |  2 +-
 .../Clusters/components/AddClusterDialog.js   |  2 +-
 .../Clusters/components/AddClusterWizard.js   |  6 +--
 .../Clusters/components/AuthForm.js           |  2 +-
 .../KubeconfigUpload/KubeconfigFileUpload.js  |  4 +-
 .../ClusterValidation/ClusterValidation.tsx   | 17 +++------
 .../ClusterValidationConfiguration.js         |  2 +-
 .../components-form/Modules/Modules.js        |  4 +-
 .../components-form/MultiType.js              |  2 +-
 .../Extensibility/components/ExternalLink.js  |  3 +-
 .../components/ExternalLinkButton.js          |  3 +-
 .../components/ResourceButton.js              |  3 +-
 .../Extensibility/components/Wizard.js        |  2 +-
 .../KymaModules/KymaModulesAddModule.js       |  4 +-
 .../KymaModules/KymaModulesCreate.js          |  4 +-
 src/components/Preferences/Preferences.tsx    |  4 +-
 .../ResourceValidationSettings.tsx            |  6 +--
 src/resources/Events/EventDetails.js          |  2 +-
 src/resources/Events/EventList.js             |  2 +-
 .../YamlUpload/ResourceValidationResult.js    |  2 +-
 .../YamlUpload/YamlResourcesList.js           |  6 ++-
 .../Namespaces/YamlUpload/YamlUploadDialog.js |  2 +-
 .../RoleBindings/GenericRoleBindingCreate.js  |  2 +-
 src/resources/Roles/InvalidRoleError.js       |  2 +-
 src/resources/Roles/RuleInput.js              |  3 +-
 .../ServiceAccounts/ServiceAccountCreate.js   |  2 +-
 .../TokenRequestModal/TokenRequestModal.tsx   |  2 +-
 .../ResourceForm/ForceUpdateModalContent.tsx  |  2 +-
 .../ResourceForm/components/ModeSelector.js   |  2 +-
 .../ResourceForm/components/ResourceForm.js   | 11 +-----
 src/shared/ResourceForm/fields/DataField.js   |  2 +-
 src/shared/ResourceForm/fields/ItemArray.js   |  2 +-
 .../components/CopiableText/CopiableText.js   |  3 +-
 .../components/Deployment/Containers.js       |  2 +-
 .../DescriptionHint/DescriptionHint.tsx       |  6 +--
 .../DynamicPageComponent.js                   | 21 +++++-----
 .../EmptyListComponent/EmptyListComponent.tsx |  2 +-
 .../components/GenericList/GenericList.js     |  3 +-
 .../components/GenericList/components.js      | 38 ++++++++++---------
 .../components/ListActions/ListActions.js     |  2 +-
 src/shared/components/Modal/Modal.js          |  2 +-
 .../components/ModalWithForm/ModalWithForm.js |  5 +--
 .../components/MonacoEditorESM/Editor.js      |  4 +-
 .../components/PopoverBadge/PopoverBadge.tsx  |  4 +-
 .../ResourceRef/ExternalResourceRef.js        |  4 +-
 .../components/SchemaViewer/JSONSchema.js     |  3 +-
 .../components/SchemaViewer/SchemaViewer.js   |  6 +--
 .../components/ServiceAccountTokenStatus.tsx  |  4 +-
 src/shared/contexts/ErrorModal/ErrorModal.tsx |  2 +-
 src/shared/hooks/useProtectedResources.js     |  4 +-
 51 files changed, 104 insertions(+), 128 deletions(-)

diff --git a/src/components/BusolaExtensions/BusolaExtensionDetails.js b/src/components/BusolaExtensions/BusolaExtensionDetails.js
index 9b0532e379..a19c6a33d1 100644
--- a/src/components/BusolaExtensions/BusolaExtensionDetails.js
+++ b/src/components/BusolaExtensions/BusolaExtensionDetails.js
@@ -193,8 +193,7 @@ export function BusolaExtensionDetails({ name, namespace }) {
                 <>
                   <Button
                     disabled={currentVersion === getLatestVersion()}
-                    icon="forward"
-                    iconEnd
+                    endIcon="forward"
                     onClick={() => {
                       const newBusolaExtension = migrateToLatest(configmap);
                       updateBusolaExtension(newBusolaExtension, configmap);
diff --git a/src/components/BusolaExtensions/ColumnsInput.js b/src/components/BusolaExtensions/ColumnsInput.js
index 9c9e46bd87..1f2a1ccc86 100644
--- a/src/components/BusolaExtensions/ColumnsInput.js
+++ b/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>
     );
diff --git a/src/components/Clusters/components/AddClusterDialog.js b/src/components/Clusters/components/AddClusterDialog.js
index bf23a5f039..3b1c3c0f7c 100644
--- a/src/components/Clusters/components/AddClusterDialog.js
+++ b/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 />
diff --git a/src/components/Clusters/components/AddClusterWizard.js b/src/components/Clusters/components/AddClusterWizard.js
index 41b6d9ff6a..2a53738231 100644
--- a/src/components/Clusters/components/AddClusterWizard.js
+++ b/src/components/Clusters/components/AddClusterWizard.js
@@ -170,7 +170,6 @@ export function AddClusterWizard({ kubeconfig, setKubeconfig, config }) {
           className="cluster-wizard__buttons__sticky"
         />
       </WizardStep>
-
       {kubeconfig && (!hasAuth || !hasOneContext) && (
         <WizardStep
           titleText={t('clusters.wizard.authentication')}
@@ -202,7 +201,6 @@ export function AddClusterWizard({ kubeconfig, setKubeconfig, config }) {
           />
         </WizardStep>
       )}
-
       <WizardStep
         titleText={t('clusters.wizard.storage')}
         selected={
@@ -232,8 +230,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')}
diff --git a/src/components/Clusters/components/AuthForm.js b/src/components/Clusters/components/AuthForm.js
index 2623b35ef1..9af4ae56ac 100644
--- a/src/components/Clusters/components/AuthForm.js
+++ b/src/components/Clusters/components/AuthForm.js
@@ -126,7 +126,7 @@ export function AuthForm({
       <div className="add-cluster__content-container">
         <Title level="H5">{t('clusters.wizard.update')}</Title>
         <MessageStrip
-          design="Warning"
+          design="Critical"
           hideCloseButton
           className="sap-margin-y-small"
         >
diff --git a/src/components/Clusters/components/KubeconfigUpload/KubeconfigFileUpload.js b/src/components/Clusters/components/KubeconfigUpload/KubeconfigFileUpload.js
index 8ae7411fee..d0ce41ef76 100644
--- a/src/components/Clusters/components/KubeconfigUpload/KubeconfigFileUpload.js
+++ b/src/components/Clusters/components/KubeconfigUpload/KubeconfigFileUpload.js
@@ -39,8 +39,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>,
diff --git a/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx b/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx
index 94a59325ee..1c837cc007 100644
--- a/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx
+++ b/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx
@@ -154,29 +154,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 +189,6 @@ export const ClusterValidation = () => {
           />
         </FlexBox>
       </Section>
-
       {scanProgress && (
         <Section
           titleText={t('cluster-validation.scan.progress')}
@@ -213,20 +208,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 +268,7 @@ const Section = ({
             <CardHeader
               titleText={titleText}
               subtitleText={subtitleText}
-              status={status}
+              additionalText={status}
             />
           ) : (
             header
diff --git a/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidationConfiguration.js b/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidationConfiguration.js
index 7b0c6e6b4f..96336316f6 100644
--- a/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidationConfiguration.js
+++ b/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={
diff --git a/src/components/Extensibility/components-form/Modules/Modules.js b/src/components/Extensibility/components-form/Modules/Modules.js
index 36f0c9058e..2455d5d8c6 100644
--- a/src/components/Extensibility/components-form/Modules/Modules.js
+++ b/src/components/Extensibility/components-form/Modules/Modules.js
@@ -81,7 +81,7 @@ export function Modules({ storeKeys, resource, onChange, schema, required }) {
   const Items = parsedOptions?.name?.map((name, index) => {
     if (!name)
       return (
-        <MessageStrip design="Warning" hideCloseButton>
+        <MessageStrip design="Critical" hideCloseButton>
           {t('extensibility.widgets.modules.no-modules')}
         </MessageStrip>
       );
@@ -213,7 +213,7 @@ export function Modules({ storeKeys, resource, onChange, schema, required }) {
         </div>
         {parsedOptions?.betaAlert && isBeta && isChecked ? (
           <MessageStrip
-            design="Warning"
+            design="Critical"
             hideCloseButton
             className="alert sap-margin-y-small"
           >
diff --git a/src/components/Extensibility/components-form/MultiType.js b/src/components/Extensibility/components-form/MultiType.js
index e560ba0699..b66ed8c003 100644
--- a/src/components/Extensibility/components-form/MultiType.js
+++ b/src/components/Extensibility/components-form/MultiType.js
@@ -63,7 +63,7 @@ export function MultiType({
               <SegmentedButtonItem
                 compact
                 key={type}
-                pressed={type === selectedType}
+                selected={type === selectedType}
                 onClick={() => {
                   onChange &&
                     onChange({
diff --git a/src/components/Extensibility/components/ExternalLink.js b/src/components/Extensibility/components/ExternalLink.js
index 8650b0d494..b419d00248 100644
--- a/src/components/Extensibility/components/ExternalLink.js
+++ b/src/components/Extensibility/components/ExternalLink.js
@@ -52,9 +52,8 @@ export const ExternalLink = ({
   if (structure.type === 'button') {
     return (
       <Button
-        icon="inspect"
-        iconEnd
         className="sap-margin-x-tiny"
+        endIcon="inspect"
         onClick={() => {
           const newWindow = window.open(href, '_blank', 'noopener, noreferrer');
           if (newWindow) newWindow.opener = null;
diff --git a/src/components/Extensibility/components/ExternalLinkButton.js b/src/components/Extensibility/components/ExternalLinkButton.js
index 02a83ad2a3..fe34d4424e 100644
--- a/src/components/Extensibility/components/ExternalLinkButton.js
+++ b/src/components/Extensibility/components/ExternalLinkButton.js
@@ -6,8 +6,7 @@ export function ExternalLinkButton({ structure }) {
 
   return (
     <Button
-      icon="inspect"
-      iconEnd
+      endIcon="inspect"
       design={structure?.emphasized ? 'Emphasized' : 'Default'}
       inline={true}
       onClick={() => {
diff --git a/src/components/Extensibility/components/ResourceButton.js b/src/components/Extensibility/components/ResourceButton.js
index 56a2e61446..af32d30d73 100644
--- a/src/components/Extensibility/components/ResourceButton.js
+++ b/src/components/Extensibility/components/ResourceButton.js
@@ -49,8 +49,7 @@ export function ResourceButton({
   return (
     <Button
       design="Emphasized"
-      icon={structure?.icon}
-      iconEnd
+      endIcon={structure?.icon}
       inline={true}
       onClick={() =>
         navigate(
diff --git a/src/components/Extensibility/components/Wizard.js b/src/components/Extensibility/components/Wizard.js
index 508cbb1983..17d6208c66 100644
--- a/src/components/Extensibility/components/Wizard.js
+++ b/src/components/Extensibility/components/Wizard.js
@@ -39,7 +39,7 @@ export function Wizard({ value, structure, singleRootResource }) {
           open={showWizard}
           className="wizard-dialog"
           headerText={t('extensibility.wizard.headers.name') + ' ' + wizardName}
-          onAfterClose={() => setShowWizard(false)}
+          onClose={() => setShowWizard(false)}
         >
           <ErrorBoundary onClose={handleCloseModal}>
             <ExtensibilityWizard
diff --git a/src/components/KymaModules/KymaModulesAddModule.js b/src/components/KymaModules/KymaModulesAddModule.js
index 549cb0d60e..6c58c756a5 100644
--- a/src/components/KymaModules/KymaModulesAddModule.js
+++ b/src/components/KymaModules/KymaModulesAddModule.js
@@ -254,7 +254,7 @@ export default function KymaModulesAddModule({
           {checkIfSelectedModuleIsBeta() ? (
             <MessageStrip
               key={'beta'}
-              design="Warning"
+              design="Critical"
               hideCloseButton
               className="sap-margin-top-small"
             >
@@ -273,7 +273,7 @@ export default function KymaModulesAddModule({
         </MessageStrip>
       ) : (
         <MessageStrip
-          design="Warning"
+          design="Critical"
           hideCloseButton
           className="sap-margin-top-small"
         >
diff --git a/src/components/KymaModules/KymaModulesCreate.js b/src/components/KymaModules/KymaModulesCreate.js
index caf6bf9517..8f98f8c70a 100644
--- a/src/components/KymaModules/KymaModulesCreate.js
+++ b/src/components/KymaModules/KymaModulesCreate.js
@@ -418,7 +418,7 @@ export default function KymaModulesCreate({ resource, ...props }) {
               {checkIfSelectedModuleIsBeta() ? (
                 <MessageStrip
                   key={'beta'}
-                  design="Warning"
+                  design="Critical"
                   hideCloseButton
                   className="sap-margin-top-tiny"
                 >
@@ -429,7 +429,7 @@ export default function KymaModulesCreate({ resource, ...props }) {
             </>
           ) : (
             <MessageStrip
-              design="Warning"
+              design="Critical"
               hideCloseButton
               className="sap-margin-top-small"
             >
diff --git a/src/components/Preferences/Preferences.tsx b/src/components/Preferences/Preferences.tsx
index 3fc4ffaf06..80b89116b7 100644
--- a/src/components/Preferences/Preferences.tsx
+++ b/src/components/Preferences/Preferences.tsx
@@ -64,7 +64,7 @@ export function Preferences() {
 
   return (
     <Dialog
-      onAfterClose={handleCloseModal}
+      onClose={handleCloseModal}
       open={isModalOpen}
       headerText={t('navigation.preferences.title')}
       footer={
@@ -86,7 +86,6 @@ export function Preferences() {
           <TabContainer
             tabLayout="Inline"
             contentBackgroundDesign="Transparent"
-            fixed
           >
             <Tab
               style={{ padding: '-16px -32px' }}
@@ -107,7 +106,6 @@ export function Preferences() {
           <TabContainer
             tabLayout="Inline"
             contentBackgroundDesign="Transparent"
-            fixed
           >
             <Tab
               key="cluster-interaction"
diff --git a/src/components/Preferences/ResourceValidation/ResourceValidationSettings.tsx b/src/components/Preferences/ResourceValidation/ResourceValidationSettings.tsx
index 10f4beb2a6..d2fccf15aa 100644
--- a/src/components/Preferences/ResourceValidation/ResourceValidationSettings.tsx
+++ b/src/components/Preferences/ResourceValidation/ResourceValidationSettings.tsx
@@ -152,8 +152,7 @@ export default function ResourceValidationSettings() {
                   {!choosePolicies && (
                     <Button
                       design="Transparent"
-                      icon="customize"
-                      iconEnd
+                      endIcon="customize"
                       onClick={enablePolicyCustomization}
                     >
                       {t('settings.clusters.resourcesValidation.customize')}
@@ -162,8 +161,7 @@ export default function ResourceValidationSettings() {
                   {choosePolicies && (
                     <Button
                       design="Transparent"
-                      icon="reset"
-                      iconEnd
+                      endIcon="reset"
                       onClick={disablePolicyCustomization}
                     >
                       {t('settings.clusters.resourcesValidation.reset')}
diff --git a/src/resources/Events/EventDetails.js b/src/resources/Events/EventDetails.js
index c0c915f4e3..8fe741bc38 100644
--- a/src/resources/Events/EventDetails.js
+++ b/src/resources/Events/EventDetails.js
@@ -34,7 +34,7 @@ const Specification = event => {
                 aria-label="Warning"
                 icon={<Icon name="warning" />}
                 className="has-tooltip sap-margin-begin-tiny"
-                state="Warning"
+                state="Critical"
               />
             ) : (
               <ObjectStatus
diff --git a/src/resources/Events/EventList.js b/src/resources/Events/EventList.js
index 8f3937a3c0..1a2c301d0e 100644
--- a/src/resources/Events/EventList.js
+++ b/src/resources/Events/EventList.js
@@ -58,7 +58,7 @@ export function EventList({
                 aria-label="Warning"
                 icon={<Icon name="warning" />}
                 className="has-tooltip"
-                state="Warning"
+                state="Critical"
               />
             </Tooltip>
           ) : (
diff --git a/src/resources/Namespaces/YamlUpload/ResourceValidationResult.js b/src/resources/Namespaces/YamlUpload/ResourceValidationResult.js
index 2fb6817354..8737a2bc1f 100755
--- a/src/resources/Namespaces/YamlUpload/ResourceValidationResult.js
+++ b/src/resources/Namespaces/YamlUpload/ResourceValidationResult.js
@@ -63,7 +63,7 @@ const ValidationWarnings = ({ resource, validationSchema }) => {
   if (!validationSchema)
     return (
       <MessageStrip
-        design="Warning"
+        design="Critical"
         hideCloseButton
         className="sap-margin-bottom-small"
       >
diff --git a/src/resources/Namespaces/YamlUpload/YamlResourcesList.js b/src/resources/Namespaces/YamlUpload/YamlResourcesList.js
index 7da1518776..9008788cd1 100755
--- a/src/resources/Namespaces/YamlUpload/YamlResourcesList.js
+++ b/src/resources/Namespaces/YamlUpload/YamlResourcesList.js
@@ -138,7 +138,9 @@ export function YamlResourcesList({ resourcesData }) {
                 header={
                   <CardHeader
                     titleText={t('upload-yaml.upload-progress')}
-                    status={resources?.length + '/' + uploadedResources?.length}
+                    additionalText={
+                      resources?.length + '/' + uploadedResources?.length
+                    }
                   />
                 }
               >
@@ -146,7 +148,7 @@ export function YamlResourcesList({ resourcesData }) {
                   value={getPercentage()}
                   valueState={
                     resources?.length === uploadedResources?.length
-                      ? 'Success'
+                      ? 'Positive'
                       : 'None'
                   }
                   className="sap-margin-x-small"
diff --git a/src/resources/Namespaces/YamlUpload/YamlUploadDialog.js b/src/resources/Namespaces/YamlUpload/YamlUploadDialog.js
index b20c0872ac..1ba8dcd1b6 100755
--- a/src/resources/Namespaces/YamlUpload/YamlUploadDialog.js
+++ b/src/resources/Namespaces/YamlUpload/YamlUploadDialog.js
@@ -102,7 +102,7 @@ export function YamlUploadDialog() {
   return (
     <Dialog
       open={openAdd}
-      onAfterClose={() => setShowAdd(false)}
+      onClose={() => setShowAdd(false)}
       headerText={t('upload-yaml.title')}
       footer={<Bar design="Footer" endContent={<>{actions}</>} />}
       className="yaml-upload-modal__dialog"
diff --git a/src/resources/RoleBindings/GenericRoleBindingCreate.js b/src/resources/RoleBindings/GenericRoleBindingCreate.js
index e1c0ecf5b7..708f831a74 100644
--- a/src/resources/RoleBindings/GenericRoleBindingCreate.js
+++ b/src/resources/RoleBindings/GenericRoleBindingCreate.js
@@ -102,7 +102,7 @@ export function GenericRoleBindingCreate({
       />
       {!jp.value(binding, '$.subjects.length') && (
         <MessageStrip
-          design="Warning"
+          design="Critical"
           hideCloseButton
           className="sap-margin-top-small"
         >
diff --git a/src/resources/Roles/InvalidRoleError.js b/src/resources/Roles/InvalidRoleError.js
index 5da56c7253..32c4420b16 100644
--- a/src/resources/Roles/InvalidRoleError.js
+++ b/src/resources/Roles/InvalidRoleError.js
@@ -9,7 +9,7 @@ export function InvalidRoleError({ rule }) {
   return (
     isRuleInvalid(rule) && (
       <MessageStrip
-        design="Warning"
+        design="Critical"
         hideCloseButton
         className="sap-margin-top-small"
       >
diff --git a/src/resources/Roles/RuleInput.js b/src/resources/Roles/RuleInput.js
index 76d356bf41..adaf43821b 100644
--- a/src/resources/Roles/RuleInput.js
+++ b/src/resources/Roles/RuleInput.js
@@ -134,7 +134,7 @@ export function RuleInput({ rule, rules, setRules }) {
         newItemActionWidth={2}
         newItemAction={
           loading ? (
-            <BusyIndicator size="Small" active={true} delay="0" />
+            <BusyIndicator size="S" active={true} delay="0" />
           ) : (
             <Button
               design="Transparent"
@@ -158,7 +158,6 @@ export function RuleInput({ rule, rules, setRules }) {
           </Button>,
         ]}
       />
-
       {loadable && (
         <MessageStrip
           design="Information"
diff --git a/src/resources/ServiceAccounts/ServiceAccountCreate.js b/src/resources/ServiceAccounts/ServiceAccountCreate.js
index c140a69a29..83344610a1 100644
--- a/src/resources/ServiceAccounts/ServiceAccountCreate.js
+++ b/src/resources/ServiceAccounts/ServiceAccountCreate.js
@@ -154,7 +154,7 @@ export default function ServiceAccountCreate({
         }
       />
       {shouldCreateSecret && (
-        <MessageStrip design="Warning" hideCloseButton>
+        <MessageStrip design="Critical" hideCloseButton>
           {t('service-accounts.associated-secret.warning')}
         </MessageStrip>
       )}
diff --git a/src/resources/ServiceAccounts/TokenRequestModal/TokenRequestModal.tsx b/src/resources/ServiceAccounts/TokenRequestModal/TokenRequestModal.tsx
index 43bd67e443..bb21cef04a 100644
--- a/src/resources/ServiceAccounts/TokenRequestModal/TokenRequestModal.tsx
+++ b/src/resources/ServiceAccounts/TokenRequestModal/TokenRequestModal.tsx
@@ -98,7 +98,7 @@ export function TokenRequestModal({
   return (
     <Dialog
       open={isModalOpen}
-      onAfterClose={handleCloseModal}
+      onClose={handleCloseModal}
       headerText={t('service-accounts.token-request.generate')}
       footer={
         <Bar
diff --git a/src/shared/ResourceForm/ForceUpdateModalContent.tsx b/src/shared/ResourceForm/ForceUpdateModalContent.tsx
index 40ae57519e..0e6677573e 100644
--- a/src/shared/ResourceForm/ForceUpdateModalContent.tsx
+++ b/src/shared/ResourceForm/ForceUpdateModalContent.tsx
@@ -44,7 +44,7 @@ function ForceUpdateModalContentComponent({
       </p>
       <div style={{ height: '400px' }} ref={divRef}></div>
       <MessageStrip
-        design="Warning"
+        design="Critical"
         hideCloseButton
         className="sap-margin-top-small"
       >
diff --git a/src/shared/ResourceForm/components/ModeSelector.js b/src/shared/ResourceForm/components/ModeSelector.js
index 13ef80c016..37bfc051ad 100644
--- a/src/shared/ResourceForm/components/ModeSelector.js
+++ b/src/shared/ResourceForm/components/ModeSelector.js
@@ -40,7 +40,7 @@ export function ModeSelector({ mode, setMode, isDisabled = false }) {
         {buttonsToDisplay.map(button => (
           <SegmentedButtonItem
             key={button.mode}
-            pressed={mode === button.mode}
+            selected={mode === button.mode}
             disabled={isDisabled}
             data-mode={button.mode}
           >
diff --git a/src/shared/ResourceForm/components/ResourceForm.js b/src/shared/ResourceForm/components/ResourceForm.js
index 8d286f2f18..2c3db77349 100644
--- a/src/shared/ResourceForm/components/ResourceForm.js
+++ b/src/shared/ResourceForm/components/ResourceForm.js
@@ -218,17 +218,10 @@ export function ResourceForm({
         'resource-form ui5-content-density-compact',
         className,
       )}
-      columnsL={1}
-      columnsM={1}
-      columnsS={1}
-      columnsXL={1}
-      labelSpanL={0}
-      labelSpanM={0}
-      labelSpanS={0}
-      labelSpanXL={0}
-      as="div"
       style={{ overflowX: 'hidden' }}
       onChange={onChange}
+      labelSpan="S0 M0 L0 XL0"
+      layout="S1 M1 L1 XL1"
     >
       {(mode === ModeSelector.MODE_FORM || formWithoutPanel) && (
         <FormItem>
diff --git a/src/shared/ResourceForm/fields/DataField.js b/src/shared/ResourceForm/fields/DataField.js
index bd80c908b4..40c1834297 100644
--- a/src/shared/ResourceForm/fields/DataField.js
+++ b/src/shared/ResourceForm/fields/DataField.js
@@ -17,7 +17,7 @@ export function DataField({ title, ...props }) {
           <TextArea
             onChange={e => setValue(e.target.value)}
             growing
-            growingMaxLines={'10'}
+            growingMaxRows={'10'}
             {...props}
           />
         ),
diff --git a/src/shared/ResourceForm/fields/ItemArray.js b/src/shared/ResourceForm/fields/ItemArray.js
index 333b0fd1be..f6a333cf6f 100644
--- a/src/shared/ResourceForm/fields/ItemArray.js
+++ b/src/shared/ResourceForm/fields/ItemArray.js
@@ -89,7 +89,7 @@ export function ItemArray({
     >
       {content}
       {atLeastOneRequiredMessage && !values.length && (
-        <MessageStrip design="Warning" hideCloseButton>
+        <MessageStrip design="Critical" hideCloseButton>
           {atLeastOneRequiredMessage}
         </MessageStrip>
       )}
diff --git a/src/shared/components/CopiableText/CopiableText.js b/src/shared/components/CopiableText/CopiableText.js
index 9a04dd32e6..ebf8699e2d 100644
--- a/src/shared/components/CopiableText/CopiableText.js
+++ b/src/shared/components/CopiableText/CopiableText.js
@@ -25,8 +25,7 @@ export function CopiableText({
     <div className="copiable-text">
       {!iconOnly ? children || textToCopy : null}
       <Button
-        icon="copy"
-        iconEnd
+        endIcon="copy"
         design="Transparent"
         className="sap-margin-begin-tiny"
         disabled={disabled}
diff --git a/src/shared/components/Deployment/Containers.js b/src/shared/components/Deployment/Containers.js
index f7841aa046..cee73d6d72 100644
--- a/src/shared/components/Deployment/Containers.js
+++ b/src/shared/components/Deployment/Containers.js
@@ -63,7 +63,7 @@ export function Containers({ value: containers, setValue: setContainers }) {
 
   if (!containers.length) {
     return (
-      <MessageStrip design="Warning" hideCloseButton>
+      <MessageStrip design="Critical" hideCloseButton>
         {t('deployments.create-modal.one-container-required')}
       </MessageStrip>
     );
diff --git a/src/shared/components/DescriptionHint/DescriptionHint.tsx b/src/shared/components/DescriptionHint/DescriptionHint.tsx
index b9e7350880..61a5a50729 100644
--- a/src/shared/components/DescriptionHint/DescriptionHint.tsx
+++ b/src/shared/components/DescriptionHint/DescriptionHint.tsx
@@ -50,16 +50,16 @@ export function HintButton({
         <Popover
           opener={`descriptionOpener-${ID}`}
           //Point initial focus to other component removes the focus from the link in description
-          onAfterOpen={() => {
+          onOpen={() => {
             // @ts-ignore
             descBtnRef.current.focus();
           }}
           open={showTitleDescription}
-          onAfterClose={e => {
+          onClose={e => {
             e.stopPropagation();
             setShowTitleDescription(false);
           }}
-          placementType="Right"
+          placement="End"
         >
           <Text className="description">{desc}</Text>
         </Popover>,
diff --git a/src/shared/components/DynamicPageComponent/DynamicPageComponent.js b/src/shared/components/DynamicPageComponent/DynamicPageComponent.js
index 87a714eebc..92a5a5a5a3 100644
--- a/src/shared/components/DynamicPageComponent/DynamicPageComponent.js
+++ b/src/shared/components/DynamicPageComponent/DynamicPageComponent.js
@@ -20,6 +20,8 @@ import { isResourceEditedState } from 'state/resourceEditedAtom';
 import { isFormOpenState } from 'state/formOpenAtom';
 import { handleActionIfFormOpen } from '../UnsavedMessageBox/helpers';
 
+import { ObjectPageHeader } from '@ui5/webcomponents-react';
+
 const Column = ({ title, children, columnSpan, image, style = {} }) => {
   const styleComputed = { gridColumn: columnSpan, ...style };
   return (
@@ -93,7 +95,7 @@ export const DynamicPageComponent = ({
   const headerTitle = (
     <DynamicPageTitle
       style={title === 'Clusters Overview' ? { display: 'none' } : null}
-      header={
+      heading={
         <FlexBox alignItems="Center">
           <Title level="H3" className="bold-title">
             {title}
@@ -242,11 +244,9 @@ export const DynamicPageComponent = ({
       <ObjectPage
         mode="IconTabBar"
         className={`page-header ${className}`}
-        alwaysShowContentHeader
-        showHideHeaderButton={false}
-        headerContentPinnable={false}
-        headerTitle={headerTitle}
-        headerContent={customHeaderContent ?? headerContent}
+        headerPinned
+        titleArea={headerTitle}
+        headerArea={customHeaderContent ?? headerContent}
         selectedSectionId={selectedSectionIdState}
         onBeforeNavigate={e => {
           if (isFormOpen.formOpen) {
@@ -270,6 +270,7 @@ export const DynamicPageComponent = ({
             setIsFormOpen({ formOpen: true });
           }
         }}
+        hidePinButton
       >
         <ObjectPageSection
           aria-label="View"
@@ -279,7 +280,6 @@ export const DynamicPageComponent = ({
         >
           {content}
         </ObjectPageSection>
-
         <ObjectPageSection
           aria-label="Edit"
           hideTitleText
@@ -298,12 +298,11 @@ export const DynamicPageComponent = ({
     <DynamicPage
       className="page-header"
       alwaysShowContentHeader
-      showHideHeaderButton={false}
       headerContentPinnable={false}
       backgroundDesign="Solid"
-      headerTitle={headerTitle}
-      headerContent={headerContent}
-      footer={footer}
+      titleArea={headerTitle}
+      headerArea={headerContent}
+      footerArea={footer}
     >
       {({ stickyHeaderHeight }) => {
         return typeof content === 'function'
diff --git a/src/shared/components/EmptyListComponent/EmptyListComponent.tsx b/src/shared/components/EmptyListComponent/EmptyListComponent.tsx
index c3041c67d1..4bbc037507 100644
--- a/src/shared/components/EmptyListComponent/EmptyListComponent.tsx
+++ b/src/shared/components/EmptyListComponent/EmptyListComponent.tsx
@@ -41,7 +41,7 @@ export const EmptyListComponent = ({
   return (
     <IllustratedMessage
       name={image}
-      size="Auto"
+      design="Auto"
       titleText={titleText}
       subtitle={
         <p className="emptyListComponent__subtitle sap-margin-top-small">
diff --git a/src/shared/components/GenericList/GenericList.js b/src/shared/components/GenericList/GenericList.js
index 2a1388c78d..e0a26258aa 100644
--- a/src/shared/components/GenericList/GenericList.js
+++ b/src/shared/components/GenericList/GenericList.js
@@ -414,7 +414,7 @@ export const GenericList = ({
             () => handleRowClick(e),
           );
         }}
-        columns={
+        headerRow={
           <HeaderRenderer
             entries={entries}
             actions={actions}
@@ -427,7 +427,6 @@ export const GenericList = ({
       >
         {renderTableBody()}
       </Table>
-
       {pagination &&
         (!pagination.autoHide ||
           filteredEntries.length > pagination.itemsPerPage) && (
diff --git a/src/shared/components/GenericList/components.js b/src/shared/components/GenericList/components.js
index f54bf32b02..7cdad591c1 100644
--- a/src/shared/components/GenericList/components.js
+++ b/src/shared/components/GenericList/components.js
@@ -1,8 +1,14 @@
 import { useState } from 'react';
-import { Button, FlexBox, Icon, Text } from '@ui5/webcomponents-react';
-import { TableCell } from '@ui5/webcomponents-react-compat/dist/components/TableCell/index.js';
-import { TableColumn } from '@ui5/webcomponents-react-compat/dist/components/TableColumn/index.js';
-import { TableRow } from '@ui5/webcomponents-react-compat/dist/components/TableRow/index.js';
+import {
+  Button,
+  FlexBox,
+  Icon,
+  Text,
+  TableCell,
+  TableHeaderCell,
+  TableRow,
+} from '@ui5/webcomponents-react';
+import ListActions from 'shared/components/ListActions/ListActions';
 
 import ListActions from 'shared/components/ListActions/ListActions';
 
@@ -26,25 +32,23 @@ export const HeaderRenderer = ({
   let emptyColumn = null;
   if (actions.length) {
     emptyColumn = (
-      <TableColumn
+      <TableHeaderCell
         slot={slot}
         key="actions-column"
         aria-label="actions-column"
         minWidth={850}
       >
         <Text />
-      </TableColumn>
+      </TableHeaderCell>
     );
   }
   const Header = (
     <>
       {headerRenderer().map((h, index) => {
         return (
-          <TableColumn
+          <TableHeaderCell
             slot={`${slot}-${index}`}
             key={typeof h === 'object' ? index : h}
-            popinDisplay="Block"
-            demandPopin={h === 'Popin' ? true : false}
             minWidth={
               Array.isArray(noHideFields) && noHideFields.length !== 0
                 ? noHideFields.find(field => field === h)
@@ -61,14 +65,18 @@ export const HeaderRenderer = ({
             aria-label={`${typeof h === 'object' ? index : h}-column`}
           >
             <Text>{h}</Text>
-          </TableColumn>
+          </TableHeaderCell>
         );
       })}
       {emptyColumn}
       {displayArrow && (
-        <TableColumn slot={slot} key="arrow-column" aria-label="arrow-column">
+        <TableHeaderCell
+          slot={slot}
+          key="arrow-column"
+          aria-label="arrow-column"
+        >
           <Text />
-        </TableColumn>
+        </TableHeaderCell>
       )}
     </>
   );
@@ -135,11 +143,7 @@ const DefaultRowRenderer = ({
   );
 
   return (
-    <TableRow
-      type={hasDetailsView ? 'Active' : 'Inactive'}
-      navigated={isSelected}
-      selected={isSelected}
-    >
+    <TableRow>
       {cells}
       {!!actions.length && actionsCell}
       {displayArrow && (
diff --git a/src/shared/components/ListActions/ListActions.js b/src/shared/components/ListActions/ListActions.js
index 35ceaeabff..ba46752312 100644
--- a/src/shared/components/ListActions/ListActions.js
+++ b/src/shared/components/ListActions/ListActions.js
@@ -65,7 +65,7 @@ const ListActions = ({ actions, entry }) => {
           <Menu
             open={isMenuOpen}
             opener={'openMenuBtn'}
-            onAfterClose={() => {
+            onClose={() => {
               setIsMenuOpen(false);
             }}
           >
diff --git a/src/shared/components/Modal/Modal.js b/src/shared/components/Modal/Modal.js
index 8808c27a7d..371b3f0b40 100644
--- a/src/shared/components/Modal/Modal.js
+++ b/src/shared/components/Modal/Modal.js
@@ -144,7 +144,7 @@ export function Modal({
             ) : null
           }
           open={show}
-          onAfterClose={onClose}
+          onClose={onClose}
           actions={modalActions()}
         >
           {children}
diff --git a/src/shared/components/ModalWithForm/ModalWithForm.js b/src/shared/components/ModalWithForm/ModalWithForm.js
index f98cf02957..1bf31beedd 100644
--- a/src/shared/components/ModalWithForm/ModalWithForm.js
+++ b/src/shared/components/ModalWithForm/ModalWithForm.js
@@ -97,8 +97,7 @@ export const ModalWithForm = ({
       </div>
     ) : (
       <Button
-        icon={button.icon || null}
-        iconEnd
+        endIcon={button.icon || null}
         accessibleName={button.label || null}
         design={button.design}
         disabled={!!button.disabled}
@@ -149,7 +148,7 @@ export const ModalWithForm = ({
               }
             />
           }
-          onAfterClose={() => {
+          onClose={() => {
             setOpenStatus(false);
           }}
           headerText={title}
diff --git a/src/shared/components/MonacoEditorESM/Editor.js b/src/shared/components/MonacoEditorESM/Editor.js
index 466c4811ae..3bfbc4b275 100644
--- a/src/shared/components/MonacoEditorESM/Editor.js
+++ b/src/shared/components/MonacoEditorESM/Editor.js
@@ -114,8 +114,8 @@ export function Editor({
         )}
         {schemaError && (
           <MessageStrip
-            design="Warning"
             className="break-word sap-margin-small"
+            design="Critical"
           >
             {t('common.create-form.autocomplete-unavailable-error', {
               error: schemaError.error || schemaError.message || schemaError,
@@ -124,7 +124,7 @@ export function Editor({
         )}
         {warnings.length ? (
           <MessageStrip
-            design="Warning"
+            design="Critical"
             hideCloseButton
             className="break-word sap-margin-small"
           >
diff --git a/src/shared/components/PopoverBadge/PopoverBadge.tsx b/src/shared/components/PopoverBadge/PopoverBadge.tsx
index 312b773dfa..af3074424d 100644
--- a/src/shared/components/PopoverBadge/PopoverBadge.tsx
+++ b/src/shared/components/PopoverBadge/PopoverBadge.tsx
@@ -54,11 +54,11 @@ export const PopoverBadge = ({
         <Popover
           ref={popoverRef}
           open={openPopover}
-          onAfterClose={e => {
+          onClose={e => {
             e.stopPropagation();
             setOpenPopover(false);
           }}
-          placementType="Right"
+          placement="End"
         >
           {tooltipContent}
         </Popover>,
diff --git a/src/shared/components/ResourceRef/ExternalResourceRef.js b/src/shared/components/ResourceRef/ExternalResourceRef.js
index 64e3ad7cd8..03daa5cc0c 100644
--- a/src/shared/components/ResourceRef/ExternalResourceRef.js
+++ b/src/shared/components/ResourceRef/ExternalResourceRef.js
@@ -121,7 +121,7 @@ export function ExternalResourceRef({
             }}
             required={required}
             value={value?.namespace || ''}
-            valueState={namespaceValid ? null : 'Error'}
+            valueState={namespaceValid ? null : 'Negative'}
             valueStateMessage={
               <Text>
                 {namespaceValid
@@ -162,7 +162,7 @@ export function ExternalResourceRef({
               }}
               required={required}
               value={value?.name || ''}
-              valueState={nameValid ? null : 'Error'}
+              valueState={nameValid ? null : 'Negative'}
               valueStateMessage={
                 <Text>
                   {nameValid ? '' : t('common.messages.resource-name-error')}
diff --git a/src/shared/components/SchemaViewer/JSONSchema.js b/src/shared/components/SchemaViewer/JSONSchema.js
index ff9a9ac9f4..0f25ee61fd 100644
--- a/src/shared/components/SchemaViewer/JSONSchema.js
+++ b/src/shared/components/SchemaViewer/JSONSchema.js
@@ -36,14 +36,13 @@ export function JSONSchema({
                 <ObjectStatus inverted>{type.toUpperCase()}</ObjectStatus>
               ))}{' '}
           {isRequired && (
-            <ObjectStatus inverted state="Warning">
+            <ObjectStatus inverted state="Critical">
               {t('schema.required')}
             </ObjectStatus>
           )}
         </FlexBox>
       )}
       {description && <div className="description">{description}</div>}
-
       <dl>
         <ObjectProperties def={def} expanded={root} />
       </dl>
diff --git a/src/shared/components/SchemaViewer/SchemaViewer.js b/src/shared/components/SchemaViewer/SchemaViewer.js
index a88e00ed9c..838ad2136a 100644
--- a/src/shared/components/SchemaViewer/SchemaViewer.js
+++ b/src/shared/components/SchemaViewer/SchemaViewer.js
@@ -22,21 +22,21 @@ export function SchemaViewer({ name, schema }) {
           <SegmentedButton>
             <SegmentedButtonItem
               compact
-              pressed={schemaMode === 'viewer'}
+              selected={schemaMode === 'viewer'}
               onClick={() => setSchemaMode('viewer')}
             >
               {t('schema.modes.viewer')}
             </SegmentedButtonItem>
             <SegmentedButtonItem
               compact
-              pressed={schemaMode === 'json'}
+              selected={schemaMode === 'json'}
               onClick={() => setSchemaMode('json')}
             >
               {t('schema.modes.json')}
             </SegmentedButtonItem>
             <SegmentedButtonItem
               compact
-              pressed={schemaMode === 'yaml'}
+              selected={schemaMode === 'yaml'}
               onClick={() => setSchemaMode('yaml')}
             >
               {t('schema.modes.yaml')}
diff --git a/src/shared/components/ServiceAccountTokenStatus.tsx b/src/shared/components/ServiceAccountTokenStatus.tsx
index 558156c714..3cc4a25613 100644
--- a/src/shared/components/ServiceAccountTokenStatus.tsx
+++ b/src/shared/components/ServiceAccountTokenStatus.tsx
@@ -61,11 +61,11 @@ export const ServiceAccountTokenStatus = ({
         <Popover
           ref={popoverRef}
           open={openPopover}
-          onAfterClose={e => {
+          onClose={e => {
             e.stopPropagation();
             setOpenPopover(false);
           }}
-          placementType="Right"
+          placement="End"
         >
           {accountTokenValues.tooltipContent}
         </Popover>,
diff --git a/src/shared/contexts/ErrorModal/ErrorModal.tsx b/src/shared/contexts/ErrorModal/ErrorModal.tsx
index 6f2b7cf023..cc244099e0 100644
--- a/src/shared/contexts/ErrorModal/ErrorModal.tsx
+++ b/src/shared/contexts/ErrorModal/ErrorModal.tsx
@@ -54,7 +54,7 @@ export function ErrorModal({
 
   return (
     <Dialog
-      onAfterClose={close}
+      onClose={close}
       className={classNames('error-modal', { 'error-modal--wider': wider })}
       header={
         <Bar
diff --git a/src/shared/hooks/useProtectedResources.js b/src/shared/hooks/useProtectedResources.js
index 1a7bcbcad2..3aed4fde9f 100644
--- a/src/shared/hooks/useProtectedResources.js
+++ b/src/shared/hooks/useProtectedResources.js
@@ -73,7 +73,7 @@ export function useProtectedResources() {
           <ObjectStatus
             icon={<Icon name="locked" />}
             showDefaultIcon
-            state="Warning"
+            state="Critical"
             style={{ textOverflow: 'ellipsis' }}
           >
             {t('common.protected-resource')}
@@ -94,7 +94,7 @@ export function useProtectedResources() {
       return <></>;
     }
     return createPortal(
-      <Popover placementType="Right" ref={popoverRef}>
+      <Popover placement="End" ref={popoverRef}>
         <Text className="description">{popoverMessage}</Text>
       </Popover>,
       document.body,

From 3402a1ded4ae2a335d4a492e3898584fa84de5c3 Mon Sep 17 00:00:00 2001
From: Oliwia Gowor <oliwiagowor@gmail.com>
Date: Mon, 4 Nov 2024 19:00:36 +0100
Subject: [PATCH 2/4] fix: fix imports

---
 src/shared/components/GenericList/components.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/shared/components/GenericList/components.js b/src/shared/components/GenericList/components.js
index 7cdad591c1..0c14aebaae 100644
--- a/src/shared/components/GenericList/components.js
+++ b/src/shared/components/GenericList/components.js
@@ -10,8 +10,6 @@ import {
 } from '@ui5/webcomponents-react';
 import ListActions from 'shared/components/ListActions/ListActions';
 
-import ListActions from 'shared/components/ListActions/ListActions';
-
 export const BodyFallback = ({ children }) => (
   // TODO replace once new Table component is available in ui5-webcomponents-react
   <tr>

From 4c2df0a6f6d2b3359606dee0978ed9c1c4f8f8ee Mon Sep 17 00:00:00 2001
From: Oliwia Gowor <oliwiagowor@gmail.com>
Date: Mon, 4 Nov 2024 19:04:32 +0100
Subject: [PATCH 3/4] fix: fix table imports

---
 .../components/GenericList/GenericList.js     |  2 +-
 .../components/GenericList/components.js      | 30 +++++++------------
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/shared/components/GenericList/GenericList.js b/src/shared/components/GenericList/GenericList.js
index e0a26258aa..b7f325afa8 100644
--- a/src/shared/components/GenericList/GenericList.js
+++ b/src/shared/components/GenericList/GenericList.js
@@ -414,7 +414,7 @@ export const GenericList = ({
             () => handleRowClick(e),
           );
         }}
-        headerRow={
+        columns={
           <HeaderRenderer
             entries={entries}
             actions={actions}
diff --git a/src/shared/components/GenericList/components.js b/src/shared/components/GenericList/components.js
index 0c14aebaae..0a18312c5d 100644
--- a/src/shared/components/GenericList/components.js
+++ b/src/shared/components/GenericList/components.js
@@ -1,13 +1,9 @@
 import { useState } from 'react';
-import {
-  Button,
-  FlexBox,
-  Icon,
-  Text,
-  TableCell,
-  TableHeaderCell,
-  TableRow,
-} from '@ui5/webcomponents-react';
+import { Button, FlexBox, Icon, Text } from '@ui5/webcomponents-react';
+import { TableCell } from '@ui5/webcomponents-react-compat/dist/components/TableCell/index.js';
+import { TableColumn } from '@ui5/webcomponents-react-compat/dist/components/TableColumn/index.js';
+import { TableRow } from '@ui5/webcomponents-react-compat/dist/components/TableRow/index.js';
+
 import ListActions from 'shared/components/ListActions/ListActions';
 
 export const BodyFallback = ({ children }) => (
@@ -30,21 +26,21 @@ export const HeaderRenderer = ({
   let emptyColumn = null;
   if (actions.length) {
     emptyColumn = (
-      <TableHeaderCell
+      <TableColumn
         slot={slot}
         key="actions-column"
         aria-label="actions-column"
         minWidth={850}
       >
         <Text />
-      </TableHeaderCell>
+      </TableColumn>
     );
   }
   const Header = (
     <>
       {headerRenderer().map((h, index) => {
         return (
-          <TableHeaderCell
+          <TableColumn
             slot={`${slot}-${index}`}
             key={typeof h === 'object' ? index : h}
             minWidth={
@@ -63,18 +59,14 @@ export const HeaderRenderer = ({
             aria-label={`${typeof h === 'object' ? index : h}-column`}
           >
             <Text>{h}</Text>
-          </TableHeaderCell>
+          </TableColumn>
         );
       })}
       {emptyColumn}
       {displayArrow && (
-        <TableHeaderCell
-          slot={slot}
-          key="arrow-column"
-          aria-label="arrow-column"
-        >
+        <TableColumn slot={slot} key="arrow-column" aria-label="arrow-column">
           <Text />
-        </TableHeaderCell>
+        </TableColumn>
       )}
     </>
   );

From fb912343a93876196d4b3e1836995db645be7cf1 Mon Sep 17 00:00:00 2001
From: Oliwia Gowor <oliwiagowor@gmail.com>
Date: Wed, 6 Nov 2024 08:17:23 +0100
Subject: [PATCH 4/4] fix: fix unused

---
 .../ClusterOverview/ClusterValidation/ClusterValidation.tsx     | 2 ++
 .../components/DynamicPageComponent/DynamicPageComponent.js     | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx b/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx
index 1c837cc007..b5060eb49d 100644
--- a/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx
+++ b/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx
@@ -173,6 +173,8 @@ export const ClusterValidation = () => {
         </>
       }
     >
+      {!scanReady && <Loader type="Indeterminate" />}
+
       <Section titleText={t('cluster-validation.scan.scope')}>
         <FlexBox className="bsl-has-padding-small">
           <InfoTile
diff --git a/src/shared/components/DynamicPageComponent/DynamicPageComponent.js b/src/shared/components/DynamicPageComponent/DynamicPageComponent.js
index 92a5a5a5a3..1e850a1950 100644
--- a/src/shared/components/DynamicPageComponent/DynamicPageComponent.js
+++ b/src/shared/components/DynamicPageComponent/DynamicPageComponent.js
@@ -20,8 +20,6 @@ import { isResourceEditedState } from 'state/resourceEditedAtom';
 import { isFormOpenState } from 'state/formOpenAtom';
 import { handleActionIfFormOpen } from '../UnsavedMessageBox/helpers';
 
-import { ObjectPageHeader } from '@ui5/webcomponents-react';
-
 const Column = ({ title, children, columnSpan, image, style = {} }) => {
   const styleComputed = { gridColumn: columnSpan, ...style };
   return (