Add request flyouts to JSON watch form and Threshold Watch edit form.

x-pack/legacy/plugins/watcher/public/sections/watch_edit/components/json_watch_edit/json_watch_edit_form.tsx

@@ -25,6 +25,7 @@ import { putWatchApiUrl } from '../../../../lib/documentation_links';
 import { onWatchSave } from '../../watch_edit_actions';
 import { WatchContext } from '../../watch_context';
 import { goToWatchList } from '../../../../lib/navigation';
+import { RequestFlyout } from '../request_flyout';
 
 export const JsonWatchEditForm = () => {
   const { watch, setWatchProperty } = useContext(WatchContext);
@@ -33,6 +34,7 @@ export const JsonWatchEditForm = () => {
   const hasErrors = !!Object.keys(errors).find(errorKey => errors[errorKey].length >= 1);
 
   const [validationError, setValidationError] = useState<string | null>(null);
+  const [isRequestVisible, setIsRequestVisible] = useState<boolean>(false);
 
   const [serverError, setServerError] = useState<{
     data: { nessage: string; error: string };
@@ -169,54 +171,78 @@ export const JsonWatchEditForm = () => {
             }}
           />
         </ErrableFormRow>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              data-test-subj="saveWatchButton"
-              fill
-              color="secondary"
-              type="submit"
-              iconType="check"
-              isLoading={isSaving}
-              isDisabled={hasErrors}
-              onClick={async () => {
-                setIsSaving(true);
-                const savedWatch = await onWatchSave(watch);
-                if (savedWatch && savedWatch.error) {
-                  const { data } = savedWatch.error;
-
-                  setIsSaving(false);
-
-                  if (data && data.error === 'validation') {
-                    return setValidationError(data.message);
+
+        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+          <EuiFlexGroup gutterSize="m" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                data-test-subj="saveWatchButton"
+                fill
+                color="secondary"
+                type="submit"
+                iconType="check"
+                isLoading={isSaving}
+                isDisabled={hasErrors}
+                onClick={async () => {
+                  setIsSaving(true);
+                  const savedWatch = await onWatchSave(watch);
+                  if (savedWatch && savedWatch.error) {
+                    const { data } = savedWatch.error;
+
+                    setIsSaving(false);
+
+                    if (data && data.error === 'validation') {
+                      return setValidationError(data.message);
+                    }
+
+                    return setServerError(savedWatch.error);
                   }
+                }}
+              >
+                {watch.isNew ? (
+                  <FormattedMessage
+                    id="xpack.watcher.sections.watchEdit.json.createButtonLabel"
+                    defaultMessage="Create watch"
+                  />
+                ) : (
+                  <FormattedMessage
+                    id="xpack.watcher.sections.watchEdit.json.saveButtonLabel"
+                    defaultMessage="Save watch"
+                  />
+                )}
+              </EuiButton>
+            </EuiFlexItem>
 
-                  return setServerError(savedWatch.error);
-                }
-              }}
-            >
-              {watch.isNew ? (
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty data-test-subj="btnCancelWatch" onClick={() => goToWatchList()}>
+                {i18n.translate('xpack.watcher.sections.watchEdit.json.cancelButtonLabel', {
+                  defaultMessage: 'Cancel',
+                })}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty onClick={() => setIsRequestVisible(!isRequestVisible)}>
+              {isRequestVisible ? (
                 <FormattedMessage
-                  id="xpack.watcher.sections.watchEdit.json.createButtonLabel"
-                  defaultMessage="Create watch"
+                  id="xpack.watcher.sections.watchEdit.json.hideRequestButtonLabel"
+                  defaultMessage="Hide request"
                 />
               ) : (
                 <FormattedMessage
-                  id="xpack.watcher.sections.watchEdit.json.saveButtonLabel"
-                  defaultMessage="Save watch"
+                  id="xpack.watcher.sections.watchEdit.json.showRequestButtonLabel"
+                  defaultMessage="Show request"
                 />
               )}
-            </EuiButton>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty data-test-subj="btnCancelWatch" onClick={() => goToWatchList()}>
-              {i18n.translate('xpack.watcher.sections.watchEdit.json.cancelButtonLabel', {
-                defaultMessage: 'Cancel',
-              })}
             </EuiButtonEmpty>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiForm>
+
+      {isRequestVisible ? (
+        <RequestFlyout watch={watch} close={() => setIsRequestVisible(false)} />
+      ) : null}
     </Fragment>
   );
 };

x-pack/legacy/plugins/watcher/public/sections/watch_edit/components/request_flyout.tsx

@@ -0,0 +1,83 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { PureComponent } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import {
+  EuiButtonEmpty,
+  EuiCodeBlock,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+
+interface Props {
+  close: any;
+  watch: any;
+}
+
+export class RequestFlyout extends PureComponent<Props> {
+  render() {
+    const { watch, close } = this.props;
+    const { id, watchString } = watch;
+    const endpoint = `PUT _watcher/watch/${id || '<watchId>'}`;
+    const request = `${endpoint}\n${watchString}`;
+
+    return (
+      <EuiFlyout maxWidth={480} onClose={close}>
+        <EuiFlyoutHeader>
+          <EuiTitle>
+            <h2>
+              {id ? (
+                <FormattedMessage
+                  id="xpack.watcher.requestFlyout.namedTitle"
+                  defaultMessage="Request for '{id}'"
+                  values={{ id }}
+                />
+              ) : (
+                <FormattedMessage
+                  id="xpack.watcher.requestFlyout.unnamedTitle"
+                  defaultMessage="Request"
+                />
+              )}
+            </h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+
+        <EuiFlyoutBody>
+          <EuiText>
+            <p>
+              <FormattedMessage
+                id="xpack.watcher.requestFlyout.descriptionText"
+                defaultMessage="This Elasticsearch request will create or update this watch."
+              />
+            </p>
+          </EuiText>
+
+          <EuiSpacer />
+
+          <EuiCodeBlock language="json" isCopyable>
+            {request}
+          </EuiCodeBlock>
+        </EuiFlyoutBody>
+
+        <EuiFlyoutFooter>
+          <EuiButtonEmpty iconType="cross" onClick={close} flush="left">
+            <FormattedMessage
+              id="xpack.watcher.requestFlyout.closeButtonLabel"
+              defaultMessage="Close"
+            />
+          </EuiButtonEmpty>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    );
+  }
+}