[Fleet] Integrations UI: Adjust policies list UI (#101600)

* Add "Add Agent" button to package policy list

- Add button to open enrollment flyout from package policy list screen
- Move necessary components up into `public` in order to open enrollment
  flyout from within Integrations application

* Create initial package policy table actions

* Fix context menu link + add a few tests

* Fix import in list_layout

* Unify package policy actions menu in shared component

* Update x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx

Co-authored-by: Jean-Louis Leysens <jloleysens@gmail.com>

Co-authored-by: Jean-Louis Leysens <jloleysens@gmail.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/fleet/public/applications/fleet/components/index.ts

@@ -7,5 +7,4 @@
 
 export * from '../../../components';
 
-export * from './enrollment_instructions';
 export * from './search_bar';

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/actions_menu.tsx

@@ -11,8 +11,7 @@ import { EuiContextMenuItem, EuiPortal } from '@elastic/eui';
 
 import type { AgentPolicy } from '../../../types';
 import { useCapabilities } from '../../../hooks';
-import { ContextMenuActions } from '../../../components';
-import { AgentEnrollmentFlyout } from '../../agents/components';
+import { AgentEnrollmentFlyout, ContextMenuActions } from '../../../components';
 
 import { AgentPolicyYamlFlyout } from './agent_policy_yaml_flyout';
 import { AgentPolicyCopyProvider } from './agent_policy_copy_provider';

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/index.ts

@@ -11,8 +11,6 @@ export { LinkedAgentCount } from '../../../components';
 export { AgentPolicyForm, agentPolicyFormValidation } from './agent_policy_form';
 export { AgentPolicyCopyProvider } from './agent_policy_copy_provider';
 export { AgentPolicyDeleteProvider } from './agent_policy_delete_provider';
-export { PackagePolicyDeleteProvider } from './package_policy_delete_provider';
 export { AgentPolicyYamlFlyout } from './agent_policy_yaml_flyout';
 export { ConfirmDeployAgentPolicyModal } from './confirm_deploy_modal';
-export { DangerEuiContextMenuItem } from './danger_eui_context_menu_item';
 export { AgentPolicyActionMenu } from './actions_menu';

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/package_policies/package_policies_table.tsx

@@ -12,18 +12,15 @@ import type { EuiInMemoryTableProps } from '@elastic/eui';
 import {
   EuiInMemoryTable,
   EuiBadge,
-  EuiContextMenuItem,
   EuiButton,
   EuiFlexGroup,
   EuiFlexItem,
   EuiText,
 } from '@elastic/eui';
 
 import type { AgentPolicy, PackagePolicy } from '../../../../../types';
-import { PackageIcon, ContextMenuActions } from '../../../../../components';
-import { PackagePolicyDeleteProvider, DangerEuiContextMenuItem } from '../../../components';
+import { PackageIcon, PackagePolicyActionsMenu } from '../../../../../components';
 import { useCapabilities, useLink } from '../../../../../hooks';
-import { useAgentPolicyRefresh } from '../../hooks';
 
 interface InMemoryPackagePolicy extends PackagePolicy {
   packageName?: string;
@@ -54,7 +51,6 @@ export const PackagePoliciesTable: React.FunctionComponent<Props> = ({
 }) => {
   const { getHref } = useLink();
   const hasWriteCapabilities = useCapabilities().write;
-  const refreshAgentPolicy = useAgentPolicyRefresh();
 
   // With the package policies provided on input, generate the list of package policies
   // used in the InMemoryTable (flattens some values for search) as well as
@@ -168,71 +164,15 @@ export const PackagePoliciesTable: React.FunctionComponent<Props> = ({
         actions: [
           {
             render: (packagePolicy: InMemoryPackagePolicy) => {
-              const menuItems = [
-                // FIXME: implement View package policy action
-                // <EuiContextMenuItem
-                //   disabled
-                //   icon="inspect"
-                //   onClick={() => {}}
-                //   key="packagePolicyView"
-                // >
-                //   <FormattedMessage
-                //     id="xpack.fleet.policyDetails.packagePoliciesTable.viewActionTitle"
-                //     defaultMessage="View integration"
-                //   />
-                // </EuiContextMenuItem>,
-                <EuiContextMenuItem
-                  disabled={!hasWriteCapabilities}
-                  icon="pencil"
-                  href={getHref('edit_integration', {
-                    policyId: agentPolicy.id,
-                    packagePolicyId: packagePolicy.id,
-                  })}
-                  key="packagePolicyEdit"
-                >
-                  <FormattedMessage
-                    id="xpack.fleet.policyDetails.packagePoliciesTable.editActionTitle"
-                    defaultMessage="Edit integration"
-                  />
-                </EuiContextMenuItem>,
-                // FIXME: implement Copy package policy action
-                // <EuiContextMenuItem disabled icon="copy" onClick={() => {}} key="packagePolicyCopy">
-                //   <FormattedMessage
-                //     id="xpack.fleet.policyDetails.packagePoliciesTable.copyActionTitle"
-                //     defaultMessage="Copy integration"
-                //   />
-                // </EuiContextMenuItem>,
-              ];
-
-              if (!agentPolicy.is_managed) {
-                menuItems.push(
-                  <PackagePolicyDeleteProvider agentPolicy={agentPolicy} key="packagePolicyDelete">
-                    {(deletePackagePoliciesPrompt) => {
-                      return (
-                        <DangerEuiContextMenuItem
-                          disabled={!hasWriteCapabilities}
-                          icon="trash"
-                          onClick={() => {
-                            deletePackagePoliciesPrompt([packagePolicy.id], refreshAgentPolicy);
-                          }}
-                        >
-                          <FormattedMessage
-                            id="xpack.fleet.policyDetails.packagePoliciesTable.deleteActionTitle"
-                            defaultMessage="Delete integration"
-                          />
-                        </DangerEuiContextMenuItem>
-                      );
-                    }}
-                  </PackagePolicyDeleteProvider>
-                );
-              }
-              return <ContextMenuActions items={menuItems} />;
+              return (
+                <PackagePolicyActionsMenu agentPolicy={agentPolicy} packagePolicy={packagePolicy} />
+              );
             },
           },
         ],
       },
     ],
-    [agentPolicy, getHref, hasWriteCapabilities, refreshAgentPolicy]
+    [agentPolicy]
   );
 
   return (

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/settings/index.tsx

@@ -20,13 +20,13 @@ import {
   sendUpdateAgentPolicy,
   useConfig,
   sendGetAgentStatus,
+  useAgentPolicyRefresh,
 } from '../../../../../hooks';
 import {
   AgentPolicyForm,
   agentPolicyFormValidation,
   ConfirmDeployAgentPolicyModal,
 } from '../../../components';
-import { useAgentPolicyRefresh } from '../../hooks';
 
 const FormWrapper = styled.div`
   max-width: 800px;

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/hooks/index.ts

@@ -6,4 +6,3 @@
  */
 
 export { useGetAgentStatus, AgentStatusRefreshContext } from './use_agent_status';
-export { AgentPolicyRefreshContext, useAgentPolicyRefresh } from './use_config';

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx

@@ -28,6 +28,7 @@ import styled from 'styled-components';
 import type { AgentPolicy, AgentPolicyDetailsDeployAgentAction } from '../../../types';
 import { FLEET_ROUTING_PATHS } from '../../../constants';
 import {
+  AgentPolicyRefreshContext,
   useGetOneAgentPolicy,
   useLink,
   useBreadcrumbs,
@@ -39,7 +40,7 @@ import { Loading, Error } from '../../../components';
 import { WithHeaderLayout } from '../../../layouts';
 import { LinkedAgentCount, AgentPolicyActionMenu } from '../components';
 
-import { AgentPolicyRefreshContext, useGetAgentStatus, AgentStatusRefreshContext } from './hooks';
+import { useGetAgentStatus, AgentStatusRefreshContext } from './hooks';
 import { PackagePoliciesView, SettingsView } from './components';
 
 const Divider = styled.div`

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx

@@ -23,8 +23,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import type { Agent, AgentPolicy } from '../../../../../types';
 import { useKibanaVersion } from '../../../../../hooks';
 import { isAgentUpgradeable } from '../../../../../services';
-import { AgentPolicyPackageBadges } from '../../../components/agent_policy_package_badges';
-import { AgentPolicySummaryLine } from '../../../../../components';
+import { AgentPolicyPackageBadges, AgentPolicySummaryLine } from '../../../../../components';
 
 // Allows child text to be truncated
 const FlexItemWithMinWidth = styled(EuiFlexItem)`

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx

@@ -22,7 +22,6 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage, FormattedRelative } from '@kbn/i18n/react';
 
-import { AgentEnrollmentFlyout } from '../components';
 import type { Agent, AgentPolicy, SimplifiedAgentStatus } from '../../../types';
 import {
   usePagination,
@@ -37,7 +36,11 @@ import {
   useKibanaVersion,
   useStartServices,
 } from '../../../hooks';
-import { AgentPolicySummaryLine, ContextMenuActions } from '../../../components';
+import {
+  AgentEnrollmentFlyout,
+  AgentPolicySummaryLine,
+  ContextMenuActions,
+} from '../../../components';
 import { AgentStatusKueryHelper, isAgentUpgradeable } from '../../../services';
 import { AGENT_SAVED_OBJECT_TYPE } from '../../../constants';
 import {

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/fleet_server_requirement_page.tsx

@@ -26,10 +26,15 @@ import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { DownloadStep } from '../components/agent_enrollment_flyout/steps';
-import { useStartServices, useGetOutputs, sendGenerateServiceToken } from '../../../hooks';
-import { PLATFORM_OPTIONS, usePlatform } from '../hooks/use_platform';
-import type { PLATFORM_TYPE } from '../hooks/use_platform';
+import { DownloadStep } from '../../../components';
+import {
+  useStartServices,
+  useGetOutputs,
+  sendGenerateServiceToken,
+  usePlatform,
+  PLATFORM_OPTIONS,
+} from '../../../hooks';
+import type { PLATFORM_TYPE } from '../../../hooks';
 
 const FlexItemWithMinWidth = styled(EuiFlexItem)`
   min-width: 0px;

x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_reassign_policy_modal/index.tsx

@@ -24,7 +24,7 @@ import {
   useStartServices,
   useGetAgentPolicies,
 } from '../../../../hooks';
-import { AgentPolicyPackageBadges } from '../agent_policy_package_badges';
+import { AgentPolicyPackageBadges } from '../../../../components';
 
 interface Props {
   onClose: () => void;

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

@@ -7,7 +7,6 @@
 
 export * from './loading';
 export * from './agent_reassign_policy_modal';
-export * from './agent_enrollment_flyout';
 export * from './agent_health';
 export * from './agent_unenroll_modal';
 export * from './agent_upgrade_modal';

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

@@ -14,7 +14,7 @@ import { useRouteMatch } from 'react-router-dom';
 import { FLEET_ROUTING_PATHS } from '../../../constants';
 import { WithHeaderLayout } from '../../../layouts';
 import { useCapabilities, useLink, useGetAgentPolicies } from '../../../hooks';
-import { AgentEnrollmentFlyout } from '../components';
+import { AgentEnrollmentFlyout } from '../../../components';
 
 export const ListLayout: React.FunctionComponent<{}> = ({ children }) => {
   const { getHref } = useLink();

x-pack/plugins/fleet/public/applications/fleet/sections/agents/enrollment_token_list_page/index.tsx

@@ -22,6 +22,7 @@ import {
 import { FormattedMessage, FormattedDate } from '@kbn/i18n/react';
 
 import { ENROLLMENT_API_KEYS_INDEX } from '../../../constants';
+import { NewEnrollmentTokenModal } from '../../../components';
 import {
   useBreadcrumbs,
   usePagination,
@@ -34,7 +35,6 @@ import {
 import type { EnrollmentAPIKey, GetAgentPoliciesResponseItem } from '../../../types';
 import { SearchBar } from '../../../components/search_bar';
 
-import { NewEnrollmentTokenModal } from './components/new_enrollment_key_modal';
 import { ConfirmEnrollmentTokenDelete } from './components/confirm_delete_modal';
 
 const ApiKeyField: React.FunctionComponent<{ apiKeyId: string }> = ({ apiKeyId }) => {

x-pack/plugins/fleet/public/applications/fleet/sections/overview/index.tsx

@@ -20,7 +20,7 @@ import { i18n } from '@kbn/i18n';
 
 import { WithHeaderLayout } from '../../layouts';
 import { useGetAgentPolicies, useBreadcrumbs } from '../../hooks';
-import { AgentEnrollmentFlyout } from '../agents/components';
+import { AgentEnrollmentFlyout } from '../../components';
 
 import { OverviewAgentSection } from './components/agent_section';
 import { OverviewPolicySection } from './components/agent_policy_section';

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx

@@ -202,12 +202,30 @@ describe('when on integration detail', () => {
       expect(firstRowAgentCount.tagName).not.toEqual('A');
     });
 
+    it('should show add agent button if agent count is zero', async () => {
+      await mockedApi.waitForApi();
+      const firstRowAgentCount = renderResult.getAllByTestId('rowAgentCount')[0];
+      expect(firstRowAgentCount.textContent).toEqual('0');
+
+      const addAgentButton = renderResult.getAllByTestId('addAgentButton')[0];
+      expect(addAgentButton).not.toBeNull();
+    });
+
     it('should show link for agent count if greater than zero', async () => {
       await mockedApi.waitForApi();
       const secondRowAgentCount = renderResult.getAllByTestId('rowAgentCount')[1];
       expect(secondRowAgentCount.textContent).toEqual('100');
       expect(secondRowAgentCount.tagName).toEqual('A');
     });
+
+    it('should NOT show add agent button if agent count is greater than zero', async () => {
+      await mockedApi.waitForApi();
+      const secondRowAgentCount = renderResult.getAllByTestId('rowAgentCount')[1];
+      expect(secondRowAgentCount.textContent).toEqual('100');
+
+      const addAgentButton = renderResult.getAllByTestId('addAgentButton')[1];
+      expect(addAgentButton).toBeUndefined();
+    });
   });
 });