Change add-cluster to single column layout (#1515)

* change add-cluster to single column layout

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* cleanup styles

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* Fine-tuning layout/coloring styles

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

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

docs/clusters/adding-clusters.md

@@ -14,3 +14,9 @@ Selected [cluster contexts](https://kubernetes.io/docs/concepts/configuration/or
 For more information on kubeconfig see [Kubernetes docs](https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/).
 
 To see your currently-enabled config with `kubectl`, enter `kubectl config view --minify --raw` in your terminal.
+
+When connecting to a cluster, make sure you have a valid and working kubeconfig for the cluster. Following lists known "gotchas" in some authentication types used in kubeconfig with Lens app.
+
+## Exec auth plugins
+
+When using [exec auth](https://kubernetes.io/docs/reference/access-authn-authz/authentication/#configuration) plugins make sure the paths that are used to call any binaries are full paths as Lens app might not be able to call binaries with relative paths. Make also sure that you pass all needed information either as arguments or env variables in the config, Lens app might not have all login shell env variables set automatically.

src/renderer/components/+add-cluster/add-cluster.scss

@@ -1,16 +1,20 @@
-.AddCluster {
+.AddClusters {
-  .hint {
+  --flex-gap: #{$unit * 2};
-    margin-top: -$padding;
+  $spacing: $padding * 2;
-    color: $textColorSecondary;
-
-    > * {
-      vertical-align: middle;
-    }
-  }
 
   .AceEditor {
     min-height: 200px;
     max-height: 400px;
+    border: 1px solid var(--colorVague);
+    border-radius: $radius;
+
+    .theme-light & {
+      border-color: var(--borderFaintColor);
+    }
+
+    .editor {
+      border-radius: $radius;
+    }
   }
 
   .Select {
@@ -34,4 +38,13 @@
   code {
     color: $pink-400;
   }
+
+  .text-primary {
+    color: var(--textColorAccent);
+  }
+
+  .hint {
+    display: block;
+    padding-top: 6px;
+  }
 }

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

@@ -25,6 +25,8 @@ import { Notifications } from "../notifications";
 import { Tab, Tabs } from "../tabs";
 import { ExecValidationNotFoundError } from "../../../common/custom-errors";
 import { appEventBus } from "../../../common/event-bus";
+import { PageLayout } from "../layout/page-layout";
+import { docsUrl } from "../../../common/vars";
 
 enum KubeConfigSourceTab {
   FILE = "file",
@@ -193,44 +195,19 @@ export class AddCluster extends React.Component {
 
   renderInfo() {
     return (
-      <Fragment>
+      <p>
-        <h2>Clusters associated with Lens</h2>
+        Add clusters by clicking the <span className="text-primary">Add Cluster</span> button.
-        <p>
+        You'll need to obtain a working kubeconfig for the cluster you want to add.
-          Add clusters by clicking the <span className="text-primary">Add Cluster</span> button.
+        You can either browse it from the file system or paste it as a text from the clipboard.
-          You'll need to obtain a working kubeconfig for the cluster you want to add. You can either browse it from the file system or paste it as a text from the clipboard.
+        Read more about adding clusters <a href={`${docsUrl}/latest/clusters/adding-clusters/`} target="_blank">here</a>.
-        </p>
+      </p>
-        <p>
-          Selected <a href="https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/#context" target="_blank">cluster contexts</a> are added as a separate item in the
-          left-side cluster menu to allow you to operate easily on multiple clusters and/or contexts.
-        </p>
-        <p>
-          For more information on kubeconfig see <a href="https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/" target="_blank">Kubernetes docs</a>.
-        </p>
-        <p>
-          NOTE: Any manually added cluster is not merged into your kubeconfig file.
-        </p>
-        <p>
-          To see your currently enabled config with <code>kubectl</code>, use <code>kubectl config view --minify --raw</code> command in your terminal.
-        </p>
-        <p>
-          When connecting to a cluster, make sure you have a valid and working kubeconfig for the cluster. Following lists known "gotchas" in some authentication types used in kubeconfig with Lens
-          app.
-        </p>
-        <h3>Exec auth plugins</h3>
-        <p>
-          When using <a href="https://kubernetes.io/docs/reference/access-authn-authz/authentication/#configuration" target="_blank">exec auth</a> plugins make sure the paths that are used to call
-          any binaries
-          are full paths as Lens app might not be able to call binaries with relative paths. Make also sure that you pass all needed information either as arguments or env variables in the config,
-          Lens app might not have all login shell env variables set automatically.
-        </p>
-      </Fragment>
     );
   }
 
   renderKubeConfigSource() {
     return (
       <>
-        <Tabs withBorder onChange={this.onKubeConfigTabChange}>
+        <Tabs onChange={this.onKubeConfigTabChange}>
           <Tab
             value={KubeConfigSourceTab.FILE}
             label={<Trans>Select kubeconfig file</Trans>}
@@ -242,7 +219,7 @@ export class AddCluster extends React.Component {
           />
         </Tabs>
         {this.sourceTab === KubeConfigSourceTab.FILE && (
-          <>
+          <div>
             <div className="kube-config-select flex gaps align-center">
               <Input
                 theme="round-black"
@@ -267,10 +244,10 @@ export class AddCluster extends React.Component {
             <small className="hint">
               <Trans>Pro-Tip: you can also drag-n-drop kubeconfig file to this area</Trans>
             </small>
-          </>
+          </div>
         )}
         {this.sourceTab === KubeConfigSourceTab.TEXT && (
-          <>
+          <div className="flex column">
             <AceEditor
               autoFocus
               showGutter={false}
@@ -284,7 +261,7 @@ export class AddCluster extends React.Component {
             <small className="hint">
               <Trans>Pro-Tip: paste kubeconfig to get available contexts</Trans>
             </small>
-          </>
+          </div>
         )}
       </>
     );
@@ -296,7 +273,7 @@ export class AddCluster extends React.Component {
       ? <Trans>Selected contexts: <b>{this.selectedContexts.length}</b></Trans>
       : <Trans>Select contexts</Trans>;
     return (
-      <>
+      <div>
         <Select
           id="kubecontext-select" // todo: provide better mapping for integration tests (e.g. data-test-id="..")
           placeholder={placeholder}
@@ -320,7 +297,7 @@ export class AddCluster extends React.Component {
             <code>{this.selectedContexts.join(", ")}</code>
           </small>
         )}
-      </>
+      </div>
     );
   }
 
@@ -357,9 +334,12 @@ export class AddCluster extends React.Component {
   render() {
     const addDisabled = this.selectedContexts.length === 0;
     return (
-      <DropFileInput onDropFiles={this.onDropKubeConfig}>
+      <PageLayout className="AddClusters" header={<h2>Add Clusters</h2>}>
-        <WizardLayout className="AddCluster" infoPanel={this.renderInfo()}>
+        <h2>Add Clusters from Kubeconfig</h2>
-          <h2><Trans>Add Cluster</Trans></h2>
+
+        {this.renderInfo()}
+
+        <DropFileInput onDropFiles={this.onDropKubeConfig}>
           {this.renderKubeConfigSource()}
           {this.renderContextSelector()}
           <div className="cluster-settings">
@@ -384,19 +364,20 @@ export class AddCluster extends React.Component {
           {this.error && (
             <div className="error">{this.error}</div>
           )}
+
           <div className="actions-panel">
             <Button
               primary
               disabled={addDisabled}
-              label={<Trans>Add cluster(s)</Trans>}
+              label={this.selectedContexts.length < 2 ? <Trans>Add cluster</Trans> : <Trans>Add clusters</Trans>}
               onClick={this.addClusters}
               waiting={this.isWaiting}
               tooltip={addDisabled ? _i18n._("Select at least one cluster to add.") : undefined}
               tooltipOverrideDisabled
             />
           </div>
-        </WizardLayout>
+        </DropFileInput>
-      </DropFileInput>
+      </PageLayout>
     );
   }
 }