Auto select one and only cluster from pasted config (#888)

* 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

* feature should work of any method of adding kube config

Signed-off-by: Sebastian Malton <sebastian@malton.name>
Co-authored-by: Sebastian Malton <smalton@mirantis.com>

integration/specs/app_spec.ts

@@ -17,10 +17,6 @@ describe("app start", () => {
   const addMinikubeCluster = async (app: Application) => {
     await app.client.click("div.add-cluster")
     await app.client.waitUntilTextExists("div", "Select kubeconfig file")
-    await app.client.click("div.Select__control")
-    await app.client.waitUntilTextExists("div", "minikube")
-    await app.client.click("div.minikube")
-    await app.client.click("div.Select__control")
     await app.client.click("button.primary")
   }
 

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

@@ -80,7 +80,6 @@ export class AddCluster extends React.Component {
       const contexts = this.getContexts(this.kubeConfigLocal);
       this.kubeContexts.replace(contexts);
       break;
-
     case KubeConfigSourceTab.TEXT:
       try {
         this.error = ""
@@ -91,6 +90,10 @@ export class AddCluster extends React.Component {
       }
       break;
     }
+
+    if (this.kubeContexts.size === 1) {
+      this.selectedContexts.push(this.kubeContexts.keys().next().value)
+    }
   }
 
   getContexts(config: KubeConfig): Map<string, KubeConfig> {
@@ -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 ? _i18n._("Select at least one cluster to add.") : undefined}
+            tooltipOverrideDisabled
           />
         </div>
       </WizardLayout>

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;
   }
-}
+}

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

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} />;
     }
   }