H-5976: Fix display of tooltips for readonly inputs

.changeset/fix-readonly-tooltips.md

@@ -0,0 +1,5 @@
+---
+"@hashintel/petrinaut": patch
+---
+
+Fix read-only tooltips to always show during simulation mode

libs/@hashintel/petrinaut/src/components/button.tsx

@@ -0,0 +1,82 @@
+import { cva } from "@hashintel/ds-helpers/css";
+
+import { withTooltip } from "./hoc/with-tooltip";
+
+const buttonStyle = cva({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "[6px]",
+    fontSize: "[12px]",
+    padding: "[4px 8px]",
+    border: "[1px solid rgba(0, 0, 0, 0.2)]",
+    borderRadius: "[4px]",
+    backgroundColor: "[white]",
+    color: "[#333]",
+    cursor: "pointer",
+    transition: "[all 0.15s ease]",
+    _hover: {
+      backgroundColor: "[rgba(0, 0, 0, 0.05)]",
+    },
+    _active: {
+      backgroundColor: "[rgba(0, 0, 0, 0.1)]",
+    },
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        opacity: "[0.5]",
+        cursor: "not-allowed",
+        _hover: {
+          backgroundColor: "[white]",
+        },
+      },
+      false: {},
+    },
+    variant: {
+      default: {},
+      ghost: {
+        border: "none",
+        backgroundColor: "[transparent]",
+        _hover: {
+          backgroundColor: "[rgba(0, 0, 0, 0.05)]",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    isDisabled: false,
+    variant: "default",
+  },
+});
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  /** Button variant */
+  variant?: "default" | "ghost";
+  /** Button content */
+  children: React.ReactNode;
+  /** Ref to the button element */
+  ref?: React.Ref<HTMLButtonElement>;
+};
+
+const ButtonBase: React.FC<ButtonProps> = ({
+  variant = "default",
+  disabled,
+  className,
+  children,
+  ref,
+  ...props
+}) => (
+  <button
+    ref={ref}
+    type="button"
+    disabled={disabled}
+    className={`${buttonStyle({ isDisabled: disabled, variant })}${className ? ` ${className}` : ""}`}
+    {...props}
+  >
+    {children}
+  </button>
+);
+
+export const Button = withTooltip(ButtonBase, "block");

libs/@hashintel/petrinaut/src/components/code-editor.tsx

@@ -0,0 +1,98 @@
+import { css, cva } from "@hashintel/ds-helpers/css";
+import type { EditorProps, Monaco } from "@monaco-editor/react";
+import MonacoEditor from "@monaco-editor/react";
+import type { editor } from "monaco-editor";
+import { useCallback, useRef } from "react";
+
+import { Tooltip } from "./tooltip";
+
+const containerStyle = cva({
+  base: {
+    position: "relative",
+    border: "[1px solid rgba(0, 0, 0, 0.1)]",
+    borderRadius: "[4px]",
+    overflow: "hidden",
+  },
+  variants: {
+    isReadOnly: {
+      true: {
+        filter: "[grayscale(20%) brightness(98%)]",
+        cursor: "not-allowed",
+      },
+      false: {},
+    },
+  },
+});
+
+type CodeEditorProps = Omit<EditorProps, "theme"> & {
+  tooltip?: string;
+};
+
+/**
+ * Code editor component that wraps Monaco Editor.
+ *
+ * @param tooltip - Optional tooltip to show when hovering over the editor.
+ *                  In read-only mode, the tooltip also appears when attempting to edit.
+ */
+export const CodeEditor: React.FC<CodeEditorProps> = ({
+  tooltip,
+  options,
+  height,
+  onMount,
+  ...props
+}) => {
+  const isReadOnly = options?.readOnly === true;
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+
+  const handleMount = useCallback(
+    (editorInstance: editor.IStandaloneCodeEditor, monaco: Monaco) => {
+      editorRef.current = editorInstance;
+      // Call the original onMount if provided
+      onMount?.(editorInstance, monaco);
+    },
+    [onMount],
+  );
+
+  const editorOptions: EditorProps["options"] = {
+    minimap: { enabled: false },
+    scrollBeyondLastLine: false,
+    fontSize: 12,
+    lineNumbers: "off",
+    folding: true,
+    glyphMargin: false,
+    lineDecorationsWidth: 0,
+    lineNumbersMinChars: 3,
+    padding: { top: 8, bottom: 8 },
+    fixedOverflowWidgets: true,
+    ...options,
+  };
+
+  const editorElement = (
+    <div className={containerStyle({ isReadOnly })} style={{ height }}>
+      <MonacoEditor
+        theme="vs-light"
+        height="100%"
+        options={editorOptions}
+        onMount={handleMount}
+        {...props}
+      />
+    </div>
+  );
+
+  // Regular tooltip for non-read-only mode (if tooltip is provided)
+  if (tooltip) {
+    return (
+      <Tooltip
+        content={tooltip}
+        display="block"
+        className={css({
+          flex: "1",
+        })}
+      >
+        {editorElement}
+      </Tooltip>
+    );
+  }
+
+  return editorElement;
+};

libs/@hashintel/petrinaut/src/components/hoc/with-tooltip.tsx

@@ -0,0 +1,63 @@
+import type { ComponentType } from "react";
+
+import { Tooltip } from "../tooltip";
+
+type WithTooltipProps = {
+  /** Tooltip to show when hovering (useful for explaining disabled state). */
+  tooltip?: string;
+  /**
+   * Display mode for the tooltip wrapper element.
+   * - "block": For full-width elements like inputs/selects (default)
+   * - "inline": For inline elements like buttons in flex containers
+   */
+  tooltipDisplay?: "block" | "inline";
+};
+
+/**
+ * Higher-Order Component that adds tooltip support to any component.
+ *
+ * When `tooltip` prop is provided, the component is wrapped with a Tooltip.
+ * When `tooltip` is undefined/empty, the component renders unwrapped.
+ *
+ * @param Component - The component to wrap
+ * @param defaultDisplay - Default display mode for the tooltip wrapper ("block" | "inline")
+ *
+ * @example
+ * ```tsx
+ * const MyButtonBase: React.FC<{ onClick: () => void }> = ({ onClick }) => (
+ *   <button onClick={onClick}>Click me</button>
+ * );
+ *
+ * export const MyButton = withTooltip(MyButtonBase, "inline");
+ *
+ * // Usage:
+ * <MyButton onClick={handleClick} tooltip="Click to submit" />
+ * ```
+ */
+export function withTooltip<P extends object>(
+  Component: ComponentType<P>,
+  defaultDisplay: "block" | "inline" = "block",
+): ComponentType<P & WithTooltipProps> {
+  const WrappedComponent: React.FC<P & WithTooltipProps> = ({
+    tooltip,
+    tooltipDisplay = defaultDisplay,
+    ...props
+  }) => {
+    const element = <Component {...(props as P)} />;
+
+    if (!tooltip) {
+      return element;
+    }
+
+    return (
+      <Tooltip content={tooltip} display={tooltipDisplay}>
+        {element}
+      </Tooltip>
+    );
+  };
+
+  // Set display name for debugging
+  WrappedComponent.displayName = `withTooltip(${Component.displayName ?? Component.name})`;
+
+  return WrappedComponent;
+}