[ResponseOps] [Cases] UX enhancements

[adcoelho]

Fixes #144614

Summary

Case Detail Page

• The ‘Add comment’ button in the Case detail page is now disabled until a comment is filled in.
• The save button in the 'Edit Comment' section of the Case detail page is now disabled if a comment is empty.
• The Tags in the activity stream now display a hollow badge equal to the ones on the sidebar.
• Fixed the spacing between the headings in the sidebar. The gutter size was increased.

Case Creation Page

• The Create and Cancel buttons were too close together. The distance between them was increased.
• There is now a confirmation dialog if the user clicks the cancel button.
• Introduced a restricted page width. The max is now 1200px.

All Cases list

• Brought back the distance between tags in the rows

Screenshots

Disabled Add comment button

Enabled Add comment button

Hollow tags

Fixed sidebar spacing

Create and Cancel button spacing

Cancel create case confirmation dialog

Centered, restricted page width

Margin between tags

[elasticmachine]

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

[elasticmachine]

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

[jonathan-buttner]

Do we still need this schema file since we're not showing any errors anymore?

[adcoelho]

We don't display the error but I thought some frontend validation wouldn't harm. 😅

[cnasikas]

The emptyField validator will throw an error if the comment contains only empty characters. The current behavior is to show an error message to the user in this scenario. I think we should keep showing the error and change the error message (only for the above scenario) to something more descriptive like "Empty comment is not allowed". Another alternative is to disable the button if the comment contains only empty characters but I found it a bit confusing that I cannot press the button even though I typed something. The error message will inform me of the requirements.

[jonathan-buttner]

Yeah I agree with @cnasikas. I think what Michael was getting at in the issue was to not show an error if the user hasn't typed anything yet. So if there's an easy way to differentiate between hasn't typed vs typed all spaces we should show an error if it's all spaces but just disable the button if the user hasn't typed.

[cnasikas]

nit: Is a bit confusing that we pass a variable for the field but the type and the destructed value are known. Maybe we can remove the fieldName prop and hardcode the field name to content

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 32fa007

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
cases	512	515	+3

Async chunks

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

id	before	after	diff
cases	347.5KB	348.9KB	+1.4KB

Page load bundle

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

id	before	after	diff
cases	127.1KB	127.1KB	+9.0B

Unknown metric groups

ESLint disabled in files

id	before	after	diff
osquery	1	2	+1

ESLint disabled line counts

id	before	after	diff
enterpriseSearch	19	21	+2
fleet	59	65	+6
osquery	109	115	+6
securitySolution	443	449	+6
total			+20

Total ESLint disabled count

id	before	after	diff
enterpriseSearch	20	22	+2
fleet	68	74	+6
osquery	110	117	+7
securitySolution	520	526	+6
total			+21

History

• 💚 Build #92586 succeeded 61a8846
• 💔 Build #92340 failed 2b949bb
• 💔 Build #92251 failed 4f6bf83
• 💔 Build #91533 failed 371bbb0

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