[APM] Fix agent config flyout state (#46950) (#46959)

* [APM] fix bug where flyout state did not reflect the currently selected agent config

* removed commented code

x-pack/legacy/plugins/apm/public/components/app/Settings/AddSettings/AddSettingFlyout.tsx

@@ -18,7 +18,7 @@ import {
   EuiButtonEmpty,
   EuiCallOut
 } from '@elastic/eui';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { toastNotifications } from 'ui/notify';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -56,6 +56,7 @@ export function AddSettingsFlyout({
       ? selectedConfig.settings.transaction_sample_rate.toString()
       : ''
   );
+
   const { data: serviceNames = [], status: serviceNamesStatus } = useFetcher(
     () =>
       callApmApi({
@@ -89,6 +90,18 @@ export function AddSettingsFlyout({
       env.name === environment && (Boolean(selectedConfig) || env.available)
   );
 
+  useEffect(() => {
+    if (selectedConfig) {
+      setEnvironment(selectedConfig.service.environment);
+      setServiceName(selectedConfig.service.name);
+      setSampleRate(selectedConfig.settings.transaction_sample_rate.toString());
+    } else {
+      setEnvironment(ENVIRONMENT_NOT_DEFINED);
+      setServiceName(undefined);
+      setSampleRate('');
+    }
+  }, [selectedConfig]);
+
   if (!isOpen) {
     return null;
   }

x-pack/legacy/plugins/apm/public/components/app/Settings/AddSettings/AddSettingFlyoutBody.tsx

@@ -157,7 +157,11 @@ export function AddSettingFlyoutBody({
             placeholder={selectPlaceholderLabel}
             isLoading={environmentStatus === 'loading'}
             options={environmentOptions}
-            value={environment}
+            value={
+              selectedConfig
+                ? environment || ENVIRONMENT_NOT_DEFINED
+                : environment
+            }
             disabled={!serviceName || Boolean(selectedConfig)}
             onChange={e => {
               e.preventDefault();

x-pack/legacy/plugins/apm/public/components/app/Settings/index.tsx

@@ -52,7 +52,6 @@ export function Settings() {
   );
 
   const hasConfigurations = !isEmpty(data);
-
   return (
     <>
       <AddSettingsFlyout