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>
     );