[Table list view] Integrate package into visualizations, maps, graphs

packages/content-management/table_list/src/table_list_view.tsx

@@ -6,7 +6,15 @@
  * Side Public License, v 1.
  */
 
-import React, { useReducer, useCallback, useEffect, useRef, useMemo, ReactNode } from 'react';
+import React, {
+  useReducer,
+  useCallback,
+  useEffect,
+  useRef,
+  useMemo,
+  ReactNode,
+  MouseEvent,
+} from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
 import {
   EuiBasicTableColumn,
@@ -53,7 +61,10 @@ export interface Props<T extends UserContentCommonSchema = UserContentCommonSche
     searchQuery: string,
     references?: SavedObjectsFindOptionsReference[]
   ): Promise<{ total: number; hits: T[] }>;
-  getDetailViewLink(entity: T): string;
+  /** Handler to set the item title "href" value. If it returns undefined there won't be a link for this item. */
+  getDetailViewLink?: (entity: T) => string | undefined;
+  /** Handler to execute when clicking the item title */
+  onClickTitle?: (item: T) => void;
   createItem?(): void;
   deleteItems?(items: T[]): Promise<void>;
   editItem?(item: T): void;
@@ -103,9 +114,22 @@ function TableListViewComp<T extends UserContentCommonSchema>({
   editItem,
   deleteItems,
   getDetailViewLink,
+  onClickTitle,
   id = 'userContent',
   children,
 }: Props<T>) {
+  if (!getDetailViewLink && !onClickTitle) {
+    throw new Error(
+      `[TableListView] One o["getDetailViewLink" or "onClickTitle"] prop must be provided.`
+    );
+  }
+
+  if (getDetailViewLink && onClickTitle) {
+    throw new Error(
+      `[TableListView] Either "getDetailViewLink" or "onClickTitle" can be provided. Not both.`
+    );
+  }
+
   const isMounted = useRef(false);
   const fetchIdx = useRef(0);
 
@@ -137,14 +161,35 @@ function TableListViewComp<T extends UserContentCommonSchema>({
           defaultMessage: 'Title',
         }),
         sortable: true,
-        render: (field: keyof T, record: T) => (
-          <EuiLink
-            href={getDetailViewLink(record)}
-            data-test-subj={`${id}ListingTitleLink-${record.attributes.title.split(' ').join('-')}`}
-          >
-            {record.attributes.title}
-          </EuiLink>
-        ),
+        render: (field: keyof T, record: T) => {
+          // The validation is handled at the top of the component
+          const href = getDetailViewLink ? getDetailViewLink(record) : undefined;
+
+          if (!href && !onClickTitle) {
+            // This item is not clickable
+            return <span>{record.attributes.title}</span>;
+          }
+
+          return (
+            // eslint-disable-next-line  @elastic/eui/href-or-on-click
+            <EuiLink
+              href={getDetailViewLink ? getDetailViewLink(record) : undefined}
+              onClick={
+                onClickTitle
+                  ? (e: MouseEvent) => {
+                      e.preventDefault();
+                      onClickTitle(record);
+                    }
+                  : undefined
+              }
+              data-test-subj={`${id}ListingTitleLink-${record.attributes.title
+                .split(' ')
+                .join('-')}`}
+            >
+              {record.attributes.title}
+            </EuiLink>
+          );
+        },
       },
       {
         field: 'attributes.description',

src/plugins/dashboard/public/application/listing/dashboard_listing.tsx

@@ -47,6 +47,7 @@ const SAVED_OBJECTS_PER_PAGE_SETTING = 'savedObjects:perPage';
 interface DashboardSavedObjectUserContent extends UserContentCommonSchema {
   attributes: {
     title: string;
+    description?: string;
     timeRestore: boolean;
   };
 }
@@ -61,6 +62,7 @@ const toTableListViewSavedObject = (
     type: 'dashboard',
     attributes: {
       title: (savedObject.title as string) ?? '',
+      description: savedObject.description as string,
       timeRestore: savedObject.timeRestore as boolean,
     },
   };

src/plugins/dashboard/public/services/kibana_react.ts

@@ -16,7 +16,6 @@ export {
   useKibana,
   withKibana,
   toMountPoint,
-  TableListView,
   reactToUiComponent,
   ExitFullScreenButton,
   KibanaContextProvider,

src/plugins/kibana_react/public/index.ts

@@ -41,9 +41,6 @@ export { useUiSetting, useUiSetting$ } from './ui_settings';
 
 export { useExecutionContext } from './use_execution_context';
 
-export type { TableListViewProps, TableListViewState } from './table_list_view';
-export { TableListView } from './table_list_view';
-
 export type { ToolbarButtonProps } from './toolbar_button';
 export { POSITIONS, WEIGHTS, TOOLBAR_BUTTON_SIZES, ToolbarButton } from './toolbar_button';