diff --git a/src/legacy/core_plugins/kibana/public/dashboard/listing/__snapshots__/dashboard_listing.test.js.snap b/src/legacy/core_plugins/kibana/public/dashboard/listing/__snapshots__/dashboard_listing.test.js.snap
index e23102a0785fc..1ed05035f5f4c 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/listing/__snapshots__/dashboard_listing.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/dashboard/listing/__snapshots__/dashboard_listing.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`after fetch hideWriteControls 1`] = `
-<InjectIntl(TableListViewUi)
+<TableListView
   createItem={null}
   deleteItems={null}
   editItem={null}
@@ -43,11 +43,17 @@ exports[`after fetch hideWriteControls 1`] = `
     ]
   }
   tableListTitle="Dashboards"
+  toastNotifications={Object {}}
+  uiSettings={
+    Object {
+      "get": [MockFunction],
+    }
+  }
 />
 `;
 
 exports[`after fetch initialFilter 1`] = `
-<InjectIntl(TableListViewUi)
+<TableListView
   createItem={[Function]}
   deleteItems={[Function]}
   editItem={[Function]}
@@ -133,11 +139,17 @@ exports[`after fetch initialFilter 1`] = `
     ]
   }
   tableListTitle="Dashboards"
+  toastNotifications={Object {}}
+  uiSettings={
+    Object {
+      "get": [MockFunction],
+    }
+  }
 />
 `;
 
 exports[`after fetch renders call to action when no dashboards exist 1`] = `
-<InjectIntl(TableListViewUi)
+<TableListView
   createItem={[Function]}
   deleteItems={[Function]}
   editItem={[Function]}
@@ -223,11 +235,17 @@ exports[`after fetch renders call to action when no dashboards exist 1`] = `
     ]
   }
   tableListTitle="Dashboards"
+  toastNotifications={Object {}}
+  uiSettings={
+    Object {
+      "get": [MockFunction],
+    }
+  }
 />
 `;
 
 exports[`after fetch renders table rows 1`] = `
-<InjectIntl(TableListViewUi)
+<TableListView
   createItem={[Function]}
   deleteItems={[Function]}
   editItem={[Function]}
@@ -313,11 +331,17 @@ exports[`after fetch renders table rows 1`] = `
     ]
   }
   tableListTitle="Dashboards"
+  toastNotifications={Object {}}
+  uiSettings={
+    Object {
+      "get": [MockFunction],
+    }
+  }
 />
 `;
 
 exports[`after fetch renders warning when listingLimit is exceeded 1`] = `
-<InjectIntl(TableListViewUi)
+<TableListView
   createItem={[Function]}
   deleteItems={[Function]}
   editItem={[Function]}
@@ -403,11 +427,17 @@ exports[`after fetch renders warning when listingLimit is exceeded 1`] = `
     ]
   }
   tableListTitle="Dashboards"
+  toastNotifications={Object {}}
+  uiSettings={
+    Object {
+      "get": [MockFunction],
+    }
+  }
 />
 `;
 
 exports[`renders empty page in before initial fetch to avoid flickering 1`] = `
-<InjectIntl(TableListViewUi)
+<TableListView
   createItem={[Function]}
   deleteItems={[Function]}
   editItem={[Function]}
@@ -493,5 +523,11 @@ exports[`renders empty page in before initial fetch to avoid flickering 1`] = `
     ]
   }
   tableListTitle="Dashboards"
+  toastNotifications={Object {}}
+  uiSettings={
+    Object {
+      "get": [MockFunction],
+    }
+  }
 />
 `;
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js b/src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
index d8216361562e2..c222fcd3c928c 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
+++ b/src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js
@@ -23,8 +23,9 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
 import { EuiLink, EuiButton, EuiEmptyPrompt } from '@elastic/eui';
+import { npStart } from 'ui/new_platform';
 
-import { TableListView } from './../../table_list_view';
+import { TableListView } from '../../../../../../../src/plugins/kibana_react/public';
 
 export const EMPTY_FILTER = '';
 
@@ -58,6 +59,8 @@ export class DashboardListing extends React.Component {
         tableListTitle={i18n.translate('kbn.dashboard.listing.dashboardsTitle', {
           defaultMessage: 'Dashboards',
         })}
+        toastNotifications={npStart.core.notifications.toasts}
+        uiSettings={npStart.core.uiSettings}
       />
     );
   }
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing.test.js b/src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing.test.js
index 57de395525e1b..be542c60bfe7a 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing.test.js
+++ b/src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing.test.js
@@ -42,6 +42,17 @@ jest.mock(
   { virtual: true }
 );
 
+jest.mock('ui/new_platform', () => {
+  return {
+    npStart: {
+      core: {
+        notifications: { toasts: { } },
+        uiSettings: { get: jest.fn(() => 10) },
+      },
+    },
+  };
+});
+
 import React from 'react';
 import { shallow } from 'enzyme';
 
diff --git a/src/legacy/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js b/src/legacy/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js
index fbd70a0d8c0f7..efab03303aa80 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js
+++ b/src/legacy/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js
@@ -21,13 +21,13 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { TableListView } from './../../table_list_view';
+import { TableListView } from '../../../../../../../src/plugins/kibana_react/public';
 
 import { EuiIcon, EuiBetaBadge, EuiLink, EuiButton, EuiEmptyPrompt } from '@elastic/eui';
 
 import { getServices } from '../kibana_services';
 
-const { capabilities } = getServices();
+const { capabilities, toastNotifications, uiSettings } = getServices();
 
 class VisualizeListingTable extends Component {
   constructor(props) {
@@ -57,6 +57,8 @@ class VisualizeListingTable extends Component {
         tableListTitle={i18n.translate('kbn.visualize.listing.table.listTitle', {
           defaultMessage: 'Visualizations',
         })}
+        toastNotifications={toastNotifications}
+        uiSettings={uiSettings}
       />
     );
   }
diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts
index cd2ae89b05b5d..cf025ec2e88d4 100644
--- a/src/plugins/kibana_react/public/index.ts
+++ b/src/plugins/kibana_react/public/index.ts
@@ -23,3 +23,4 @@ export * from './context';
 export * from './overlays';
 export * from './ui_settings';
 export * from './field_icon';
+export * from './table_list_view';
diff --git a/src/legacy/core_plugins/kibana/public/table_list_view/index.js b/src/plugins/kibana_react/public/table_list_view/index.ts
similarity index 93%
rename from src/legacy/core_plugins/kibana/public/table_list_view/index.js
rename to src/plugins/kibana_react/public/table_list_view/index.ts
index ae3e5d022c725..d9a4db50ab7fb 100644
--- a/src/legacy/core_plugins/kibana/public/table_list_view/index.js
+++ b/src/plugins/kibana_react/public/table_list_view/index.ts
@@ -16,6 +16,4 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-export { TableListView } from './table_list_view';
-
+export * from './table_list_view';
diff --git a/src/legacy/core_plugins/kibana/public/table_list_view/table_list_view.js b/src/plugins/kibana_react/public/table_list_view/table_list_view.tsx
similarity index 66%
rename from src/legacy/core_plugins/kibana/public/table_list_view/table_list_view.js
rename to src/plugins/kibana_react/public/table_list_view/table_list_view.tsx
index 3148a4a37c9c0..7d95c00e76419 100644
--- a/src/legacy/core_plugins/kibana/public/table_list_view/table_list_view.js
+++ b/src/plugins/kibana_react/public/table_list_view/table_list_view.tsx
@@ -18,13 +18,12 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import _ from 'lodash';
-import { toastNotifications } from 'ui/notify';
+import { debounce, indexBy, sortBy, uniq } from 'lodash';
 import {
   EuiTitle,
+  // @ts-ignore
   EuiInMemoryTable,
   EuiPage,
   EuiPageBody,
@@ -38,26 +37,66 @@ import {
   EuiConfirmModal,
   EuiCallOut,
 } from '@elastic/eui';
-
-import { npStart } from 'ui/new_platform';
+import { ToastsStart, UiSettingsClientContract } from 'kibana/public';
 
 export const EMPTY_FILTER = '';
 
+interface Column {
+  name: string;
+  width?: string;
+  actions?: object[];
+}
+
+interface Item {
+  id?: string;
+}
+
+export interface TableListViewProps {
+  createItem?(): void;
+  deleteItems?(items: object[]): Promise<void>;
+  editItem?(item: object): void;
+  entityName: string;
+  entityNamePlural: string;
+  findItems(query: string): Promise<{ total: number; hits: object[] }>;
+  listingLimit: number;
+  initialFilter: string;
+  noItemsFragment: JSX.Element;
+  // update possible column types to something like (FieldDataColumn | ComputedColumn | ActionsColumn)[] when they have been added to EUI
+  tableColumns: Column[];
+  tableListTitle: string;
+  toastNotifications: ToastsStart;
+  uiSettings: UiSettingsClientContract;
+}
+
+export interface TableListViewState {
+  items: object[];
+  hasInitialFetchReturned: boolean;
+  isFetchingItems: boolean;
+  isDeletingItems: boolean;
+  showDeleteModal: boolean;
+  showLimitError: boolean;
+  filter: string;
+  selectedIds: string[];
+  totalItems: number;
+}
+
 // saved object client does not support sorting by title because title is only mapped as analyzed
 // the legacy implementation got around this by pulling `listingLimit` items and doing client side sorting
 // and not supporting server-side paging.
 // This component does not try to tackle these problems (yet) and is just feature matching the legacy component
 // TODO support server side sorting/paging once title and description are sortable on the server.
-class TableListViewUi extends React.Component {
+class TableListView extends React.Component<TableListViewProps, TableListViewState> {
+  private pagination = {};
+  private _isMounted = false;
 
-  constructor(props) {
+  constructor(props: TableListViewProps) {
     super(props);
 
-    const initialPageSize = npStart.core.uiSettings.get('savedObjects:perPage');
+    const initialPageSize = props.uiSettings.get('savedObjects:perPage');
     this.pagination = {
       initialPageIndex: 0,
       initialPageSize,
-      pageSizeOptions: _.uniq([10, 20, 50, initialPageSize]).sort(),
+      pageSizeOptions: uniq([10, 20, 50, initialPageSize]).sort(),
     };
     this.state = {
       items: [],
@@ -67,10 +106,9 @@ class TableListViewUi extends React.Component {
       isDeletingItems: false,
       showDeleteModal: false,
       showLimitError: false,
-      filter: this.props.initialFilter,
+      filter: props.initialFilter,
       selectedIds: [],
     };
-
   }
 
   componentWillMount() {
@@ -86,7 +124,7 @@ class TableListViewUi extends React.Component {
     this.fetchItems();
   }
 
-  debouncedFetch = _.debounce(async (filter) => {
+  debouncedFetch = debounce(async (filter: string) => {
     const response = await this.props.findItems(filter);
 
     if (!this._isMounted) {
@@ -100,7 +138,7 @@ class TableListViewUi extends React.Component {
       this.setState({
         hasInitialFetchReturned: true,
         isFetchingItems: false,
-        items: (!filter ? _.sortBy(response.hits, 'title') : response.hits),
+        items: !filter ? sortBy(response.hits, 'title') : response.hits,
         totalItems: response.total,
         showLimitError: response.total > this.props.listingLimit,
       });
@@ -108,26 +146,29 @@ class TableListViewUi extends React.Component {
   }, 300);
 
   fetchItems = () => {
-    this.setState({
-      isFetchingItems: true,
-    }, this.debouncedFetch.bind(null, this.state.filter));
-  }
+    this.setState(
+      {
+        isFetchingItems: true,
+      },
+      this.debouncedFetch.bind(null, this.state.filter)
+    );
+  };
 
   deleteSelectedItems = async () => {
-    if (this.state.isDeletingItems) {
+    if (this.state.isDeletingItems || !this.props.deleteItems) {
       return;
     }
     this.setState({
-      isDeletingItems: true
+      isDeletingItems: true,
     });
     try {
-      const itemsById = _.indexBy(this.state.items, 'id');
+      const itemsById = indexBy(this.state.items, 'id');
       await this.props.deleteItems(this.state.selectedIds.map(id => itemsById[id]));
     } catch (error) {
-      toastNotifications.addDanger({
+      this.props.toastNotifications.addDanger({
         title: (
           <FormattedMessage
-            id="kbn.table_list_view.listing.unableToDeleteDangerMessage"
+            id="kibana-react.tableListView.listing.unableToDeleteDangerMessage"
             defaultMessage="Unable to delete {entityName}(s)"
             values={{ entityName: this.props.entityName }}
           />
@@ -138,25 +179,28 @@ class TableListViewUi extends React.Component {
     this.fetchItems();
     this.setState({
       isDeletingItems: false,
-      selectedIds: []
+      selectedIds: [],
     });
     this.closeDeleteModal();
-  }
+  };
 
   closeDeleteModal = () => {
     this.setState({ showDeleteModal: false });
-  }
+  };
 
   openDeleteModal = () => {
     this.setState({ showDeleteModal: true });
-  }
+  };
 
-  setFilter(filter) {
+  setFilter({ queryText }: { queryText: string }) {
     // If the user is searching, we want to clear the sort order so that
     // results are ordered by Elasticsearch's relevance.
-    this.setState({
-      filter: filter.queryText,
-    }, this.fetchItems);
+    this.setState(
+      {
+        filter: queryText,
+      },
+      this.fetchItems
+    );
   }
 
   hasNoItems() {
@@ -170,14 +214,14 @@ class TableListViewUi extends React.Component {
   renderConfirmDeleteModal() {
     let deleteButton = (
       <FormattedMessage
-        id="kbn.table_list_view.listing.deleteSelectedItemsConfirmModal.confirmButtonLabel"
+        id="kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.confirmButtonLabel"
         defaultMessage="Delete"
       />
     );
     if (this.state.isDeletingItems) {
       deleteButton = (
         <FormattedMessage
-          id="kbn.table_list_view.listing.deleteSelectedItemsConfirmModal.confirmButtonLabelDeleting"
+          id="kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.confirmButtonLabelDeleting"
           defaultMessage="Deleting"
         />
       );
@@ -188,11 +232,14 @@ class TableListViewUi extends React.Component {
         <EuiConfirmModal
           title={
             <FormattedMessage
-              id="kbn.table_list_view.listing.deleteSelectedConfirmModal.title"
+              id="kibana-react.tableListView.listing.deleteSelectedConfirmModal.title"
               defaultMessage="Delete {itemCount} {entityName}?"
               values={{
                 itemCount: this.state.selectedIds.length,
-                entityName: (this.state.selectedIds.length === 1) ? this.props.entityName : this.props.entityNamePlural
+                entityName:
+                  this.state.selectedIds.length === 1
+                    ? this.props.entityName
+                    : this.props.entityNamePlural,
               }}
             />
           }
@@ -201,7 +248,7 @@ class TableListViewUi extends React.Component {
           onConfirm={this.deleteSelectedItems}
           cancelButtonText={
             <FormattedMessage
-              id="kbn.table_list_view.listing.deleteSelectedItemsConfirmModal.cancelButtonLabel"
+              id="kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.cancelButtonLabel"
               defaultMessage="Cancel"
             />
           }
@@ -210,7 +257,7 @@ class TableListViewUi extends React.Component {
         >
           <p>
             <FormattedMessage
-              id="kbn.table_list_view.listing.deleteConfirmModalDescription"
+              id="kibana-react.tableListView.listing.deleteConfirmModalDescription"
               defaultMessage="You can't recover deleted {entityNamePlural}."
               values={{ entityNamePlural: this.props.entityNamePlural }}
             />
@@ -227,7 +274,7 @@ class TableListViewUi extends React.Component {
           <EuiCallOut
             title={
               <FormattedMessage
-                id="kbn.table_list_view.listing.listingLimitExceededTitle"
+                id="kibana-react.tableListView.listing.listingLimitExceededTitle"
                 defaultMessage="Listing limit exceeded"
               />
             }
@@ -236,26 +283,22 @@ class TableListViewUi extends React.Component {
           >
             <p>
               <FormattedMessage
-                id="kbn.table_list_view.listing.listingLimitExceededDescription"
+                id="kibana-react.tableListView.listing.listingLimitExceededDescription"
                 defaultMessage="You have {totalItems} {entityNamePlural}, but your {listingLimitText} setting prevents
                 the table below from displaying more than {listingLimitValue}. You can change this setting under {advancedSettingsLink}."
                 values={{
                   entityNamePlural: this.props.entityNamePlural,
                   totalItems: this.state.totalItems,
                   listingLimitValue: this.props.listingLimit,
-                  listingLimitText: (
-                    <strong>
-                      listingLimit
-                    </strong>
-                  ),
+                  listingLimitText: <strong>listingLimit</strong>,
                   advancedSettingsLink: (
                     <EuiLink href="#/management/kibana/settings">
                       <FormattedMessage
-                        id="kbn.table_list_view.listing.listingLimitExceeded.advancedSettingsLinkText"
+                        id="kibana-react.tableListView.listing.listingLimitExceeded.advancedSettingsLinkText"
                         defaultMessage="Advanced Settings"
                       />
                     </EuiLink>
-                  )
+                  ),
                 }}
               />
             </p>
@@ -268,18 +311,15 @@ class TableListViewUi extends React.Component {
 
   renderNoItemsMessage() {
     if (this.props.noItemsFragment) {
-      return (
-        this.props.noItemsFragment
-      );
+      return this.props.noItemsFragment;
     } else {
       return (
         <FormattedMessage
-          id="kbn.table_list_view.listing.noAvailableItemsMessage"
+          id="kibana-react.tableListView.listing.noAvailableItemsMessage"
           defaultMessage="No {entityNamePlural} available."
           values={{ entityNamePlural: this.props.entityNamePlural }}
         />
       );
-
     }
   }
 
@@ -302,11 +342,12 @@ class TableListViewUi extends React.Component {
         data-test-subj="deleteSelectedItems"
       >
         <FormattedMessage
-          id="kbn.table_list_view.listing.deleteButtonMessage"
+          id="kibana-react.tableListView.listing.deleteButtonMessage"
           defaultMessage="Delete {itemCount} {entityName}"
           values={{
             itemCount: selection.length,
-            entityName: (selection.length === 1) ? this.props.entityName : this.props.entityNamePlural
+            entityName:
+              selection.length === 1 ? this.props.entityName : this.props.entityNamePlural,
           }}
         />
       </EuiButton>
@@ -314,25 +355,34 @@ class TableListViewUi extends React.Component {
   }
 
   renderTable() {
-    const selection = this.props.deleteItems ? {
-      onSelectionChange: (selection) => {
-        this.setState({
-          selectedIds: selection.map(item => { return item.id; })
-        });
-      }
-    } : null;
-
-    const actions = [{
-      name: i18n.translate('kbn.table_list_view.listing.table.editActionName', {
-        defaultMessage: 'Edit'
-      }),
-      description: i18n.translate('kbn.table_list_view.listing.table.editActionDescription', {
-        defaultMessage: 'Edit'
-      }),
-      icon: 'pencil',
-      type: 'icon',
-      onClick: this.props.editItem
-    }];
+    const selection = this.props.deleteItems
+      ? {
+          onSelectionChange: (obj: Item[]) => {
+            this.setState({
+              selectedIds: obj
+                .map(item => item.id)
+                .filter((id: undefined | string): id is string => Boolean(id)),
+            });
+          },
+        }
+      : null;
+
+    const actions = [
+      {
+        name: i18n.translate('kibana-react.tableListView.listing.table.editActionName', {
+          defaultMessage: 'Edit',
+        }),
+        description: i18n.translate(
+          'kibana-react.tableListView.listing.table.editActionDescription',
+          {
+            defaultMessage: 'Edit',
+          }
+        ),
+        icon: 'pencil',
+        type: 'icon',
+        onClick: this.props.editItem,
+      },
+    ];
 
     const search = {
       onChange: this.setFilter.bind(this),
@@ -346,17 +396,17 @@ class TableListViewUi extends React.Component {
     const columns = this.props.tableColumns.slice();
     if (this.props.editItem) {
       columns.push({
-        name: i18n.translate('kbn.table_list_view.listing.table.actionTitle', {
-          defaultMessage: 'Actions'
+        name: i18n.translate('kibana-react.tableListView.listing.table.actionTitle', {
+          defaultMessage: 'Actions',
         }),
         width: '100px',
-        actions
+        actions,
       });
     }
 
     const noItemsMessage = (
       <FormattedMessage
-        id="kbn.table_list_view.listing.noMatchedItemsMessage"
+        id="kibana-react.tableListView.listing.noMatchedItemsMessage"
         defaultMessage="No {entityNamePlural} matched your search."
         values={{ entityNamePlural: this.props.entityNamePlural }}
       />
@@ -397,7 +447,7 @@ class TableListViewUi extends React.Component {
             fill
           >
             <FormattedMessage
-              id="kbn.table_list_view.listing.createNewItemButtonLabel"
+              id="kibana-react.tableListView.listing.createNewItemButtonLabel"
               defaultMessage="Create {entityName}"
               values={{ entityName: this.props.entityName }}
             />
@@ -412,14 +462,11 @@ class TableListViewUi extends React.Component {
         <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd" data-test-subj="top-nav">
           <EuiFlexItem grow={false}>
             <EuiTitle size="l">
-              <h1>
-                {this.props.tableListTitle}
-              </h1>
+              <h1>{this.props.tableListTitle}</h1>
             </EuiTitle>
           </EuiFlexItem>
 
           {createButton}
-
         </EuiFlexGroup>
 
         <EuiSpacer size="m" />
@@ -450,34 +497,10 @@ class TableListViewUi extends React.Component {
         className="itemListing__page"
         restrictWidth
       >
-        <EuiPageBody>
-          {this.renderPageContent()}
-        </EuiPageBody>
+        <EuiPageBody>{this.renderPageContent()}</EuiPageBody>
       </EuiPage>
     );
   }
 }
 
-TableListViewUi.propTypes = {
-  tableColumns: PropTypes.array.isRequired,
-
-  noItemsFragment: PropTypes.object,
-
-  findItems: PropTypes.func.isRequired,
-  deleteItems: PropTypes.func,
-  createItem: PropTypes.func,
-  editItem: PropTypes.func,
-
-  listingLimit: PropTypes.number,
-  initialFilter: PropTypes.string,
-
-  entityName: PropTypes.string.isRequired,
-  entityNamePlural: PropTypes.string.isRequired,
-  tableListTitle: PropTypes.string.isRequired,
-};
-
-TableListViewUi.defaultProps = {
-  initialFilter: EMPTY_FILTER,
-};
-
-export const TableListView = injectI18n(TableListViewUi);
+export { TableListView };
diff --git a/x-pack/legacy/plugins/graph/public/components/listing.tsx b/x-pack/legacy/plugins/graph/public/components/listing.tsx
index 99df013548840..047590d8d562d 100644
--- a/x-pack/legacy/plugins/graph/public/components/listing.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/listing.tsx
@@ -10,15 +10,14 @@ import React, { Fragment } from 'react';
 import { EuiEmptyPrompt, EuiLink, EuiButton } from '@elastic/eui';
 
 import { CoreStart, ApplicationStart } from 'kibana/public';
-// @ts-ignore
-import { TableListView } from '../../../../../../src/legacy/core_plugins/kibana/public/table_list_view/table_list_view';
+import { TableListView } from '../../../../../../src/plugins/kibana_react/public';
 import { GraphWorkspaceSavedObject } from '../types';
 
 export interface ListingProps {
   coreStart: CoreStart;
   createItem: () => void;
-  findItems: (query: string, limit: number) => Promise<GraphWorkspaceSavedObject[]>;
-  deleteItems: (ids: string[]) => Promise<void>;
+  findItems: (query: string) => Promise<{ total: number; hits: GraphWorkspaceSavedObject[] }>;
+  deleteItems: (records: GraphWorkspaceSavedObject[]) => Promise<void>;
   editItem: (record: GraphWorkspaceSavedObject) => void;
   getViewUrl: (record: GraphWorkspaceSavedObject) => string;
   listingLimit: number;
@@ -31,10 +30,10 @@ export function Listing(props: ListingProps) {
   return (
     <I18nProvider>
       <TableListView
-        createItem={props.capabilities.save ? props.createItem : null}
+        createItem={props.capabilities.save ? props.createItem : undefined}
         findItems={props.findItems}
-        deleteItems={props.capabilities.delete ? props.deleteItems : null}
-        editItem={props.capabilities.save ? props.editItem : null}
+        deleteItems={props.capabilities.delete ? props.deleteItems : undefined}
+        editItem={props.capabilities.save ? props.editItem : undefined}
         tableColumns={getTableColumns(props.getViewUrl)}
         listingLimit={props.listingLimit}
         initialFilter={props.initialFilter}
@@ -43,6 +42,7 @@ export function Listing(props: ListingProps) {
           props.createItem,
           props.coreStart.application
         )}
+        toastNotifications={props.coreStart.notifications.toasts}
         entityName={i18n.translate('xpack.graph.listing.table.entityName', {
           defaultMessage: 'graph',
         })}
@@ -52,6 +52,7 @@ export function Listing(props: ListingProps) {
         tableListTitle={i18n.translate('xpack.graph.listing.graphsTitle', {
           defaultMessage: 'Graphs',
         })}
+        uiSettings={props.coreStart.uiSettings}
       />
     </I18nProvider>
   );
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 28db2197638ff..6e92f8068bc9e 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -656,6 +656,20 @@
     "core.euiSuperUpdateButton.refreshButtonLabel": "更新",
     "core.euiSuperUpdateButton.updateButtonLabel": "更新",
     "core.euiSuperUpdateButton.updatingButtonLabel": "更新中",
+    "kibana-react.tableListView.listing.deleteButtonMessage": "{itemCount} 件の {entityName} を削除",
+    "kibana-react.tableListView.listing.deleteConfirmModalDescription": "削除された {entityNamePlural} は復元できません。",
+    "kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.cancelButtonLabel": "キャンセル",
+    "kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.confirmButtonLabel": "削除",
+    "kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.confirmButtonLabelDeleting": "削除中",
+    "kibana-react.tableListView.listing.listingLimitExceeded.advancedSettingsLinkText": "高度な設定",
+    "kibana-react.tableListView.listing.listingLimitExceededDescription": "{totalItems} 件の {entityNamePlural} がありますが、{listingLimitText} の設定により {listingLimitValue} 件までしか下の表に表示できません。この設定は {advancedSettingsLink} で変更できます。",
+    "kibana-react.tableListView.listing.listingLimitExceededTitle": "リスティング制限超過",
+    "kibana-react.tableListView.listing.noAvailableItemsMessage": "利用可能な {entityNamePlural} がありません。",
+    "kibana-react.tableListView.listing.noMatchedItemsMessage": "検索条件に一致する {entityNamePlural} がありません。",
+    "kibana-react.tableListView.listing.table.actionTitle": "アクション",
+    "kibana-react.tableListView.listing.table.editActionDescription": "編集",
+    "kibana-react.tableListView.listing.table.editActionName": "編集",
+    "kibana-react.tableListView.listing.unableToDeleteDangerMessage": "{entityName} を削除できません",
     "kibana-react.exitFullScreenButton.exitFullScreenModeButtonAreaLabel": "全画面モードを終了",
     "kibana-react.exitFullScreenButton.exitFullScreenModeButtonLabel": "全画面を終了",
     "kibana-react.exitFullScreenButton.fullScreenModeDescription": "ESC キーで全画面モードを終了します。",
@@ -2371,20 +2385,6 @@
     "kbn.server.tutorials.zookeeperMetrics.nameTitle": "Zookeeper メトリック",
     "kbn.server.tutorials.zookeeperMetrics.shortDescription": "Zookeeper サーバーから内部メトリックを取得します。",
     "kbn.settings.advancedSettings.voiceAnnouncement.searchResultScreenReaderMessage": "{query} を検索しました。{sectionLenght, plural, one {# セクション} other {# セクション}}に{optionLenght, plural, one {# オプション} other { # オプション}}があります。",
-    "kbn.table_list_view.listing.deleteButtonMessage": "{itemCount} 件の {entityName} を削除",
-    "kbn.table_list_view.listing.deleteConfirmModalDescription": "削除された {entityNamePlural} は復元できません。",
-    "kbn.table_list_view.listing.deleteSelectedItemsConfirmModal.cancelButtonLabel": "キャンセル",
-    "kbn.table_list_view.listing.deleteSelectedItemsConfirmModal.confirmButtonLabel": "削除",
-    "kbn.table_list_view.listing.deleteSelectedItemsConfirmModal.confirmButtonLabelDeleting": "削除中",
-    "kbn.table_list_view.listing.listingLimitExceeded.advancedSettingsLinkText": "高度な設定",
-    "kbn.table_list_view.listing.listingLimitExceededDescription": "{totalItems} 件の {entityNamePlural} がありますが、{listingLimitText} の設定により {listingLimitValue} 件までしか下の表に表示できません。この設定は {advancedSettingsLink} で変更できます。",
-    "kbn.table_list_view.listing.listingLimitExceededTitle": "リスティング制限超過",
-    "kbn.table_list_view.listing.noAvailableItemsMessage": "利用可能な {entityNamePlural} がありません。",
-    "kbn.table_list_view.listing.noMatchedItemsMessage": "検索条件に一致する {entityNamePlural} がありません。",
-    "kbn.table_list_view.listing.table.actionTitle": "アクション",
-    "kbn.table_list_view.listing.table.editActionDescription": "編集",
-    "kbn.table_list_view.listing.table.editActionName": "編集",
-    "kbn.table_list_view.listing.unableToDeleteDangerMessage": "{entityName} を削除できません",
     "kbn.topNavMenu.openInspectorButtonLabel": "検査",
     "kbn.topNavMenu.refreshButtonLabel": "更新",
     "kbn.topNavMenu.saveVisualizationButtonLabel": "保存",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 6cf125aee8f96..582770dba940f 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -660,6 +660,20 @@
     "kibana-react.exitFullScreenButton.exitFullScreenModeButtonAreaLabel": "退出全屏模式",
     "kibana-react.exitFullScreenButton.exitFullScreenModeButtonLabel": "退出全屏",
     "kibana-react.exitFullScreenButton.fullScreenModeDescription": "在全屏模式下，按 ESC 键可退出。",
+    "kibana-react.tableListView.listing.deleteButtonMessage": "删除 {itemCount} 个{entityName}",
+    "kibana-react.tableListView.listing.deleteConfirmModalDescription": "您无法恢复删除的{entityNamePlural}。",
+    "kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.cancelButtonLabel": "取消",
+    "kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.confirmButtonLabel": "删除",
+    "kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.confirmButtonLabelDeleting": "正在删除",
+    "kibana-react.tableListView.listing.listingLimitExceeded.advancedSettingsLinkText": "高级设置",
+    "kibana-react.tableListView.listing.listingLimitExceededDescription": "您有 {totalItems} 个{entityNamePlural}，但您的“{listingLimitText}”设置阻止下表显示 {listingLimitValue} 个以上。您可以在“{advancedSettingsLink}”下更改此设置。",
+    "kibana-react.tableListView.listing.listingLimitExceededTitle": "已超过列表限制",
+    "kibana-react.tableListView.listing.noAvailableItemsMessage": "没有可用的{entityNamePlural}",
+    "kibana-react.tableListView.listing.noMatchedItemsMessage": "没有任何{entityNamePlural}匹配您的搜索。",
+    "kibana-react.tableListView.listing.table.actionTitle": "操作",
+    "kibana-react.tableListView.listing.table.editActionDescription": "编辑",
+    "kibana-react.tableListView.listing.table.editActionName": "编辑",
+    "kibana-react.tableListView.listing.unableToDeleteDangerMessage": "无法删除{entityName}",
     "inspector.closeButton": "关闭检查器",
     "inspector.reqTimestampDescription": "记录请求启动的时间",
     "inspector.reqTimestampKey": "请求时间戳",
@@ -2372,20 +2386,6 @@
     "kbn.server.tutorials.zookeeperMetrics.nameTitle": "Zookeeper 指标",
     "kbn.server.tutorials.zookeeperMetrics.shortDescription": "从 Zookeeper 服务器提取内部指标。",
     "kbn.settings.advancedSettings.voiceAnnouncement.searchResultScreenReaderMessage": "您已搜索 {query}。{sectionLenght, plural, one {# 个部分} other {# 个部分}}中有 {optionLenght, plural, one {# 个选项} other {# 个选项}}",
-    "kbn.table_list_view.listing.deleteButtonMessage": "删除 {itemCount} 个{entityName}",
-    "kbn.table_list_view.listing.deleteConfirmModalDescription": "您无法恢复删除的{entityNamePlural}。",
-    "kbn.table_list_view.listing.deleteSelectedItemsConfirmModal.cancelButtonLabel": "取消",
-    "kbn.table_list_view.listing.deleteSelectedItemsConfirmModal.confirmButtonLabel": "删除",
-    "kbn.table_list_view.listing.deleteSelectedItemsConfirmModal.confirmButtonLabelDeleting": "正在删除",
-    "kbn.table_list_view.listing.listingLimitExceeded.advancedSettingsLinkText": "高级设置",
-    "kbn.table_list_view.listing.listingLimitExceededDescription": "您有 {totalItems} 个{entityNamePlural}，但您的“{listingLimitText}”设置阻止下表显示 {listingLimitValue} 个以上。您可以在“{advancedSettingsLink}”下更改此设置。",
-    "kbn.table_list_view.listing.listingLimitExceededTitle": "已超过列表限制",
-    "kbn.table_list_view.listing.noAvailableItemsMessage": "没有可用的{entityNamePlural}",
-    "kbn.table_list_view.listing.noMatchedItemsMessage": "没有任何{entityNamePlural}匹配您的搜索。",
-    "kbn.table_list_view.listing.table.actionTitle": "操作",
-    "kbn.table_list_view.listing.table.editActionDescription": "编辑",
-    "kbn.table_list_view.listing.table.editActionName": "编辑",
-    "kbn.table_list_view.listing.unableToDeleteDangerMessage": "无法删除{entityName}",
     "kbn.topNavMenu.openInspectorButtonLabel": "检查",
     "kbn.topNavMenu.refreshButtonLabel": "刷新",
     "kbn.topNavMenu.saveVisualizationButtonLabel": "保存",