[UX]: allow to navigate to namespace-details from other resource deta…

…ils view (#7203) * UX: allow to navigate to namespace (if available) in every kube-resource details view (via: `<KubeObjectMeta/>`)
lensapp · Feb 21, 2023 · df1b947 · df1b947
1 parent d8acff6
commit df1b947
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/...__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap b/...__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap
@@ -79,7 +79,11 @@ exports[`disable kube object detail items when cluster is not relevant given ext
             <span
               class="value"
             >
-              some-namespace
+              <a
+                href="/workloads?kube-details=%2Fapi%2Fv1%2Fnamespaces%2Fsome-namespace&kube-selected=%2Fapis%2Fsome-api-version%2Fnamespaces%2Fsome-namespace%2Fsome-kind%2Fsome-name"
+              >
+                some-namespace
+              </a>
             </span>
           </div>
           <div
@@ -695,7 +699,11 @@ exports[`disable kube object detail items when cluster is not relevant given ext
             <span
               class="value"
             >
-              some-namespace
+              <a
+                href="/workloads?kube-details=%2Fapi%2Fv1%2Fnamespaces%2Fsome-namespace&kube-selected=%2Fapis%2Fsome-api-version%2Fnamespaces%2Fsome-namespace%2Fsome-kind%2Fsome-name"
+              >
+                some-namespace
+              </a>
             </span>
           </div>
           <div>
@@ -1306,7 +1314,11 @@ exports[`disable kube object detail items when cluster is not relevant given not
             <span
               class="value"
             >
-              some-namespace
+              <a
+                href="/workloads?kube-details=%2Fapi%2Fv1%2Fnamespaces%2Fsome-namespace&kube-selected=%2Fapis%2Fsome-api-version%2Fnamespaces%2Fsome-namespace%2Fsome-kind%2Fsome-name"
+              >
+                some-namespace
+              </a>
             </span>
           </div>
           <div>

diff --git a/...details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap b/...details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap
@@ -79,7 +79,11 @@ exports[`reactively hide kube object detail item renders 1`] = `
             <span
               class="value"
             >
-              some-namespace
+              <a
+                href="/workloads?kube-details=%2Fapi%2Fv1%2Fnamespaces%2Fsome-namespace&kube-selected=%2Fapis%2Fsome-api-version%2Fnamespaces%2Fsome-namespace%2Fsome-kind%2Fsome-name"
+              >
+                some-namespace
+              </a>
             </span>
           </div>
           <div>
@@ -690,7 +694,11 @@ exports[`reactively hide kube object detail item when the item is shown renders
             <span
               class="value"
             >
-              some-namespace
+              <a
+                href="/workloads?kube-details=%2Fapi%2Fv1%2Fnamespaces%2Fsome-namespace&kube-selected=%2Fapis%2Fsome-api-version%2Fnamespaces%2Fsome-namespace%2Fsome-kind%2Fsome-name"
+              >
+                some-namespace
+              </a>
             </span>
           </div>
           <div

diff --git a/packages/core/src/renderer/components/kube-object-meta/kube-object-meta.tsx b/packages/core/src/renderer/components/kube-object-meta/kube-object-meta.tsx
@@ -19,6 +19,8 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import getDetailsUrlInjectable from "../kube-detail-params/get-details-url.injectable";
 import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable";
 import loggerInjectable from "../../../common/logger.injectable";
+import type { NamespaceApi } from "../../../common/k8s-api/endpoints";
+import namespaceApiInjectable from "../../../common/k8s-api/endpoints/namespace.api.injectable";
 
 export interface KubeObjectMetaProps {
   object: KubeObject;
@@ -28,20 +30,24 @@ export interface KubeObjectMetaProps {
 interface Dependencies {
   getDetailsUrl: GetDetailsUrl;
   apiManager: ApiManager;
+  namespaceApi: NamespaceApi;
   logger: Logger;
 }
 
-const NonInjectedKubeObjectMeta = observer(({
-  apiManager,
-  getDetailsUrl,
-  object,
-  hideFields = [
-    "uid",
-    "resourceVersion",
-    "selfLink",
-  ],
-  logger,
-}: Dependencies & KubeObjectMetaProps) => {
+const NonInjectedKubeObjectMeta = observer((
+  {
+    apiManager,
+    getDetailsUrl,
+    object,
+    hideFields = [
+      "uid",
+      "resourceVersion",
+      "selfLink",
+    ],
+    logger,
+    namespaceApi,
+  }
+    : Dependencies & KubeObjectMetaProps) => {
   if (!object) {
     return null;
   }
@@ -59,6 +65,10 @@ const NonInjectedKubeObjectMeta = observer(({
     getFinalizers, getId, getName, metadata: { creationTimestamp },
   } = object;
   const ownerRefs = object.getOwnerRefs();
+  const namespace = getNs();
+  const namespaceDetailsUrl = namespace ? getDetailsUrl(
+    namespaceApi.formatUrlForNotListing({ name: namespace }),
+  ) : "";
 
   return (
     <>
@@ -71,8 +81,8 @@ const NonInjectedKubeObjectMeta = observer(({
         {getName()}
         <KubeObjectStatusIcon key="icon" object={object} />
       </DrawerItem>
-      <DrawerItem name="Namespace" hidden={isHidden("namespace") || !getNs()}>
-        {getNs()}
+      <DrawerItem name="Namespace" hidden={isHidden("namespace") || !namespace}>
+        <Link to={namespaceDetailsUrl}>{namespace}</Link>
       </DrawerItem>
       <DrawerItem name="UID" hidden={isHidden("uid")}>
         {getId()}
@@ -122,5 +132,6 @@ export const KubeObjectMeta = withInjectables<Dependencies, KubeObjectMetaProps>
     getDetailsUrl: di.inject(getDetailsUrlInjectable),
     apiManager: di.inject(apiManagerInjectable),
     logger: di.inject(loggerInjectable),
+    namespaceApi: di.inject(namespaceApiInjectable),
   }),
 });