[ES|QL Controls] Highlight related panels on click, refactor Related Panels system

packages/kbn-optimizer/limits.yml

@@ -204,7 +204,7 @@ pageLoadAssetSize:
   visTypeTable: 18999
   visTypeTagcloud: 7876
   visTypeTimelion: 12512
-  visTypeTimeseries: 20000
+  visTypeTimeseries: 21819
   visTypeVega: 38538
   visTypeVislib: 14679
   visTypeXy: 32342

src/platform/packages/private/kbn-controls-renderer/index.ts

@@ -8,4 +8,6 @@
  */
 
 export { ControlsRenderer } from './src/controls_renderer';
+export { ControlLabelTooltip } from './src/components/control_label_tooltip';
 export type { ControlsRendererParentApi, ControlsLayout } from './src/types';
+export { useIndicateRelatedPanelsSelector } from './src/hooks';

src/platform/packages/private/kbn-controls-renderer/src/components/control_label_tooltip.tsx

@@ -0,0 +1,79 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { EuiToolTip, EuiBadge, type EuiToolTipProps } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+interface RelatedPanelProps {
+  canIndicateRelatedPanels: boolean;
+  isIndicatingRelatedPanels: boolean;
+  numberOfRelatedPanels?: number;
+}
+// Throw a typescript error if one, but not all, of the related panel props are defined
+// Prevents us from e.g. setting canIndicateRelatedPanels to true and forgetting to pass isIndicatingRelatedPanels
+type AllRelatedPanelPropsOrNone = RelatedPanelProps | { [K in keyof RelatedPanelProps]?: never };
+
+type Props = Omit<Partial<EuiToolTipProps>, 'children'> & {
+  panelLabel?: string;
+  panelTooltipLabel?: string;
+  children: EuiToolTipProps['children'];
+} & AllRelatedPanelPropsOrNone;
+
+export const ControlLabelTooltip = ({
+  canIndicateRelatedPanels,
+  isIndicatingRelatedPanels,
+  numberOfRelatedPanels,
+  panelLabel,
+  panelTooltipLabel,
+  children,
+  ...rest
+}: Props) => {
+  const relatedPanelCountBadge =
+    canIndicateRelatedPanels && numberOfRelatedPanels !== undefined ? (
+      <EuiBadge color="hollow">
+        {i18n.translate('controls.controlGroup.numberOfRelatedPanels', {
+          defaultMessage: '{numberOfRelatedPanels, plural, one {# panel} other {# panels}}',
+          values: { numberOfRelatedPanels },
+        })}
+      </EuiBadge>
+    ) : null;
+
+  const tooltipContent =
+    numberOfRelatedPanels === 0
+      ? i18n.translate('controls.controlGroup.noRelatedPanels', {
+          defaultMessage:
+            // In practice, this message can only appear for ES|QL controls
+            "This variable control isn't used by any visualization on the dashboard. Variable controls only apply to ES|QL visualizations that include them in their query.",
+        })
+      : isIndicatingRelatedPanels
+      ? i18n.translate('controls.controlGroup.clickToStopHighlighting', {
+          defaultMessage: 'Click to stop highlighting panels.',
+        })
+      : i18n.translate('controls.controlGroup.clickToHighlight', {
+          defaultMessage: 'Click to highlight panels.',
+        });
+
+  const tooltipProps = canIndicateRelatedPanels
+    ? {
+        title: (
+          <>
+            {panelTooltipLabel ?? panelLabel} {relatedPanelCountBadge}
+          </>
+        ),
+        content: tooltipContent,
+      }
+    : { content: panelTooltipLabel ?? panelLabel };
+
+  return (
+    <EuiToolTip {...tooltipProps} {...rest} id={rest.id}>
+      {children}
+    </EuiToolTip>
+  );
+};

src/platform/packages/private/kbn-controls-renderer/src/components/control_panel.tsx

@@ -8,7 +8,7 @@
  */
 
 import classNames from 'classnames';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Subscription, of } from 'rxjs';
 
 import { useSortable } from '@dnd-kit/sortable';
@@ -18,21 +18,31 @@ import {
   EuiFormControlLayout,
   EuiFormLabel,
   EuiFormRow,
-  EuiToolTip,
+  EuiIcon,
+  transparentize,
   type UseEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import type { HasCustomPrepend, PinnedControlLayoutState } from '@kbn/controls-schemas';
 import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 import { EmbeddableRenderer, type DefaultEmbeddableApi } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
-import { useBatchedPublishingSubjects, type PublishingSubject } from '@kbn/presentation-publishing';
-
+import {
+  apiPublishesRelatedPanels,
+  useBatchedPublishingSubjects,
+  type PublishingSubject,
+} from '@kbn/presentation-publishing';
+import {
+  apiPublishesTooltipLabel,
+  type PublishesTooltipLabel,
+} from '@kbn/controls-schemas/src/types';
 import type { ControlsRendererParentApi } from '../types';
 import { apiPublishesLabel } from '../utils';
 import { controlWidthStyles } from './control_panel.styles';
 import { DragHandle } from './drag_handle';
 import { FloatingActions } from './floating_actions';
+import { ControlLabelTooltip } from './control_label_tooltip';
+import { useIndicateRelatedPanelsSelector } from '../hooks';
 
 export const ControlPanel = ({
   parentApi,
@@ -45,21 +55,42 @@ export const ControlPanel = ({
 }) => {
   const styles = useMemoCss(controlPanelStyles);
 
-  const [api, setApi] = useState<(DefaultEmbeddableApi & Partial<HasCustomPrepend>) | null>(null);
+  const [api, setApi] = useState<
+    (DefaultEmbeddableApi & Partial<HasCustomPrepend> & Partial<PublishesTooltipLabel>) | null
+  >(null);
 
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id,
   });
 
-  const [viewMode, disabledActionIds] = useBatchedPublishingSubjects(
+  const [viewMode, disabledActionIds, indicateRelatedPanelsId] = useBatchedPublishingSubjects(
     parentApi.viewMode$,
-    parentApi.disabledActionIds$ ?? (of([] as string[]) as PublishingSubject<string[]>)
+    parentApi.disabledActionIds$ ?? (of([] as string[]) as PublishingSubject<string[]>),
+    parentApi.indicateRelatedPanelsId$ ?? (of(undefined) as PublishingSubject<undefined>)
   );
 
   const [panelLabel, setPanelLabel] = useState<string | undefined>();
+  const [panelTooltipLabel, setPanelTooltipLabel] = useState<string | undefined>();
+  const [relatedPanels, setRelatedPanels] = useState<string[]>([]);
 
   const prependWrapperRef = useRef<HTMLDivElement>(null);
 
+  const indicateControl = useMemo(
+    () =>
+      Boolean(
+        api &&
+          indicateRelatedPanelsId !== undefined &&
+          relatedPanels.includes(indicateRelatedPanelsId)
+      ),
+    [relatedPanels, indicateRelatedPanelsId, api]
+  );
+  const {
+    canIndicateRelatedPanels,
+    isIndicatingRelatedPanels,
+    onToggleIndicateRelatedPanels,
+    numberOfRelatedPanels,
+  } = useIndicateRelatedPanelsSelector(api);
+
   useEffect(() => {
     if (!api) return;
 
@@ -72,6 +103,16 @@ export const ControlPanel = ({
         })
       );
     }
+    if (apiPublishesTooltipLabel(api)) {
+      subscriptions.add(
+        api.tooltipLabel$.subscribe((result) => {
+          setPanelTooltipLabel(result);
+        })
+      );
+    }
+    if (apiPublishesRelatedPanels(api)) {
+      subscriptions.add(api.relatedPanels$.subscribe(setRelatedPanels));
+    }
     return () => {
       subscriptions.unsubscribe();
     };
@@ -94,6 +135,49 @@ export const ControlPanel = ({
   );
 
   const isEditable = viewMode === 'edit';
+  const enableIndicateRelatedPanels = Boolean(canIndicateRelatedPanels && numberOfRelatedPanels);
+  const handleToggleIndicateRelated = useCallback(
+    () => (enableIndicateRelatedPanels ? onToggleIndicateRelatedPanels() : null),
+    [enableIndicateRelatedPanels, onToggleIndicateRelatedPanels]
+  );
+
+  const controlLabel = (
+    <ControlLabelTooltip
+      canIndicateRelatedPanels={canIndicateRelatedPanels}
+      isIndicatingRelatedPanels={isIndicatingRelatedPanels}
+      numberOfRelatedPanels={numberOfRelatedPanels}
+      panelLabel={panelLabel}
+      panelTooltipLabel={panelTooltipLabel}
+      anchorProps={{ className: 'eui-textTruncate', css: styles.tooltipStyles }}
+    >
+      <EuiFormLabel
+        className="controlPanel--label"
+        onClick={handleToggleIndicateRelated}
+        onKeyDown={(e) =>
+          e.key === 'Enter' || e.key === ' ' ? handleToggleIndicateRelated() : null
+        }
+        role={enableIndicateRelatedPanels ? 'button' : undefined}
+        tabIndex={enableIndicateRelatedPanels ? 0 : undefined}
+      >
+        <span css={styles.prependWrapperStyles} ref={prependWrapperRef}>
+          {panelLabel}
+          {canIndicateRelatedPanels && numberOfRelatedPanels === 0 && (
+            <>
+              {' '}
+              <EuiIcon
+                size="s"
+                aria-label={i18n.translate('controls.controlGroup.warningNoRelatedPanels', {
+                  defaultMessage: 'Warning: No related panels',
+                })}
+                type="warning"
+              />
+            </>
+          )}
+        </span>
+      </EuiFormLabel>
+    </ControlLabelTooltip>
+  );
+
   return (
     <EuiFlexItem
       component="li"
@@ -128,6 +212,8 @@ export const ControlPanel = ({
             fullWidth
             className={classNames('controlFrame__formControlLayout', {
               'controlFrame__formControlLayout--edit': isEditable,
+              'controlFrame__formControlLayout--focused': indicateControl,
+              'controlFrame__formControlLayout--selected': isIndicatingRelatedPanels,
               type,
             })}
             css={styles.formControl}
@@ -145,24 +231,19 @@ export const ControlPanel = ({
                     <api.CustomPrependComponent />
                   </>
                 ) : (
-                  <DragHandle
-                    isEditable={isEditable}
-                    controlTitle={panelLabel}
-                    className="controlFrame__dragHandle"
-                    {...attributes}
-                    {...listeners}
-                  >
-                    <EuiToolTip
-                      content={panelLabel}
-                      anchorProps={{ className: 'eui-textTruncate', css: styles.tooltipStyles }}
+                  <>
+                    <DragHandle
+                      isEditable={isEditable}
+                      controlTitle={panelLabel}
+                      className="controlFrame__dragHandle"
+                      highContrast={isIndicatingRelatedPanels}
+                      {...attributes}
+                      {...listeners}
                     >
-                      <EuiFormLabel className="controlPanel--label">
-                        <span css={styles.prependWrapperStyles} ref={prependWrapperRef}>
-                          {panelLabel}
-                        </span>
-                      </EuiFormLabel>
-                    </EuiToolTip>
-                  </DragHandle>
+                      {!enableIndicateRelatedPanels && controlLabel}
+                    </DragHandle>
+                    {enableIndicateRelatedPanels && controlLabel}
+                  </>
                 )}
               </>
             }
@@ -217,10 +298,23 @@ const controlPanelStyles = {
           paddingInlineStart: `${euiTheme.size.xxs} !important`, // corrected syntax for skinny icon
         },
       },
+      '&.controlFrame__formControlLayout--focused': {
+        outline: `${euiTheme.border.width.thick} solid ${euiTheme.colors.vis.euiColorVis0}`,
+      },
+      '&.controlFrame__formControlLayout--selected': {
+        outline: `${euiTheme.border.width.thick} solid ${euiTheme.colors.vis.euiColorVis0}`,
+        backgroundColor: transparentize(euiTheme.colors.vis.euiColorVis0, 0.1),
+        '& div, & button': {
+          backgroundColor: 'transparent',
+        },
+      },
       '.controlPanel--label': {
         padding: '0 !important',
         height: '100%',
         maxWidth: '100%',
+        '&[role="button"]': {
+          cursor: 'pointer',
+        },
       },
     }),
 };

src/platform/packages/private/kbn-controls-renderer/src/components/drag_handle.tsx

@@ -16,6 +16,7 @@ import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 interface DragHandleProps {
   isEditable: boolean;
   controlTitle?: string;
+  highContrast?: boolean; // If true, set the icon color to higher contrast instead of subdued
   [key: string]: any; // Allows passing additional props (like drag info)
 }
 
@@ -37,12 +38,19 @@ const dragHandleStyles = {
         pointerEvents: 'none', // Prevent label from blocking drag events
       },
     }),
+  dragHandleHighContrast: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      '.euiIcon': {
+        color: euiTheme.colors.textParagraph,
+      },
+    }),
 };
 
 export const DragHandle = ({
   isEditable,
   controlTitle = '',
   children,
+  highContrast,
   ...rest
 }: DragHandleProps) => {
   const styles = useMemoCss(dragHandleStyles);
@@ -56,7 +64,7 @@ export const DragHandle = ({
         defaultMessage: 'Move control {controlTitle}',
         values: { controlTitle },
       })}
-      css={styles.dragHandle}
+      css={[styles.dragHandle, highContrast ? styles.dragHandleHighContrast : null]}
     >
       <EuiIcon type="dragHorizontal" aria-hidden={true} />
       {children}

src/platform/packages/private/kbn-controls-renderer/src/hooks/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { useIndicateRelatedPanelsSelector } from './use_indicate_related_panels_selector';