[shared-ux] Create Shared UX Plugin (#122373)

* [shared-ux] Create Shared UX Plugin

* Rename nav-shared-ux.docnav.json to nav_shared_ux.docnav.json

* Fix a few issues

* fix limits.yml

.github/CODEOWNERS

@@ -477,3 +477,8 @@ x-pack/test/security_solution_cypress @elastic/security-engineering-productivity
 
 # EUI design
 /src/plugins/kibana_react/public/page_template/ @elastic/eui-design @elastic/kibana-app-services
+
+# Application Experience
+
+## Shared UX
+/src/plugins/shared_ux @elastic/shared-ux

.i18nrc.json

@@ -1,83 +1,84 @@
 {
   "paths": {
+    "advancedSettings": "src/plugins/advanced_settings",
     "alerts": "packages/kbn-alerts/src",
+    "apmOss": "src/plugins/apm_oss",
     "autocomplete": "packages/kbn-securitysolution-autocomplete/src",
-    "kbnConfig": "packages/kbn-config/src",
+    "bfetch": "src/plugins/bfetch",
+    "charts": "src/plugins/charts",
     "console": "src/plugins/console",
     "core": "src/core",
     "customIntegrations": "src/plugins/custom_integrations",
-    "discover": "src/plugins/discover",
-    "bfetch": "src/plugins/bfetch",
     "dashboard": "src/plugins/dashboard",
     "controls": "src/plugins/controls",
     "data": "src/plugins/data",
     "dataViews": "src/plugins/data_views",
+    "devTools": "src/plugins/dev_tools",
+    "discover": "src/plugins/discover",
     "embeddableApi": "src/plugins/embeddable",
     "embeddableExamples": "examples/embeddable_examples",
-    "fieldFormats": "src/plugins/field_formats",
-    "uiActionsExamples": "examples/ui_action_examples",
-    "share": "src/plugins/share",
-    "home": "src/plugins/home",
-    "flot": "packages/kbn-ui-shared-deps-src/src/flot_charts",
-    "charts": "src/plugins/charts",
+    "esQuery": "packages/kbn-es-query/src",
     "esUi": "src/plugins/es_ui_shared",
-    "devTools": "src/plugins/dev_tools",
-    "expressions": "src/plugins/expressions",
     "expressionError": "src/plugins/expression_error",
+    "expressionGauge": "src/plugins/chart_expressions/expression_gauge",
+    "expressionHeatmap": "src/plugins/chart_expressions/expression_heatmap",
     "expressionImage": "src/plugins/expression_image",
     "expressionMetric": "src/plugins/expression_metric",
-    "expressionRepeatImage": "src/plugins/expression_repeat_image",
-    "expressionRevealImage": "src/plugins/expression_reveal_image",
-    "expressionShape": "src/plugins/expression_shape",
-    "expressionHeatmap": "src/plugins/chart_expressions/expression_heatmap",
-    "expressionGauge": "src/plugins/chart_expressions/expression_gauge",
-    "expressionTagcloud": "src/plugins/chart_expressions/expression_tagcloud",
     "expressionMetricVis": "src/plugins/chart_expressions/expression_metric",
     "expressionPie": "src/plugins/chart_expressions/expression_pie",
-    "inputControl": "src/plugins/input_control_vis",
-    "inspector": "src/plugins/inspector",
-    "inspectorViews": "src/legacy/core_plugins/inspector_views",
-    "interpreter": "src/legacy/core_plugins/interpreter",
-    "kbn": "src/legacy/core_plugins/kibana",
-    "kbnDocViews": "src/legacy/core_plugins/kbn_doc_views",
-    "lists": "packages/kbn-securitysolution-list-utils/src",
-    "management": ["src/legacy/core_plugins/management", "src/plugins/management"],
-    "monaco": "packages/kbn-monaco/src",
-    "esQuery": "packages/kbn-es-query/src",
-    "presentationUtil": "src/plugins/presentation_util",
+    "expressionRepeatImage": "src/plugins/expression_repeat_image",
+    "expressionRevealImage": "src/plugins/expression_reveal_image",
+    "expressions": "src/plugins/expressions",
+    "expressionShape": "src/plugins/expression_shape",
+    "expressionTagcloud": "src/plugins/chart_expressions/expression_tagcloud",
+    "fieldFormats": "src/plugins/field_formats",
+    "flot": "packages/kbn-ui-shared-deps-src/src/flot_charts",
+    "home": "src/plugins/home",
     "indexPatternEditor": "src/plugins/data_view_editor",
     "indexPatternFieldEditor": "src/plugins/data_view_field_editor",
     "indexPatternManagement": "src/plugins/data_view_management",
+    "inputControl": "src/plugins/input_control_vis",
+    "inspector": "src/plugins/inspector",
+    "inspectorViews": "src/legacy/core_plugins/inspector_views",
     "interactiveSetup": "src/plugins/interactive_setup",
-    "advancedSettings": "src/plugins/advanced_settings",
-    "kibanaOverview": "src/plugins/kibana_overview",
+    "interpreter": "src/legacy/core_plugins/interpreter",
+    "kbn": "src/legacy/core_plugins/kibana",
+    "kbnConfig": "packages/kbn-config/src",
+    "kbnDocViews": "src/legacy/core_plugins/kbn_doc_views",
     "kibana_react": "src/legacy/core_plugins/kibana_react",
-    "kibana-react": "src/plugins/kibana_react",
     "kibana_utils": "src/plugins/kibana_utils",
+    "kibana-react": "src/plugins/kibana_react",
+    "kibanaOverview": "src/plugins/kibana_overview",
+    "lists": "packages/kbn-securitysolution-list-utils/src",
+    "management": ["src/legacy/core_plugins/management", "src/plugins/management"],
+    "monaco": "packages/kbn-monaco/src",
     "navigation": "src/plugins/navigation",
     "newsfeed": "src/plugins/newsfeed",
+    "presentationUtil": "src/plugins/presentation_util",
     "savedObjects": "src/plugins/saved_objects",
     "savedObjectsManagement": "src/plugins/saved_objects_management",
     "server": "src/legacy/server",
+    "share": "src/plugins/share",
+    "sharedUX": "src/plugins/shared_ux",
     "statusPage": "src/legacy/core_plugins/status_page",
     "telemetry": ["src/plugins/telemetry", "src/plugins/telemetry_management_section"],
     "timelion": ["src/plugins/vis_types/timelion"],
     "uiActions": "src/plugins/ui_actions",
+    "uiActionsExamples": "examples/ui_action_examples",
+    "usageCollection": "src/plugins/usage_collection",
     "visDefaultEditor": "src/plugins/vis_default_editor",
+    "visTypeHeatmap": "src/plugins/vis_types/heatmap",
     "visTypeMarkdown": "src/plugins/vis_type_markdown",
     "visTypeMetric": "src/plugins/vis_types/metric",
+    "visTypePie": "src/plugins/vis_types/pie",
     "visTypeTable": "src/plugins/vis_types/table",
     "visTypeTagCloud": "src/plugins/vis_types/tagcloud",
     "visTypeTimeseries": "src/plugins/vis_types/timeseries",
     "visTypeVega": "src/plugins/vis_types/vega",
     "visTypeVislib": "src/plugins/vis_types/vislib",
     "visTypeXy": "src/plugins/vis_types/xy",
-    "visTypePie": "src/plugins/vis_types/pie",
-    "visTypeHeatmap": "src/plugins/vis_types/heatmap",
     "visualizations": "src/plugins/visualizations",
-    "visualize": "src/plugins/visualize",
-    "apmOss": "src/plugins/apm_oss",
-    "usageCollection": "src/plugins/usage_collection"
+    "visualize": "src/plugins/visualize"
   },
   "translations": []
 }

docs/developer/plugin-list.asciidoc

@@ -240,6 +240,10 @@ oss plugins.
 generating deep links to other apps, and creating short URLs.
 
 
+|{kib-repo}blob/{branch}/src/plugins/shared_ux/README.md[sharedUX]
+|Our mission is to make consistency in our user experience a product.
+
+
 |{kib-repo}blob/{branch}/src/plugins/telemetry/README.md[telemetry]
 |Telemetry allows Kibana features to have usage tracked in the wild. The general term "telemetry" refers to multiple things:
 

packages/kbn-optimizer/limits.yml

@@ -121,3 +121,4 @@ pageLoadAssetSize:
   expressionGauge: 25000
   controls: 34788
   expressionPie: 26338
+  sharedUX: 16225

src/dev/storybook/aliases.ts

@@ -10,29 +10,30 @@
 export const storybookAliases = {
   apm: 'x-pack/plugins/apm/.storybook',
   canvas: 'x-pack/plugins/canvas/storybook',
-  codeeditor: 'src/plugins/kibana_react/public/code_editor/.storybook',
   ci_composite: '.ci/.storybook',
+  codeeditor: 'src/plugins/kibana_react/public/code_editor/.storybook',
+  controls: 'src/plugins/controls/storybook',
   custom_integrations: 'src/plugins/custom_integrations/storybook',
-  url_template_editor: 'src/plugins/kibana_react/public/url_template_editor/.storybook',
-  dashboard: 'src/plugins/dashboard/.storybook',
   dashboard_enhanced: 'x-pack/plugins/dashboard_enhanced/.storybook',
+  dashboard: 'src/plugins/dashboard/.storybook',
   data_enhanced: 'x-pack/plugins/data_enhanced/.storybook',
   embeddable: 'src/plugins/embeddable/.storybook',
   expression_error: 'src/plugins/expression_error/.storybook',
   expression_image: 'src/plugins/expression_image/.storybook',
+  expression_metric_vis: 'src/plugins/chart_expressions/expression_metric/.storybook',
   expression_metric: 'src/plugins/expression_metric/.storybook',
+  expression_pie: 'src/plugins/chart_expressions/expression_pie/.storybook',
   expression_repeat_image: 'src/plugins/expression_repeat_image/.storybook',
   expression_reveal_image: 'src/plugins/expression_reveal_image/.storybook',
   expression_shape: 'src/plugins/expression_shape/.storybook',
   expression_tagcloud: 'src/plugins/chart_expressions/expression_tagcloud/.storybook',
-  expression_metric_vis: 'src/plugins/chart_expressions/expression_metric/.storybook',
-  expression_pie: 'src/plugins/chart_expressions/expression_pie/.storybook',
   fleet: 'x-pack/plugins/fleet/.storybook',
   infra: 'x-pack/plugins/infra/.storybook',
-  security_solution: 'x-pack/plugins/security_solution/.storybook',
-  ui_actions_enhanced: 'x-pack/plugins/ui_actions_enhanced/.storybook',
+  lists: 'x-pack/plugins/lists/.storybook',
   observability: 'x-pack/plugins/observability/.storybook',
   presentation: 'src/plugins/presentation_util/storybook',
-  controls: 'src/plugins/controls/storybook',
-  lists: 'x-pack/plugins/lists/.storybook',
+  security_solution: 'x-pack/plugins/security_solution/.storybook',
+  shared_ux: 'src/plugins/shared_ux/.storybook',
+  ui_actions_enhanced: 'x-pack/plugins/ui_actions_enhanced/.storybook',
+  url_template_editor: 'src/plugins/kibana_react/public/url_template_editor/.storybook',
 };

src/plugins/shared_ux/.i18nrc.json

@@ -0,0 +1,9 @@
+{
+  "prefix": "sharedUX",
+  "paths": {
+    "sharedUX": "."
+  },
+  "translations": [
+    "translations/ja-JP.json"
+  ]
+}

src/plugins/shared_ux/.storybook/main.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.
+ */
+
+import { defaultConfig } from '@kbn/storybook';
+
+module.exports = defaultConfig;

src/plugins/shared_ux/.storybook/manager.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 { addons } from '@storybook/addons';
+import { create } from '@storybook/theming';
+import { PANEL_ID } from '@storybook/addon-actions';
+
+addons.setConfig({
+  theme: create({
+    base: 'light',
+    brandTitle: 'Shared UX Storybook',
+    brandUrl: 'https://github.com/elastic/kibana/tree/main/src/plugins/shared_ux',
+  }),
+  showPanel: true.valueOf,
+  selectedPanel: PANEL_ID,
+});

src/plugins/shared_ux/README.md

@@ -0,0 +1,29 @@
+# sharedUX
+
+Our mission is to make consistency in our user experience a product.
+
+## Areas of Focus
+
+### UX Infrastructure
+
+- Create and maintain a discoverable home for shared UX code.
+- Encourage contribution and usage.
+
+### UX Patterns
+
+- Work with design specialists to understand and communicate new and existing designs.
+- Foster adoption of design principles by codifying them in shared resources.
+
+### UX Solutions
+
+- Drive common projects.
+- Build and support common plugins.
+- Help teams to create consistent user experiences.
+
+## The sharedUX Plugin
+
+This plugin contains common code that is shared among other plugins.
+
+## Contribution
+
+Contributions are welcome and encouraged!

src/plugins/shared_ux/common/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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 const PLUGIN_ID = 'sharedUX';
+export const PLUGIN_NAME = 'sharedUX';

src/plugins/shared_ux/docs/about.mdx

@@ -0,0 +1,36 @@
+---
+id: sharedUX/About
+slug: /shared-ux/about
+title: About Shared UX
+summary: .
+date: 2021-01-05
+tags: ['shared-ux']
+---
+
+Our mission is to make consistency in our user experience a product.
+
+## Areas of Focus
+
+### UX Infrastructure
+
+- Create and maintain a discoverable home for shared UX code.
+- Encourage contribution and usage.
+
+### UX Patterns
+
+- Work with design specialists to understand and communicate new and existing designs.
+- Foster adoption of design principles by codifying them in shared resources.
+
+### UX Solutions
+
+- Drive common projects.
+- Build and support common plugins.
+- Help teams to create consistent user experiences.
+
+## The sharedUX Plugin
+
+This plugin contains common code that is shared among other plugins.
+
+## Contribution
+
+Contributions are welcome and encouraged!

src/plugins/shared_ux/kibana.json

@@ -0,0 +1,14 @@
+{
+  "id": "sharedUX",
+  "version": "1.0.0",
+  "kibanaVersion": "kibana",
+  "owner": {
+    "name": "Shared UX",
+    "githubTeam": "shared-ux"
+  },
+  "description": "A plugin providing components and services for shared user experiences in Kibana.",
+  "server": true,
+  "ui": true,
+  "requiredPlugins": [],
+  "optionalPlugins": []
+}

src/plugins/shared_ux/nav_shared_ux.docnav.json

@@ -0,0 +1,17 @@
+{
+  "mission": "Shared UX",
+  "id": "sharedUX",
+  "landingPageId": "sharedUX/About",
+  "icon": "globe",
+  "description": "Developer documentation for Shared UX.",
+  "items": [
+    {
+      "label": "About",
+      "items": [
+        {
+          "id": "sharedUX/About"
+        }
+      ]
+    }
+  ]
+}

src/plugins/shared_ux/public/index.ts

@@ -0,0 +1,15 @@
+/*
+ * 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 { SharedUXPlugin } from './plugin';
+
+export function plugin() {
+  return new SharedUXPlugin();
+}
+
+export type { SharedUXPluginSetup, SharedUXPluginStart } from './types';

src/plugins/shared_ux/public/plugin.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 { CoreSetup, CoreStart, Plugin } from '../../../core/public';
+import { SharedUXPluginSetup, SharedUXPluginStart } from './types';
+
+export class SharedUXPlugin implements Plugin<SharedUXPluginSetup, SharedUXPluginStart> {
+  public setup(_core: CoreSetup): SharedUXPluginSetup {
+    return {};
+  }
+
+  public start(_core: CoreStart): SharedUXPluginStart {
+    return {};
+  }
+
+  public stop() {}
+}

src/plugins/shared_ux/public/types.ts

@@ -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.
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface SharedUXPluginSetup {}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface SharedUXPluginStart {}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface SharedUXPluginSetupDeps {}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface SharedUXPluginStartDeps {}

src/plugins/shared_ux/server/index.ts

@@ -0,0 +1,16 @@
+/*
+ * 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 { PluginInitializerContext } from '../../../core/server';
+import { SharedUXPlugin } from './plugin';
+
+export function plugin(initializerContext: PluginInitializerContext) {
+  return new SharedUXPlugin(initializerContext);
+}
+
+export type { SharedUXPluginSetup, SharedUXPluginStart } from './types';

src/plugins/shared_ux/server/plugin.ts

@@ -0,0 +1,37 @@
+/*
+ * 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 {
+  PluginInitializerContext,
+  CoreSetup,
+  CoreStart,
+  Plugin,
+  Logger,
+} from '../../../core/server';
+
+import { SharedUXPluginSetup, SharedUXPluginStart } from './types';
+
+export class SharedUXPlugin implements Plugin<SharedUXPluginSetup, SharedUXPluginStart> {
+  private readonly logger: Logger;
+
+  constructor(initializerContext: PluginInitializerContext) {
+    this.logger = initializerContext.logger.get();
+  }
+
+  public setup(_core: CoreSetup) {
+    this.logger.debug('sharedUX: Setup');
+    return {};
+  }
+
+  public start(_core: CoreStart) {
+    this.logger.debug('sharedUX: Started');
+    return {};
+  }
+
+  public stop() {}
+}

src/plugins/shared_ux/server/types.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.
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface SharedUXPluginSetup {}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface SharedUXPluginStart {}

src/plugins/shared_ux/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./target/types",
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationMap": true
+  },
+  "include": [
+    "common/**/*",
+    "public/**/*",
+    "server/**/*",
+    ".storybook/**/*",
+    "../../../typings/**/*"
+  ],
+  "references": [
+    {
+      "path": "../../core/tsconfig.json"
+    },
+  ]
+}