Upgrade EUI to v30.1.1 (#81499)

* eui to v30.0.0

* removed unused RecentLinks component

* update compressed -> display prop

* euiformrow compressed -> display

* euipopover remove withtitle

* euibuttongroup prop updates

* remove euibuttontoggle

* src snapshot updates

* tutorial euibuttongroup update

* x-pack snapshot updates

* euibuttongroup test updates

* TODO

* misc. js file updates

* remove euinavdrawer scss references

* translation removals

* more x-pack snapshot updates

* update data-test-subj lookup

* icons logoAMP -> logoObservability

* cypress selector updates

* update euibuttontoggle onchange, test interaction

* Fix auto-update toggle in Visualize

* some more change -> click test updates

* idtoselectedmap change

* Fix feature table button group

* Remove empty SASS file

* Fix feature table button group II

* Using `compressed` to also dictate dual range row

* Fix a few security labels

* An ML fix

* Apply suggestions from code review

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

* remove unused translation

* update view_type_toggle snapshot

* more snapshot updates

* eui to 30.1.0

* undo temp ts-ignore

* more x-pack snapshot updates

* eui to 30.1.1

* update feature privilege text

* Update x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/feature_table/sub_feature_form.tsx

Co-authored-by: Joe Portner <5295965+jportner@users.noreply.github.com>

* reuse i18n token

* Adapt log entry action button to new `minWidth` prop

* clean up label

* Combine auto apply strings into one

* ternary fix

* cases status useCallback

Co-authored-by: cchaos <caroline.horn@elastic.co>
Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
Co-authored-by: Joe Portner <5295965+jportner@users.noreply.github.com>
Co-authored-by: Felix Stürmer <stuermer@weltenwort.de>

Author: 5 people

package.json

@@ -110,14 +110,16 @@
       "**/grunt-*/**",
       "x-pack/typescript",
       "@elastic/eui/rehype-react",
+      "@elastic/eui/remark-parse",
       "@elastic/eui/remark-rehype",
-      "@elastic/eui/remark-rehype/**"
+      "@elastic/eui/remark-rehype/**",
+      "@elastic/eui/unified"
     ]
   },
   "dependencies": {
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "7.10.0-rc.1",
-    "@elastic/eui": "29.5.0",
+    "@elastic/eui": "30.1.1",
     "@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.5.0",
+    "@elastic/eui": "30.1.1",
     "@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": "24.0.0",
-    "@elastic/eui": "29.5.0",
+    "@elastic/eui": "30.1.1",
     "@elastic/numeral": "^2.5.0",
     "@kbn/i18n": "1.0.0",
     "@kbn/monaco": "1.0.0",

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

@@ -54,7 +54,7 @@ function NumberInputOption<ParamName extends string>({
   'data-test-subj': dataTestSubj,
 }: NumberInputOptionProps<ParamName>) {
   return (
-    <EuiFormRow label={label} error={error} isInvalid={isInvalid} fullWidth compressed>
+    <EuiFormRow label={label} error={error} isInvalid={isInvalid} fullWidth display="rowCompressed">
       <EuiFieldNumber
         data-test-subj={dataTestSubj}
         disabled={disabled}

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

@@ -65,7 +65,13 @@ function RangeOption<ParamName extends string>({
     }
   };
   return (
-    <EuiFormRow label={label} fullWidth={true} isInvalid={!isValidState} error={error} compressed>
+    <EuiFormRow
+      label={label}
+      fullWidth={true}
+      isInvalid={!isValidState}
+      error={error}
+      display="rowCompressed"
+    >
       <EuiRange
         compressed
         fullWidth

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

@@ -70,7 +70,7 @@ function RequiredNumberInputOption<ParamName extends string>({
   );
 
   return (
-    <EuiFormRow label={label} error={error} isInvalid={isInvalid} fullWidth compressed>
+    <EuiFormRow label={label} error={error} isInvalid={isInvalid} fullWidth display="rowCompressed">
       <EuiFieldNumber
         compressed
         fullWidth

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

@@ -51,7 +51,7 @@ function SelectOption<ParamName extends string, ValidParamValues extends string
 
   return (
     <EuiFormRow
-      compressed
+      display="rowCompressed"
       fullWidth
       helpText={helpText}
       id={id}

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

@@ -41,7 +41,7 @@ function SwitchOption<ParamName extends string>({
   setValue,
 }: SwitchOptionProps<ParamName>) {
   return (
-    <EuiFormRow fullWidth={true} compressed={true}>
+    <EuiFormRow fullWidth={true} display="rowCompressed">
       <EuiToolTip content={tooltip} delay="long" position="right">
         <EuiSwitch
           compressed={true}

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

@@ -40,7 +40,7 @@ function TextInputOption<ParamName extends string>({
   setValue,
 }: TextInputOptionProps<ParamName>) {
   return (
-    <EuiFormRow helpText={helpText} label={label} fullWidth compressed>
+    <EuiFormRow helpText={helpText} label={label} fullWidth display="rowCompressed">
       <EuiFieldText
         compressed
         fullWidth