[SLO] Improve equivalent API View

x-pack/plugins/observability/public/pages/slo_edit/components/common/equivalent_api_request.tsx

@@ -0,0 +1,128 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { i18n } from '@kbn/i18n';
+
+import React, { useEffect, useState } from 'react';
+import {
+  EuiButtonEmpty,
+  EuiCodeBlock,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { useFormContext } from 'react-hook-form';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { CreateSLOInput } from '@kbn/slo-schema';
+import { CreateSLOForm } from '../../types';
+import { transformCreateSLOFormToCreateSLOInput } from '../../helpers/process_slo_form_values';
+
+export function EquivalentApiRequest({
+  isCreateSloLoading,
+  isUpdateSloLoading,
+}: {
+  isCreateSloLoading: boolean;
+  isUpdateSloLoading: boolean;
+}) {
+  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+
+  const { getValues, trigger } = useFormContext<CreateSLOForm>();
+
+  const [sloData, setSloData] = useState<CreateSLOInput>();
+
+  useEffect(() => {
+    if (!isFlyoutVisible) {
+      return;
+    }
+    trigger().then((isValid) => {
+      if (isValid) {
+        setSloData(transformCreateSLOFormToCreateSLOInput(getValues()));
+      }
+    });
+  }, [getValues, trigger, isFlyoutVisible]);
+
+  let flyout;
+
+  if (isFlyoutVisible) {
+    flyout = (
+      <EuiFlyout ownFocus onClose={() => setIsFlyoutVisible(false)}>
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="m">
+            <h2>
+              {i18n.translate(
+                'xpack.observability.equivalentApiRequest.h2.equivalentAPIRequestToLabel',
+                { defaultMessage: 'Equivalent API request' }
+              )}
+            </h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <EuiText>
+            <FormattedMessage
+              id="xpack.observability.equivalentApiRequest.p.useTheRESTAPILabel"
+              defaultMessage="Use the REST API"
+            />
+          </EuiText>
+          <EuiSpacer size="s" />
+          <EuiCodeBlock language="javascript" isCopyable paddingSize="s">
+            {'POST /api/observability/slos'}
+          </EuiCodeBlock>
+          <EuiSpacer size="s" />
+          <EuiText>
+            <FormattedMessage
+              id="xpack.observability.equivalentApiRequest.p.withTheFollowingBodyLabel"
+              defaultMessage="with the following body:"
+            />
+          </EuiText>
+          {sloData ? (
+            <EuiCodeBlock language="json" isCopyable paddingSize="s">
+              {JSON.stringify(sloData, null, 2)}
+            </EuiCodeBlock>
+          ) : (
+            <EuiCodeBlock language="javascript" isCopyable paddingSize="s">
+              {i18n.translate(
+                'xpack.observability.equivalentApiRequest.formIsNotValidCodeBlockLabel',
+                { defaultMessage: 'Form is not valid' }
+              )}
+            </EuiCodeBlock>
+          )}
+        </EuiFlyoutBody>
+        <EuiFlyoutFooter>
+          <EuiButtonEmpty
+            data-test-subj="o11yEquivalentApiRequestCloseButton"
+            iconType="cross"
+            onClick={() => setIsFlyoutVisible(false)}
+            flush="left"
+          >
+            {i18n.translate('xpack.observability.equivalentApiRequest.closeButtonEmptyLabel', {
+              defaultMessage: 'Close',
+            })}
+          </EuiButtonEmpty>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    );
+  }
+  return (
+    <>
+      <EuiButtonEmpty
+        color="primary"
+        iconType="copyClipboard"
+        data-test-subj="sloFormCopyJsonButton"
+        disabled={isCreateSloLoading || isUpdateSloLoading}
+        onClick={() => setIsFlyoutVisible(true)}
+      >
+        {i18n.translate('xpack.observability.slo.sloEdit.equivalentApiRequest', {
+          defaultMessage: 'Equivalent API request',
+        })}
+      </EuiButtonEmpty>
+      {flyout}
+    </>
+  );
+}

x-pack/plugins/observability/public/pages/slo_edit/components/slo_edit_form.tsx

@@ -18,6 +18,7 @@ import { i18n } from '@kbn/i18n';
 import type { GetSLOResponse } from '@kbn/slo-schema';
 import React, { useCallback, useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
+import { EquivalentApiRequest } from './common/equivalent_api_request';
 import { BurnRateRuleFlyout } from '../../slos/components/common/burn_rate_rule_flyout';
 import { paths } from '../../../../common/locators/paths';
 import { useCreateSlo } from '../../../hooks/slo/use_create_slo';
@@ -34,7 +35,6 @@ import {
   CREATE_RULE_SEARCH_PARAM,
   useAddRuleFlyoutState,
 } from '../hooks/use_add_rule_flyout_state';
-import { useCopyToJson } from '../hooks/use_copy_to_json';
 import { useParseUrlState } from '../hooks/use_parse_url_state';
 import { useSectionFormValidation } from '../hooks/use_section_form_validation';
 import { useShowSections } from '../hooks/use_show_sections';
@@ -78,7 +78,6 @@ export function SloEditForm({ slo }: Props) {
     mode: 'all',
   });
   const { watch, getFieldState, getValues, formState, trigger } = methods;
-  const handleCopyToJson = useCopyToJson({ trigger, getValues });
 
   const { isIndicatorSectionValid, isObjectiveSectionValid, isDescriptionSectionValid } =
     useSectionFormValidation({
@@ -235,17 +234,10 @@ export function SloEditForm({ slo }: Props) {
               })}
             </EuiButtonEmpty>
 
-            <EuiButtonEmpty
-              color="primary"
-              iconType="copyClipboard"
-              data-test-subj="sloFormCopyJsonButton"
-              disabled={isCreateSloLoading || isUpdateSloLoading}
-              onClick={handleCopyToJson}
-            >
-              {i18n.translate('xpack.observability.slo.sloEdit.copyJsonButton', {
-                defaultMessage: 'Copy JSON',
-              })}
-            </EuiButtonEmpty>
+            <EquivalentApiRequest
+              isCreateSloLoading={isCreateSloLoading}
+              isUpdateSloLoading={isUpdateSloLoading}
+            />
           </EuiFlexGroup>
         </EuiFlexGroup>
       </FormProvider>

x-pack/plugins/translations/translations/fr-FR.json

@@ -29269,9 +29269,6 @@
     "xpack.observability.slo.sloEdit.calendarTimeWindow.monthly": "Mensuel",
     "xpack.observability.slo.sloEdit.calendarTimeWindow.weekly": "Hebdomadaire",
     "xpack.observability.slo.sloEdit.cancelButton": "Annuler",
-    "xpack.observability.slo.sloEdit.copyJsonButton": "Copier le JSON",
-    "xpack.observability.slo.sloEdit.copyJsonFailedNotification": "Échec de la copie du JSON dans le presse-papiers",
-    "xpack.observability.slo.sloEdit.copyJsonNotification": "JSON copié dans le presse-papiers",
     "xpack.observability.slo.sloEdit.createAlert.ruleName": "Règle d'alerte de taux d'avancement du SLO",
     "xpack.observability.slo.sloEdit.createAlert.title": "Créer",
     "xpack.observability.slo.sloEdit.createSloButton": "Créer un SLO",

x-pack/plugins/translations/translations/ja-JP.json

@@ -29269,9 +29269,6 @@
     "xpack.observability.slo.sloEdit.calendarTimeWindow.monthly": "月ごと",
     "xpack.observability.slo.sloEdit.calendarTimeWindow.weekly": "週ごと",
     "xpack.observability.slo.sloEdit.cancelButton": "キャンセル",
-    "xpack.observability.slo.sloEdit.copyJsonButton": "JSONをコピー",
-    "xpack.observability.slo.sloEdit.copyJsonFailedNotification": "JSONをクリップボードにコピーできませんでした",
-    "xpack.observability.slo.sloEdit.copyJsonNotification": "JSONがクリップボードにコピーされました",
     "xpack.observability.slo.sloEdit.createAlert.ruleName": "SLOバーンレートアラートルール",
     "xpack.observability.slo.sloEdit.createAlert.title": "作成",
     "xpack.observability.slo.sloEdit.createSloButton": "SLOの作成",

x-pack/plugins/translations/translations/zh-CN.json

@@ -29266,9 +29266,6 @@
     "xpack.observability.slo.sloEdit.calendarTimeWindow.monthly": "每月",
     "xpack.observability.slo.sloEdit.calendarTimeWindow.weekly": "每周",
     "xpack.observability.slo.sloEdit.cancelButton": "取消",
-    "xpack.observability.slo.sloEdit.copyJsonButton": "复制 JSON",
-    "xpack.observability.slo.sloEdit.copyJsonFailedNotification": "无法将 JSON 复制到剪贴板",
-    "xpack.observability.slo.sloEdit.copyJsonNotification": "JSON 已复制到剪贴板",
     "xpack.observability.slo.sloEdit.createAlert.ruleName": "SLO 消耗速度告警规则",
     "xpack.observability.slo.sloEdit.createAlert.title": "创建",
     "xpack.observability.slo.sloEdit.createSloButton": "创建 SLO",