chore(NA): merge and solve conflicts with main

docs/developer/plugin-list.asciidoc

@@ -540,6 +540,11 @@ Elastic.
 |Add tagging capability to saved objects
 
 
+|{kib-repo}blob/{branch}/x-pack/plugins/screenshotting/README.md[screenshotting]
+|This plugin provides functionality to take screenshots of the Kibana pages.
+It uses Chromium and Puppeteer underneath to run the browser in headless mode.
+
+
 |{kib-repo}blob/{branch}/x-pack/plugins/searchprofiler/README.md[searchprofiler]
 |The search profiler consumes the Profile API
 by sending a search API with profile: true enabled in the request body. The response contains

docs/settings/url-drilldown-settings.asciidoc

@@ -6,16 +6,13 @@
 
 Configure the URL drilldown settings in your `kibana.yml` configuration file.
 
-[cols="2*<"]
-|===
-| [[external-URL-policy]] `externalUrl.policy`
- | Configures the external URL policies. URL drilldowns respect the global *External URL* service, which you can use to deny or allow external URLs.
+[[external-URL-policy]] `externalUrl.policy`::
+Configures the external URL policies. URL drilldowns respect the global *External URL* service, which you can use to deny or allow external URLs.
 By default all external URLs are allowed.
-|===
-
-For example, to allow external URLs only to the `example.com` domain with the `https` scheme, except for the `danger.example.com` sub-domain,
++
+For example, to allow only external URLs to the `example.com` domain with the `https` scheme, except for the `danger.example.com` sub-domain,
 which is denied even when `https` scheme is used:
-
++
 ["source","yml"]
 -----------
 externalUrl.policy:
@@ -25,4 +22,3 @@ externalUrl.policy:
     host: example.com
     protocol: https
 -----------
-

package.json

@@ -197,7 +197,7 @@
     "axios": "^0.21.1",
     "base64-js": "^1.3.1",
     "brace": "0.11.1",
-    "broadcast-channel": "^4.5.0",
+    "broadcast-channel": "^4.7.0",
     "chalk": "^4.1.0",
     "cheerio": "^1.0.0-rc.10",
     "chokidar": "^3.4.3",
@@ -568,6 +568,7 @@
     "@types/kbn__config-schema": "link:bazel-bin/packages/kbn-config-schema/npm_module_types",
     "@types/kbn__crypto": "link:bazel-bin/packages/kbn-crypto/npm_module_types",
     "@types/kbn__dev-utils": "link:bazel-bin/packages/kbn-dev-utils/npm_module_types",
+    "@types/kbn__docs-utils": "link:bazel-bin/packages/kbn-docs-utils/npm_module_types",
     "@types/kbn__i18n": "link:bazel-bin/packages/kbn-i18n/npm_module_types",
     "@types/kbn__i18n-react": "link:bazel-bin/packages/kbn-i18n-react/npm_module_types",
     "@types/license-checker": "15.0.0",
@@ -677,7 +678,7 @@
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "babel-plugin-styled-components": "^1.13.3",
+    "babel-plugin-styled-components": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "backport": "^5.6.6",
     "callsites": "^3.1.0",

packages/BUILD.bazel

@@ -87,6 +87,7 @@ filegroup(
       "//packages/kbn-config-schema:build_types",
       "//packages/kbn-crypto:build_types",
       "//packages/kbn-dev-utils:build_types",
+      "//packages/kbn-docs-utils:build_types",
       "//packages/kbn-i18n:build_types",
       "//packages/kbn-i18n-react:build_types",
   ],

packages/kbn-cli-dev-mode/src/get_server_watch_paths.test.ts

@@ -66,7 +66,7 @@ it('produces the right watch and ignore list', () => {
       <absolute path>/x-pack/test/plugin_functional/plugins/resolver_test/target/**,
       <absolute path>/x-pack/test/plugin_functional/plugins/resolver_test/scripts/**,
       <absolute path>/x-pack/test/plugin_functional/plugins/resolver_test/docs/**,
-      <absolute path>/x-pack/plugins/reporting/chromium,
+      <absolute path>/x-pack/plugins/screenshotting/chromium,
       <absolute path>/x-pack/plugins/security_solution/cypress,
       <absolute path>/x-pack/plugins/apm/scripts,
       <absolute path>/x-pack/plugins/apm/ftr_e2e,

packages/kbn-cli-dev-mode/src/get_server_watch_paths.ts

@@ -56,7 +56,7 @@ export function getServerWatchPaths({ pluginPaths, pluginScanDirs }: Options) {
     /\.(md|sh|txt)$/,
     /debug\.log$/,
     ...pluginInternalDirsIgnore,
-    fromRoot('x-pack/plugins/reporting/chromium'),
+    fromRoot('x-pack/plugins/screenshotting/chromium'),
     fromRoot('x-pack/plugins/security_solution/cypress'),
     fromRoot('x-pack/plugins/apm/scripts'),
     fromRoot('x-pack/plugins/apm/ftr_e2e'), // prevents restarts for APM cypress tests

packages/kbn-docs-utils/BUILD.bazel

@@ -1,9 +1,10 @@
-load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_project")
-load("@build_bazel_rules_nodejs//:index.bzl", "js_library", "pkg_npm")
-load("//src/dev/bazel:index.bzl", "jsts_transpiler")
+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_BASE_NAME = "kbn-docs-utils"
 PKG_REQUIRE_NAME = "@kbn/docs-utils"
+TYPES_PKG_REQUIRE_NAME = "@types/kbn__docs-utils"
 
 SOURCE_FILES = glob(
   [
@@ -77,7 +78,7 @@ ts_project(
 js_library(
   name = PKG_BASE_NAME,
   srcs = NPM_MODULE_EXTRA_FILES,
-  deps = RUNTIME_DEPS + [":target_node", ":tsc_types"],
+  deps = RUNTIME_DEPS + [":target_node"],
   package_name = PKG_REQUIRE_NAME,
   visibility = ["//visibility:public"],
 )
@@ -96,3 +97,20 @@ filegroup(
   ],
   visibility = ["//visibility:public"],
 )
+
+pkg_npm_types(
+  name = "npm_module_types",
+  srcs = SRCS,
+  deps = [":tsc_types"],
+  package_name = TYPES_PKG_REQUIRE_NAME,
+  tsconfig = ":tsconfig",
+  visibility = ["//visibility:public"],
+)
+
+filegroup(
+  name = "build_types",
+  srcs = [
+    ":npm_module_types",
+  ],
+  visibility = ["//visibility:public"],
+)

packages/kbn-docs-utils/package.json

@@ -4,7 +4,6 @@
   "license": "SSPL-1.0 OR Elastic License 2.0",
   "private": "true",
   "main": "target_node/index.js",
-  "types": "target_types/index.d.ts",
   "kibana": {
     "devOnly": true
   }

packages/kbn-optimizer/limits.yml

@@ -117,3 +117,4 @@ pageLoadAssetSize:
   dataViewManagement: 5000
   reporting: 57003
   visTypeHeatmap: 25340
+  screenshotting: 17017

packages/kbn-storybook/src/lib/theme_switcher.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Icons, IconButton, TooltipLinkList, WithTooltip } from '@storybook/components';
 import { useGlobals } from '@storybook/api';
 
@@ -17,14 +17,52 @@ type Link = ArrayItem<PropsOf<typeof TooltipLinkList>['links']>;
 const defaultTheme = 'v8.light';
 
 export function ThemeSwitcher() {
-  const [globals, updateGlobals] = useGlobals();
-  const selectedTheme = globals.euiTheme;
+  const [{ euiTheme: selectedTheme }, updateGlobals] = useGlobals();
 
-  if (!selectedTheme) {
-    updateGlobals({ euiTheme: defaultTheme });
-  }
+  const selectTheme = useCallback(
+    (themeId: string) => {
+      updateGlobals({ euiTheme: themeId });
+    },
+    [updateGlobals]
+  );
 
-  function Menu({ onHide }: { onHide: () => void }) {
+  useEffect(() => {
+    if (!selectedTheme) {
+      selectTheme(defaultTheme);
+    }
+  }, [selectTheme, selectedTheme]);
+
+  return (
+    <WithTooltip
+      placement="top"
+      trigger="click"
+      closeOnClick
+      tooltip={({ onHide }) => (
+        <ThemeSwitcherTooltip
+          onHide={onHide}
+          onChangeSelectedTheme={selectTheme}
+          selectedTheme={selectedTheme}
+        />
+      )}
+    >
+      {/* @ts-ignore Remove when @storybook has moved to @emotion v11 */}
+      <IconButton key="eui-theme" title="Change the EUI theme">
+        <Icons icon={selectedTheme?.includes('dark') ? 'heart' : 'hearthollow'} />
+      </IconButton>
+    </WithTooltip>
+  );
+}
+
+const ThemeSwitcherTooltip = React.memo(
+  ({
+    onHide,
+    onChangeSelectedTheme,
+    selectedTheme,
+  }: {
+    onHide: () => void;
+    onChangeSelectedTheme: (themeId: string) => void;
+    selectedTheme: string;
+  }) => {
     const links = [
       {
         id: 'v8.light',
@@ -38,8 +76,8 @@ export function ThemeSwitcher() {
       (link): Link => ({
         ...link,
         onClick: (_event, item) => {
-          if (item.id !== selectedTheme) {
-            updateGlobals({ euiTheme: item.id });
+          if (item.id != null && item.id !== selectedTheme) {
+            onChangeSelectedTheme(item.id);
           }
           onHide();
         },
@@ -49,18 +87,4 @@ export function ThemeSwitcher() {
 
     return <TooltipLinkList links={links} />;
   }
-
-  return (
-    <WithTooltip
-      placement="top"
-      trigger="click"
-      closeOnClick
-      tooltip={({ onHide }) => <Menu onHide={onHide} />}
-    >
-      {/* @ts-ignore Remove when @storybook has moved to @emotion v11 */}
-      <IconButton key="eui-theme" title="Change the EUI theme">
-        <Icons icon={selectedTheme?.includes('dark') ? 'heart' : 'hearthollow'} />
-      </IconButton>
-    </WithTooltip>
-  );
-}
+);

src/dev/build/tasks/install_chromium.js

@@ -6,10 +6,8 @@
  * Side Public License, v 1.
  */
 
-import { first } from 'rxjs/operators';
-
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { installBrowser } from '../../../../x-pack/plugins/reporting/server/browsers/install';
+import { install } from '../../../../x-pack/plugins/screenshotting/server/utils';
 
 export const InstallChromium = {
   description: 'Installing Chromium',
@@ -22,13 +20,23 @@ export const InstallChromium = {
       // revert after https://github.com/elastic/kibana/issues/109949
       if (target === 'darwin-arm64') continue;
 
-      const { binaryPath$ } = installBrowser(
-        log,
-        build.resolvePathForPlatform(platform, 'x-pack/plugins/reporting/chromium'),
+      const logger = {
+        get: log.withType.bind(log),
+        debug: log.debug.bind(log),
+        info: log.info.bind(log),
+        warn: log.warning.bind(log),
+        trace: log.verbose.bind(log),
+        error: log.error.bind(log),
+        fatal: log.error.bind(log),
+        log: log.write.bind(log),
+      };
+
+      await install(
+        logger,
+        build.resolvePathForPlatform(platform, 'x-pack/plugins/screenshotting/chromium'),
         platform.getName(),
         platform.getArchitecture()
       );
-      await binaryPath$.pipe(first()).toPromise();
     }
   },
 };

src/dev/code_coverage/ingest_coverage/__tests__/enumerate_patterns.test.js

@@ -16,16 +16,17 @@ const log = new ToolingLog({
 });
 
 describe(`enumeratePatterns`, () => {
-  it(`should resolve x-pack/plugins/reporting/server/browsers/extract/unzip.ts to kibana-reporting`, () => {
+  it(`should resolve x-pack/plugins/screenshotting/server/browsers/extract/unzip.ts to kibana-screenshotting`, () => {
     const actual = enumeratePatterns(REPO_ROOT)(log)(
-      new Map([['x-pack/plugins/reporting', ['kibana-reporting']]])
+      new Map([['x-pack/plugins/screenshotting', ['kibana-screenshotting']]])
     );
 
-    expect(
-      actual[0].includes(
-        'x-pack/plugins/reporting/server/browsers/extract/unzip.ts kibana-reporting'
-      )
-    ).toBe(true);
+    expect(actual).toHaveProperty(
+      '0',
+      expect.arrayContaining([
+        'x-pack/plugins/screenshotting/server/browsers/extract/unzip.ts kibana-screenshotting',
+      ])
+    );
   });
   it(`should resolve src/plugins/charts/common/static/color_maps/color_maps.ts to kibana-app`, () => {
     const actual = enumeratePatterns(REPO_ROOT)(log)(

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

@@ -70,6 +70,7 @@ export const ControlFrame = ({ customPrepend, enableActions, embeddableId }: Con
       </EuiToolTip>
       <EuiToolTip content={ControlGroupStrings.floatingActions.getRemoveButtonTitle()}>
         <EuiButtonIcon
+          data-test-subj={`control-action-${embeddableId}-delete`}
           aria-label={ControlGroupStrings.floatingActions.getRemoveButtonTitle()}
           onClick={() =>
             openConfirm(ControlGroupStrings.management.deleteControls.getSubtitle(), {
@@ -131,6 +132,7 @@ export const ControlFrame = ({ customPrepend, enableActions, embeddableId }: Con
     <>
       {embeddable && enableActions && floatingActions}
       <EuiFormRow
+        data-test-subj="control-frame-title"
         fullWidth
         label={
           usingTwoLineLayout

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

@@ -129,6 +129,8 @@ export const ControlGroup = () => {
           direction="row"
           responsive={false}
           alignItems="center"
+          data-test-subj="controls-group"
+          data-shared-items-count={idsInOrder.length}
         >
           <EuiFlexItem>
             <DndContext
@@ -175,7 +177,7 @@ export const ControlGroup = () => {
                       aria-label={ControlGroupStrings.management.getManageButtonTitle()}
                       iconType="gear"
                       color="text"
-                      data-test-subj="inputControlsSortingButton"
+                      data-test-subj="controls-sorting-button"
                       onClick={() => {
                         const flyoutInstance = openFlyout(
                           forwardAllContext(
@@ -198,7 +200,7 @@ export const ControlGroup = () => {
         </EuiFlexGroup>
       ) : (
         <>
-          <EuiFlexGroup alignItems="center" gutterSize="xs">
+          <EuiFlexGroup alignItems="center" gutterSize="xs" data-test-subj="controls-empty">
             <EuiFlexItem grow={1}>
               <EuiText className="emptyStateText eui-textCenter" size="s">
                 <p>{ControlGroupStrings.emptyState.getCallToAction()}</p>

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

@@ -76,6 +76,9 @@ const SortableControlInner = forwardRef<
   return (
     <EuiFlexItem
       grow={width === 'auto'}
+      data-control-id={embeddableId}
+      data-test-subj={`control-frame`}
+      data-render-complete="true"
       className={classNames('controlFrameWrapper', {
         'controlFrameWrapper-isDragging': isDragging,
         'controlFrameWrapper--small': width === 'small',

src/plugins/presentation_util/public/components/controls/control_group/editor/control_editor.tsx

@@ -86,7 +86,7 @@ export const ControlEditor = ({
           </h2>
         </EuiTitle>
       </EuiFlyoutHeader>
-      <EuiFlyoutBody>
+      <EuiFlyoutBody data-test-subj="control-editor-flyout">
         <EuiForm>
           <EuiSpacer size="l" />
           {ControlTypeEditor && (
@@ -105,6 +105,7 @@ export const ControlEditor = ({
           )}
           <EuiFormRow label={ControlGroupStrings.manageControl.getTitleInputTitle()}>
             <EuiFieldText
+              data-test-subj="control-editor-title-input"
               placeholder={defaultTitle}
               value={currentTitle}
               onChange={(e) => {
@@ -147,6 +148,7 @@ export const ControlEditor = ({
           <EuiFlexItem grow={false}>
             <EuiButtonEmpty
               aria-label={`cancel-${title}`}
+              data-test-subj="control-editor-cancel"
               iconType="cross"
               onClick={() => {
                 onCancel();
@@ -158,6 +160,7 @@ export const ControlEditor = ({
           <EuiFlexItem grow={false}>
             <EuiButton
               aria-label={`save-${title}`}
+              data-test-subj="control-editor-save"
               iconType="check"
               color="primary"
               disabled={!controlEditorValid}