[7.17] [APM] Disable fields when frozen property is set to true (#126497)

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

@@ -30,11 +30,5 @@ export function CreateAPMPolicyForm({ newPolicy, onChange }: Props) {
       },
     });
   }
-  return (
-    <APMPolicyForm
-      vars={vars}
-      updateAPMPolicy={updateAPMPolicy}
-      isCloudPolicy={false}
-    />
-  );
+  return <APMPolicyForm vars={vars} updateAPMPolicy={updateAPMPolicy} />;
 }

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

@@ -12,7 +12,6 @@ import {
   PackagePolicyEditExtensionComponentProps,
   PackagePolicyVars,
 } from './typings';
-import { POLICY_ELASTIC_AGENT_ON_CLOUD } from '../../../../common/fleet';
 
 interface Props {
   policy: PackagePolicy;
@@ -32,11 +31,5 @@ export function EditAPMPolicyForm({ newPolicy, onChange }: Props) {
       },
     });
   }
-  return (
-    <APMPolicyForm
-      vars={vars}
-      updateAPMPolicy={updateAPMPolicy}
-      isCloudPolicy={newPolicy.policy_id === POLICY_ELASTIC_AGENT_ON_CLOUD}
-    />
-  );
+  return <APMPolicyForm vars={vars} updateAPMPolicy={updateAPMPolicy} />;
 }

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

@@ -24,25 +24,18 @@ import { PackagePolicyVars } from './typings';
 interface Props {
   updateAPMPolicy: (newVars: PackagePolicyVars, isValid: boolean) => void;
   vars?: PackagePolicyVars;
-  isCloudPolicy: boolean;
 }
 
-export function APMPolicyForm({
-  vars = {},
-  isCloudPolicy,
-  updateAPMPolicy,
-}: Props) {
+export function APMPolicyForm({ vars = {}, updateAPMPolicy }: Props) {
   const { apmSettings, rumSettings, tlsSettings, agentAuthorizationSettings } =
     useMemo(() => {
       return {
-        apmSettings: getApmSettings({ isCloudPolicy }),
+        apmSettings: getApmSettings(),
         rumSettings: getRUMSettings(),
         tlsSettings: getTLSSettings(),
-        agentAuthorizationSettings: getAgentAuthorizationSettings({
-          isCloudPolicy,
-        }),
+        agentAuthorizationSettings: getAgentAuthorizationSettings(),
       };
-    }, [isCloudPolicy]);
+    }, []);
 
   function handleFormChange(key: string, value: any) {
     // Merge new key/value with the rest of fields

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

@@ -6,41 +6,9 @@
  */
 
 import { getAgentAuthorizationSettings } from './agent_authorization_settings';
-import { SettingsRow } from '../typings';
 import { isSettingsFormValid } from '../settings_form/utils';
 
 describe('apm-fleet-apm-integration', () => {
-  describe('getAgentAuthorizationSettings', () => {
-    function findSetting(key: string, settings: SettingsRow[]) {
-      return settings.find(
-        (setting) => setting.type !== 'advanced_setting' && setting.key === key
-      );
-    }
-    it('returns read only secret token when on cloud', () => {
-      const settings = getAgentAuthorizationSettings({ isCloudPolicy: true });
-      const secretToken = findSetting('secret_token', settings);
-      expect(secretToken).toEqual({
-        type: 'text',
-        key: 'secret_token',
-        readOnly: true,
-        labelAppend: 'Optional',
-        label: 'Secret token',
-      });
-    });
-    it('returns secret token when NOT on cloud', () => {
-      const settings = getAgentAuthorizationSettings({ isCloudPolicy: false });
-      const secretToken = findSetting('secret_token', settings);
-
-      expect(secretToken).toEqual({
-        type: 'text',
-        key: 'secret_token',
-        readOnly: false,
-        labelAppend: 'Optional',
-        label: 'Secret token',
-      });
-    });
-  });
-
   describe('isAgentAuthorizationFormValid', () => {
     describe('validates integer fields', () => {
       [
@@ -49,9 +17,7 @@ describe('apm-fleet-apm-integration', () => {
         'anonymous_rate_limit_event_limit',
       ].map((key) => {
         it(`returns false when ${key} is lower than 1`, () => {
-          const settings = getAgentAuthorizationSettings({
-            isCloudPolicy: true,
-          });
+          const settings = getAgentAuthorizationSettings();
           expect(
             isSettingsFormValid(settings, {
               [key]: { value: 0, type: 'integer' },

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

@@ -10,11 +10,7 @@ import { getIntegerRt } from '../../../../../common/agent_configuration/runtime_
 import { OPTIONAL_LABEL } from '../settings_form/utils';
 import { SettingsRow } from '../typings';
 
-export function getAgentAuthorizationSettings({
-  isCloudPolicy,
-}: {
-  isCloudPolicy: boolean;
-}): SettingsRow[] {
+export function getAgentAuthorizationSettings(): SettingsRow[] {
   return [
     {
       type: 'boolean',
@@ -65,7 +61,6 @@ export function getAgentAuthorizationSettings({
     {
       type: 'text',
       key: 'secret_token',
-      readOnly: isCloudPolicy,
       labelAppend: OPTIONAL_LABEL,
       label: i18n.translate(
         'xpack.apm.fleet_integration.settings.agentAuthorization.secretTokenLabel',

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

@@ -6,35 +6,14 @@
  */
 
 import { getApmSettings } from './apm_settings';
-import { SettingsRow, BasicSettingRow } from '../typings';
 import { isSettingsFormValid } from '../settings_form/utils';
 
 describe('apm_settings', () => {
-  describe('getApmSettings', () => {
-    function findSetting(key: string, settings: SettingsRow[]) {
-      return settings.find(
-        (setting) => setting.type !== 'advanced_setting' && setting.key === key
-      ) as BasicSettingRow;
-    }
-    ['host', 'url'].map((key) => {
-      it(`returns read only ${key} when on cloud`, () => {
-        const settings = getApmSettings({ isCloudPolicy: true });
-        const setting = findSetting(key, settings);
-        expect(setting.readOnly).toBeTruthy();
-      });
-      it(`returns ${key} when NOT on cloud`, () => {
-        const settings = getApmSettings({ isCloudPolicy: false });
-        const setting = findSetting(key, settings);
-        expect(setting.readOnly).toBeFalsy();
-      });
-    });
-  });
-
   describe('isAPMFormValid', () => {
     describe('validates integer fields', () => {
       ['max_header_bytes', 'max_event_bytes'].map((key) => {
         it(`returns false when ${key} is lower than 1`, () => {
-          const settings = getApmSettings({ isCloudPolicy: true });
+          const settings = getApmSettings();
           expect(
             isSettingsFormValid(settings, {
               [key]: { value: 0, type: 'integer' },
@@ -50,7 +29,7 @@ describe('apm_settings', () => {
       });
       ['max_connections'].map((key) => {
         it(`returns false when ${key} is lower than 0`, () => {
-          const settings = getApmSettings({ isCloudPolicy: true });
+          const settings = getApmSettings();
           expect(
             isSettingsFormValid(settings, {
               [key]: { value: -1, type: 'integer' },
@@ -63,7 +42,7 @@ describe('apm_settings', () => {
     describe('validates required fields', () => {
       ['host', 'url'].map((key) => {
         it(`return false when  ${key} is not defined`, () => {
-          const settings = getApmSettings({ isCloudPolicy: true });
+          const settings = getApmSettings();
           expect(isSettingsFormValid(settings, {})).toBeFalsy();
         });
       });
@@ -73,7 +52,7 @@ describe('apm_settings', () => {
       ['idle_timeout', 'read_timeout', 'shutdown_timeout', 'write_timeout'].map(
         (key) => {
           it(`return false when  ${key} lower then 1ms`, () => {
-            const settings = getApmSettings({ isCloudPolicy: true });
+            const settings = getApmSettings();
             expect(
               isSettingsFormValid(settings, {
                 [key]: { value: '0ms', type: 'text' },

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

@@ -10,17 +10,12 @@ import { getIntegerRt } from '../../../../../common/agent_configuration/runtime_
 import { OPTIONAL_LABEL, REQUIRED_LABEL } from '../settings_form/utils';
 import { SettingsRow } from '../typings';
 
-export function getApmSettings({
-  isCloudPolicy,
-}: {
-  isCloudPolicy: boolean;
-}): SettingsRow[] {
+export function getApmSettings(): SettingsRow[] {
   return [
     {
       type: 'text',
       key: 'host',
       labelAppend: REQUIRED_LABEL,
-      readOnly: isCloudPolicy,
       label: i18n.translate(
         'xpack.apm.fleet_integration.settings.apm.hostLabel',
         { defaultMessage: 'Host' }
@@ -43,7 +38,6 @@ export function getApmSettings({
       type: 'text',
       key: 'url',
       labelAppend: REQUIRED_LABEL,
-      readOnly: isCloudPolicy,
       label: i18n.translate(
         'xpack.apm.fleet_integration.settings.apm.urlLabel',
         {

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

@@ -22,6 +22,7 @@ interface Props {
   row: SettingsRow;
   value?: any;
   onChange: FormRowOnChange;
+  isDisabled?: boolean;
 }
 
 const ENABLED_LABEL = i18n.translate(
@@ -33,11 +34,12 @@ const DISABLED_LABEL = i18n.translate(
   { defaultMessage: 'Disabled' }
 );
 
-export function FormRowSetting({ row, value, onChange }: Props) {
+export function FormRowSetting({ row, value, onChange, isDisabled }: Props) {
   switch (row.type) {
     case 'boolean': {
       return (
         <EuiSwitch
+          disabled={isDisabled}
           label={row.placeholder || (value ? ENABLED_LABEL : DISABLED_LABEL)}
           checked={value}
           onChange={(e) => {
@@ -50,9 +52,9 @@ export function FormRowSetting({ row, value, onChange }: Props) {
     case 'text': {
       return (
         <EuiFieldText
-          readOnly={row.readOnly}
+          disabled={isDisabled}
           value={value}
-          prepend={row.readOnly ? <EuiIcon type="lock" /> : undefined}
+          prepend={isDisabled ? <EuiIcon type="lock" /> : undefined}
           onChange={(e) => {
             onChange(row.key, e.target.value);
           }}
@@ -62,6 +64,7 @@ export function FormRowSetting({ row, value, onChange }: Props) {
     case 'area': {
       return (
         <EuiTextArea
+          disabled={isDisabled}
           value={value}
           onChange={(e) => {
             onChange(row.key, e.target.value);
@@ -73,6 +76,7 @@ export function FormRowSetting({ row, value, onChange }: Props) {
     case 'integer': {
       return (
         <EuiFieldNumber
+          disabled={isDisabled}
           value={value}
           onChange={(e) => {
             onChange(row.key, e.target.value);

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

@@ -50,7 +50,7 @@ function FormRow({
     if (!configEntry) {
       return null;
     }
-    const { value } = configEntry;
+    const { value, frozen } = configEntry;
     const { isValid, message } = validateSettingValue(row, value);
     return (
       <React.Fragment key={key}>
@@ -69,7 +69,12 @@ function FormRow({
               </EuiText>
             }
           >
-            <FormRowSetting row={row} onChange={onChange} value={value} />
+            <FormRowSetting
+              row={row}
+              onChange={onChange}
+              value={value}
+              isDisabled={frozen}
+            />
           </EuiFormRow>
         </EuiDescribedFormGroup>
         {row.settings &&

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

@@ -46,7 +46,6 @@ export interface BasicSettingRow {
   settings?: SettingsRow[];
   validation?: SettingValidation;
   required?: boolean;
-  readOnly?: boolean;
 }
 
 export type SettingsRow = BasicSettingRow | AdvancedSettingRow;

x-pack/plugins/apm/server/lib/fleet/get_apm_package_policy_definition.ts

@@ -84,19 +84,25 @@ export function preprocessLegacyFields({
 function getApmPackageInputVars(options: GetApmPackagePolicyDefinitionOptions) {
   const { apmServerSchema } = options;
   const apmServerConfigs = Object.entries(apmConfigMapping).map(
-    ([key, { name, type, getValue }]) => ({ key, name, type, getValue })
+    ([key, { name, type, getValue, frozen }]) => ({
+      key,
+      name,
+      type,
+      getValue,
+      frozen,
+    })
   );
 
   const inputVars: Record<string, { type: string; value: any }> =
-    apmServerConfigs.reduce((acc, { key, name, type, getValue }) => {
+    apmServerConfigs.reduce((acc, { key, name, type, getValue, frozen }) => {
       const apmServerSchemaValue = apmServerSchema[key];
       const value =
         (getValue
           ? getValue(options, apmServerSchemaValue)
           : apmServerSchemaValue) ?? ''; // defaults to an empty string to be edited in Fleet UI
       return {
         ...acc,
-        [name]: { type, value },
+        [name]: { type, value, frozen },
       };
     }, {});
   return inputVars;
@@ -111,16 +117,19 @@ export const apmConfigMapping: Record<
       options: GetApmPackagePolicyDefinitionOptions,
       value?: any
     ) => any;
+    frozen?: boolean;
   }
 > = {
   'apm-server.host': {
     name: 'host',
     type: 'text',
+    frozen: true,
   },
   'apm-server.url': {
     name: 'url',
     type: 'text',
     getValue: ({ cloudPluginSetup }) => cloudPluginSetup?.apm?.url,
+    frozen: true,
   },
   'apm-server.rum.enabled': {
     name: 'enable_rum',
@@ -207,14 +216,17 @@ export const apmConfigMapping: Record<
   'apm-server.ssl.enabled': {
     name: 'tls_enabled',
     type: 'bool',
+    frozen: true,
   },
   'apm-server.ssl.certificate': {
     name: 'tls_certificate',
     type: 'text',
+    frozen: true,
   },
   'apm-server.ssl.key': {
     name: 'tls_key',
     type: 'text',
+    frozen: true,
   },
   'apm-server.ssl.supported_protocols': {
     name: 'tls_supported_protocols',