Declarative API

packages/content-management/tabbed_table_list_view/index.ts

@@ -6,6 +6,6 @@
  * Side Public License, v 1.
  */
 
-export { TabbedTableListView, type TableListTab, type TableListTabParentProps } from './src';
+export { TabbedTableListView, TabbedTableListViewV2, Tab, type TableListTab } from './src';
 
 export type { UserContentCommonSchema } from '@kbn/content-management-table-list-view-table';

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

@@ -8,6 +8,7 @@
 
 export {
  TabbedTableListView,
+ TabbedTableListViewV2,
+ Tab,
  type TableListTab,
- type TableListTabParentProps,
 } from './tabbed_table_list_view';

packages/content-management/tabbed_table_list_view/src/tabbed_table_list_view.tsx

@@ -9,8 +9,9 @@
 import { EuiTab, EuiTabs } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
-import React, { useCallback, useEffect, useState } from 'react';
-import type {
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+ TableListViewTableContext,
  TableListViewTableProps,
  UserContentCommonSchema,
 } from '@kbn/content-management-table-list-view-table';
@@ -22,9 +23,7 @@ export type TableListTabParentProps<T extends UserContentCommonSchema = UserCont
 export interface TableListTab<T extends UserContentCommonSchema = UserContentCommonSchema> {
  title: string;
  id: string;
- getTableList: (
- propsFromParent: TableListTabParentProps<T>
- ) => Promise<React.ReactNode> | React.ReactNode;
+ getTableList: () => Promise<React.ReactNode> | React.ReactNode;
 }
 
 type TabbedTableListViewProps = Pick<
@@ -100,3 +99,82 @@ export const TabbedTableListView = ({
  </KibanaPageTemplate>
  );
 };
+
+interface TabProps {
+ title: string;
+ onClick: () => void;
+ active?: boolean;
+ loadContent: () => Promise<React.ReactNode> | React.ReactNode;
+}
+
+export const Tab = (_props: TabProps) => null;
+
+type TabbedTableListViewV2Props = Pick<
+ TableListViewProps<UserContentCommonSchema>,
+ 'title' | 'description' | 'headingId' | 'children'
+> & { children: React.ReactElement<TabProps> | Array<React.ReactElement<TabProps>> };
+
+export const TabbedTableListViewV2 = ({
+ title,
+ description,
+ headingId,
+ children,
+}: TabbedTableListViewV2Props) => {
+ const [hasInitialFetchReturned, setHasInitialFetchReturned] = useState(false);
+ const [pageDataTestSubject, setPageDataTestSubject] = useState<string>();
+ const [tableList, setTableList] = useState<React.ReactNode>(null);
+
+ const tabs = useMemo(
+ () => (Array.isArray(children) ? children : [children]).map((child) => child.props),
+ [children]
+ );
+
+ useEffect(() => {
+ const loadTableList = async () => {
+ const activeTab = tabs.find((tab) => tab.active) ?? tabs[0];
+ setTableList(await activeTab.loadContent());
+ };
+
+ loadTableList();
+ }, [tabs]);
+
+ const tableContextValue = useMemo(
+ () => ({
+ onTableDataFetched: () => {
+ if (!hasInitialFetchReturned) {
+ setHasInitialFetchReturned(true);
+ }
+ },
+ setPageDataTestSubject,
+ }),
+ [hasInitialFetchReturned]
+ );
+
+ return (
+ <KibanaPageTemplate panelled data-test-subj={pageDataTestSubject}>
+ <KibanaPageTemplate.Header
+ pageTitle={<span id={headingId}>{title}</span>}
+ description={description}
+ data-test-subj="top-nav"
+ css={css`
+ .euiPageHeaderContent {
+ padding-bottom: 0;
+ }
+ `}
+ >
+ <EuiTabs>
+ {tabs.map((tab, index) => (
+ <EuiTab key={index} onClick={tab.onClick} isSelected={tab.active}>
+ {tab.title}
+ </EuiTab>
+ ))}
+ </EuiTabs>
+ </KibanaPageTemplate.Header>
+ <KibanaPageTemplate.Section aria-labelledby={hasInitialFetchReturned ? headingId : undefined}>
+ <TableListViewTableContext.Provider value={tableContextValue}>
+ {tableList}
+ </TableListViewTableContext.Provider>
+ </KibanaPageTemplate.Section>
+ </KibanaPageTemplate>
+ );
+};

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

@@ -7,9 +7,10 @@
  */
 
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
-import React, { ReactNode, useState } from 'react';
+import React, { ReactNode, useMemo, useState } from 'react';
 import {
  TableListViewTable,
+ TableListViewTableContext,
  type TableListViewTableProps,
  type UserContentCommonSchema,
 } from '@kbn/content-management-table-list-view-table';
@@ -81,6 +82,18 @@ export const TableListView = <T extends UserContentCommonSchema>({
  const [hasInitialFetchReturned, setHasInitialFetchReturned] = useState(false);
  const [pageDataTestSubject, setPageDataTestSubject] = useState<string>();
 
+ const tableContextValue = useMemo(
+ () => ({
+ onTableDataFetched: () => {
+ if (!hasInitialFetchReturned) {
+ setHasInitialFetchReturned(true);
+ }
+ },
+ setPageDataTestSubject,
+ }),
+ [hasInitialFetchReturned]
+ );
+
  return (
  <PageTemplate panelled data-test-subj={pageDataTestSubject}>
  <KibanaPageTemplate.Header
@@ -93,35 +106,31 @@ export const TableListView = <T extends UserContentCommonSchema>({
  {/* Any children passed to the component */}
  {children}
 
- <TableListViewTable
- tableCaption={title}
- entityName={entityName}
- entityNamePlural={entityNamePlural}
- initialFilter={initialFilter}
- headingId={headingId}
- initialPageSize={initialPageSize}
- listingLimit={listingLimit}
- urlStateEnabled={urlStateEnabled}
- customTableColumn={customTableColumn}
- emptyPrompt={emptyPrompt}
- findItems={findItems}
- createItem={createItem}
- editItem={editItem}
- deleteItems={deleteItems}
- rowItemActions={rowItemActions}
- getDetailViewLink={getDetailViewLink}
- onClickTitle={onClickTitle}
- id={listingId}
- contentEditor={contentEditor}
- titleColumnName={titleColumnName}
- withoutPageTemplateWrapper={withoutPageTemplateWrapper}
- onFetchSuccess={() => {
- if (!hasInitialFetchReturned) {
- setHasInitialFetchReturned(true);
- }
- }}
- setPageDataTestSubject={setPageDataTestSubject}
- />
+ <TableListViewTableContext.Provider value={tableContextValue}>
+ <TableListViewTable
+ tableCaption={title}
+ entityName={entityName}
+ entityNamePlural={entityNamePlural}
+ initialFilter={initialFilter}
+ headingId={headingId}
+ initialPageSize={initialPageSize}
+ listingLimit={listingLimit}
+ urlStateEnabled={urlStateEnabled}
+ customTableColumn={customTableColumn}
+ emptyPrompt={emptyPrompt}
+ findItems={findItems}
+ createItem={createItem}
+ editItem={editItem}
+ deleteItems={deleteItems}
+ rowItemActions={rowItemActions}
+ getDetailViewLink={getDetailViewLink}
+ onClickTitle={onClickTitle}
+ id={listingId}
+ contentEditor={contentEditor}
+ titleColumnName={titleColumnName}
+ withoutPageTemplateWrapper={withoutPageTemplateWrapper}
+ />
+ </TableListViewTableContext.Provider>
  </KibanaPageTemplate.Section>
  </PageTemplate>
  );

packages/content-management/table_list_view_table/index.ts

@@ -6,7 +6,12 @@
  * Side Public License, v 1.
  */
 
-export { TableListViewTable, TableListViewProvider, TableListViewKibanaProvider } from './src';
+export {
+ TableListViewTable,
+ TableListViewTableContext,
+ TableListViewProvider,
+ TableListViewKibanaProvider,
+} from './src';
 
 export type { UserContentCommonSchema, TableListViewTableProps, RowActions } from './src';
 

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

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-export { TableListViewTable } from './table_list_view_table';
+export { TableListViewTable, TableListViewTableContext } from './table_list_view_table';
 
 export type {
  TableListViewTableProps,

packages/content-management/table_list_view_table/src/table_list_view_table.tsx

@@ -6,7 +6,15 @@
  * Side Public License, v 1.
  */
 
-import React, { useReducer, useCallback, useEffect, useRef, useMemo } from 'react';
+import React, {
+ useReducer,
+ useCallback,
+ useEffect,
+ useRef,
+ useMemo,
+ createContext,
+ useContext,
+} from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
 import {
  EuiBasicTableColumn,
@@ -110,8 +118,6 @@ export interface TableListViewTableProps<
  // TODO are these used?
  tableCaption: string;
  refreshListBouncer?: boolean;
- onFetchSuccess: () => void;
- setPageDataTestSubject: (subject: string) => void;
 }
 
 export interface State<T extends UserContentCommonSchema = UserContentCommonSchema> {
@@ -243,6 +249,13 @@ const tableColumnMetadata = {
  },
 } as const;
 
+interface Context {
+ onTableDataFetched: () => void;
+ setPageDataTestSubject: (subject: string) => void;
+}
+
+export const TableListViewTableContext = createContext<Context | undefined>(undefined);
+
 function TableListViewTableComp<T extends UserContentCommonSchema>({
  tableCaption,
  entityName,
@@ -266,13 +279,17 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
  contentEditor = { enabled: false },
  titleColumnName,
  withoutPageTemplateWrapper,
- onFetchSuccess,
  refreshListBouncer,
- setPageDataTestSubject,
 }: TableListViewTableProps<T>) {
+ const context = useContext(TableListViewTableContext);
+
+ return <p>{context ? 'context found' : 'context NOT found'}</p>;
+
  useEffect(() => {
- setPageDataTestSubject(`${entityName}LandingPage`);
- }, [entityName, setPageDataTestSubject]);
+ if (context) {
+ context.setPageDataTestSubject(`${entityName}LandingPage`);
+ }
+ }, []);
 
  if (!getDetailViewLink && !onClickTitle) {
  throw new Error(
@@ -402,15 +419,17 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
  },
  });
 
- onFetchSuccess();
+ if (context) {
+ context.onTableDataFetched();
+ }
  }
  } catch (err) {
  dispatch({
  type: 'onFetchItemsError',
  data: err,
  });
  }
- }, [searchQueryParser, searchQuery.text, findItems, onFetchSuccess]);
+ }, [searchQueryParser, searchQuery.text, findItems, context]);
 
  useEffect(() => {
  fetchItems();
@@ -988,6 +1007,8 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
  );
 }
 
-export const TableListViewTable = React.memo(
- TableListViewTableComp
-) as typeof TableListViewTableComp;
+// export const TableListViewTable = React.memo(
+// TableListViewTableComp
+// ) as typeof TableListViewTableComp;
+
+export const TableListViewTable = TableListViewTableComp;

src/plugins/event_annotation/public/components/table_list.tsx

@@ -6,9 +6,11 @@
  * Side Public License, v 1.
  */
 
-import React, { useCallback, useState } from 'react';
-import { TableListViewTable } from '@kbn/content-management-table-list-view-table';
-import type { TableListTabParentProps } from '@kbn/content-management-tabbed-table-list-view';
+import React, { useCallback, useContext, useState } from 'react';
+import {
+ TableListViewTable,
+ TableListViewTableContext,
+} from '@kbn/content-management-table-list-view-table';
 import { i18n } from '@kbn/i18n';
 import type { IUiSettingsClient } from '@kbn/core-ui-settings-browser';
 import { SavedObjectsFindOptionsReference } from '@kbn/core-saved-objects-api-browser';
@@ -28,7 +30,6 @@ export const EventAnnotationGroupTableList = ({
  eventAnnotationService,
  visualizeCapabilities,
  savedObjectsTagging,
- parentProps,
  dataViews,
  createDataView,
  queryInputServices,
@@ -37,11 +38,14 @@ export const EventAnnotationGroupTableList = ({
  eventAnnotationService: EventAnnotationServiceType;
  visualizeCapabilities: Record<string, boolean | Record<string, boolean>>;
  savedObjectsTagging: SavedObjectsTaggingApi;
- parentProps: TableListTabParentProps;
  dataViews: DataView[];
  createDataView: (spec: DataViewSpec) => Promise<DataView>;
  queryInputServices: QueryInputServices;
 }) => {
+ const context = useContext(TableListViewTableContext);
+
+ console.log('context from EventAnnotationGroupTableList', context);
+
  const listingLimit = uiSettings.get(SAVED_OBJECTS_LIMIT_SETTING);
  const initialPageSize = uiSettings.get(SAVED_OBJECTS_PER_PAGE_SETTING);
 
@@ -135,7 +139,6 @@ export const EventAnnotationGroupTableList = ({
  defaultMessage: 'annotation groups',
  })}
  onClickTitle={editItem}
- {...parentProps}
  />
  {flyout}
  </>