Upgraded EUI to v29.3.0 (#78870)

* Upgraded EUI to v29.2.0

* Remove hacks on top of EuiHeaderLink(s)

* Actual update to [email protected]

* Resolve typescript issue when omitting a key over a union

* Resolve nav menu test's expectations

* Fix lint issue

* Update to 29.3.0

* Revert vega snapshot update

I don’t think this was intended to change when I ran the updater

* [ui-shared-deps] strip proptypes from ui-shared-deps production build

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

package.json

@@ -117,7 +117,7 @@
   "dependencies": {
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "7.9.1",
-    "@elastic/eui": "29.0.0",
+    "@elastic/eui": "29.3.0",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "^2.5.0",
     "@elastic/request-crypto": "1.1.4",

packages/kbn-ui-framework/package.json

@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
-    "@elastic/eui": "29.0.0",
+    "@elastic/eui": "29.3.0",
     "@kbn/babel-preset": "1.0.0",
     "@kbn/optimizer": "1.0.0",
     "babel-loader": "^8.0.6",

packages/kbn-ui-shared-deps/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@elastic/charts": "23.0.0",
-    "@elastic/eui": "29.0.0",
+    "@elastic/eui": "29.3.0",
     "@elastic/numeral": "^2.5.0",
     "@kbn/i18n": "1.0.0",
     "@kbn/monaco": "1.0.0",
@@ -39,6 +39,7 @@
   "devDependencies": {
     "@kbn/babel-preset": "1.0.0",
     "@kbn/dev-utils": "1.0.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "css-loader": "^3.4.2",
     "del": "^5.1.0",
     "loader-utils": "^1.2.3",

packages/kbn-ui-shared-deps/webpack.config.js

@@ -77,6 +77,25 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({
           },
         ],
       },
+      {
+        test: !dev ? /[\\\/]@elastic[\\\/]eui[\\\/].*\.js$/ : () => false,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              plugins: [
+                [
+                  require.resolve('babel-plugin-transform-react-remove-prop-types'),
+                  {
+                    mode: 'remove',
+                    removeImport: true,
+                  },
+                ],
+              ],
+            },
+          },
+        ],
+      },
     ],
   },
 

src/plugins/navigation/public/top_nav_menu/_index.scss

@@ -1,8 +1,3 @@
 .kbnTopNavMenu {
   margin-right: $euiSizeXS;
 }
-
-.kbnTopNavMenu > * > * {
-  // TEMP fix to adjust spacing between EuiHeaderList__list items
-  margin: 0 $euiSizeXS;
-}

src/plugins/navigation/public/top_nav_menu/top_nav_menu.test.tsx

@@ -164,10 +164,6 @@ describe('TopNavMenu', () => {
 
       // menu is rendered outside of the component
       expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(0);
-
-      const buttons = portalTarget.querySelectorAll('button');
-      expect(buttons.length).toBe(menuItems.length + 1); // should be n+1 buttons in mobile for popover button
-      expect(buttons[buttons.length - 1].getAttribute('aria-label')).toBe('Open navigation menu'); // last button should be mobile button
     });
   });
 });

src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx

@@ -88,7 +88,7 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
   function renderMenu(className: string): ReactElement | null {
     if (!config || config.length === 0) return null;
     return (
-      <EuiHeaderLinks data-test-subj="top-nav" className={className}>
+      <EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs" className={className}>
         {renderItems()}
       </EuiHeaderLinks>
     );

src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx

@@ -52,7 +52,7 @@ export function TopNavMenuItem(props: TopNavMenuData) {
       {upperFirst(props.label || props.id!)}
     </EuiButton>
   ) : (
-    <EuiHeaderLink size="xs" isActive {...commonButtonProps}>
+    <EuiHeaderLink size="xs" color="primary" {...commonButtonProps}>
       {upperFirst(props.label || props.id!)}
     </EuiHeaderLink>
   );

src/plugins/share/public/types.ts

@@ -18,7 +18,8 @@
  */
 
 import { ComponentType } from 'react';
-import { EuiContextMenuPanelDescriptor, EuiContextMenuPanelItemDescriptor } from '@elastic/eui';
+import { EuiContextMenuPanelDescriptor } from '@elastic/eui';
+import { EuiContextMenuPanelItemDescriptorEntry } from '@elastic/eui/src/components/context_menu/context_menu';
 
 /**
  * @public
@@ -53,7 +54,8 @@ export interface ShareContext {
  * used to order the individual items in a flat list returned by all registered
  * menu providers.
  * */
-export interface ShareContextMenuPanelItem extends Omit<EuiContextMenuPanelItemDescriptor, 'name'> {
+export interface ShareContextMenuPanelItem
+  extends Omit<EuiContextMenuPanelItemDescriptorEntry, 'name'> {
   name: string; // EUI will accept a `ReactNode` for the `name` prop, but `ShareContentMenu` assumes a `string`.
   sortOrder?: number;
 }

test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json

@@ -12,7 +12,7 @@
     "build": "rm -rf './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "29.0.0",
+    "@elastic/eui": "29.3.0",
     "@kbn/plugin-helpers": "1.0.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

test/plugin_functional/plugins/kbn_sample_panel_action/package.json

@@ -12,7 +12,7 @@
     "build": "rm -rf './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "29.0.0",
+    "@elastic/eui": "29.3.0",
     "react": "^16.12.0",
     "typescript": "4.0.2"
   }

test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json

@@ -12,7 +12,7 @@
     "build": "rm -rf './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "29.0.0",
+    "@elastic/eui": "29.3.0",
     "@kbn/plugin-helpers": "1.0.0",
     "react": "^16.12.0",
     "typescript": "4.0.2"

x-pack/package.json

@@ -275,7 +275,7 @@
     "@babel/runtime": "^7.11.2",
     "@elastic/datemath": "5.0.3",
     "@elastic/ems-client": "7.10.0",
-    "@elastic/eui": "29.0.0",
+    "@elastic/eui": "29.3.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.0",