From 01faec3a05e15f8e6d87ac1de8586f10c5512f93 Mon Sep 17 00:00:00 2001
From: Jim Ehrismann <jehrismann@mirantis.com>
Date: Wed, 20 Oct 2021 11:34:21 -0400
Subject: [PATCH] address review comments, plus added toolbar/menu to
 port-forward details Drawer

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>
---
 src/common/routes/port-forwards.ts            |  2 +-
 .../port-forward-details.tsx                  | 31 +++++++++++++++----
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/common/routes/port-forwards.ts b/src/common/routes/port-forwards.ts
index 33d4822164..bf644e5003 100644
--- a/src/common/routes/port-forwards.ts
+++ b/src/common/routes/port-forwards.ts
@@ -27,7 +27,7 @@ export const portForwardsRoute: RouteProps = {
 };
 
 export interface PortForwardsRouteParams {
-  forwardport: string;
+  forwardport?: string;
 }
 
 export const portForwardsURL = buildURL<PortForwardsRouteParams>(portForwardsRoute.path);
diff --git a/src/renderer/components/+network-port-forwards/port-forward-details.tsx b/src/renderer/components/+network-port-forwards/port-forward-details.tsx
index 8e75862668..4fa4b395f7 100644
--- a/src/renderer/components/+network-port-forwards/port-forward-details.tsx
+++ b/src/renderer/components/+network-port-forwards/port-forward-details.tsx
@@ -28,6 +28,7 @@ import { Drawer, DrawerItem } from "../drawer";
 import { cssNames } from "../../utils";
 import { podsApi, serviceApi } from "../../../common/k8s-api/endpoints";
 import { getDetailsUrl } from "../kube-detail-params";
+import { PortForwardMenu } from "./port-forward-menu";
 
 interface Props {
   portForward: PortForwardItem;
@@ -36,19 +37,36 @@ interface Props {
 
 export class PortForwardDetails extends React.Component<Props> {
 
-  renderContent() {
+  renderResourceName() {
     const { portForward } = this.props;
+    const name = portForward.getName();
     const api = {
       "service": serviceApi,
       "pod": podsApi
     }[portForward.kind];
 
+    if (!api) {
+      return (
+        <span>{name}</span>
+      );
+    }
+
+    return (
+      <Link to={getDetailsUrl(api.getUrl({ name, namespace: portForward.getNs() }))}>
+        {name}
+      </Link>
+    );
+  }
+
+  renderContent() {
+    const { portForward } = this.props;
+
+    if (!portForward) return null;
+
     return (
       <div>
         <DrawerItem name="Resource Name">
-          <Link to={getDetailsUrl(api.getUrl({ name: portForward.getName(), namespace: portForward.getNs() }))}>
-            {portForward.getName()}
-          </Link>
+          {this.renderResourceName()}
         </DrawerItem>
         <DrawerItem name="Namespace">
           {portForward.getNs()}
@@ -71,15 +89,16 @@ export class PortForwardDetails extends React.Component<Props> {
 
   render() {
     const { hideDetails, portForward } = this.props;
-    const title = "Port Forward";
+    const toolbar = <PortForwardMenu portForward={portForward} toolbar hideDetails={hideDetails}/>;
 
     return (
       <Drawer
         className="PortForwardDetails"
         usePortal={true}
         open={!!portForward}
-        title={title}
+        title="Port Forward"
         onClose={hideDetails}
+        toolbar={toolbar}
       >
         {this.renderContent()}
       </Drawer>