From dab972df6f5f01dab5669ed5b53231c076a92823 Mon Sep 17 00:00:00 2001
From: Nicolas Chaulet <nicolas.chaulet@elastic.co>
Date: Thu, 27 Feb 2020 18:00:29 -0500
Subject: [PATCH] [Fleet]  Fix after review

---
 .../agent_enrollment_flyout/index.tsx         |  33 ++++-
 .../agent_enrollment_flyout/instructions.tsx  |   1 -
 .../agent_enrollment_flyout/key_selection.tsx | 125 +++++++++++++++---
 3 files changed, 135 insertions(+), 24 deletions(-)

diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/agent_enrollment_flyout/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/agent_enrollment_flyout/index.tsx
index 2e87f75ef0edb..60256599c6680 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/agent_enrollment_flyout/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/agent_enrollment_flyout/index.tsx
@@ -4,7 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React, { useState } from 'react';
-import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, EuiSpacer, EuiTitle } from '@elastic/eui';
+import {
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiSpacer,
+  EuiTitle,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+  EuiButton,
+  EuiFlyoutFooter,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { AgentConfig } from '../../../../../types';
 import { APIKeySelection } from './key_selection';
@@ -41,6 +52,26 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({
         <EuiSpacer size="l" />
         <EnrollmentInstructions selectedAPIKeyId={selectedAPIKeyId} />
       </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty iconType="cross" onClick={onClose} flush="left">
+              <FormattedMessage
+                id="xpack.ingestManager.agentEnrollment.cancelButtonLabel"
+                defaultMessage="Cancel"
+              />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton onClick={onClose}>
+              <FormattedMessage
+                id="xpack.ingestManager.agentEnrollment.continueButtonLabel"
+                defaultMessage="Continue"
+              />
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
     </EuiFlyout>
   );
 };
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/agent_enrollment_flyout/instructions.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/agent_enrollment_flyout/instructions.tsx
index 1d561e36d768e..97434d2178852 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/agent_enrollment_flyout/instructions.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/agent_enrollment_flyout/instructions.tsx
@@ -108,7 +108,6 @@ export const EnrollmentInstructions: React.FunctionComponent<Props> = ({ selecte
                     </>
                   ) : (
                     <>
-                      <Loading />
                       <FormattedMessage
                         id="xpack.ingestManager.agentEnrollment.newAgentsMessage"
                         defaultMessage="{count, plural, one {# new agent} other {# new agents}}."
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/agent_enrollment_flyout/key_selection.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/agent_enrollment_flyout/key_selection.tsx
index 92a467ae0b1e1..89801bc6bee1e 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/agent_enrollment_flyout/key_selection.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/agent_enrollment_flyout/key_selection.tsx
@@ -4,16 +4,63 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React, { useState } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect, EuiSpacer, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiSelect,
+  EuiSpacer,
+  EuiText,
+  EuiLink,
+  EuiFieldText,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { useEnrollmentApiKeys, CreateApiKeyButton } from '../enrollment_api_keys';
+import { useEnrollmentApiKeys } from '../enrollment_api_keys';
 import { AgentConfig } from '../../../../../types';
+import { useInput, useCore, sendRequest } from '../../../../../hooks';
+import { enrollmentAPIKeyRouteService } from '../../../../../services';
 
 interface Props {
   onKeyChange: (keyId: string | null) => void;
   agentConfigs: AgentConfig[];
 }
 
+function useCreateApiKeyForm(configId: string | null, onSuccess: (keyId: string) => void) {
+  const { notifications } = useCore();
+  const [isLoading, setIsLoading] = useState(false);
+  const apiKeyNameInput = useInput('');
+
+  const onSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setIsLoading(true);
+    try {
+      const res = await sendRequest({
+        method: 'post',
+        path: enrollmentAPIKeyRouteService.getCreatePath(),
+        body: JSON.stringify({
+          name: apiKeyNameInput.value,
+          config_id: configId,
+        }),
+      });
+      apiKeyNameInput.clear();
+      setIsLoading(false);
+      onSuccess(res.data.item.id);
+    } catch (err) {
+      notifications.toasts.addError(err as Error, {
+        title: 'Error',
+      });
+      setIsLoading(false);
+    }
+  };
+
+  return {
+    isLoading,
+    onSubmit,
+    apiKeyNameInput,
+  };
+}
+
 export const APIKeySelection: React.FunctionComponent<Props> = ({ onKeyChange, agentConfigs }) => {
   const enrollmentAPIKeysRequest = useEnrollmentApiKeys({
     currentPage: 1,
@@ -33,7 +80,7 @@ export const APIKeySelection: React.FunctionComponent<Props> = ({ onKeyChange, a
     }
 
     return enrollmentAPIKeysRequest.data.list.filter(
-      key => key.policy_id === selectedState.agentConfigId
+      key => key.config_id === selectedState.agentConfigId
     );
   }, [enrollmentAPIKeysRequest.data, selectedState.agentConfigId]);
 
@@ -50,6 +97,16 @@ export const APIKeySelection: React.FunctionComponent<Props> = ({ onKeyChange, a
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filteredEnrollmentAPIKeys, selectedState.enrollmentAPIKeyId, selectedState.agentConfigId]);
 
+  const [showAPIKeyForm, setShowAPIKeyForm] = useState(false);
+  const apiKeyForm = useCreateApiKeyForm(selectedState.agentConfigId, async (keyId: string) => {
+    const res = await enrollmentAPIKeysRequest.refresh();
+    setSelectedState({
+      ...selectedState,
+      enrollmentAPIKeyId: res.data?.list.find(key => key.id === keyId)?.id ?? null,
+    });
+    setShowAPIKeyForm(false);
+  });
+
   return (
     <>
       <EuiText>
@@ -94,28 +151,52 @@ export const APIKeySelection: React.FunctionComponent<Props> = ({ onKeyChange, a
             }
             labelAppend={
               <EuiText size="xs">
-                <CreateApiKeyButton
-                  onChange={async () => {
-                    await enrollmentAPIKeysRequest.refresh();
-                  }}
-                />
+                <EuiLink onClick={() => setShowAPIKeyForm(!showAPIKeyForm)} color="primary">
+                  {showAPIKeyForm ? (
+                    <FormattedMessage
+                      id="xpack.ingestManager.enrollmentApiKeyList.useExistingsButton"
+                      defaultMessage="Use existing keys"
+                    />
+                  ) : (
+                    <FormattedMessage
+                      id="xpack.ingestManager.enrollmentApiKeyList.createNewButton"
+                      defaultMessage="Create a new key"
+                    />
+                  )}
+                </EuiLink>
               </EuiText>
             }
           >
-            <EuiSelect
-              options={filteredEnrollmentAPIKeys.map(key => ({
-                value: key.id,
-                text: key.name,
-              }))}
-              value={selectedState.enrollmentAPIKeyId || undefined}
-              onChange={e => {
-                setSelectedState({
-                  ...selectedState,
-                  enrollmentAPIKeyId: e.target.value,
-                });
-                onKeyChange(selectedState.enrollmentAPIKeyId);
-              }}
-            />
+            {showAPIKeyForm ? (
+              <form onSubmit={apiKeyForm.onSubmit}>
+                <EuiFieldText
+                  isLoading={apiKeyForm.isLoading}
+                  disabled={apiKeyForm.isLoading}
+                  {...apiKeyForm.apiKeyNameInput.props}
+                  placeholder={i18n.translate(
+                    'xpack.ingestManager.enrollmentApiKeyForm.namePlaceholder',
+                    {
+                      defaultMessage: 'Choose a name',
+                    }
+                  )}
+                />
+              </form>
+            ) : (
+              <EuiSelect
+                options={filteredEnrollmentAPIKeys.map(key => ({
+                  value: key.id,
+                  text: key.name,
+                }))}
+                value={selectedState.enrollmentAPIKeyId || undefined}
+                onChange={e => {
+                  setSelectedState({
+                    ...selectedState,
+                    enrollmentAPIKeyId: e.target.value,
+                  });
+                  onKeyChange(selectedState.enrollmentAPIKeyId);
+                }}
+              />
+            )}
           </EuiFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>