fix(kiali): Js error and dependency updates (#8492)

* Update packages dependencies

Signed-off-by: josunect <jcordoba@redhat.com>

* Update packages

Signed-off-by: josunect <jcordoba@redhat.com>

* Fix JS error

Signed-off-by: josunect <jcordoba@redhat.com>

* Update changeset

Signed-off-by: josunect <jcordoba@redhat.com>

* dedupe

Signed-off-by: josunect <jcordoba@redhat.com>

* Update deps

Signed-off-by: josunect <jcordoba@redhat.com>

---------

Signed-off-by: josunect <jcordoba@redhat.com>

Author: josunect

workspaces/kiali/.changeset/mean-swans-go.md

@@ -0,0 +1,7 @@
+---
+'@backstage-community/plugin-kiali-backend': minor
+'@backstage-community/plugin-kiali-common': minor
+'@backstage-community/plugin-kiali': minor
+---
+
+Fix JS error. Update dependencies

workspaces/kiali/package.json

@@ -59,7 +59,8 @@
   },
   "resolutions": {
     "@types/react": "^18",
-    "@types/react-dom": "^18"
+    "@types/react-dom": "^18",
+    "zod": "^3.25.76"
   },
   "prettier": "@backstage/cli/config/prettier",
   "lint-staged": {

workspaces/kiali/packages/backend/package.json

@@ -22,10 +22,10 @@
   },
   "dependencies": {
     "@backstage-community/plugin-kiali-backend": "workspace:^",
-    "@backstage/backend-defaults": "^0.13.0",
+    "@backstage/backend-defaults": "^0.16.0",
     "@backstage/config": "^1.3.5",
     "@backstage/plugin-app-backend": "^0.5.7",
-    "@backstage/plugin-auth-backend": "^0.25.5",
+    "@backstage/plugin-auth-backend": "^0.27.1",
     "@backstage/plugin-auth-backend-module-github-provider": "^0.3.8",
     "@backstage/plugin-auth-backend-module-guest-provider": "^0.2.13",
     "@backstage/plugin-auth-node": "^0.6.8",

workspaces/kiali/plugins/kiali-backend/package.json

@@ -43,8 +43,8 @@
   },
   "configSchema": "config.d.ts",
   "dependencies": {
-    "@backstage/backend-defaults": "^0.13.0",
-    "@backstage/backend-plugin-api": "^1.4.4",
+    "@backstage/backend-defaults": "^0.16.0",
+    "@backstage/backend-plugin-api": "^1.8.0",
     "@backstage/catalog-client": "^1.12.0",
     "@backstage/catalog-model": "^1.7.5",
     "@backstage/config": "^1.3.5",

workspaces/kiali/plugins/kiali-common/src/utils/IstioConfigUtils.ts

@@ -224,13 +224,28 @@ export function getIstioObjectGVK(
   apiVersion?: string,
   kind?: string,
 ): GroupVersionKind {
-  if (!apiVersion || !kind) {
+  if (!kind) {
     return { Group: '', Version: '', Kind: '' };
   }
+  if (!apiVersion?.trim()) {
+    return (
+      dicTypeToGVK[kind as gvkType] ?? {
+        Group: '',
+        Version: '',
+        Kind: kind,
+      }
+    );
+  }
   const parts = apiVersion.split('/');
   if (parts.length !== 2) {
     // should not happen, but not the best way, only an alternative
-    return dicTypeToGVK[kind as gvkType];
+    return (
+      dicTypeToGVK[kind as gvkType] ?? {
+        Group: '',
+        Version: '',
+        Kind: kind,
+      }
+    );
   }
   return { Group: parts[0], Version: parts[1], Kind: kind! };
 }

workspaces/kiali/plugins/kiali/src/components/Drawers/IstioConfigDetailsDrawer.tsx

@@ -20,7 +20,6 @@ import {
 import { useApi } from '@backstage/core-plugin-api';
 import { CircularProgress } from '@material-ui/core';
 import { default as React } from 'react';
-import { useAsyncFn, useDebounce } from 'react-use';
 import { IstioConfigInfo } from '../../pages/IstioConfigDetails/IstioConfigInfo';
 import { kialiApiRef } from '../../services/Api';
 import { KialiAppState, KialiContext } from '../../store';
@@ -35,15 +34,25 @@ export const IstioConfigDetailsDrawer = (props: Props) => {
   const kialiClient = useApi(kialiApiRef);
   const kialiState = React.useContext(KialiContext) as KialiAppState;
   const [istioConfig, setIstioConfig] = React.useState<IstioConfigDetails>();
+  const [loading, setLoading] = React.useState(true);
 
-  const fetchIstioConfig = async () => {
+  React.useEffect(() => {
+    let cancelled = false;
     if (!props.namespace || !props.istioType || !props.name) {
-      return;
+      setIstioConfig(undefined);
+      setLoading(false);
+      return undefined;
     }
 
+    setLoading(true);
+    setIstioConfig(undefined);
+
     kialiClient
       .getIstioConfigDetail(props.namespace, props.istioType, props.name, true)
       .then((istioConfigResponse: IstioConfigDetails) => {
+        if (cancelled) {
+          return;
+        }
         if (
           istioConfigResponse &&
           Object.keys(istioConfigResponse).length > 0
@@ -52,20 +61,28 @@ export const IstioConfigDetailsDrawer = (props: Props) => {
         }
       })
       .catch(err => {
-        kialiState.alertUtils!.add(
-          `Error fetching Istio config: ${err.message || 'Unknown error'}`,
-        );
+        if (!cancelled) {
+          kialiState.alertUtils!.add(
+            `Error fetching Istio config: ${err.message || 'Unknown error'}`,
+          );
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setLoading(false);
+        }
       });
-  };
 
-  const [{ loading }, refresh] = useAsyncFn(
-    async () => {
-      await fetchIstioConfig();
-    },
-    [],
-    { loading: true },
-  );
-  useDebounce(refresh, 10);
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    kialiClient,
+    kialiState.alertUtils,
+    props.name,
+    props.namespace,
+    props.istioType,
+  ]);
 
   if (loading) {
     return <CircularProgress />;

workspaces/kiali/plugins/kiali/src/components/VirtualList/Renderers.tsx

@@ -207,7 +207,10 @@ export const item: Renderer<TResource> = (
         cluster={resource.cluster}
         objectGVK={
           config.name === 'istio'
-            ? getIstioObjectGVK('', (resource as IstioConfigItem).kind)
+            ? getIstioObjectGVK(
+                (resource as IstioConfigItem).apiVersion,
+                (resource as IstioConfigItem).kind,
+              )
             : undefined
         }
         key={key}
@@ -412,9 +415,13 @@ export const istioConfiguration: Renderer<IstioConfigItem> = (
       style={{ verticalAlign: 'middle' }}
     >
       {validation ? (
-        <Link to="">
+        <Link
+          to="#"
+          onClick={(e: React.MouseEvent) => e.preventDefault()}
+          style={{ color: 'inherit', textDecoration: 'none' }}
+        >
           <ValidationObjectSummary
-            id={`${item.name}-config-validation`}
+            id={`${resource.name}-config-validation`}
             validations={[validation]}
             reconciledCondition={reconciledCondition}
           />

workspaces/kiali/plugins/kiali/src/pages/IstioConfigDetails/IstioConfigInfo.tsx

@@ -34,7 +34,7 @@ export const IstioConfigInfo = (istioConfigProps: IstioConfigInfoProps) => {
   return (
     <Grid container spacing={1} style={{ paddingTop: '20px' }}>
       <Grid
-        key={`Card_${istioConfigProps.istioConfig?.resource.kind}`}
+        key={`Card_${istioConfigProps.istioConfig?.resource?.kind ?? 'loading'}`}
         item
         xs={size}
       >

workspaces/kiali/plugins/kiali/src/utils/IstioConfigUtils.ts

@@ -212,13 +212,28 @@ export function getIstioObjectGVK(
   apiVersion?: string,
   kind?: string,
 ): GroupVersionKind {
-  if (!apiVersion || !kind) {
+  if (!kind) {
     return { Group: '', Version: '', Kind: '' };
   }
+  if (!apiVersion?.trim()) {
+    return (
+      dicTypeToGVK[kind as gvkType] ?? {
+        Group: '',
+        Version: '',
+        Kind: kind,
+      }
+    );
+  }
   const parts = apiVersion.split('/');
   if (parts.length !== 2) {
     // should not happen, but not the best way, only an alternative
-    return dicTypeToGVK[kind as gvkType];
+    return (
+      dicTypeToGVK[kind as gvkType] ?? {
+        Group: '',
+        Version: '',
+        Kind: kind,
+      }
+    );
   }
   return { Group: parts[0], Version: parts[1], Kind: kind! };
 }