diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/agent_config.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/agent_config.ts
index d16d835f8c701..bed3f994005ad 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/agent_config.ts
+++ b/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) => {
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/enrollment_api_keys.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/enrollment_api_keys.ts
index e4abb4ccd22cb..10d9e03e986e1 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/enrollment_api_keys.ts
+++ b/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) {
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/use_request.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/use_request.ts
index c63383637e792..fbbc482fb96af 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/use_request.ts
+++ b/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 };
+};
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/yaml/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/yaml/index.tsx
index ad27c590d5eaa..f1d7bd5dbc039 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/yaml/index.tsx
+++ b/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 />;
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_details_page/components/details_section.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_details_page/components/details_section.tsx
index 653e2eb9a3a3b..b69dd6bcf8431 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_details_page/components/details_section.tsx
+++ b/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 = [
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 9c14a2e9dfed1..dd34e7260b27b 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
@@ -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}>
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 a0244c601cd96..1d2f3bd155622 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
@@ -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) {
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 89801bc6bee1e..67930e51418b0 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
@@ -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,
                 })
               }
             />
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/enrollment_api_keys/confirm_delete_modal.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/enrollment_api_keys/confirm_delete_modal.tsx
deleted file mode 100644
index 8ce20a85e14b8..0000000000000
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/enrollment_api_keys/confirm_delete_modal.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import { EuiOverlayMask, EuiConfirmModal } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-
-export const ConfirmDeleteModal: React.FunctionComponent<{
-  onConfirm: () => void;
-  onCancel: () => void;
-  apiKeyId: string;
-}> = ({ onConfirm, onCancel, apiKeyId }) => {
-  return (
-    <EuiOverlayMask>
-      <EuiConfirmModal
-        title={
-          <FormattedMessage
-            id="xpack.ingestManager.deleteApiKeys.confirmModal.title"
-            defaultMessage="Delete api key: {apiKeyId}"
-            values={{
-              apiKeyId,
-            }}
-          />
-        }
-        onCancel={onCancel}
-        onConfirm={onConfirm}
-        cancelButtonText={
-          <FormattedMessage
-            id="xpack.ingestManager.deleteApiKeys.confirmModal.cancelButtonLabel"
-            defaultMessage="Cancel"
-          />
-        }
-        confirmButtonText={
-          <FormattedMessage
-            id="xpack.ingestManager.deleteApiKeys.confirmModal.confirmButtonLabel"
-            defaultMessage="Delete"
-          />
-        }
-        buttonColor="danger"
-      />
-    </EuiOverlayMask>
-  );
-};
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/enrollment_api_keys/create_api_key_form.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/enrollment_api_keys/create_api_key_form.tsx
deleted file mode 100644
index 009080a4da186..0000000000000
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/enrollment_api_keys/create_api_key_form.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiFieldText,
-  EuiButton,
-  EuiSelect,
-} from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
-import { useInput, sendRequest } from '../../../../../hooks';
-import { useConfigs } from './hooks';
-import { enrollmentAPIKeyRouteService } from '../../../../../services';
-
-export const CreateApiKeyForm: React.FunctionComponent<{ onChange: () => void }> = ({
-  onChange,
-}) => {
-  const { data: configs } = useConfigs();
-  const { inputs, onSubmit, submitted } = useCreateApiKey(() => onChange());
-
-  return (
-    <EuiFlexGroup style={{ maxWidth: 600 }}>
-      <EuiFlexItem>
-        <EuiFormRow
-          label={i18n.translate('xpack.ingestManager.apiKeysForm.nameLabel', {
-            defaultMessage: 'Key Name',
-          })}
-        >
-          <EuiFieldText autoComplete={'false'} {...inputs.nameInput.props} />
-        </EuiFormRow>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiFormRow
-          label={i18n.translate('xpack.ingestManager.apiKeysForm.configLabel', {
-            defaultMessage: 'Config',
-          })}
-        >
-          <EuiSelect
-            {...inputs.configIdInput.props}
-            options={configs.map(config => ({
-              value: config.id,
-              text: config.name,
-            }))}
-          />
-        </EuiFormRow>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiFormRow hasEmptyLabelSpace>
-          <EuiButton disabled={submitted} onClick={() => onSubmit()}>
-            <FormattedMessage
-              id="xpack.ingestManager.apiKeysForm.saveButton"
-              defaultMessage="Save"
-            />
-          </EuiButton>
-        </EuiFormRow>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-};
-
-function useCreateApiKey(onSuccess: () => void) {
-  const [submitted, setSubmitted] = React.useState(false);
-  const inputs = {
-    nameInput: useInput(),
-    configIdInput: useInput('default'),
-  };
-
-  const onSubmit = async () => {
-    setSubmitted(true);
-    await sendRequest({
-      method: 'post',
-      path: enrollmentAPIKeyRouteService.getCreatePath(),
-      body: JSON.stringify({
-        name: inputs.nameInput.value,
-        config_id: inputs.configIdInput.value,
-      }),
-    });
-    setSubmitted(false);
-    onSuccess();
-  };
-
-  return {
-    inputs,
-    onSubmit,
-    submitted,
-  };
-}
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/enrollment_api_keys/hooks.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/enrollment_api_keys/hooks.tsx
deleted file mode 100644
index 41c6b5912cd31..0000000000000
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/enrollment_api_keys/hooks.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import {
-  Pagination,
-  useGetAgentConfigs,
-  useGetEnrollmentAPIKeys,
-  useGetOneEnrollmentAPIKey,
-} from '../../../../../hooks';
-
-export function useEnrollmentApiKeys(pagination: Pagination) {
-  const request = useGetEnrollmentAPIKeys({
-    page: pagination.currentPage,
-    perPage: pagination.pageSize,
-  });
-
-  return {
-    data: request.data,
-    isLoading: request.isLoading,
-    refresh: () => request.sendRequest(),
-  };
-}
-
-export function useConfigs() {
-  const request = useGetAgentConfigs();
-
-  return {
-    data: request.data ? request.data.items : [],
-    isLoading: request.isLoading,
-  };
-}
-
-export function useEnrollmentApiKey(apiKeyId: string | null) {
-  const request = useGetOneEnrollmentAPIKey(apiKeyId as string);
-
-  return {
-    data: request.data,
-    isLoading: request.isLoading,
-  };
-}
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/enrollment_api_keys/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/enrollment_api_keys/index.tsx
deleted file mode 100644
index 19957e7827680..0000000000000
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/enrollment_api_keys/index.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-import React, { useState } from 'react';
-import { EuiBasicTable, EuiButtonEmpty, EuiSpacer, EuiPopover, EuiLink } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-import { i18n } from '@kbn/i18n';
-import { usePagination, sendRequest } from '../../../../../hooks';
-import { useEnrollmentApiKeys, useEnrollmentApiKey } from './hooks';
-import { ConfirmDeleteModal } from './confirm_delete_modal';
-import { CreateApiKeyForm } from './create_api_key_form';
-import { EnrollmentAPIKey } from '../../../../../types';
-import { useCapabilities } from '../../../../../hooks';
-import { enrollmentAPIKeyRouteService } from '../../../../../services';
-export { useEnrollmentApiKeys, useEnrollmentApiKey } from './hooks';
-
-export const EnrollmentApiKeysTable: React.FunctionComponent<{
-  onChange: () => void;
-}> = ({ onChange }) => {
-  const [confirmDeleteApiKeyId, setConfirmDeleteApiKeyId] = useState<string | null>(null);
-  const { pagination } = usePagination();
-  const { data, isLoading, refresh } = useEnrollmentApiKeys(pagination);
-
-  const columns: any[] = [
-    {
-      field: 'name',
-      name: i18n.translate('xpack.ingestManager.apiKeysList.nameColumnTitle', {
-        defaultMessage: 'Name',
-      }),
-      width: '300px',
-    },
-    {
-      field: 'config_id',
-      name: i18n.translate('xpack.ingestManager.apiKeysList.configColumnTitle', {
-        defaultMessage: 'Config',
-      }),
-      width: '100px',
-    },
-    {
-      field: null,
-      name: i18n.translate('xpack.ingestManager.apiKeysList.apiKeyColumnTitle', {
-        defaultMessage: 'API Key',
-      }),
-      render: (key: EnrollmentAPIKey) => <ApiKeyField apiKeyId={key.id} />,
-    },
-    {
-      field: null,
-      width: '50px',
-      render: (key: EnrollmentAPIKey) => {
-        return (
-          <EuiButtonEmpty onClick={() => setConfirmDeleteApiKeyId(key.id)} iconType={'trash'} />
-        );
-      },
-    },
-  ];
-
-  return (
-    <>
-      {confirmDeleteApiKeyId && (
-        <ConfirmDeleteModal
-          apiKeyId={confirmDeleteApiKeyId}
-          onCancel={() => setConfirmDeleteApiKeyId(null)}
-          onConfirm={async () => {
-            await sendRequest({
-              method: 'delete',
-              path: enrollmentAPIKeyRouteService.getDeletePath(confirmDeleteApiKeyId),
-            });
-            setConfirmDeleteApiKeyId(null);
-            refresh();
-          }}
-        />
-      )}
-      <EuiBasicTable
-        compressed={true}
-        loading={isLoading}
-        noItemsMessage={
-          <FormattedMessage
-            id="xpack.ingestManager.apiKeysList.emptyEnrollmentKeysMessage"
-            defaultMessage="No api keys"
-          />
-        }
-        items={data ? data.list : []}
-        itemId="id"
-        columns={columns}
-      />
-      <EuiSpacer size={'s'} />
-      <CreateApiKeyButton
-        onChange={() => {
-          refresh();
-          onChange();
-        }}
-      />
-    </>
-  );
-};
-
-export const CreateApiKeyButton: React.FunctionComponent<{ onChange: () => void }> = ({
-  onChange,
-}) => {
-  const hasWriteCapabilites = useCapabilities().write;
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  return (
-    <EuiPopover
-      ownFocus
-      button={
-        <EuiLink disabled={!hasWriteCapabilites} onClick={() => setIsOpen(true)} color="primary">
-          <FormattedMessage
-            id="xpack.ingestManager.enrollmentApiKeyList.createNewButton"
-            defaultMessage="Create a new key"
-          />
-        </EuiLink>
-      }
-      isOpen={isOpen}
-      closePopover={() => setIsOpen(false)}
-    >
-      <CreateApiKeyForm
-        onChange={() => {
-          setIsOpen(false);
-          onChange();
-        }}
-      />
-    </EuiPopover>
-  );
-  return <></>;
-};
-
-const ApiKeyField: React.FunctionComponent<{ apiKeyId: string }> = ({ apiKeyId }) => {
-  const [visible, setVisible] = useState(false);
-  const { data } = useEnrollmentApiKey(apiKeyId);
-
-  return (
-    <>
-      {visible && data ? data.item.api_key : '••••••••••••••••••••••••••••'}
-      <EuiButtonEmpty size="xs" color={'text'} onClick={() => setVisible(!visible)}>
-        {visible ? (
-          <FormattedMessage
-            id="xpack.ingestManager.enrollmentApiKeyList.hideTableButton"
-            defaultMessage="Hide"
-          />
-        ) : (
-          <FormattedMessage
-            id="xpack.ingestManager.enrollmentApiKeyList.viewTableButton"
-            defaultMessage="View"
-          />
-        )}
-      </EuiButtonEmpty>{' '}
-    </>
-  );
-};
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_reassign_config_flyout/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_reassign_config_flyout/index.tsx
index 11a049047b787..692c60cdce38c 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_reassign_config_flyout/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_reassign_config_flyout/index.tsx
@@ -45,7 +45,7 @@ export const AgentReassignConfigFlyout: React.FunctionComponent<Props> = ({ onCl
   const agentConfigsRequest = useGetAgentConfigs();
   const agentConfigs = agentConfigsRequest.data ? agentConfigsRequest.data.items : [];
 
-  const agentConfigRequest = useGetOneAgentConfig(selectedAgentConfigId as string);
+  const agentConfigRequest = useGetOneAgentConfig(selectedAgentConfigId);
   const agentConfig = agentConfigRequest.data ? agentConfigRequest.data.item : null;
 
   const [isSubmitting, setIsSubmitting] = useState(false);
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index ac074d99e9ff5..25f2106896a09 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -8325,13 +8325,6 @@
     "xpack.ingestManager.agentListStatus.offlineLabel": "オフライン",
     "xpack.ingestManager.agentListStatus.onlineLabel": "オンライン",
     "xpack.ingestManager.agentListStatus.totalLabel": "エージェント",
-    "xpack.ingestManager.apiKeysForm.configLabel": "構成",
-    "xpack.ingestManager.apiKeysForm.nameLabel": "キー名",
-    "xpack.ingestManager.apiKeysForm.saveButton": "保存",
-    "xpack.ingestManager.apiKeysList.apiKeyColumnTitle": "API キー",
-    "xpack.ingestManager.apiKeysList.configColumnTitle": "構成",
-    "xpack.ingestManager.apiKeysList.emptyEnrollmentKeysMessage": "API キーがありません",
-    "xpack.ingestManager.apiKeysList.nameColumnTitle": "名前",
     "xpack.ingestManager.appNavigation.configurationsLinkText": "構成",
     "xpack.ingestManager.appNavigation.fleetLinkText": "フリート",
     "xpack.ingestManager.appNavigation.overviewLinkText": "概要",
@@ -8410,8 +8403,6 @@
     "xpack.ingestManager.deleteAgentConfigs.successMultipleNotificationTitle": "{count} 件のエージェント構成を削除しました",
     "xpack.ingestManager.deleteAgentConfigs.successSingleNotificationTitle": "エージェント構成「{id}」を削除しました",
     "xpack.ingestManager.deleteApiKeys.confirmModal.cancelButtonLabel": "キャンセル",
-    "xpack.ingestManager.deleteApiKeys.confirmModal.confirmButtonLabel": "削除",
-    "xpack.ingestManager.deleteApiKeys.confirmModal.title": "API キーを削除: {apiKeyId}",
     "xpack.ingestManager.deleteDatasource.confirmModal.affectedAgentsMessage": "{agentConfigName} が一部のエージェントで既に使用されていることをフリートが検出しました。",
     "xpack.ingestManager.deleteDatasource.confirmModal.affectedAgentsTitle": "このアクションは {agentsCount} {agentsCount, plural, one {# エージェント} other {# エージェント}}に影響します",
     "xpack.ingestManager.deleteDatasource.confirmModal.cancelButtonLabel": "キャンセル",
@@ -8434,9 +8425,7 @@
     "xpack.ingestManager.editConfig.successNotificationTitle": "エージェント構成「{name}」を更新しました",
     "xpack.ingestManager.enrollmentApiKeyForm.namePlaceholder": "名前を選択",
     "xpack.ingestManager.enrollmentApiKeyList.createNewButton": "新規キーを作成",
-    "xpack.ingestManager.enrollmentApiKeyList.hideTableButton": "を非表示",
     "xpack.ingestManager.enrollmentApiKeyList.useExistingsButton": "既存のキーを使用",
-    "xpack.ingestManager.enrollmentApiKeyList.viewTableButton": "表示",
     "xpack.ingestManager.epm.addDatasourceButtonText": "データソースを作成",
     "xpack.ingestManager.epm.pageSubtitle": "人気のアプリやサービスのパッケージを参照する",
     "xpack.ingestManager.epm.pageTitle": "Elastic Package Manager",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 60b958623bdc7..844b0a4223b02 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -8328,13 +8328,6 @@
     "xpack.ingestManager.agentListStatus.offlineLabel": "脱机",
     "xpack.ingestManager.agentListStatus.onlineLabel": "联机",
     "xpack.ingestManager.agentListStatus.totalLabel": "代理",
-    "xpack.ingestManager.apiKeysForm.configLabel": "配置",
-    "xpack.ingestManager.apiKeysForm.nameLabel": "密钥名称",
-    "xpack.ingestManager.apiKeysForm.saveButton": "保存",
-    "xpack.ingestManager.apiKeysList.apiKeyColumnTitle": "API 密钥",
-    "xpack.ingestManager.apiKeysList.configColumnTitle": "配置",
-    "xpack.ingestManager.apiKeysList.emptyEnrollmentKeysMessage": "无 API 密钥",
-    "xpack.ingestManager.apiKeysList.nameColumnTitle": "名称",
     "xpack.ingestManager.appNavigation.configurationsLinkText": "配置",
     "xpack.ingestManager.appNavigation.fleetLinkText": "Fleet",
     "xpack.ingestManager.appNavigation.overviewLinkText": "概览",
@@ -8413,8 +8406,6 @@
     "xpack.ingestManager.deleteAgentConfigs.successMultipleNotificationTitle": "已删除 {count} 个代理配置",
     "xpack.ingestManager.deleteAgentConfigs.successSingleNotificationTitle": "已删除代理配置“{id}”",
     "xpack.ingestManager.deleteApiKeys.confirmModal.cancelButtonLabel": "取消",
-    "xpack.ingestManager.deleteApiKeys.confirmModal.confirmButtonLabel": "删除",
-    "xpack.ingestManager.deleteApiKeys.confirmModal.title": "删除 api 密钥：{apiKeyId}",
     "xpack.ingestManager.deleteDatasource.confirmModal.affectedAgentsMessage": "Fleet 已检测到 {agentConfigName} 已由您的部分代理使用。",
     "xpack.ingestManager.deleteDatasource.confirmModal.affectedAgentsTitle": "此操作将影响 {agentsCount} 个 {agentsCount, plural, one {代理} other {代理}}。",
     "xpack.ingestManager.deleteDatasource.confirmModal.cancelButtonLabel": "取消",
@@ -8437,9 +8428,7 @@
     "xpack.ingestManager.editConfig.successNotificationTitle": "代理配置“{name}”已更新",
     "xpack.ingestManager.enrollmentApiKeyForm.namePlaceholder": "选择名称",
     "xpack.ingestManager.enrollmentApiKeyList.createNewButton": "创建新密钥",
-    "xpack.ingestManager.enrollmentApiKeyList.hideTableButton": "隐藏",
     "xpack.ingestManager.enrollmentApiKeyList.useExistingsButton": "使用现有密钥",
-    "xpack.ingestManager.enrollmentApiKeyList.viewTableButton": "查看",
     "xpack.ingestManager.epm.addDatasourceButtonText": "创建数据源",
     "xpack.ingestManager.epm.pageSubtitle": "浏览热门应用和服务的软件。",
     "xpack.ingestManager.epm.pageTitle": "Elastic Package Manager",