Upgrade EUI to v41.0.0

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,61 +18,66 @@ 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';
 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
         );

examples/state_containers_examples/public/todo/todo.tsx

@@ -63,20 +63,20 @@ const TodoApp: React.FC<TodoAppProps> = ({ filter, stateContainer }) => {
     <>
       <div>
         <Link to={{ ...location, pathname: '/' }} data-test-subj={'filterLinkAll'}>
-          <EuiButton size={'s'} color={!filter ? 'primary' : 'secondary'}>
+          <EuiButton size={'s'} color={!filter ? 'primary' : 'success'}>
             All
           </EuiButton>
         </Link>
         <Link to={{ ...location, pathname: '/completed' }} data-test-subj={'filterLinkCompleted'}>
-          <EuiButton size={'s'} color={filter === 'completed' ? 'primary' : 'secondary'}>
+          <EuiButton size={'s'} color={filter === 'completed' ? 'primary' : 'success'}>
             Completed
           </EuiButton>
         </Link>
         <Link
           to={{ ...location, pathname: '/not-completed' }}
           data-test-subj={'filterLinkNotCompleted'}
         >
-          <EuiButton size={'s'} color={filter === 'not-completed' ? 'primary' : 'secondary'}>
+          <EuiButton size={'s'} color={filter === 'not-completed' ? 'primary' : 'success'}>
             Not Completed
           </EuiButton>
         </Link>

package.json

@@ -103,7 +103,7 @@
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.35",
     "@elastic/ems-client": "8.0.0",
-    "@elastic/eui": "40.1.0",
+    "@elastic/eui": "41.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/maki": "6.3.0",
     "@elastic/node-crypto": "1.2.1",

packages/kbn-ui-shared-deps-npm/BUILD.bazel

@@ -46,6 +46,7 @@ RUNTIME_DEPS = [
   "@npm//moment-timezone",
   "@npm//moment",
   "@npm//raw-loader",
+  "@npm//react-ace",
   "@npm//react-dom",
   "@npm//react-intl",
   "@npm//react-is",

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

@@ -82,6 +82,7 @@ module.exports = (_, argv) => {
         'moment-timezone/moment-timezone',
         'moment-timezone/data/packed/latest.json',
         'moment',
+        'react-ace',
         'react-beautiful-dnd',
         'react-dom',
         'react-dom/server',

src/core/public/core_app/status/components/server_status.test.tsx

@@ -14,7 +14,7 @@ import { FormattedStatus } from '../lib';
 const getStatus = (parts: Partial<FormattedStatus['state']> = {}): FormattedStatus['state'] => ({
   id: 'available',
   title: 'Green',
-  uiColor: 'secondary',
+  uiColor: 'success',
   message: '',
   ...parts,
 });

src/core/public/core_app/status/components/status_table.test.tsx

@@ -12,7 +12,7 @@ import { StatusTable } from './status_table';
 
 const state = {
   id: 'available' as const,
-  uiColor: 'secondary',
+  uiColor: 'success',
   message: 'Ready',
   title: 'green',
 };

src/core/public/core_app/status/lib/load_status.test.ts

@@ -174,7 +174,7 @@ describe('response processing', () => {
           id: 'available',
           title: 'Green',
           message: 'Elasticsearch is available',
-          uiColor: 'secondary',
+          uiColor: 'success',
         },
       },
       {
@@ -183,12 +183,12 @@ describe('response processing', () => {
           id: 'available',
           title: 'Green',
           message: 'SavedObjects service has completed migrations and is available',
-          uiColor: 'secondary',
+          uiColor: 'success',
         },
       },
       {
         id: 'plugin:1',
-        state: { id: 'available', title: 'Green', message: 'Ready', uiColor: 'secondary' },
+        state: { id: 'available', title: 'Green', message: 'Ready', uiColor: 'success' },
       },
       {
         id: 'plugin:2',

src/core/public/core_app/status/lib/load_status.ts

@@ -128,7 +128,7 @@ const STATUS_LEVEL_UI_ATTRS: Record<ServiceStatusLevel, StatusUIAttributes> = {
     title: i18n.translate('core.status.greenTitle', {
       defaultMessage: 'Green',
     }),
-    uiColor: 'secondary',
+    uiColor: 'success',
   },
 };
 

src/core/public/i18n/i18n_eui_mapping.tsx

@@ -127,22 +127,6 @@ export const getEuiContextMapping = (): EuiTokensObject => {
       defaultMessage: 'Expand',
       description: 'ARIA label for a button that enters fullscreen view',
     }),
-    'euiCodeEditor.startEditing': i18n.translate('core.euiCodeEditor.startEditing', {
-      defaultMessage: 'Press Enter to start editing.',
-      description: 'Screen reader text to prompt editing',
-    }),
-    'euiCodeEditor.startInteracting': i18n.translate('core.euiCodeEditor.startInteracting', {
-      defaultMessage: 'Press Enter to start interacting with the code.',
-      description: 'Screen reader text to prompt interaction',
-    }),
-    'euiCodeEditor.stopEditing': i18n.translate('core.euiCodeEditor.stopEditing', {
-      defaultMessage: "When you're done, press Escape to stop editing.",
-      description: 'Screen reader text to describe ending editing',
-    }),
-    'euiCodeEditor.stopInteracting': i18n.translate('core.euiCodeEditor.stopInteracting', {
-      defaultMessage: "When you're done, press Escape to stop interacting with the code.",
-      description: 'Screen reader text to describe ending interactions',
-    }),
     'euiCollapsedItemActions.allActions': i18n.translate(
       'core.euiCollapsedItemActions.allActions',
       {

src/core/server/status/legacy_status.test.ts

@@ -37,7 +37,7 @@ describe('calculateLegacyStatus', () => {
       title: 'Green',
       nickname: 'Looking good',
       icon: 'success',
-      uiColor: 'secondary',
+      uiColor: 'success',
       since: expect.any(String),
     });
   });
@@ -80,7 +80,7 @@ describe('calculateLegacyStatus', () => {
         message: 'Available',
         since: expect.any(String),
         state: 'green',
-        uiColor: 'secondary',
+        uiColor: 'success',
       },
       {
         icon: 'danger',

src/core/server/status/legacy_status.ts

@@ -37,7 +37,7 @@ interface LegacyStatusOverall {
 
 type LegacyStatusState = 'green' | 'yellow' | 'red';
 type LegacyStatusIcon = 'danger' | 'warning' | 'success';
-type LegacyStatusUiColor = 'secondary' | 'warning' | 'danger';
+type LegacyStatusUiColor = 'success' | 'warning' | 'danger';
 
 interface LegacyStateAttr {
   id: LegacyStatusState;
@@ -141,7 +141,7 @@ const STATUS_LEVEL_LEGACY_ATTRS = deepFreeze<Record<string, LegacyStateAttr>>({
       defaultMessage: 'Green',
     }),
     icon: 'success',
-    uiColor: 'secondary',
+    uiColor: 'success',
     nickname: 'Looking good',
   },
 });

src/core/server/status/routes/integration_tests/status.test.ts

@@ -164,7 +164,7 @@ describe('GET /api/status', () => {
         since: expect.any(String),
         state: 'green',
         title: 'Green',
-        uiColor: 'secondary',
+        uiColor: 'success',
       },
       statuses: [
         {
@@ -173,23 +173,23 @@ describe('GET /api/status', () => {
           message: 'Service is working',
           since: expect.any(String),
           state: 'green',
-          uiColor: 'secondary',
+          uiColor: 'success',
         },
         {
           icon: 'success',
           id: 'core:[email protected]',
           message: 'Service is working',
           since: expect.any(String),
           state: 'green',
-          uiColor: 'secondary',
+          uiColor: 'success',
         },
         {
           icon: 'success',
           id: 'plugin:[email protected]',
           message: 'a is available',
           since: expect.any(String),
           state: 'green',
-          uiColor: 'secondary',
+          uiColor: 'success',
         },
         {
           icon: 'warning',

src/dev/license_checker/config.ts

@@ -75,6 +75,6 @@ export const LICENSE_OVERRIDES = {
   '[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/[email protected]': ['Elastic License 2.0'],
-  '@elastic/eui@40.1.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@41.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
 };

src/plugins/advanced_settings/public/management_app/components/field/field.tsx

@@ -8,6 +8,7 @@
 
 import React, { PureComponent, Fragment } from 'react';
 import classNames from 'classnames';
+import 'react-ace';
 import 'brace/theme/textmate';
 import 'brace/mode/markdown';
 import 'brace/mode/json';