Merge branch 'main' into cases-user-suggestions-be

.github/CODEOWNERS

@@ -154,6 +154,10 @@
 /x-pack/plugins/apm/public/components/app/rum_dashboard @elastic/uptime
 /x-pack/test/apm_api_integration/tests/csm/ @elastic/uptime
 
+# Observability onboarding tour
+/x-pack/plugins/observability/public/components/shared/tour @elastic/platform-onboarding
+/x-pack/test/functional/apps/infra/tour.ts @elastic/platform-onboarding
+
 ### END Observability Plugins
 
 # Presentation
@@ -606,6 +610,10 @@ x-pack/test/threat_intelligence_cypress @elastic/protections-experience
 /x-pack/plugins/cloud_security_posture/ @elastic/kibana-cloud-security-posture
 /x-pack/plugins/security_solution/public/cloud_security_posture @elastic/kibana-cloud-security-posture
 
+# Security Solution onboarding tour
+/x-pack/plugins/security_solution/public/common/components/guided_onboarding @elastic/platform-onboarding
+/x-pack/plugins/security_solution/cypress/integration/guided_onboarding @elastic/platform-onboarding
+
 # Design (at the bottom for specificity of SASS files)
 **/*.scss  @elastic/kibana-design
 #CC# /packages/kbn-ui-framework/ @elastic/kibana-design
@@ -666,6 +674,9 @@ x-pack/test/threat_intelligence_cypress @elastic/protections-experience
 /src/plugins/home/server/*.ts @elastic/shared-ux
 /src/plugins/home/server/services/ @elastic/shared-ux
 
+# Landing page for guided onboarding in Home plugin
+/src/plugins/home/public/application/components/guided_onboarding @elastic/platform-onboarding
+
 ### Overview Plugin and Packages
 /src/plugins/kibana_overview/ @elastic/shared-ux
 

dev_docs/key_concepts/building_blocks.mdx

@@ -142,7 +142,7 @@ application could register a UI Action called "View in Maps" to appear any time
 
 ## Embeddables
 
-Embeddables help you integrate your application with the Dashboard application. Register your custom UI Widget as an Embeddable and users will
+<DocLink id="kibDevDocsEmbeddables" text="Embeddables" /> help you integrate your application with the Dashboard application. Register your custom UI Widget as an Embeddable and users will
 be able to add it as a panel on a Dashboard. With a little extra work, it can also be exposed in Canvas workpads.
 
 **Github labels**: `Team:AppServices`, `Feature:Embeddables`

dev_docs/key_concepts/embeddables.mdx

@@ -0,0 +1,51 @@
+---
+id: kibDevDocsEmbeddables
+slug: /kibana-dev-docs/key-concepts/embeddables
+title: Embeddables
+summary: Embeddables provide a way to expose a reusable widget.
+date: 2022-07-27
+tags: ['kibana', 'dev', 'contributor', 'api docs']
+---
+
+The Embeddables Plugin provides an opportunity to expose reusable interactive widgets that can be embedded outside the original plugin.
+
+If you are planning to integrate with the plugin, please get in touch with the App Services team to get to know all the limitations.
+
+## Capabilities
+- Framework-agnostic API.
+- Out-of-the-box React support.
+- Integration with the [UI Actions](https://github.com/elastic/kibana/tree/HEAD/src/plugins/ui_actions) plugin.
+- Hierarchical structure to enclose multiple widgets.
+- Error handling.
+
+## Key Concepts
+### Embeddable
+Embeddable is a re-usable widget that can be rendered on a dashboard as well as in other applications.
+Developers are free to embed them directly in their plugins.
+End users can dynamically select an embeddable to add to a _container_.
+Dashboard container powers the grid of panels on the Dashboard app.
+
+### Container
+Container is a special type of embeddable that can hold other embeddable items.
+Embeddables can be added dynamically to the containers, but that should be implemented on the end plugin side.
+Currently, the dashboard plugin provides such functionality.
+
+### Input
+Every embeddable has an input which is a serializable set of data.
+This data can be used to update the state of the embeddable widget.
+The input can be updated later so that the embeddable should be capable of reacting to those changes.
+
+### Output
+Every embeddable may expose some data to the external interface.
+Usually, it is diverged from the input and not necessarily serializable.
+Output data can also be updated, but that should always be done inside the embeddable.
+
+## Documentation
+<DocCallOut>
+  Check the plugin documentation [here](https://github.com/elastic/kibana/tree/HEAD/src/plugins/embeddable) to get to know all the capabilities better.
+</DocCallOut>
+
+## API
+<DocCallOut>
+  Check the complete API reference <DocLink id="kibEmbeddablePluginApi" text="here" />.
+</DocCallOut>

docs/developer/plugin-list.asciidoc

@@ -86,8 +86,8 @@ This API doesn't support angular, for registering angular dev tools, bootstrap a
 |Contains the Discover application and the saved search embeddable.
 
 
-|<<embeddable-plugin>>
-|Embeddables are re-usable widgets that can be rendered on dashboard, but also in other apps. Developers can embed them directly in their plugin. End users can dynamically add them to embeddable _containers_.
+|{kib-repo}blob/{branch}/src/plugins/embeddable/README.md[embeddable]
+|The Embeddables Plugin provides an opportunity to expose reusable interactive widgets that can be embedded outside the original plugin.
 
 
 |{kib-repo}blob/{branch}/src/plugins/es_ui_shared/README.md[esUiShared]
@@ -680,7 +680,6 @@ As a developer you can reuse and extend built-in alerts and actions UI functiona
 |===
 
 include::{kibana-root}/src/plugins/dashboard/README.asciidoc[leveloffset=+1]
-include::{kibana-root}/src/plugins/embeddable/README.asciidoc[leveloffset=+1]
 include::{kibana-root}/src/plugins/expressions/README.asciidoc[leveloffset=+1]
 include::{kibana-root}/src/plugins/ui_actions/README.asciidoc[leveloffset=+1]
 include::{kibana-root}/x-pack/plugins/dashboard_enhanced/README.asciidoc[leveloffset=+1]

src/core/server/integration_tests/saved_objects/migrations/incompatible_cluster_routing_allocation.test.ts

@@ -91,7 +91,8 @@ async function updateRoutingAllocations(
   });
 }
 
-describe('incompatible_cluster_routing_allocation', () => {
+// FLAKY: https://github.com/elastic/kibana/issues/136990
+describe.skip('incompatible_cluster_routing_allocation', () => {
   let client: ElasticsearchClient;
   let root: Root;
 

src/plugins/controls/common/control_types/options_list/types.ts

@@ -7,7 +7,7 @@
  */
 
 import type { Filter, Query, BoolQuery, TimeRange } from '@kbn/es-query';
-import { FieldSpec, DataView, DataViewField } from '@kbn/data-views-plugin/common';
+import { FieldSpec, DataView } from '@kbn/data-views-plugin/common';
 
 import { DataControlInput } from '../../types';
 
@@ -17,10 +17,9 @@ export interface OptionsListEmbeddableInput extends DataControlInput {
   selectedOptions?: string[];
   runPastTimeout?: boolean;
   singleSelect?: boolean;
-  loading?: boolean;
 }
 
-export type OptionsListField = DataViewField & {
+export type OptionsListField = FieldSpec & {
   textFieldName?: string;
   parentFieldName?: string;
   childFieldName?: string;

src/plugins/controls/public/control_group/component/control_frame_component.tsx

@@ -19,7 +19,7 @@ import {
 
 import { useReduxContainerContext } from '@kbn/presentation-util-plugin/public';
 import { ErrorEmbeddable } from '@kbn/embeddable-plugin/public';
-import { ControlGroupInput } from '../types';
+import { ControlGroupReduxState } from '../types';
 import { pluginServices } from '../../services';
 import { EditControlButton } from '../editor/edit_control';
 import { ControlGroupStrings } from '../control_group_strings';
@@ -42,11 +42,11 @@ export const ControlFrame = ({
   const [hasFatalError, setHasFatalError] = useState(false);
 
   const {
-    useEmbeddableSelector,
+    useEmbeddableSelector: select,
     containerActions: { untilEmbeddableLoaded, removeEmbeddable },
-  } = useReduxContainerContext<ControlGroupInput>();
+  } = useReduxContainerContext<ControlGroupReduxState>();
 
-  const { controlStyle } = useEmbeddableSelector((state) => state);
+  const controlStyle = select((state) => state.explicitInput.controlStyle);
 
   // Controls Services Context
   const { overlays } = pluginServices.getHooks();

src/plugins/controls/public/control_group/component/control_group_component.tsx

@@ -28,27 +28,31 @@ import {
   useSensors,
   LayoutMeasuringStrategy,
 } from '@dnd-kit/core';
+
 import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { useReduxContainerContext } from '@kbn/presentation-util-plugin/public';
-import { ControlGroupInput } from '../types';
+
+import { ControlGroupReduxState } from '../types';
 import { controlGroupReducers } from '../state/control_group_reducers';
 import { ControlClone, SortableControl } from './control_group_sortable_item';
 
 export const ControlGroup = () => {
   // Redux embeddable container Context
   const reduxContainerContext = useReduxContainerContext<
-    ControlGroupInput,
+    ControlGroupReduxState,
     typeof controlGroupReducers
   >();
   const {
-    useEmbeddableSelector,
-    useEmbeddableDispatch,
     actions: { setControlOrders },
+    useEmbeddableSelector: select,
+    useEmbeddableDispatch,
   } = reduxContainerContext;
   const dispatch = useEmbeddableDispatch();
 
   // current state
-  const { panels, viewMode, controlStyle } = useEmbeddableSelector((state) => state);
+  const panels = select((state) => state.explicitInput.panels);
+  const viewMode = select((state) => state.explicitInput.viewMode);
+  const controlStyle = select((state) => state.explicitInput.controlStyle);
 
   const isEditable = viewMode === ViewMode.EDIT;
 

src/plugins/controls/public/control_group/component/control_group_sortable_item.tsx

@@ -13,8 +13,8 @@ import { CSS } from '@dnd-kit/utilities';
 import classNames from 'classnames';
 
 import { useReduxContainerContext } from '@kbn/presentation-util-plugin/public';
-import { ControlGroupInput } from '../types';
 import { ControlFrame, ControlFrameProps } from './control_frame_component';
+import { ControlGroupReduxState } from '../types';
 import { ControlGroupStrings } from '../control_group_strings';
 
 interface DragInfo {
@@ -67,8 +67,8 @@ const SortableControlInner = forwardRef<
     dragHandleRef
   ) => {
     const { isOver, isDragging, draggingIndex, index } = dragInfo;
-    const { useEmbeddableSelector } = useReduxContainerContext<ControlGroupInput>();
-    const { panels } = useEmbeddableSelector((state) => state);
+    const { useEmbeddableSelector } = useReduxContainerContext<ControlGroupReduxState>();
+    const panels = useEmbeddableSelector((state) => state.explicitInput.panels);
 
     const grow = panels[embeddableId].grow;
     const width = panels[embeddableId].width;
@@ -119,8 +119,9 @@ const SortableControlInner = forwardRef<
  * can be quite cumbersome.
  */
 export const ControlClone = ({ draggingId }: { draggingId: string }) => {
-  const { useEmbeddableSelector } = useReduxContainerContext<ControlGroupInput>();
-  const { panels, controlStyle } = useEmbeddableSelector((state) => state);
+  const { useEmbeddableSelector: select } = useReduxContainerContext<ControlGroupReduxState>();
+  const panels = select((state) => state.explicitInput.panels);
+  const controlStyle = select((state) => state.explicitInput.controlStyle);
 
   const width = panels[draggingId].width;
   const title = panels[draggingId].explicitInput.title;

src/plugins/controls/public/control_group/editor/edit_control.tsx

@@ -14,7 +14,7 @@ import { OverlayRef } from '@kbn/core/public';
 import { toMountPoint } from '@kbn/kibana-react-plugin/public';
 import { EmbeddableFactoryNotFoundError } from '@kbn/embeddable-plugin/public';
 import { useReduxContainerContext } from '@kbn/presentation-util-plugin/public';
-import { ControlGroupInput } from '../types';
+import { ControlGroupReduxState } from '../types';
 import { ControlEditor } from './control_editor';
 import { pluginServices } from '../../services';
 import { ControlGroupStrings } from '../control_group_strings';
@@ -41,7 +41,7 @@ export const EditControlButton = ({ embeddableId }: { embeddableId: string }) =>
 
   // Redux embeddable container Context
   const reduxContainerContext = useReduxContainerContext<
-    ControlGroupInput,
+    ControlGroupReduxState,
     typeof controlGroupReducers
   >();
   const {
@@ -53,7 +53,7 @@ export const EditControlButton = ({ embeddableId }: { embeddableId: string }) =>
   const dispatch = useEmbeddableDispatch();
 
   // current state
-  const { panels } = useEmbeddableSelector((state) => state);
+  const panels = useEmbeddableSelector((state) => state.explicitInput.panels);
 
   // keep up to date ref of latest panel state for comparison when closing editor.
   const latestPanelState = useRef(panels[embeddableId]);