[ResponseOps][Cases] Allow users to create templates

x-pack/plugins/cases/common/types/domain/case/v1.ts

@@ -161,3 +161,4 @@ export type CaseAttributes = rt.TypeOf<typeof CaseAttributesRt>;
 export type CaseSettings = rt.TypeOf<typeof CaseSettingsRt>;
 export type RelatedCase = rt.TypeOf<typeof RelatedCaseRt>;
 export type AttachmentTotals = rt.TypeOf<typeof AttachmentTotalsRt>;
+export type CaseBaseOptionalFields = rt.TypeOf<typeof CaseBaseOptionalFieldsRt>;

x-pack/plugins/cases/public/components/case_form_fields/custom_fields.tsx

@@ -0,0 +1,73 @@
+/*
+ * 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, { useMemo } from 'react';
+import { sortBy } from 'lodash';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
+
+import type { CasesConfigurationUI } from '../../../common/ui';
+import { builderMap as customFieldsBuilderMap } from '../custom_fields/builder';
+import * as i18n from './translations';
+
+interface Props {
+  isLoading: boolean;
+  setAsOptional?: boolean;
+  configurationCustomFields: CasesConfigurationUI['customFields'];
+}
+
+const CustomFieldsComponent: React.FC<Props> = ({
+  isLoading,
+  setAsOptional,
+  configurationCustomFields,
+}) => {
+  const sortedCustomFields = useMemo(
+    () => sortCustomFieldsByLabel(configurationCustomFields),
+    [configurationCustomFields]
+  );
+
+  const customFieldsComponents = sortedCustomFields.map(
+    (customField: CasesConfigurationUI['customFields'][number]) => {
+      const customFieldFactory = customFieldsBuilderMap[customField.type];
+      const customFieldType = customFieldFactory().build();
+
+      const CreateComponent = customFieldType.Create;
+
+      return (
+        <CreateComponent
+          isLoading={isLoading}
+          customFieldConfiguration={customField}
+          key={customField.key}
+          setAsOptional={setAsOptional}
+        />
+      );
+    }
+  );
+
+  if (!configurationCustomFields.length) {
+    return null;
+  }
+
+  return (
+    <EuiFlexGroup direction="column" gutterSize="s">
+      <EuiText size="m">
+        <h3>{i18n.ADDITIONAL_FIELDS}</h3>
+      </EuiText>
+      <EuiSpacer size="xs" />
+      <EuiFlexItem data-test-subj="caseCustomFields">{customFieldsComponents}</EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+CustomFieldsComponent.displayName = 'CustomFields';
+
+export const CustomFields = React.memo(CustomFieldsComponent);
+
+const sortCustomFieldsByLabel = (configCustomFields: CasesConfigurationUI['customFields']) => {
+  return sortBy(configCustomFields, (configCustomField) => {
+    return configCustomField.label;
+  });
+};

x-pack/plugins/cases/public/components/case_form_fields/index.test.tsx

@@ -0,0 +1,255 @@
+/*
+ * 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 { screen, waitFor, within } from '@testing-library/react';
+import { licensingMock } from '@kbn/licensing-plugin/public/mocks';
+
+import type { AppMockRenderer } from '../../common/mock';
+import { createAppMockRenderer } from '../../common/mock';
+import { FormTestComponent } from '../../common/test_utils';
+import { customFieldsConfigurationMock } from '../../containers/mock';
+import { userProfiles } from '../../containers/user_profiles/api.mock';
+
+import { CaseFormFields } from '.';
+import userEvent from '@testing-library/user-event';
+import { waitForEuiPopoverOpen } from '@elastic/eui/lib/test/rtl';
+
+jest.mock('../../containers/user_profiles/api');
+
+const appId = 'securitySolution';
+const draftKey = `cases.${appId}.createCaseTemplate.description.markdownEditor`;
+
+describe('CaseFormFields', () => {
+  let appMock: AppMockRenderer;
+  const onSubmit = jest.fn();
+  const defaultProps = {
+    isLoading: false,
+    configurationCustomFields: [],
+    draftStorageKey: '',
+  };
+
+  beforeEach(() => {
+    appMock = createAppMockRenderer();
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    sessionStorage.removeItem(draftKey);
+  });
+
+  it('renders correctly', async () => {
+    appMock.render(
+      <FormTestComponent onSubmit={onSubmit}>
+        <CaseFormFields {...defaultProps} />
+      </FormTestComponent>
+    );
+
+    expect(await screen.findByTestId('case-form-fields')).toBeInTheDocument();
+  });
+
+  it('renders case fields correctly', async () => {
+    appMock.render(
+      <FormTestComponent onSubmit={onSubmit}>
+        <CaseFormFields {...defaultProps} />
+      </FormTestComponent>
+    );
+
+    expect(await screen.findByTestId('caseTitle')).toBeInTheDocument();
+    expect(await screen.findByTestId('caseTags')).toBeInTheDocument();
+    expect(await screen.findByTestId('caseCategory')).toBeInTheDocument();
+    expect(await screen.findByTestId('caseSeverity')).toBeInTheDocument();
+    expect(await screen.findByTestId('caseDescription')).toBeInTheDocument();
+    expect(await screen.findByTestId('caseSyncAlerts')).toBeInTheDocument();
+  });
+
+  it('does not render customFields when empty', () => {
+    appMock.render(
+      <FormTestComponent onSubmit={onSubmit}>
+        <CaseFormFields {...defaultProps} />
+      </FormTestComponent>
+    );
+
+    expect(screen.queryByTestId('caseCustomFields')).not.toBeInTheDocument();
+  });
+
+  it('renders customFields when not empty', async () => {
+    appMock.render(
+      <FormTestComponent onSubmit={onSubmit}>
+        <CaseFormFields
+          isLoading={false}
+          configurationCustomFields={customFieldsConfigurationMock}
+          draftStorageKey=""
+        />
+      </FormTestComponent>
+    );
+
+    expect(await screen.findByTestId('caseCustomFields')).toBeInTheDocument();
+  });
+
+  it('does not render assignees when no platinum license', () => {
+    appMock.render(
+      <FormTestComponent onSubmit={onSubmit}>
+        <CaseFormFields {...defaultProps} />
+      </FormTestComponent>
+    );
+
+    expect(screen.queryByTestId('createCaseAssigneesComboBox')).not.toBeInTheDocument();
+  });
+
+  it('renders assignees when platinum license', async () => {
+    const license = licensingMock.createLicense({
+      license: { type: 'platinum' },
+    });
+
+    appMock = createAppMockRenderer({ license });
+
+    appMock.render(
+      <FormTestComponent onSubmit={onSubmit}>
+        <CaseFormFields {...defaultProps} />
+      </FormTestComponent>
+    );
+
+    expect(await screen.findByTestId('createCaseAssigneesComboBox')).toBeInTheDocument();
+  });
+
+  it('does not render syncAlerts when feature is not enabled', () => {
+    appMock = createAppMockRenderer({
+      features: { alerts: { sync: false, enabled: true } },
+    });
+
+    appMock.render(
+      <FormTestComponent onSubmit={onSubmit}>
+        <CaseFormFields {...defaultProps} />
+      </FormTestComponent>
+    );
+
+    expect(screen.queryByTestId('caseSyncAlerts')).not.toBeInTheDocument();
+  });
+
+  it('calls onSubmit with case fields', async () => {
+    appMock.render(
+      <FormTestComponent onSubmit={onSubmit}>
+        <CaseFormFields {...defaultProps} />
+      </FormTestComponent>
+    );
+
+    const caseTitle = await screen.findByTestId('caseTitle');
+    userEvent.paste(within(caseTitle).getByTestId('input'), 'Case with Template 1');
+
+    const caseDescription = await screen.findByTestId('caseDescription');
+    userEvent.paste(
+      within(caseDescription).getByTestId('euiMarkdownEditorTextArea'),
+      'This is a case description'
+    );
+
+    const caseTags = await screen.findByTestId('caseTags');
+    userEvent.paste(within(caseTags).getByRole('combobox'), 'template-1');
+    userEvent.keyboard('{enter}');
+
+    const caseCategory = await screen.findByTestId('caseCategory');
+    userEvent.type(within(caseCategory).getByRole('combobox'), 'new {enter}');
+
+    userEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => {
+      expect(onSubmit).toBeCalledWith(
+        {
+          category: 'new',
+          tags: ['template-1'],
+          description: 'This is a case description',
+          title: 'Case with Template 1',
+          syncAlerts: true,
+        },
+        true
+      );
+    });
+  });
+
+  it('calls onSubmit with custom fields', async () => {
+    const newProps = {
+      ...defaultProps,
+      configurationCustomFields: customFieldsConfigurationMock,
+    };
+
+    appMock.render(
+      <FormTestComponent onSubmit={onSubmit}>
+        <CaseFormFields {...newProps} />
+      </FormTestComponent>
+    );
+
+    expect(await screen.findByTestId('caseCustomFields')).toBeInTheDocument();
+
+    const textField = customFieldsConfigurationMock[0];
+    const toggleField = customFieldsConfigurationMock[1];
+
+    const textCustomField = await screen.findByTestId(
+      `${textField.key}-${textField.type}-create-custom-field`
+    );
+
+    userEvent.clear(textCustomField);
+    userEvent.paste(textCustomField, 'My text test value 1');
+
+    userEvent.click(
+      await screen.findByTestId(`${toggleField.key}-${toggleField.type}-create-custom-field`)
+    );
+
+    userEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => {
+      expect(onSubmit).toBeCalledWith(
+        {
+          category: null,
+          tags: [],
+          syncAlerts: true,
+          customFields: {
+            test_key_1: 'My text test value 1',
+            test_key_2: false,
+            test_key_4: false,
+          },
+        },
+        true
+      );
+    });
+  });
+
+  it('calls onSubmit with assignees', async () => {
+    const license = licensingMock.createLicense({
+      license: { type: 'platinum' },
+    });
+
+    appMock = createAppMockRenderer({ license });
+
+    appMock.render(
+      <FormTestComponent onSubmit={onSubmit}>
+        <CaseFormFields {...defaultProps} />
+      </FormTestComponent>
+    );
+
+    const assigneesComboBox = await screen.findByTestId('createCaseAssigneesComboBox');
+
+    userEvent.click(await within(assigneesComboBox).findByTestId('comboBoxToggleListButton'));
+
+    await waitForEuiPopoverOpen();
+
+    userEvent.click(screen.getByText(`${userProfiles[0].user.full_name}`));
+
+    userEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => {
+      expect(onSubmit).toBeCalledWith(
+        {
+          category: null,
+          tags: [],
+          syncAlerts: true,
+          assignees: [{ uid: userProfiles[0].uid }],
+        },
+        true
+      );
+    });
+  });
+});

x-pack/plugins/cases/public/components/case_form_fields/index.tsx

@@ -0,0 +1,59 @@
+/*
+ * 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, { memo } from 'react';
+import { EuiFlexGroup } from '@elastic/eui';
+import { Title } from '../create/title';
+import { Tags } from '../create/tags';
+import { Category } from '../create/category';
+import { Severity } from '../create/severity';
+import { Description } from '../create/description';
+import { useCasesFeatures } from '../../common/use_cases_features';
+import { Assignees } from '../create/assignees';
+import { CustomFields } from './custom_fields';
+import { SyncAlertsToggle } from '../create/sync_alerts_toggle';
+import type { CasesConfigurationUI } from '../../containers/types';
+
+interface Props {
+  isLoading: boolean;
+  configurationCustomFields: CasesConfigurationUI['customFields'];
+  draftStorageKey: string;
+}
+
+const CaseFormFieldsComponent: React.FC<Props> = ({
+  isLoading,
+  configurationCustomFields,
+  draftStorageKey,
+}) => {
+  const { caseAssignmentAuthorized, isSyncAlertsEnabled } = useCasesFeatures();
+
+  return (
+    <EuiFlexGroup data-test-subj="case-form-fields" direction="column">
+      <Title isLoading={isLoading} />
+      {caseAssignmentAuthorized ? <Assignees isLoading={isLoading} /> : null}
+      <Tags isLoading={isLoading} />
+
+      <Category isLoading={isLoading} />
+
+      <Severity isLoading={isLoading} />
+
+      <Description isLoading={isLoading} draftStorageKey={draftStorageKey} />
+
+      {isSyncAlertsEnabled ? <SyncAlertsToggle isLoading={isLoading} /> : null}
+
+      <CustomFields
+        isLoading={isLoading}
+        setAsOptional={true}
+        configurationCustomFields={configurationCustomFields}
+      />
+    </EuiFlexGroup>
+  );
+};
+
+CaseFormFieldsComponent.displayName = 'CaseFormFields';
+
+export const CaseFormFields = memo(CaseFormFieldsComponent);