Show endpoint in JSON preview of index lifecycle policy editor. (#42791) (#42896)

* Reduce tabs from 4 to 2.
* Increase flyout width to 480px and remove overlay.
* Show line numbers.
* Use EuiCopy component.
* Add description text.
* Update title and endpoint when there is no name specified.

Author: cjcenizal

x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/policy_json_flyout.js

@@ -9,16 +9,18 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import PropTypes from 'prop-types';
 import { toastNotifications } from 'ui/notify';
-import copy from 'copy-to-clipboard';
 
 import {
   EuiButton,
-  EuiCodeBlock,
+  EuiCodeEditor,
+  EuiCopy,
+  EuiFlyout,
   EuiFlyoutBody,
   EuiFlyoutFooter,
-  EuiFlyout,
   EuiFlyoutHeader,
   EuiPortal,
+  EuiSpacer,
+  EuiText,
   EuiTitle,
 } from '@elastic/eui';
 
@@ -27,55 +29,87 @@ export class PolicyJsonFlyout extends PureComponent {
     close: PropTypes.func.isRequired,
     lifecycle: PropTypes.object.isRequired,
   };
+
   getEsJson({ phases }) {
     return JSON.stringify({
       policy: {
         phases
       }
-    }, null, 4);
-  }
-  copyToClipboard(lifecycle) {
-    copy(this.getEsJson(lifecycle));
-    toastNotifications.add(i18n.translate(
-      'xpack.indexLifecycleMgmt.editPolicy.policyJsonFlyout.copiedToClipboardMessage',
-      {
-        defaultMessage: 'JSON copied to clipboard'
-      }
-    ));
+    }, null, 2);
   }
+
   render() {
     const { lifecycle, close, policyName } = this.props;
+    const endpoint = `PUT _ilm/policy/${policyName || '{policyName}'}\n`;
+    const request = `${endpoint}${this.getEsJson(lifecycle)}`;
 
     return (
       <EuiPortal>
-        <EuiFlyout maxWidth={400} ownFocus onClose={close}>
+        <EuiFlyout maxWidth={480} onClose={close}>
           <EuiFlyoutHeader>
             <EuiTitle>
               <h2>
-                <FormattedMessage
-                  id="xpack.indexLifecycleMgmt.policyJsonFlyout.title"
-                  defaultMessage="JSON for index lifecycle policy {policyName}"
-                  values={{ policyName }}
-                />
+                {policyName ? (
+                  <FormattedMessage
+                    id="xpack.indexLifecycleMgmt.policyJsonFlyout.namedTitle"
+                    defaultMessage="Request for {policyName}"
+                    values={{ policyName }}
+                  />
+                ) : (
+                  <FormattedMessage
+                    id="xpack.indexLifecycleMgmt.policyJsonFlyout.unnamedTitle"
+                    defaultMessage="Request"
+                  />
+                )}
               </h2>
             </EuiTitle>
           </EuiFlyoutHeader>
 
           <EuiFlyoutBody>
-            <EuiCodeBlock
-              language="json"
-            >
-              {this.getEsJson(lifecycle)}
-            </EuiCodeBlock>
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  id="xpack.indexLifecycleMgmt.policyJsonFlyout.descriptionText"
+                  defaultMessage="This is the underlying request to Elasticsearch that will create or update this index lifecycle policy."
+                />
+              </p>
+            </EuiText>
+
+            <EuiSpacer />
+
+            <EuiCodeEditor
+              mode="json"
+              theme="textmate"
+              isReadOnly
+              setOptions={{ maxLines: Infinity, useWorker: false }}
+              value={request}
+              editorProps={{
+                $blockScrolling: Infinity
+              }}
+            />
           </EuiFlyoutBody>
 
           <EuiFlyoutFooter>
-            <EuiButton onClick={() => this.copyToClipboard(lifecycle)}>
-              <FormattedMessage
-                id="xpack.indexLifecycleMgmt.policyJsonFlyout.copyToClipboardButton"
-                defaultMessage="Copy to clipboard"
-              />
-            </EuiButton>
+            <EuiCopy textToCopy={request}>
+              {copy => (
+                <EuiButton
+                  onClick={() => {
+                    copy();
+                    toastNotifications.add(i18n.translate(
+                      'xpack.indexLifecycleMgmt.editPolicy.policyJsonFlyout.copiedToClipboardMessage',
+                      {
+                        defaultMessage: 'Request copied to clipboard'
+                      }
+                    ));
+                  }}
+                >
+                  <FormattedMessage
+                    id="xpack.indexLifecycleMgmt.policyJsonFlyout.copyToClipboardButton"
+                    defaultMessage="Copy to clipboard"
+                  />
+                </EuiButton>
+              )}
+            </EuiCopy>
           </EuiFlyoutFooter>
         </EuiFlyout>
       </EuiPortal>

x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.js

@@ -336,7 +336,7 @@ export class EditPolicy extends Component {
                   <EuiButtonEmpty onClick={this.showPolicyJsonFlyout}>
                     <FormattedMessage
                       id="xpack.indexLifecycleMgmt.editPolicy.showPolicyJsonButton"
-                      defaultMessage="Show JSON"
+                      defaultMessage="Show request"
                     />
                   </EuiButtonEmpty>
                 </EuiFlexItem>

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

@@ -4994,7 +4994,6 @@
     "xpack.indexLifecycleMgmt.noMatch.noPolicicesDescription": "表示するポリシーがありません",
     "xpack.indexLifecycleMgmt.optionalMessage": " (オプション)",
     "xpack.indexLifecycleMgmt.policyJsonFlyout.copyToClipboardButton": "クリップボードにコピー",
-    "xpack.indexLifecycleMgmt.policyJsonFlyout.title": "インデックスライフサイクルポリシー {policyName} の JSON",
     "xpack.indexLifecycleMgmt.policyTable.actionsButtonText": "アクション",
     "xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.cancelButton": "キャンセル",
     "xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.chooseTemplateLabel": "インデックステンプレート",

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

@@ -5137,7 +5137,6 @@
     "xpack.indexLifecycleMgmt.noMatch.noPolicicesDescription": "没有要显示的策略",
     "xpack.indexLifecycleMgmt.optionalMessage": " （可选）",
     "xpack.indexLifecycleMgmt.policyJsonFlyout.copyToClipboardButton": "复制到剪贴板",
-    "xpack.indexLifecycleMgmt.policyJsonFlyout.title": "索引生命周期策略 “{policyName}” 的 JSON",
     "xpack.indexLifecycleMgmt.policyTable.actionsButtonText": "操作",
     "xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.cancelButton": "取消",
     "xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.chooseTemplateLabel": "索引模板",