[discover] Extract discover grid flyout from discover grid component (#…

…147403) ## Summary Extract discover grid flyout from discover grid component. Part of effort to turn discover into set of components consumable by other kibana apps. Closes #144154
elastic · Dec 16, 2022 · e43ccd1 · e43ccd1
1 parent 90b1399
commit e43ccd1
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 7 deletions.
diff --git a/src/plugins/discover/public/application/context/context_app_content.tsx b/src/plugins/discover/public/application/context/context_app_content.tsx
@@ -23,6 +23,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 type { DataTableRecord } from '../../types';
+import { DiscoverGridFlyout } from '../../components/discover_grid/discover_grid_flyout';
 
 export interface ContextAppContentProps {
   columns: string[];
@@ -160,6 +161,7 @@ export function ContextAppContent({
             onAddColumn={onAddColumn}
             onRemoveColumn={onRemoveColumn}
             onSetColumns={onSetColumns}
+            DocumentView={DiscoverGridFlyout}
           />
         </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
@@ -37,6 +37,7 @@ import { DocumentExplorerUpdateCallout } from '../document_explorer_callout/docu
 import { DiscoverTourProvider } from '../../../../components/discover_tour';
 import { DataTableRecord } from '../../../../types';
 import { getRawRecordType } from '../../utils/get_raw_record_type';
+import { DiscoverGridFlyout } from '../../../../components/discover_grid/discover_grid_flyout';
 
 const DocTableInfiniteMemoized = React.memo(DocTableInfinite);
 const DataGridMemoized = React.memo(DiscoverGrid);
@@ -216,6 +217,7 @@ function DiscoverDocumentsComponent({
               onUpdateRowsPerPage={onUpdateRowsPerPage}
               onFieldEdited={onFieldEdited}
               savedSearchId={savedSearch.id}
+              DocumentView={DiscoverGridFlyout}
             />
           </div>
         </>

diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx
@@ -187,6 +187,10 @@ export interface DiscoverGridProps {
    * Saved search id used for links to single doc and surrounding docs in the flyout
    */
   savedSearchId?: string;
+  /**
+   * Document detail view component
+   */
+  DocumentView?: typeof DiscoverGridFlyout;
 }
 
 export const EuiDataGridMemoized = React.memo(EuiDataGrid);
@@ -226,6 +230,7 @@ export const DiscoverGrid = ({
   rowsPerPageState,
   onUpdateRowsPerPage,
   onFieldEdited,
+  DocumentView,
 }: DiscoverGridProps) => {
   const dataGridRef = useRef<EuiDataGridRefProps>(null);
   const services = useDiscoverServices();
@@ -445,9 +450,13 @@ export const DiscoverGrid = ({
     }
     return { columns: sortingColumns, onSort: () => {} };
   }, [sortingColumns, onTableSort, isSortEnabled]);
+
+  const canSetExpandedDoc = Boolean(setExpandedDoc && DocumentView);
+
   const lead = useMemo(
-    () => getLeadControlColumns(setExpandedDoc).filter(({ id }) => controlColumnIds.includes(id)),
-    [controlColumnIds, setExpandedDoc]
+    () =>
+      getLeadControlColumns(canSetExpandedDoc).filter(({ id }) => controlColumnIds.includes(id)),
+    [controlColumnIds, canSetExpandedDoc]
   );
 
   const additionalControls = useMemo(
@@ -625,8 +634,8 @@ export const DiscoverGrid = ({
             </p>
           </EuiScreenReaderOnly>
         )}
-        {setExpandedDoc && expandedDoc && (
-          <DiscoverGridFlyout
+        {setExpandedDoc && expandedDoc && DocumentView && (
+          <DocumentView
             dataView={dataView}
             hit={expandedDoc}
             hits={displayedRows}

diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid_columns.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid_columns.tsx
@@ -20,7 +20,6 @@ import { SelectButton } from './discover_grid_document_selection';
 import { defaultTimeColumnWidth } from './constants';
 import { buildCopyColumnNameButton, buildCopyColumnValuesButton } from './build_copy_column_button';
 import { DiscoverServices } from '../../build_services';
-import { DataTableRecord } from '../../types';
 import { buildEditFieldButton } from './build_edit_field_button';
 
 const openDetails = {
@@ -53,8 +52,8 @@ const select = {
   ),
 };
 
-export function getLeadControlColumns(setExpandedDoc?: (doc?: DataTableRecord) => void) {
-  if (!setExpandedDoc) {
+export function getLeadControlColumns(canSetExpandedDoc: boolean) {
+  if (!canSetExpandedDoc) {
     return [select];
   }
   return [openDetails, select];

diff --git a/src/plugins/discover/public/embeddable/saved_search_grid.tsx b/src/plugins/discover/public/embeddable/saved_search_grid.tsx
@@ -11,6 +11,7 @@ import { DataTableRecord } from '../types';
 import { DiscoverGrid, DiscoverGridProps } from '../components/discover_grid/discover_grid';
 import { TotalDocuments } from '../application/main/components/total_documents/total_documents';
 import './saved_search_grid.scss';
+import { DiscoverGridFlyout } from '../components/discover_grid/discover_grid_flyout';
 
 export interface DiscoverGridEmbeddableProps extends DiscoverGridProps {
   totalHitCount: number;
@@ -39,6 +40,7 @@ export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) {
           {...props}
           setExpandedDoc={!props.isPlainRecord ? setExpandedDoc : undefined}
           expandedDoc={expandedDoc}
+          DocumentView={DiscoverGridFlyout}
         />
       </EuiFlexItem>
     </EuiFlexGroup>