[Table list view] Improve UX (phase 1)

.github/CODEOWNERS

@@ -665,6 +665,7 @@ packages/analytics/shippers/elastic_v3/browser @elastic/kibana-core
 packages/analytics/shippers/elastic_v3/common @elastic/kibana-core
 packages/analytics/shippers/elastic_v3/server @elastic/kibana-core
 packages/analytics/shippers/fullstory @elastic/kibana-core
+packages/content-management/table_list @elastic/shared-ux
 packages/core/analytics/core-analytics-browser @elastic/kibana-core
 packages/core/analytics/core-analytics-browser-internal @elastic/kibana-core
 packages/core/analytics/core-analytics-browser-mocks @elastic/kibana-core

.i18nrc.json

@@ -7,6 +7,7 @@
     "bfetch": "src/plugins/bfetch",
     "charts": "src/plugins/charts",
     "console": "src/plugins/console",
+    "contentManagement": "packages/content-management",
     "core": [
       "src/core",
       "packages/core"

package.json

@@ -146,6 +146,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/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",
@@ -843,6 +844,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/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/BUILD.bazel

@@ -14,6 +14,7 @@ filegroup(
     "//packages/analytics/shippers/elastic_v3/common:build",
     "//packages/analytics/shippers/elastic_v3/server:build",
     "//packages/analytics/shippers/fullstory:build",
+    "//packages/content-management/table_list:build",
     "//packages/core/analytics/core-analytics-browser:build",
     "//packages/core/analytics/core-analytics-browser-internal:build",
     "//packages/core/analytics/core-analytics-browser-mocks:build",
@@ -327,6 +328,7 @@ filegroup(
     "//packages/analytics/shippers/elastic_v3/common:build_types",
     "//packages/analytics/shippers/elastic_v3/server:build_types",
     "//packages/analytics/shippers/fullstory:build_types",
+    "//packages/content-management/table_list:build_types",
     "//packages/core/analytics/core-analytics-browser:build_types",
     "//packages/core/analytics/core-analytics-browser-internal:build_types",
     "//packages/core/analytics/core-analytics-browser-mocks:build_types",

packages/content-management/.storybook/main.js

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+
+const defaultConfig = require('@kbn/storybook').defaultConfig;
+
+module.exports = {
+  ...defaultConfig,
+  stories: ['../**/*.stories.tsx'],
+  reactOptions: {
+    strictMode: true,
+  },
+};

packages/content-management/.storybook/manager.js

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+const { addons } = require('@storybook/addons');
+const { create } = require('@storybook/theming');
+const { PANEL_ID } = require('@storybook/addon-actions');
+
+addons.setConfig({
+  theme: create({
+    base: 'light',
+    brandTitle: 'Content Management Storybook',
+  }),
+  showPanel: () => true,
+  selectedPanel: PANEL_ID,
+});

packages/content-management/table_list/BUILD.bazel

@@ -0,0 +1,160 @@
+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 = "table_list"
+PKG_REQUIRE_NAME = "@kbn/content-management-table-list"
+
+SOURCE_FILES = glob(
+  [
+    "**/*.ts",
+    "**/*.tsx",
+  ],
+  exclude = [
+    "**/*.config.js",
+    "**/*.mock.*",
+    "**/*.test.*",
+    "**/*.stories.*",
+    "**/__snapshots__",
+    "**/integration_tests",
+    "**/mocks",
+    "**/scripts",
+    "**/storybook",
+    "**/test_fixtures",
+    "**/test_helpers",
+  ],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+]
+
+# In this array place runtime dependencies, including other packages and NPM packages
+# which must be available for this code to run.
+#
+#  To reference other packages use:
+#    "//repo/relative/path/to/package"
+#    eg. "//packages/kbn-utils"
+#
+#  To reference a NPM package use:
+#    "@npm//name-of-package"
+#    eg. "@npm//lodash"
+RUNTIME_DEPS = [
+  "//packages/kbn-i18n-react",
+  "//packages/kbn-i18n",
+  "//packages/core/http/core-http-browser",
+  "//packages/core/theme/core-theme-browser",
+  "//packages/kbn-safer-lodash-set",
+  "//packages/shared-ux/page/kibana_template/impl",
+  "@npm//@elastic/eui",
+  "@npm//@emotion/react",
+  "@npm//@emotion/css",
+  "@npm//lodash",
+  "@npm//moment",
+  "@npm//react-use",
+  "@npm//react",
+  "@npm//rxjs",
+]
+
+# In this array place dependencies necessary to build the types, which will include the
+# :npm_module_types target of other packages and packages from NPM, including @types/*
+# packages.
+#
+#  To reference the types for another package use:
+#    "//repo/relative/path/to/package:npm_module_types"
+#    eg. "//packages/kbn-utils:npm_module_types"
+#
+#  References to NPM packages work the same as RUNTIME_DEPS
+TYPES_DEPS = [
+  "//packages/kbn-i18n:npm_module_types",
+  "//packages/kbn-i18n-react:npm_module_types",
+  "//packages/core/http/core-http-browser:npm_module_types",
+  "//packages/core/theme/core-theme-browser:npm_module_types",
+  "//packages/kbn-ambient-storybook-types",
+  "//packages/kbn-ambient-ui-types",
+  "//packages/kbn-safer-lodash-set:npm_module_types",
+  "//packages/shared-ux/page/kibana_template/impl:npm_module_types",
+  "//packages/shared-ux/page/kibana_template/types",
+  "@npm//@types/node",
+  "@npm//@types/jest",
+  "@npm//@types/lodash",
+  "@npm//@types/react",
+  "@npm//@elastic/eui",
+  "@npm//react-use",
+  "@npm//rxjs",
+]
+
+jsts_transpiler(
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+)
+
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+)
+
+ts_config(
+  name = "tsconfig",
+  src = "tsconfig.json",
+  deps = [
+    "//:tsconfig.base.json",
+    "//:tsconfig.bazel.json",
+  ],
+)
+
+ts_project(
+  name = "tsc_types",
+  args = ['--pretty'],
+  srcs = SRCS,
+  deps = TYPES_DEPS,
+  declaration = True,
+  declaration_map = True,
+  emit_declaration_only = True,
+  out_dir = "target_types",
+  tsconfig = ":tsconfig",
+)
+
+js_library(
+  name = PKG_DIRNAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
+  package_name = PKG_REQUIRE_NAME,
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm(
+  name = "npm_module",
+  deps = [":" + PKG_DIRNAME],
+)
+
+filegroup(
+  name = "build",
+  srcs = [":npm_module"],
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm_types(
+  name = "npm_module_types",
+  srcs = SRCS,
+  deps = [":tsc_types"],
+  package_name = PKG_REQUIRE_NAME,
+  tsconfig = ":tsconfig",
+  visibility = ["//visibility:public"],
+)
+
+filegroup(
+  name = "build_types",
+  srcs = [":npm_module_types"],
+  visibility = ["//visibility:public"],
+)

packages/content-management/table_list/README.mdx

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

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 { TableListView, TableListViewProvider, TableListViewKibanaProvider } from './src';
+
+export type { UserContentCommonSchema } from './src';

packages/content-management/table_list/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/table_list'],
+};

packages/content-management/table_list/kibana.jsonc

@@ -0,0 +1,7 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/content-management-table-list",
+  "owner": "@elastic/shared-ux",
+  "runtimeDeps": [],
+  "typeDeps": []
+}

packages/content-management/table_list/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@kbn/content-management-table-list",
+  "private": true,
+  "version": "1.0.0",
+  "main": "./target_node/index.js",
+  "browser": "./target_web/index.js",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

src/plugins/kibana_react/public/table_list_view/index.ts → packages/content-management/table_list/src/__jest__/index.ts

@@ -6,4 +6,4 @@
  * Side Public License, v 1.
  */
 
-export * from './table_list_view';
+export { WithServices } from './tests.helpers';

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

@@ -0,0 +1,36 @@
+/*
+ * 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 type { ComponentType } from 'react';
+import { from } from 'rxjs';
+
+import { TableListViewProvider, Services } from '../services';
+
+export const getMockServices = (overrides?: Partial<Services>) => {
+  const services: Services = {
+    canEditAdvancedSettings: true,
+    getListingLimitSettingsUrl: () => 'http://elastic.co',
+    notifyError: () => undefined,
+    currentAppId$: from('mockedApp'),
+    navigateToUrl: () => undefined,
+    ...overrides,
+  };
+
+  return services;
+};
+
+export function WithServices<P>(Comp: ComponentType<P>, overrides: Partial<Services> = {}) {
+  return (props: P) => {
+    const services = getMockServices(overrides);
+    return (
+      <TableListViewProvider {...services}>
+        <Comp {...(props as any)} />
+      </TableListViewProvider>
+    );
+  };
+}