Add e2e for the apm integration policy form

.buildkite/pipelines/flaky_tests/groups.json

@@ -25,6 +25,10 @@
       "key": "xpack/cypress/fleet_cypress",
       "name": "Fleet - Cypress"
     },
+    {
+      "key": "xpack/cypress/apm_cypress",
+      "name": "APM - Cypress"
+    },
     {
       "key": "xpack/cigroup",
       "name": "Default CI Group",
@@ -43,4 +47,4 @@
       "name": "Default Accessibility"
     }
   ]
-}
+}

x-pack/plugins/apm/ftr_e2e/cypress/integration/power_user/integration_settings/integration_policy.spec.ts

@@ -0,0 +1,138 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+const integrationsPoliciesPath = '/app/integrations/detail/apm/policies';
+const policyName = 'apm-integration';
+const description = 'integration description';
+const host = 'myhost:8200';
+const url = 'http://myhost:8200';
+
+const policyFormFields = [
+  {
+    selector: 'packagePolicyNameInput',
+    value: 'apm-integration',
+    required: true,
+  },
+  {
+    selector: 'packagePolicyDescriptionInput',
+    value: 'apm policy descrtiption',
+    required: false,
+  },
+  {
+    selector: 'packagePolicyHostInput',
+    value: 'myhost:8200',
+    required: true,
+  },
+  {
+    selector: 'packagePolicyUrlInput',
+    value: 'http://myhost:8200',
+    required: true,
+  },
+];
+
+const apisToIntercept = [
+  {
+    endpoint: 'api/fleet/agent_policies*',
+    name: 'fleetAgentPolicies',
+    method: 'POST',
+  },
+  {
+    endpoint: 'api/fleet/agent_status*',
+    name: 'fleetAgentStatus',
+    method: 'GET',
+  },
+  {
+    endpoint: 'api/fleet/package_policies',
+    name: 'fleetPackagePolicies',
+    method: 'POST',
+  },
+];
+
+describe('when navigating to integration page', () => {
+  beforeEach(() => {
+    const integrationsPath = '/app/integrations/browse';
+
+    cy.loginAsPowerUser();
+    cy.visit(integrationsPath);
+
+    // open integration policy form
+    cy.get('[data-test-subj="integration-card:epr:apm:featured').click();
+    cy.contains('Elastic APM in Fleet').click();
+    cy.contains('a', 'APM integration').click();
+    cy.get('[data-test-subj="addIntegrationPolicyButton"]').click();
+  });
+
+  it('checks validators for required fields', () => {
+    const requiredFields = policyFormFields.filter((field) => field.required);
+
+    requiredFields.map((field) => {
+      cy.get(`[data-test-subj="${field.selector}"`).clear();
+      cy.get('[data-test-subj="createPackagePolicySaveButton"').should(
+        'be.disabled'
+      );
+      cy.get(`[data-test-subj="${field.selector}"`).type(field.value);
+    });
+  });
+
+  it('adds a new policy without agent', () => {
+    apisToIntercept.map(({ endpoint, method, name }) => {
+      cy.intercept(method, endpoint).as(name);
+    });
+
+    cy.url().should('include', 'app/fleet/integrations/apm/add-integration');
+    policyFormFields.map((field) => {
+      cy.get(`[data-test-subj="${field.selector}"`).clear().type(field.value);
+    });
+    cy.contains('Save and continue').click();
+    cy.wait('@fleetAgentPolicies');
+    cy.wait('@fleetAgentStatus');
+    cy.wait('@fleetPackagePolicies');
+
+    cy.get('[data-test-subj="confirmModalCancelButton').click();
+
+    cy.url().should('include', '/app/integrations/detail/apm/policies');
+    cy.contains(policyName);
+  });
+
+  it('updates an existing policy', () => {
+    apisToIntercept.map(({ endpoint, method, name }) => {
+      cy.intercept(method, endpoint).as(name);
+    });
+
+    policyFormFields.map((field) => {
+      cy.get(`[data-test-subj="${field.selector}"`)
+        .clear()
+        .type(`${field.value}-new`);
+    });
+
+    cy.contains('Save and continue').click();
+    cy.wait('@fleetAgentPolicies');
+    cy.wait('@fleetAgentStatus');
+    cy.wait('@fleetPackagePolicies');
+
+    cy.get('[data-test-subj="confirmModalCancelButton').click();
+    cy.contains(`${policyName}-new`).click();
+
+    policyFormFields.map((field) => {
+      cy.get(`[data-test-subj="${field.selector}"`)
+        .clear()
+        .type(`${field.value}-updated`);
+    });
+    cy.contains('Save integration').click();
+    cy.contains(`${policyName}-updated`);
+  });
+
+  it('should display Tail-based section on latest version', () => {
+    cy.visit('/app/fleet/integrations/apm/add-integration');
+    cy.contains('Tail-based sampling').should('exist');
+  });
+
+  it('should hide Tail-based section for 8.0.0 apm package', () => {
+    cy.visit('/app/fleet/integrations/apm-8.0.0/add-integration');
+    cy.contains('Tail-based sampling').should('not.exist');
+  });
+});

x-pack/plugins/apm/public/components/fleet_integration/apm_policy_form/settings_definition/apm_settings.ts

@@ -31,7 +31,7 @@ export function getApmSettings(): SettingsRow[] {
             'Host defines the host and port the server is listening on. URL is the unchangeable, publicly reachable server URL for deployments on Elastic Cloud or ECK.',
         }
       ),
-
+      dataTestSubj: 'packagePolicyHostInput',
       required: true,
     },
     {
@@ -44,6 +44,7 @@ export function getApmSettings(): SettingsRow[] {
           defaultMessage: 'URL',
         }
       ),
+      dataTestSubj: 'packagePolicyUrlInput',
       required: true,
     },
     {

x-pack/plugins/apm/public/components/fleet_integration/apm_policy_form/settings_form/form_row_setting.tsx

@@ -45,6 +45,7 @@ export function FormRowSetting({ row, value, onChange, isDisabled }: Props) {
     case 'boolean': {
       return (
         <EuiSwitch
+          data-test-subj={row.dataTestSubj}
           disabled={isDisabled}
           label={row.placeholder || (value ? ENABLED_LABEL : DISABLED_LABEL)}
           checked={value}
@@ -58,6 +59,7 @@ export function FormRowSetting({ row, value, onChange, isDisabled }: Props) {
     case 'text': {
       return (
         <EuiFieldText
+          data-test-subj={row.dataTestSubj}
           disabled={isDisabled}
           value={value}
           prepend={isDisabled ? <EuiIcon type="lock" /> : undefined}
@@ -70,6 +72,7 @@ export function FormRowSetting({ row, value, onChange, isDisabled }: Props) {
     case 'area': {
       return (
         <EuiTextArea
+          data-test-subj={row.dataTestSubj}
           disabled={isDisabled}
           value={value}
           onChange={(e) => {
@@ -82,6 +85,7 @@ export function FormRowSetting({ row, value, onChange, isDisabled }: Props) {
     case 'integer': {
       return (
         <EuiFieldNumber
+          data-test-subj={row.dataTestSubj}
           disabled={isDisabled}
           value={value}
           onChange={(e) => {
@@ -96,6 +100,7 @@ export function FormRowSetting({ row, value, onChange, isDisabled }: Props) {
         : [];
       return (
         <EuiComboBox
+          data-test-subj={row.dataTestSubj}
           noSuggestions
           placeholder={i18n.translate(
             'xpack.apm.fleet_integration.settings.selectOrCreateOptions',

x-pack/plugins/apm/public/components/fleet_integration/apm_policy_form/typings.ts

@@ -47,6 +47,7 @@ export interface BasicSettingRow {
   labelAppend?: string;
   labelAppendLink?: string;
   labelAppendLinkText?: string;
+  dataTestSubj?: string;
   settings?: SettingsRow[];
   validation?: SettingValidation;
   required?: boolean;

x-pack/plugins/apm/scripts/create_apm_users_and_roles/roles/power_user_role.ts

@@ -67,6 +67,7 @@ export const powerUserRole: RoleType = {
         savedObjectsManagement: ['all'],
         stackAlerts: ['all'],
         fleet: ['all'],
+        fleetv2: ['all'],
         actions: ['all'],
       },
       spaces: ['*'],