[APM] Service environment should be selected when you edit the agent …

…configuration (#129929) (#130034)

* fixing env selected

* lets see if it works now

* fixing test

(cherry picked from commit a395f41)

Co-authored-by: Cauê Marcondes <55978943+cauemarcondes@users.noreply.github.com>

x-pack/plugins/apm/ftr_e2e/cypress/integration/power_user/settings/agent_configurations.spec.ts

@@ -0,0 +1,106 @@
+/*
+ * 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.
+ */
+import { apm, timerange } from '@elastic/apm-synthtrace';
+import url from 'url';
+import { synthtrace } from '../../../../synthtrace';
+
+const timeRange = {
+  rangeFrom: '2021-10-10T00:00:00.000Z',
+  rangeTo: '2021-10-10T00:15:00.000Z',
+};
+
+const agentConfigHref = url.format({
+  pathname: '/app/apm/settings/agent-configuration',
+});
+
+function generateData({
+  from,
+  to,
+  serviceName,
+}: {
+  from: number;
+  to: number;
+  serviceName: string;
+}) {
+  const range = timerange(from, to);
+
+  const service1 = apm
+    .service(serviceName, 'production', 'java')
+    .instance('service-1-prod-1')
+    .podId('service-1-prod-1-pod');
+
+  const service2 = apm
+    .service(serviceName, 'development', 'nodejs')
+    .instance('opbeans-node-prod-1');
+
+  return range
+    .interval('1m')
+    .rate(1)
+    .spans((timestamp, index) => [
+      ...service1
+        .transaction('GET /apple 🍎 ')
+        .timestamp(timestamp)
+        .duration(1000)
+        .success()
+        .serialize(),
+      ...service2
+        .transaction('GET /banana 🍌')
+        .timestamp(timestamp)
+        .duration(500)
+        .success()
+        .serialize(),
+    ]);
+}
+
+describe('Agent configuration', () => {
+  before(async () => {
+    const { rangeFrom, rangeTo } = timeRange;
+
+    await synthtrace.index(
+      generateData({
+        from: new Date(rangeFrom).getTime(),
+        to: new Date(rangeTo).getTime(),
+        serviceName: 'opbeans-node',
+      })
+    );
+  });
+
+  after(async () => {
+    await synthtrace.clean();
+  });
+
+  beforeEach(() => {
+    cy.loginAsPowerUser();
+    cy.visit(agentConfigHref);
+  });
+
+  it('persists service enviroment when clicking on edit button', () => {
+    cy.intercept(
+      'GET',
+      '/api/apm/settings/agent-configuration/environments?*'
+    ).as('serviceEnvironmentApi');
+    cy.contains('Create configuration').click();
+    cy.get('[data-test-subj="serviceNameComboBox"]')
+      .click()
+      .type('opbeans-node')
+      .type('{enter}');
+
+    cy.contains('opbeans-node').realClick();
+    cy.wait('@serviceEnvironmentApi');
+
+    cy.get('[data-test-subj="serviceEnviromentComboBox"]')
+      .click({ force: true })
+      .type('prod')
+      .type('{enter}');
+    cy.contains('production').realClick();
+    cy.contains('Next step').click();
+    cy.contains('Create configuration');
+    cy.contains('Edit').click();
+    cy.wait('@serviceEnvironmentApi');
+    cy.contains('production');
+  });
+});

x-pack/plugins/apm/public/components/app/settings/agent_configurations/agent_configuration_create_edit/service_page/form_row_select.tsx

@@ -5,14 +5,14 @@
  * 2.0.
  */
 
-import React, { useState, useEffect } from 'react';
-import { i18n } from '@kbn/i18n';
 import {
-  EuiDescribedFormGroup,
+  EuiComboBox,
   EuiComboBoxOptionOption,
+  EuiDescribedFormGroup,
   EuiFormRow,
-  EuiComboBox,
 } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { useMemo } from 'react';
 interface Props {
   title: string;
   description: string;
@@ -22,6 +22,7 @@ interface Props {
   isDisabled: boolean;
   value?: string;
   onChange: (value?: string) => void;
+  dataTestSubj?: string;
 }
 
 export function FormRowSelect({
@@ -32,23 +33,21 @@ export function FormRowSelect({
   options,
   isDisabled,
   onChange,
+  value,
+  dataTestSubj,
 }: Props) {
-  const [selectedOptions, setSelected] = useState<
-    Array<EuiComboBoxOptionOption<string>> | undefined
-  >([]);
+  const selectedOptions = useMemo(() => {
+    const optionFound = options?.find((option) => option.value === value);
+    return optionFound ? [optionFound] : undefined;
+  }, [options, value]);
 
   const handleOnChange = (
     nextSelectedOptions: Array<EuiComboBoxOptionOption<string>>
   ) => {
     const [selectedOption] = nextSelectedOptions;
-    setSelected(nextSelectedOptions);
     onChange(selectedOption.value);
   };
 
-  useEffect(() => {
-    setSelected(undefined);
-  }, [isLoading]);
-
   return (
     <EuiDescribedFormGroup
       fullWidth
@@ -68,6 +67,7 @@ export function FormRowSelect({
             'xpack.apm.agentConfig.servicePage.environment.placeholder',
             { defaultMessage: 'Select Option' }
           )}
+          data-test-subj={dataTestSubj}
         />
       </EuiFormRow>
     </EuiDescribedFormGroup>

x-pack/plugins/apm/public/components/app/settings/agent_configurations/agent_configuration_create_edit/service_page/form_row_suggestions_select.tsx

@@ -19,6 +19,7 @@ interface Props {
   value?: string;
   allowAll?: boolean;
   onChange: (value?: string) => void;
+  dataTestSubj?: string;
 }
 
 export function FormRowSuggestionsSelect({
@@ -29,6 +30,7 @@ export function FormRowSuggestionsSelect({
   value,
   allowAll = true,
   onChange,
+  dataTestSubj,
 }: Props) {
   return (
     <EuiDescribedFormGroup
@@ -47,6 +49,7 @@ export function FormRowSuggestionsSelect({
             'xpack.apm.agentConfig.servicePage.service.placeholder',
             { defaultMessage: 'Select Option' }
           )}
+          dataTestSubj={dataTestSubj}
         />
       </EuiFormRow>
     </EuiDescribedFormGroup>

x-pack/plugins/apm/public/components/app/settings/agent_configurations/agent_configuration_create_edit/service_page/service_page.tsx

@@ -105,6 +105,7 @@ export function ServicePage({ newConfig, setNewConfig, onClickNext }: Props) {
             service: { name, environment: '' },
           }));
         }}
+        dataTestSubj="serviceNameComboBox"
       />
       {/* Environment options */}
       <FormRowSelect
@@ -135,6 +136,7 @@ export function ServicePage({ newConfig, setNewConfig, onClickNext }: Props) {
             service: { name: prev.service.name, environment },
           }));
         }}
+        dataTestSubj="serviceEnviromentComboBox"
       />
       <EuiSpacer />
       <EuiFlexGroup justifyContent="flexEnd">