From 88eed88feb09644df714185239fbaa29f29898ef Mon Sep 17 00:00:00 2001
From: Sebastian Malton <smalton@mirantis.com>
Date: Tue, 15 Sep 2020 13:23:00 -0400
Subject: [PATCH] Auto select one and only cluster from pasted config

- Disable add button with tooltip if no clusters are selected
- Add functionality to tooltip to display correctly over disabled
  elements

Signed-off-by: Sebastian Malton <smalton@mirantis.com>
---
 .../components/+add-cluster/add-cluster.tsx     | 14 +++++++++++---
 src/renderer/components/button/button.scss      |  5 ++---
 src/renderer/components/tooltip/tooltip.tsx     | 17 +++++++++++++----
 src/renderer/components/tooltip/withTooltip.tsx | 16 ++++++++++++----
 4 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/+add-cluster/add-cluster.tsx b/src/renderer/components/+add-cluster/add-cluster.tsx
index 0350cdcd6b..8351c794f1 100644
--- a/src/renderer/components/+add-cluster/add-cluster.tsx
+++ b/src/renderer/components/+add-cluster/add-cluster.tsx
@@ -86,6 +86,9 @@ export class AddCluster extends React.Component {
         this.error = ""
         const contexts = this.getContexts(loadConfig(this.customConfig || "{}"));
         this.kubeContexts.replace(contexts);
+        if (this.kubeContexts.size === 1) {
+          this.selectedContexts.push(this.kubeContexts.keys().next().value)
+        }
       } catch (err) {
         this.error = String(err);
       }
@@ -206,7 +209,7 @@ export class AddCluster extends React.Component {
           <Tab
             value={KubeConfigSourceTab.FILE}
             label={<Trans>Select kubeconfig file</Trans>}
-            active={this.sourceTab == KubeConfigSourceTab.FILE}/>
+            active={this.sourceTab == KubeConfigSourceTab.FILE} />
           <Tab
             value={KubeConfigSourceTab.TEXT}
             label={<Trans>Paste as text</Trans>}
@@ -320,13 +323,15 @@ export class AddCluster extends React.Component {
     return (
       <div className={cssNames("kube-context flex gaps align-center", context)}>
         <span>{context}</span>
-        {isNew && <Icon small material="fiber_new"/>}
-        {isSelected && <Icon small material="check" className="box right"/>}
+        {isNew && <Icon small material="fiber_new" />}
+        {isSelected && <Icon small material="check" className="box right" />}
       </div>
     )
   };
 
   render() {
+    const addDisabled = this.selectedContexts.length === 0
+
     return (
       <WizardLayout
         className="AddCluster"
@@ -374,9 +379,12 @@ export class AddCluster extends React.Component {
         <div className="actions-panel">
           <Button
             primary
+            disabled={addDisabled}
             label={<Trans>Add cluster(s)</Trans>}
             onClick={this.addClusters}
             waiting={this.isWaiting}
+            tooltip={addDisabled ? "Select at least one cluster to add." : undefined}
+            tooltipOverrideDisabled
           />
         </div>
       </WizardLayout>
diff --git a/src/renderer/components/button/button.scss b/src/renderer/components/button/button.scss
index 807c616d4e..e85647ca9f 100644
--- a/src/renderer/components/button/button.scss
+++ b/src/renderer/components/button/button.scss
@@ -54,8 +54,7 @@
 
   form:not([novalidate]):invalid &[type=submit]:not(.active),
   &:disabled {
-    color: silver;
-    background: $buttonDisabledBackground;
+    opacity: 50%;
     pointer-events: none;
   }
 
@@ -112,4 +111,4 @@
     left: 100%;
     width: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/src/renderer/components/tooltip/tooltip.tsx b/src/renderer/components/tooltip/tooltip.tsx
index b985b04f02..3cbe0c8708 100644
--- a/src/renderer/components/tooltip/tooltip.tsx
+++ b/src/renderer/components/tooltip/tooltip.tsx
@@ -15,6 +15,7 @@ export enum TooltipPosition {
 
 export interface TooltipProps {
   targetId: string; // html-id of target element to bind for
+  tooltipOnParentHover?: boolean; // detect hover on parent of target
   visible?: boolean; // initial visibility
   offset?: number; // offset from target element in pixels (all sides)
   usePortal?: boolean; // renders element outside of parent (in body), disable for "easy-styling", default: true
@@ -50,14 +51,22 @@ export class Tooltip extends React.Component<TooltipProps> {
     return document.getElementById(this.props.targetId)
   }
 
+  get hoverTarget(): HTMLElement {
+    if (this.props.tooltipOnParentHover) {
+      return this.targetElem.parentElement
+    }
+
+    return this.targetElem
+  }
+
   componentDidMount() {
-    this.targetElem.addEventListener("mouseenter", this.onEnterTarget)
-    this.targetElem.addEventListener("mouseleave", this.onLeaveTarget)
+    this.hoverTarget.addEventListener("mouseenter", this.onEnterTarget)
+    this.hoverTarget.addEventListener("mouseleave", this.onLeaveTarget)
   }
 
   componentWillUnmount() {
-    this.targetElem.removeEventListener("mouseenter", this.onEnterTarget)
-    this.targetElem.removeEventListener("mouseleave", this.onLeaveTarget)
+    this.hoverTarget.removeEventListener("mouseenter", this.onEnterTarget)
+    this.hoverTarget.removeEventListener("mouseleave", this.onLeaveTarget)
   }
 
   @autobind()
diff --git a/src/renderer/components/tooltip/withTooltip.tsx b/src/renderer/components/tooltip/withTooltip.tsx
index f9b9a65f69..f8c3e3ea93 100644
--- a/src/renderer/components/tooltip/withTooltip.tsx
+++ b/src/renderer/components/tooltip/withTooltip.tsx
@@ -8,6 +8,11 @@ import uniqueId from "lodash/uniqueId"
 
 export interface TooltipDecoratorProps {
   tooltip?: ReactNode | Omit<TooltipProps, "targetId">;
+  /**
+   * forces tooltip to detect the target's parent for mouse events. This is
+   * useful for displaying tooltips even when the target is "disabled"
+   */
+  tooltipOverrideDisabled?: boolean;
 }
 
 export function withTooltip<T extends React.ComponentType<any>>(Target: T): T {
@@ -17,22 +22,25 @@ export function withTooltip<T extends React.ComponentType<any>>(Target: T): T {
     protected tooltipId = uniqueId("tooltip_target_");
 
     render() {
-      const { tooltip, ...targetProps } = this.props;
+      const { tooltip, tooltipOverrideDisabled, ...targetProps } = this.props;
       if (tooltip) {
         const tooltipId = targetProps.id || this.tooltipId;
         const tooltipProps: TooltipProps = {
           targetId: tooltipId,
+          tooltipOnParentHover: tooltipOverrideDisabled,
           ...(isReactNode(tooltip) ? { children: tooltip } : tooltip),
         };
         targetProps.id = tooltipId;
         targetProps.children = (
           <>
-            {targetProps.children}
-            <Tooltip {...tooltipProps}/>
+            <div>
+              {targetProps.children}
+            </div>
+            <Tooltip {...tooltipProps} />
           </>
         )
       }
-      return <Target {...targetProps as any}/>;
+      return <Target {...targetProps as any} />;
     }
   }