feat(topology): remove usage of k8s frontend plugin in topology & tekton

plugins/tekton/README.md

@@ -8,7 +8,7 @@ The Tekton plugin enables you to visualize the `PipelineRun` resources available
 
 #### Prerequisites
 
-- The Kubernetes plugins including `@backstage/plugin-kubernetes` and `@backstage/plugin-kubernetes-backend` are installed and configured by following the [installation](https://backstage.io/docs/features/kubernetes/installation) and [configuration](https://backstage.io/docs/features/kubernetes/configuration) guides.
+- The Kubernetes backend plugin `@backstage/plugin-kubernetes-backend` is installed and configured by following the [installation](https://backstage.io/docs/features/kubernetes/installation) and [configuration](https://backstage.io/docs/features/kubernetes/configuration) guides.
 
 - The following `customResources` component is added in the [`app-config.yaml`](https://backstage.io/docs/features/kubernetes/configuration#configuring-kubernetes-clusters) file:
   ```yaml

plugins/tekton/dev/index.tsx

@@ -4,12 +4,12 @@ import { Entity } from '@backstage/catalog-model';
 import { createDevApp } from '@backstage/dev-utils';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
 import {
-  EntityKubernetesContent,
   KubernetesApi,
   kubernetesApiRef,
+  kubernetesAuthProvidersApiRef,
   KubernetesProxyApi,
   kubernetesProxyApiRef,
-} from '@backstage/plugin-kubernetes';
+} from '@backstage/plugin-kubernetes-react';
 import { TestApiProvider } from '@backstage/test-utils';
 
 import { createDevAppThemes } from '@redhat-developer/red-hat-developer-hub-theme';
@@ -166,6 +166,21 @@ class MockKubernetesClient implements KubernetesApi {
   }
 }
 
+const mockKubernetesAuthProviderApiRef = {
+  decorateRequestBodyForAuth: async () => {
+    return {
+      entity: {
+        apiVersion: 'v1',
+        kind: 'xyz',
+        metadata: { name: 'hey' },
+      },
+    };
+  },
+  getCredentials: async () => {
+    return {};
+  },
+};
+
 createDevApp()
   .addThemes(createDevAppThemes())
   .addPage({
@@ -177,6 +192,7 @@ createDevApp()
             new MockKubernetesClient(mockKubernetesPlrResponse),
           ],
           [kubernetesProxyApiRef, new MockKubernetesProxyApi()],
+          [kubernetesAuthProvidersApiRef, mockKubernetesAuthProviderApiRef],
         ]}
       >
         <EntityProvider entity={mockEntity}>
@@ -187,23 +203,5 @@ createDevApp()
     title: 'Tekton CI',
     path: '/tekton',
   })
-  .addPage({
-    element: (
-      <TestApiProvider
-        apis={[
-          [
-            kubernetesApiRef,
-            new MockKubernetesClient(mockKubernetesPlrResponse),
-          ],
-        ]}
-      >
-        <EntityProvider entity={mockEntity}>
-          <EntityKubernetesContent />
-        </EntityProvider>
-      </TestApiProvider>
-    ),
-    title: 'k8s Page',
-    path: '/kubernetes',
-  })
   .registerPlugin(tektonPlugin)
   .render();

plugins/tekton/package.json

@@ -32,7 +32,7 @@
     "@backstage/core-components": "^0.14.7",
     "@backstage/core-plugin-api": "^1.9.2",
     "@backstage/plugin-catalog-react": "^1.12.0",
-    "@backstage/plugin-kubernetes": "^0.11.10",
+    "@backstage/plugin-kubernetes-react": "^0.4.0",
     "@backstage/plugin-kubernetes-common": "^0.7.6",
     "@backstage/theme": "^0.5.5",
     "@janus-idp/shared-react": "2.7.1",

plugins/tekton/src/components/PipelineRunList/PipelineRunOutput.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Progress } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
-import { kubernetesProxyApiRef } from '@backstage/plugin-kubernetes';
+import { kubernetesProxyApiRef } from '@backstage/plugin-kubernetes-react';
 
 import {
   ACSCheckResults,

plugins/tekton/src/components/PipelineRunLogs/PodLogsDownloadLink.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useApi } from '@backstage/core-plugin-api';
-import { kubernetesProxyApiRef } from '@backstage/plugin-kubernetes';
+import { kubernetesProxyApiRef } from '@backstage/plugin-kubernetes-react';
 
 import { V1Pod } from '@kubernetes/client-node';
 import { createStyles, Link, makeStyles, Theme } from '@material-ui/core';

plugins/tekton/src/hooks/useAllWatchResources.test.ts

@@ -1,4 +1,4 @@
-import { KubernetesObjects } from '@backstage/plugin-kubernetes';
+import { KubernetesObjects } from '@backstage/plugin-kubernetes-react';
 
 import { renderHook } from '@testing-library/react';
 

plugins/tekton/src/hooks/useAllWatchResources.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 
-import { KubernetesObjects } from '@backstage/plugin-kubernetes';
+import { KubernetesObjects } from '@backstage/plugin-kubernetes-react';
 
 import { useDeepCompareMemoize } from '@janus-idp/shared-react';
 

plugins/tekton/src/hooks/usePodContainerLogs.ts

@@ -5,7 +5,7 @@ import { useApi } from '@backstage/core-plugin-api';
 import {
   ContainerScope,
   kubernetesProxyApiRef,
-} from '@backstage/plugin-kubernetes';
+} from '@backstage/plugin-kubernetes-react';
 
 import { V1Pod } from '@kubernetes/client-node';
 

plugins/tekton/src/hooks/usePodLogsOfPipelineRun.ts

@@ -3,7 +3,7 @@ import useAsyncRetry from 'react-use/lib/useAsyncRetry';
 import useInterval from 'react-use/lib/useInterval';
 
 import { useApi } from '@backstage/core-plugin-api';
-import { kubernetesProxyApiRef } from '@backstage/plugin-kubernetes';
+import { kubernetesProxyApiRef } from '@backstage/plugin-kubernetes-react';
 
 import { V1Container, V1Pod } from '@kubernetes/client-node';
 

plugins/tekton/src/hooks/useResourcesClusters.test.ts

@@ -1,4 +1,4 @@
-import { KubernetesObjects } from '@backstage/plugin-kubernetes';
+import { KubernetesObjects } from '@backstage/plugin-kubernetes-react';
 
 import { renderHook } from '@testing-library/react';
 

plugins/tekton/src/hooks/useResourcesClusters.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { KubernetesObjects } from '@backstage/plugin-kubernetes';
+import { KubernetesObjects } from '@backstage/plugin-kubernetes-react';
 
 import { useDeepCompareMemoize } from '@janus-idp/shared-react';
 

plugins/tekton/src/hooks/useTektonObjectResponse.test.ts

@@ -1,6 +1,6 @@
 import { act } from 'react';
 
-import { useKubernetesObjects } from '@backstage/plugin-kubernetes';
+import { useKubernetesObjects } from '@backstage/plugin-kubernetes-react';
 
 import { renderHook, waitFor } from '@testing-library/react';
 
@@ -11,7 +11,7 @@ import { useTektonObjectsResponse } from './useTektonObjectsResponse';
 
 const watchedResources = [ModelsPlural.pipelineruns, ModelsPlural.taskruns];
 
-jest.mock('@backstage/plugin-kubernetes', () => ({
+jest.mock('@backstage/plugin-kubernetes-react', () => ({
   useKubernetesObjects: jest.fn(),
 }));
 

plugins/tekton/src/hooks/useTektonObjectsResponse.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useEntity } from '@backstage/plugin-catalog-react';
-import { useKubernetesObjects } from '@backstage/plugin-kubernetes';
+import { useKubernetesObjects } from '@backstage/plugin-kubernetes-react';
 
 import { isEqual } from 'lodash';
 

plugins/topology/README.md

@@ -8,7 +8,7 @@ The Topology plugin enables you to visualize the workloads such as Deployment, J
 
 #### Prerequisites
 
-- The Kubernetes plugins including `@backstage/plugin-kubernetes` and `@backstage/plugin-kubernetes-backend` are installed and configured by following the [installation](https://backstage.io/docs/features/kubernetes/installation) and [configuration](https://backstage.io/docs/features/kubernetes/configuration) guides.
+- The Kubernetes backend plugin `@backstage/plugin-kubernetes-backend` is installed and configured by following the [installation](https://backstage.io/docs/features/kubernetes/installation) and [configuration](https://backstage.io/docs/features/kubernetes/configuration) guides.
 - The Kubernetes plugin is configured and connects to the cluster using a `ServiceAccount`.
 - The [`ClusterRole`](https://backstage.io/docs/features/kubernetes/configuration#role-based-access-control) must be granted to `ServiceAccount` accessing the cluster. If you have the Backstage Kubernetes plugin configured, then the `ClusterRole` is already granted.
 

plugins/topology/dev/index.tsx

@@ -4,10 +4,10 @@ import { Entity } from '@backstage/catalog-model';
 import { createDevApp } from '@backstage/dev-utils';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
 import {
-  EntityKubernetesContent,
   KubernetesApi,
   kubernetesApiRef,
-} from '@backstage/plugin-kubernetes';
+  kubernetesAuthProvidersApiRef,
+} from '@backstage/plugin-kubernetes-react';
 import { TestApiProvider } from '@backstage/test-utils';
 
 import { createDevAppThemes } from '@redhat-developer/red-hat-developer-hub-theme';
@@ -107,13 +107,29 @@ class MockKubernetesClient implements KubernetesApi {
   }
 }
 
+const mockKubernetesAuthProviderApiRef = {
+  decorateRequestBodyForAuth: async () => {
+    return {
+      entity: {
+        apiVersion: 'v1',
+        kind: 'xyz',
+        metadata: { name: 'hey' },
+      },
+    };
+  },
+  getCredentials: async () => {
+    return {};
+  },
+};
+
 createDevApp()
   .addThemes(createDevAppThemes())
   .addPage({
     element: (
       <TestApiProvider
         apis={[
           [kubernetesApiRef, new MockKubernetesClient(mockKubernetesResponse)],
+          [kubernetesAuthProvidersApiRef, mockKubernetesAuthProviderApiRef],
         ]}
       >
         <EntityProvider entity={mockEntity}>
@@ -126,20 +142,5 @@ createDevApp()
     title: 'Topology Page',
     path: '/topology',
   })
-  .addPage({
-    element: (
-      <TestApiProvider
-        apis={[
-          [kubernetesApiRef, new MockKubernetesClient(mockKubernetesResponse)],
-        ]}
-      >
-        <EntityProvider entity={mockEntity}>
-          <EntityKubernetesContent />
-        </EntityProvider>
-      </TestApiProvider>
-    ),
-    title: 'k8s Page',
-    path: '/kubernetes',
-  })
   .registerPlugin(topologyPlugin)
   .render();

plugins/topology/package.json

@@ -30,7 +30,7 @@
     "@backstage/core-components": "^0.14.7",
     "@backstage/core-plugin-api": "^1.9.2",
     "@backstage/plugin-catalog-react": "^1.12.0",
-    "@backstage/plugin-kubernetes": "^0.11.10",
+    "@backstage/plugin-kubernetes-react": "^0.4.0",
     "@backstage/plugin-kubernetes-common": "^0.7.6",
     "@backstage/plugin-permission-react": "^0.4.22",
     "@backstage/theme": "^0.5.5",

plugins/topology/src/hooks/useAllWatchResources.test.ts

@@ -1,4 +1,4 @@
-import { KubernetesObjects } from '@backstage/plugin-kubernetes';
+import { KubernetesObjects } from '@backstage/plugin-kubernetes-react';
 
 import { renderHook } from '@testing-library/react';
 

plugins/topology/src/hooks/useAllWatchResources.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { KubernetesObjects } from '@backstage/plugin-kubernetes';
+import { KubernetesObjects } from '@backstage/plugin-kubernetes-react';
 
 import { K8sResponseData } from '../types/types';
 import { getK8sResources } from '../utils/topology-utils';

plugins/topology/src/hooks/useK8sObjectsResponse.test.ts

@@ -1,6 +1,6 @@
 import { act } from 'react';
 
-import { useKubernetesObjects } from '@backstage/plugin-kubernetes';
+import { useKubernetesObjects } from '@backstage/plugin-kubernetes-react';
 
 import { renderHook } from '@testing-library/react';
 
@@ -16,7 +16,7 @@ const watchedResources = [
   ModelsPlural.replicasets,
 ];
 
-jest.mock('@backstage/plugin-kubernetes', () => ({
+jest.mock('@backstage/plugin-kubernetes-react', () => ({
   useKubernetesObjects: jest.fn(),
 }));
 

plugins/topology/src/hooks/useK8sObjectsResponse.ts

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import { useEntity } from '@backstage/plugin-catalog-react';
-import { useKubernetesObjects } from '@backstage/plugin-kubernetes';
+import { useKubernetesObjects } from '@backstage/plugin-kubernetes-react';
 
 import { K8sResourcesContextData } from '../types/types';
 import { useAllWatchResources } from './useAllWatchResources';

plugins/topology/src/hooks/useK8sResourcesClusters.test.ts

@@ -1,4 +1,4 @@
-import { KubernetesObjects } from '@backstage/plugin-kubernetes';
+import { KubernetesObjects } from '@backstage/plugin-kubernetes-react';
 
 import { renderHook } from '@testing-library/react';
 

plugins/topology/src/hooks/useK8sResourcesClusters.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { KubernetesObjects } from '@backstage/plugin-kubernetes';
+import { KubernetesObjects } from '@backstage/plugin-kubernetes-react';
 
 import { ClusterErrors } from '../types/types';
 import { getClusters } from '../utils/topology-utils';

plugins/topology/src/hooks/usePodLogs.ts

@@ -3,7 +3,7 @@ import useAsyncRetry from 'react-use/lib/useAsyncRetry';
 import useInterval from 'react-use/lib/useInterval';
 
 import { useApi } from '@backstage/core-plugin-api';
-import { kubernetesProxyApiRef } from '@backstage/plugin-kubernetes';
+import { kubernetesProxyApiRef } from '@backstage/plugin-kubernetes-react';
 
 import { ContainerScope } from '../components/Topology/TopologySideBar/PodLogs/types';
 

plugins/topology/src/plugin.ts

@@ -4,9 +4,23 @@ import '@patternfly/patternfly/patternfly-charts-theme-dark.css';
 import '@patternfly/patternfly/utilities/Accessibility/accessibility.css';
 
 import {
+  createApiFactory,
   createPlugin,
   createRoutableExtension,
+  discoveryApiRef,
+  fetchApiRef,
+  gitlabAuthApiRef,
+  googleAuthApiRef,
+  microsoftAuthApiRef,
+  oktaAuthApiRef,
+  oneloginAuthApiRef,
 } from '@backstage/core-plugin-api';
+import {
+  kubernetesApiRef,
+  KubernetesAuthProviders,
+  kubernetesAuthProvidersApiRef,
+  KubernetesBackendClient,
+} from '@backstage/plugin-kubernetes-react';
 
 import { rootRouteRef } from './routes';
 
@@ -15,6 +29,53 @@ export const topologyPlugin = createPlugin({
   routes: {
     root: rootRouteRef,
   },
+  apis: [
+    createApiFactory({
+      api: kubernetesAuthProvidersApiRef,
+      deps: {
+        gitlabAuthApi: gitlabAuthApiRef,
+        googleAuthApi: googleAuthApiRef,
+        microsoftAuthApi: microsoftAuthApiRef,
+        oktaAuthApi: oktaAuthApiRef,
+        oneloginAuthApi: oneloginAuthApiRef,
+      },
+      factory: ({
+        gitlabAuthApi,
+        googleAuthApi,
+        microsoftAuthApi,
+        oktaAuthApi,
+        oneloginAuthApi,
+      }) => {
+        const oidcProviders = {
+          gitlab: gitlabAuthApi,
+          google: googleAuthApi,
+          microsoft: microsoftAuthApi,
+          okta: oktaAuthApi,
+          onelogin: oneloginAuthApi,
+        };
+
+        return new KubernetesAuthProviders({
+          microsoftAuthApi,
+          googleAuthApi,
+          oidcProviders,
+        });
+      },
+    }),
+    createApiFactory({
+      api: kubernetesApiRef,
+      deps: {
+        discoveryApi: discoveryApiRef,
+        fetchApi: fetchApiRef,
+        kubernetesAuthProvidersApi: kubernetesAuthProvidersApiRef,
+      },
+      factory: ({ discoveryApi, fetchApi, kubernetesAuthProvidersApi }) =>
+        new KubernetesBackendClient({
+          discoveryApi,
+          fetchApi,
+          kubernetesAuthProvidersApi,
+        }),
+    }),
+  ],
 });
 
 export const TopologyPage = topologyPlugin.provide(