Merge pull request #4270 from lensapp/feature/port-forward-notification

'About Port Forwarding' notification

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

@@ -28,7 +28,7 @@ import { observable, makeObservable, reaction } from "mobx";
 import { cssNames } from "../../utils";
 import { Notifications } from "../notifications";
 import { Button } from "../button";
-import { addPortForward, getPortForward, openPortForward, PortForwardDialog, portForwardStore, predictProtocol, removePortForward } from "../../port-forward";
+import { aboutPortForwarding, addPortForward, getPortForward, getPortForwards, openPortForward, PortForwardDialog, portForwardStore, predictProtocol, removePortForward } from "../../port-forward";
 import type { ForwardedPort } from "../../port-forward";
 import { Spinner } from "../spinner";
 
@@ -93,12 +93,20 @@ export class ServicePortComponent extends React.Component<Props> {
     this.waiting = true;
 
     try {
+      // determine how many port-forwards are already active
+      const { length } = await getPortForwards();
+
       this.forwardPort = await addPortForward(portForward);
 
       if (this.forwardPort) {
         portForward.forwardPort = this.forwardPort;
         openPortForward(portForward);
         this.isPortForwarded = true;
+
+        // if this is the first port-forward show the about notification
+        if (!length) {
+          aboutPortForwarding();
+        }
       }
     } catch (error) {
       Notifications.error(`Error occurred starting port-forward, the local port may not be available or the ${portForward.kind} ${portForward.name} may not be reachable`);

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

@@ -28,7 +28,7 @@ import { observable, makeObservable, reaction } from "mobx";
 import { cssNames } from "../../utils";
 import { Notifications } from "../notifications";
 import { Button } from "../button";
-import { addPortForward, getPortForward, openPortForward, PortForwardDialog, portForwardStore, predictProtocol, removePortForward } from "../../port-forward";
+import { aboutPortForwarding, addPortForward, getPortForward, getPortForwards, openPortForward, PortForwardDialog, portForwardStore, predictProtocol, removePortForward } from "../../port-forward";
 import type { ForwardedPort } from "../../port-forward";
 import { Spinner } from "../spinner";
 
@@ -97,12 +97,20 @@ export class PodContainerPort extends React.Component<Props> {
     this.waiting = true;
 
     try {
+      // determine how many port-forwards are already active
+      const { length } = await getPortForwards();
+
       this.forwardPort = await addPortForward(portForward);
 
       if (this.forwardPort) {
         portForward.forwardPort = this.forwardPort;
         openPortForward(portForward);
         this.isPortForwarded = true;
+
+        // if this is the first port-forward show the about notification
+        if (!length) {
+          aboutPortForwarding();
+        }
       }
     } catch (error) {
       Notifications.error(`Error occurred starting port-forward, the local port may not be available or the ${portForward.kind} ${portForward.name} may not be reachable`);

src/renderer/port-forward/index.ts

@@ -22,4 +22,5 @@
 export * from "./port-forward.store";
 export * from "./port-forward-item";
 export * from "./port-forward-dialog";
+export * from "./port-forward-notify";
 export * from "./port-forward-utils";

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

@@ -29,9 +29,9 @@ import { Wizard, WizardStep } from "../components/wizard";
 import { Input } from "../components/input";
 import { Notifications } from "../components/notifications";
 import { cssNames } from "../utils";
-import { addPortForward, modifyPortForward } from "./port-forward.store";
+import { addPortForward, getPortForwards, modifyPortForward } from "./port-forward.store";
 import type { ForwardedPort } from "./port-forward-item";
-import { openPortForward } from ".";
+import { aboutPortForwarding, openPortForward } from ".";
 import { Checkbox } from "../components/checkbox";
 
 interface Props extends Partial<DialogProps> {
@@ -96,6 +96,9 @@ export class PortForwardDialog extends Component<Props> {
     const { currentPort, desiredPort, close } = this;
 
     try {
+      // determine how many port-forwards are already active
+      const { length } = await getPortForwards();
+
       let port: number;
 
       portForward.protocol = dialogState.useHttps ? "https" : "http";
@@ -105,6 +108,11 @@ export class PortForwardDialog extends Component<Props> {
       } else {
         portForward.forwardPort = desiredPort;
         port = await addPortForward(portForward);
+
+        // if this is the first port-forward show the about notification
+        if (!length) {
+          aboutPortForwarding();
+        }
       }
 
       if (dialogState.openInBrowser) {

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

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import React from "react";
+import { portForwardsURL } from "../../common/routes/port-forwards";
+import { Button } from "../components/button";
+import { Notifications, notificationsStore } from "../components/notifications";
+import { navigate } from "../navigation";
+import { getHostedClusterId } from "../utils";
+
+
+export function aboutPortForwarding() {
+  const notificationId = `port-forward-notification-${getHostedClusterId()}`;
+
+  Notifications.info(
+    (
+      <div className="flex column gaps">
+        <b>Port Forwarding</b>
+        <p>
+            You can manage your port forwards on the Port Forwarding Page.
+        </p>
+        <div className="flex gaps row align-left box grow">
+          <Button
+            active
+            outlined
+            label="Go to Port Forwarding"
+            onClick={() => {
+              navigate(portForwardsURL());
+              notificationsStore.remove(notificationId);
+            }}
+          />
+        </div>
+      </div>
+    ),
+    {
+      id: notificationId,
+      timeout: 10_000,
+    },
+  );
+}