Add enroll agent action to config action menu (#68840)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/actions_menu.tsx

@@ -6,22 +6,32 @@
 import React, { memo, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiContextMenuItem, EuiPortal } from '@elastic/eui';
-import { useCapabilities, useLink } from '../../../hooks';
+import { AgentConfig } from '../../../types';
+import { useCapabilities } from '../../../hooks';
 import { ContextMenuActions } from '../../../components';
+import { AgentEnrollmentFlyout } from '../../fleet/components';
 import { ConfigYamlFlyout } from './config_yaml_flyout';
 
-export const AgentConfigActionMenu = memo<{ configId: string; fullButton?: boolean }>(
-  ({ configId, fullButton = false }) => {
-    const { getHref } = useLink();
+export const AgentConfigActionMenu = memo<{ config: AgentConfig; fullButton?: boolean }>(
+  ({ config, fullButton = false }) => {
     const hasWriteCapabilities = useCapabilities().write;
     const [isYamlFlyoutOpen, setIsYamlFlyoutOpen] = useState<boolean>(false);
+    const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState<boolean>(false);
     return (
       <>
         {isYamlFlyoutOpen ? (
           <EuiPortal>
-            <ConfigYamlFlyout configId={configId} onClose={() => setIsYamlFlyoutOpen(false)} />
+            <ConfigYamlFlyout configId={config.id} onClose={() => setIsYamlFlyoutOpen(false)} />
           </EuiPortal>
         ) : null}
+        {isEnrollmentFlyoutOpen && (
+          <EuiPortal>
+            <AgentEnrollmentFlyout
+              agentConfigs={[config]}
+              onClose={() => setIsEnrollmentFlyoutOpen(false)}
+            />
+          </EuiPortal>
+        )}
         <ContextMenuActions
           button={
             fullButton
@@ -40,6 +50,17 @@ export const AgentConfigActionMenu = memo<{ configId: string; fullButton?: boole
               : undefined
           }
           items={[
+            <EuiContextMenuItem
+              disabled={!hasWriteCapabilities}
+              icon="plusInCircle"
+              onClick={() => setIsEnrollmentFlyoutOpen(true)}
+              key="enrollAgents"
+            >
+              <FormattedMessage
+                id="xpack.ingestManager.agentConfigActionMenu.enrollAgentActionText"
+                defaultMessage="Enroll agent"
+              />
+            </EuiContextMenuItem>,
             <EuiContextMenuItem
               icon="inspect"
               onClick={() => setIsYamlFlyoutOpen(!isYamlFlyoutOpen)}
@@ -50,17 +71,6 @@ export const AgentConfigActionMenu = memo<{ configId: string; fullButton?: boole
                 defaultMessage="View config"
               />
             </EuiContextMenuItem>,
-            <EuiContextMenuItem
-              disabled={!hasWriteCapabilities}
-              icon="plusInCircle"
-              href={getHref('add_datasource_from_configuration', { configId })}
-              key="createDatasource"
-            >
-              <FormattedMessage
-                id="xpack.ingestManager.agentConfigActionMenu.createDatasourceActionText"
-                defaultMessage="Add data source"
-              />
-            </EuiContextMenuItem>,
           ]}
         />
       </>

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

@@ -147,7 +147,9 @@ export const AgentConfigDetailsPage: React.FunctionComponent = () => {
           },
           { isDivider: true },
           {
-            content: agentConfig && <AgentConfigActionMenu configId={configId} fullButton={true} />,
+            content: agentConfig && (
+              <AgentConfigActionMenu config={agentConfig} fullButton={true} />
+            ),
           },
         ].map((item, index) => (
           <EuiFlexItem grow={false} key={index}>

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/list_page/index.tsx

@@ -189,7 +189,7 @@ export const AgentConfigListPage: React.FunctionComponent<{}> = () => {
         }),
         actions: [
           {
-            render: (config: AgentConfig) => <AgentConfigActionMenu configId={config.id} />,
+            render: (config: AgentConfig) => <AgentConfigActionMenu config={config} />,
           },
         ],
       },

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

@@ -112,7 +112,7 @@ export const ListLayout: React.FunctionComponent<{}> = ({ children }) => {
             <EuiButton fill iconType="plusInCircle" onClick={() => setIsEnrollmentFlyoutOpen(true)}>
               <FormattedMessage
                 id="xpack.ingestManager.agentList.enrollButton"
-                defaultMessage="Enroll new agents"
+                defaultMessage="Enroll new agent"
               />
             </EuiButton>
           </EuiFlexItem>