From 1333a0635e54bd0bf915aad5ff44d67417cdb7e8 Mon Sep 17 00:00:00 2001
From: Julia Bardi <julia.bardi@elastic.co>
Date: Thu, 17 Feb 2022 14:33:45 +0100
Subject: [PATCH] showing agent policy creation error message on UI

---
 .../components/agent_policy_create_inline.tsx |  4 ++--
 .../agent_policy_created_callout.tsx          | 21 +++++++++++++++----
 .../agent_policy_select_create.tsx            | 15 +++++++------
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_create_inline.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_create_inline.tsx
index afab3980c1f56e..ca5939966437b0 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_create_inline.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_create_inline.tsx
@@ -39,7 +39,7 @@ const StyledEuiAccordion = styled(EuiAccordion)`
 `;
 
 interface Props {
-  updateAgentPolicy: (u: AgentPolicy | null) => void;
+  updateAgentPolicy: (u: AgentPolicy | null, errorMessage?: string) => void;
   isFleetServerPolicy?: boolean;
   agentPolicyName: string;
 }
@@ -84,7 +84,7 @@ export const AgentPolicyCreateInlineForm: React.FunctionComponent<Props> = ({
         updateAgentPolicy(resp.data.item);
       }
     } catch (e) {
-      updateAgentPolicy(null);
+      updateAgentPolicy(null, e.message);
     } finally {
       setIsLoading(false);
     }
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_created_callout.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_created_callout.tsx
index ba3af7716d985c..2f58c1f5423e30 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_created_callout.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_created_callout.tsx
@@ -8,21 +8,27 @@
 import React from 'react';
 import { EuiSpacer, EuiCallOut } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+
 export enum CREATE_STATUS {
   INITIAL = 'initial',
   CREATED = 'created',
   FAILED = 'failed',
 }
 
+export interface AgentPolicyCreateState {
+  status: CREATE_STATUS;
+  errorMessage?: string;
+}
+
 interface Props {
-  createStatus: CREATE_STATUS;
+  createState: AgentPolicyCreateState;
 }
 
-export const AgentPolicyCreatedCallOut: React.FunctionComponent<Props> = ({ createStatus }) => {
+export const AgentPolicyCreatedCallOut: React.FunctionComponent<Props> = ({ createState }) => {
   return (
     <>
       <EuiSpacer size="m" />
-      {createStatus === CREATE_STATUS.CREATED ? (
+      {createState.status === CREATE_STATUS.CREATED ? (
         <EuiCallOut
           data-test-subj="agentPolicyCreateStatusCallOut"
           title={
@@ -45,7 +51,14 @@ export const AgentPolicyCreatedCallOut: React.FunctionComponent<Props> = ({ crea
           }
           color="danger"
           iconType="cross"
-        />
+        >
+          {createState.errorMessage ? (
+            <FormattedMessage
+              id="xpack.fleet.agentPolicyCreation.errorMessage"
+              defaultMessage={createState.errorMessage}
+            />
+          ) : null}
+        </EuiCallOut>
       )}
     </>
   );
diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_policy_select_create.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_policy_select_create.tsx
index 87382ac70a9bb6..cb19fb11f92fdb 100644
--- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_policy_select_create.tsx
+++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_policy_select_create.tsx
@@ -7,6 +7,7 @@
 
 import React, { useState, useCallback, useEffect } from 'react';
 
+import type { AgentPolicyCreateState } from '../../applications/fleet/sections/agents/components';
 import {
   AgentPolicyCreatedCallOut,
   CREATE_STATUS,
@@ -40,7 +41,9 @@ export const SelectCreateAgentPolicy: React.FC<Props> = ({
 }) => {
   const [showCreatePolicy, setShowCreatePolicy] = useState(agentPolicies.length === 0);
 
-  const [createStatus, setCreateStatus] = useState(CREATE_STATUS.INITIAL);
+  const [createState, setCreateState] = useState<AgentPolicyCreateState>({
+    status: CREATE_STATUS.INITIAL,
+  });
 
   const [newName, setNewName] = useState(incrementPolicyName(agentPolicies, isFleetServerPolicy));
 
@@ -52,13 +55,13 @@ export const SelectCreateAgentPolicy: React.FC<Props> = ({
   }, [agentPolicies, isFleetServerPolicy]);
 
   const onAgentPolicyCreated = useCallback(
-    async (policy: AgentPolicy | null) => {
+    async (policy: AgentPolicy | null, errorMessage?: string) => {
       if (!policy) {
-        setCreateStatus(CREATE_STATUS.FAILED);
+        setCreateState({ status: CREATE_STATUS.FAILED, errorMessage });
         return;
       }
       setShowCreatePolicy(false);
-      setCreateStatus(CREATE_STATUS.CREATED);
+      setCreateState({ status: CREATE_STATUS.CREATED });
       if (onAgentPolicyChange) {
         onAgentPolicyChange(policy.id, policy!);
       }
@@ -88,8 +91,8 @@ export const SelectCreateAgentPolicy: React.FC<Props> = ({
           isFleetServerPolicy={isFleetServerPolicy}
         />
       )}
-      {createStatus !== CREATE_STATUS.INITIAL && (
-        <AgentPolicyCreatedCallOut createStatus={createStatus} />
+      {createState.status !== CREATE_STATUS.INITIAL && (
+        <AgentPolicyCreatedCallOut createState={createState} />
       )}
     </>
   );