Upgrade EUI to v41.0.0 (#117242)

* eui to v41.0.0

* update eui i18n tokens

* sass tokens

* EuiLoadingKibana

* EuiCodeEditor

* subdued

* betaBadgeProps

* EuiCodeEditor null-loader

* src secondary -> success

* [enterprise_search] Deprecate 'secondary' color prop

* [apm] Deprecate 'secondary' color prop

* [canvas] Deprecate 'secondary' color prop

* [cases] Deprecate 'secondary' color prop

* [cross_cluster_replication] Deprecate 'secondary' color prop

* [data_enhanced] Deprecate 'secondary' color prop

* [data_visualizer] Deprecate 'secondary' color prop

* [fleet] Deprecate 'secondary' color prop

* [index_management] Deprecate 'secondary' color prop

* [infra] Deprecate 'secondary' color prop

* [ingest_pipelines] Deprecate 'secondary' color prop

* [maps] Deprecate 'secondary' color prop

* [ml] Deprecate 'secondary' color prop

* [monitoring] Deprecate 'secondary' color prop

* [observability] Deprecate 'secondary' color prop

NB: conditional became `type === 'success' ? 'success' : type` after find&replace, which felt fairly redundant, so I simplified it

* [osquery] Deprecate 'secondary' color prop

* [painless_lab] Deprecate 'secondary' color prop

* [remote_clusters] Deprecate 'secondary' color prop

* [rollup] Deprecate 'secondary' color prop

* [security] Deprecate 'secondary' color prop

* [security_solution] Deprecate 'secondary' color prop

NB: several conditional became `type === 'success' ? 'success' : type` after find&replace, which felt fairly redundant, so I simplified them

* [snapshot_restore] Deprecate 'secondary' color prop

* [spaces] Deprecate 'secondary' color prop

* [transform] Deprecate 'secondary' color prop

* [triggers_actions_ui] Deprecate 'secondary' color prop

* [uptime] Deprecate 'secondary' color prop

* [watcher] Deprecate 'secondary' color prop

* [infra] replace ambiguous 'secondary' color

- GaugesSectionVis doesn't appear to use the color property but it's required by the SeriesOverrides types, so changing it just in case

* [examples] Deprecate 'secondary' color prop

* [uptime] deprecate 'subdued' prop on EuiButtonIcon

* revert EuiKeyPadMenuItem betaBadge props

* mobileOptions

* examples/ updates

* fix brace import

* fix type exports

* update expressions_explorer requiredBundles

* remove make_id mocks

* snapshot updates

* fix import 🤦

* Fix `ReferenceError: ace is not defined` Jest failures

* Remove unused brace import (?)

- Assuming here, as no code editor is actually being used in this file

* Fix failing Jest test due to EuiCodeEditor moving to es_ui_shared plugin

+ minor cleanup of `jest.mock()`s

* Fix failing Jest test due to snapshot update

* Fix failing `TypeError: Cannot read properties of undefined (reading 'euiBorderRadius')` Jest test

- since this is being mount()'d, EuiThemeProvider as a wrapper is needed to prevent the failure

* access uiSettings

* Move react-ace dependency into kbn-ui-shared-deps-npm

* Revert App Search shenanigans

- caused local unsaved changes shenanigans, somehow

* secondary -> success

Co-authored-by: Constance Chen <constance.chen.3@gmail.com>
Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Constance Chen <constance.chen@elastic.co>

examples/expressions_explorer/kibana.json

@@ -10,5 +10,5 @@
   },
   "requiredPlugins": ["expressions", "inspector", "uiActions", "developerExamples"],
   "optionalPlugins": [],
-  "requiredBundles": []
+  "requiredBundles": ["kibanaReact"]
 }

examples/expressions_explorer/public/app.tsx

@@ -18,7 +18,7 @@ import {
   EuiText,
   EuiLink,
 } from '@elastic/eui';
-import { AppMountParameters } from '../../../src/core/public';
+import { AppMountParameters, IUiSettingsClient } from '../../../src/core/public';
 import { ExpressionsStart } from '../../../src/plugins/expressions/public';
 import { Start as InspectorStart } from '../../../src/plugins/inspector/public';
 import { RunExpressionsExample } from './run_expressions';
@@ -26,53 +26,58 @@ import { RenderExpressionsExample } from './render_expressions';
 import { ActionsExpressionsExample } from './actions_and_expressions';
 import { UiActionsStart } from '../../../src/plugins/ui_actions/public';
 import { ActionsExpressionsExample2 } from './actions_and_expressions2';
+import { createKibanaReactContext } from '../../../src/plugins/kibana_react/public';
 
 interface Props {
   expressions: ExpressionsStart;
   inspector: InspectorStart;
   actions: UiActionsStart;
+  uiSettings: IUiSettingsClient;
 }
 
-const ExpressionsExplorer = ({ expressions, inspector, actions }: Props) => {
+const ExpressionsExplorer = ({ expressions, inspector, actions, uiSettings }: Props) => {
+  const { Provider: KibanaReactContextProvider } = createKibanaReactContext({ uiSettings });
   return (
-    <EuiPage>
-      <EuiPageBody>
-        <EuiPageHeader>Expressions Explorer</EuiPageHeader>
-        <EuiPageContent>
-          <EuiPageContentBody>
-            <EuiText>
-              <p>
-                There are a couple of ways to run the expressions. Below some of the options are
-                demonstrated. You can read more about it{' '}
-                <EuiLink
-                  href={
-                    'https://github.com/elastic/kibana/blob/main/src/plugins/expressions/README.asciidoc'
-                  }
-                >
-                  here
-                </EuiLink>
-              </p>
-            </EuiText>
+    <KibanaReactContextProvider>
+      <EuiPage>
+        <EuiPageBody>
+          <EuiPageHeader>Expressions Explorer</EuiPageHeader>
+          <EuiPageContent>
+            <EuiPageContentBody>
+              <EuiText>
+                <p>
+                  There are a couple of ways to run the expressions. Below some of the options are
+                  demonstrated. You can read more about it{' '}
+                  <EuiLink
+                    href={
+                      'https://github.com/elastic/kibana/blob/main/src/plugins/expressions/README.asciidoc'
+                    }
+                  >
+                    here
+                  </EuiLink>
+                </p>
+              </EuiText>
 
-            <EuiSpacer />
+              <EuiSpacer />
 
-            <RunExpressionsExample expressions={expressions} inspector={inspector} />
+              <RunExpressionsExample expressions={expressions} inspector={inspector} />
 
-            <EuiSpacer />
+              <EuiSpacer />
 
-            <RenderExpressionsExample expressions={expressions} inspector={inspector} />
+              <RenderExpressionsExample expressions={expressions} inspector={inspector} />
 
-            <EuiSpacer />
+              <EuiSpacer />
 
-            <ActionsExpressionsExample expressions={expressions} actions={actions} />
+              <ActionsExpressionsExample expressions={expressions} actions={actions} />
 
-            <EuiSpacer />
+              <EuiSpacer />
 
-            <ActionsExpressionsExample2 expressions={expressions} actions={actions} />
-          </EuiPageContentBody>
-        </EuiPageContent>
-      </EuiPageBody>
-    </EuiPage>
+              <ActionsExpressionsExample2 expressions={expressions} actions={actions} />
+            </EuiPageContentBody>
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+    </KibanaReactContextProvider>
   );
 };
 

examples/expressions_explorer/public/editor/expression_editor.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { EuiCodeEditor } from '@elastic/eui';
+import { CodeEditor } from '../../../../src/plugins/kibana_react/public';
 
 interface Props {
   value: string;
@@ -16,19 +16,17 @@ interface Props {
 
 export function ExpressionEditor({ value, onChange }: Props) {
   return (
-    <EuiCodeEditor
-      mode="javascript"
-      theme="github"
+    <CodeEditor
+      languageId="javascript"
       width="100%"
+      height="250px"
       value={value}
       onChange={onChange}
-      setOptions={{
-        fontSize: '14px',
-        enableBasicAutocompletion: true,
-        enableSnippets: true,
-        enableLiveAutocompletion: true,
+      options={{
+        fontSize: 14,
+        fontFamily: 'monospace',
+        quickSuggestions: true,
       }}
-      onBlur={() => {}}
       aria-label="Code Editor"
     />
   );

examples/expressions_explorer/public/plugin.tsx

@@ -59,6 +59,7 @@ export class ExpressionsExplorerPlugin implements Plugin<void, void, SetupDeps,
             expressions: depsStart.expressions,
             inspector: depsStart.inspector,
             actions: depsStart.uiActions,
+            uiSettings: core.uiSettings,
           },
           params
         );