chore: Bump ui5

kyma/gulpfile.js

@@ -32,7 +32,7 @@ const loadExtensions = _obj(async function(extensionsFile, _, cb) {
         } else {
           resolve({
             contents: data.toString(),
-            name: filePath.substr(filePath.lastIndexOf('/') + 1),
+            name: filePath.substring(filePath.lastIndexOf('/') + 1),
           });
         }
       }),
@@ -43,7 +43,7 @@ const loadExtensions = _obj(async function(extensionsFile, _, cb) {
       .then(res => res.text())
       .then(contents => ({
         contents,
-        name: fileAddress.substr(fileAddress.lastIndexOf('/') + 1),
+        name: fileAddress.substring(fileAddress.lastIndexOf('/') + 1),
       }));
 
   const requests = list.map(({ source }) => {

package.json

@@ -57,24 +57,24 @@
     "@datasert/cronjs-parser": "^1.4.0",
     "@openapi-contrib/openapi-schema-to-json-schema": "^5.1.0",
     "@peculiar/x509": "^1.12.3",
-    "@sap-theming/theming-base-content": "^11.1.28",
-    "@sap-ui/common-css": "^0.38.0",
+    "@sap-theming/theming-base-content": "^11.29.3",
+    "@sap-ui/common-css": "^0.40.1",
     "@sentry/react": "^9.9.0",
     "@stoplight/json-ref-resolver": "^3.1.6",
     "@types/jsonpath": "^0.2.4",
     "@types/pluralize": "^0.0.29",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@ui-schema/ui-schema": "^0.4.7",
-    "@ui5/webcomponents": "^2.8.0",
-    "@ui5/webcomponents-base": "^2.8.0",
-    "@ui5/webcomponents-compat": "^2.8.0",
-    "@ui5/webcomponents-fiori": "^2.8.0",
-    "@ui5/webcomponents-icons": "^2.8.0",
-    "@ui5/webcomponents-icons-tnt": "^2.8.0",
-    "@ui5/webcomponents-react": "^2.8.1",
-    "@ui5/webcomponents-react-base": "^2.8.1",
-    "@ui5/webcomponents-react-charts": "^2.8.1",
-    "@ui5/webcomponents-react-compat": "^2.8.1",
+    "@ui5/webcomponents": "^2.10.0",
+    "@ui5/webcomponents-base": "^2.10.0",
+    "@ui5/webcomponents-compat": "^2.10.0",
+    "@ui5/webcomponents-fiori": "^2.10.0",
+    "@ui5/webcomponents-icons": "^2.10.0",
+    "@ui5/webcomponents-icons-tnt": "^2.10.0",
+    "@ui5/webcomponents-react": "^2.10.0",
+    "@ui5/webcomponents-react-base": "^2.10.0",
+    "@ui5/webcomponents-react-charts": "^2.10.0",
+    "@ui5/webcomponents-react-compat": "^2.10.0",
     "classnames": "^2.5.1",
     "copy-to-clipboard": "^3.2.0",
     "core-js": "^3.41.0",
@@ -113,8 +113,8 @@
     "url": "^0.11.4"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
     "@types/didyoumean": "^1.2.0",
     "@types/enzyme": "^3.10.12",
     "@types/file-saver": "^2.0.5",

src/command-pallette/CommandPalletteUI/CommandPaletteSearchBar.scss

@@ -1,5 +1,5 @@
 .command-palette-search-bar {
-  width: var(--_ui5-v2-8-0_input_width) !important;
+  width: var(--_ui5-v2-10-0_input_width) !important;
 }
 
 .ui5-shellbar-mid-content {

src/command-pallette/CommandPalletteUI/CommandPaletteUI.scss

@@ -1,6 +1,6 @@
 .command-palette-ui {
   position: absolute;
-  top: calc(var(--_ui5-v2-8-0_shellbar_root_height) + 0.5rem);
+  top: calc(var(--_ui5-v2-10-0_shellbar_root_height) + 0.5rem);
   width: 100%;
   height: 100%;
 
@@ -15,7 +15,7 @@
     width: 60vw;
     max-width: 700px;
     position: absolute;
-    top: calc(var(--_ui5-v2-8-0_shellbar_root_height) * -1);
+    top: calc(var(--_ui5-v2-10-0_shellbar_root_height) * -1);
     opacity: 0%; //prevent visually jumping
   }
 

src/components/App/ContentWrapper/ContentWrapper.scss

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

src/components/Clusters/components/AddClusterWizard.scss

@@ -37,8 +37,8 @@
 }
 
 ui5-wizard::part(step-content) {
-  --_ui5-v2-8-0_wiz_content_item_wrapper_padding: 0;
-  --_ui5-v2-8-0_wiz_content_item_wrapper_bg: transparent;
+  --_ui5-v2-10-0_wiz_content_item_wrapper_padding: 0;
+  --_ui5-v2-10-0_wiz_content_item_wrapper_bg: transparent;
 }
 
 ui5-wizard {

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

@@ -26,7 +26,7 @@ export function KubeconfigUpload({ kubeconfig, setKubeconfig, formRef }) {
         }
       } catch ({ message }) {
         // get the message until the newline
-        setError(message.substr(0, message.indexOf('\n')));
+        setError(message.substring(0, message.indexOf('\n')));
       }
     },
     [t, setError, setKubeconfig],

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

@@ -100,7 +100,7 @@ const ScanResultResourceTree = ({
   return (
     <TreeItem key={resource.endpoint} text={resource.kind} {...warningState}>
       {resource.items?.map((item, i) => (
-        <ScanResultItemTree key={i} item={item} />
+        <ScanResultItemTree key={`${item?.name}-${i}`} item={item} />
       ))}
     </TreeItem>
   );
@@ -117,7 +117,10 @@ const ScanResultResourcesTree = ({
   return (
     <>
       {filteredResources?.map((resource, i) => (
-        <ScanResultResourceTree key={i} resource={resource} />
+        <ScanResultResourceTree
+          key={`${resource?.kind}-${i}`}
+          resource={resource}
+        />
       ))}
     </>
   );
@@ -170,7 +173,10 @@ const ScanResultNamespacesTree = ({
     >
       {scanResult.namespaces &&
         Object.values(scanResult.namespaces).map((namespace, i) => (
-          <ScanResultNamespaceTree key={i} namespace={namespace} />
+          <ScanResultNamespaceTree
+            key={`${namespace.name}-${i}`}
+            namespace={namespace}
+          />
         ))}
     </TreeItem>
   );

src/components/Extensibility/ExtensibilityDetails.js

@@ -111,7 +111,7 @@ export const ExtensibilityDetailsCore = ({
               visibility: resource => prepareVisibility(def, resource),
               value: resource => (
                 <Widget
-                  key={i}
+                  key={`${resource}-${i}`}
                   value={resource}
                   structure={def}
                   schema={schema}
@@ -128,7 +128,7 @@ export const ExtensibilityDetailsCore = ({
           ? [
               (resource, i) => (
                 <Widget
-                  key={i}
+                  key={`${resource}-${i}`}
                   value={resource}
                   structure={body}
                   schema={schema}
@@ -149,7 +149,7 @@ export const ExtensibilityDetailsCore = ({
                 visibility: resource => prepareVisibility(def, resource),
                 value: resource => (
                   <Widget
-                    key={i}
+                    key={`${resource}-${i}`}
                     structure={def}
                     value={resource}
                     schema={schema}
@@ -169,7 +169,7 @@ export const ExtensibilityDetailsCore = ({
                 visibility: resource => prepareVisibility(def, resource),
                 value: resource => (
                   <Widget
-                    key={i}
+                    key={`${resource}-${i}`}
                     structure={def}
                     value={resource}
                     schema={schema}
@@ -198,7 +198,7 @@ export const ExtensibilityDetailsCore = ({
           ? [
               (resource, i) => (
                 <Widget
-                  key={i}
+                  key={`${resource}-${i}`}
                   value={resource}
                   structure={health}
                   schema={schema}

src/components/Extensibility/ExtensibilityInjections.js

@@ -77,7 +77,7 @@ const ExtensibilityInjections = ({ destination, slot, root }) => {
       <ExtensibilityInjection
         resMetaData={injection}
         root={root}
-        key={index}
+        key={`${injection}-${index}`}
       />,
     );
   });

src/components/Extensibility/ExtensibilityList.js

@@ -79,7 +79,7 @@ export const ExtensibilityListCore = ({
         header: widgetT(column),
         value: resource => (
           <Widget
-            key={i}
+            key={`${resource}-${i}`}
             value={resource}
             structure={column}
             schema={schema}

src/components/Extensibility/ExtensibilityWizard.js

@@ -164,7 +164,7 @@ export function ExtensibilityWizardCore({
         setError(null);
       }
     } catch ({ message }) {
-      setError(message.substr(0, message.indexOf('\n')));
+      setError(message.substring(0, message.indexOf('\n')));
       setResourcesWithStatuses([]);
     }
   }, [yaml, t, resourceInitial]);

src/components/Extensibility/components-form/GenericList.js

@@ -87,7 +87,7 @@ export function GenericList({
               defaultOpen={
                 defaultOpen || index === newItemIndex ? true : undefined
               }
-              key={index}
+              key={`${_val}-${index}`}
               title={pluralize(tFromStoreKeys(ownKeys, schema), 1)}
               nestingLevel={nestingLevel + 1}
               actions={

src/components/Extensibility/components-form/SimpleList.js

@@ -89,7 +89,7 @@ export function SimpleList({
           .map((_val, index) => {
             const ownKeys = storeKeys.push(index);
             return (
-              <li key={index}>
+              <li key={`${_val}-${index}`}>
                 <FlexBox alignItems="Center">
                   <div className="bsl-col-md--11 simple-list">
                     <PluginStack

src/components/Extensibility/components/FeaturedCard/FeaturedCard.js

@@ -104,7 +104,7 @@ export function FeaturedCard({ value, structure, schema, ...props }) {
               <div className="button-container sap-margin-top-small">
                 {structure.children?.slice(0, 2).map((def, idx) => (
                   <Widget
-                    key={idx}
+                    key={`${value}-${idx}`}
                     value={value}
                     structure={def}
                     schema={schema}

src/components/Extensibility/components/JoinedArray.js

@@ -28,10 +28,15 @@ export function JoinedArray({
     <div>
       {separator === 'break'
         ? value.map((val, i) => (
-            <div key={i}>
+            <div key={`${val}-${i}`}>
               {structure?.children
                 ? structure?.children?.map((def, idx) => (
-                    <Widget structure={def} value={val} key={idx} {...props} />
+                    <Widget
+                      structure={def}
+                      value={val}
+                      key={`${def}-${idx}`}
+                      {...props}
+                    />
                   ))
                 : val}
             </div>
@@ -44,7 +49,7 @@ export function JoinedArray({
                   structure={def}
                   arrayItems={[...arrayItems, val]}
                   value={val}
-                  key={idx}
+                  key={`${def}-${idx}`}
                   {...props}
                 />
               ))}

src/components/Extensibility/components/Panel.js

@@ -46,7 +46,7 @@ export function Panel({
           {Array.isArray(header)
             ? header.map((def, idx) => (
                 <Widget
-                  key={idx}
+                  key={`${def}-${idx}`}
                   structure={def}
                   schema={schema}
                   inlineContext={true}
@@ -77,7 +77,7 @@ export function Panel({
         <div className={bodyClassNames}>
           {structure.children.map((def, idx) => (
             <Widget
-              key={idx}
+              key={`${value}-${idx}`}
               value={value}
               structure={def}
               schema={schema}

src/components/Extensibility/components/Plain.js

@@ -4,6 +4,6 @@ import { Widget } from './Widget';
 
 export function Plain({ structure, ...props }) {
   return structure.children?.map((def, idx) => (
-    <Widget structure={def} {...props} key={idx} />
+    <Widget structure={def} {...props} key={`${def}-${idx}`} />
   ));
 }

src/components/Extensibility/components/Table.js

@@ -98,7 +98,7 @@ export function Table({
       return (
         <Widget
           {...props}
-          key={cellIndex}
+          key={`${entry}-${cellIndex}`}
           value={entry}
           scope={entry}
           arrayItems={[...arrayItems, entry]}
@@ -123,7 +123,7 @@ export function Table({
           {structure.collapsible.map((child, cellIndex) => (
             <Widget
               {...props}
-              key={cellIndex}
+              key={`${entry}-${cellIndex}`}
               value={entry}
               scope={entry}
               arrayItems={[...arrayItems, entry]}
@@ -149,7 +149,7 @@ export function Table({
       return (
         <Widget
           {...props}
-          key={index}
+          key={`${value}-${index}`}
           value={value}
           structure={content}
           schema={schema}

src/components/Extensibility/components/Widget.js

@@ -170,7 +170,7 @@ export function Widget({
   return Array.isArray(sanitizedValue) && !Renderer.array ? (
     sanitizedValue.map((valueItem, index) => (
       <SingleWidget
-        key={index}
+        key={`${valueItem}-${index}`}
         {...props}
         inlineRenderer={inlineRenderer}
         Renderer={Renderer}

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

@@ -31,7 +31,7 @@ export default function Bubbles({
     >
       {suggestions.map((suggestion, index) => (
         <Button
-          key={index}
+          key={`${suggestion}-${index}`}
           design="Default"
           className="bubble-button"
           onClick={() => onClick(suggestion)}

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

@@ -341,7 +341,7 @@ export const Chat = ({
         {chatHistory.map((message, index) => {
           const isLast = index === chatHistory.length - 1;
           return message.author === Author.AI ? (
-            <React.Fragment key={index}>
+            <React.Fragment key={`${message.author}-${index}`}>
               <Message
                 author={message.author}
                 messageChunks={message.messageChunks}
@@ -360,7 +360,7 @@ export const Chat = ({
           ) : (
             <Message
               author={Author.USER}
-              key={index}
+              key={`${message.author}-${index}`}
               messageChunks={message.messageChunks}
               isLoading={message.isLoading}
               hasError={message?.hasError ?? false}

src/components/KymaCompanion/components/Chat/TaskList/TasksList.tsx

@@ -35,7 +35,7 @@ export default function TasksList({
                   justifyContent="SpaceBetween"
                   alignItems="Center"
                   className="loading-item"
-                  key={index}
+                  key={`${task?.task_name}-box-${index}`}
                 >
                   {task?.status === 'completed' ? (
                     <ObjectStatus

src/components/Preferences/EditViewSettings.tsx

@@ -36,7 +36,7 @@ export default function EditViewSettings() {
         >
           {AVAILABLE_EDIT_VIEW_OPTIONS.map((available_option, index) => (
             <Option
-              key={index}
+              key={`${available_option.key}-${index}`}
               value={available_option.key}
               selected={preferencesViewType === available_option.key}
             >