[Remote clusters] Cloud deployment form when adding new cluster

x-pack/plugins/remote_clusters/public/application/app_context.tsx

@@ -5,10 +5,11 @@
  * 2.0.
  */
 
-import React, { createContext } from 'react';
+import React, { createContext, useContext } from 'react';
 
 export interface Context {
   isCloudEnabled: boolean;
+  cloudDeploymentUrl: string;
 }
 
 export const AppContext = createContext<Context>({} as any);
@@ -22,3 +23,10 @@ export const AppContextProvider = ({
 }) => {
   return <AppContext.Provider value={context}>{children}</AppContext.Provider>;
 };
+
+export const useAppContext = () => {
+  const ctx = useContext(AppContext);
+  if (!ctx) throw new Error('Cannot use outside of app context');
+
+  return ctx;
+};

x-pack/plugins/remote_clusters/public/application/index.d.ts

@@ -13,6 +13,7 @@ export declare const renderApp: (
   I18nContext: I18nStart['Context'],
   appDependencies: {
     isCloudEnabled?: boolean;
+    cloudDeploymentUrl: string;
   },
   history: ScopedHistory
 ) => ReturnType<RegisterManagementAppArgs['mount']>;

x-pack/plugins/remote_clusters/public/application/sections/components/cloud_deployment_form/cloud_deployment_form.tsx

@@ -0,0 +1,186 @@
+/*
+ * 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 React, { FunctionComponent, useState } from 'react';
+
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiAccordion,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiFormRow,
+  EuiIcon,
+  EuiImage,
+  EuiLink,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { useAppContext } from '../../../app_context';
+import {
+  convertCloudUrlToProxyConnection,
+  validateCloudUrl,
+} from '../../../services/cloud_deployment_url';
+
+import { cloudRemoteClustersUrl } from '../../../services/documentation';
+
+// @ts-ignore
+import Screenshot from './cloud_deployment_screenshot.png';
+
+interface Props {
+  onClose: () => void;
+  onClusterConfigure: (value: { proxyAddress: string; serverName: string }) => void;
+}
+
+// TODO copy review
+export const CloudDeploymentForm: FunctionComponent<Props> = ({ onClose, onClusterConfigure }) => {
+  const [cloudDeploymentUrl, setCloudDeploymentUrl] = useState<string>('');
+  const [error, setError] = useState<string | null>(null);
+  const { cloudDeploymentUrl: accountLink } = useAppContext();
+
+  const configureCluster = () => {
+    const urlError: string | null = validateCloudUrl(cloudDeploymentUrl);
+    if (urlError) {
+      setError(urlError);
+    } else {
+      onClose();
+      onClusterConfigure(convertCloudUrlToProxyConnection(cloudDeploymentUrl));
+    }
+  };
+  return (
+    <EuiFlyout onClose={() => onClose()}>
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle>
+          <h2>
+            <EuiFlexGroup alignItems="center" gutterSize="s">
+              <EuiFlexItem grow={false}>
+                <EuiIcon type="logoCloud" size="l" />
+              </EuiFlexItem>
+
+              <EuiFlexItem>
+                <FormattedMessage
+                  id="xpack.remoteClusters.cloudDeploymentForm.formTitle"
+                  defaultMessage=" Add Cloud deployment as remote cluster"
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiText>
+          <p>
+            <FormattedMessage
+              id="xpack.remoteClusters.cloudDeploymentForm.formDescription"
+              defaultMessage="If you're connecting to a Cloud deployment, you can copy and paste the Elasticsearch
+              endpoint URL into the field below. The remote cluster will be automatically configured to connect to the Cloud deployment."
+            />
+          </p>
+        </EuiText>
+
+        <EuiSpacer />
+
+        <EuiAccordion
+          id="cloudDeploymentScreenshot"
+          buttonContent={i18n.translate(
+            'xpack.remoteClusters.cloudDeploymentForm.screenshotButtonLabel',
+            { defaultMessage: 'Expand for a screenshot' }
+          )}
+        >
+          <EuiImage url={Screenshot} alt="Screenshot of Cloud deployment url link" />
+        </EuiAccordion>
+
+        <EuiSpacer />
+
+        <EuiFormRow
+          fullWidth={true}
+          isInvalid={!!error}
+          error={error}
+          label={
+            <FormattedMessage
+              id="xpack.remoteClusters.cloudDeploymentForm.inputLabel"
+              defaultMessage="Elasticsearch endpoint URL"
+            />
+          }
+        >
+          <EuiFieldText
+            isInvalid={!!error}
+            fullWidth={true}
+            value={cloudDeploymentUrl}
+            onChange={(e) => setCloudDeploymentUrl(e.target.value)}
+          />
+        </EuiFormRow>
+
+        <EuiSpacer />
+
+        <EuiText color="subdued">
+          <p>
+            <i>
+              <strong>
+                <FormattedMessage
+                  id="xpack.remoteClusters.cloudDeploymentForm.aliasNoteLabel"
+                  defaultMessage="Note: "
+                />
+              </strong>
+              <FormattedMessage
+                id="xpack.remoteClusters.cloudDeploymentForm.aliasNoteDescription"
+                defaultMessage="If you configured a deployment alias in Elastic Cloud,
+              in your own load balancer or reverse proxy, you will need to copy the deployment
+              proxy address and server name from the Remote cluster parameters section in
+              the {securityPageLink} and paste them in the form directly. "
+                values={{
+                  securityPageLink: (
+                    <EuiLink href={`${accountLink}${'/security'}`} target="_blank" external={true}>
+                      <FormattedMessage
+                        id="xpack.remoteClusters.cloudDeploymentForm.cloudDeploymentLink"
+                        defaultMessage="Security page"
+                      />
+                    </EuiLink>
+                  ),
+                }}
+              />
+              <EuiLink href={cloudRemoteClustersUrl} target="_blank" external={true}>
+                <FormattedMessage
+                  id="xpack.remoteClusters.cloudDeploymentForm.aliasDocsLink"
+                  defaultMessage="Learn more"
+                />
+              </EuiLink>
+            </i>
+          </p>
+        </EuiText>
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty iconType="cross" flush="left" onClick={onClose}>
+              <FormattedMessage
+                id="xpack.remoteClusters.cloudDeploymentForm.closeButtonLabel"
+                defaultMessage="Close"
+              />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton fill color="primary" onClick={configureCluster}>
+              <FormattedMessage
+                id="xpack.remoteClusters.cloudDeploymentForm.configureClusterButtonLabel"
+                defaultMessage="Configure cluster"
+              />
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+};

x-pack/plugins/remote_clusters/public/application/sections/components/cloud_deployment_form/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { CloudDeploymentForm } from './cloud_deployment_form';

x-pack/plugins/remote_clusters/public/application/sections/components/index.js

@@ -8,3 +8,4 @@
 export { RemoteClusterForm } from './remote_cluster_form';
 export { RemoteClusterPageTitle } from './remote_cluster_page_title';
 export { ConfiguredByNodeWarning } from './configured_by_node_warning';
+export { CloudDeploymentForm } from './cloud_deployment_form';

x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/remote_cluster_form.js

@@ -54,6 +54,7 @@ import {
 import { SNIFF_MODE, PROXY_MODE } from '../../../../../common/constants';
 
 import { AppContext } from '../../../app_context';
+import { CloudDeploymentForm } from '../cloud_deployment_form';
 
 const defaultFields = {
   name: '',
@@ -76,6 +77,7 @@ export class RemoteClusterForm extends Component {
     saveError: PropTypes.object,
     fields: PropTypes.object,
     disabledFields: PropTypes.object,
+    isNewCluster: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -88,7 +90,7 @@ export class RemoteClusterForm extends Component {
   constructor(props, context) {
     super(props, context);
 
-    const { fields, disabledFields } = props;
+    const { fields, disabledFields, isNewCluster } = props;
     const { isCloudEnabled } = context;
 
     // Connection mode should default to "proxy" in cloud
@@ -104,6 +106,7 @@ export class RemoteClusterForm extends Component {
       fieldsErrors: this.getFieldsErrors(fieldsState),
       areErrorsVisible: false,
       isRequestVisible: false,
+      isCloudFormVisible: isCloudEnabled && isNewCluster,
     };
   }
 
@@ -113,6 +116,12 @@ export class RemoteClusterForm extends Component {
     }));
   };
 
+  toggleIsCloudFormVisible = () => {
+    this.setState(({ isCloudFormVisible }) => ({
+      isCloudFormVisible: !isCloudFormVisible,
+    }));
+  };
+
   getFieldsErrors(fields, seedInput = '') {
     const { name, seeds, mode, proxyAddress, serverName } = fields;
     const { isCloudEnabled } = this.context;
@@ -495,6 +504,15 @@ export class RemoteClusterForm extends Component {
                 id="xpack.remoteClusters.remoteClusterForm.sectionModeTitle"
                 defaultMessage="Connection mode"
               />
+              <EuiButtonEmpty size="s" onClick={this.toggleIsCloudFormVisible} iconType="logoCloud">
+                {/*
+                 * TODO copy review
+                 */}
+                <FormattedMessage
+                  id="xpack.remoteClusters.remoteClusterForm.cloudFormButton"
+                  defaultMessage="Add Cloud deployment"
+                />
+              </EuiButtonEmpty>
             </h2>
           </EuiTitle>
         }
@@ -878,6 +896,7 @@ export class RemoteClusterForm extends Component {
 
     const {
       isRequestVisible,
+      isCloudFormVisible,
       areErrorsVisible,
       fields: { name },
       fieldsErrors: { name: errorClusterName },
@@ -949,13 +968,20 @@ export class RemoteClusterForm extends Component {
 
         {this.renderSavingFeedback()}
 
-        {isRequestVisible ? (
+        {isRequestVisible && (
           <RequestFlyout
             name={name}
             cluster={this.getAllFields()}
             close={() => this.setState({ isRequestVisible: false })}
           />
-        ) : null}
+        )}
+
+        {isCloudFormVisible && (
+          <CloudDeploymentForm
+            onClose={this.toggleIsCloudFormVisible}
+            onClusterConfigure={this.onFieldsChange}
+          />
+        )}
       </Fragment>
     );
   }

x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_add/remote_cluster_add.js

@@ -12,8 +12,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiPageContent } from '@elastic/eui';
 
 import { extractQueryParams } from '../../../shared_imports';
-import { getRouter, redirect } from '../../services';
-import { setBreadcrumbs } from '../../services/breadcrumb';
+import { getRouter, redirect, setBreadcrumbs } from '../../services';
 import { RemoteClusterPageTitle, RemoteClusterForm } from '../components';
 
 export class RemoteClusterAdd extends PureComponent {
@@ -79,6 +78,7 @@ export class RemoteClusterAdd extends PureComponent {
         />
 
         <RemoteClusterForm
+          isNewCluster={true}
           isSaving={isAddingCluster}
           saveError={addClusterError}
           save={this.save}

x-pack/plugins/remote_clusters/public/application/services/cloud_deployment_url.test.ts

@@ -0,0 +1,51 @@
+/*
+ * 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 {
+  validateCloudUrl,
+  convertCloudUrlToProxyConnection,
+  i18nTexts,
+} from './cloud_deployment_url';
+describe('Cloud deployment url', () => {
+  describe('validation', () => {
+    it('errors when the url is empty', () => {
+      const actual = validateCloudUrl('');
+      expect(actual).toBe(i18nTexts.urlInvalid);
+    });
+
+    it('errors when the url is invalid', () => {
+      const actual = validateCloudUrl('invalid%url');
+      expect(actual).toBe(i18nTexts.urlInvalid);
+    });
+  });
+
+  describe('conversion', () => {
+    it('empty url to empty proxy connection values', () => {
+      const actual = convertCloudUrlToProxyConnection('');
+      expect(actual).toEqual({ proxyAddress: '', serverName: '' });
+    });
+
+    it('url with protocol and port to proxy connection values', () => {
+      const actual = convertCloudUrlToProxyConnection('http://test.com:1234');
+      expect(actual).toEqual({ proxyAddress: 'test.com:9400', serverName: 'test.com' });
+    });
+
+    it('url with protocol and no port to proxy connection values', () => {
+      const actual = convertCloudUrlToProxyConnection('http://test.com');
+      expect(actual).toEqual({ proxyAddress: 'test.com:9400', serverName: 'test.com' });
+    });
+
+    it('url with no protocol to proxy connection values', () => {
+      const actual = convertCloudUrlToProxyConnection('test.com');
+      expect(actual).toEqual({ proxyAddress: 'test.com:9400', serverName: 'test.com' });
+    });
+    it('invalid url to empty proxy connection values', () => {
+      const actual = convertCloudUrlToProxyConnection('invalid%url');
+      expect(actual).toEqual({ proxyAddress: '', serverName: '' });
+    });
+  });
+});