From dfbed3bf2d04ef29e312dd386cb45f1270bbda31 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 7 Aug 2019 17:06:44 -0700
Subject: [PATCH 1/3] Add request flyout to Remote Clusters.

---
 .../cluster_serialization.test.ts             |  0
 .../lib => common}/cluster_serialization.ts   |  0
 .../plugins/remote_clusters/common/index.ts   |  2 +
 .../remote_cluster_form.js                    | 61 ++++++++++---
 .../remote_cluster_form/request_flyout.js     | 88 +++++++++++++++++++
 .../server/routes/api/add_route.ts            |  2 +-
 .../server/routes/api/delete_route.ts         |  2 +-
 .../server/routes/api/get_route.ts            |  2 +-
 .../server/routes/api/update_route.ts         |  2 +-
 9 files changed, 141 insertions(+), 18 deletions(-)
 rename x-pack/legacy/plugins/remote_clusters/{server/lib => common}/cluster_serialization.test.ts (100%)
 rename x-pack/legacy/plugins/remote_clusters/{server/lib => common}/cluster_serialization.ts (100%)
 create mode 100644 x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/request_flyout.js

diff --git a/x-pack/legacy/plugins/remote_clusters/server/lib/cluster_serialization.test.ts b/x-pack/legacy/plugins/remote_clusters/common/cluster_serialization.test.ts
similarity index 100%
rename from x-pack/legacy/plugins/remote_clusters/server/lib/cluster_serialization.test.ts
rename to x-pack/legacy/plugins/remote_clusters/common/cluster_serialization.test.ts
diff --git a/x-pack/legacy/plugins/remote_clusters/server/lib/cluster_serialization.ts b/x-pack/legacy/plugins/remote_clusters/common/cluster_serialization.ts
similarity index 100%
rename from x-pack/legacy/plugins/remote_clusters/server/lib/cluster_serialization.ts
rename to x-pack/legacy/plugins/remote_clusters/common/cluster_serialization.ts
diff --git a/x-pack/legacy/plugins/remote_clusters/common/index.ts b/x-pack/legacy/plugins/remote_clusters/common/index.ts
index f869c0d2a55af..8f80b3b7dc6a3 100644
--- a/x-pack/legacy/plugins/remote_clusters/common/index.ts
+++ b/x-pack/legacy/plugins/remote_clusters/common/index.ts
@@ -19,3 +19,5 @@ export const PLUGIN = {
 };
 
 export const API_BASE_PATH = '/api/remote_clusters';
+
+export { deserializeCluster, serializeCluster } from './cluster_serialization';
diff --git a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/remote_cluster_form.js b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/remote_cluster_form.js
index fcc7a97a5a38f..1289711d3ce9b 100644
--- a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/remote_cluster_form.js
+++ b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/remote_cluster_form.js
@@ -38,6 +38,8 @@ import {
   transportPortUrl,
 } from '../../../services/documentation';
 
+import { RequestFlyout } from './request_flyout';
+
 import { validateName, validateSeeds, validateSeed } from './validators';
 
 const defaultFields = {
@@ -78,9 +80,16 @@ export class RemoteClusterForm extends Component {
       disabledFields,
       fieldsErrors: this.getFieldsErrors(fieldsState),
       areErrorsVisible: false,
+      isRequestVisible: false,
     };
   }
 
+  toggleRequest = () => {
+    this.setState(({ isRequestVisible }) => ({
+      isRequestVisible: !isRequestVisible,
+    }));
+  };
+
   getFieldsErrors(fields, seedInput = '') {
     const { name, seeds } = fields;
     return {
@@ -427,25 +436,40 @@ export class RemoteClusterForm extends Component {
     const isSaveDisabled = areErrorsVisible && this.hasErrors();
 
     return (
-      <EuiFlexGroup alignItems="center" gutterSize="m">
+      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup alignItems="center" gutterSize="m">
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                data-test-subj="remoteClusterFormSaveButton"
+                color="secondary"
+                iconType="check"
+                onClick={this.save}
+                fill
+                disabled={isSaveDisabled}
+                aria-describedby={`${this.generateId(ERROR_TITLE_ID)} ${this.generateId(ERROR_LIST_ID)}`}
+              >
+                <FormattedMessage
+                  id="xpack.remoteClusters.remoteClusterForm.saveButtonLabel"
+                  defaultMessage="Save"
+                />
+              </EuiButton>
+            </EuiFlexItem>
+
+            {cancelButton}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+
         <EuiFlexItem grow={false}>
-          <EuiButton
-            data-test-subj="remoteClusterFormSaveButton"
-            color="secondary"
-            iconType="check"
-            onClick={this.save}
-            fill
-            disabled={isSaveDisabled}
-            aria-describedby={`${this.generateId(ERROR_TITLE_ID)} ${this.generateId(ERROR_LIST_ID)}`}
+          <EuiButtonEmpty
+            onClick={this.toggleRequest}
           >
             <FormattedMessage
-              id="xpack.remoteClusters.remoteClusterForm.saveButtonLabel"
-              defaultMessage="Save"
+              id="xpack.remoteClusters.remoteClusterForm.toggleRequestButtonLabel"
+              defaultMessage="Show request"
             />
-          </EuiButton>
+          </EuiButtonEmpty>
         </EuiFlexItem>
-
-        {cancelButton}
       </EuiFlexGroup>
     );
   }
@@ -593,6 +617,7 @@ export class RemoteClusterForm extends Component {
     } = this.props;
 
     const {
+      isRequestVisible,
       areErrorsVisible,
       fields: {
         name,
@@ -667,6 +692,14 @@ export class RemoteClusterForm extends Component {
         {this.renderActions()}
 
         {this.renderSavingFeedback()}
+
+        {isRequestVisible ? (
+          <RequestFlyout
+            name={name}
+            cluster={this.getAllFields()}
+            close={() => this.setState({ isRequestVisible: false })}
+          />
+        ) : null}
       </Fragment>
     );
   }
diff --git a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/request_flyout.js b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/request_flyout.js
new file mode 100644
index 0000000000000..df02f615e4897
--- /dev/null
+++ b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/request_flyout.js
@@ -0,0 +1,88 @@
+/*
+ * 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.
+ */
+
+/*
+ * 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 PropTypes from 'prop-types';
+
+import {
+  EuiCodeBlock,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiPortal,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+
+import { serializeCluster } from '../../../../../common';
+
+export class RequestFlyout extends PureComponent {
+  static propTypes = {
+    close: PropTypes.func.isRequired,
+    name: PropTypes.string.isRequired,
+    cluster: PropTypes.object.isRequired,
+  };
+
+  render() {
+    const { name, close, cluster } = this.props;
+    const endpoint = 'PUT _cluster/settings';
+    const payload = JSON.stringify(serializeCluster(cluster), null, 2);
+    const request = `${endpoint}\n${payload}`;
+
+    return (
+      <EuiPortal>
+        <EuiFlyout maxWidth={480} onClose={close}>
+          <EuiFlyoutHeader>
+            <EuiTitle>
+              <h2>
+                {name ? (
+                  <FormattedMessage
+                    id="xpack.remoteClusters.requestFlyout.namedTitle"
+                    defaultMessage="Request for {name}"
+                    values={{ name }}
+                  />
+                ) : (
+                  <FormattedMessage
+                    id="xpack.remoteClusters.requestFlyout.unnamedTitle"
+                    defaultMessage="Request"
+                  />
+                )}
+              </h2>
+            </EuiTitle>
+          </EuiFlyoutHeader>
+
+          <EuiFlyoutBody>
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  id="xpack.remoteClusters.requestFlyout.descriptionText"
+                  defaultMessage="This Elasticsearch request will create or update this remote cluster."
+                />
+              </p>
+            </EuiText>
+
+            <EuiSpacer />
+
+            <EuiCodeBlock
+              language="json"
+              isCopyable
+            >
+              {request}
+            </EuiCodeBlock>
+          </EuiFlyoutBody>
+        </EuiFlyout>
+      </EuiPortal>
+    );
+  }
+}
diff --git a/x-pack/legacy/plugins/remote_clusters/server/routes/api/add_route.ts b/x-pack/legacy/plugins/remote_clusters/server/routes/api/add_route.ts
index 87c9e989f2ef8..36b8d4fe7c3a0 100644
--- a/x-pack/legacy/plugins/remote_clusters/server/routes/api/add_route.ts
+++ b/x-pack/legacy/plugins/remote_clusters/server/routes/api/add_route.ts
@@ -11,8 +11,8 @@ import {
   RouterRouteHandler,
   wrapCustomError,
 } from '../../../../../server/lib/create_router';
+import { serializeCluster } from '../../../common/cluster_serialization';
 import { doesClusterExist } from '../../lib/does_cluster_exist';
-import { serializeCluster } from '../../lib/cluster_serialization';
 
 export const register = (router: Router): void => {
   router.post('', addHandler);
diff --git a/x-pack/legacy/plugins/remote_clusters/server/routes/api/delete_route.ts b/x-pack/legacy/plugins/remote_clusters/server/routes/api/delete_route.ts
index 2d5bf8b1b296f..eff7c66b265b8 100644
--- a/x-pack/legacy/plugins/remote_clusters/server/routes/api/delete_route.ts
+++ b/x-pack/legacy/plugins/remote_clusters/server/routes/api/delete_route.ts
@@ -13,8 +13,8 @@ import {
   wrapEsError,
   wrapUnknownError,
 } from '../../../../../server/lib/create_router';
+import { serializeCluster } from '../../../common/cluster_serialization';
 import { doesClusterExist } from '../../lib/does_cluster_exist';
-import { serializeCluster } from '../../lib/cluster_serialization';
 
 export const register = (router: Router, isEsError: any): void => {
   router.delete('/{nameOrNames}', createDeleteHandler(isEsError));
diff --git a/x-pack/legacy/plugins/remote_clusters/server/routes/api/get_route.ts b/x-pack/legacy/plugins/remote_clusters/server/routes/api/get_route.ts
index d37f98cdb9e07..97bb59de85b89 100644
--- a/x-pack/legacy/plugins/remote_clusters/server/routes/api/get_route.ts
+++ b/x-pack/legacy/plugins/remote_clusters/server/routes/api/get_route.ts
@@ -7,7 +7,7 @@
 import { get } from 'lodash';
 
 import { Router, RouterRouteHandler } from '../../../../../server/lib/create_router';
-import { deserializeCluster } from '../../lib/cluster_serialization';
+import { deserializeCluster } from '../../../common/cluster_serialization';
 
 export const register = (router: Router): void => {
   router.get('', getAllHandler);
diff --git a/x-pack/legacy/plugins/remote_clusters/server/routes/api/update_route.ts b/x-pack/legacy/plugins/remote_clusters/server/routes/api/update_route.ts
index ab522292eeb15..d6eedf7924ca3 100644
--- a/x-pack/legacy/plugins/remote_clusters/server/routes/api/update_route.ts
+++ b/x-pack/legacy/plugins/remote_clusters/server/routes/api/update_route.ts
@@ -11,8 +11,8 @@ import {
   RouterRouteHandler,
   wrapCustomError,
 } from '../../../../../server/lib/create_router';
+import { serializeCluster, deserializeCluster } from '../../../common/cluster_serialization';
 import { doesClusterExist } from '../../lib/does_cluster_exist';
-import { serializeCluster, deserializeCluster } from '../../lib/cluster_serialization';
 
 export const register = (router: Router): void => {
   router.put('/{name}', updateHandler);

From ca7ceaf6dbbace833d01106be9fefca123565590 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 7 Aug 2019 19:50:27 -0700
Subject: [PATCH 2/3] Fix test.

---
 .../remote_cluster_form.test.js.snap          | 58 ++++++++++++++-----
 1 file changed, 42 insertions(+), 16 deletions(-)

diff --git a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
index c25c2e6995aed..8209b792ec4d7 100644
--- a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
+++ b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
@@ -284,33 +284,59 @@ Array [
     class="euiSpacer euiSpacer--l"
   />,
   <div
-    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <button
+            aria-describedby="staticGenerator_removeClustersErrorTitle staticGenerator_removeClustersErrorList"
+            class="euiButton euiButton--secondary euiButton--fill"
+            data-test-subj="remoteClusterFormSaveButton"
+            type="button"
+          >
+            <span
+              class="euiButton__content"
+            >
+              <svg
+                aria-hidden="true"
+                class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
+                focusable="false"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              />
+              <span
+                class="euiButton__text"
+              >
+                Save
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        aria-describedby="staticGenerator_removeClustersErrorTitle staticGenerator_removeClustersErrorList"
-        class="euiButton euiButton--secondary euiButton--fill"
-        data-test-subj="remoteClusterFormSaveButton"
+        class="euiButtonEmpty euiButtonEmpty--primary"
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonEmpty__content"
         >
-          <svg
-            aria-hidden="true"
-            class="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
-            focusable="false"
-            height="16"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          />
           <span
-            class="euiButton__text"
+            class="euiButtonEmpty__text"
           >
-            Save
+            Show request
           </span>
         </span>
       </button>

From af143d45c7e60a66ccb264526e5c5c59480bdc05 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Tue, 13 Aug 2019 13:13:07 -0700
Subject: [PATCH 3/3] Address feedback. - Remove unnecessary EuiPortal. - Wrap
 name in quotes. - Change button text to show/hide based on state. - Add
 flyout footer with close button.

---
 .../remote_cluster_form.js                    | 17 ++--
 .../remote_cluster_form/request_flyout.js     | 90 +++++++++++--------
 2 files changed, 63 insertions(+), 44 deletions(-)

diff --git a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/remote_cluster_form.js b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/remote_cluster_form.js
index 1289711d3ce9b..a12dd9c20d030 100644
--- a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/remote_cluster_form.js
+++ b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/remote_cluster_form.js
@@ -394,7 +394,7 @@ export class RemoteClusterForm extends Component {
 
   renderActions() {
     const { isSaving, cancel } = this.props;
-    const { areErrorsVisible } = this.state;
+    const { areErrorsVisible, isRequestVisible } = this.state;
 
     if (isSaving) {
       return (
@@ -464,10 +464,17 @@ export class RemoteClusterForm extends Component {
           <EuiButtonEmpty
             onClick={this.toggleRequest}
           >
-            <FormattedMessage
-              id="xpack.remoteClusters.remoteClusterForm.toggleRequestButtonLabel"
-              defaultMessage="Show request"
-            />
+            {isRequestVisible ? (
+              <FormattedMessage
+                id="xpack.remoteClusters.remoteClusterForm.hideRequestButtonLabel"
+                defaultMessage="Hide request"
+              />
+            ) : (
+              <FormattedMessage
+                id="xpack.remoteClusters.remoteClusterForm.showRequestButtonLabel"
+                defaultMessage="Show request"
+              />
+            )}
           </EuiButtonEmpty>
         </EuiFlexItem>
       </EuiFlexGroup>
diff --git a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/request_flyout.js b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/request_flyout.js
index df02f615e4897..bf315fa79f856 100644
--- a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/request_flyout.js
+++ b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/request_flyout.js
@@ -15,11 +15,12 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import PropTypes from 'prop-types';
 
 import {
+  EuiButtonEmpty,
   EuiCodeBlock,
   EuiFlyout,
   EuiFlyoutBody,
+  EuiFlyoutFooter,
   EuiFlyoutHeader,
-  EuiPortal,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -41,48 +42,59 @@ export class RequestFlyout extends PureComponent {
     const request = `${endpoint}\n${payload}`;
 
     return (
-      <EuiPortal>
-        <EuiFlyout maxWidth={480} onClose={close}>
-          <EuiFlyoutHeader>
-            <EuiTitle>
-              <h2>
-                {name ? (
-                  <FormattedMessage
-                    id="xpack.remoteClusters.requestFlyout.namedTitle"
-                    defaultMessage="Request for {name}"
-                    values={{ name }}
-                  />
-                ) : (
-                  <FormattedMessage
-                    id="xpack.remoteClusters.requestFlyout.unnamedTitle"
-                    defaultMessage="Request"
-                  />
-                )}
-              </h2>
-            </EuiTitle>
-          </EuiFlyoutHeader>
-
-          <EuiFlyoutBody>
-            <EuiText>
-              <p>
+      <EuiFlyout maxWidth={480} onClose={close}>
+        <EuiFlyoutHeader>
+          <EuiTitle>
+            <h2>
+              {name ? (
+                <FormattedMessage
+                  id="xpack.remoteClusters.requestFlyout.namedTitle"
+                  defaultMessage="Request for '{name}'"
+                  values={{ name }}
+                />
+              ) : (
                 <FormattedMessage
-                  id="xpack.remoteClusters.requestFlyout.descriptionText"
-                  defaultMessage="This Elasticsearch request will create or update this remote cluster."
+                  id="xpack.remoteClusters.requestFlyout.unnamedTitle"
+                  defaultMessage="Request"
                 />
-              </p>
-            </EuiText>
+              )}
+            </h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+
+        <EuiFlyoutBody>
+          <EuiText>
+            <p>
+              <FormattedMessage
+                id="xpack.remoteClusters.requestFlyout.descriptionText"
+                defaultMessage="This Elasticsearch request will create or update this remote cluster."
+              />
+            </p>
+          </EuiText>
+
+          <EuiSpacer />
 
-            <EuiSpacer />
+          <EuiCodeBlock
+            language="json"
+            isCopyable
+          >
+            {request}
+          </EuiCodeBlock>
+        </EuiFlyoutBody>
 
-            <EuiCodeBlock
-              language="json"
-              isCopyable
-            >
-              {request}
-            </EuiCodeBlock>
-          </EuiFlyoutBody>
-        </EuiFlyout>
-      </EuiPortal>
+        <EuiFlyoutFooter>
+          <EuiButtonEmpty
+            iconType="cross"
+            onClick={close}
+            flush="left"
+          >
+            <FormattedMessage
+              id="xpack.remoteClusters.requestFlyout.closeButtonLabel"
+              defaultMessage="Close"
+            />
+          </EuiButtonEmpty>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
     );
   }
 }