[Fleet] added loading spinner to add agent flyout (#125760) (#125790)

* added loading spinner to add agent flyout

* fixed create agent policy scenario

(cherry picked from commit d3201da)

Co-authored-by: Julia Bardi <90178898+juliaElastic@users.noreply.github.com>

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.tsx

@@ -118,6 +118,25 @@ describe('<AgentEnrollmentFlyout />', () => {
     jest.clearAllMocks();
   });
 
+  it('should show loading when agent policies are loading', async () => {
+    (useAgentEnrollmentFlyoutData as jest.Mock).mockReturnValue?.({
+      agentPolicies: [],
+      refreshAgentPolicies: jest.fn(),
+      isLoadingInitialAgentPolicies: true,
+    });
+
+    await act(async () => {
+      testBed = await setup({
+        onClose: jest.fn(),
+      });
+      testBed.component.update();
+    });
+
+    const { exists } = testBed;
+    expect(exists('agentEnrollmentFlyout')).toBe(true);
+    expect(exists('loadingSpinner')).toBe(true);
+  });
+
   describe('managed instructions', () => {
     it('uses the agent policy selection step', async () => {
       const { exists } = testBed;

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/index.tsx

@@ -31,6 +31,8 @@ import {
 import { FLEET_SERVER_PACKAGE } from '../../constants';
 import type { PackagePolicy } from '../../types';
 
+import { Loading } from '..';
+
 import { ManagedInstructions } from './managed_instructions';
 import { StandaloneInstructions } from './standalone_instructions';
 import { MissingFleetServerHostCallout } from './missing_fleet_server_host_callout';
@@ -64,7 +66,12 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({
   const [policyId, setSelectedPolicyId] = useState(agentPolicy?.id);
   const [isFleetServerPolicySelected, setIsFleetServerPolicySelected] = useState<boolean>(false);
 
-  const { agentPolicies, refreshAgentPolicies } = useAgentEnrollmentFlyoutData();
+  const {
+    agentPolicies,
+    isLoadingInitialAgentPolicies,
+    isLoadingAgentPolicies,
+    refreshAgentPolicies,
+  } = useAgentEnrollmentFlyoutData();
 
   useEffect(() => {
     async function checkPolicyIsFleetServer() {
@@ -141,7 +148,9 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({
           ) : undefined
         }
       >
-        {mode === 'managed' ? (
+        {isLoadingInitialAgentPolicies ? (
+          <Loading />
+        ) : mode === 'managed' ? (
           <ManagedInstructions
             settings={settings.data?.item}
             setSelectedPolicyId={setSelectedPolicyId}
@@ -150,6 +159,7 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({
             viewDataStep={viewDataStep}
             isFleetServerPolicySelected={isFleetServerPolicySelected}
             refreshAgentPolicies={refreshAgentPolicies}
+            isLoadingAgentPolicies={isLoadingAgentPolicies}
           />
         ) : (
           <StandaloneInstructions

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx

@@ -66,6 +66,7 @@ export const ManagedInstructions = React.memo<InstructionProps>(
     isFleetServerPolicySelected,
     settings,
     refreshAgentPolicies,
+    isLoadingAgentPolicies,
   }) => {
     const fleetStatus = useFleetStatus();
 
@@ -161,7 +162,10 @@ export const ManagedInstructions = React.memo<InstructionProps>(
       return null;
     }
 
-    if (fleetStatus.isReady && (isLoadingAgents || fleetServers.length > 0)) {
+    if (
+      fleetStatus.isReady &&
+      (isLoadingAgents || isLoadingAgentPolicies || fleetServers.length > 0)
+    ) {
       return (
         <>
           <EuiText>

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/types.ts

@@ -31,4 +31,5 @@ export interface BaseProps {
 export interface InstructionProps extends BaseProps {
   agentPolicies: AgentPolicy[];
   refreshAgentPolicies: () => void;
+  isLoadingAgentPolicies?: boolean;
 }

x-pack/plugins/fleet/public/components/loading.tsx

@@ -12,7 +12,7 @@ import type { EuiLoadingSpinnerSize } from '@elastic/eui/src/components/loading/
 export const Loading: React.FunctionComponent<{ size?: EuiLoadingSpinnerSize }> = ({ size }) => (
   <EuiFlexGroup justifyContent="spaceAround">
     <EuiFlexItem grow={false}>
-      <EuiLoadingSpinner size={size || 'xl'} />
+      <EuiLoadingSpinner size={size || 'xl'} data-test-subj="loadingSpinner" />
     </EuiFlexItem>
   </EuiFlexGroup>
 );

x-pack/plugins/fleet/public/hooks/use_agent_enrollment_flyout.data.test.ts

@@ -23,6 +23,7 @@ describe('useAgentEnrollmentFlyoutData', () => {
     (useGetAgentPolicies as jest.Mock).mockReturnValue({ data: undefined, isLoading: true });
     const { result } = testRenderer.renderHook(() => useAgentEnrollmentFlyoutData());
     expect(result.current.agentPolicies).toEqual([]);
+    expect(result.current.isLoadingAgentPolicies).toBe(true);
   });
 
   it('should return empty agentPolicies when http not loading and no data', () => {

x-pack/plugins/fleet/public/hooks/use_agent_enrollment_flyout_data.ts

@@ -14,11 +14,14 @@ import { useGetAgentPolicies } from './use_request';
 interface AgentEnrollmentFlyoutData {
   agentPolicies: AgentPolicy[];
   refreshAgentPolicies: () => void;
+  isLoadingInitialAgentPolicies: boolean;
+  isLoadingAgentPolicies: boolean;
 }
 
 export function useAgentEnrollmentFlyoutData(): AgentEnrollmentFlyoutData {
   const {
     data: agentPoliciesData,
+    isInitialRequest,
     isLoading: isLoadingAgentPolicies,
     resendRequest: refreshAgentPolicies,
   } = useGetAgentPolicies({
@@ -34,5 +37,10 @@ export function useAgentEnrollmentFlyoutData(): AgentEnrollmentFlyoutData {
     return [];
   }, [isLoadingAgentPolicies, agentPoliciesData?.items]);
 
-  return { agentPolicies, refreshAgentPolicies };
+  return {
+    agentPolicies,
+    refreshAgentPolicies,
+    isLoadingInitialAgentPolicies: isInitialRequest && isLoadingAgentPolicies,
+    isLoadingAgentPolicies,
+  };
 }