fix(kiali): fix dev links

plugins/kiali/src/pages/AppDetails/AppDetailsPage.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useParams } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useAsyncFn, useDebounce } from 'react-use';
 
 import { Content, EmptyState } from '@backstage/core-components';
@@ -9,7 +9,10 @@ import { CircularProgress, Tab, Tabs } from '@material-ui/core';
 import { AxiosError } from 'axios';
 
 import { HistoryManager } from '../../app/History';
-import { BreadcrumbView } from '../../components/BreadcrumbView/BreadcrumbView';
+import {
+  BreadcrumbView,
+  getPath,
+} from '../../components/BreadcrumbView/BreadcrumbView';
 import { DefaultSecondaryMasthead } from '../../components/DefaultSecondaryMasthead/DefaultSecondaryMasthead';
 import * as FilterHelper from '../../components/FilterList/FilterHelper';
 import { IstioMetrics } from '../../components/Metrics/IstioMetrics';
@@ -25,7 +28,9 @@ import { MetricsObjectTypes } from '../../types/Metrics';
 import { AppInfo } from './AppInfo';
 
 export const AppDetailsPage = (props: { entity?: boolean }) => {
-  const { namespace, app } = useParams();
+  const path = getPath(useLocation());
+  const namespace = path.namespace;
+  const app = path.item;
   const kialiClient = useApi(kialiApiRef);
   const kialiState = React.useContext(KialiContext) as KialiAppState;
   const [appItem, setAppItem] = React.useState<App>();

plugins/kiali/src/pages/IstioConfigDetails/IstioConfigDetailsPage.tsx

@@ -1,14 +1,17 @@
 import * as React from 'react';
 import AceEditor from 'react-ace';
-import { useParams } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 import { Content } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
 import { Grid } from '@material-ui/core';
 import jsYaml from 'js-yaml';
 
-import { BreadcrumbView } from '../../components/BreadcrumbView/BreadcrumbView';
+import {
+  BreadcrumbView,
+  getPath,
+} from '../../components/BreadcrumbView/BreadcrumbView';
 import { DefaultSecondaryMasthead } from '../../components/DefaultSecondaryMasthead/DefaultSecondaryMasthead';
 import { kialiApiRef } from '../../services/Api';
 import { KialiAppState, KialiContext } from '../../store';
@@ -32,7 +35,11 @@ import { IstioConfigDetailsOverview } from './IstioConfigDetailsOverview';
 export const IstioConfigDetailsPage = (props: {
   entity?: boolean;
 }): React.JSX.Element => {
-  const { namespace, objectType, object } = useParams();
+  const path = getPath(useLocation());
+  const namespace = path.namespace;
+  const object = path.item;
+  const objectType = path.istioType;
+
   const kialiClient = useApi(kialiApiRef);
   const kialiState = React.useContext(KialiContext) as KialiAppState;
   const [istioConfig, setIstioConfig] = React.useState<IstioConfigDetails>();

plugins/kiali/src/pages/Kiali/Header/KialiHeader.tsx

@@ -26,8 +26,8 @@ export const KialiHeader = () => {
           label={homeCluster?.name}
         />
       </Tooltip>
-      <HelpKiali color="white" />
-      <MessageCenter color="white" />
+      <HelpKiali />
+      <MessageCenter />
       {kialiState.authentication.session && (
         <div
           style={{
@@ -36,7 +36,7 @@ export const KialiHeader = () => {
             justifyContent: 'space-between',
           }}
         >
-          <span style={{ margin: '10px', color: 'white' }}>
+          <span style={{ margin: '10px' }}>
             <b>User : </b>
             {kialiState.authentication.session.username || 'anonymous'}
           </span>

plugins/kiali/src/pages/Kiali/Header/KialiTabs.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Location, useLocation, useNavigate } from 'react-router-dom';
+import { Location, useLocation } from 'react-router-dom';
 
 import { HeaderTabs } from '@backstage/core-components';
-import { useRouteRef } from '@backstage/core-plugin-api';
 
 import {
   appsRouteRef,
@@ -33,22 +32,21 @@ export const KialiTabs = () => {
   const path = getPath(loc);
   const [selectedTab, setSelectedTab] = React.useState<number>(path);
   const tabs = [
-    { label: 'Overview', route: useRouteRef(overviewRouteRef) },
-    { label: 'Workloads', route: useRouteRef(workloadsRouteRef) },
-    { label: 'Services', route: useRouteRef(servicesRouteRef) },
-    { label: 'Applications', route: useRouteRef(appsRouteRef) },
-    { label: 'Istio Config', route: useRouteRef(istioConfigRouteRef) },
+    { label: 'Overview', route: overviewRouteRef.path },
+    { label: 'Workloads', route: workloadsRouteRef.path },
+    { label: 'Services', route: servicesRouteRef.path },
+    { label: 'Applications', route: appsRouteRef.path },
+    { label: 'Istio Config', route: istioConfigRouteRef.path },
   ];
-  const navigate = useNavigate();
+
   return (
     <HeaderTabs
       selectedIndex={selectedTab}
       onChange={(index: number) => {
-        navigate(tabs[index].route());
         setSelectedTab(index);
       }}
       tabs={tabs.map(({ label }, index) => ({
-        id: index.toString(),
+        id: tabs[index].route,
         label,
       }))}
     />

plugins/kiali/src/pages/Kiali/Header/NamespaceSelector.tsx

@@ -56,7 +56,6 @@ export const NamespaceSelector = (props: { page?: boolean }) => {
         onChange={handleChange}
         renderValue={selected => (selected as string[]).join(', ')}
         MenuProps={MenuProps}
-        style={{ color: props.page ? 'white' : undefined }}
       >
         {(kialiState.namespaces.items || []).map(ns => (
           <MenuItem key={ns.name} value={ns.name}>

plugins/kiali/src/pages/ServiceDetails/ServiceDetailsPage.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useParams } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useAsyncFn, useDebounce } from 'react-use';
 
 import { Content, EmptyState } from '@backstage/core-components';
@@ -8,7 +8,10 @@ import { useApi } from '@backstage/core-plugin-api';
 import { CircularProgress, Tab, Tabs } from '@material-ui/core';
 
 import { HistoryManager } from '../../app/History';
-import { BreadcrumbView } from '../../components/BreadcrumbView/BreadcrumbView';
+import {
+  BreadcrumbView,
+  getPath,
+} from '../../components/BreadcrumbView/BreadcrumbView';
 import { DefaultSecondaryMasthead } from '../../components/DefaultSecondaryMasthead/DefaultSecondaryMasthead';
 import * as FilterHelper from '../../components/FilterList/FilterHelper';
 import { IstioMetrics } from '../../components/Metrics/IstioMetrics';
@@ -29,7 +32,9 @@ import { ServiceDetailsInfo } from '../../types/ServiceInfo';
 import { ServiceInfo } from './ServiceInfo';
 
 export const ServiceDetailsPage = (props: { entity?: boolean }) => {
-  const { namespace, service } = useParams();
+  const path = getPath(useLocation());
+  const namespace = path.namespace;
+  const service = path.item;
   const kialiClient = useApi(kialiApiRef);
   const kialiState = React.useContext(KialiContext) as KialiAppState;
   const [serviceItem, setServiceItem] = React.useState<ServiceDetailsInfo>();

plugins/kiali/src/pages/WorkloadDetails/WorkloadDetailsPage.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react';
-import { useParams } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useAsyncFn, useDebounce } from 'react-use';
 
 import { Content, EmptyState } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
 import { CircularProgress, Tab, Tabs } from '@material-ui/core';
 
-import { BreadcrumbView } from '../../components/BreadcrumbView/BreadcrumbView';
+import {
+  BreadcrumbView,
+  getPath,
+} from '../../components/BreadcrumbView/BreadcrumbView';
 import { DefaultSecondaryMasthead } from '../../components/DefaultSecondaryMasthead/DefaultSecondaryMasthead';
 import * as FilterHelper from '../../components/FilterList/FilterHelper';
 import { IstioMetrics } from '../../components/Metrics/IstioMetrics';
@@ -24,7 +27,9 @@ import { WorkloadInfo } from './WorkloadInfo';
 import { WorkloadPodLogs } from './WorkloadPodLogs';
 
 export const WorkloadDetailsPage = (props: { entity?: boolean }) => {
-  const { namespace, workload } = useParams();
+  const path = getPath(useLocation());
+  const namespace = path.namespace;
+  const workload = path.item;
   const kialiClient = useApi(kialiApiRef);
   const kialiState = React.useContext(KialiContext) as KialiAppState;
   const [workloadItem, setWorkloadItem] = React.useState<Workload>();

plugins/kiali/src/routes.ts

@@ -10,31 +10,31 @@ export const rootRouteRef = createRouteRef({
 
 /* Kiali Page Routes */
 export const overviewRouteRef = createSubRouteRef({
-  id: 'kiali/overview',
+  id: 'overview',
   path: '/overview',
   parent: rootRouteRef,
 });
 
 export const workloadsRouteRef: SubRouteRef<undefined> = createSubRouteRef({
-  id: 'kiali/workloads',
+  id: 'workloads',
   path: '/workloads',
   parent: rootRouteRef,
 });
 
 export const servicesRouteRef: SubRouteRef<undefined> = createSubRouteRef({
-  id: 'kiali/services',
+  id: 'services',
   path: '/services',
   parent: rootRouteRef,
 });
 
 export const appsRouteRef: SubRouteRef<undefined> = createSubRouteRef({
-  id: 'kiali/applications',
+  id: 'applications',
   path: '/applications',
   parent: rootRouteRef,
 });
 
 export const istioConfigRouteRef = createSubRouteRef({
-  id: 'kiali/istio',
+  id: 'istio',
   parent: rootRouteRef,
   path: '/istio',
 });