[Ingest] Fix GET /enrollment-api-keys/null error (#64595) (#64690)

x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/agent_config.ts

@@ -4,7 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { HttpFetchQuery } from 'src/core/public';
-import { useRequest, sendRequest } from './use_request';
+import {
+  useRequest,
+  sendRequest,
+  useConditionalRequest,
+  SendConditionalRequestConfig,
+} from './use_request';
 import { agentConfigRouteService } from '../../services';
 import {
   GetAgentConfigsResponse,
@@ -25,11 +30,12 @@ export const useGetAgentConfigs = (query: HttpFetchQuery = {}) => {
   });
 };
 
-export const useGetOneAgentConfig = (agentConfigId: string) => {
-  return useRequest<GetOneAgentConfigResponse>({
-    path: agentConfigRouteService.getInfoPath(agentConfigId),
+export const useGetOneAgentConfig = (agentConfigId: string | undefined) => {
+  return useConditionalRequest<GetOneAgentConfigResponse>({
+    path: agentConfigId ? agentConfigRouteService.getInfoPath(agentConfigId) : undefined,
     method: 'get',
-  });
+    shouldSendRequest: !!agentConfigId,
+  } as SendConditionalRequestConfig);
 };
 
 export const useGetOneAgentConfigFull = (agentConfigId: string) => {

x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/enrollment_api_keys.ts

@@ -4,7 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useRequest, UseRequestConfig, sendRequest } from './use_request';
+import {
+  useRequest,
+  UseRequestConfig,
+  sendRequest,
+  useConditionalRequest,
+  SendConditionalRequestConfig,
+} from './use_request';
 import { enrollmentAPIKeyRouteService } from '../../services';
 import {
   GetOneEnrollmentAPIKeyResponse,
@@ -14,12 +20,12 @@ import {
 
 type RequestOptions = Pick<Partial<UseRequestConfig>, 'pollIntervalMs'>;
 
-export function useGetOneEnrollmentAPIKey(keyId: string, options?: RequestOptions) {
-  return useRequest<GetOneEnrollmentAPIKeyResponse>({
+export function useGetOneEnrollmentAPIKey(keyId: string | undefined) {
+  return useConditionalRequest<GetOneEnrollmentAPIKeyResponse>({
     method: 'get',
-    path: enrollmentAPIKeyRouteService.getInfoPath(keyId),
-    ...options,
-  });
+    path: keyId ? enrollmentAPIKeyRouteService.getInfoPath(keyId) : undefined,
+    shouldSendRequest: !!keyId,
+  } as SendConditionalRequestConfig);
 }
 
 export function sendGetOneEnrollmentAPIKey(keyId: string, options?: RequestOptions) {

x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/use_request.ts

@@ -3,6 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { useState, useEffect } from 'react';
 import { HttpSetup } from 'src/core/public';
 import {
   SendRequestConfig,
@@ -35,3 +36,68 @@ export const useRequest = <D = any>(config: UseRequestConfig) => {
   }
   return _useRequest<D>(httpClient, config);
 };
+
+export type SendConditionalRequestConfig =
+  | (SendRequestConfig & { shouldSendRequest: true })
+  | (Partial<SendRequestConfig> & { shouldSendRequest: false });
+
+export const useConditionalRequest = <D = any>(config: SendConditionalRequestConfig) => {
+  const [state, setState] = useState<{
+    error: Error | null;
+    data: D | null;
+    isLoading: boolean;
+  }>({
+    error: null,
+    data: null,
+    isLoading: false,
+  });
+
+  const { path, method, shouldSendRequest, query, body } = config;
+
+  async function sendGetOneEnrollmentAPIKeyRequest() {
+    if (!config.shouldSendRequest) {
+      setState({
+        data: null,
+        isLoading: false,
+        error: null,
+      });
+      return;
+    }
+
+    try {
+      setState({
+        data: null,
+        isLoading: true,
+        error: null,
+      });
+      const res = await sendRequest<D>({
+        method: config.method,
+        path: config.path,
+        query: config.query,
+        body: config.body,
+      });
+      if (res.error) {
+        throw res.error;
+      }
+      setState({
+        data: res.data,
+        isLoading: false,
+        error: null,
+      });
+      return res;
+    } catch (error) {
+      setState({
+        data: null,
+        isLoading: false,
+        error,
+      });
+    }
+  }
+
+  useEffect(() => {
+    sendGetOneEnrollmentAPIKeyRequest();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [path, method, shouldSendRequest, JSON.stringify(query), JSON.stringify(body)]);
+
+  return { ...state, sendRequest: sendGetOneEnrollmentAPIKeyRequest };
+};

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/yaml/index.tsx

@@ -45,7 +45,7 @@ export const ConfigYamlView = memo<{ config: AgentConfig }>(({ config }) => {
     page: 1,
     perPage: 1000,
   });
-  const apiKeyRequest = useGetOneEnrollmentAPIKey(apiKeysRequest.data?.list?.[0]?.id as string);
+  const apiKeyRequest = useGetOneEnrollmentAPIKey(apiKeysRequest.data?.list?.[0]?.id);
 
   if (fullConfigRequest.isLoading && !fullConfigRequest.data) {
     return <Loading />;

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_details_page/components/details_section.tsx

@@ -71,7 +71,7 @@ export const AgentDetailSection: React.FunctionComponent<Props> = ({ agent }) =>
 
   // Fetch AgentConfig information
   const { isLoading: isAgentConfigLoading, data: agentConfigData } = useGetOneAgentConfig(
-    agent.config_id as string
+    agent.config_id
   );
 
   const items = [

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

@@ -30,7 +30,7 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({
   onClose,
   agentConfigs = [],
 }) => {
-  const [selectedAPIKeyId, setSelectedAPIKeyId] = useState<string | null>(null);
+  const [selectedAPIKeyId, setSelectedAPIKeyId] = useState<string | undefined>();
 
   return (
     <EuiFlyout onClose={onClose} size="l" maxWidth={640}>

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

@@ -7,16 +7,15 @@ import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiSpacer, EuiText, EuiButtonGroup, EuiSteps } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { useEnrollmentApiKey } from '../enrollment_api_keys';
 import {
   ShellEnrollmentInstructions,
   ManualInstructions,
 } from '../../../../../components/enrollment_instructions';
-import { useCore, useGetAgents } from '../../../../../hooks';
+import { useCore, useGetAgents, useGetOneEnrollmentAPIKey } from '../../../../../hooks';
 import { Loading } from '../../../components';
 
 interface Props {
-  selectedAPIKeyId: string | null;
+  selectedAPIKeyId: string | undefined;
 }
 function useNewEnrolledAgents() {
   // New enrolled agents
@@ -44,7 +43,7 @@ export const EnrollmentInstructions: React.FunctionComponent<Props> = ({ selecte
   const core = useCore();
   const [installType, setInstallType] = useState<'quickInstall' | 'manual'>('quickInstall');
 
-  const apiKey = useEnrollmentApiKey(selectedAPIKeyId);
+  const apiKey = useGetOneEnrollmentAPIKey(selectedAPIKeyId);
 
   const newAgents = useNewEnrolledAgents();
   if (!apiKey.data) {

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

@@ -16,17 +16,16 @@ import {
   EuiFieldText,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { useEnrollmentApiKeys } from '../enrollment_api_keys';
 import { AgentConfig } from '../../../../../types';
-import { useInput, useCore, sendRequest } from '../../../../../hooks';
+import { useInput, useCore, sendRequest, useGetEnrollmentAPIKeys } from '../../../../../hooks';
 import { enrollmentAPIKeyRouteService } from '../../../../../services';
 
 interface Props {
-  onKeyChange: (keyId: string | null) => void;
+  onKeyChange: (keyId: string | undefined) => void;
   agentConfigs: AgentConfig[];
 }
 
-function useCreateApiKeyForm(configId: string | null, onSuccess: (keyId: string) => void) {
+function useCreateApiKeyForm(configId: string | undefined, onSuccess: (keyId: string) => void) {
   const { notifications } = useCore();
   const [isLoading, setIsLoading] = useState(false);
   const apiKeyNameInput = useInput('');
@@ -62,17 +61,16 @@ function useCreateApiKeyForm(configId: string | null, onSuccess: (keyId: string)
 }
 
 export const APIKeySelection: React.FunctionComponent<Props> = ({ onKeyChange, agentConfigs }) => {
-  const enrollmentAPIKeysRequest = useEnrollmentApiKeys({
-    currentPage: 1,
-    pageSize: 1000,
+  const enrollmentAPIKeysRequest = useGetEnrollmentAPIKeys({
+    page: 1,
+    perPage: 1000,
   });
 
   const [selectedState, setSelectedState] = useState<{
-    agentConfigId: string | null;
-    enrollmentAPIKeyId: string | null;
+    agentConfigId?: string;
+    enrollmentAPIKeyId?: string;
   }>({
-    agentConfigId: agentConfigs.length ? agentConfigs[0].id : null,
-    enrollmentAPIKeyId: null,
+    agentConfigId: agentConfigs.length ? agentConfigs[0].id : undefined,
   });
   const filteredEnrollmentAPIKeys = React.useMemo(() => {
     if (!selectedState.agentConfigId || !enrollmentAPIKeysRequest.data) {
@@ -99,10 +97,10 @@ export const APIKeySelection: React.FunctionComponent<Props> = ({ onKeyChange, a
 
   const [showAPIKeyForm, setShowAPIKeyForm] = useState(false);
   const apiKeyForm = useCreateApiKeyForm(selectedState.agentConfigId, async (keyId: string) => {
-    const res = await enrollmentAPIKeysRequest.refresh();
+    const res = await enrollmentAPIKeysRequest.sendRequest();
     setSelectedState({
       ...selectedState,
-      enrollmentAPIKeyId: res.data?.list.find(key => key.id === keyId)?.id ?? null,
+      enrollmentAPIKeyId: res.data?.list.find(key => key.id === keyId)?.id,
     });
     setShowAPIKeyForm(false);
   });
@@ -135,7 +133,7 @@ export const APIKeySelection: React.FunctionComponent<Props> = ({ onKeyChange, a
               onChange={e =>
                 setSelectedState({
                   agentConfigId: e.target.value,
-                  enrollmentAPIKeyId: null,
+                  enrollmentAPIKeyId: undefined,
                 })
               }
             />