Add notification to user to add accessible namespaces (#2173)

src/renderer/components/+cluster-settings/cluster-settings.tsx

@@ -15,6 +15,7 @@ import { clusterStore } from "../../../common/cluster-store";
 import { PageLayout } from "../layout/page-layout";
 import { requestMain } from "../../../common/ipc";
 import { clusterActivateHandler, clusterRefreshHandler } from "../../../common/cluster-ipc";
+import { navigation } from "../../navigation";
 
 interface Props extends RouteComponentProps<IClusterSettingsRouteParams> {
 }
@@ -30,6 +31,10 @@ export class ClusterSettings extends React.Component<Props> {
   }
 
   componentDidMount() {
+    const { hash } = navigation.location;
+
+    document.getElementById(hash.slice(1))?.scrollIntoView();
+
     disposeOnUnmount(this, [
       reaction(() => this.cluster, this.refreshCluster, {
         fireImmediately: true,

src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx

@@ -16,7 +16,7 @@ export class ClusterAccessibleNamespaces extends React.Component<Props> {
   render() {
     return (
       <>
-        <SubTitle title="Accessible Namespaces" />
+        <SubTitle title="Accessible Namespaces" id="accessible-namespaces" />
         <p>This setting is useful for manually specifying which namespaces you have access to. This is useful when you do not have permissions to list namespaces.</p>
         <EditableList
           placeholder="Add new namespace..."

src/renderer/components/app.scss

@@ -50,6 +50,10 @@
   color: white;
 }
 
+*:target {
+  color: $textColorAccent;
+}
+
 html {
   font-size: 62.5%; // 1 rem == 10px
   color: $textColorPrimary;

src/renderer/components/layout/sub-title.tsx

@@ -6,19 +6,18 @@ interface Props {
   className?: string;
   title: React.ReactNode;
   compact?: boolean; // no bottom padding
+  id?: string;
 }
 
 export class SubTitle extends React.Component<Props> {
   render() {
-    const { compact, title, children } = this.props;
-    let { className } = this.props;
-
-    className = cssNames("SubTitle", className, {
+    const { className, compact, title, children, id } = this.props;
+    const classNames = cssNames("SubTitle", className, {
       compact,
     });
 
     return (
-      <div className={className}>
+      <div className={classNames} id={id}>
         {title} {children}
       </div>
     );

src/renderer/ipc/index.tsx

@@ -1,10 +1,13 @@
 import React from "react";
 import { ipcRenderer, IpcRendererEvent } from "electron";
-import { areArgsUpdateAvailableFromMain, UpdateAvailableChannel, onCorrect, UpdateAvailableFromMain, BackchannelArg } from "../../common/ipc";
+import { areArgsUpdateAvailableFromMain, UpdateAvailableChannel, onCorrect, UpdateAvailableFromMain, BackchannelArg, ClusterListNamespaceForbiddenChannel, isListNamespaceForbiddenArgs, ListNamespaceForbiddenArgs } from "../../common/ipc";
 import { Notifications, notificationsStore } from "../components/notifications";
 import { Button } from "../components/button";
 import { isMac } from "../../common/vars";
 import { invalidKubeconfigHandler } from "./invalid-kubeconfig-handler";
+import { clusterStore } from "../../common/cluster-store";
+import { navigate } from "../navigation";
+import { clusterSettingsURL } from "../components/+cluster-settings";
 
 function sendToBackchannel(backchannel: string, notificationId: string, data: BackchannelArg): void {
   notificationsStore.remove(notificationId);
@@ -42,7 +45,8 @@ function UpdateAvailableHandler(event: IpcRendererEvent, ...[backchannel, update
           <Button active outlined label="No" onClick={() => sendToBackchannel(backchannel, notificationId, { doUpdate: false })} />
         </div>
       </div>
-    ), {
+    ),
+    {
       id: notificationId,
       onClose() {
         sendToBackchannel(backchannel, notificationId, { doUpdate: false });
@@ -51,6 +55,42 @@ function UpdateAvailableHandler(event: IpcRendererEvent, ...[backchannel, update
   );
 }
 
+const listNamespacesForbiddenHandlerDisplayedAt = new Map<string, number>();
+const intervalBetweenNotifications = 1000 * 60; // 60s
+
+function ListNamespacesForbiddenHandler(event: IpcRendererEvent, ...[clusterId]: ListNamespaceForbiddenArgs): void {
+  const lastDisplayedAt = listNamespacesForbiddenHandlerDisplayedAt.get(clusterId);
+  const wasDisplayed = Boolean(lastDisplayedAt);
+  const now = Date.now();
+
+  if (!wasDisplayed || (now - lastDisplayedAt) > intervalBetweenNotifications) {
+    listNamespacesForbiddenHandlerDisplayedAt.set(clusterId, now);
+  } else  {
+    // don't bother the user too often
+    return;
+  }
+
+  const notificationId = `list-namespaces-forbidden:${clusterId}`;
+
+  Notifications.info(
+    (
+      <div className="flex column gaps">
+        <b>Add Accessible Namespaces</b>
+        <p>Cluster <b>{clusterStore.active.name}</b> does not have permissions to list namespaces. Please add the namespaces you have access to.</p>
+        <div className="flex gaps row align-left box grow">
+          <Button active outlined label="Go to Accessible Namespaces Settings" onClick={()=> {
+            navigate(clusterSettingsURL({ params: { clusterId }, fragment: "accessible-namespaces" }));
+            notificationsStore.remove(notificationId);
+          }} />
+        </div>
+      </div>
+    ),
+    {
+      id: notificationId,
+    }
+  );
+}
+
 export function registerIpcHandlers() {
   onCorrect({
     source: ipcRenderer,
@@ -59,4 +99,10 @@ export function registerIpcHandlers() {
     verifier: areArgsUpdateAvailableFromMain,
   });
   onCorrect(invalidKubeconfigHandler);
+  onCorrect({
+    source: ipcRenderer,
+    channel: ClusterListNamespaceForbiddenChannel,
+    listener: ListNamespacesForbiddenHandler,
+    verifier: isListNamespaceForbiddenArgs,
+  });
 }