Merge branch 'main' into 154841-remove-legacy-field-stats

x-pack/plugins/infra/server/lib/alerting/metric_threshold/metric_threshold_executor.test.ts

@@ -130,7 +130,8 @@ const setEvaluationResults = (response: Array<Record<string, Evaluation>>) => {
   jest.requireMock('./lib/evaluate_rule').evaluateRule.mockImplementation(() => response);
 };
 
-describe('The metric threshold alert type', () => {
+// FAILING: https://github.com/elastic/kibana/issues/155534
+describe.skip('The metric threshold alert type', () => {
   describe('querying the entire infrastructure', () => {
     afterAll(() => clearInstances());
     const instanceID = '*';

x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/repository_edit.helpers.ts

@@ -88,4 +88,5 @@ type TestSubjects =
   | 'stepTwo.submitButton'
   | 'stepTwo.title'
   | 'submitButton'
+  | 'codeEditor'
   | 'title';

x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/setup_environment.tsx

@@ -10,6 +10,7 @@ import { i18n } from '@kbn/i18n';
 import { merge } from 'lodash';
 import { LocationDescriptorObject } from 'history';
 
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { HttpSetup } from '@kbn/core/public';
 import { coreMock, scopedHistoryMock } from '@kbn/core/public/mocks';
 import { setUiMetricService, httpService } from '../../../public/application/services/http';
@@ -50,15 +51,21 @@ export const services = {
 
 setUiMetricService(services.uiMetricService);
 
+const core = coreMock.createStart();
+
 const appDependencies = {
-  core: coreMock.createStart(),
+  core,
   services,
   config: {
     slm_ui: { enabled: true },
   },
   plugins: {},
 };
 
+const kibanaContextDependencies = {
+  uiSettings: core.uiSettings,
+};
+
 export const setupEnvironment = () => {
   breadcrumbService.setup(() => undefined);
   textService.setup(i18n);
@@ -88,11 +95,13 @@ export const WithAppDependencies =
       <AuthorizationContext.Provider
         value={createAuthorizationContextValue(privileges as Privileges)}
       >
-        <AppContextProvider value={merge(appDependencies, overrides) as any}>
-          <GlobalFlyoutProvider>
-            <Comp {...props} />
-          </GlobalFlyoutProvider>
-        </AppContextProvider>
+        <KibanaContextProvider services={kibanaContextDependencies}>
+          <AppContextProvider value={merge(appDependencies, overrides) as any}>
+            <GlobalFlyoutProvider>
+              <Comp {...props} />
+            </GlobalFlyoutProvider>
+          </AppContextProvider>
+        </KibanaContextProvider>
       </AuthorizationContext.Provider>
     );
   };

x-pack/plugins/snapshot_restore/__jest__/client_integration/repository_edit.test.ts → x-pack/plugins/snapshot_restore/__jest__/client_integration/repository_edit.test.tsx

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import React from 'react';
 import { act } from 'react-dom/test-utils';
 
 import { setupEnvironment, pageHelpers, nextTick, TestBed, getRandomString } from './helpers';
@@ -16,6 +17,23 @@ import { REPOSITORY_EDIT, REPOSITORY_NAME } from './helpers/constant';
 const { setup } = pageHelpers.repositoryEdit;
 const { setup: setupRepositoryAdd } = pageHelpers.repositoryAdd;
 
+jest.mock('@kbn/kibana-react-plugin/public', () => {
+  const original = jest.requireActual('@kbn/kibana-react-plugin/public');
+  return {
+    ...original,
+    // Mocking CodeEditor, which uses React Monaco under the hood
+    CodeEditor: (props: any) => (
+      <input
+        data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
+        data-currentvalue={props.value}
+        onChange={(e: any) => {
+          props.onChange(e.jsonContent);
+        }}
+      />
+    ),
+  };
+});
+
 describe('<RepositoryEdit />', () => {
   let testBed: TestBed<RepositoryEditTestSubjects>;
   let testBedRepositoryAdd: TestBed<RepositoryAddTestSubjects>;
@@ -211,8 +229,8 @@ describe('<RepositoryEdit />', () => {
       );
       expect(find('readOnlyToggle').props()['aria-checked']).toBe(settings.readonly);
 
-      const codeEditor = testBed.component.find('EuiCodeEditor').at(1);
-      expect(JSON.parse(codeEditor.props().value as string)).toEqual({
+      const codeEditorValue = testBed.find('codeEditor').props()['data-currentvalue'];
+      expect(JSON.parse(codeEditorValue)).toEqual({
         loadDefault: true,
         conf1: 'foo',
         conf2: 'bar',

x-pack/plugins/snapshot_restore/public/application/app_context.tsx

@@ -9,7 +9,7 @@ import React, { createContext, useContext } from 'react';
 import { i18n } from '@kbn/i18n';
 import { Observable } from 'rxjs';
 
-import { CoreStart, ScopedHistory, CoreTheme } from '@kbn/core/public';
+import { CoreStart, ScopedHistory, CoreTheme, IUiSettingsClient } from '@kbn/core/public';
 import { ClientConfigType } from '../types';
 import { HttpService, UiMetricService } from './services';
 
@@ -18,6 +18,7 @@ const AppContext = createContext<AppDependencies | undefined>(undefined);
 export interface AppDependencies {
   core: CoreStart;
   services: {
+    uiSettings: IUiSettingsClient;
     httpService: HttpService;
     uiMetricService: UiMetricService;
     i18n: typeof i18n;

x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx

@@ -18,8 +18,8 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 
+import { CodeEditor } from '@kbn/kibana-react-plugin/public';
 import { HDFSRepository, Repository, SourceRepository } from '../../../../../common/types';
-import { EuiCodeEditor } from '../../../../shared_imports';
 import { RepositorySettingsValidation } from '../../../services/validation';
 import { ChunkSizeField, MaxSnapshotsField, MaxRestoreField } from './common';
 
@@ -347,21 +347,16 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             />
           }
         >
-          <EuiCodeEditor
-            mode="json"
-            theme="textmate"
-            width="100%"
+          <CodeEditor
+            languageId="json"
             value={additionalConf}
-            setOptions={{
-              showLineNumbers: false,
+            data-test-subj="codeEditor"
+            height={250}
+            options={{
+              lineNumbers: 'off',
               tabSize: 2,
-              maxLines: Infinity,
-            }}
-            editorProps={{
-              $blockScrolling: Infinity,
+              automaticLayout: true,
             }}
-            showGutter={false}
-            minLines={6}
             aria-label={i18n.translate(
               'xpack.snapshotRestore.repositoryForm.typeHDFS.configurationAriaLabel',
               {
@@ -391,7 +386,6 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
                 setIsConfInvalid(true);
               }
             }}
-            data-test-subj="codeEditor"
           />
         </EuiFormRow>
       </EuiDescribedFormGroup>

x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_review.tsx

@@ -21,9 +21,9 @@ import {
   EuiLink,
   EuiIcon,
   EuiToolTip,
+  EuiCodeBlock,
 } from '@elastic/eui';
 import { serializeRestoreSettings } from '../../../../../common/lib';
-import { EuiCodeEditor } from '../../../../shared_imports';
 import { useServices } from '../../../app_context';
 import { StepProps } from '.';
 import { CollapsibleIndicesList } from '../../collapsible_lists';
@@ -285,18 +285,17 @@ export const RestoreSnapshotStepReview: React.FunctionComponent<StepProps> = ({
   const renderJsonTab = () => (
     <Fragment>
       <EuiSpacer size="m" />
-      <EuiCodeEditor
-        mode="json"
-        theme="textmate"
-        isReadOnly
-        setOptions={{ maxLines: Infinity }}
-        value={JSON.stringify(serializedRestoreSettings, null, 2)}
-        editorProps={{ $blockScrolling: Infinity }}
+      <EuiCodeBlock
+        paddingSize="m"
+        language="json"
+        isCopyable
         aria-label={i18n.translate(
           'xpack.snapshotRestore.restoreForm.stepReview.jsonTab.jsonAriaLabel',
           { defaultMessage: 'Restore settings to be executed' }
         )}
-      />
+      >
+        {JSON.stringify(serializedRestoreSettings, null, 2)}
+      </EuiCodeBlock>
     </Fragment>
   );
 

x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx

@@ -21,8 +21,8 @@ import {
   EuiLink,
   EuiCallOut,
 } from '@elastic/eui';
+import { CodeEditor } from '@kbn/kibana-react-plugin/public';
 import { RestoreSettings } from '../../../../../common/types';
-import { EuiCodeEditor } from '../../../../shared_imports';
 import { REMOVE_INDEX_SETTINGS_SUGGESTIONS } from '../../../constants';
 import { useCore, useServices } from '../../../app_context';
 import { StepProps } from '.';
@@ -190,22 +190,15 @@ export const RestoreSnapshotStepSettings: React.FunctionComponent<StepProps> = (
                     />
                   }
                 >
-                  <EuiCodeEditor
-                    mode="json"
-                    theme="textmate"
-                    width="100%"
-                    value={indexSettings}
-                    setOptions={{
-                      showLineNumbers: false,
+                  <CodeEditor
+                    languageId="json"
+                    value={indexSettings!}
+                    height={250}
+                    options={{
+                      lineNumbers: 'off',
                       tabSize: 2,
-                      maxLines: Infinity,
+                      automaticLayout: true,
                     }}
-                    editorProps={{
-                      $blockScrolling: Infinity,
-                    }}
-                    showGutter={false}
-                    minLines={6}
-                    maxLines={15}
                     aria-label={i18n.translate(
                       'xpack.snapshotRestore.restoreForm.stepSettings.indexSettingsAriaLabel',
                       { defaultMessage: 'Index settings to modify' }

x-pack/plugins/snapshot_restore/public/application/index.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Router } from 'react-router-dom';
 import { ScopedHistory } from '@kbn/core/public';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 
 import { App } from './app';
 import { AppProviders } from './app_providers';
@@ -26,9 +27,11 @@ const AppWithRouter = ({ history }: AppWithRouterProps) => (
 
 export const renderApp = (elem: Element, dependencies: AppDependencies) => {
   render(
-    <AppProviders appDependencies={dependencies}>
-      <AppWithRouter history={dependencies.services.history} />
-    </AppProviders>,
+    <KibanaContextProvider services={{ uiSettings: dependencies.services.uiSettings }}>
+      <AppProviders appDependencies={dependencies}>
+        <AppWithRouter history={dependencies.services.history} />
+      </AppProviders>
+    </KibanaContextProvider>,
     elem
   );
 

x-pack/plugins/snapshot_restore/public/application/mount_management_section.ts

@@ -37,6 +37,7 @@ export async function mountManagementSection(
     core,
     config,
     services: {
+      uiSettings: coreSetup.uiSettings,
       httpService,
       uiMetricService: services.uiMetricService,
       i18n,

x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_details/tabs/tab_history.tsx

@@ -19,11 +19,11 @@ import {
   EuiText,
   EuiHorizontalRule,
   EuiSpacer,
+  EuiCodeBlock,
 } from '@elastic/eui';
 
 import { reactRouterNavigate } from '@kbn/kibana-react-plugin/public';
 import { SlmPolicy } from '../../../../../../../common/types';
-import { EuiCodeEditor } from '../../../../../../shared_imports';
 import { FormattedDateTime } from '../../../../../components';
 import { linkToSnapshot } from '../../../../../services/navigation';
 import { useServices } from '../../../../../app_context';
@@ -148,31 +148,20 @@ export const TabHistory: React.FunctionComponent<Props> = ({ policy }) => {
               </EuiDescriptionListTitle>
               <EuiSpacer size="s" />
               <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
-                <EuiCodeEditor
-                  mode="json"
-                  theme="textmate"
-                  width="100%"
-                  isReadOnly
-                  value={JSON.stringify(details, null, 2)}
-                  setOptions={{
-                    showLineNumbers: false,
-                    tabSize: 2,
-                  }}
-                  editorProps={{
-                    $blockScrolling: Infinity,
-                  }}
-                  minLines={6}
-                  maxLines={12}
-                  wrapEnabled={true}
-                  showGutter={false}
+                <EuiCodeBlock
+                  paddingSize="m"
+                  language="json"
+                  isCopyable
                   aria-label={i18n.translate(
                     'xpack.snapshotRestore.policyDetails.lastFailure.detailsAriaLabel',
                     {
                       defaultMessage: `Last failure details for policy '{name}'`,
                       values: { name },
                     }
                   )}
-                />
+                >
+                  {JSON.stringify(details, null, 2)}
+                </EuiCodeBlock>
               </EuiDescriptionListDescription>
             </EuiFlexItem>
           </EuiFlexGroup>

x-pack/plugins/snapshot_restore/public/application/sections/home/repository_list/repository_details/type_details/default_details.tsx

@@ -5,15 +5,12 @@
  * 2.0.
  */
 
-import 'react-ace';
-import 'brace/theme/textmate';
 import React, { Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiCodeBlock, EuiSpacer, EuiTitle } from '@elastic/eui';
 
 import { Repository } from '../../../../../../../common/types';
-import { EuiCodeEditor } from '../../../../../../shared_imports';
 
 interface Props {
   repository: Repository;
@@ -35,22 +32,10 @@ export const DefaultDetails: React.FunctionComponent<Props> = ({
 
       <EuiSpacer size="s" />
 
-      <EuiCodeEditor
-        mode="json"
-        theme="textmate"
-        width="100%"
-        isReadOnly
-        value={JSON.stringify(settings, null, 2)}
-        setOptions={{
-          showLineNumbers: false,
-          tabSize: 2,
-          maxLines: Infinity,
-        }}
-        editorProps={{
-          $blockScrolling: Infinity,
-        }}
-        showGutter={false}
-        minLines={6}
+      <EuiCodeBlock
+        paddingSize="m"
+        language="json"
+        isCopyable
         aria-label={i18n.translate(
           'xpack.snapshotRestore.repositoryDetails.genericSettingsDescription',
           {
@@ -60,7 +45,9 @@ export const DefaultDetails: React.FunctionComponent<Props> = ({
             },
           }
         )}
-      />
+      >
+        {JSON.stringify(settings, null, 2)}
+      </EuiCodeBlock>
     </Fragment>
   );
 };

x-pack/plugins/snapshot_restore/public/shared_imports.ts

@@ -28,7 +28,6 @@ export {
   useAuthorizationContext,
   useRequest,
   WithPrivileges,
-  EuiCodeEditor,
   AuthorizationContext,
   GlobalFlyout,
 } from '@kbn/es-ui-shared-plugin/public';