Focus on title input in panel settings flyout when title clicked

elastic · Jan 2, 2024 · 85721fb · 85721fb
1 parent 76854d4
commit 85721fb
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 29 deletions.
diff --git a/...e/public/embeddable_panel/panel_actions/customize_panel_action/customize_panel_action.tsx b/...e/public/embeddable_panel/panel_actions/customize_panel_action/customize_panel_action.tsx
@@ -6,23 +6,23 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
-import { i18n } from '@kbn/i18n';
+import { OverlayStart, ThemeServiceStart } from '@kbn/core/public';
 import { TimeRange } from '@kbn/es-query';
+import { i18n } from '@kbn/i18n';
 import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public';
-import { OverlayStart, ThemeServiceStart } from '@kbn/core/public';
 import { toMountPoint } from '@kbn/react-kibana-mount';
-import { Action, IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
+import { Action, IncompatibleActionError, Trigger } from '@kbn/ui-actions-plugin/public';
+import React from 'react';
 
-import { core } from '../../../kibana_services';
 import {
-  IEmbeddable,
+  EditPanelAction,
   Embeddable,
   EmbeddableInput,
   EmbeddableOutput,
-  EditPanelAction,
+  IEmbeddable,
 } from '../../..';
-import { ViewMode, CommonlyUsedRange } from '../../../lib/types';
+import { core } from '../../../kibana_services';
+import { CommonlyUsedRange, ViewMode } from '../../../lib/types';
 import { tracksOverlays } from '../track_overlays';
 import { CustomizePanelEditor } from './customize_panel_editor';
 
@@ -50,6 +50,7 @@ export function hasTimeRange(
 
 export interface CustomizePanelActionContext {
   embeddable: IEmbeddable | Embeddable<TimeRangeInput>;
+  trigger?: Trigger;
 }
 
 export class CustomizePanelAction implements Action<CustomizePanelActionContext> {
@@ -104,7 +105,7 @@ export class CustomizePanelAction implements Action<CustomizePanelActionContext>
     );
   }
 
-  public async execute({ embeddable }: CustomizePanelActionContext) {
+  public async execute({ embeddable, trigger }: CustomizePanelActionContext) {
     const isCompatible = await this.isCompatible({ embeddable });
     if (!isCompatible) {
       throw new IncompatibleActionError();
@@ -126,6 +127,7 @@ export class CustomizePanelAction implements Action<CustomizePanelActionContext>
       toMountPoint(
         <KibanaReactContextProvider>
           <CustomizePanelEditor
+            titleFocus={!trigger}
             embeddable={embeddable}
             timeRangeCompatible={this.isTimeRangeCompatible({ embeddable })}
             dateFormat={this.dateFormat}

diff --git a/...e/public/embeddable_panel/panel_actions/customize_panel_action/customize_panel_editor.tsx b/...e/public/embeddable_panel/panel_actions/customize_panel_action/customize_panel_editor.tsx
@@ -6,39 +6,40 @@
  * Side Public License, v 1.
  */
 
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import useMount from 'react-use/lib/useMount';
 
 import {
-  EuiFormRow,
-  EuiFieldText,
-  EuiSwitch,
-  EuiFlyoutHeader,
-  EuiTitle,
-  EuiFlyoutBody,
-  EuiForm,
-  EuiTextArea,
-  EuiFlyoutFooter,
-  EuiButtonEmpty,
   EuiButton,
+  EuiButtonEmpty,
+  EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiSuperDatePicker,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiForm,
+  EuiFormRow,
   EuiSpacer,
+  EuiSuperDatePicker,
+  EuiSwitch,
+  EuiTextArea,
+  EuiTitle,
 } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import { TimeRange } from '@kbn/es-query';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { TimeRangeInput } from './customize_panel_action';
-import { canInheritTimeRange } from './can_inherit_time_range';
-import { doesInheritTimeRange } from './does_inherit_time_range';
 import {
-  IEmbeddable,
-  Embeddable,
   CommonlyUsedRange,
-  ViewMode,
+  Embeddable,
+  IEmbeddable,
   isFilterableEmbeddable,
+  ViewMode,
 } from '../../../lib';
+import { canInheritTimeRange } from './can_inherit_time_range';
+import { TimeRangeInput } from './customize_panel_action';
+import { doesInheritTimeRange } from './does_inherit_time_range';
 import { FiltersDetails } from './filters_details';
 
 type PanelSettings = {
@@ -55,10 +56,11 @@ interface CustomizePanelProps {
   commonlyUsedRanges?: CommonlyUsedRange[];
   onClose: () => void;
   onEdit: () => void;
+  titleFocus?: boolean;
 }
 
 export const CustomizePanelEditor = (props: CustomizePanelProps) => {
-  const { onClose, embeddable, dateFormat, timeRangeCompatible, onEdit } = props;
+  const { onClose, embeddable, dateFormat, timeRangeCompatible, onEdit, titleFocus } = props;
   const editMode = embeddable.getInput().viewMode === ViewMode.EDIT;
   const [hideTitle, setHideTitle] = useState(embeddable.getInput().hidePanelTitles);
   const [panelDescription, setPanelDescription] = useState(
@@ -75,6 +77,13 @@ export const CustomizePanelEditor = (props: CustomizePanelProps) => {
       ? (embeddable as Embeddable<TimeRangeInput>).getInput().timeRange
       : undefined
   );
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (titleFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [inputRef, titleFocus]);
 
   const commonlyUsedRangesForDatePicker = props.commonlyUsedRanges
     ? props.commonlyUsedRanges.map(
@@ -154,6 +163,7 @@ export const CustomizePanelEditor = (props: CustomizePanelProps) => {
           }
         >
           <EuiFieldText
+            inputRef={inputRef}
             id="panelTitleInput"
             className="panelTitleInputText"
             data-test-subj="customEmbeddablePanelTitleInput"