Bumps `@elastic/eui` to v34.6.0 and `@elastic/charts` to v31.1.0 #1370

AMoo-Miki · 2022-03-23T01:58:47Z

Signed-off-by: Miki miki@amazon.com

Description

Bumps the dependencies on @elastic/eui and @elastic/charts to their last Apache-2.0-licensed releases.
Mitigates changes in @elastic/eui v29.3.2 → v34.6.0
- v30.0.0: Removal of EuiButtonToggle
- v30.0.0: Renaming of EuiButtonGroupOption
- v30.0.0: Requiring legend and isSelected (unless type='multi') props for EuiButtonGroup
- v30.0.0: Removal of EuiNavDrawerGroup
- v30.0.0: Removal of compressed prop from EuiFormRow
- v30.0.0: Removal of displayOnly prop from EuiFormRow
- v30.0.0: Elimination of the withTitle prop from EuiPopover
- v30.2.0: Addition of indicator icon for external EuiLink
- v30.3.0: Test failure due to the restructuring of focus in EuiPopover
- v31.6.0: Addition of uiOverlayMask directly to EuiModal
- v31.9.0: Setting default size of “xs” and styling on EuiButtonIcon (partial)
- v33.0.0: Removal of sh from languages supported by EuiCodeBlock
- v34.1.0: Changing of the default component of EuiPageBody from main to div
Mitigates changes in @elastic/charts v23.2.2 → v31.1.0
- v29.0.0: Renaming of AnnotationDomainTypes to AnnotationDomainType
Updates functional tests to use updated selectors.

Issues Resolved

#787 - Bump EUI library to last AL2 release
#1266 - CVE-2022-0686
#1304 - CVE-2022-0691

Check List

tmarkley · 2022-03-23T17:39:45Z

You can mention the CVEs that are addressed in the commit as well:

Resolves #1266 - CVE-2022-0686
Resolves #1304 - CVE-2022-0691

tmarkley · 2022-03-25T21:54:33Z

package.json

@@ -207,12 +207,13 @@
    "yauzl": "^2.10.0"
  },
  "devDependencies": {
+    "@4lolo/resize-observer-polyfill": "^1.5.2",


Why did we have to bring this in?

Context: We talked about this on the other PR.

The, now unmaintained, original resize-observer-polyfill exports ResizeObserver without exporting ResizeObserverCallback. While that could be mitigated by using @types/resize-observer-browser, it causes a different problem where its exported contentRect conflicts with TypeScript's own definition. @4lolo/resize-observer-polyfill takes care of the contentRect problem.

AMoo-Miki · 2022-03-26T05:04:22Z

examples/bfetch_explorer/public/components/page/index.tsx

@@ -44,7 +44,7 @@ export interface PageProps {

 export const Page: React.FC<PageProps> = ({ title = 'Untitled', children }) => {
  return (
-    <EuiPageBody>
+    <EuiPageBody component="main">


The default element produced used to main but is div now. All these component="main" additions are to make it use main.

AMoo-Miki · 2022-03-26T05:05:57Z

src/core/public/overlays/modal/modal_service.tsx

+          <i18n.Context>
+            <EuiModal {...options} onClose={() => modal.close()}>
+              <MountWrapper mount={mount} className="osdOverlayMountWrapper" />
+            </EuiModal>
+          </i18n.Context>,


EuiModal now has EuiOverlayMask built into it.

AMoo-Miki · 2022-03-26T05:06:41Z

src/plugins/charts/public/static/components/number_input.tsx

+      error={error}
+      isInvalid={isInvalid}
+      fullWidth
+      display={'rowCompressed'}


compressed is replaced with display={'rowCompressed'}.

AMoo-Miki · 2022-03-26T05:08:20Z

src/plugins/console/public/application/components/settings_modal.tsx

+    <EuiModal
+      data-test-subj="devToolsSettingsModal"
+      className="conApp__settingsModal"
+      onClose={props.onClose}


The next 100 lines are really about removing EuiOverlayMask and re-indenting.

* Bumps the dependencies on @elastic/eui and @elastic/charts to their last Apache-2.0-licensed releases. * Mitigates changes in `@elastic/eui` v29.3.2 → v34.6.0 * v30.0.0: Removal of `EuiButtonToggle` * v30.0.0: Renaming of `EuiButtonGroupOption` * v30.0.0: Requiring `legend` and `isSelected` (unless type='multi') props for `EuiButtonGroup` * v30.0.0: Removal of `EuiNavDrawerGroup` * v30.0.0: Removal of `compressed` prop from `EuiFormRow` * v30.0.0: Removal of `displayOnly` prop from `EuiFormRow` * v30.0.0: Elimination of the `withTitle` prop from `EuiPopover` * v30.2.0: Addition of indicator icon for external `EuiLink` * v30.3.0: Test failure due to the restructuring of focus in `EuiPopover` * v31.6.0: Addition of `uiOverlayMask` directly to `EuiModal` * v31.9.0: Setting default `size` of “xs” and styling on `EuiButtonIcon` (partial) * v33.0.0: Removal of `sh` from languages supported by `EuiCodeBlock` * v34.1.0: Changing of the default component of `EuiPageBody` from `main` to `div` * Mitigates changes in `@elastic/charts` v23.2.2 → v31.1.0 * v29.0.0: Renaming of `AnnotationDomainTypes` to `AnnotationDomainType` * Updates functional tests to use updated selectors. Signed-off-by: Miki <miki@amazon.com>

tmarkley

Looks good! Just a couple minor questions.

tmarkley · 2022-03-26T18:29:32Z

src/plugins/data/public/ui/query_string_input/_query_bar.scss

@@ -61,7 +72,6 @@
    // sass-lint:disable-block no-important
    flex-grow: 0 !important;
    flex-basis: auto !important;
-    margin-right: -$euiSizeXS !important;


Is this due to changes in the components?

The theme used to have

.euiSuperDatePicker__flexWrapper--noUpdateButton { ... max-width: 100%; }

which necessitated a negative margin-right to reduce the gap between the data selection and the "Refresh" button.

The newer EUI has removed the max-width: 100% to allow for

.euiSuperDatePicker__flexWrapper { max-width: calc(100% + #{$euiSizeS}); ... }

to be applied here which eliminates the need for the negative margin.

tmarkley · 2022-03-26T18:31:30Z

src/core/public/chrome/ui/header/recent_links.tsx

-  recentNavLinks: RecentNavLink[];
-}
-
-export function RecentLinks({ recentNavLinks }: Props) {


Was this moved elsewhere?

The files was deleted because it wasn't being used. It appears that someone forgot to remove this unused file.

kavilla · 2022-03-27T03:30:43Z

Thanks for this @AMoo-Miki,

Majority is good so I wonder if it's worth to merge and do a fast follow. However, the biggest problem I have with this is the UX for the collapsible nav on the left side.

TBH I've not seen a collapsible nav bar with unattached x button and this changes the current experience: which is the hamburger menu icon opens and closes the nav bar. But with this the hamburger menu icon opens the side nav bar and when I click on it again it briefly closes the collapsible nav and then it reopens automatically. While the x button closes it and keeps it close until I re-open it.

What I mean:
Original:

New:

Is this expected? Is this achievable to fix in this PR or should we create a follow-up?

Thanks again!

kavilla

Majority LGTM!

kavilla · 2022-03-27T03:37:10Z

When this merges can we check out this issue: #824

kgcreative · 2022-03-28T17:35:14Z

Thanks for this @AMoo-Miki,

Majority is good so I wonder if it's worth to merge and do a fast follow. However, the biggest problem I have with this is the UX for the collapsible nav on the left side.

TBH I've not seen a collapsible nav bar with unattached x button and this changes the current experience: which is the hamburger menu icon opens and closes the nav bar. But with this the hamburger menu icon opens the side nav bar and when I click on it again it briefly closes the collapsible nav and then it reopens automatically. While the x button closes it and keeps it close until I re-open it.

I agree that the behavior is odd here. I also think the detached close button feels strange. My preference would be for the menu button to open / close the nav. Having the "X" is good as an explicit close.

I think at this point this needs to be part of the overall navigation redesign effort. Let's address it together with #569

AMoo-Miki · 2022-03-28T18:14:25Z

Thanks @kavilla and @kgcreative. This odd behavior is due to the outsideClickCloses of EuiFlyout, passed by EuiCollapsibleNav, firing before the click handler of the button and resulting in closing and reopening; outsideClickCloses defaults to true on EuiCollapsibleNav. Setting the prop to false appears to solve the problem but I would like to check it more so I'd prefer not to block this PR.

Raised #1391 to track the fix.

AMoo-Miki requested a review from a team as a code owner March 23, 2022 01:58

This was linked to issues Mar 23, 2022

CVE-2022-0686 (High) detected in url-parse-1.5.7.tgz #1266

Closed

CVE-2022-0691 (High) detected in url-parse-1.5.7.tgz #1304

Closed

tmarkley self-assigned this Mar 24, 2022

AMoo-Miki force-pushed the bump-eui-charts-2 branch 2 times, most recently from 5bf10b4 to 31fc3ad Compare March 25, 2022 21:27

tmarkley reviewed Mar 25, 2022

View reviewed changes

AMoo-Miki force-pushed the bump-eui-charts-2 branch 4 times, most recently from 70a7588 to 6811c82 Compare March 26, 2022 03:15

AMoo-Miki commented Mar 26, 2022

View reviewed changes

AMoo-Miki force-pushed the bump-eui-charts-2 branch from 6811c82 to c0e34b1 Compare March 26, 2022 05:42

tmarkley approved these changes Mar 26, 2022

View reviewed changes

kavilla reviewed Mar 27, 2022

View reviewed changes

kavilla approved these changes Mar 28, 2022

View reviewed changes

kavilla merged commit d56ca22 into opensearch-project:main Mar 28, 2022

kavilla linked an issue Apr 5, 2022 that may be closed by this pull request

Bump EUI library to last AL2 release #787

Closed

kavilla mentioned this pull request Apr 11, 2022

[BUG] Close button appears outside the chrome of the sidebar #1443

Closed

tmarkley added v2.0.0 ui library Issue or PR related to the UI component library labels Apr 12, 2022

tmarkley added the dependencies Pull requests that update a dependency file label Apr 12, 2022

tmarkley added the cve Security vulnerabilities detected by Dependabot or Mend label Apr 28, 2022

joshuarrrr mentioned this pull request Mar 27, 2023

[BUG]➤ Error: resize-observer-polyfill@npm:^1.5.1: No candidates found #3695

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bumps `@elastic/eui` to v34.6.0 and `@elastic/charts` to v31.1.0 #1370

Bumps `@elastic/eui` to v34.6.0 and `@elastic/charts` to v31.1.0 #1370

AMoo-Miki commented Mar 23, 2022 •

edited

Loading

tmarkley commented Mar 23, 2022

tmarkley Mar 25, 2022

AMoo-Miki Mar 25, 2022

AMoo-Miki Mar 26, 2022 •

edited

Loading

AMoo-Miki Mar 26, 2022

AMoo-Miki Mar 26, 2022

AMoo-Miki Mar 26, 2022 •

edited

Loading

tmarkley left a comment

tmarkley Mar 26, 2022

AMoo-Miki Mar 28, 2022

tmarkley Mar 26, 2022

AMoo-Miki Mar 28, 2022

kavilla commented Mar 27, 2022

kavilla left a comment

kavilla commented Mar 27, 2022

kgcreative commented Mar 28, 2022

AMoo-Miki commented Mar 28, 2022 •

edited

Loading

Bumps @elastic/eui to v34.6.0 and @elastic/charts to v31.1.0 #1370

Bumps @elastic/eui to v34.6.0 and @elastic/charts to v31.1.0 #1370

Conversation

AMoo-Miki commented Mar 23, 2022 • edited Loading

Description

Issues Resolved

Check List

tmarkley commented Mar 23, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AMoo-Miki Mar 26, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AMoo-Miki Mar 26, 2022 • edited Loading

Choose a reason for hiding this comment

tmarkley left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kavilla commented Mar 27, 2022

kavilla left a comment

Choose a reason for hiding this comment

kavilla commented Mar 27, 2022

kgcreative commented Mar 28, 2022

AMoo-Miki commented Mar 28, 2022 • edited Loading

Bumps `@elastic/eui` to v34.6.0 and `@elastic/charts` to v31.1.0 #1370

Bumps `@elastic/eui` to v34.6.0 and `@elastic/charts` to v31.1.0 #1370

AMoo-Miki commented Mar 23, 2022 •

edited

Loading

AMoo-Miki Mar 26, 2022 •

edited

Loading

AMoo-Miki Mar 26, 2022 •

edited

Loading

AMoo-Miki commented Mar 28, 2022 •

edited

Loading