fix: adjust render, css names and imports

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/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx

@@ -18,9 +18,9 @@ import {
   Card,
   CardHeader,
   FlexBox,
-  Loader,
   ProgressIndicator,
 } from '@ui5/webcomponents-react';
+import { Loader } from '@ui5/webcomponents-react-compat/dist/components/Loader/index.js';
 import { ClusterValidationConfigurationDialog } from './ClusterValidationConfiguration';
 import { resourcesState } from 'state/resourcesAtom';
 

src/components/KymaModules/KymaModulesList.js

@@ -8,7 +8,7 @@ import {
   Button,
   FlexBox,
   Text,
-  Badge,
+  Tag,
 } from '@ui5/webcomponents-react';
 
 import { HintButton } from 'shared/components/DescriptionHint/DescriptionHint';
@@ -191,9 +191,9 @@ export default function KymaModulesList({
               resource?.channel || kymaResource?.spec?.channel,
             ),
           ) ? (
-            <Badge style={spacing.sapUiTinyMarginBegin}>
+            <Tag style={spacing.sapUiTinyMarginBegin}>
               {t('kyma-modules.beta')}
-            </Badge>
+            </Tag>
           ) : null}
         </>,
         // Namespace
@@ -204,14 +204,14 @@ export default function KymaModulesList({
             ? moduleStatus?.channel
             : EMPTY_TEXT_PLACEHOLDER}
           {isChannelOverriden ? (
-            <Badge
+            <Tag
               hideStateIcon
               design="Set2"
               colorScheme="5"
               style={spacing.sapUiTinyMarginBegin}
             >
               {t('kyma-modules.channel-overridden')}
-            </Badge>
+            </Tag>
           ) : (
             ''
           )}

src/components/KymaModules/ModulesCard.js

@@ -5,7 +5,7 @@ import {
   Option,
   Panel,
   Select,
-  StandardListItem,
+  ListItemStandard,
   Text,
   Title,
 } from '@ui5/webcomponents-react';
@@ -28,7 +28,7 @@ export default function ModulesCard({
 
   return (
     <Card key={module.name} className="addModuleCard">
-      <StandardListItem
+      <ListItemStandard
         className="moduleCardHeader"
         onClick={e => setCheckbox(module, !isChecked(module.name), index)}
       >
@@ -52,7 +52,7 @@ export default function ModulesCard({
           </Text>
         </div>
         <img className="avatar" alt="SAP" src="\assets\sap-logo.svg" />
-      </StandardListItem>
+      </ListItemStandard>
       <div className="content">
         {module.docsUrl && (
           <ExternalLink

src/header/Header.tsx

@@ -8,8 +8,8 @@ import {
   MenuDomRef,
   ShellBar,
   ShellBarItem,
-  StandardListItem,
   ShellBarDomRef,
+  ListItemStandard,
 } from '@ui5/webcomponents-react';
 import { MenuItemClickEventDetail } from '@ui5/webcomponents/dist/Menu.js';
 
@@ -80,14 +80,14 @@ export function Header() {
   const clustersList = [
     ...inactiveClusterNames.map((name, index) => {
       return (
-        <StandardListItem accessibleName={name} data-key={index}>
+        <ListItemStandard accessibleName={name} data-key={index}>
           {name}
-        </StandardListItem>
+        </ListItemStandard>
       );
     }),
-    <StandardListItem accessibleName="all-clusters">
+    <ListItemStandard accessibleName="all-clusters">
       {t('clusters.overview.title-all-clusters')}
-    </StandardListItem>,
+    </ListItemStandard>,
   ];
 
   const openNewWindow = (link: string) => {

src/index.tsx

@@ -1,4 +1,3 @@
-import ReactDOM from 'react-dom';
 import i18next from 'i18next';
 import yaml from 'js-yaml';
 import { Suspense } from 'react';
@@ -25,6 +24,7 @@ import './styles/sapIllus-Fills.css';
 import './styles/sapIllus-Layout.css';
 import './styles/index.scss';
 import './styles/fiori-helpers.scss';
+import { createRoot } from 'react-dom/client';
 
 i18next
   .use(initReactI18next)
@@ -54,7 +54,10 @@ i18next
 
 savePreviousPath();
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container!);
+
+root.render(
   <RecoilRoot>
     <ThemeProvider>
       <BrowserRouter>
@@ -68,5 +71,4 @@ ReactDOM.render(
       </BrowserRouter>
     </ThemeProvider>
   </RecoilRoot>,
-  document.getElementById('root'),
 );

src/resources/Namespaces/YamlUpload/ResourceValidationResult.js

@@ -6,10 +6,9 @@ import {
   MessageStrip,
   ObjectStatus,
   Panel,
-  Toolbar,
-  ToolbarSpacer,
-  ValueState,
 } from '@ui5/webcomponents-react';
+import { Toolbar } from '@ui5/webcomponents-react-compat/dist/components/Toolbar/index.js';
+import { ToolbarSpacer } from '@ui5/webcomponents-react-compat/dist/components/ToolbarSpacer/index.js';
 import {
   getExtendedValidateResourceState,
   validateResourcesState,
@@ -82,9 +81,9 @@ const ValidationWarnings = ({ resource, validationSchema }) => {
           <FlexBox alignItems={'Begin'}>
             <ObjectStatus
               showDefaultIcon
-              state={ValueState.Warning}
+              state="Critical"
               style={{
-                marginLeft: '-0.3125rem', //set icon in one line with expand arrow. The value from class `--_ui5-v1-24-0_panel_content_padding` is divided by 2
+                marginLeft: '-0.3125rem', //set icon in one line with expand arrow. The value from class `--_ui5-v2-3-0_panel_content_padding` is divided by 2
                 ...spacing.sapUiSmallMarginEnd,
               }}
             />
@@ -115,9 +114,9 @@ export const ResourceValidationResult = ({ resource }) => {
   ];
   const statusIcon = validateResources.isEnabled ? (
     warnings.flat().length !== 0 ? (
-      <ObjectStatus showDefaultIcon state={ValueState.Warning} />
+      <ObjectStatus showDefaultIcon state="Critical" />
     ) : (
-      <ObjectStatus showDefaultIcon state={ValueState.Success} />
+      <ObjectStatus showDefaultIcon state="Positive" />
     )
   ) : (
     <div></div>

src/resources/Namespaces/YamlUpload/YamlResourcesList.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CustomListItem,
+  ListItemCustom,
   FlexBox,
   Icon,
   List,
@@ -162,7 +162,7 @@ export function YamlResourcesList({ resourcesData }) {
               </Card>
               <List>
                 {resources.map(r => (
-                  <CustomListItem type={'Inactive'}>
+                  <ListItemCustom type={'Inactive'}>
                     <FlexBox alignItems={'Center'}>
                       <Icon
                         className={`status status-${getIcon(r?.status)}`}
@@ -175,7 +175,7 @@ export function YamlResourcesList({ resourcesData }) {
                         {getStatus(r?.status)}
                       </Text>
                     </FlexBox>
-                  </CustomListItem>
+                  </ListItemCustom>
                 ))}
               </List>
             </FlexBox>

src/resources/Namespaces/YamlUpload/YamlUpload.js

@@ -26,7 +26,7 @@ function YamlUpload({
     ?.join('---\n');
 
   useEffect(() => {
-    if (!yamlContentString && editor) editor.getModel().setValue('');
+    if (!yamlContentString && editor) editor.getModel()?.setValue('');
   }, [editor, yamlContentString]);
 
   const updateYamlContent = useCallback(

src/shared/ResourceForm/components/CollapsibleSection.js

@@ -1,9 +1,11 @@
 import { useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { ResourceFormWrapper } from './Wrapper';
-import { Panel, Toolbar, ToolbarSpacer } from '@ui5/webcomponents-react';
+import { Panel } from '@ui5/webcomponents-react';
 import { Title } from './Title';
 import './CollapsibleSection.scss';
+import { Toolbar } from '@ui5/webcomponents-react-compat/dist/components/Toolbar/index.js';
+import { ToolbarSpacer } from '@ui5/webcomponents-react-compat/dist/components/ToolbarSpacer/index.js';
 
 export function CollapsibleSection({
   disabled = false,

src/shared/components/ExpandableListItem/ExpandableListItem.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useState } from 'react';
-import { Icon, StandardListItem } from '@ui5/webcomponents-react';
+import { Icon, ListItemStandard } from '@ui5/webcomponents-react';
 import { StatusBadge } from '../StatusBadge/StatusBadge';
 import { useTranslation } from 'react-i18next';
 import { spacing } from '@ui5/webcomponents-react-base';
@@ -29,7 +29,7 @@ export const ExpandableListItem = ({
 
   return (
     <>
-      <StandardListItem
+      <ListItemStandard
         onClick={() => setExpanded(!expanded)}
         className="expandable-item"
       >
@@ -57,7 +57,7 @@ export const ExpandableListItem = ({
             </StatusBadge>
           )}
         </div>
-      </StandardListItem>
+      </ListItemStandard>
       {expanded && (
         <>
           {content && (

src/shared/components/GenericList/GenericList.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { Table } from '@ui5/webcomponents-react';
+import { Table } from '@ui5/webcomponents-react-compat/dist/components/Table/index.js';
 import { useNavigate } from 'react-router-dom';
 import {
   BodyFallback,

src/shared/components/GenericList/SortModalPanel.js

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import {
   Button,
-  CustomListItem,
-  GroupHeaderListItem,
+  ListItemCustom,
+  ListItemGroup,
   List,
   RadioButton,
   Text,
@@ -72,27 +72,25 @@ export const SortModalPanel = ({
         }}
         accessibleName="sortOrderList"
       >
-        <GroupHeaderListItem>
-          {t('common.sorting.sort-order')}
-        </GroupHeaderListItem>
-        <CustomListItem selected={order === 'ASC'}>
+        <ListItemGroup>{t('common.sorting.sort-order')}</ListItemGroup>
+        <ListItemCustom selected={order === 'ASC'}>
           <RadioButton
             name="sortOrder"
             value="ASC"
             checked={order === 'ASC'}
             onChange={event => setOrder(event.target.value)}
           />
           <Text>{t('common.sorting.asc')}</Text>
-        </CustomListItem>
-        <CustomListItem selected={order === 'DESC'}>
+        </ListItemCustom>
+        <ListItemCustom selected={order === 'DESC'}>
           <RadioButton
             name="sortOrder"
             value="DESC"
             checked={order === 'DESC'}
             onChange={event => setOrder(event.target.value)}
           />
           <Text>{t('common.sorting.desc')}</Text>
-        </CustomListItem>
+        </ListItemCustom>
       </List>
       <List
         separators="All"
@@ -101,12 +99,12 @@ export const SortModalPanel = ({
         }}
         accessibleName="sortByList"
       >
-        <GroupHeaderListItem>{t('common.sorting.sort-by')}</GroupHeaderListItem>
+        <ListItemGroup>{t('common.sorting.sort-by')}</ListItemGroup>
         {sortBy && (
           <>
             {Object.entries(sortBy).flatMap(([value]) => {
               return (
-                <CustomListItem key={value} selected={name === value}>
+                <ListItemCustom key={value} selected={name === value}>
                   <RadioButton
                     name="sortBy"
                     value={value}
@@ -118,7 +116,7 @@ export const SortModalPanel = ({
                       ? t(`common.sorting.${value}`)
                       : value}
                   </Text>
-                </CustomListItem>
+                </ListItemCustom>
               );
             })}
           </>

src/shared/components/GenericList/components.js

@@ -1,13 +1,9 @@
 import { useState } from 'react';
-import {
-  Button,
-  FlexBox,
-  Icon,
-  Text,
-  TableCell,
-  TableColumn,
-  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';
 
 import { spacing } from '@ui5/webcomponents-react-base';

src/shared/components/Labels/Labels.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
-import { Badge, Label } from '@ui5/webcomponents-react';
+import { Tag, Label } from '@ui5/webcomponents-react';
 
 import { spacing } from '@ui5/webcomponents-react-base';
 import './Labels.scss';
@@ -51,7 +51,7 @@ export const Labels = ({
       ) : null}
       <div className={classNames('labels', className)} style={style}>
         {separatedLabels.map((label, id) => (
-          <Badge
+          <Tag
             aria-label={label}
             key={id}
             colorScheme="10"
@@ -63,7 +63,7 @@ export const Labels = ({
             {shortenLongLabels && label.length > SHORTENING_TRESHOLD
               ? shortenLabel(label)
               : label}
-          </Badge>
+          </Tag>
         ))}
       </div>
     </>