Allow user to select Kubeconfig from filesystem (#740)

* Allow user to select Kubeconfig from filesystem, fix #738

Signed-off-by: Roman <ixrock@gmail.com>

Co-authored-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/layout/main-layout.scss

@@ -11,10 +11,6 @@
   > .Tabs {
     grid-area: tabs;
     background: $layoutTabsBackground;
-
-    .Tab {
-      --color-active: #{$layoutTabsActiveColor};
-    }
   }
 
   header {

src/renderer/components/layout/main-layout.tsx

@@ -48,11 +48,14 @@ export class MainLayout extends React.Component<Props> {
     const { className, contentClass, headerClass, tabs, footer, footerClass, children } = this.props;
     const routePath = navigation.location.pathname;
     const cluster = getHostedCluster();
+    if (!cluster) {
+      return null; // fix: skip render when removing active (visible) cluster
+    }
     return (
       <div className={cssNames("MainLayout", className)}>
         <header className={cssNames("flex gaps align-center", headerClass)}>
           <span className="cluster">
-            {cluster.preferences?.clusterName || cluster.contextName}
+            {cluster.preferences.clusterName || cluster.contextName}
           </span>
         </header>
 

src/renderer/components/layout/wizard-layout.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { cssNames, IClassName } from "../../utils";
 
-interface Props {
+interface Props extends React.DOMAttributes<any> {
   className?: IClassName;
   header?: React.ReactNode;
   headerClass?: IClassName;
@@ -11,22 +11,26 @@ interface Props {
   infoPanelClass?: IClassName;
   infoPanel?: React.ReactNode;
   centered?: boolean;  // Centering content horizontally
+  contentProps?: React.DOMAttributes<HTMLElement>
 }
 
 @observer
 export class WizardLayout extends React.Component<Props> {
   render() {
-    const { className, contentClass, infoPanelClass, infoPanel, header, headerClass, centered, children: content } = this.props;
+    const {
+      className, contentClass, infoPanelClass, infoPanel, header, headerClass, centered,
+      children, contentProps = {}, ...props
+    } = this.props;
     return (
-      <div className={cssNames("WizardLayout", { centered }, className)}>
+      <div {...props} className={cssNames("WizardLayout", { centered }, className)}>
         {header && (
           <div className={cssNames("head-col flex gaps align-center", headerClass)}>
             {header}
           </div>
         )}
-        <div className={cssNames("content-col flex column gaps", contentClass)}>
+        <div {...contentProps} className={cssNames("content-col flex column gaps", contentClass)}>
           <div className="flex column gaps">
-            {content}
+            {children}
           </div>
         </div>
         {infoPanel && (