fixed tourStep for expandButton

elastic · Sep 2, 2023 · 5a7067f · 5a7067f
1 parent 541c41d
commit 5a7067f
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 6 deletions.
diff --git a/packages/kbn-unified-data-table/README.md b/packages/kbn-unified-data-table/README.md
@@ -51,6 +51,7 @@ Props description:
 | **visibleCellActions** | (optional)number | An optional value for a custom number of the visible cell actions in the table. By default is up to 3. |
 | **externalCustomRenderers** | (optional)Record<string,(props: EuiDataGridCellValueElementProps) => React.ReactNode>; | An optional settings for a specified fields rendering like links. Applied only for the listed fields rendering. |
 | **consumer** | (optional)string | Name of the UnifiedDataTable consumer component or application. |
+| **componentsTourSteps** | (optional)Record<string,string> | Optional key/value pairs to set guided onboarding steps ids for a data table components included to guided tour. |
 
 *Required **services** list:
 ```
@@ -157,6 +158,7 @@ Usage example:
       }}
       configRowHeight={3}
       showMultiFields={true}
+      componentsTourSteps={'expandButton': DISCOVER_TOUR_STEP_ANCHOR_IDS.expandDocument}
     />
 ```
 

diff --git a/packages/kbn-unified-data-table/src/components/data_table.test.tsx b/packages/kbn-unified-data-table/src/components/data_table.test.tsx
@@ -409,4 +409,27 @@ describe('UnifiedDataTable', () => {
       expect(findTestSubject(component, 'test-renderer-custom-grid-body').exists()).toBeTruthy();
     });
   });
+
+  describe('componentsTourSteps', () => {
+    it('should render tour step for the first row of leading control column expandButton', async () => {
+      const component = await getComponent({
+        ...getProps(),
+        expandedDoc: {
+          id: 'test',
+          raw: {
+            _index: 'test_i',
+            _id: 'test',
+          },
+          flattened: { test: jest.fn() },
+        },
+        setExpandedDoc: jest.fn(),
+        renderDocumentView: jest.fn(),
+        componentsTourSteps: { expandButton: 'test-expand' },
+      });
+
+      const gridExpandBtn = findTestSubject(component, 'docTableExpandToggleColumn').first();
+      const tourStep = gridExpandBtn.getDOMNode().getAttribute('id');
+      expect(tourStep).toEqual('test-expand');
+    });
+  });
 });
diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx
@@ -278,6 +278,10 @@ export interface UnifiedDataTableProps {
    * Name of the UnifiedDataTable consumer component or application
    */
   consumer?: string;
+  /**
+   * Optional key/value pairs to set guided onboarding steps ids for a data table components included to guided tour.
+   */
+  componentsTourSteps?: Record<string, string>;
 }
 
 export const EuiDataGridMemoized = React.memo(EuiDataGrid);
@@ -330,6 +334,7 @@ export const UnifiedDataTable = ({
   visibleCellActions,
   externalCustomRenderers,
   consumer = 'discover',
+  componentsTourSteps,
 }: UnifiedDataTableProps) => {
   const { fieldFormats, toastNotifications, dataViewFieldEditor, uiSettings, storage, data } =
     services;
@@ -397,8 +402,10 @@ export const UnifiedDataTable = ({
         }
       },
       valueToStringConverter,
+      componentsTourSteps,
     }),
     [
+      componentsTourSteps,
       darkMode,
       dataView,
       displayedRows,

diff --git a/packages/kbn-unified-data-table/src/components/data_table_expand_button.tsx b/packages/kbn-unified-data-table/src/components/data_table_expand_button.tsx
@@ -15,15 +15,14 @@ import { UnifiedDataTableContext } from '../table_context';
 /**
  * Button to expand a given row
  */
-export const ExpandButton = (
-  { rowIndex, setCellProps }: EuiDataGridCellValueElementProps,
-  tourStep?: string
-) => {
+export const ExpandButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueElementProps) => {
   const toolTipRef = useRef<EuiToolTip>(null);
   const [pressed, setPressed] = useState<boolean>(false);
-  const { expanded, setExpanded, rows, isDarkMode } = useContext(UnifiedDataTableContext);
+  const { expanded, setExpanded, rows, isDarkMode, componentsTourSteps } =
+    useContext(UnifiedDataTableContext);
   const current = rows[rowIndex];
 
+  const tourStep = componentsTourSteps ? componentsTourSteps.expandButton : undefined;
   useEffect(() => {
     if (current.isAnchor) {
       setCellProps({

diff --git a/packages/kbn-unified-data-table/src/table_context.tsx b/packages/kbn-unified-data-table/src/table_context.tsx
@@ -22,6 +22,7 @@ export interface DataTableContext {
   selectedDocs: string[];
   setSelectedDocs: (selected: string[]) => void;
   valueToStringConverter: ValueToStringConverter;
+  componentsTourSteps?: Record<string, string>;
 }
 
 const defaultContext = {} as unknown as DataTableContext;

diff --git a/src/plugins/discover/public/application/context/context_app_content.tsx b/src/plugins/discover/public/application/context/context_app_content.tsx
@@ -36,6 +36,7 @@ import { MAX_CONTEXT_SIZE, MIN_CONTEXT_SIZE } from './services/constants';
 import { DocTableContext } from '../../components/doc_table/doc_table_context';
 import { useDiscoverServices } from '../../hooks/use_discover_services';
 import { DiscoverGridFlyout } from '../../components/discover_grid_flyout';
+import { DISCOVER_TOUR_STEP_ANCHOR_IDS } from '../../components/discover_tour';
 
 export interface ContextAppContentProps {
   columns: string[];
@@ -209,6 +210,7 @@ export function ContextAppContent({
               maxDocFieldsDisplayed={services.uiSettings.get(MAX_DOC_FIELDS_DISPLAYED)}
               renderDocumentView={renderDocumentView}
               services={services}
+              componentsTourSteps={{ expandButton: DISCOVER_TOUR_STEP_ANCHOR_IDS.expandDocument }}
             />
           </CellActionsProvider>
         </div>

diff --git a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx
@@ -45,7 +45,10 @@ import { useDataState } from '../../hooks/use_data_state';
 import { DocTableInfinite } from '../../../../components/doc_table/doc_table_infinite';
 import { DocumentExplorerCallout } from '../document_explorer_callout';
 import { DocumentExplorerUpdateCallout } from '../document_explorer_callout/document_explorer_update_callout';
-import { DiscoverTourProvider } from '../../../../components/discover_tour';
+import {
+  DISCOVER_TOUR_STEP_ANCHOR_IDS,
+  DiscoverTourProvider,
+} from '../../../../components/discover_tour';
 import { getRawRecordType } from '../../utils/get_raw_record_type';
 import { DiscoverGridFlyout } from '../../../../components/discover_grid_flyout';
 import { useSavedSearchInitial } from '../../services/discover_state_provider';
@@ -313,6 +316,7 @@ function DiscoverDocumentsComponent({
                 services={services}
                 totalHits={totalHits}
                 onFetchMoreRecords={onFetchMoreRecords}
+                componentsTourSteps={{ expandButton: DISCOVER_TOUR_STEP_ANCHOR_IDS.expandDocument }}
               />
             </CellActionsProvider>
           </div>

diff --git a/src/plugins/discover/public/embeddable/saved_search_grid.tsx b/src/plugins/discover/public/embeddable/saved_search_grid.tsx
@@ -18,6 +18,7 @@ import './saved_search_grid.scss';
 import { MAX_DOC_FIELDS_DISPLAYED, ROW_HEIGHT_OPTION, SHOW_MULTIFIELDS } from '@kbn/discover-utils';
 import { DiscoverGridFlyout } from '../components/discover_grid_flyout';
 import { SavedSearchEmbeddableBase } from './saved_search_embeddable_base';
+import { DISCOVER_TOUR_STEP_ANCHOR_IDS } from '../components/discover_tour';
 
 export interface DiscoverGridEmbeddableProps extends UnifiedDataTableProps {
   totalHitCount?: number;
@@ -77,6 +78,7 @@ export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) {
         showMultiFields={props.services.uiSettings.get(SHOW_MULTIFIELDS)}
         maxDocFieldsDisplayed={props.services.uiSettings.get(MAX_DOC_FIELDS_DISPLAYED)}
         renderDocumentView={renderDocumentView}
+        componentsTourSteps={{ expandButton: DISCOVER_TOUR_STEP_ANCHOR_IDS.expandDocument }}
       />
     </SavedSearchEmbeddableBase>
   );