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>

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