[ResponseOps][Connectors] Add support of additional fields for ServiceNow ITSM and SecOps

x-pack/plugins/observability_solution/synthetics/common/rules/alert_actions.ts

@@ -222,6 +222,7 @@ function getServiceNowActionParams({ defaultActionMessage }: Translations): Serv
         externalId: null,
         correlation_id: null,
         correlation_display: null,
+        additional_fields: null,
       },
       comments: [],
     },

x-pack/plugins/observability_solution/uptime/common/rules/alert_actions.ts

@@ -214,6 +214,7 @@ function getServiceNowActionParams({ defaultActionMessage }: Translations): Serv
         externalId: null,
         correlation_id: null,
         correlation_display: null,
+        additional_fields: null,
       },
       comments: [],
     },

x-pack/plugins/stack_connectors/common/servicenow/constants.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export const MAX_ADDITIONAL_FIELDS_LENGTH = 20;

x-pack/plugins/stack_connectors/public/connector_types/jira/jira.test.tsx

@@ -89,9 +89,7 @@ describe('jira action params validation', () => {
       errors: {
         'subActionParams.incident.summary': [],
         'subActionParams.incident.labels': [],
-        'subActionParams.incident.otherFields': [
-          'Additional fields field must be a valid JSON object.',
-        ],
+        'subActionParams.incident.otherFields': ['Invalid JSON.'],
       },
     });
   });

x-pack/plugins/stack_connectors/public/connector_types/jira/jira.tsx

@@ -13,6 +13,7 @@ import type {
 } from '@kbn/triggers-actions-ui-plugin/public';
 import { MAX_OTHER_FIELDS_LENGTH } from '../../../common/jira/constants';
 import { JiraConfig, JiraSecrets, JiraActionParams } from './types';
+import { validateJSON } from '../lib/validate_json';
 
 export const JIRA_DESC = i18n.translate('xpack.stackConnectors.components.jira.selectMessageText', {
   defaultMessage: 'Create an incident in Jira.',
@@ -58,19 +59,15 @@ export function getConnectorType(): ConnectorTypeModel<JiraConfig, JiraSecrets,
           errors['subActionParams.incident.labels'].push(translations.LABELS_WHITE_SPACES);
       }
 
-      try {
-        const otherFields = actionParams.subActionParams?.incident?.otherFields;
-        if (otherFields) {
-          const parsedOtherFields = JSON.parse(otherFields);
-          if (Object.keys(parsedOtherFields).length > MAX_OTHER_FIELDS_LENGTH) {
-            errors['subActionParams.incident.otherFields'] = [
-              translations.OTHER_FIELDS_LENGTH_ERROR(MAX_OTHER_FIELDS_LENGTH),
-            ];
-          }
-        }
-      } catch (error) {
-        errors['subActionParams.incident.otherFields'] = [translations.INVALID_JSON_FORMAT];
+      const jsonErrors = validateJSON({
+        value: actionParams.subActionParams?.incident?.otherFields,
+        maxProperties: MAX_OTHER_FIELDS_LENGTH,
+      });
+
+      if (jsonErrors) {
+        errors['subActionParams.incident.otherFields'] = [jsonErrors];
       }
+
       return validationResult;
     },
     actionParamsFields: lazy(() => import('./jira_params')),

x-pack/plugins/stack_connectors/public/connector_types/lib/servicenow/additional_fields.test.tsx

@@ -0,0 +1,75 @@
+/*
+ * 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 React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
+import { AdditionalFields } from './additional_fields';
+import userEvent from '@testing-library/user-event';
+
+describe('Credentials', () => {
+  const onChange = jest.fn();
+  const value = JSON.stringify({ foo: 'test' });
+  const props = { value, errors: [], onChange };
+
+  it('renders the additional fields correctly', async () => {
+    render(
+      <IntlProvider locale="en">
+        <AdditionalFields {...props} />
+      </IntlProvider>
+    );
+
+    expect(await screen.findByTestId('additionalFields')).toBeInTheDocument();
+  });
+
+  it('sets the value correctly', async () => {
+    render(
+      <IntlProvider locale="en">
+        <AdditionalFields {...props} />
+      </IntlProvider>
+    );
+
+    expect(await screen.findByText(value)).toBeInTheDocument();
+  });
+
+  it('changes the value correctly', async () => {
+    const newValue = JSON.stringify({ bar: 'test' });
+
+    render(
+      <IntlProvider locale="en">
+        <AdditionalFields {...props} value={undefined} />
+      </IntlProvider>
+    );
+
+    userEvent.paste(await screen.findByTestId('additional_fieldsJsonEditor'), newValue);
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith(newValue);
+    });
+
+    expect(await screen.findByText(newValue)).toBeInTheDocument();
+  });
+
+  it('updating wth an empty string sets its value to null', async () => {
+    const newValue = JSON.stringify({ bar: 'test' });
+
+    render(
+      <IntlProvider locale="en">
+        <AdditionalFields {...props} value={undefined} />
+      </IntlProvider>
+    );
+
+    const editor = await screen.findByTestId('additional_fieldsJsonEditor');
+
+    userEvent.paste(editor, newValue);
+    userEvent.clear(editor);
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith(null);
+    });
+  });
+});

x-pack/plugins/stack_connectors/public/connector_types/lib/servicenow/additional_fields.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 { EuiIconTip } from '@elastic/eui';
+import { JsonEditorWithMessageVariables } from '@kbn/triggers-actions-ui-plugin/public';
+import React from 'react';
+import { ActionVariable } from '@kbn/alerting-types';
+import { isEmpty } from 'lodash';
+import * as i18n from './translations';
+
+interface AdditionalFieldsProps {
+  value?: string | null;
+  errors?: string[];
+  messageVariables?: ActionVariable[];
+  onChange: (value: string | null) => void;
+}
+
+export const AdditionalFieldsComponent: React.FC<AdditionalFieldsProps> = ({
+  value,
+  errors,
+  messageVariables,
+  onChange,
+}) => {
+  return (
+    <JsonEditorWithMessageVariables
+      messageVariables={messageVariables}
+      paramsProperty={'additional_fields'}
+      inputTargetValue={value}
+      errors={errors ?? []}
+      dataTestSubj="additionalFields"
+      label={
+        <>
+          {i18n.ADDITIONAL_FIELDS}
+          <EuiIconTip
+            size="s"
+            color="subdued"
+            type="questionInCircle"
+            className="eui-alignTop"
+            data-test-subj="otherFieldsHelpTooltip"
+            aria-label={i18n.ADDITIONAL_FIELDS_HELP}
+            content={i18n.ADDITIONAL_FIELDS_HELP_TEXT}
+          />
+        </>
+      }
+      onDocumentsChange={(json: string) => onChange(isEmpty(json) ? null : json)}
+    />
+  );
+};
+
+export const AdditionalFields = React.memo(AdditionalFieldsComponent);