[Cases] Add custom fields: List type

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

@@ -29,7 +29,11 @@ import {
   NonEmptyString,
   paginationSchema,
 } from '../../../schema';
-import { CaseCustomFieldToggleRt, CustomFieldTextTypeRt } from '../../domain';
+import {
+  CaseCustomFieldToggleRt,
+  CustomFieldTextTypeRt,
+  CaseCustomFieldListRt,
+} from '../../domain';
 import {
   CaseRt,
   CaseSettingsRt,
@@ -49,7 +53,11 @@ const CaseCustomFieldTextWithValidationRt = rt.strict({
   value: rt.union([CaseCustomFieldTextWithValidationValueRt('value'), rt.null]),
 });
 
-const CustomFieldRt = rt.union([CaseCustomFieldTextWithValidationRt, CaseCustomFieldToggleRt]);
+const CustomFieldRt = rt.union([
+  CaseCustomFieldTextWithValidationRt,
+  CaseCustomFieldToggleRt,
+  CaseCustomFieldListRt,
+]);
 
 export const CaseRequestCustomFieldsRt = limitedArraySchema({
   codec: CustomFieldRt,

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

@@ -18,7 +18,11 @@ import {
   MAX_TEMPLATE_TAG_LENGTH,
 } from '../../../constants';
 import { limitedArraySchema, limitedStringSchema, regexStringRt } from '../../../schema';
-import { CustomFieldTextTypeRt, CustomFieldToggleTypeRt } from '../../domain';
+import {
+  CustomFieldTextTypeRt,
+  CustomFieldToggleTypeRt,
+  CustomFieldListTypeRt,
+} from '../../domain';
 import type { Configurations, Configuration } from '../../domain/configure/v1';
 import { ConfigurationBasicWithoutOwnerRt, ClosureTypeRt } from '../../domain/configure/v1';
 import { CaseConnectorRt } from '../../domain/connector/v1';
@@ -64,8 +68,35 @@ export const ToggleCustomFieldConfigurationRt = rt.intersection([
   ),
 ]);
 
+export const ListCustomFieldOptionRt = rt.strict({
+  label: rt.string,
+  key: rt.string,
+});
+
+export const ListCustomFieldConfigurationRt = rt.intersection([
+  rt.strict({ type: CustomFieldListTypeRt }),
+  CustomFieldConfigurationWithoutTypeRt,
+  rt.strict({
+    options: limitedArraySchema({
+      codec: ListCustomFieldOptionRt,
+      min: 1,
+      max: 10,
+      fieldName: 'options',
+    }),
+  }),
+  rt.exact(
+    rt.partial({
+      defaultValue: rt.union([rt.string, rt.null]),
+    })
+  ),
+]);
+
 export const CustomFieldsConfigurationRt = limitedArraySchema({
-  codec: rt.union([TextCustomFieldConfigurationRt, ToggleCustomFieldConfigurationRt]),
+  codec: rt.union([
+    TextCustomFieldConfigurationRt,
+    ToggleCustomFieldConfigurationRt,
+    ListCustomFieldConfigurationRt,
+  ]),
   min: 0,
   max: MAX_CUSTOM_FIELDS_PER_CASE,
   fieldName: 'customFields',

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

@@ -8,7 +8,11 @@
 import * as rt from 'io-ts';
 import { CaseConnectorRt, ConnectorMappingsRt } from '../connector/v1';
 import { UserRt } from '../user/v1';
-import { CustomFieldTextTypeRt, CustomFieldToggleTypeRt } from '../custom_field/v1';
+import {
+  CustomFieldTextTypeRt,
+  CustomFieldToggleTypeRt,
+  CustomFieldListTypeRt,
+} from '../custom_field/v1';
 import { CaseBaseOptionalFieldsRt } from '../case/v1';
 
 export const ClosureTypeRt = rt.union([
@@ -51,9 +55,28 @@ export const ToggleCustomFieldConfigurationRt = rt.intersection([
   ),
 ]);
 
+export const ListCustomFieldOptionRt = rt.strict({
+  label: rt.string,
+  key: rt.string,
+});
+
+export const ListCustomFieldConfigurationRt = rt.intersection([
+  rt.strict({ type: CustomFieldListTypeRt }),
+  CustomFieldConfigurationWithoutTypeRt,
+  rt.strict({
+    options: rt.array(ListCustomFieldOptionRt),
+  }),
+  rt.exact(
+    rt.partial({
+      defaultValue: rt.union([rt.string, rt.null]),
+    })
+  ),
+]);
+
 export const CustomFieldConfigurationRt = rt.union([
   TextCustomFieldConfigurationRt,
   ToggleCustomFieldConfigurationRt,
+  ListCustomFieldConfigurationRt,
 ]);
 
 export const CustomFieldsConfigurationRt = rt.array(CustomFieldConfigurationRt);
@@ -151,3 +174,8 @@ export type ClosureType = rt.TypeOf<typeof ClosureTypeRt>;
 export type ConfigurationAttributes = rt.TypeOf<typeof ConfigurationAttributesRt>;
 export type Configuration = rt.TypeOf<typeof ConfigurationRt>;
 export type Configurations = rt.TypeOf<typeof ConfigurationsRt>;
+export type ListCustomFieldOption = rt.TypeOf<typeof ListCustomFieldOptionRt>;
+
+export type TextCustomFieldConfiguration = rt.TypeOf<typeof TextCustomFieldConfigurationRt>;
+export type ListCustomFieldConfiguration = rt.TypeOf<typeof ListCustomFieldConfigurationRt>;
+export type ToggleCustomFieldConfiguration = rt.TypeOf<typeof ToggleCustomFieldConfigurationRt>;

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

@@ -9,10 +9,12 @@ import * as rt from 'io-ts';
 export enum CustomFieldTypes {
   TEXT = 'text',
   TOGGLE = 'toggle',
+  LIST = 'list',
 }
 
 export const CustomFieldTextTypeRt = rt.literal(CustomFieldTypes.TEXT);
 export const CustomFieldToggleTypeRt = rt.literal(CustomFieldTypes.TOGGLE);
+export const CustomFieldListTypeRt = rt.literal(CustomFieldTypes.LIST);
 
 const CaseCustomFieldTextRt = rt.strict({
   key: rt.string,
@@ -26,10 +28,21 @@ export const CaseCustomFieldToggleRt = rt.strict({
   value: rt.union([rt.boolean, rt.null]),
 });
 
-export const CaseCustomFieldRt = rt.union([CaseCustomFieldTextRt, CaseCustomFieldToggleRt]);
+export const CaseCustomFieldListRt = rt.strict({
+  key: rt.string,
+  type: CustomFieldListTypeRt,
+  value: rt.union([rt.string, rt.null]),
+});
+
+export const CaseCustomFieldRt = rt.union([
+  CaseCustomFieldTextRt,
+  CaseCustomFieldToggleRt,
+  CaseCustomFieldListRt,
+]);
 export const CaseCustomFieldsRt = rt.array(CaseCustomFieldRt);
 
 export type CaseCustomFields = rt.TypeOf<typeof CaseCustomFieldsRt>;
 export type CaseCustomField = rt.TypeOf<typeof CaseCustomFieldRt>;
 export type CaseCustomFieldToggle = rt.TypeOf<typeof CaseCustomFieldToggleRt>;
 export type CaseCustomFieldText = rt.TypeOf<typeof CaseCustomFieldTextRt>;
+export type CaseCustomFieldList = rt.TypeOf<typeof CaseCustomFieldListRt>;

x-pack/plugins/cases/common/ui/types.ts

@@ -31,6 +31,7 @@ import type {
   PersistableStateAttachment,
   Configuration,
   CustomFieldTypes,
+  CustomFieldsConfiguration,
 } from '../types/domain';
 import type {
   CasePatchRequest,
@@ -189,6 +190,7 @@ export type CaseUser = SnakeToCamelCase<User>;
 export interface FetchCasesProps extends ApiProps {
   queryParams?: QueryParams;
   filterOptions?: FilterOptions;
+  customFieldsConfiguration: CustomFieldsConfiguration;
 }
 
 export interface ApiProps {

x-pack/plugins/cases/public/components/all_cases/table_filter_config/use_custom_fields_filter_config.tsx

@@ -96,9 +96,11 @@ export const useCustomFieldsFilterConfig = ({
     return { customFieldsFilterConfig: [] };
   }
 
-  for (const { key: fieldKey, type, label: buttonLabel } of customFields ?? []) {
+  for (const customFieldConfiguration of customFields ?? []) {
+    const { key: fieldKey, type, label: buttonLabel } = customFieldConfiguration;
     if (customFieldsBuilder[type]) {
-      const { filterOptions: customFieldOptions } = customFieldsBuilder[type]();
+      const { getFilterOptions } = customFieldsBuilder[type]();
+      const customFieldOptions = getFilterOptions?.(customFieldConfiguration);
 
       if (customFieldOptions) {
         customFieldsFilterConfig.push(

x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx

@@ -26,8 +26,8 @@ import { Status } from '@kbn/cases-components/src/status/status';
 import type { UserProfileWithAvatar } from '@kbn/user-profile-components';
 
 import type { ActionConnector } from '../../../common/types/domain';
-import { CaseSeverity } from '../../../common/types/domain';
-import type { CaseUI } from '../../../common/ui/types';
+import { CaseSeverity, CustomFieldTypes } from '../../../common/types/domain';
+import type { CaseUI, CasesConfigurationUICustomField } from '../../../common/ui/types';
 import type { CasesColumnSelection } from './types';
 import { getEmptyCellValue } from '../empty_value';
 import { FormattedRelativePreferenceDate } from '../formatted_date';
@@ -333,9 +333,15 @@ export const useCasesColumns = ({
 
   // we need to extend the columnsDict with the columns of
   // the customFields
-  customFields.forEach(({ key, type, label }) => {
+  customFields.forEach((configuration) => {
+    const { key, type, label } = configuration;
     if (type in customFieldsBuilderMap) {
-      const columnDefinition = customFieldsBuilderMap[type]().getEuiTableColumn({ label });
+      const customFieldDefinition = customFieldsBuilderMap[type]();
+      const euiTableColumnProps =
+        type === CustomFieldTypes.LIST ? { label, options: configuration.options } : { label };
+      const columnDefinition = customFieldDefinition.getEuiTableColumn(
+        euiTableColumnProps as CasesConfigurationUICustomField
+      );
 
       columnsDict[key] = {
         ...columnDefinition,

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

@@ -67,7 +67,7 @@ describe.skip('CustomFields', () => {
     expect(screen.queryAllByTestId('create-custom-field', { exact: false }).length).toEqual(0);
   });
 
-  it('should render as optional fields for text custom fields', async () => {
+  it('should render as optional fields for text and list custom fields', async () => {
     appMockRender.render(
       <FormTestComponent onSubmit={onSubmit}>
         <CustomFields
@@ -78,7 +78,7 @@ describe.skip('CustomFields', () => {
       </FormTestComponent>
     );
 
-    expect(await screen.findAllByTestId('form-optional-field-label')).toHaveLength(2);
+    expect(await screen.findAllByTestId('form-optional-field-label')).toHaveLength(4);
   });
 
   it('should not set default value when in edit mode', async () => {
@@ -115,12 +115,14 @@ describe.skip('CustomFields', () => {
 
     const customFields = customFieldsWrapper.querySelectorAll('.euiFormRow');
 
-    expect(customFields).toHaveLength(4);
+    expect(customFields).toHaveLength(6);
 
     expect(customFields[0]).toHaveTextContent('My test label 1');
     expect(customFields[1]).toHaveTextContent('My test label 2');
     expect(customFields[2]).toHaveTextContent('My test label 3');
     expect(customFields[3]).toHaveTextContent('My test label 4');
+    expect(customFields[4]).toHaveTextContent('My test label 5');
+    expect(customFields[5]).toHaveTextContent('My test label 6');
   });
 
   it('should update the custom fields', async () => {
@@ -132,6 +134,7 @@ describe.skip('CustomFields', () => {
 
     const textField = customFieldsConfigurationMock[2];
     const toggleField = customFieldsConfigurationMock[3];
+    const listField = customFieldsConfigurationMock[4];
 
     await userEvent.type(
       await screen.findByTestId(`${textField.key}-${textField.type}-create-custom-field`),
@@ -152,6 +155,7 @@ describe.skip('CustomFields', () => {
             [customFieldsConfigurationMock[1].key]: customFieldsConfigurationMock[1].defaultValue,
             [textField.key]: 'hello',
             [toggleField.key]: true,
+            [listField.key]: 'option_1',
           },
         },
         true

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

@@ -230,6 +230,7 @@ describe('CaseFormFields', () => {
             test_key_1: 'My text test value 1',
             test_key_2: false,
             test_key_4: false,
+            test_key_5: 'option_1',
           },
         },
         true
@@ -268,6 +269,7 @@ describe('CaseFormFields', () => {
             test_key_1: 'Test custom filed value',
             test_key_2: true,
             test_key_4: false,
+            test_key_5: 'option_1',
           },
         },
         true

x-pack/plugins/cases/public/components/case_view/components/custom_fields.test.tsx

@@ -89,7 +89,7 @@ describe('Case View Page files tab', () => {
       exact: false,
     });
 
-    expect(customFields.length).toBe(4);
+    expect(customFields.length).toBe(6);
 
     expect(await within(customFields[0]).findByRole('heading')).toHaveTextContent(
       'My test label 1'
@@ -103,6 +103,12 @@ describe('Case View Page files tab', () => {
     expect(await within(customFields[3]).findByRole('heading')).toHaveTextContent(
       'My test label 4'
     );
+    expect(await within(customFields[4]).findByRole('heading')).toHaveTextContent(
+      'My test label 5'
+    );
+    expect(await within(customFields[5]).findByRole('heading')).toHaveTextContent(
+      'My test label 6'
+    );
   });
 
   it('pass the permissions to custom fields correctly', async () => {

x-pack/plugins/cases/public/components/configure_cases/flyout.test.tsx

@@ -397,7 +397,7 @@ describe('CommonFlyout ', () => {
             label: 'First custom field',
             required: true,
           },
-        ],
+        ] as CustomFieldConfiguration[],
       };
 
       appMockRender = createAppMockRenderer({ license });
@@ -597,21 +597,13 @@ describe('CommonFlyout ', () => {
                 type: 'text',
                 value: 'this is a sample text!',
               },
-              {
-                key: 'test_key_2',
-                type: 'toggle',
-                value: true,
-              },
-              {
-                key: 'test_key_3',
-                type: 'text',
-                value: null,
-              },
-              {
-                key: 'test_key_4',
-                type: 'toggle',
-                value: false,
-              },
+              ...customFieldsConfigurationMock
+                .slice(1)
+                .map(({ key, type, defaultValue, required }) => ({
+                  key,
+                  type,
+                  value: required ? defaultValue : type === CustomFieldTypes.TOGGLE ? false : null,
+                })),
             ],
           },
         });
@@ -691,7 +683,7 @@ describe('CommonFlyout ', () => {
             label: 'First custom field',
             required: true,
           },
-        ],
+        ] as CustomFieldConfiguration[],
         connector: {
           id: 'servicenow-1',
           name: 'My SN connector',