Allow enrollment flyout to load well on slow networks (#71487)

Author: jen-huang

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_enrollment_flyout/config_selection.tsx

@@ -13,7 +13,7 @@ import { sendGetEnrollmentAPIKeys, useCore } from '../../../../hooks';
 import { AgentConfigPackageBadges } from '../agent_config_package_badges';
 
 type Props = {
-  agentConfigs: AgentConfig[];
+  agentConfigs?: AgentConfig[];
   onConfigChange?: (key: string) => void;
 } & (
   | {
@@ -37,9 +37,16 @@ export const EnrollmentStepAgentConfig: React.FC<Props> = (props) => {
   const [selectedState, setSelectedState] = useState<{
     agentConfigId?: string;
     enrollmentAPIKeyId?: string;
-  }>({
-    agentConfigId: agentConfigs.length ? agentConfigs[0].id : undefined,
-  });
+  }>({});
+
+  useEffect(() => {
+    if (agentConfigs && agentConfigs.length && !selectedState.agentConfigId) {
+      setSelectedState({
+        ...selectedState,
+        agentConfigId: agentConfigs[0].id,
+      });
+    }
+  }, [agentConfigs, selectedState]);
 
   useEffect(() => {
     if (onConfigChange && selectedState.agentConfigId) {
@@ -110,7 +117,8 @@ export const EnrollmentStepAgentConfig: React.FC<Props> = (props) => {
             />
           </EuiText>
         }
-        options={agentConfigs.map((config) => ({
+        isLoading={!agentConfigs}
+        options={(agentConfigs || []).map((config) => ({
           value: config.id,
           text: config.name,
         }))}

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

@@ -24,12 +24,12 @@ import { StandaloneInstructions } from './standalone_instructions';
 
 interface Props {
   onClose: () => void;
-  agentConfigs: AgentConfig[];
+  agentConfigs?: AgentConfig[];
 }
 
 export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({
   onClose,
-  agentConfigs = [],
+  agentConfigs,
 }) => {
   const [mode, setMode] = useState<'managed' | 'standalone'>('managed');
 

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

@@ -21,10 +21,10 @@ import { ManualInstructions } from '../../../../components/enrollment_instructio
 import { DownloadStep, AgentConfigSelectionStep } from './steps';
 
 interface Props {
-  agentConfigs: AgentConfig[];
+  agentConfigs?: AgentConfig[];
 }
 
-export const ManagedInstructions: React.FunctionComponent<Props> = ({ agentConfigs = [] }) => {
+export const ManagedInstructions: React.FunctionComponent<Props> = ({ agentConfigs }) => {
   const { getHref } = useLink();
   const core = useCore();
   const fleetStatus = useFleetStatus();
@@ -85,7 +85,7 @@ export const ManagedInstructions: React.FunctionComponent<Props> = ({ agentConfi
             }}
           />
         </>
-      )}{' '}
+      )}
     </>
   );
 };

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_enrollment_flyout/standalone_instructions.tsx

@@ -25,12 +25,12 @@ import { DownloadStep, AgentConfigSelectionStep } from './steps';
 import { configToYaml, agentConfigRouteService } from '../../../../services';
 
 interface Props {
-  agentConfigs: AgentConfig[];
+  agentConfigs?: AgentConfig[];
 }
 
 const RUN_INSTRUCTIONS = './elastic-agent run';
 
-export const StandaloneInstructions: React.FunctionComponent<Props> = ({ agentConfigs = [] }) => {
+export const StandaloneInstructions: React.FunctionComponent<Props> = ({ agentConfigs }) => {
   const core = useCore();
   const { notifications } = core;
 

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_enrollment_flyout/steps.tsx

@@ -46,7 +46,7 @@ export const AgentConfigSelectionStep = ({
   setSelectedAPIKeyId,
   setSelectedConfigId,
 }: {
-  agentConfigs: AgentConfig[];
+  agentConfigs?: AgentConfig[];
   setSelectedAPIKeyId?: (key: string) => void;
   setSelectedConfigId?: (configId: string) => void;
 }) => {