[Lens][Visualizations] library annotation groups listing page (#157988)

.github/CODEOWNERS

@@ -88,7 +88,9 @@ src/plugins/console @elastic/platform-deployment-management
 packages/content-management/content_editor @elastic/appex-sharedux
 examples/content_management_examples @elastic/appex-sharedux
 src/plugins/content_management @elastic/appex-sharedux
-packages/content-management/table_list @elastic/appex-sharedux
+packages/content-management/tabbed_table_list_view @elastic/appex-sharedux
+packages/content-management/table_list_view @elastic/appex-sharedux
+packages/content-management/table_list_view_table @elastic/appex-sharedux
 packages/kbn-content-management-utils @elastic/kibana-data-discovery
 examples/controls_example @elastic/kibana-presentation
 src/plugins/controls @elastic/kibana-presentation

examples/content_management_examples/public/examples/msearch/msearch_app.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { ContentClientProvider, type ContentClient } from '@kbn/content-management-plugin/public';
-import { TableListViewKibanaProvider } from '@kbn/content-management-table-list';
+import { TableListViewKibanaProvider } from '@kbn/content-management-table-list-view-table';
 import type { CoreStart } from '@kbn/core/public';
 import { toMountPoint } from '@kbn/kibana-react-plugin/public';
 import { FormattedRelative, I18nProvider } from '@kbn/i18n-react';

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

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { TableListView, UserContentCommonSchema } from '@kbn/content-management-table-list';
+import { TableListView, UserContentCommonSchema } from '@kbn/content-management-table-list-view';
 import { useContentClient } from '@kbn/content-management-plugin/public';
 import React from 'react';
 import { SavedObjectsFindOptionsReference } from '@kbn/core-saved-objects-api-browser';
@@ -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) => {

examples/content_management_examples/tsconfig.json

@@ -20,10 +20,13 @@
     "@kbn/content-management-plugin",
     "@kbn/core-application-browser",
     "@kbn/shared-ux-link-redirect-app",
-    "@kbn/content-management-table-list",
+    "@kbn/content-management-table-list-view",
+    "@kbn/content-management-table-list-view-table",
     "@kbn/kibana-react-plugin",
     "@kbn/i18n-react",
     "@kbn/saved-objects-tagging-oss-plugin",
     "@kbn/core-saved-objects-api-browser",
+    "@kbn/content-management-table-list-view-table",
+    "@kbn/content-management-table-list-view",
   ]
 }

package.json

@@ -189,7 +189,9 @@
     "@kbn/content-management-content-editor": "link:packages/content-management/content_editor",
     "@kbn/content-management-examples-plugin": "link:examples/content_management_examples",
     "@kbn/content-management-plugin": "link:src/plugins/content_management",
-    "@kbn/content-management-table-list": "link:packages/content-management/table_list",
+    "@kbn/content-management-tabbed-table-list-view": "link:packages/content-management/tabbed_table_list_view",
+    "@kbn/content-management-table-list-view": "link:packages/content-management/table_list_view",
+    "@kbn/content-management-table-list-view-table": "link:packages/content-management/table_list_view_table",
     "@kbn/content-management-utils": "link:packages/kbn-content-management-utils",
     "@kbn/controls-example-plugin": "link:examples/controls_example",
     "@kbn/controls-plugin": "link:src/plugins/controls",

packages/content-management/tabbed_table_list_view/README.mdx

@@ -0,0 +1,20 @@
+---
+id: sharedUX/contentManagement/TabbedTableListView
+slug: /shared-ux/content-management/tabbed-table-list-view
+title: Tabbed table list view
+summary: A table to render user generated saved objects.
+tags: ['shared-ux', 'content-management']
+date: 2022-08-09
+---
+
+The `<TabbedTableListView />` renders an eui page to display a list of user content saved object.
+
+**Uncomplete documentation**. Will be updated.
+
+## API
+
+TODO: https://github.com/elastic/kibana/issues/144402
+
+## EUI Promotion Status
+
+This component is not currently considered for promotion to EUI.

packages/content-management/tabbed_table_list_view/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 { TabbedTableListView, type TableListTab, type TableListTabParentProps } from './src';
+
+export type { UserContentCommonSchema } from '@kbn/content-management-table-list-view-table';

packages/content-management/tabbed_table_list_view/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../..',
+  roots: ['<rootDir>/packages/content-management/tabbed_table_list_view'],
+};

packages/content-management/tabbed_table_list_view/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/content-management-tabbed-table-list-view",
+  "owner": "@elastic/appex-sharedux"
+}

packages/content-management/tabbed_table_list_view/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/content-management-tabbed-table-list-view",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

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

@@ -0,0 +1,13 @@
+/*
+ * 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 {
+  TabbedTableListView,
+  type TableListTab,
+  type TableListTabParentProps,
+} from './tabbed_table_list_view';

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

@@ -0,0 +1,128 @@
+/*
+ * 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 { ReactWrapper, mount, shallow } from 'enzyme';
+import {
+  TabbedTableListView,
+  TableListTabParentProps,
+  TableListTab,
+} from './tabbed_table_list_view';
+import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
+import { EuiPageTemplate } 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 tableList1 = 'Test Table List 1';
+const tableList2 = 'Test Table List 2';
+
+const tabs: TableListTab[] = [
+  {
+    title: 'Tab 1',
+    id: 'tab-1',
+    getTableList: async (props: TableListTabParentProps) => <div>{tableList1}</div>,
+  },
+  {
+    title: 'Tab 2',
+    id: 'tab-2',
+    getTableList: async (props: TableListTabParentProps) => <div>{tableList2}</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(EuiPageTemplate.Header).prop('tabs')).toHaveLength(2);
+  });
+
+  it('should switch tabs when props change', async () => {
+    const changeActiveTab = jest.fn();
+
+    let wrapper: ReactWrapper | undefined;
+    await act(async () => {
+      wrapper = mount(
+        <TabbedTableListView
+          title={title}
+          description={description}
+          headingId={headingId}
+          children={children}
+          tabs={tabs}
+          activeTabId={'tab-1'}
+          changeActiveTab={changeActiveTab}
+        />
+      );
+    });
+
+    if (!wrapper) {
+      throw new Error("enzyme wrapper didn't initialize");
+    }
+
+    expect(wrapper.find(EuiPageTemplate.Section).text()).toContain(tableList1);
+
+    await act(async () => {
+      wrapper?.setProps({
+        activeTabId: 'tab-2',
+      });
+    });
+
+    expect(wrapper.find(EuiPageTemplate.Section).text()).toContain(tableList2);
+  });
+});

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

@@ -0,0 +1,88 @@
+/*
+ * 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 { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
+import React, { useCallback, useEffect, useState } from 'react';
+import type {
+  TableListViewTableProps,
+  UserContentCommonSchema,
+} from '@kbn/content-management-table-list-view-table';
+import type { TableListViewProps } from '@kbn/content-management-table-list-view';
+
+export type TableListTabParentProps<T extends UserContentCommonSchema = UserContentCommonSchema> =
+  Pick<TableListViewTableProps<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"
+        tabs={tabs.map((tab) => ({
+          onClick: () => changeActiveTab(tab.id),
+          isSelected: tab.id === getActiveTab().id,
+          label: tab.title,
+        }))}
+      />
+      <KibanaPageTemplate.Section aria-labelledby={hasInitialFetchReturned ? headingId : undefined}>
+        {/* Any children passed to the component */}
+        {children}
+
+        {tableList}
+      </KibanaPageTemplate.Section>
+    </KibanaPageTemplate>
+  );
+};

packages/content-management/tabbed_table_list_view/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node",
+      "react",
+      "@kbn/ambient-ui-types",
+      "@kbn/ambient-storybook-types",
+      "@emotion/react/types/css-prop"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+  ],
+  "kbn_references": [
+    "@kbn/content-management-table-list-view",
+    "@kbn/shared-ux-page-kibana-template",
+    "@kbn/content-management-table-list-view-table",
+    "@kbn/content-management-table-list-view",
+  ],
+  "exclude": [
+    "target/**/*",
+  ]
+}

packages/content-management/table_list_view/index.ts

@@ -0,0 +1,12 @@
+/*
+ * 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 { TableListView } from './src/table_list_view';
+export type { TableListViewProps } from './src/table_list_view';
+
+export type { UserContentCommonSchema } from '@kbn/content-management-table-list-view-table';