packages/ui-components/tooltip

Signed-off-by: Gabriel <gaccettola@mirantis.com>

packages/ui-components/tooltip/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@k8slens/eslint-config/eslint",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  }
+}

packages/ui-components/tooltip/.prettierrc

@@ -0,0 +1 @@
+"@k8slens/eslint-config/prettier"

packages/ui-components/tooltip/README.md

@@ -0,0 +1,21 @@
+# @k8slens/tooltip
+
+This package contains stuff related to creating Lens-applications. 
+
+# Usage
+
+```bash
+$ npm install @k8slens/tooltip
+```
+
+```typescript
+import { tooltipFeature } from "@k8slens/tooltip";
+import { registerFeature } from "@k8slens/feature-core";
+import { createContainer } from "@ogre-tools/injectable";
+
+const di = createContainer("some-container");
+
+registerFeature(di, tooltipFeature);
+```
+
+## Extendability

packages/ui-components/tooltip/index.ts

@@ -0,0 +1,2 @@
+export * from "./src/tooltip";
+export * from "./src/withTooltip";

packages/ui-components/tooltip/jest.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/jest").monorepoPackageConfig(__dirname).configForReact;

packages/ui-components/tooltip/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@k8slens/tooltip",
+  "private": false,
+  "version": "1.0.0-alpha.0",
+  "description": "Highly extendable tooltip in the Lens.",
+  "type": "commonjs",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lensapp/lens.git"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "author": {
+    "name": "OpenLens Authors",
+    "email": "info@k8slens.dev"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/lensapp/lens",
+  "scripts": {
+    "buildasd": "webpack",
+    "devasdasd": "webpack --mode=development --watch",
+    "test:unit": "jest --coverage --runInBand",
+    "lint": "lens-lint",
+    "lint:fix": "lens-lint --fix"
+  },
+  "peerDependencies": {
+    "@k8slens/feature-core": "^6.5.0-alpha.0",
+    "@ogre-tools/injectable": "^15.1.2",
+    "@ogre-tools/injectable-extension-for-auto-registration": "^15.1.2",
+    "@ogre-tools/fp": "^15.1.2",
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "@async-fn/jest": "^1.6.4",
+    "@k8slens/eslint-config": "6.5.0-alpha.1",
+    "@k8slens/react-testing-library-discovery": "^1.0.0-alpha.0"
+  }
+}

packages/ui-components/tooltip/src/__mocks__/withTooltip.tsx

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+
+export const withTooltip =
+  (Target: any) =>
+    ({ tooltip, tooltipOverrideDisabled, ...props }: any) => {
+      if (tooltip) {
+        const testId = props["data-testid"];
+
+        return (
+          <>
+            <Target {...props} />
+            <div data-testid={testId && `tooltip-content-for-${testId}`}>
+              {tooltip.children || tooltip}
+            </div>
+          </>
+        );
+      }
+
+      return <Target {...props} />;
+    };

packages/ui-components/tooltip/src/__snapshots__/tooltip.test.tsx.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Tooltip /> does not render to DOM if not visibile 1`] = `
+<body>
+  <div>
+    <div
+      id="my-target"
+    >
+      Target Text
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<Tooltip /> renders to DOM when forced to by visibile prop 1`] = `
+<body>
+  <div>
+    <div
+      class="Tooltip right visible"
+      role="tooltip"
+      style="left: 10px; top: 0px;"
+    >
+      I am a tooltip
+    </div>
+    <div
+      id="my-target"
+    >
+      Target Text
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<Tooltip /> renders to DOM when hovering over target 1`] = `
+<body>
+  <div>
+    <div
+      class="Tooltip right visible"
+      role="tooltip"
+      style="left: 10px; top: 0px;"
+    >
+      I am a tooltip
+    </div>
+    <div
+      id="my-target"
+    >
+      Target Text
+    </div>
+  </div>
+</body>
+`;

packages/ui-components/tooltip/src/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+export * from "./tooltip";
+export * from "./withTooltip";

packages/ui-components/tooltip/src/tooltip.scss

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+
+.Tooltip {
+  --bgc: var(--mainBackground);
+  --radius: #{$radius};
+  --color: var(--textColorAccent);
+  --border: 1px solid var(--borderColor);
+
+  // use positioning relative to viewport (window)
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/position
+  position: fixed;
+  margin: 0 !important;
+  background: var(--bgc);
+  font-size: small;
+  font-weight: normal;
+  border-radius: var(--radius);
+  color: var(--color);
+  white-space: normal;
+  padding: .5em;
+  text-align: center;
+  pointer-events: none;
+  transition: opacity 150ms 150ms ease-in-out;
+  z-index: 100000;
+  box-shadow: 0 8px 16px rgba(0,0,0,0.24);
+  left: 0;
+  top: 0;
+  opacity: 0;
+  visibility: hidden;
+
+  &.visible {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &:empty {
+    display: none;
+  }
+
+  &.formatter {
+    &.nowrap {
+      &, * {
+        white-space: nowrap;
+      }
+    }
+
+    &.narrow {
+      max-width: 300px;
+      text-overflow: ellipsis;
+      word-wrap: break-word;
+      text-align: left;
+    }
+
+    &.small {
+      font-size: $font-size-small;
+    }
+
+    &.warning {
+      color: var(--colorError);
+    }
+
+    &.tableView {
+      display: grid;
+      gap: var(--padding);
+      grid-template-columns: max-content 1fr;
+      grid-template-rows: repeat(2, 1fr);
+
+      // backward compatibility: skips element in DOM to consider only children in grid-flow
+      > .flex {
+        display: contents;
+      }
+
+      > * {
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+
+      .title {
+        grid-column: 1 / 3; // merge
+        color: var(--textColorAccent);
+        text-align: center;
+        font-weight: bold;
+      }
+
+      .name {
+        text-align: right;
+        color: var(--textColorAccent);
+      }
+
+      .value {
+        text-align: left;
+        color: var(--textColorSecondary);
+      }
+    }
+  }
+}

packages/ui-components/tooltip/src/tooltip.test.tsx

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import assert from "assert";
+import React from "react";
+import { Tooltip } from "@k8slens/tooltip";
+
+describe("<Tooltip />", () => {
+  let requestAnimationFrameSpy: jest.SpyInstance<number, [callback: FrameRequestCallback]>;
+
+  beforeEach(() => {
+    requestAnimationFrameSpy = jest.spyOn(window, "requestAnimationFrame");
+
+    requestAnimationFrameSpy.mockImplementation(cb => {
+      cb(0);
+
+      return 0;
+    });
+  });
+
+  afterEach(() => {
+    requestAnimationFrameSpy.mockRestore();
+  });
+
+
+  it("does not render to DOM if not visibile", () => {
+    const result = render((
+      <>
+        <Tooltip targetId="my-target" usePortal={false}>I am a tooltip</Tooltip>
+        <div id="my-target">Target Text</div>
+      </>
+    ));
+
+    expect(result.baseElement).toMatchSnapshot();
+  });
+
+  it("renders to DOM when hovering over target", () => {
+    const result = render((
+      <>
+        <Tooltip
+          targetId="my-target"
+          data-testid="tooltip"
+          usePortal={false}
+        >
+          I am a tooltip
+        </Tooltip>
+        <div id="my-target">Target Text</div>
+      </>
+    ));
+
+    const target = result.baseElement.querySelector("#my-target");
+
+    assert(target);
+
+    userEvent.hover(target);
+    expect(result.baseElement).toMatchSnapshot();
+  });
+
+  it("renders to DOM when forced to by visibile prop", () => {
+    const result = render((
+      <>
+        <Tooltip
+          targetId="my-target"
+          data-testid="tooltip"
+          visible={true}
+          usePortal={false}
+        >
+          I am a tooltip
+        </Tooltip>
+        <div id="my-target">Target Text</div>
+      </>
+    ));
+
+    expect(result.baseElement).toMatchSnapshot();
+  });
+});

packages/ui-components/tooltip/src/tooltip.tsx

@@ -0,0 +1,243 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./tooltip.scss";
+
+import React from "react";
+import { createPortal } from "react-dom";
+import { observer } from "mobx-react";
+import type { IClassName } from "@k8slens/utilities";
+import { cssNames } from "@k8slens/utilities";
+import { observable, makeObservable, action } from "mobx";
+import autoBindReact from "auto-bind/react";
+
+export enum TooltipPosition {
+  TOP = "top",
+  BOTTOM = "bottom",
+  LEFT = "left",
+  RIGHT = "right",
+  TOP_LEFT = "top_left",
+  TOP_RIGHT = "top_right",
+  BOTTOM_LEFT = "bottom_left",
+  BOTTOM_RIGHT = "bottom_right",
+}
+
+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
+  preferredPositions?: TooltipPosition | TooltipPosition[];
+  className?: IClassName;
+  formatters?: TooltipContentFormatters;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export interface TooltipContentFormatters {
+  narrow?: boolean; // max-width
+  warning?: boolean; // color
+  small?: boolean; // font-size
+  nowrap?: boolean; // white-space
+  tableView?: boolean;
+}
+
+const defaultProps: Partial<TooltipProps> = {
+  usePortal: true,
+  offset: 10,
+};
+
+@observer
+export class Tooltip extends React.Component<TooltipProps> {
+  static defaultProps = defaultProps as object;
+
+  @observable.ref elem: HTMLDivElement | null = null;
+  @observable activePosition?: TooltipPosition;
+  @observable isVisible = false;
+  @observable isContentVisible = false; // animation manager
+
+  constructor(props: TooltipProps) {
+    super(props);
+    makeObservable(this);
+    autoBindReact(this);
+  }
+
+  get targetElem(): HTMLElement | null {
+    return document.getElementById(this.props.targetId);
+  }
+
+  get hoverTarget(): HTMLElement | null {
+    if (this.props.tooltipOnParentHover) {
+      return this.targetElem?.parentElement ?? null;
+    }
+
+    return this.targetElem;
+  }
+
+  componentDidMount() {
+    this.hoverTarget?.addEventListener("mouseenter", this.onEnterTarget);
+    this.hoverTarget?.addEventListener("mouseleave", this.onLeaveTarget);
+    this.refreshPosition();
+  }
+
+  componentDidUpdate() {
+    this.refreshPosition();
+  }
+
+  componentWillUnmount() {
+    this.hoverTarget?.removeEventListener("mouseenter", this.onEnterTarget);
+    this.hoverTarget?.removeEventListener("mouseleave", this.onLeaveTarget);
+  }
+
+  @action
+  protected onEnterTarget() {
+    this.isVisible = true;
+    requestAnimationFrame(action(() => this.isContentVisible = true));
+  }
+
+  @action
+  protected onLeaveTarget() {
+    this.isVisible = false;
+    this.isContentVisible = false;
+  }
+
+  refreshPosition() {
+    const { preferredPositions } = this.props;
+    const { elem, targetElem } = this;
+
+    if (!elem || !targetElem) {
+      return;
+    }
+
+    const positions = new Set<TooltipPosition>([
+      ...[preferredPositions ?? []].flat(),
+      TooltipPosition.RIGHT,
+      TooltipPosition.BOTTOM,
+      TooltipPosition.TOP,
+      TooltipPosition.LEFT,
+      TooltipPosition.TOP_RIGHT,
+      TooltipPosition.TOP_LEFT,
+      TooltipPosition.BOTTOM_RIGHT,
+      TooltipPosition.BOTTOM_LEFT,
+    ]);
+
+    // reset position first and get all possible client-rect area for tooltip element
+    this.setPosition(elem, { left: 0, top: 0 });
+
+    const selfBounds = elem.getBoundingClientRect();
+    const targetBounds = targetElem.getBoundingClientRect();
+    const { innerWidth: viewportWidth, innerHeight: viewportHeight } = window;
+
+    // find proper position
+    for (const pos of positions) {
+      const { left, top, right, bottom } = this.getPosition(pos, selfBounds, targetBounds);
+      const fitsToWindow = left >= 0 && top >= 0 && right <= viewportWidth && bottom <= viewportHeight;
+
+      if (fitsToWindow) {
+        this.activePosition = pos;
+        this.setPosition(elem, { top, left });
+
+        return;
+      }
+    }
+
+    // apply fallback position if nothing helped from above
+    const fallbackPosition = Array.from(positions)[0];
+    const { left, top } = this.getPosition(fallbackPosition, selfBounds, targetBounds);
+
+    this.activePosition = fallbackPosition;
+    this.setPosition(elem, { left, top });
+  }
+
+  protected setPosition(elem: HTMLDivElement, pos: { left: number; top: number }) {
+    elem.style.left = `${pos.left}px`;
+    elem.style.top = `${pos.top}px`;
+  }
+
+  protected getPosition(position: TooltipPosition, tooltipBounds: DOMRect, targetBounds: DOMRect) {
+    let left: number;
+    let top: number;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const offset = this.props.offset!;
+    const horizontalCenter = targetBounds.left + (targetBounds.width - tooltipBounds.width) / 2;
+    const verticalCenter = targetBounds.top + (targetBounds.height - tooltipBounds.height) / 2;
+    const topCenter = targetBounds.top - tooltipBounds.height - offset;
+    const bottomCenter = targetBounds.bottom + offset;
+
+    switch (position) {
+      case "top":
+        left = horizontalCenter;
+        top = topCenter;
+        break;
+      case "bottom":
+        left = horizontalCenter;
+        top = bottomCenter;
+        break;
+      case "left":
+        top = verticalCenter;
+        left = targetBounds.left - tooltipBounds.width - offset;
+        break;
+      case "right":
+        top = verticalCenter;
+        left = targetBounds.right + offset;
+        break;
+      case "top_left":
+        left = targetBounds.left;
+        top = topCenter;
+        break;
+      case "top_right":
+        left = targetBounds.right - tooltipBounds.width;
+        top = topCenter;
+        break;
+      case "bottom_left":
+        top = bottomCenter;
+        left = targetBounds.left;
+        break;
+      case "bottom_right":
+        top = bottomCenter;
+        left = targetBounds.right - tooltipBounds.width;
+        break;
+      default:
+        throw new TypeError("Invalid props.postition value");
+    }
+
+    return {
+      left,
+      top,
+      right: left + tooltipBounds.width,
+      bottom: top + tooltipBounds.height,
+    };
+  }
+
+  render() {
+    const { style, formatters, usePortal, children, visible = this.isVisible } = this.props;
+
+    if (!visible) {
+      return null;
+    }
+
+    const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, {
+      visible: this.isContentVisible || this.props.visible,
+      formatter: !!formatters,
+    });
+    const tooltip = (
+      <div
+        className={className}
+        style={style}
+        ref={elem => this.elem = elem}
+        role="tooltip"
+      >
+        {children}
+      </div>
+    );
+
+    if (usePortal) {
+      return createPortal(tooltip, document.body);
+    }
+
+    return tooltip;
+  }
+}

packages/ui-components/tooltip/src/withTooltip.tsx

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+// Tooltip decorator for simple composition with other components
+
+import type { ReactNode } from "react";
+import React, { useState } from "react";
+import type { TooltipProps } from "@k8slens/tooltip";
+import { Tooltip } from "@k8slens/tooltip";
+import { isReactNode } from "@k8slens/utilities";
+import uniqueId from "lodash/uniqueId";
+import type { SingleOrMany } from "@k8slens/utilities";
+
+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;
+  id?: string;
+  children?: SingleOrMany<React.ReactNode>;
+}
+
+export function withTooltip<TargetProps>(
+  Target: TargetProps extends Pick<TooltipDecoratorProps, "id" | "children">
+    ? React.FunctionComponent<TargetProps>
+    : never,
+): React.FunctionComponent<TargetProps & TooltipDecoratorProps> {
+  const DecoratedComponent = (props: TargetProps & TooltipDecoratorProps) => {
+    // TODO: Remove side-effect to allow deterministic unit testing
+    const [defaultTooltipId] = useState(uniqueId("tooltip_target_"));
+
+    let {
+      id: targetId,
+      children: targetChildren,
+    } = props;
+    const {
+      tooltip,
+      tooltipOverrideDisabled,
+      id: _unusedId,
+      children: _unusedTargetChildren,
+      ...targetProps
+    } = props;
+
+    if (tooltip) {
+      const tooltipProps: TooltipProps = {
+        targetId: targetId || defaultTooltipId,
+        tooltipOnParentHover: tooltipOverrideDisabled,
+        formatters: { narrow: true },
+        ...(isReactNode(tooltip) ? { children: tooltip } : tooltip),
+      };
+
+      targetId = tooltipProps.targetId;
+      targetChildren = (
+        <>
+          <div>
+            {targetChildren}
+          </div>
+          <Tooltip {...tooltipProps} />
+        </>
+      );
+    }
+
+    return (
+      <Target id={targetId} {...targetProps as any}>
+        {targetChildren}
+      </Target>
+    );
+  };
+
+  DecoratedComponent.displayName = `withTooltip(${Target.displayName || Target.name})`;
+
+  return DecoratedComponent;
+}

packages/ui-components/tooltip/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@k8slens/typescript/config/base.json",
+  "include": ["**/*.ts", "**/*.tsx"],
+}

packages/ui-components/tooltip/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/webpack").configForReact;