[Console] Improve UX around handling multiple requests #132494

mibragimov · 2022-05-19T08:58:19Z

Fixes #130982

This PR adds support for highlighting the results for multiple requests in the editor output

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

src/plugins/console/public/application/models/legacy_core_editor/mode/output_highlight_rules.js

...plugins/console/public/application/containers/editor/legacy/console_editor/editor_output.tsx

src/plugins/console/public/application/models/legacy_core_editor/mode/output_highlight_rules.js

...plugins/console/public/application/containers/editor/legacy/console_editor/editor_output.tsx

src/plugins/console/public/styles/_app.scss

...sole/public/application/components/network_request_status_bar/network_request_status_bar.tsx

src/plugins/console/public/application/hooks/use_send_current_request/send_request.ts

mibragimov · 2022-05-24T12:38:34Z

@elasticmachine merge upstream

mibragimov · 2022-05-25T08:01:02Z

@elasticmachine merge upstream

mibragimov · 2022-05-25T11:52:54Z

Verified functional tests through flaky-test-suite-runner https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/670

test/functional/page_objects/console_page.ts

test/functional/apps/console/_console.ts

elasticmachine · 2022-05-26T12:45:08Z

Pinging @elastic/platform-deployment-management (Team:Deployment Management)

cjcenizal

@elastic/kibana-design Would you or some folks from EUI please review the styles here? I want to make sure they're correct, especially for dark mode.

@mibragimov People are going to love this enhancement! Thank you so much for making this change. I had one suggestion to add some more tests, other than that this code LGTM.

Did a quick test locally and things look good there too:

src/plugins/console/public/application/models/legacy_core_editor/mode/output_highlight_rules.ts

mibragimov · 2022-05-30T04:13:34Z

@elasticmachine merge upstream

mibragimov · 2022-06-01T04:30:20Z

@elasticmachine merge upstream

kibanamachine · 2022-06-01T04:30:32Z

expected head sha didn’t match current head ref.

mibragimov · 2022-06-01T05:39:22Z

@elastic/kibana-design Would you or some folks from EUI please review the styles here? I want to make sure they're correct, especially for dark mode.

ping @elastic/kibana-design

MichaelMarcialis

I've left a few style comments below for your review. Thanks!

src/plugins/console/public/styles/_app.scss

MichaelMarcialis · 2022-06-02T19:51:47Z

src/plugins/console/public/styles/_app.scss

+      background-color: $euiColorSuccess;
+      color: chooseLightOrDarkText($euiColorSuccess);


Suggesting change to the correct badge background colors here.

Suggested change

background-color: $euiColorSuccess;

color: chooseLightOrDarkText($euiColorSuccess);

background-color: $euiColorVis0_behindText;

color: chooseLightOrDarkText($euiColorVis0_behindText);

@MichaelMarcialis For our own edification, can you teach us about the role of $euiColorVis0_behindText and similar colors, and what makes it better than $euiColorSuccess here?

Good question, @cjcenizal! For the purposes of this PR, my reason for the suggested color changes were purely to make these ace badges consistent with the colors that our EuiBadge components use.

That said, I imagine the reason the EUI team ultimately chose to use the behind-text visualization colors for the EuiBadge component has to do with accessibility and the contrast ratio, as this component houses fairly small sized text. The contrast with the behind-text visualization colors appears to be higher and receives a better WCAG rating. Unlike EuiBadge, I assume that components with larger text sizes (such as EuiButton) can afford be a bit less strict with the color contrast, which is why they can use colors like $euiColorSuccess.

CCing @cchaos here to keep me honest and double-check my assumptions.

For full context on why we used visualization colors for badges, you can read through this PR: elastic/eui#2455

Thank you both! This helps me out a ton.

src/plugins/console/public/styles/_app.scss

mibragimov · 2022-06-03T11:31:58Z

@elasticmachine merge upstream

mibragimov · 2022-06-03T11:34:28Z

@MichaelMarcialis thanks for the review! I've addressed your feedback with ad57319, do you mind having another look?

MichaelMarcialis

Thanks for making those changes @mibragimov. I only have one additional thought. Would it be worth changing the font family of .ace_badge to $euiFontFamily in this case? Currently, the .ace_badges are inheriting the editor font family, which differentiates itself from the standard EUI badges. Assuming these badges only ever appear at the end of editor lines, I think this might look nicer/more consistent.

Otherwise, this looks good from my perspective. Approving now so that I don't hold you up further. Thanks.

mibragimov · 2022-06-06T04:27:17Z

@elasticmachine merge upstream

kibana-ci · 2022-06-06T05:37:35Z

💚 Build Succeeded

Metrics [docs]

Async chunks

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

id	before	after	diff
`console`	389.0KB	389.5KB	+468.0B

Page load bundle

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

id	before	after	diff
`console`	23.0KB	24.4KB	+1.4KB

History

💚 Build #49058 succeeded 2f9b9bc
💚 Build #48538 succeeded 30cce66
💚 Build #48046 succeeded 18e0e7e
💚 Build #47956 succeeded 371ce42
💚 Build #47777 succeeded eaaee4b
💚 Build #47762 succeeded c7b4f64

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

cc @mibragimov

[wip] show status code/text in editor output for multiple requests

32db185

mibragimov added the WIP Work in progress label May 19, 2022

mibragimov requested a review from alexwizp May 19, 2022 08:58

mibragimov self-assigned this May 19, 2022

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

df0b1e2

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

mibragimov added release_note:enhancement Feature:Console Dev Tools Console Feature Feature:Dev Tools Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more t// v8.3.0 labels May 19, 2022

Muhammad Ibragimov added 3 commits May 20, 2022 16:45

Render status badges in the output panel

a63deb5

Add missing dependancy for useEffect hook

0bf0c1a

Lint

215eb44

mibragimov commented May 23, 2022

View reviewed changes

src/plugins/console/public/application/models/legacy_core_editor/mode/output_highlight_rules.js Outdated Show resolved Hide resolved

cjcenizal reviewed May 23, 2022

View reviewed changes

Muhammad Ibragimov added 5 commits May 24, 2022 13:57

Address comments

ad63eaf

Add functional tests

ed198f8

Update tests

962da8f

Fix tests

5a0d907

Update selectAll command key for firefox

574bf1d

kibanamachine and others added 2 commits May 24, 2022 07:38

Merge branch 'main' into console/multiple-requests-ux

f56ec79

Fix selecting all requests in tests

da63f46

kibanamachine and others added 3 commits May 25, 2022 03:01

Merge branch 'main' into console/multiple-requests-ux

d352a85

Convert output modes to TS

0e72f31

Fix checks

15d683e

alexwizp reviewed May 25, 2022

View reviewed changes

test/functional/page_objects/console_page.ts Outdated Show resolved Hide resolved

alexwizp reviewed May 25, 2022

View reviewed changes

test/functional/apps/console/_console.ts Outdated Show resolved Hide resolved

mibragimov requested review from a team as code owners May 26, 2022 12:45

cjcenizal approved these changes May 26, 2022

View reviewed changes

src/plugins/console/public/application/models/legacy_core_editor/mode/output_highlight_rules.ts Outdated Show resolved Hide resolved

Add tests for mapStatusCodeToBadge function

371ce42

Merge branch 'main' into console/multiple-requests-ux

18e0e7e

mibragimov added review and removed WIP Work in progress labels May 30, 2022

Merge branch 'main' into console/multiple-requests-ux

30cce66

MichaelMarcialis reviewed Jun 2, 2022

View reviewed changes

Address comments

ad57319

Merge branch 'main' into console/multiple-requests-ux

2f9b9bc

MichaelMarcialis approved these changes Jun 3, 2022

View reviewed changes

kibanamachine and others added 2 commits June 5, 2022 23:27

Merge branch 'main' into console/multiple-requests-ux

0f33fd6

Change .ace-badge font family to $euiFontFamily

4996043

mibragimov added v8.4.0 and removed review v8.3.0 labels Jun 6, 2022

alexwizp approved these changes Jun 6, 2022

View reviewed changes

mibragimov merged commit b5b68bb into elastic:main Jun 6, 2022

kibanamachine added the backport:skip This PR does not require backporting label Jun 6, 2022

mibragimov deleted the console/multiple-requests-ux branch June 6, 2022 08:34

		background-color: $euiColorSuccess;
		color: chooseLightOrDarkText($euiColorSuccess);

[Console] Improve UX around handling multiple requests #132494

[Console] Improve UX around handling multiple requests #132494

Uh oh!

Conversation

mibragimov commented May 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mibragimov commented May 24, 2022

Uh oh!

mibragimov commented May 25, 2022

Uh oh!

mibragimov commented May 25, 2022

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented May 26, 2022

Uh oh!

cjcenizal left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mibragimov commented May 30, 2022

Uh oh!

mibragimov commented Jun 1, 2022

Uh oh!

kibanamachine commented Jun 1, 2022

Uh oh!

mibragimov commented Jun 1, 2022

Uh oh!

MichaelMarcialis left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MichaelMarcialis Jun 2, 2022

Choose a reason for hiding this comment

Uh oh!

cjcenizal Jun 2, 2022

Choose a reason for hiding this comment

Uh oh!

MichaelMarcialis Jun 3, 2022

Choose a reason for hiding this comment

Uh oh!

cchaos Jun 3, 2022

Choose a reason for hiding this comment

Uh oh!

cjcenizal Jun 3, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mibragimov commented Jun 3, 2022

Uh oh!

mibragimov commented Jun 3, 2022

Uh oh!

MichaelMarcialis left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mibragimov commented Jun 6, 2022

Uh oh!

kibana-ci commented Jun 6, 2022

💚 Build Succeeded

Metrics [docs]

Async chunks

Page load bundle

History

mibragimov commented May 19, 2022 •

edited

Loading

MichaelMarcialis left a comment •

edited

Loading