[Cases]: Redesign all cases list select modal #149851

js-jankisalvi · 2023-01-30T16:40:50Z

Summary

This PR Fixes: #139194
I Removes below columns and filters from Cases select modal.

Columns

Tags
Reporters/Assignees
Solution
Comments
Alerts
Updated On
Status
External Incident

Filters

Reporters/Assignees
Create case button (Create case button will be visible when there are no cases available)

Before

After: Updated

Flaky test runner: https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/1867

Checklist

Delete any items that are not applicable to this PR.

Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

…over changes

…-ref HEAD~1..HEAD --fix'

…kibana into select-case-modal

elasticmachine · 2023-02-01T13:19:43Z

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

elasticmachine · 2023-02-01T13:19:44Z

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

jonathan-buttner

Looking good. Left a few questions and suggestions.

I tried adding a case with a long name and it seems like we have a good amount of whitespace, should we make more room for the title?

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

x-pack/plugins/cases/public/components/all_cases/table_filters.test.tsx

x-pack/plugins/cases/public/components/filter_popover/index.tsx

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

x-pack/plugins/cases/public/components/all_cases/types.ts

x-pack/plugins/cases/public/components/all_cases/table_filters.test.tsx

...k/plugins/cases/public/components/all_cases/selector_modal/all_cases_selector_modal.test.tsx

peteharverson

I like the new cleaner design with fewer columns!

Agree with @jonathan-buttner about giving the Name column more room, and also need to decide on what to do with the 'Create case' button.

mdefazio · 2023-02-02T03:09:19Z

Thank you for updating this! 🙌

Here's a quick mock with the addition of 'create case' option. We typically show the create button at the beginning of the search bar so not to confuse it with a 'update' or 'submit' button that is usually at the end.

One small tweak I would also suggest from the original concept is to show the 'Select' buttons as the default (tinted background) styling, rather than the empty buttons. I think they should stand out more than they do currently.

I included the cancel footer (as an empty button), but i'm not sure you need it.

js-jankisalvi · 2023-02-02T10:53:54Z

Thanks for quick update!

One small tweak I would also suggest from the original concept is to show the 'Select' buttons as the default (tinted background) styling, rather than the empty buttons. I think they should stand out more than they do currently.

Agree. Select buttons should stand out.

I included the cancel footer (as an empty button), but i'm not sure you need it.

I think we have close button at top right corner. So cancel is not needed.

...k/plugins/cases/public/components/all_cases/selector_modal/all_cases_selector_modal.test.tsx

…-ref HEAD~1..HEAD --fix'

adcoelho

Tested already the new design and works fine for me, good job! 👌

There are some jarring rerenders that the modal does whenever there are no cases displayed and we trigger filters or sorting.

If there are rows then the whole modal doesn't rerender.

Screen.Recording.2023-02-02.at.17.18.25.mov

But I think it has nothing to do with your changes, maybe I should create a new issue @peteharverson ?

peteharverson

Tested latest changes and the design changes LGTM

There are some jarring rerenders that the modal does whenever there are no cases displayed and we trigger filters or sorting.

Yes I see this too. Agree with @adcoelho that this deserves a separate issue

x-pack/plugins/cases/public/components/all_cases/table_filters.test.tsx

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

js-jankisalvi · 2023-02-06T08:49:17Z

There are some jarring rerenders that the modal does whenever there are no cases displayed and we trigger filters or sorting.

Yes I see this too. Agree with @adcoelho that this deserves a separate issue

Created issue #150282

…-ref HEAD~1..HEAD --fix'

…kibana into select-case-modal

cnasikas

Great job! Tested and I working as expected. I left some comments.

x-pack/plugins/cases/public/components/filter_popover/index.tsx

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

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

x-pack/plugins/cases/public/components/all_cases/types.ts

x-pack/test/functional_with_es_ssl/apps/cases/attachment_framework.ts

x-pack/plugins/cases/public/components/all_cases/solution_filter.test.tsx

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

…-ref HEAD~1..HEAD --fix'

…kibana into select-case-modal

semd

Security-Explore changes LGTM

kibana-ci · 2023-02-06T16:05:24Z

💚 Build Succeeded

Buildkite Build
Commit: 6855c55

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`cases`	594	595	+1

Async chunks

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

id	before	after	diff
`cases`	391.9KB	393.4KB	+1.6KB

Page load bundle

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

id	before	after	diff
`cases`	129.8KB	129.8KB	+15.0B

History

💔 Build #105687 failed a2195b1
💔 Build #105629 failed bea3144
💔 Build #105575 failed f27278b
💔 Build #105172 failed 9fab2ce
💚 Build #104648 succeeded 17bd658

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

cc @js-jankisalvi

removed few columns and filters from all cases list select modal

e6c1fe3

js-jankisalvi added release_note:skip Skip the PR/issue when compiling release notes backport:skip This commit does not require backporting Team:ResponseOps Label for the ResponseOps team (formerly the Cases and Alerting teams) Feature:Cases Cases feature labels Jan 30, 2023

js-jankisalvi self-assigned this Jan 30, 2023

js-jankisalvi and others added 6 commits January 31, 2023 17:06

add icons to solution filter and use human readable name

6d50714

removed e2e test for solution column, added jest tests for filter pop…

0f96e99

…over changes

fix: e2e test util to create case from select modal

a8f99b8

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

6ef9a15

…-ref HEAD~1..HEAD --fix'

clean up

544a8c4

Merge branch 'select-case-modal' of https://github.com/js-jankisalvi/…

e57d552

…kibana into select-case-modal

js-jankisalvi added v8.7.0 release_note:enhancement and removed release_note:skip Skip the PR/issue when compiling release notes labels Feb 1, 2023

js-jankisalvi requested a review from a team February 1, 2023 13:16

Merge branch 'main' into select-case-modal

17bd658

js-jankisalvi marked this pull request as ready for review February 1, 2023 13:19

js-jankisalvi requested a review from a team as a code owner February 1, 2023 13:19

jonathan-buttner reviewed Feb 1, 2023

View reviewed changes

peteharverson reviewed Feb 1, 2023

View reviewed changes

...k/plugins/cases/public/components/all_cases/selector_modal/all_cases_selector_modal.test.tsx Outdated Show resolved Hide resolved

peteharverson reviewed Feb 1, 2023

View reviewed changes

adcoelho reviewed Feb 2, 2023

View reviewed changes

...k/plugins/cases/public/components/all_cases/selector_modal/all_cases_selector_modal.test.tsx Outdated Show resolved Hide resolved

js-jankisalvi and others added 3 commits February 2, 2023 16:35

review comments addressed

63958d0

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

bae075e

…-ref HEAD~1..HEAD --fix'

Merge branch 'main' into select-case-modal

9fab2ce

adcoelho approved these changes Feb 2, 2023

View reviewed changes

peteharverson approved these changes Feb 4, 2023

View reviewed changes

cnasikas reviewed Feb 6, 2023

View reviewed changes

x-pack/plugins/cases/public/components/all_cases/table_filters.test.tsx Show resolved Hide resolved

cnasikas reviewed Feb 6, 2023

View reviewed changes

x-pack/plugins/cases/public/components/all_cases/solution_filter.tsx Show resolved Hide resolved

js-jankisalvi and others added 5 commits February 6, 2023 10:53

Merge branch 'main' into select-case-modal

46bebd2

added test to check columns in modal, fixed test id for e2e test service

f66abbd

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

5ea5da4

…-ref HEAD~1..HEAD --fix'

Cancel button style update, lint fix

333ef1d

Merge branch 'select-case-modal' of https://github.com/js-jankisalvi/…

f27278b

…kibana into select-case-modal

cnasikas reviewed Feb 6, 2023

View reviewed changes

security solution cypress test for cancel modal button fixed

7abe0f2

js-jankisalvi requested a review from a team as a code owner February 6, 2023 12:14

kibanamachine and others added 3 commits February 6, 2023 12:19

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

e359f5e

…-ref HEAD~1..HEAD --fix'

review comments 2 addressed

45d05ec

Merge branch 'select-case-modal' of https://github.com/js-jankisalvi/…

bea3144

…kibana into select-case-modal

semd approved these changes Feb 6, 2023

View reviewed changes

js-jankisalvi added 3 commits February 6, 2023 15:14

fixed functional test for solutions

dc0be3f

Merge branch 'main' into select-case-modal

a2195b1

type fix

6855c55

cnasikas approved these changes Feb 6, 2023

View reviewed changes

jonathan-buttner approved these changes Feb 6, 2023

View reviewed changes

js-jankisalvi merged commit daf1304 into elastic:main Feb 6, 2023

cnasikas mentioned this pull request May 16, 2023

Move case features to the correct section in kibana release notes #157805

Merged

js-jankisalvi deleted the select-case-modal branch October 6, 2023 07:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Cases]: Redesign all cases list select modal #149851

[Cases]: Redesign all cases list select modal #149851

js-jankisalvi commented Jan 30, 2023 •

edited by cnasikas

Loading

elasticmachine commented Feb 1, 2023

elasticmachine commented Feb 1, 2023

jonathan-buttner left a comment

peteharverson left a comment

mdefazio commented Feb 2, 2023

js-jankisalvi commented Feb 2, 2023

adcoelho left a comment

peteharverson left a comment •

edited

Loading

js-jankisalvi commented Feb 6, 2023

cnasikas left a comment

semd left a comment

kibana-ci commented Feb 6, 2023

[Cases]: Redesign all cases list select modal #149851

[Cases]: Redesign all cases list select modal #149851

Conversation

js-jankisalvi commented Jan 30, 2023 • edited by cnasikas Loading

Summary

Checklist

For maintainers

elasticmachine commented Feb 1, 2023

elasticmachine commented Feb 1, 2023

jonathan-buttner left a comment

Choose a reason for hiding this comment

peteharverson left a comment

Choose a reason for hiding this comment

mdefazio commented Feb 2, 2023

js-jankisalvi commented Feb 2, 2023

adcoelho left a comment

Choose a reason for hiding this comment

peteharverson left a comment • edited Loading

Choose a reason for hiding this comment

js-jankisalvi commented Feb 6, 2023

cnasikas left a comment

Choose a reason for hiding this comment

semd left a comment

Choose a reason for hiding this comment

kibana-ci commented Feb 6, 2023

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

js-jankisalvi commented Jan 30, 2023 •

edited by cnasikas

Loading

peteharverson left a comment •

edited

Loading