[Lens][Visualizations] library annotation groups listing page

examples/content_management_examples/public/examples/msearch/msearch_table.tsx

@@ -51,7 +51,7 @@ export const MSearchTable = () => {
       initialPageSize={50}
       entityName={`ContentItem`}
       entityNamePlural={`ContentItems`}
-      tableListTitle={`MSearch Demo`}
+      title={`MSearch Demo`}
       urlStateEnabled={false}
       emptyPrompt={<>No data found. Try to install some sample data first.</>}
       onClickTitle={(item) => {

packages/content-management/table_list/index.ts

@@ -6,7 +6,19 @@
  * Side Public License, v 1.
  */
 
-export { TableListView, TableListViewProvider, TableListViewKibanaProvider } from './src';
+export {
+  TableListView,
+  TabbedTableListView,
+  TableList,
+  TableListViewProvider,
+  TableListViewKibanaProvider,
+} from './src';
+
+export type {
+  UserContentCommonSchema,
+  TableListTab,
+  TableListTabParentProps,
+  RowActions,
+} from './src';
 
-export type { UserContentCommonSchema, RowActions } from './src';
 export type { TableListViewKibanaDependencies } from './src/services';

packages/content-management/table_list/src/components/item_details.tsx

@@ -12,7 +12,7 @@ import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 
 import type { Tag } from '../types';
 import { useServices } from '../services';
-import type { UserContentCommonSchema, Props as TableListViewProps } from '../table_list_view';
+import type { UserContentCommonSchema, TableListViewProps } from '../table_list_view';
 import { TagBadge } from './tag_badge';
 
 type InheritedProps<T extends UserContentCommonSchema> = Pick<

packages/content-management/table_list/src/components/table.tsx

@@ -17,6 +17,7 @@ import {
   SearchFilterConfig,
   Direction,
   Query,
+  Search,
   type EuiTableSelectionType,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -25,7 +26,7 @@ import { useServices } from '../services';
 import type { Action } from '../actions';
 import type {
   State as TableListViewState,
-  Props as TableListViewProps,
+  TableListProps,
   UserContentCommonSchema,
 } from '../table_list_view';
 import type { TableItemsRowActions } from '../types';
@@ -53,8 +54,9 @@ interface Props<T extends UserContentCommonSchema> extends State<T>, TagManageme
   tableCaption: string;
   tableColumns: Array<EuiBasicTableColumn<T>>;
   hasUpdatedAtMetadata: boolean;
-  deleteItems: TableListViewProps<T>['deleteItems'];
+  deleteItems: TableListProps<T>['deleteItems'];
   tableItemsRowActions: TableItemsRowActions;
+  renderCreateButton: () => React.ReactElement | undefined;
   onSortChange: (column: SortColumnField, direction: Direction) => void;
   onTableChange: (criteria: CriteriaWithPagination<T>) => void;
   onTableSearchChange: (arg: { query: Query | null; queryText: string }) => void;
@@ -76,6 +78,7 @@ export function Table<T extends UserContentCommonSchema>({
   tagsToTableItemMap,
   tableItemsRowActions,
   deleteItems,
+  renderCreateButton,
   tableCaption,
   onTableChange,
   onTableSearchChange,
@@ -201,18 +204,19 @@ export function Table<T extends UserContentCommonSchema>({
     return [tableSortSelectFilter, tagFilterPanel];
   }, [tableSortSelectFilter, tagFilterPanel]);
 
-  const search = useMemo(() => {
+  const search = useMemo((): Search => {
     return {
       onChange: onTableSearchChange,
       toolsLeft: renderToolsLeft(),
+      toolsRight: renderCreateButton(),
       query: searchQuery.query ?? undefined,
       box: {
         incremental: true,
         'data-test-subj': 'tableListSearchBox',
       },
       filters: searchFilters,
     };
-  }, [onTableSearchChange, renderToolsLeft, searchFilters, searchQuery.query]);
+  }, [onTableSearchChange, renderCreateButton, renderToolsLeft, searchFilters, searchQuery.query]);
 
   const noItemsMessage = (
     <FormattedMessage

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

@@ -6,14 +6,20 @@
  * Side Public License, v 1.
  */
 
-export { TableListView } from './table_list_view';
+export { TableListView, TableList } from './table_list_view';
 
 export type {
-  Props as TableListViewProps,
+  TableListViewProps,
   State as TableListViewState,
   UserContentCommonSchema,
 } from './table_list_view';
 
+export {
+  TabbedTableListView,
+  type TableListTab,
+  type TableListTabParentProps,
+} from './tabbed_table_list_view';
+
 export { TableListViewProvider, TableListViewKibanaProvider } from './services';
 
 export type { RowActions } from './types';

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

@@ -82,7 +82,7 @@ export const getStoryServices = (params: Params, action: ActionFn = () => {}) =>
  * consuming component stories.
  */
 export const getStoryArgTypes = () => ({
-  tableListTitle: {
+  title: {
     control: {
       type: 'text',
     },

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

@@ -0,0 +1,126 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import {
+  TabbedTableListView,
+  TableListTabParentProps,
+  TableListTab,
+} from './tabbed_table_list_view';
+import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
+import { EuiTab } from '@elastic/eui';
+import { act } from 'react-dom/test-utils';
+
+// Mock the necessary props for the component
+const title = 'Test Title';
+const description = 'Test Description';
+const headingId = 'test-heading-id';
+const children = <div>Test Children</div>;
+const tabs: TableListTab[] = [
+  {
+    title: 'Tab 1',
+    id: 'tab-1',
+    getTableList: async (props: TableListTabParentProps) => <div>Test Table List 1</div>,
+  },
+  {
+    title: 'Tab 2',
+    id: 'tab-2',
+    getTableList: async (props: TableListTabParentProps) => <div>Test Table List 2</div>,
+  },
+];
+
+describe('TabbedTableListView', () => {
+  it('should render without errors', () => {
+    const wrapper = shallow(
+      <TabbedTableListView
+        title={title}
+        description={description}
+        headingId={headingId}
+        children={children}
+        tabs={tabs}
+        activeTabId={'tab-1'}
+        changeActiveTab={() => {}}
+      />
+    );
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('should render the correct title and description', () => {
+    const wrapper = shallow(
+      <TabbedTableListView
+        title={title}
+        description={description}
+        headingId={headingId}
+        children={children}
+        tabs={tabs}
+        activeTabId={'tab-1'}
+        changeActiveTab={() => {}}
+      />
+    );
+    expect(wrapper.find(KibanaPageTemplate.Header).prop('pageTitle')).toMatchInlineSnapshot(`
+      <span
+        id="test-heading-id"
+      >
+        Test Title
+      </span>
+    `);
+    expect(wrapper.find(KibanaPageTemplate.Header).prop('description')).toContain(description);
+  });
+
+  it('should render the correct number of tabs', () => {
+    const wrapper = shallow(
+      <TabbedTableListView
+        title={title}
+        description={description}
+        headingId={headingId}
+        children={children}
+        tabs={tabs}
+        activeTabId={'tab-1'}
+        changeActiveTab={() => {}}
+      />
+    );
+    expect(wrapper.find(EuiTab).length).toEqual(tabs.length);
+  });
+
+  it('should switch tabs when a tab is clicked', () => {
+    const changeActiveTab = jest.fn();
+
+    const wrapper = shallow(
+      <TabbedTableListView
+        title={title}
+        description={description}
+        headingId={headingId}
+        children={children}
+        tabs={tabs}
+        activeTabId={'tab-1'}
+        changeActiveTab={changeActiveTab}
+      />
+    );
+
+    const getTab = (index: number) => wrapper.find(EuiTab).at(index);
+
+    expect(getTab(0).prop('isSelected')).toBeTruthy();
+    expect(getTab(1).prop('isSelected')).toBeFalsy();
+
+    act(() => {
+      getTab(1).simulate('click');
+    });
+
+    expect(changeActiveTab).toHaveBeenCalledWith('tab-2');
+
+    act(() => {
+      wrapper.setProps({
+        activeTabId: 'tab-2',
+      });
+    });
+
+    expect(getTab(0).prop('isSelected')).toBeFalsy();
+    expect(getTab(1).prop('isSelected')).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,102 @@
+/*
+ * 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.
+ */
+
+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 {
+  TableListProps,
+  TableListViewProps,
+  UserContentCommonSchema,
+} from './table_list_view';
+
+export type TableListTabParentProps<T extends UserContentCommonSchema = UserContentCommonSchema> =
+  Pick<TableListProps<T>, 'onFetchSuccess' | 'setPageDataTestSubject'>;
+
+export interface TableListTab<T extends UserContentCommonSchema = UserContentCommonSchema> {
+  title: string;
+  id: string;
+  getTableList: (
+    propsFromParent: TableListTabParentProps<T>
+  ) => Promise<React.ReactNode> | React.ReactNode;
+}
+
+type TabbedTableListViewProps = Pick<
+  TableListViewProps<UserContentCommonSchema>,
+  'title' | 'description' | 'headingId' | 'children'
+> & { tabs: TableListTab[]; activeTabId: string; changeActiveTab: (id: string) => void };
+
+export const TabbedTableListView = ({
+  title,
+  description,
+  headingId,
+  children,
+  tabs,
+  activeTabId,
+  changeActiveTab,
+}: TabbedTableListViewProps) => {
+  const [hasInitialFetchReturned, setHasInitialFetchReturned] = useState(false);
+  const [pageDataTestSubject, setPageDataTestSubject] = useState<string>();
+
+  const getActiveTab = useCallback(
+    () => tabs.find((tab) => tab.id === activeTabId) ?? tabs[0],
+    [activeTabId, tabs]
+  );
+
+  const [tableList, setTableList] = useState<React.ReactNode>(null);
+
+  useEffect(() => {
+    async function loadTableList() {
+      const newTableList = await getActiveTab().getTableList({
+        onFetchSuccess: () => {
+          if (!hasInitialFetchReturned) {
+            setHasInitialFetchReturned(true);
+          }
+        },
+        setPageDataTestSubject,
+      });
+      setTableList(newTableList);
+    }
+
+    loadTableList();
+  }, [hasInitialFetchReturned, activeTabId, tabs, getActiveTab]);
+
+  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={() => changeActiveTab(tab.id)}
+              isSelected={tab.id === getActiveTab().id}
+            >
+              {tab.title}
+            </EuiTab>
+          ))}
+        </EuiTabs>
+      </KibanaPageTemplate.Header>
+      <KibanaPageTemplate.Section aria-labelledby={hasInitialFetchReturned ? headingId : undefined}>
+        {/* Any children passed to the component */}
+        {children}
+
+        {tableList}
+      </KibanaPageTemplate.Section>
+    </KibanaPageTemplate>
+  );
+};