address more review comments and change dashboard tab name to 'Port Forwarding'

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

src/renderer/components/+network-port-forwards/port-forwards.tsx

@@ -72,7 +72,7 @@ export class PortForwards extends React.Component {
           searchFilters={[
             item => item.getSearchFields(),
           ]}
-          renderHeaderTitle="Forwarded Ports"
+          renderHeaderTitle="Port Forwarding"
           renderTableHeader={[
             { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
             { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },

src/renderer/components/+network-services/service-port-component.tsx

@@ -25,7 +25,7 @@ import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import type { Service, ServicePort } from "../../../common/k8s-api/endpoints";
 import { observable, makeObservable, reaction } from "mobx";
-import { cssNames, disposer } from "../../utils";
+import { cssNames } from "../../utils";
 import { Notifications } from "../notifications";
 import { Button } from "../button";
 import { addPortForward, getPortForward, openPortForward, PortForwardDialog, portForwardStore, removePortForward } from "../../port-forward";
@@ -52,14 +52,8 @@ export class ServicePortComponent extends React.Component<Props> {
 
   componentDidMount() {
     disposeOnUnmount(this, [
-      this.watch(),
-    ]);
-  }
-
-  watch() {
-    return disposer(
       reaction(() => portForwardStore.portForwards, () => this.init()),
-    );
+    ]);
   }
 
   init() {
@@ -77,11 +71,7 @@ export class ServicePortComponent extends React.Component<Props> {
       port: port.port.toString(),
       forwardPort: this.forwardPort.toString()
     };
-    let activePort = await getPortForward(portForward);
+    const activePort = await getPortForward(portForward) ?? 0;
-
-    if (!activePort) {
-      activePort = 0;
-    }
 
     this.forwardPort = activePort;
     this.isPortForwarded = activePort ? true : false;

src/renderer/components/+network/network.tsx

@@ -74,7 +74,7 @@ export class Network extends React.Component {
     }
 
     tabs.push({
-      title: "Forwarded Ports",
+      title: "Port Forwarding",
       component: PortForwards,
       url: routes.portForwardsURL(),
       routePath: routes.portForwardsRoute.path.toString(),

src/renderer/components/+workloads-pods/pod-container-port.tsx

@@ -24,7 +24,7 @@ import "./pod-container-port.scss";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import type { Pod } from "../../../common/k8s-api/endpoints";
-import { observable, makeObservable, reaction, IReactionDisposer } from "mobx";
+import { observable, makeObservable, reaction } from "mobx";
 import { cssNames } from "../../utils";
 import { Notifications } from "../notifications";
 import { Button } from "../button";
@@ -56,16 +56,8 @@ export class PodContainerPort extends React.Component<Props> {
 
   componentDidMount() {
     disposeOnUnmount(this, [
-      this.watch(),
-    ]);
-  }
-
-  watch() {
-    const disposers: IReactionDisposer[] = [
       reaction(() => portForwardStore.portForwards, () => this.init()),
-    ];
+    ]);
-
-    return () => disposers.forEach((dispose) => dispose());
   }
 
   init() {
@@ -83,11 +75,7 @@ export class PodContainerPort extends React.Component<Props> {
       port: port.containerPort.toString(),
       forwardPort: this.forwardPort.toString()
     };
-    let activePort = await getPortForward(portForward);
+    const activePort = await getPortForward(portForward) ?? 0;
-
-    if (!activePort) {
-      activePort = 0;
-    }
 
     this.forwardPort = activePort;
     this.isPortForwarded = activePort ? true : false;

src/renderer/port-forward/port-forward-dialog.tsx

@@ -125,7 +125,7 @@ export class PortForwardDialog extends Component<Props> {
             <div className="current-port" data-testid="current-port">
               Local port to forward from:
             </div>
-            <Input className={"portInput"}
+            <Input className="portInput"
               type="number"
               min="0"
               max="65535"
@@ -141,7 +141,7 @@ export class PortForwardDialog extends Component<Props> {
 
   render() {
     const { className, ...dialogProps } = this.props;
-    const resourceName = this.portForward ? this.portForward.name : "";
+    const resourceName = this.portForward?.name ?? "";
     const header = (
       <h5>
         Port Forwarding for <span>{resourceName}</span>

src/renderer/port-forward/port-forward.store.ts

@@ -97,7 +97,7 @@ export async function addPortForward(portForward: ForwardedPort): Promise<number
   let response: PortForwardResult;
 
   try {
-    response = await apiBase.post<PortForwardResult>(`/pods/port-forward/${portForward.namespace}/${portForward.kind}/${portForward.name}?port=${portForward.port}&forwardPort=${portForward.forwardPort}`, {});
+    response = await apiBase.post<PortForwardResult>(`/pods/port-forward/${portForward.namespace}/${portForward.kind}/${portForward.name}?port=${portForward.port}&forwardPort=${portForward.forwardPort}`);
     
     if (response?.port && response.port != +portForward.forwardPort) {
       logger.warn(`specified ${portForward.forwardPort} got ${response.port}`);
@@ -114,7 +114,7 @@ export async function getPortForward(portForward: ForwardedPort): Promise<number
   let response: PortForwardResult;
 
   try {
-    response = await apiBase.get<PortForwardResult>(`/pods/port-forward/${portForward.namespace}/${portForward.kind}/${portForward.name}?port=${portForward.port}&forwardPort=${portForward.forwardPort}`, {});
+    response = await apiBase.get<PortForwardResult>(`/pods/port-forward/${portForward.namespace}/${portForward.kind}/${portForward.name}?port=${portForward.port}&forwardPort=${portForward.forwardPort}`);
   } catch (error) {
     logger.warn(error); // don't care, caller must check 
   }
@@ -140,7 +140,7 @@ export async function modifyPortForward(portForward: ForwardedPort, desiredPort:
 
 export async function removePortForward(portForward: ForwardedPort) {
   try {
-    await apiBase.del(`/pods/port-forward/${portForward.namespace}/${portForward.kind}/${portForward.name}?port=${portForward.port}&forwardPort=${portForward.forwardPort}`, {});
+    await apiBase.del(`/pods/port-forward/${portForward.namespace}/${portForward.kind}/${portForward.name}?port=${portForward.port}&forwardPort=${portForward.forwardPort}`);
     await waitUntilFree(+portForward.forwardPort, 200, 1000);
   } catch (error) {
     logger.warn(error); // don't care, caller must check 
@@ -150,7 +150,7 @@ export async function removePortForward(portForward: ForwardedPort) {
 
 export async function getPortForwards(): Promise<ForwardedPort[]> {
   try {
-    const response = await apiBase.get<PortForwardsResult>(`/pods/port-forwards`, {});
+    const response = await apiBase.get<PortForwardsResult>(`/pods/port-forwards`);
 
     return response.portForwards;
   } catch (error) {