fix: update vector search snippets to use try in console button

elastic · Mar 11, 2024 · 954828a · 954828a
1 parent f3f2315
commit 954828a
Showing 1 changed file with 30 additions and 36 deletions.
diff --git a/...ns/vector_search/components/dev_tools_console_code_block/dev_tools_console_code_block.tsx b/...ns/vector_search/components/dev_tools_console_code_block/dev_tools_console_code_block.tsx
@@ -8,19 +8,20 @@
 import React from 'react';
 
 import { useValues } from 'kea';
-import { compressToEncodedURIComponent } from 'lz-string';
 
 import {
   EuiButtonEmpty,
   EuiCodeBlock,
   EuiCodeBlockProps,
   EuiCopy,
   EuiFlexGroup,
+  EuiFlexItem,
   EuiHorizontalRule,
   EuiPanel,
   EuiThemeProvider,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { TryInConsoleButton } from '@kbn/search-api-panels';
 
 import { KibanaLogic } from '../../../shared/kibana';
 
@@ -32,49 +33,42 @@ export const DevToolsConsoleCodeBlock: React.FC<DevToolsConsoleCodeBlockProps> =
   children,
   ...props
 }) => {
-  const {
-    application,
-    share: { url },
-  } = useValues(KibanaLogic);
+  const { application, consolePlugin, share } = useValues(KibanaLogic);
 
-  const consolePreviewLink =
-    !!application?.capabilities?.dev_tools?.show &&
-    url.locators
-      .get('CONSOLE_APP_LOCATOR')
-      ?.useUrl(
-        { loadFrom: `data:text/plain,${compressToEncodedURIComponent(children)}` },
-        undefined,
-        []
-      );
+  const showConsoleLink = !!application?.capabilities?.dev_tools?.show;
 
   return (
     <EuiThemeProvider colorMode="dark">
       <EuiPanel hasShadow={false}>
         <EuiFlexGroup direction="column" gutterSize="xs">
-          <EuiFlexGroup direction="rowReverse" gutterSize="s">
-            {consolePreviewLink && (
-              <EuiButtonEmpty
-                iconType="popout"
-                color="success"
-                href={consolePreviewLink}
-                target="_blank"
-              >
-                <FormattedMessage
-                  id="xpack.enterpriseSearch.component.devToolsConsoleCodeBlock.tryInConsole"
-                  defaultMessage="Try in Console"
+          <EuiFlexGroup
+            direction="rowReverse"
+            gutterSize="s"
+            alignItems="center"
+            responsive={false}
+          >
+            {showConsoleLink && (
+              <EuiFlexItem grow={false}>
+                <TryInConsoleButton
+                  request={children}
+                  application={application}
+                  consolePlugin={consolePlugin}
+                  sharePlugin={share}
                 />
-              </EuiButtonEmpty>
+              </EuiFlexItem>
             )}
-            <EuiCopy textToCopy={children}>
-              {(copy) => (
-                <EuiButtonEmpty iconType="copyClipboard" onClick={copy} color="text">
-                  <FormattedMessage
-                    id="xpack.enterpriseSearch.component.devToolsConsoleCodeBlock.copy"
-                    defaultMessage="Copy"
-                  />
-                </EuiButtonEmpty>
-              )}
-            </EuiCopy>
+            <EuiFlexItem grow={false}>
+              <EuiCopy textToCopy={children}>
+                {(copy) => (
+                  <EuiButtonEmpty color="text" iconType="copyClipboard" size="s" onClick={copy}>
+                    <FormattedMessage
+                      id="xpack.enterpriseSearch.component.devToolsConsoleCodeBlock.copy"
+                      defaultMessage="Copy"
+                    />
+                  </EuiButtonEmpty>
+                )}
+              </EuiCopy>
+            </EuiFlexItem>
           </EuiFlexGroup>
           <EuiHorizontalRule margin="xs" />
           <EuiCodeBlock