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>

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);
       }
@@ -327,6 +330,8 @@ export class AddCluster extends React.Component {
   };
 
   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>

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

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,17 +22,20 @@ 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 = (
           <>
+            <div>
               {targetProps.children}
+            </div>
             <Tooltip {...tooltipProps} />
           </>
         )