[Remote Clusters] Clean up null properties depending on conection mode

x-pack/plugins/remote_clusters/__jest__/client_integration/add/remote_clusters_add.test.ts

@@ -48,6 +48,14 @@ describe('Create Remote cluster', () => {
       expect(actions.skipUnavailableSwitch.isChecked()).toBe(true);
     });
 
+    test('show request flyout doesnt contain null values', async () => {
+      await actions.showRequest.click();
+      const requestBody = actions.showRequest.getESRequestBody();
+
+      expect(requestBody).not.toContain('null');
+      expect(requestBody).toMatchSnapshot();
+    });
+
     describe('on prem', () => {
       test('should have a toggle to enable "proxy" mode for a remote cluster', () => {
         expect(actions.connectionModeSwitch.exists()).toBe(true);

x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/remote_clusters_actions.ts

@@ -53,6 +53,10 @@ export interface RemoteClustersActions {
     click: () => void;
     isDisabled: () => boolean;
   };
+  showRequest: {
+    click: () => void;
+    getESRequestBody: () => string;
+  };
   getErrorMessages: () => string[];
   globalErrorExists: () => boolean;
 }
@@ -170,6 +174,23 @@ export const createRemoteClustersActions = (testBed: TestBed): RemoteClustersAct
     };
   };
 
+  const createShowRequestActions = () => {
+    const click = () => {
+      act(() => {
+        find('remoteClustersRequestButton').simulate('click');
+      });
+
+      component.update();
+    };
+
+    return {
+      showRequest: {
+        click,
+        getESRequestBody: () => find('esRequestBody').text(),
+      },
+    };
+  };
+
   const globalErrorExists = () => exists('remoteClusterFormGlobalError');
 
   const createCloudUrlInputActions = () => {
@@ -193,6 +214,7 @@ export const createRemoteClustersActions = (testBed: TestBed): RemoteClustersAct
     ...createProxyAddressActions(),
     ...createServerNameActions(),
     ...createSaveButtonActions(),
+    ...createShowRequestActions(),
     getErrorMessages: form.getErrorsMessages,
     globalErrorExists,
   };

x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/request_flyout.tsx

@@ -7,6 +7,7 @@
 
 import React, { PureComponent } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { transform, isObject, isEmpty, isNull } from 'lodash';
 
 import {
   EuiButtonEmpty,
@@ -22,6 +23,20 @@ import {
 
 import { Cluster, serializeCluster } from '../../../../../common/lib';
 
+// Remove all null properties from an object
+export function removeNullProperties(obj: any) {
+  return transform(obj, (result: any, value, key) => {
+    if (isObject(value)) {
+      result[key] = removeNullProperties(value);
+      if (isEmpty(result[key])) {
+        delete result[key];
+      }
+    } else if (!isNull(value)) {
+      result[key] = value;
+    }
+  });
+}
+
 interface Props {
   close: () => void;
   cluster: Cluster;
@@ -32,7 +47,11 @@ export class RequestFlyout extends PureComponent<Props> {
     const { close, cluster } = this.props;
     const { name } = cluster;
     const endpoint = 'PUT _cluster/settings';
-    const payload = JSON.stringify(serializeCluster(cluster), null, 2);
+    // Given that the request still requires that we send all properties, regardless of whether they
+    // are null, we need to remove all null properties from the serialized cluster object that we
+    // render in the flyout.
+    const serializedCluster = removeNullProperties(serializeCluster(cluster));
+    const payload = JSON.stringify(serializedCluster, null, 2);
     const request = `${endpoint}\n${payload}`;
 
     return (
@@ -68,7 +87,7 @@ export class RequestFlyout extends PureComponent<Props> {
 
           <EuiSpacer />
 
-          <EuiCodeBlock language="json" isCopyable>
+          <EuiCodeBlock language="json" isCopyable data-test-subj="esRequestBody">
             {request}
           </EuiCodeBlock>
         </EuiFlyoutBody>

x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/utils.test.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 { removeNullProperties } from './request_flyout';
+
+describe('Remote cluster form Utils', () => {
+  test('can remote deeply nested null properties from object', () => {
+    const obj = {
+      a: 'a',
+      b: {
+        c: 'c',
+        d: null,
+      },
+    };
+
+    expect(removeNullProperties(obj)).toStrictEqual({
+      ...obj,
+      b: {
+        c: 'c',
+      },
+    });
+
+    expect(removeNullProperties({ a: 'a', b: null })).toStrictEqual({ a: 'a' });
+  });
+});