Merge remote-tracking branch 'upstream/main' into kibanathemeprovider…

…-kibana-app-services

.github/CODEOWNERS

@@ -163,6 +163,7 @@
 /src/plugins/input_control_vis/ @elastic/kibana-presentation
 /src/plugins/vis_type_markdown/ @elastic/kibana-presentation
 /src/plugins/presentation_util/ @elastic/kibana-presentation
+/src/plugins/controls/ @elastic/kibana-presentation
 /test/functional/apps/dashboard/  @elastic/kibana-presentation
 /test/functional/apps/dashboard_elements/  @elastic/kibana-presentation
 /x-pack/plugins/canvas/  @elastic/kibana-presentation

.i18nrc.json

@@ -9,6 +9,7 @@
     "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",
     "embeddableApi": "src/plugins/embeddable",

docs/developer/best-practices/index.asciidoc

@@ -73,16 +73,16 @@ services you should consider:
 
 * {kib-repo}tree/{branch}/src/plugins/data/README.md[Data
 services]
-** {kib-repo}tree/{branch}/src/plugins/data/public/search/README.md[Search
+** {kib-repo}tree/{branch}/src/plugins/data/README.mdx#search[Search
 strategies]
 *** Use the `esSearchStrategy` to make raw queries to ES that will
 support async searching and partial results, as well as injecting the
 right advanced settings like whether to include frozen indices or not.
-* {kib-repo}tree/{branch}/src/plugins/embeddable/README.md[Embeddables]
+* {kib-repo}tree/{branch}/src/plugins/embeddable/README.asciidoc[Embeddables]
 ** Rendering maps, visualizations, dashboards in your application
 ** Register new widgets that will can be added to a dashboard or Canvas
 workpad, or rendered in another plugin.
-* {kib-repo}tree/{branch}/src/plugins/ui_actions/README.md[UiActions]
+* {kib-repo}tree/{branch}/src/plugins/ui_actions/README.asciidoc[UiActions]
 ** Let other plugins inject functionality into your application
 ** Inject custom functionality into other plugins
 * Stateless helper utilities

docs/developer/plugin-list.asciidoc

@@ -40,6 +40,10 @@ as uiSettings within the code.
 |Console provides the user with tools for storing and executing requests against Elasticsearch.
 
 
+|{kib-repo}blob/{branch}/src/plugins/controls/README.mdx[controls]
+|The Controls plugin contains Embeddables which can be used to add user-friendly interactivity to apps.
+
+
 |{kib-repo}blob/{branch}/src/plugins/custom_integrations/README.md[customIntegrations]
 |Register add-data cards
 

packages/kbn-optimizer/limits.yml

@@ -75,7 +75,7 @@ pageLoadAssetSize:
   watcher: 43598
   runtimeFields: 41752
   stackAlerts: 29684
-  presentationUtil: 84606
+  presentationUtil: 58834
   osquery: 107090
   fileUpload: 25664
   dataVisualizer: 27530
@@ -119,4 +119,5 @@ pageLoadAssetSize:
   visTypeHeatmap: 25340
   screenshotting: 17017
   expressionGauge: 25000
+  controls: 34788
   expressionPie: 26338

src/dev/storybook/aliases.ts

@@ -33,5 +33,6 @@ export const storybookAliases = {
   ui_actions_enhanced: 'x-pack/plugins/ui_actions_enhanced/.storybook',
   observability: 'x-pack/plugins/observability/.storybook',
   presentation: 'src/plugins/presentation_util/storybook',
+  controls: 'src/plugins/controls/storybook',
   lists: 'x-pack/plugins/lists/.storybook',
 };

src/plugins/controls/README.mdx

@@ -0,0 +1,25 @@
+---
+id: controls
+slug: /kibana-dev-docs/controls
+title: Controls Plugin
+summary: Introduction to the Controls Plugin.
+date: 2020-01-12
+tags: ['kibana', 'controls', 'dashboard']
+related: []
+---
+
+## Introduction
+
+The Controls plugin contains Embeddables which can be used to add user-friendly interactivity to apps.
+
+## The Control Group
+
+The Control group is an embeddable container which provides the ability to add, remove, reorder, and edit multiple types of control embeddable. In any implementation, the control group embeddable should be the main point of contact between the application and the controls. The list of filters it sends to its output observable should be considered the final output of the current state of the controls, and can then be sent to other embeddables, or combined with filters from other sources.
+
+## Control Types
+
+Multiple types of controls can be registered to work with the Control Group. The current implementations are as follows:
+
+### Options List
+
+The options list is the most basic, and most used control type. It allows the dashboard author to specify a data view and field, and create a searchable dropdown.

src/plugins/presentation_util/common/controls/control_group/control_group_persistable_state.ts → src/plugins/controls/common/control_group/control_group_persistable_state.ts

@@ -10,9 +10,9 @@ import {
   EmbeddableInput,
   EmbeddablePersistableStateService,
   EmbeddableStateWithType,
-} from '../../../../embeddable/common/types';
+} from '../../../embeddable/common/types';
 import { ControlGroupInput, ControlPanelState } from './types';
-import { SavedObjectReference } from '../../../../../core/types';
+import { SavedObjectReference } from '../../../../core/types';
 
 type ControlGroupInputWithType = Partial<ControlGroupInput> & { type: string };
 

src/plugins/presentation_util/common/controls/control_group/types.ts → src/plugins/controls/common/control_group/types.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { EmbeddableInput, PanelState } from '../../../../embeddable/common/types';
+import { EmbeddableInput, PanelState } from '../../../embeddable/common/types';
 import { ControlInput, ControlStyle, ControlWidth } from '../types';
 
 export const CONTROL_GROUP_TYPE = 'control_group';

src/plugins/presentation_util/common/controls/control_types/options_list/options_list_persistable_state.ts → src/plugins/controls/common/control_types/options_list/options_list_persistable_state.ts

@@ -9,10 +9,10 @@
 import {
   EmbeddableStateWithType,
   EmbeddablePersistableStateService,
-} from '../../../../../embeddable/common/types';
+} from '../../../../embeddable/common';
 import { OptionsListEmbeddableInput } from './types';
-import { SavedObjectReference } from '../../../../../../core/types';
-import { DATA_VIEW_SAVED_OBJECT_TYPE } from '../../../../../data_views/common';
+import { SavedObjectReference } from '../../../../../core/types';
+import { DATA_VIEW_SAVED_OBJECT_TYPE } from '../../../../data_views/common';
 
 type OptionsListInputWithType = Partial<OptionsListEmbeddableInput> & { type: string };
 const dataViewReferenceName = 'optionsListDataView';

src/plugins/controls/common/index.ts

@@ -0,0 +1,14 @@
+/*
+ * 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 type { ControlPanelState, ControlsPanels, ControlGroupInput } from './control_group/types';
+export type { OptionsListEmbeddableInput } from './control_types/options_list/types';
+export type { ControlWidth } from './types';
+
+export { OPTIONS_LIST_CONTROL } from './control_types/options_list/types';
+export { CONTROL_GROUP_TYPE } from './control_group/types';

src/plugins/presentation_util/common/controls/types.ts → src/plugins/controls/common/types.ts

@@ -7,8 +7,8 @@
  */
 
 import { Filter, Query } from '@kbn/es-query';
-import { TimeRange } from '../../../data/common';
-import { EmbeddableInput } from '../../../embeddable/common/types';
+import { TimeRange } from '../../data/common';
+import { EmbeddableInput } from '../../embeddable/common/types';
 
 export type ControlWidth = 'auto' | 'small' | 'medium' | 'large';
 export type ControlStyle = 'twoLine' | 'oneLine';

src/plugins/controls/kibana.json

@@ -0,0 +1,23 @@
+{
+  "id": "controls",
+  "owner": {
+    "name": "Kibana Presentation",
+    "githubTeam": "kibana-presentation"
+  },
+  "description": "The Controls Plugin contains embeddable components intended to create a simple query interface for end users, and a powerful editing suite that allows dashboard authors to build controls",
+  "version": "1.0.0",
+  "kibanaVersion": "kibana",
+  "server": true,
+  "ui": true,
+  "extraPublicDirs": ["common"],
+  "requiredPlugins": [
+    "presentationUtil",
+    "savedObjects",
+    "kibanaReact",
+    "expressions",
+    "embeddable",
+    "dataViews",
+    "data"
+  ],
+  "optionalPlugins": []
+}

src/plugins/presentation_util/public/components/controls/__stories__/controls.stories.tsx → src/plugins/controls/public/__stories__/controls.stories.tsx

@@ -9,28 +9,35 @@
 import { EuiFlexGroup, EuiFlexItem, EuiSwitch, EuiTextAlign } from '@elastic/eui';
 import React, { useEffect, useMemo, useState, useCallback, FC } from 'react';
 import useEffectOnce from 'react-use/lib/useEffectOnce';
-
 import uuid from 'uuid';
+
+import {
+  getFlightOptionsAsync,
+  storybookFlightsDataView,
+} from '../../../presentation_util/public/mocks';
+import {
+  ControlGroupContainerFactory,
+  OptionsListEmbeddableInput,
+  OPTIONS_LIST_CONTROL,
+} from '../';
+
+import { ViewMode } from '../../../embeddable/public';
+import { EmbeddablePersistableStateService } from '../../../embeddable/common';
+
 import { decorators } from './decorators';
 import { ControlsPanels } from '../control_group/types';
-import { ViewMode } from '../../../../../embeddable/public';
-import { getFlightOptionsAsync, storybookFlightsDataView } from './fixtures/flights';
-import { pluginServices, registry } from '../../../services/storybook';
-import { OptionsListEmbeddableInput, OPTIONS_LIST_CONTROL } from '../../..';
-import { replaceValueSuggestionMethod } from '../../../services/storybook/data';
-import { injectStorybookDataView } from '../../../services/storybook/data_views';
+import { ControlGroupContainer } from '../control_group';
+import { pluginServices, registry } from '../services/storybook';
+import { replaceValueSuggestionMethod } from '../services/storybook/data';
+import { injectStorybookDataView } from '../services/storybook/data_views';
 import { populateStorybookControlFactories } from './storybook_control_factories';
-import { EmbeddablePersistableStateService } from '../../../../../embeddable/common';
-import { ControlGroupContainerFactory } from '../control_group/embeddable/control_group_container_factory';
 
 export default {
   title: 'Controls',
   description: '',
   decorators,
 };
 
-type EmbeddableType = Awaited<ReturnType<ControlGroupContainerFactory['create']>>;
-
 injectStorybookDataView(storybookFlightsDataView);
 replaceValueSuggestionMethod(getFlightOptionsAsync);
 
@@ -39,7 +46,7 @@ const ControlGroupStoryComponent: FC<{
   edit?: boolean;
 }> = ({ panels, edit }) => {
   const embeddableRoot: React.RefObject<HTMLDivElement> = useMemo(() => React.createRef(), []);
-  const [embeddable, setEmbeddable] = useState<EmbeddableType>();
+  const [embeddable, setEmbeddable] = useState<ControlGroupContainer>();
   const [viewMode, setViewMode] = useState<ViewMode>(
     edit === undefined || edit ? ViewMode.EDIT : ViewMode.VIEW
   );

src/plugins/presentation_util/public/components/controls/__stories__/storybook_control_factories.ts → src/plugins/controls/public/__stories__/storybook_control_factories.ts

@@ -7,12 +7,10 @@
  */
 
 import { OptionsListEmbeddableFactory } from '../control_types/options_list';
-import { PresentationControlsService } from '../../../services/controls';
+import { ControlsService } from '../services/controls';
 import { ControlFactory } from '..';
 
-export const populateStorybookControlFactories = (
-  controlsServiceStub: PresentationControlsService
-) => {
+export const populateStorybookControlFactories = (controlsServiceStub: ControlsService) => {
   const optionsListFactoryStub = new OptionsListEmbeddableFactory();
 
   // cast to unknown because the stub cannot use the embeddable start contract to transform the EmbeddableFactoryDefinition into an EmbeddableFactory

src/plugins/presentation_util/public/components/controls/control_group/component/control_frame_component.tsx → src/plugins/controls/public/control_group/component/control_frame_component.tsx

@@ -18,11 +18,11 @@ import {
 } from '@elastic/eui';
 
 import { ControlGroupInput } from '../types';
+import { pluginServices } from '../../services';
 import { EditControlButton } from '../editor/edit_control';
-import { useChildEmbeddable } from '../../hooks/use_child_embeddable';
-import { useReduxContainerContext } from '../../../redux_embeddables/redux_embeddable_context';
 import { ControlGroupStrings } from '../control_group_strings';
-import { pluginServices } from '../../../../services';
+import { useChildEmbeddable } from '../../hooks/use_child_embeddable';
+import { useReduxContainerContext } from '../../../../presentation_util/public';
 
 export interface ControlFrameProps {
   customPrepend?: JSX.Element;
@@ -38,7 +38,7 @@ export const ControlFrame = ({ customPrepend, enableActions, embeddableId }: Con
   } = useReduxContainerContext<ControlGroupInput>();
   const { controlStyle } = useEmbeddableSelector((state) => state);
 
-  // Presentation Services Context
+  // Controls Services Context
   const { overlays } = pluginServices.getHooks();
   const { openConfirm } = overlays.useService();
 

src/plugins/presentation_util/public/components/controls/control_group/component/control_group_component.tsx → src/plugins/controls/public/control_group/component/control_group_component.tsx

@@ -37,18 +37,18 @@ import {
 } from '@dnd-kit/core';
 
 import { ControlGroupInput } from '../types';
-import { pluginServices } from '../../../../services';
+import { pluginServices } from '../../services';
+import { ViewMode } from '../../../../embeddable/public';
 import { ControlGroupStrings } from '../control_group_strings';
 import { CreateControlButton } from '../editor/create_control';
-import { ViewMode } from '../../../../../../embeddable/public';
 import { EditControlGroup } from '../editor/edit_control_group';
 import { forwardAllContext } from '../editor/forward_all_context';
 import { controlGroupReducers } from '../state/control_group_reducers';
 import { ControlClone, SortableControl } from './control_group_sortable_item';
-import { useReduxContainerContext } from '../../../redux_embeddables/redux_embeddable_context';
+import { useReduxContainerContext } from '../../../../presentation_util/public';
 
 export const ControlGroup = () => {
-  // Presentation Services Context
+  // Controls Services Context
   const { overlays } = pluginServices.getHooks();
   const { openFlyout } = overlays.useService();
 

src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx → src/plugins/controls/public/control_group/component/control_group_sortable_item.tsx

@@ -14,7 +14,7 @@ import classNames from 'classnames';
 
 import { ControlGroupInput } from '../types';
 import { ControlFrame, ControlFrameProps } from './control_frame_component';
-import { useReduxContainerContext } from '../../../redux_embeddables/redux_embeddable_context';
+import { useReduxContainerContext } from '../../../../presentation_util/public';
 
 interface DragInfo {
   isOver?: boolean;