[ResponseOps][Cases] Allow users to create templates

x-pack/plugins/cases/common/types/api/configure/v1.test.ts

@@ -585,6 +585,18 @@ describe('configure', () => {
       });
     });
 
+    it('does not throw when there is no description or tags', () => {
+      const newRequest = {
+        key: 'template_key_1',
+        name: 'Template 1',
+        caseFields: null,
+      };
+
+      expect(PathReporter.report(TemplateConfigurationRt.decode({ ...newRequest }))).toContain(
+        'No errors!'
+      );
+    });
+
     it('limits name to 50 characters', () => {
       const longName = 'x'.repeat(MAX_TEMPLATE_NAME_LENGTH + 1);
 

x-pack/plugins/cases/common/types/api/configure/v1.ts

@@ -85,21 +85,21 @@ export const TemplateConfigurationRt = rt.intersection([
      * name of template
      */
     name: limitedStringSchema({ fieldName: 'name', min: 1, max: MAX_TEMPLATE_NAME_LENGTH }),
-    /**
-     * description of templates
-     */
-    description: limitedStringSchema({
-      fieldName: 'description',
-      min: 1,
-      max: MAX_TEMPLATE_DESCRIPTION_LENGTH,
-    }),
     /**
      * case fields
      */
     caseFields: rt.union([rt.null, CaseBaseOptionalFieldsRequestRt]),
   }),
   rt.exact(
     rt.partial({
+      /**
+       * description of templates
+       */
+      description: limitedStringSchema({
+        fieldName: 'description',
+        min: 0,
+        max: MAX_TEMPLATE_DESCRIPTION_LENGTH,
+      }),
       /**
        * tags of 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/common/types/domain/configure/v1.test.ts

@@ -81,7 +81,6 @@ describe('configure', () => {
   const templateWithFewCaseFields = {
     key: 'template_sample_2',
     name: 'Sample template 2',
-    description: 'this is second sample template',
     tags: [],
     caseFields: {
       title: 'Case with sample template 2',
@@ -92,7 +91,6 @@ describe('configure', () => {
   const templateWithNoCaseFields = {
     key: 'template_sample_3',
     name: 'Sample template 3',
-    description: 'this is third sample template',
     caseFields: null,
   };
 

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

@@ -68,17 +68,17 @@ export const TemplateConfigurationRt = rt.intersection([
      * name of template
      */
     name: rt.string,
-    /**
-     * description of template
-     */
-    description: rt.string,
     /**
      * case fields of template
      */
     caseFields: rt.union([rt.null, CaseBaseOptionalFieldsRt]),
   }),
   rt.exact(
     rt.partial({
+      /**
+       * description of template
+       */
+      description: rt.string,
       /**
        * tags of template
        */

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;
+  });
+};