Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade EUI to v34.3.0 #101334

Merged
merged 58 commits into from
Jun 23, 2021
Merged

Upgrade EUI to v34.3.0 #101334

merged 58 commits into from
Jun 23, 2021

Conversation

thompsongl
Copy link
Contributor

@thompsongl thompsongl commented Jun 3, 2021

Summary

[email protected][email protected]

  • EuiFlyout
    • defaults to onwFocus=true, which also adds an overlay mask
    • renders inside a React portal
    • used by EuiCollapsibleNav
  • Deprecated EuiLoadingKibana

34.3.0

  • Added testenv mock for EuiFlyout (#4858)
  • Added mobile glyph to EuiIcon (#4827)
  • Reduced display of arrow icon in EuiSideNav to only if the item is not linked but has children (#4827)
  • Increased size and prominence of mobile toggle in EuiSideNav (#4827)
  • Added heading, headingProps, and mobileBreakpoints props for better accessibility to EuiSideNav (#4827)

Bug fixes

  • Fixed mobile menus styles on EuiDataGrid (#4844)

Theme: Amsterdam

  • Decreased spacing and root element size of EuiSideNav (#4816)

34.2.0

  • Removed text-transform: capitalize from the EuiTourSteps title to better fit with Elastic title guidelines (#4839)
  • Added color and size props and added support for click event to EuiBetaBadge (#4798)
  • Added documentation and layers glyphs to EuiIcon (#4833)
  • Updated EuiTourStep's title and subtitle prop type from string to ReactNode (#4841)
  • Added euiCantAnimate Sass mixin (#4835)
  • Added new EuiLoadingLogo component (#4835)
  • Added icon props to EuiEmptyPrompt for custom icons (#4835)
  • Deprecated EuiLoadingKibana (#4835)
  • Paused animations when prefers-reduced-motion is on for loader components (#4835)

Bug fixes

  • Fixed onBlur and data-test-subj prop propagation in EuiColorPicker (#4822)
  • Fixed mobile menus styles on EuiDataGrid (#4844)

34.1.0

  • Updated max and min label positioning for EuiRange and EuiDualRange (#4781)
  • Added timeslider, playFilled, frameNext and framePrevious glyphs to EuiIcon (#4810)
  • Added default generic value for EuiSideNavProps (#4802)
  • Added fullHeight and minHeight props to EuiPageTemplate (#4793)
  • Added .eui-fullHeight and euiFullHeight() utilities (#4793)
  • Added paddingSize prop to EuiPageSideBar (#4793)

Bug fixes

  • Fixed EuiText color of EuiCallout to default (#4816)
  • Fixed inconsistent width of EuiRange and EuiDualRange with custom tick values (#4781)
  • Fixes browser freezing when EuiDataGrid is used together with EuiFlyout and the user clicks a cell (4813)
  • Added flex-shrink: 0 to EuiTabs, EuiSpacer, and EuiImage to fix possible shrunken heights (#4793)
  • Fixed duplicate main aria roles in EuiPageTemplate and most common EuiPage patterns (#4793)
  • Fixed text color of EuiBottomBar (#4793)

34.0.0

  • Added textTransform property to schemaDetectors prop of EuiDataGrid(#4752)
  • Added color, continuityAbove, continuityAboveBelow, continuityBelow, continuityWithin, eraser, fullScreenExit, function, percent, wordWrap, and wordWrapDisabled glyphs to EuiIcon (#4779)
  • Added as, role, closeButtonProps, closeButtonPosition, outsideClickCloses, side, type, and pushMinBreakpoint props to EuiFlyout (#4713)
  • Extended EuiFlyout size prop to accept any CSS width value (#4713)
  • Extended EuiFlyout and most of its props in EuiCollapsibleNav (#4713)
  • Changed helpText prop in EuiFormRow to accept an array of messages(#4782)

Breaking changes

  • Changed the default of EuiFlyout ownFocus to true (#4713)
  • Wrapped EuiFlyout within the EuiOverlayMask when ownFocus=true (#4713)
  • Changed EuiCollapsibleNav width sizing from a Sass variable to a size prop (#4713)
  • Changed EuiOverlayMask z-indexing when positioned below header to using top offset (#4713)

Bug fixes

  • Fixed EuiTourStepIndicator to use EuiI18n following the standard way (#4785)
  • Fixed euiTourStep.closeTour default token value in EuiTourStep to be more specific (#4790)

@thompsongl thompsongl added v8.0.0 release_note:skip Skip the PR/issue when compiling release notes EUI v7.14.0 labels Jun 3, 2021
yarn.lock Outdated
@@ -18955,7 +18956,7 @@ mdast-util-from-markdown@^0.8.0:
parse-entities "^2.0.0"
unist-util-stringify-position "^2.0.0"

[email protected]:
[email protected], mdast-util-to-hast@^10.0.0:
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mistic mdast-util-to-hast is now an EUI dep

@thompsongl
Copy link
Contributor Author

@cchaos $euiCollapsibleNavWidth was removed and this usage will need to change:

margin-left: $euiCollapsibleNavWidth;

@thompsongl
Copy link
Contributor Author

@flash1293 Do you have any ideas for fixing the Lens data grid test failures?
Almost certainly related to your additions in elastic/eui#4813 but the setTimeout trick isn't working in this case.

Local output

  ● DatatableComponent › it invokes executeTriggerActions with correct context on click on top value

    Method “simulate” is meant to be run on 1 node. 0 found instead.

      179 |     });
      180 |
    > 181 |     wrapper.find('[data-test-subj="lensDatatableFilterOut"]').first().simulate('click');
          |                                                                       ^
      182 |
      183 |     expect(onDispatchEvent).toHaveBeenCalledWith({
      184 |       name: 'filter',

      at ReactWrapper.single (node_modules/enzyme/src/ReactWrapper.js:1168:13)
      at ReactWrapper.simulate (node_modules/enzyme/src/ReactWrapper.js:665:17)
      at Object.<anonymous> (x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx:181:71)

  ● DatatableComponent › it invokes executeTriggerActions with correct context on click on timefield

    Method “simulate” is meant to be run on 1 node. 0 found instead.

      226 |     });
      227 |
    > 228 |     wrapper.find('[data-test-subj="lensDatatableFilterFor"]').first().simulate('click');
          |                                                                       ^
      229 |
      230 |     expect(onDispatchEvent).toHaveBeenCalledWith({
      231 |       name: 'filter',

      at ReactWrapper.single (node_modules/enzyme/src/ReactWrapper.js:1168:13)
      at ReactWrapper.simulate (node_modules/enzyme/src/ReactWrapper.js:665:17)
      at Object.<anonymous> (x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx:228:71)

  ● DatatableComponent › it invokes executeTriggerActions with correct context on click on timefield from range

    Method “simulate” is meant to be run on 1 node. 0 found instead.

      312 |     });
      313 |
    > 314 |     wrapper.find('[data-test-subj="lensDatatableFilterFor"]').first().simulate('click');
          |                                                                       ^
      315 |
      316 |     expect(onDispatchEvent).toHaveBeenCalledWith({
      317 |       name: 'filter',

      at ReactWrapper.single (node_modules/enzyme/src/ReactWrapper.js:1168:13)
      at ReactWrapper.simulate (node_modules/enzyme/src/ReactWrapper.js:665:17)
      at Object.<anonymous> (x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx:314:71)

@flash1293
Copy link
Contributor

@thompsongl Thanks for pining me here. This worked for me (waiting for a tick, then updating the enzyme wrapper to get the new tree):

    await act(async () => {
      await new Promise(r => setTimeout(r, 0));
    });
    wrapper.update();

@wylieconlon wylieconlon mentioned this pull request Jun 10, 2021
14 tasks
@chandlerprall chandlerprall changed the title Upgrade EUI to v34.2.0 Upgrade EUI to v34.3.0 Jun 10, 2021
Copy link
Contributor

@shahzad31 shahzad31 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Uptime Changes LGTM !!

Copy link
Contributor

@streamich streamich left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AppServices change LGTM

Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Looks good from design 😉

Copy link
Contributor

@yuliacech yuliacech left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stack Management changes LGTM!

@thompsongl thompsongl requested a review from a team June 22, 2021 14:34
Copy link
Contributor

@poffdeluxe poffdeluxe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Presentation changes LGTM. Just FYI I had to do a clean before doing the bootstrap but everything worked after that

Copy link
Contributor

@scottybollinger scottybollinger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Workplace Search changes LGTM

Copy link
Member

@spong spong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Security Solution changes LGTM! Thanks for the upgrade @thompsongl! 🙂

Note: In testing I did notice that the Security Solution Timeline was now in a partial page flyout vs full-page. I've pinged the @elastic/security-threat-hunting team and they'll address in a follow-up.

Before:

After:

@cchaos
Copy link
Contributor

cchaos commented Jun 22, 2021

@spong That's most likely related to how you all were setting the size before. Now EuiFlyout takes any CSS width value for the size prop. So you can let your team know that all they need to do is set it to size="100%".

@thompsongl
Copy link
Contributor Author

Code changes owned by @elastic/stack-monitoring-ui are only (expected) snapshot updates. Will merge after successful CI

@kibanamachine
Copy link
Contributor

💚 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 904.1KB 904.1KB +12.0B
dataVisualizer 1.1MB 1.1MB +12.0B
fleet 690.6KB 690.6KB +6.0B
lens 1.5MB 1.5MB +1.2KB
ml 5.9MB 5.9MB +199.0B
presentationUtil 59.5KB 59.2KB -232.0B
savedObjectsManagement 138.9KB 138.9KB +44.0B
security 782.3KB 782.5KB +144.0B
securitySolution 6.5MB 6.5MB +113.0B
transform 928.0KB 927.9KB -109.0B
triggersActionsUi 1.7MB 1.7MB +2.7KB
total +4.1KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id before after diff
observability 11 10 -1

Page load bundle

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

id before after diff
core 412.7KB 414.9KB +2.2KB
data 832.8KB 833.7KB +856.0B
kbnUiSharedDeps-css 504.2KB 511.0KB +6.9KB
kbnUiSharedDeps-elastic 2.6MB 2.6MB +38.1KB
kbnUiSharedDeps-js 6.4MB 6.4MB -207.0B
total +47.8KB

History

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

@thompsongl thompsongl merged commit 136d361 into elastic:master Jun 23, 2021
thompsongl added a commit to thompsongl/kibana that referenced this pull request Jun 23, 2021
* eui to v34.1.0

* styled-components types

* src snapshot updates

* x-pack snapshot updates

* eui to v34.2.0

* styled-components todo

* src snapshot updates

* x-pack snapshot updates

* jest test updates

* collapsible_nav

* Hard-code global nav width for bottom bar’s (for now)

* Update to eui v34.3.0

* flyout unmock

* src flyout snapshots

* remove duplicate euioverlaymask

* xpack flyout snapshots

* remove unused import

* sidenavprops

* attr updates

* trial: flyout ownfocus

* remove unused

* graph selector

* jest

* jest

* flyout ownFocus

* saved objects flyout

* console welcome flyout

* timeline flyout

* clean up

* visible

* colorpicker data-test-subj

* selectors

* selector

* ts

* selector

* snapshot

* Fix `use_security_solution_navigation` TS error

* cypress

Co-authored-by: cchaos <[email protected]>
Co-authored-by: Chandler Prall <[email protected]>
thompsongl added a commit that referenced this pull request Jun 24, 2021
* Upgrade EUI to v34.3.0 (#101334)

* eui to v34.1.0

* styled-components types

* src snapshot updates

* x-pack snapshot updates

* eui to v34.2.0

* styled-components todo

* src snapshot updates

* x-pack snapshot updates

* jest test updates

* collapsible_nav

* Hard-code global nav width for bottom bar’s (for now)

* Update to eui v34.3.0

* flyout unmock

* src flyout snapshots

* remove duplicate euioverlaymask

* xpack flyout snapshots

* remove unused import

* sidenavprops

* attr updates

* trial: flyout ownfocus

* remove unused

* graph selector

* jest

* jest

* flyout ownFocus

* saved objects flyout

* console welcome flyout

* timeline flyout

* clean up

* visible

* colorpicker data-test-subj

* selectors

* selector

* ts

* selector

* snapshot

* Fix `use_security_solution_navigation` TS error

* cypress

Co-authored-by: cchaos <[email protected]>
Co-authored-by: Chandler Prall <[email protected]>

* fix bad merge resolution

* fix bad merge resolution

Co-authored-by: cchaos <[email protected]>
Co-authored-by: Chandler Prall <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
EUI release_note:skip Skip the PR/issue when compiling release notes Team:APM All issues that need APM UI Team support Team:Fleet Team label for Observability Data Collection Fleet team Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability v7.14.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.