fix: ui5 errors after merge

Author: chriskari

src/components/App/App.tsx

@@ -81,6 +81,7 @@ export default function App() {
   useGetKymaResources();
 
   const showCompanion = useRecoilValue(showKymaCompanionState);
+
   if (isLoading) {
     return <Spinner />;
   }

src/components/KymaCompanion/components/Chat/Chat.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import React, { useEffect, useRef, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { FlexBox, Icon, Input } from '@ui5/webcomponents-react';
-import { spacing } from '@ui5/webcomponents-react-base';
 import { initialPromptState } from 'components/KymaCompanion/state/initalPromptAtom';
 import Message from './messages/Message';
 import Bubbles from './messages/Bubbles';
@@ -113,11 +112,7 @@ export default function Chat() {
       justifyContent="SpaceBetween"
       className="chat-container"
     >
-      <div
-        className="chat-list"
-        style={spacing.sapUiTinyMargin}
-        ref={containerRef}
-      >
+      <div className="chat-list sap-margin-tiny" ref={containerRef}>
         {chatHistory.map((message, index) => {
           return message.author === 'ai' ? (
             <React.Fragment key={index}>
@@ -149,7 +144,7 @@ export default function Chat() {
           />
         )}
       </div>
-      <div style={spacing.sapUiTinyMarginBeginEnd}>
+      <div className="sap-margin-x-tiny">
         <Input
           className="full-width"
           disabled={chatHistory[chatHistory.length - 1]?.isLoading}

src/components/KymaCompanion/components/Chat/messages/CodePanel.tsx

@@ -11,15 +11,11 @@ export default function CodePanel({ text }: CodePanelProps): JSX.Element {
   //const { language, code } = formatCodeSegment(text);
   return !language ? (
     <div className="code-response">
-      <Text className="text" renderWhitespace>
-        {code}
-      </Text>
+      <Text className="text">{code}</Text>
     </div>
   ) : (
     <Panel headerText={language} className="code-panel" fixed>
-      <Text className="text" renderWhitespace>
-        {code}
-      </Text>
+      <Text className="text">{code}</Text>
     </Panel>
   );
 }

src/components/KymaCompanion/components/Chat/messages/ErrorMessage.tsx

@@ -1,6 +1,5 @@
 import { Button, IllustratedMessage } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
-import { spacing } from '@ui5/webcomponents-react-base';
 
 interface ErrorMessageProps {
   errorOnInitialMessage: boolean;
@@ -19,7 +18,7 @@ export default function ErrorMessage({
       key="error-message"
       titleText={t('kyma-companion.error.title')}
       subtitleText={t('kyma-companion.error.subtitle')}
-      style={{ ...spacing.sapUiSmallMarginTop, padding: 0 }}
+      className="sap-margin-top-small no-padding"
     >
       {errorOnInitialMessage && (
         <Button onClick={resendInitialPrompt}>

src/components/KymaCompanion/components/Chat/messages/Message.tsx

@@ -33,15 +33,15 @@ export default function Message({
               <Text className="text">{chunk?.result}</Text>
               <div className="loading-status">
                 {index !== messageChunks.length - 1 ? (
-                  <ObjectStatus state="Success" showDefaultIcon />
+                  <ObjectStatus state="Positive" showDefaultIcon />
                 ) : (
-                  <BusyIndicator active size="Small" delay={0} />
+                  <BusyIndicator active size="S" delay={0} />
                 )}
               </div>
             </FlexBox>
           ))
         ) : (
-          <BusyIndicator active size="Medium" delay={0} />
+          <BusyIndicator active size="M" delay={0} />
         )}
       </div>
     );
@@ -53,16 +53,16 @@ export default function Message({
   return (
     <div className={'message ' + className}>
       {segmentedText && (
-        <Text className="text" renderWhitespace hyphenated>
+        <Text className="text">
           {segmentedText.map((segment, index) =>
             segment.type === 'bold' ? (
-              <Text key={index} className="text bold" renderWhitespace>
+              <Text key={index} className="text bold">
                 {segment.content}
               </Text>
             ) : segment.type === 'code' ? (
               <CodePanel key={index} text={segment.content} />
             ) : segment.type === 'highlighted' ? (
-              <Text key={index} className="text highlighted" renderWhitespace>
+              <Text key={index} className="text highlighted">
                 {segment.content}
               </Text>
             ) : segment.type === 'link' ? (

src/components/KymaCompanion/components/CompanionOpener.tsx

@@ -2,17 +2,16 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import {
   Button,
-  CustomListItem,
+  ListItemCustom,
   FlexBox,
   Icon,
   Input,
   List,
-  Loader,
   Popover,
   Text,
   Title,
+  BusyIndicator,
 } from '@ui5/webcomponents-react';
-import { spacing } from '@ui5/webcomponents-react-base';
 import { useTranslation } from 'react-i18next';
 import { useState } from 'react';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
@@ -100,10 +99,10 @@ export default function CompanionOpener({
         <Popover
           className="suggestions-popover"
           open={popoverOpen}
-          onAfterClose={() => setPopoverOpen(false)}
+          onClose={() => setPopoverOpen(false)}
           opener="openPopoverBtn"
-          placementType="Bottom"
-          horizontalAlign="Right"
+          horizontalAlign="End"
+          placement="Bottom"
         >
           <Input
             icon={<Icon name="paper-plane" onClick={onSubmitInput} />}
@@ -113,42 +112,38 @@ export default function CompanionOpener({
             placeholder={t('kyma-companion.opener.input-placeholder')}
             className="popover-input"
           />
-          <Title level="H5" style={spacing.sapUiTinyMargin}>
+          <Title level="H5" className="sap-margin-tiny">
             {t('kyma-companion.opener.suggestions')}
           </Title>
           {errorOccured || (!isLoading && suggestions.length === 0) ? (
             <FlexBox
               alignItems="Center"
               direction="Column"
-              style={{ gap: '8px', ...spacing.sapUiTinyMarginBottom }}
+              className="sap-margin-bottom-tiny"
+              style={{ gap: '8px' }}
             >
-              <Text style={spacing.sapUiTinyMargin}>
+              <Text className="sap-margin-tiny">
                 {t('kyma-companion.opener.error-message')}
               </Text>
               <Button onClick={fetchSuggestions}>
                 {t('common.buttons.retry')}
               </Button>
             </FlexBox>
           ) : isLoading ? (
-            <div
-              style={{
-                ...spacing.sapUiTinyMargin,
-                ...spacing.sapUiSmallMarginTop,
-              }}
-            >
-              <Loader progress="60%" />
+            <div className="sap-margin-tiny sap-margin-top-small">
+              <BusyIndicator active delay={1000} size="M" />
             </div>
           ) : (
-            <List style={spacing.sapUiTinyMarginTop}>
+            <List className="sap-margin-top-tiny">
               {suggestions.map((suggestion, index) => (
-                <CustomListItem
+                <ListItemCustom
                   key={index}
                   onClick={() => sendInitialPrompt(suggestion)}
                   className="custom-list-item"
                 >
                   <Text className="text">{suggestion}</Text>
                   <Icon name="navigation-right-arrow" />
-                </CustomListItem>
+                </ListItemCustom>
               ))}
             </List>
           )}

src/components/KymaCompanion/components/KymaCompanion.tsx

@@ -8,7 +8,6 @@ import {
   Toolbar,
   ToolbarSpacer,
 } from '@ui5/webcomponents-react';
-import { spacing } from '@ui5/webcomponents-react-base';
 import { useRecoilState } from 'recoil';
 import {
   ShowKymaCompanion,
@@ -24,11 +23,11 @@ export default function KymaCompanion() {
   );
 
   return (
-    <div id="companion_wrapper" style={spacing.sapUiTinyMargin}>
+    <div id="companion_wrapper" className="sap-margin-tiny">
       <Card
         className="kyma-companion"
         header={
-          <Toolbar toolbarStyle="Clear" className="kyma-companion__header">
+          <Toolbar design="Transparent" className="kyma-companion__header">
             <Title level="H4" className="title">
               {t('kyma-companion.name')}
             </Title>
@@ -60,7 +59,6 @@ export default function KymaCompanion() {
         }
       >
         <TabContainer
-          fixed
           contentBackgroundDesign="Transparent"
           className={`tab-container`}
         >