[Cases] Simplify information shown in the 'Select case' modal

[peteharverson]

The recent work for attaching ML embeddables to new or existing cases in #138994 has highlighted a few usability enhancements that could be made to the 'Select case' modal:

• the 'Solution' filter dropdown is displaying IDs securitySolution, observability and cases. User-friendly labels, as used in the tooltips for the solution icons, Security, Observability and Stack, should be used instead.
• The table is showing too many columns for the width available, resulting in a lot of the useful information being truncated. Consider hiding a few of the existing columns, such as 'Comments' and 'External Incident'
• The search field in the top filter bar has such a small width as to be almost unusable. Either place it on a separate line, or hide some of the existing controls (tags, reporter?).

[elasticmachine]

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

[elasticmachine]

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

[cnasikas]

The search field in the top filter bar has such a small width as to be almost unusable. Either place it on a separate line, or hide some f the existing controls (tags, reporter?).

I think putting the search on a separate line makes more sense. @mdefazio What do you think?

[mdefazio]

I would suggest removing items first. I don't think we should take up that much vertical real estate with it being on a second line. Being very opinionated about what columns and filters are available in this view would be better IMO. This will then let the search bar grow wider.

I agree 'Reporter' and 'Tags' could be good candidates to remove. Also external incident?
If we are keeping solutions, perhaps adding in the icons to the filter dropdown will help improve the relation of this filter with the column. But do our users associate their cases in this way—using solutions? (Feels more like an internal reference)
Would also suggest removing 'Select' buttons and instead go for checkboxes (or radios) on the left side of the rows.

@cnasikas we discussed some changes to the Cases table that could also apply here.

[cnasikas]

I agree 'Reporter' and 'Tags' could be good candidates to remove

Do you believe we should remove the filters also? I think users should have every filter in their disposal to aid them founding the case the need easily. Users may add tags that have a meaning to a case or uniqly identifies the case. Same for the assignees (reporter changed to assigness), the may want to find all cases assigned to them.

But do our users associate their cases in this way—using solutions? (Feels more like an internal reference)

They do. It is possible to attach artifacts to a case outside of Security solution or Observability. For example you can attach an ML embendable from the ML page or an OsQuery. The solutions dropdown and column is only visible to applications outside of Security solution or Observability.

Would also suggest removing 'Select' buttons and instead go for checkboxes (or radios) on the left side of the rows.

We do not support attaching to multiple cases at the moment at the same time. The checkbox/radio would indicate to the user that they can do that, right?

@cnasikas we discussed some changes to the Cases table that could also apply here.

Correct! This is to quickly fix what we already have until we implement the new changes.

[js-jankisalvi]

We do not support attaching to multiple cases at the moment at the same time. The checkbox/radio would indicate to the user that they can do that, right?

@cnasikas @mdefazio
How about we allow to select row, we can change the background color and border to highlight on which row pointer is. In that case we don't need select button or checkbox/ radio buttons.

[mdefazio]

I would imagine searching would be more useful for this instance of the table than some of the filters. And so to make that more usable, the trade-off would be to remove (some of) them in favor of a wider search box. I am not suggesting this is also the case for the main Cases table.

I'm thinking of this view as a trimmed down version of the cases table. Similar to the experience in github where you can select a label or milestone. Those UI's are minimal with a title and perhaps description. But there are broader views for each that show more information (and search/filter options).

Our issue at the moment with this view is readability—so without rethinking how we display the data or provide filters, I think our easiest course is to remove columns/filters to make room for the title and searching as suggested in the issue summary. If we feel all the filters and fields are necessary here, then I would suggest we rethink this UI through mockups first.

How about we allow to select row, we can change the background color and border to highlight on which row pointer is. In that case we don't need select button or checkbox/ radio buttons.

Apologies for my previous comment not being clear. I'd like to avoid establishing new variants of our table patterns if possible. What @js-jankisalvi is suggesting feels more akin to our selectable rather than selecting from a table.

Let me try and make a quick mockup of some possible options so we can make sure we're thinking the same thing.

[mdefazio]

Likely some changes needed here, but here's a quick take on the update:

Screenshot is shown at 768px wide. Kept as many filter options as possible and still provide enough width for the search bar.