View request flyout

src/plugins/es_ui_shared/public/components/view_api_request_flyout/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { ViewApiRequestFlyout } from './view_api_request_flyout';

src/plugins/es_ui_shared/public/components/view_api_request_flyout/view_api_request_flyout.test.tsx

@@ -0,0 +1,77 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mountWithI18nProvider } from '@kbn/test-jest-helpers';
+import { findTestSubject, takeMountedSnapshot } from '@elastic/eui/lib/test';
+import { compressToEncodedURIComponent } from 'lz-string';
+
+import { ViewApiRequestFlyout } from './view_api_request_flyout';
+import type { UrlService } from 'src/plugins/share/common/url_service';
+
+const payload = {
+  title: 'Test title',
+  description: 'Test description',
+  request: 'Hello world',
+  closeFlyout: jest.fn(),
+};
+
+const urlService = {
+  locators: {
+    get: jest.fn().mockReturnValue({
+      useUrl: jest.fn().mockImplementation((value) => {
+        return `devToolsUrl_${value?.loadFrom}`;
+      }),
+    }),
+  },
+} as any as UrlService;
+
+describe('ViewApiRequestFlyout', () => {
+  test('is rendered', () => {
+    const component = mountWithI18nProvider(<ViewApiRequestFlyout {...payload} />);
+    expect(takeMountedSnapshot(component)).toMatchSnapshot();
+  });
+
+  describe('props', () => {
+    test('on closeFlyout', async () => {
+      const component = mountWithI18nProvider(<ViewApiRequestFlyout {...payload} />);
+
+      await act(async () => {
+        findTestSubject(component, 'apiRequestFlyoutClose').simulate('click');
+      });
+
+      expect(payload.closeFlyout).toBeCalled();
+    });
+
+    test('doesnt have openInConsole when some optional props are not supplied', async () => {
+      const component = mountWithI18nProvider(
+        <ViewApiRequestFlyout {...payload} canShowDevtools />
+      );
+
+      const openInConsole = findTestSubject(component, 'apiRequestFlyoutOpenInConsoleButton');
+      expect(openInConsole.length).toEqual(0);
+    });
+
+    test('has openInConsole when all optional props are supplied', async () => {
+      const encodedRequest = compressToEncodedURIComponent(payload.request);
+      const component = mountWithI18nProvider(
+        <ViewApiRequestFlyout
+          {...payload}
+          canShowDevtools
+          navigateToUrl={jest.fn()}
+          urlService={urlService}
+        />
+      );
+
+      const openInConsole = findTestSubject(component, 'apiRequestFlyoutOpenInConsoleButton');
+      expect(openInConsole.length).toEqual(1);
+      expect(openInConsole.props().href).toEqual(`devToolsUrl_data:text/plain,${encodedRequest}`);
+    });
+  });
+});

src/plugins/es_ui_shared/public/components/view_api_request_flyout/view_api_request_flyout.tsx

@@ -0,0 +1,150 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+// We want to allow both right-clicking to open in a new tab and clicking through
+// the "Open in Console" link. We could use `RedirectAppLinks` at the top level
+// but that inserts a div which messes up the layout of the flyout.
+/* eslint-disable @elastic/eui/href-or-on-click */
+
+import React, { useCallback } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { compressToEncodedURIComponent } from 'lz-string';
+
+import {
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiTitle,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiButtonEmpty,
+  EuiText,
+  EuiSpacer,
+  EuiCodeBlock,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiCopy,
+} from '@elastic/eui';
+import { ApplicationStart } from 'src/core/public';
+import type { UrlService } from 'src/plugins/share/common/url_service';
+
+interface ViewApiRequestFlyoutProps {
+  title: string;
+  description: string;
+  request: string;
+  closeFlyout: () => void;
+  navigateToUrl?: ApplicationStart['navigateToUrl'];
+  urlService?: UrlService;
+  canShowDevtools?: boolean;
+}
+
+export const ViewApiRequestFlyout: React.FunctionComponent<ViewApiRequestFlyoutProps> = ({
+  title,
+  description,
+  request,
+  closeFlyout,
+  navigateToUrl,
+  urlService,
+  canShowDevtools,
+}) => {
+  const getUrlParams = undefined;
+  const devToolsDataUri = compressToEncodedURIComponent(request);
+
+  // Generate a console preview link if we have a valid locator
+  const consolePreviewLink = urlService?.locators.get('CONSOLE_APP_LOCATOR')?.useUrl(
+    {
+      loadFrom: `data:text/plain,${devToolsDataUri}`,
+    },
+    getUrlParams,
+    [request]
+  );
+
+  const consolePreviewClick = useCallback(
+    () => consolePreviewLink && navigateToUrl && navigateToUrl(consolePreviewLink),
+    [consolePreviewLink, navigateToUrl]
+  );
+
+  // Check if both the Dev Tools UI and the Console UI are enabled.
+  const shouldShowDevToolsLink = canShowDevtools && consolePreviewLink !== undefined;
+
+  return (
+    <EuiFlyout maxWidth={480} onClose={closeFlyout} data-test-subj="apiRequestFlyout">
+      <EuiFlyoutHeader>
+        <EuiTitle>
+          <h2 data-test-subj="apiRequestFlyoutTitle">{title}</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+
+      <EuiFlyoutBody>
+        <EuiText>
+          <p data-test-subj="apiRequestFlyoutDescription">{description}</p>
+        </EuiText>
+        <EuiSpacer />
+
+        <EuiFlexGroup
+          direction="column"
+          gutterSize="s"
+          wrap={false}
+          responsive={false}
+          className="insRequestCodeViewer"
+        >
+          <EuiFlexItem grow={false}>
+            <EuiSpacer size="s" />
+            <div className="eui-textRight">
+              <EuiCopy textToCopy={request}>
+                {(copy) => (
+                  <EuiButtonEmpty
+                    size="xs"
+                    flush="right"
+                    iconType="copyClipboard"
+                    onClick={copy}
+                    data-test-subj="apiRequestFlyoutCopyClipboardButton"
+                  >
+                    <FormattedMessage
+                      id="esUi.viewApiRequest.copyToClipboardButton"
+                      defaultMessage="Copy to clipboard"
+                    />
+                  </EuiButtonEmpty>
+                )}
+              </EuiCopy>
+              {shouldShowDevToolsLink && (
+                <EuiButtonEmpty
+                  size="xs"
+                  flush="right"
+                  iconType="wrench"
+                  href={consolePreviewLink}
+                  onClick={consolePreviewClick}
+                  data-test-subj="apiRequestFlyoutOpenInConsoleButton"
+                >
+                  <FormattedMessage
+                    id="esUi.viewApiRequest.openInConsoleButton"
+                    defaultMessage="Open in Console"
+                  />
+                </EuiButtonEmpty>
+              )}
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem grow={true}>
+            <EuiCodeBlock language="json" data-test-subj="apiRequestFlyoutBody">
+              {request}
+            </EuiCodeBlock>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutBody>
+
+      <EuiFlyoutFooter>
+        <EuiButtonEmpty
+          iconType="cross"
+          onClick={closeFlyout}
+          flush="left"
+          data-test-subj="apiRequestFlyoutClose"
+        >
+          <FormattedMessage id="esUi.viewApiRequest.closeButtonLabel" defaultMessage="Close" />
+        </EuiButtonEmpty>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+};

src/plugins/es_ui_shared/public/index.ts

@@ -25,6 +25,7 @@ export type { EuiCodeEditorProps } from './components/code_editor';
 export { EuiCodeEditor } from './components/code_editor';
 export type { Frequency } from './components/cron_editor';
 export { CronEditor } from './components/cron_editor';
+export { ViewApiRequestFlyout } from './components/view_api_request_flyout';
 
 export type {
   SendRequestConfig,

x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts

@@ -61,8 +61,8 @@ export type PipelineFormTestSubjects =
   | 'onFailureEditor'
   | 'testPipelineButton'
   | 'showRequestLink'
-  | 'requestFlyout'
-  | 'requestFlyout.title'
+  | 'apiRequestFlyout'
+  | 'apiRequestFlyout.apiRequestFlyoutTitle'
   | 'testPipelineFlyout'
   | 'testPipelineFlyout.title'
   | 'documentationLink';