[Cases] Add custom fields: List type #194236

Zacqary · 2024-09-26T22:37:06Z

Summary

Adds the List custom field type to Cases. Also makes some changes to the custom field configuration type system to handle the new features added in this field type.

The List field type creates a <select> dropdown with a set of options determined by the custom field's configuration. Options are defined as { key: UUID, label: String }.

When the user selects a value, it is saved to the case with the schema { key: Custom Field UUID, value: Option UUID }. The option's label is fetched at runtime by the UI from the custom field configuration, and displayed. This is a deviation from the research issue proposal, which specced a schema of { key: ${Field UUID}.{Option UUID}, label: Option Label }. Engineering this turned out to require major changes to the form UI library and the API transformation libraries, and it's a less drastic change to simply convert the key to a label when displaying the field.

Option labels can be renamed for free using this new schema, since the UUID is the only thing stored in case saved objects. We don't need to create a new issue to add renaming support.

This PR also allows List fields to be filtered. This required a change from using static filterOptions in custom field configurations to a dynamic getFilterOptions function. The Toggle field was updated to use this new dynamic function.

Known Issues

Due to elastic/eui#8027 drag-and-drop on the new <OptionsField> doesn't correctly render the current draggable element inside the flyout. EUI is aiming to fix this before 8.16.

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios

obltmachine · 2024-09-26T22:37:19Z

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

/oblt-deploy : Deploy a Kibana instance using the Observability test environments.
run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

…ustom-field

Zacqary · 2024-10-02T14:40:25Z

/ci

elasticmachine · 2024-10-02T14:41:04Z

Pinging @elastic/response-ops (Team:ResponseOps)

elasticmachine · 2024-10-02T14:41:05Z

Pinging @elastic/response-ops-cases (Feature:Cases)

…ustom-field

kibana-ci · 2024-10-03T17:49:20Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 096fc7c

Failed CI Steps

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`cases`	812	822	+10

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`cases`	491.4KB	494.3KB	+2.8KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`cases`	151.1KB	160.8KB	+9.7KB

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

adcoelho · 2024-10-14T08:59:20Z

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

+  rt.strict({ type: CustomFieldListTypeRt }),
+  CustomFieldConfigurationWithoutTypeRt,
+  rt.strict({
+    options: rt.array(ListCustomFieldOptionRt),


Should we limit the number of options? @cnasikas

Suggested change

options: rt.array(ListCustomFieldOptionRt),

options: limitedArraySchema(ListCustomFieldOptionRt),

They can easily get out of hand.

adcoelho · 2024-10-14T09:08:51Z

x-pack/plugins/cases/public/components/custom_fields/list/components/options_field.tsx

+          <EuiFlexItem>
+            <EuiButtonEmpty
+              iconType={'plusInCircle'}
+              onClick={onAddOption}


Testing this form one thing I missed from a user perspective was pressing Enter to add a new option.

That way I can type an option, press enter, type another, press enter, type another, etc

Instead of type, mouse, type, mouse.

UX-wise I really missed that option.

adcoelho

I have a bug with the following scenario:

Created a List custom field with two options(b and c).
Created a case and set the custom field value to be b.
Went back to the settings and deleted the option b.
Now in the case the custom field has no value but I cannot edit it to set c. (See video.)

Screen.Recording.2024-10-14.at.11.25.02.mov

…ustom-field # Conflicts: # x-pack/plugins/cases/public/components/custom_fields/text/create.test.tsx

Zacqary · 2024-10-14T21:44:40Z

@adcoelho Feedback addressed. Added a 10 item limit to options on the UI side and the API side. Bug fixed as well.

jcger · 2024-10-16T08:31:22Z

Found a couple of issues:

1. Moving an empty new option causes another one to be created

Screen recording

Screenshot.mov

2. The first element of every list seems to be stored with uuid 0, here is the output of two lists I created. Maybe it's ok? I just saw that it's intentional

Query (dunno how to search by list type directly):

GET .kibana_alerting_cases/_search
{
  "query": {
    "wildcard": {
      "cases-configure.owner": {
        "value": "*"
      }
    }
  }
}

Output

"customFields": [
              {
                "type": "list",
                "key": "6611d94a-a813-4d0f-9dae-0070e6208ff1",
                "label": "MyList",
                "required": false,
                "options": [
                  {
                    "key": "00000000-0000-0000-0000-000000000000", // HERE <------------
                    "label": "a"
                  },
                  {
                    "key": "9ff0b4a2-cfee-42fa-9374-37d0c2654f12",
                    "label": "b"
                  },
                  {
                    "key": "33b8be32-4ffc-4b39-bea7-554396017b51",
                    "label": "c"
                  },
                  {
                    "key": "832187c8-8c61-4953-9d78-fd942d8fc738",
                    "label": "d"
                  }
                ],
                "defaultValue": "9ff0b4a2-cfee-42fa-9374-37d0c2654f12"
              },
              {
                "type": "list",
                "key": "9a716a2c-3922-4a6a-a066-f883aa048c71",
                "label": "MySecondList",
                "required": false,
                "options": [
                  {
                    "key": "00000000-0000-0000-0000-000000000000", // HERE <------------
                    "label": "1"
                  },
                  {
                    "key": "f1033a37-7bd0-45df-883e-ab32f95a3b46",
                    "label": "2"
                  },
                  {
                    "key": "02eaef55-95ad-4486-9dd4-99b8abad4d77",
                    "label": "3"
                  },
                  {
                    "key": "d8a6fd18-1b58-4f01-864d-99e13bcbcd92",
                    "label": "4"
                  }
                ]
              }
            ]

js-jankisalvi

Great work!! 🎉

Found an issue in continuation to what @adcoelho found while deleting an option. Once the option which was selected as defaultValue is deleted, the next option is set as default in custom field.
However it is not visible when case is created.

See video:

List.cf.delete.mov

jcger · 2024-10-16T12:40:38Z

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

-                value: false,
-              },
-            ],
+      // await waitFor(() => {


forgotten comment, if you are 100% you want to do this it should be removed, right? I personally would leave it as it was just because I'm to afraid of flakiness in CI. There is at least two more places where this happens, I don't want to spam with "same here"

Thanks for catching that

jcger · 2024-10-16T13:09:19Z

x-pack/plugins/cases/public/components/custom_fields/list/components/options_field.tsx

+            ))}
+          </EuiDroppable>
+        </EuiDragDropContext>
+        {maxOptions && currentOptions.length < maxOptions && (


should we test this?

Yes probably, just added this feature and neglected to test, fixing now

cnasikas

In the research issue, we went through all the available options and we picked the one that satisfies all of the criteria: filtering, searching, sorting, renaming, and deletion.

Key in Cases SO	Value in Cases SO	Filtering	Searching	Sorting	OFTB Renaming	OFTB Deletion
Custom field key (UUID)	Option key (UUID)	✅	❌	❌	✅	❌
Custom field key + Option key	Actual value	✅	✅	✅	❌	❌

You cannot sort or search in ES because the SO will have the UUID and not the actual value. For the second option in the above table, we can satisfy renaming or deletion but we need to use the task manager which requires extra work as described in the research issue.

Engineering this turned out to require major changes to the form UI library and the API transformation libraries, and it's a less drastic change to simply convert the key to a label when displaying the field.

As mentioned in #176491 there is no need to make changes in the form UI library. The library supports serializer and deserializer where we can convert the form (UI) data to the schema expected by the backend and vice-versa. Also, the transformer we have in place in the CasesService can transform the data from what is expected by the cases client and the cases SO.

elasticmachine · 2024-10-17T17:00:09Z

💔 Build Failed

Buildkite Build
Commit: de13ab6

Failed CI Steps

Test Failures

[job] [logs] Jest Integration Tests #1 / incompatible_cluster_routing_allocation retries the INIT action with a descriptive message when cluster settings are incompatible
[job] [logs] Jest Integration Tests #1 / incompatible_cluster_routing_allocation retries the INIT action with a descriptive message when cluster settings are incompatible
[job] [logs] Jest Integration Tests #1 / migration v2 - read batch size does not reduce the read batchSize in half if no batches exceeded maxReadBatchSizeBytes
[job] [logs] Jest Integration Tests #1 / migration v2 - read batch size does not reduce the read batchSize in half if no batches exceeded maxReadBatchSizeBytes
[job] [logs] Jest Integration Tests #1 / migration v2 - read batch size reduces the read batchSize in half if a batch exceeds maxReadBatchSizeBytes
[job] [logs] Jest Integration Tests #1 / migration v2 - read batch size reduces the read batchSize in half if a batch exceeds maxReadBatchSizeBytes
[job] [logs] Jest Integration Tests #1 / migration v2 migrates saved objects normally with multiple ES nodes
[job] [logs] Jest Integration Tests #1 / migration v2 migrates saved objects normally with multiple ES nodes

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`cases`	812	822	+10

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`cases`	491.9KB	494.8KB	+2.8KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`cases`	151.2KB	161.1KB	+9.9KB

History

💚 Build #242311 succeeded c22af8a

Zacqary · 2024-10-17T18:58:41Z

I'm able to get as far as transforming the key/value pair to the dot notation in x-pack/plugins/cases/server/services/cases/transform.ts, but this throws a 500 error of Invalid value "[the supplied value label]" supplied to "customFields,value".

I imagine this might have something to do with saved object schemas but I'm unsure. Will keep investigating

Zacqary · 2024-10-18T16:06:52Z

Schema is getting saved in the form successfully but deserializing it into the View and Edit components don't seem to be working properly. Trying to figure that out, it's not calling the deserializer where I expected it to but still somehow transforming the saved object value I think.

Zacqary added 8 commits September 24, 2024 13:12

WIP

8a5af8c

Get creatie and view components working

facfa12

Fix creating with default value

cbe96ac

Fix edit component

79c47bc

Commit missing helpers

6986bc9

Move to pure key/val SO system and implement in frontend

6363db9

Add filtering for list fields

48bba35

Add configure test

9609732

Zacqary added release_note:enhancement Team:ResponseOps Label for the ResponseOps team (formerly the Cases and Alerting teams) v9.0.0 Feature:Cases Cases feature v8.16.0 backport:version Backport to applied version labels labels Sep 26, 2024

Zacqary added 15 commits September 26, 2024 17:38

Fix server default value for list

35caf9d

Fix user action display

d254d33

Update custom field user action tests

8c56aa2

Add create test

8750918

Add create test

9f365ab

Add edit test

7ef1d32

Add getEuiTableColumn test

8f445ee

Add view test

c0c5816

Add options field validation

8595ac4

Add configure test

90b9e92

Type fix in index test

66be662

Merge remote-tracking branch 'upstream/main' into 176491-cases-list-c…

cd00f54

…ustom-field

Fix cases index jest test

4e60410

Fix api jest

df2bded

Fix flyout jest

1d807aa

Fix Jest 9

1f3b3d1

Zacqary marked this pull request as ready for review October 2, 2024 14:41

Zacqary requested a review from a team as a code owner October 2, 2024 14:41

Zacqary enabled auto-merge (squash) October 2, 2024 14:41

Zacqary added 5 commits October 2, 2024 13:18

Fix typecheck

41ba5ba

Merge remote-tracking branch 'upstream/main' into 176491-cases-list-c…

b0cdbfb

…ustom-field

Fix typecheck

2d986f4

Fix test typechecks

910bce2

Merge remote-tracking branch 'upstream/main' into 176491-cases-list-c…

096fc7c

…ustom-field

adcoelho reviewed Oct 14, 2024

View reviewed changes

Zacqary added 4 commits October 14, 2024 12:27

Limit list options to 10

1f4c6b1

Make enter key add new list option to options field

f3a02dc

Fix editing fields with deleted list values

41406df

Merge remote-tracking branch 'upstream/main' into 176491-cases-list-c…

c22af8a

…ustom-field # Conflicts: # x-pack/plugins/cases/public/components/custom_fields/text/create.test.tsx

js-jankisalvi reviewed Oct 16, 2024

View reviewed changes

jcger reviewed Oct 16, 2024

View reviewed changes

cnasikas requested changes Oct 16, 2024

View reviewed changes

Zacqary added 2 commits October 16, 2024 14:53

Uncomment await.waitFors

b77d0fc

Fix bugs with options field and add test file

de13ab6

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Cases] Add custom fields: List type #194236

[Cases] Add custom fields: List type #194236

Zacqary commented Sep 26, 2024 •

edited

Loading

obltmachine commented Sep 26, 2024

Zacqary commented Oct 2, 2024

elasticmachine commented Oct 2, 2024

elasticmachine commented Oct 2, 2024

kibana-ci commented Oct 3, 2024

adcoelho Oct 14, 2024

adcoelho Oct 14, 2024

adcoelho left a comment

Zacqary commented Oct 14, 2024 •

edited

Loading

jcger commented Oct 16, 2024 •

edited

Loading

js-jankisalvi left a comment

jcger Oct 16, 2024

Zacqary Oct 16, 2024

jcger Oct 16, 2024

Zacqary Oct 16, 2024

cnasikas left a comment •

edited

Loading

elasticmachine commented Oct 17, 2024 •

edited

Loading

Zacqary commented Oct 17, 2024

Zacqary commented Oct 18, 2024

	options: rt.array(ListCustomFieldOptionRt),
	options: limitedArraySchema(ListCustomFieldOptionRt),

[Cases] Add custom fields: List type #194236

Are you sure you want to change the base?

[Cases] Add custom fields: List type #194236

Conversation

Zacqary commented Sep 26, 2024 • edited Loading

Summary

Known Issues

Checklist

obltmachine commented Sep 26, 2024

🤖 GitHub comments

Zacqary commented Oct 2, 2024

elasticmachine commented Oct 2, 2024

elasticmachine commented Oct 2, 2024

kibana-ci commented Oct 3, 2024

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

adcoelho Oct 14, 2024

Choose a reason for hiding this comment

adcoelho Oct 14, 2024

Choose a reason for hiding this comment

adcoelho left a comment

Choose a reason for hiding this comment

Zacqary commented Oct 14, 2024 • edited Loading

jcger commented Oct 16, 2024 • edited Loading

1. Moving an empty new option causes another one to be created

2. The first element of every list seems to be stored with uuid 0, here is the output of two lists I created. Maybe it's ok? I just saw that it's intentional

js-jankisalvi left a comment

Choose a reason for hiding this comment

jcger Oct 16, 2024

Choose a reason for hiding this comment

Zacqary Oct 16, 2024

Choose a reason for hiding this comment

jcger Oct 16, 2024

Choose a reason for hiding this comment

Zacqary Oct 16, 2024

Choose a reason for hiding this comment

cnasikas left a comment • edited Loading

Choose a reason for hiding this comment

elasticmachine commented Oct 17, 2024 • edited Loading

💔 Build Failed

Failed CI Steps

Test Failures

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

Zacqary commented Oct 17, 2024

Zacqary commented Oct 18, 2024

Zacqary commented Sep 26, 2024 •

edited

Loading

Zacqary commented Oct 14, 2024 •

edited

Loading

jcger commented Oct 16, 2024 •

edited

Loading

cnasikas left a comment •

edited

Loading

elasticmachine commented Oct 17, 2024 •

edited

Loading