[Search] fix: update vector search snippets to use try in console but…

…ton (#178402) ## Summary Updating the Vector Search page to use the shared Try In Console button, and then fixing the layout issues from using it. This ensures that the code snippets can be used in the Persistent console instead of opening a new tab. ![image](https://github.com/elastic/kibana/assets/1972968/6be12953-060f-47b6-a7b8-30896a35e112)
elastic · Mar 11, 2024 · 714796b · 714796b
1 parent f29fc9a
commit 714796b
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 39 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

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -13855,7 +13855,6 @@
     "xpack.enterpriseSearch.betaConnectorCalloutTitle": "Connecteur en version bêta",
     "xpack.enterpriseSearch.betaLabel": "Bêta",
     "xpack.enterpriseSearch.component.devToolsConsoleCodeBlock.copy": "Copier",
-    "xpack.enterpriseSearch.component.devToolsConsoleCodeBlock.tryInConsole": "Essayer dans la console",
     "xpack.enterpriseSearch.connector.connectorTypePanel.title": "Type de connecteur",
     "xpack.enterpriseSearch.connector.connectorTypePanel.unknown.label": "Inconnu",
     "xpack.enterpriseSearch.connector.ingestionStatus.title": "Statut de l'ingestion",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -13868,7 +13868,6 @@
     "xpack.enterpriseSearch.betaConnectorCalloutTitle": "ベータ版コネクター",
     "xpack.enterpriseSearch.betaLabel": "ベータ",
     "xpack.enterpriseSearch.component.devToolsConsoleCodeBlock.copy": "コピー",
-    "xpack.enterpriseSearch.component.devToolsConsoleCodeBlock.tryInConsole": "コンソールで試す",
     "xpack.enterpriseSearch.connector.connectorTypePanel.title": "コネクタータイプ",
     "xpack.enterpriseSearch.connector.connectorTypePanel.unknown.label": "不明",
     "xpack.enterpriseSearch.connector.ingestionStatus.title": "インジェスチョンステータス",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -13962,7 +13962,6 @@
     "xpack.enterpriseSearch.betaConnectorCalloutTitle": "公测版连接器",
     "xpack.enterpriseSearch.betaLabel": "公测版",
     "xpack.enterpriseSearch.component.devToolsConsoleCodeBlock.copy": "复制",
-    "xpack.enterpriseSearch.component.devToolsConsoleCodeBlock.tryInConsole": "在 Console 中试用",
     "xpack.enterpriseSearch.connector.connectorTypePanel.title": "连接器类型",
     "xpack.enterpriseSearch.connector.connectorTypePanel.unknown.label": "未知",
     "xpack.enterpriseSearch.connector.ingestionStatus.title": "采集状态",