[Console] Add support to remotely open Embeddable Console (elastic#17…

…6017)

## Summary

Updated the embeddable console and console start to allow triggering the
Console open from the ConsolePluginStart object with or without specific
content to be pre-loaded.

### Checklist

- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

packages/kbn-search-api-panels/components/code_box.tsx

@@ -23,6 +23,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { ApplicationStart } from '@kbn/core-application-browser';
+import type { ConsolePluginStart } from '@kbn/console-plugin/public';
 import type { SharePluginStart } from '@kbn/share-plugin/public';
 
 import { LanguageDefinition } from '../types';
@@ -38,13 +39,15 @@ interface CodeBoxProps {
   setSelectedLanguage: (language: LanguageDefinition) => void;
   assetBasePath: string;
   application?: ApplicationStart;
+  consolePlugin?: ConsolePluginStart;
   sharePlugin: SharePluginStart;
   consoleRequest?: string;
 }
 
 export const CodeBox: React.FC<CodeBoxProps> = ({
   application,
   codeSnippet,
+  consolePlugin,
   languageType,
   languages,
   assetBasePath,
@@ -117,6 +120,7 @@ export const CodeBox: React.FC<CodeBoxProps> = ({
               <TryInConsoleButton
                 request={consoleRequest}
                 application={application}
+                consolePlugin={consolePlugin}
                 sharePlugin={sharePlugin}
               />
             </EuiFlexItem>

packages/kbn-search-api-panels/components/ingest_data.tsx

@@ -11,6 +11,7 @@ import React from 'react';
 import { EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { ApplicationStart } from '@kbn/core-application-browser';
+import type { ConsolePluginStart } from '@kbn/console-plugin/public';
 import type { SharePluginStart } from '@kbn/share-plugin/public';
 import { CodeBox } from './code_box';
 import { LanguageDefinition } from '../types';
@@ -26,6 +27,7 @@ interface IngestDataProps {
   };
   assetBasePath: string;
   application?: ApplicationStart;
+  consolePlugin?: ConsolePluginStart;
   sharePlugin: SharePluginStart;
   languages: LanguageDefinition[];
   consoleRequest?: string;
@@ -39,6 +41,7 @@ export const IngestData: React.FC<IngestDataProps> = ({
   docLinks,
   assetBasePath,
   application,
+  consolePlugin,
   sharePlugin,
   languages,
   consoleRequest,
@@ -58,6 +61,7 @@ export const IngestData: React.FC<IngestDataProps> = ({
           setSelectedLanguage={setSelectedLanguage}
           assetBasePath={assetBasePath}
           application={application}
+          consolePlugin={consolePlugin}
           sharePlugin={sharePlugin}
         />
       }

packages/kbn-search-api-panels/components/try_in_console_button.tsx

@@ -11,18 +11,21 @@ import React from 'react';
 import { EuiButtonEmpty } from '@elastic/eui';
 import type { ApplicationStart } from '@kbn/core-application-browser';
 import type { SharePluginStart } from '@kbn/share-plugin/public';
+import type { ConsolePluginStart } from '@kbn/console-plugin/public';
 
 import { FormattedMessage } from '@kbn/i18n-react';
 import { compressToEncodedURIComponent } from 'lz-string';
 
 export interface TryInConsoleButtonProps {
   request: string;
   application?: ApplicationStart;
+  consolePlugin?: ConsolePluginStart;
   sharePlugin: SharePluginStart;
 }
 export const TryInConsoleButton = ({
   request,
   application,
+  consolePlugin,
   sharePlugin,
 }: TryInConsoleButtonProps) => {
   const { url } = sharePlugin;
@@ -39,8 +42,20 @@ export const TryInConsoleButton = ({
   );
   if (!consolePreviewLink) return null;
 
+  const onClick = () => {
+    const embeddedConsoleAvailable =
+      (consolePlugin?.openEmbeddedConsole !== undefined &&
+        consolePlugin?.isEmbeddedConsoleAvailable?.()) ??
+      false;
+    if (embeddedConsoleAvailable) {
+      consolePlugin!.openEmbeddedConsole!(request);
+    } else {
+      window.open(consolePreviewLink, '_blank', 'noreferrer');
+    }
+  };
+
   return (
-    <EuiButtonEmpty href={consolePreviewLink} iconType="popout" target="_blank" size="s">
+    <EuiButtonEmpty onClick={onClick} iconType="popout" size="s">
       <FormattedMessage
         id="searchApiPanels.welcomeBanner.tryInConsoleButton"
         defaultMessage="Try in Console"

packages/kbn-search-api-panels/tsconfig.json

@@ -21,6 +21,7 @@
     "@kbn/core-application-browser",
     "@kbn/share-plugin",
     "@kbn/i18n-react",
-    "@kbn/security-plugin"
+    "@kbn/security-plugin",
+    "@kbn/console-plugin"
   ]
 }

src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx

@@ -108,7 +108,7 @@ function EditorUI({ initialTextValue, setEditorInstance }: EditorProps) {
     }
 
     const readQueryParams = () => {
-      const [, queryString] = (window.location.hash || '').split('?');
+      const [, queryString] = (window.location.hash || window.location.search || '').split('?');
 
       return parse(queryString || '', { sort: false }) as Required<QueryParams>;
     };

src/plugins/console/public/application/containers/embeddable/console_wrapper.tsx

@@ -14,8 +14,10 @@ import {
   I18nStart,
   CoreTheme,
   DocLinksStart,
+  CoreStart,
 } from '@kbn/core/public';
 import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
+import { UsageCollectionStart } from '@kbn/usage-collection-plugin/public';
 
 import { ObjectStorageClient } from '../../../../common/types';
 
@@ -62,10 +64,10 @@ interface ConsoleDependencies {
   trackUiMetric: MetricsTracker;
 }
 
-const loadDependencies = async ({
-  core,
-  usageCollection,
-}: EmbeddableConsoleDependencies): Promise<ConsoleDependencies> => {
+const loadDependencies = async (
+  core: CoreStart,
+  usageCollection?: UsageCollectionStart
+): Promise<ConsoleDependencies> => {
   const {
     docLinks: { DOC_LINK_VERSION, links },
     http,
@@ -107,10 +109,12 @@ const loadDependencies = async ({
   };
 };
 
-export const ConsoleWrapper = (props: EmbeddableConsoleDependencies): React.ReactElement => {
+type ConsoleWrapperProps = Omit<EmbeddableConsoleDependencies, 'setDispatch'>;
+
+export const ConsoleWrapper: React.FunctionComponent<ConsoleWrapperProps> = (props) => {
   const [dependencies, setDependencies] = useState<ConsoleDependencies | null>(null);
   useEffect(() => {
-    loadDependencies(props).then(setDependencies);
+    loadDependencies(props.core, props.usageCollection).then(setDependencies);
   }, [setDependencies, props]);
   useEffect(() => {
     return () => {

src/plugins/console/public/application/containers/embeddable/embeddable_console.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useState } from 'react';
+import React, { useReducer, useEffect } from 'react';
 import classNames from 'classnames';
 import useObservable from 'react-use/lib/useObservable';
 import {
@@ -25,6 +25,9 @@ import {
   EmbeddableConsoleDependencies,
 } from '../../../types/embeddable_console';
 
+import * as store from '../../stores/embeddable_console';
+import { setLoadFromParameter, removeLoadFromParameter } from '../../lib/load_from';
+
 import { ConsoleWrapper } from './console_wrapper';
 import './_index.scss';
 
@@ -36,10 +39,31 @@ export const EmbeddableConsole = ({
   size = 'm',
   core,
   usageCollection,
+  setDispatch,
 }: EmbeddableConsoleProps & EmbeddableConsoleDependencies) => {
-  const [isConsoleOpen, setIsConsoleOpen] = useState<boolean>(false);
-  const toggleConsole = () => setIsConsoleOpen(!isConsoleOpen);
+  const [consoleState, consoleDispatch] = useReducer(
+    store.reducer,
+    store.initialValue,
+    (value) => ({ ...value })
+  );
   const chromeStyle = useObservable(core.chrome.getChromeStyle$());
+  useEffect(() => {
+    setDispatch(consoleDispatch);
+    return () => setDispatch(null);
+  }, [setDispatch, consoleDispatch]);
+  useEffect(() => {
+    if (consoleState.isOpen && consoleState.loadFromContent) {
+      setLoadFromParameter(consoleState.loadFromContent);
+    } else if (!consoleState.isOpen) {
+      removeLoadFromParameter();
+    }
+  }, [consoleState.isOpen, consoleState.loadFromContent]);
+
+  const isConsoleOpen = consoleState.isOpen;
+  const setIsConsoleOpen = (value: boolean) => {
+    consoleDispatch(value ? { type: 'open' } : { type: 'close' });
+  };
+  const toggleConsole = () => setIsConsoleOpen(!isConsoleOpen);
 
   const onKeyDown = (event: any) => {
     if (event.key === keys.ESCAPE) {