Table list view/integrate package kibana

package.json

@@ -147,7 +147,7 @@
     "@kbn/config": "link:bazel-bin/packages/kbn-config",
     "@kbn/config-mocks": "link:bazel-bin/packages/kbn-config-mocks",
     "@kbn/config-schema": "link:bazel-bin/packages/kbn-config-schema",
-    "@kbn/content-management-table-list": "link:bazel-bin/packages/kbn-content-management-table-list",
+    "@kbn/content-management-table-list": "link:bazel-bin/packages/content-management/table_list",
     "@kbn/core-analytics-browser": "link:bazel-bin/packages/core/analytics/core-analytics-browser",
     "@kbn/core-analytics-browser-internal": "link:bazel-bin/packages/core/analytics/core-analytics-browser-internal",
     "@kbn/core-analytics-browser-mocks": "link:bazel-bin/packages/core/analytics/core-analytics-browser-mocks",
@@ -801,7 +801,7 @@
     "@types/kbn__config": "link:bazel-bin/packages/kbn-config/npm_module_types",
     "@types/kbn__config-mocks": "link:bazel-bin/packages/kbn-config-mocks/npm_module_types",
     "@types/kbn__config-schema": "link:bazel-bin/packages/kbn-config-schema/npm_module_types",
-    "@types/kbn__content-management-table-list": "link:bazel-bin/packages/kbn-content-management-table-list/npm_module_types",
+    "@types/kbn__content-management-table-list": "link:bazel-bin/packages/content-management/table_list/npm_module_types",
     "@types/kbn__core-analytics-browser": "link:bazel-bin/packages/core/analytics/core-analytics-browser/npm_module_types",
     "@types/kbn__core-analytics-browser-internal": "link:bazel-bin/packages/core/analytics/core-analytics-browser-internal/npm_module_types",
     "@types/kbn__core-analytics-browser-mocks": "link:bazel-bin/packages/core/analytics/core-analytics-browser-mocks/npm_module_types",

packages/content-management/table_list/BUILD.bazel

@@ -2,17 +2,26 @@ load("@npm//@bazel/typescript:index.bzl", "ts_config")
 load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
 load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
 
-PKG_DIRNAME = "kbn-content-management-table-list"
+PKG_DIRNAME = "table_list"
 PKG_REQUIRE_NAME = "@kbn/content-management-table-list"
 
 SOURCE_FILES = glob(
   [
-    "src/**/*.ts",
-    "src/**/*.tsx",
+    "**/*.ts",
+    "**/*.tsx",
   ],
   exclude = [
+    "**/*.config.js",
+    "**/*.mock.*",
     "**/*.test.*",
     "**/*.stories.*",
+    "**/__snapshots__",
+    "**/integration_tests",
+    "**/mocks",
+    "**/scripts",
+    "**/storybook",
+    "**/test_fixtures",
+    "**/test_helpers",
   ],
 )
 
@@ -113,7 +122,7 @@ ts_project(
   declaration_map = True,
   emit_declaration_only = True,
   out_dir = "target_types",
-  root_dir = "src",
+  root_dir = ".",
   tsconfig = ":tsconfig",
 )
 

packages/content-management/table_list/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+export { TableListViewKibanaProvider, TableListViewProvider, TableListView } from './src';
+
+export type { UserContentCommonSchema } from './src';

packages/content-management/table_list/src/__jest__/tests.helpers.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import React from 'react';
-import type { ComponentType, MemoExoticComponent } from 'react';
+import type { ComponentType } from 'react';
 import { TableListViewProvider, Services } from '../table_list_view/services';
 
 export const getMockServices = (overrides?: Partial<Services>) => {
@@ -20,10 +20,7 @@ export const getMockServices = (overrides?: Partial<Services>) => {
   return services;
 };
 
-export function WithServices<P>(
-  Comp: MemoExoticComponent<ComponentType<P>>,
-  overrides: Partial<Services> = {}
-) {
+export function WithServices<P>(Comp: ComponentType<P>, overrides: Partial<Services> = {}) {
   return (props: P) => {
     const services = getMockServices(overrides);
     return (

packages/content-management/table_list/src/index.ts

@@ -6,6 +6,10 @@
  * Side Public License, v 1.
  */
 
-export { TableListView, TableListViewProvider } from './table_list_view';
+export {
+  TableListView,
+  TableListViewProvider,
+  TableListViewKibanaProvider,
+} from './table_list_view';
 
 export type { UserContentCommonSchema } from './table_list_view';

packages/content-management/table_list/src/table_list_view/index.ts

@@ -14,4 +14,4 @@ export type {
   UserContentCommonSchema,
 } from './table_list_view';
 
-export { TableListViewProvider } from './services';
+export { TableListViewProvider, TableListViewKibanaProvider } from './services';

packages/content-management/table_list/src/table_list_view/mocks.ts

@@ -20,7 +20,7 @@ export const getStoryServices = (params: Params, action: ActionFn = () => {}) =>
   const services: Services = {
     canEditAdvancedSettings: true,
     getListingLimitSettingsUrl: () => 'http://elastic.co',
-    notifyError: ({ title, text }) => {
+    notifyError: (title, text) => {
       action('notifyError')({ title, text });
     },
     ...params,

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

@@ -8,14 +8,18 @@
 
 import React, { FC, useContext } from 'react';
 import type { EuiTableFieldDataColumnType, SearchFilterConfig } from '@elastic/eui';
+import type { Observable } from 'rxjs';
 
 import { UserContentCommonSchema } from './table_list_view';
 
-type NotifyFn = (notifyArgs: { title: string | JSX.Element; text: string }) => void;
+type UnmountCallback = () => void;
+type MountPoint = (element: HTMLElement) => UnmountCallback;
+type NotifyFn = (title: JSX.Element, text?: string) => void;
 
-interface SavedObjectsReference {
-  type: string;
+export interface SavedObjectsReference {
   id: string;
+  name: string;
+  type: string;
 }
 
 export type DateFormatter = (props: {
@@ -30,11 +34,11 @@ export interface Services {
   canEditAdvancedSettings: boolean;
   getListingLimitSettingsUrl: () => string;
   notifyError: NotifyFn;
-  getTagsColumnDefinition?: () => EuiTableFieldDataColumnType<UserContentCommonSchema> | undefined;
   searchQueryParser?: (searchQuery: string) => {
     searchQuery: string;
     references?: SavedObjectsReference[];
   };
+  getTagsColumnDefinition?: () => EuiTableFieldDataColumnType<UserContentCommonSchema> | undefined;
   getSearchBarFilters?: () => SearchFilterConfig[];
   DateFormatterComp?: DateFormatter;
 }
@@ -48,6 +52,78 @@ export const TableListViewProvider: FC<Services> = ({ children, ...services }) =
   return <TableListViewContext.Provider value={services}>{children}</TableListViewContext.Provider>;
 };
 
+/**
+ * Kibana-specific service types.
+ */
+
+export interface TableListViewKibanaDependencies {
+  core: {
+    application: {
+      capabilities: {
+        advancedSettings?: {
+          save: boolean;
+        };
+      };
+      getUrlForApp: (app: string, options: { path: string }) => string;
+    };
+    notifications: {
+      toasts: {
+        addDanger: (notifyArgs: { title: MountPoint; text?: string }) => void;
+      };
+    };
+  };
+  toMountPoint: (
+    node: React.ReactNode,
+    options?: { theme$: Observable<{ readonly darkMode: boolean }> }
+  ) => MountPoint;
+  savedObjectTaggingApi?: {
+    ui: {
+      getTableColumnDefinition: () => EuiTableFieldDataColumnType<UserContentCommonSchema>;
+      parseSearchQuery: (
+        query: string,
+        options?: {
+          useName?: boolean;
+          tagField?: string;
+        }
+      ) => {
+        searchTerm: string;
+        tagReferences: SavedObjectsReference[];
+        valid: boolean;
+      };
+      getSearchBarFilter: (options?: {
+        useName?: boolean;
+        tagField?: string;
+      }) => SearchFilterConfig;
+    };
+  };
+}
+
+/**
+ * Kibana-specific Provider that maps to known dependency types.
+ */
+export const TableListViewKibanaProvider: FC<TableListViewKibanaDependencies> = ({
+  children,
+  ...services
+}) => {
+  const { core, toMountPoint, savedObjectTaggingApi } = services;
+  return (
+    <TableListViewProvider
+      canEditAdvancedSettings={Boolean(core.application.capabilities.advancedSettings?.save)}
+      getListingLimitSettingsUrl={() =>
+        core.application.getUrlForApp('management', {
+          path: `/kibana/settings?query=savedObjects:listingLimit`,
+        })
+      }
+      notifyError={(title, text) => {
+        core.notifications.toasts.addDanger({ title: toMountPoint(title), text });
+      }}
+      getTagsColumnDefinition={savedObjectTaggingApi?.ui.getTableColumnDefinition}
+    >
+      {children}
+    </TableListViewProvider>
+  );
+};
+
 /**
  * React hook for accessing pre-wired services.
  */

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

@@ -36,12 +36,12 @@ const createMockItems = (total: number) => {
 
     return {
       id: i.toString(),
+      type,
       references: [],
       updatedAt: moment().subtract(i, 'day').format('YYYY-MM-DDTHH:mm:ss'),
       attributes: {
         title: chance.sentence({ words: 5 }),
         description: `Description of item ${i}`,
-        type,
       },
     };
   });

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

@@ -54,12 +54,13 @@ describe('TableListView', () => {
     jest.useRealTimers();
   });
 
-  type Props = TableListViewProps;
-
-  const setup = registerTestBed<string, Props>(WithServices(TableListView), {
-    defaultProps: { ...requiredProps },
-    memoryRouter: { wrapComponent: false },
-  });
+  const setup = registerTestBed<string, TableListViewProps>(
+    WithServices<TableListViewProps>(TableListView),
+    {
+      defaultProps: { ...requiredProps },
+      memoryRouter: { wrapComponent: false },
+    }
+  );
 
   test('render default empty prompt', async () => {
     let testBed: TestBed;

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

@@ -27,14 +27,10 @@ import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 
 import { Table, ConfirmDeleteModal, ListingLimitWarning } from './components';
 import { useServices } from './services';
+import type { SavedObjectsReference } from './services';
 import type { Action } from './actions';
 import { reducer } from './reducer';
 
-interface SavedObjectsReference {
-  type: string;
-  id: string;
-}
-
 export interface Props<T extends UserContentCommonSchema = UserContentCommonSchema> {
   entityName: string;
   entityNamePlural: string;
@@ -83,6 +79,7 @@ export interface UserContentCommonSchema {
   id: string;
   updatedAt: string;
   references: SavedObjectsReference[];
+  type: string;
   attributes: {
     title: string;
     description?: string;
@@ -278,16 +275,14 @@ function TableListViewComp<T extends UserContentCommonSchema>({
     try {
       await deleteItems!(selectedItems);
     } catch (error) {
-      notifyError({
-        title: (
-          <FormattedMessage
-            id="contentManagement.tableList.listing.unableToDeleteDangerMessage"
-            defaultMessage="Unable to delete {entityName}(s)"
-            values={{ entityName }}
-          />
-        ),
-        text: error,
-      });
+      notifyError(
+        <FormattedMessage
+          id="contentManagement.tableList.listing.unableToDeleteDangerMessage"
+          defaultMessage="Unable to delete {entityName}(s)"
+          values={{ entityName }}
+        />,
+        error
+      );
     }
 
     fetchItems();
@@ -460,7 +455,7 @@ function TableListViewComp<T extends UserContentCommonSchema>({
   );
 }
 
-const TableListView = React.memo(TableListViewComp);
+const TableListView = React.memo(TableListViewComp) as typeof TableListViewComp;
 
 export { TableListView };
 

packages/content-management/table_list/tsconfig.json

@@ -5,7 +5,7 @@
     "declarationMap": true,
     "emitDeclarationOnly": true,
     "outDir": "target_types",
-    "rootDir": "src",
+    "rootDir": ".",
     "stripInternal": false,
     "types": [
       "jest",
@@ -16,6 +16,7 @@
     ]
   },
   "include": [
-    "src/**/*"
+    "**/*.ts",
+      "**/*.tsx",
   ]
 }