[Code] New SearchPage layout by rylnd · Pull Request #45821 · elastic/kibana

rylnd · 2019-09-16T19:09:10Z

Summary

Adjusts searchbar to be the full width of the page, aligned with the sidebar
Adjusts sidebar to indent facets below group titles
Various CSS/JSX cleanup/consolidation

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
~~Documentation was added for features that require explanation or tutorials~~
Unit or functional tests were updated or added to match the most common scenarios
This was checked for keyboard-only and screenreader accessibility

For maintainers

This was checked for breaking API changes and was labeled appropriately
~~This includes a feature addition or change that requires a release note and was labeled appropriately~~

The new layout does not include these tabs; their utility is redundant with the ScopeSelector dropdown in the search bar.

Randomly found this orphaned rule while in here. The consuming component was deleted in a previous commit (ef8d7ea).

Others in this component already use codeQueryBar, so...

This required a little coordination between the two components through a couple of sass variables.

This was incorrect for two reasons: * You need to interpolate the sass variable within calc * This is the same as width: auto and can be deleted

Also removes some odd spacing surrounding the text; that should be done with CSS instead.

The copy previously had a leading space; using margin is a better approach. The class that was replaced was unused.

This tweaks the pink badge to be aligned with the text on the flyout title. Also removes a now-obsolete className (code-flyout-title).

* Indents facets below the filter's title * Adjusts spacing to be more consistent, removes use of EuiSpacer NB there's a bit of a hack for the indentation itself: we use an empty, fixed-width div for the facet's icon prop.

These were introduced by some default vscode settings, which have now been resolved.

Rather than use an empty, fixed-width div as an icon, just give it some margin-left.

elasticmachine · 2019-09-16T20:23:02Z

Pinging @elastic/code

x-pack/legacy/plugins/code/public/style/_filters.scss

daveyholler · 2019-09-16T20:48:57Z

x-pack/legacy/plugins/code/public/style/_variables.scss

@@ -0,0 +1,3 @@
+$codeSideBarWidth: 16rem;
+$codeSideBarIndent: 2rem;


Same here: $euiSizeXL

@daveyholler in general: what about multipliers larger than 2.5? E.g. should the line above be 16rem or calc(#{$euiSize} * 16) or calc(#{$euiSizeXL} * 8)?

I'd opt for the former calc(#{$euiSize} * 16)

elasticmachine · 2019-09-16T21:11:51Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-16T23:20:09Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-17T03:11:54Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

These existed in the ScopeTabs component which has been deleted.

elasticmachine · 2019-09-17T18:27:28Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

mw-ding

tested locally and LGTM.

mw-ding · 2019-09-17T18:38:56Z

@daveyholler Davey, can you take a second look?

* master: (33 commits) [easy] Exclude __examples__ from coverage (elastic#45556) [DOCS] Update CCR links (elastic#44012) Use unique junit report filenames again (elastic#45897) [ftr/savedObjects] add simple saved object api client to ftr s… (elastic#45856) New visualization editor Lens (elastic#36437) Sort using unix timestamp value (elastic#43162) [APM] Use POST instead of implicit GET (elastic#45903) [Canvas] Converting workpad header components to typescript and adding i18n (elastic#45274) skip flaky test (elastic#45884) set IS_PIPELINE_JOB in intake jobs (elastic#45850) [Uptime] Fix/issue 48 integration popup closes after refresh (elastic#45759) [Logs UI] Support zoom by brushing in the log rate chart (elastic#45879) [DOCS] Changes name to host (elastic#45798) [ML] Add population job wizard test (elastic#45765) [skip-ci][Maps][File upload] Geojson indexing and styling docs (elastic#41394) remove setTimeoue for state change (elastic#45853) [Graph] Restructure folders and add readme (elastic#45782) [ML] Enhance job id error message (elastic#45349) [SIEM] Do not update state component when they did unmount (elastic#45847) [i18n] sync from 7.4 latest translations (elastic#45823) ...

elasticmachine · 2019-09-17T22:39:36Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

mw-ding · 2019-09-17T23:42:35Z

@rylnd friendly reminder on the backporting.

rylnd · 2019-09-17T23:49:53Z

@rylnd friendly reminder on the backporting.

On it, there were conflicts that I'm currently resolving.

* Remove now-unused ScopeTabs component The new layout does not include these tabs; their utility is redundant with the ScopeSelector dropdown in the search bar. * Remove unused style Randomly found this orphaned rule while in here. The consuming component was deleted in a previous commit (ef8d7ea). * Use consistent block names in our BEM classes Others in this component already use codeQueryBar, so... * Move the Search bar above both the sidebar and main content * Align the search dropdown's RHS with the search sidebar This required a little coordination between the two components through a couple of sass variables. * Remove erroneous width rule This was incorrect for two reasons: * You need to interpolate the sass variable within calc * This is the same as width: auto and can be deleted * Copy: Search Filter -> Advanced Filter Also removes some odd spacing surrounding the text; that should be done with CSS instead. * Space out badge with margin, not nbsp The copy previously had a leading space; using margin is a better approach. The class that was replaced was unused. * Fix alignment of Filters flyout badge This tweaks the pink badge to be aligned with the text on the flyout title. Also removes a now-obsolete className (code-flyout-title). * Adjust layout of Search filter sidebar * Indents facets below the filter's title * Adjusts spacing to be more consistent, removes use of EuiSpacer NB there's a bit of a hack for the indentation itself: we use an empty, fixed-width div for the facet's icon prop. * Fix newline errors These were introduced by some default vscode settings, which have now been resolved. * Update snapshots following markup changes * Less hacky way of indenting facet buttons Rather than use an empty, fixed-width div as an icon, just give it some margin-left. * Swap hardcoded rem values for equivalent eui vars * One more eui var replacement * Remove unused import * Remove unused translations These existed in the ScopeTabs component which has been deleted.

rylnd added 10 commits September 16, 2019 12:22

Remove now-unused ScopeTabs component

f807a1c

The new layout does not include these tabs; their utility is redundant with the ScopeSelector dropdown in the search bar.

Remove unused style

8108692

Randomly found this orphaned rule while in here. The consuming component was deleted in a previous commit (ef8d7ea).

Use consistent block names in our BEM classes

371f9b7

Others in this component already use codeQueryBar, so...

Move the Search bar above both the sidebar and main content

bfde2c5

Align the search dropdown's RHS with the search sidebar

6b63f3d

This required a little coordination between the two components through a couple of sass variables.

Remove erroneous width rule

2837d47

This was incorrect for two reasons: * You need to interpolate the sass variable within calc * This is the same as width: auto and can be deleted

Copy: Search Filter -> Advanced Filter

cceef95

Also removes some odd spacing surrounding the text; that should be done with CSS instead.

Space out badge with margin, not nbsp

c4b001b

The copy previously had a leading space; using margin is a better approach. The class that was replaced was unused.

Fix alignment of Filters flyout badge

85c1c70

This tweaks the pink badge to be aligned with the text on the flyout title. Also removes a now-obsolete className (code-flyout-title).

Adjust layout of Search filter sidebar

d961e8f

* Indents facets below the filter's title * Adjusts spacing to be more consistent, removes use of EuiSpacer NB there's a bit of a hack for the indentation itself: we use an empty, fixed-width div for the facet's icon prop.

rylnd added release_note:skip Skip the PR/issue when compiling release notes v7.5.0 labels Sep 16, 2019

rylnd requested a review from a team as a code owner September 16, 2019 19:09

rylnd added 2 commits September 16, 2019 14:14

Fix newline errors

8b5948c

These were introduced by some default vscode settings, which have now been resolved.

Update snapshots following markup changes

f10453f

rylnd added the v8.0.0 label Sep 16, 2019

rylnd requested review from WangQianliang, daveyholler and mw-ding September 16, 2019 19:20

Less hacky way of indenting facet buttons

fc9f527

Rather than use an empty, fixed-width div as an icon, just give it some margin-left.

mw-ding added the Team:Code label Sep 16, 2019

daveyholler suggested changes Sep 16, 2019

View reviewed changes

rylnd added 2 commits September 16, 2019 16:14

Swap hardcoded rem values for equivalent eui vars

ae22cbb

One more eui var replacement

0f2e2f6

rylnd requested a review from daveyholler September 16, 2019 21:56

Remove unused import

643c0ba

Remove unused translations

2086eac

These existed in the ScopeTabs component which has been deleted.

mw-ding approved these changes Sep 17, 2019

View reviewed changes

daveyholler approved these changes Sep 17, 2019

View reviewed changes

rylnd force-pushed the new-search-layout branch from 41683c0 to f27d4c8 Compare September 17, 2019 21:05

rylnd merged commit 26e8121 into elastic:master Sep 17, 2019

rylnd deleted the new-search-layout branch September 17, 2019 23:40

rylnd mentioned this pull request Sep 17, 2019

[7.x] [Code] New SearchPage layout (#45821) #45975

Merged

rylnd mentioned this pull request Sep 17, 2019

[7.4] [Code] New SearchPage layout (#45821) #45976

Closed

		@@ -0,0 +1,3 @@
		$codeSideBarWidth: 16rem;
		$codeSideBarIndent: 2rem;

Conversation

rylnd commented Sep 16, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

For maintainers

Uh oh!

elasticmachine commented Sep 16, 2019

Uh oh!

Uh oh!

Uh oh!

daveyholler Sep 16, 2019

Choose a reason for hiding this comment

Uh oh!

rylnd Sep 16, 2019

Choose a reason for hiding this comment

Uh oh!

daveyholler Sep 16, 2019

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Sep 16, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Sep 16, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Sep 17, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Sep 17, 2019

💚 Build Succeeded

Uh oh!

mw-ding left a comment

Choose a reason for hiding this comment

Uh oh!

mw-ding commented Sep 17, 2019

Uh oh!

elasticmachine commented Sep 17, 2019

💚 Build Succeeded

Uh oh!

mw-ding commented Sep 17, 2019

Uh oh!

rylnd commented Sep 17, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

rylnd commented Sep 16, 2019 •

edited

Loading