[7.x] [Watcher] New Platform (NP) Migration (#50908) (#52721)

* [Watcher] New Platform (NP) Migration (#50908)

* First iteration of watch public -> new platform
Still need to switch to np ready version of use_request

* - Switched to using np ready request
- Some updates after API changes

* First attempt at server shim

* Rename file and re-enable react hooks linting

* Fix some public types and react hooks lint rules

* Fix types

* More ES lint react hooks fixes

* Migrated server lib -> ts. Part way done with migrating routes to NP router and TS

* Big subset of routes to TS and NP router - almost there

* Delete legacy error wrappers and moved last set of routes to TS and NP router

* Remove @ts-ignore's and update route registration to use shim with http router

* Added routes validations, fixes for hooks and fixes for types

* Fix more types and finish testing API routes

* Fix usage of feature catalogue and fix time buckets types

* Fix error message shape [skip ci]

* Split legacy from new platform dependencies server-side

* Refactor: Seperate client legacy and NP dependencies

* Add file: added types file

* Fix UISettings client type import

* Update license pre-routing factory spec

* Update variable names, use of I18nContext (use NP) and docs

* Use NP elasticsearchclient

* Simplify is_es_error_factory

* Fix types

* Improve code legibility and remove second use of `useAppContext`

* Use @kbn/config-schema (not validate: false) on routes!

* Fix watch create JSON spec

* Create threshold test working

* Unskip watch_edit.test.ts

* Unskip watch_list.test.ts

* Done re-enabling component integration tests

* TimeBuckets typo + remove unnecessary // @ts-ignore

* Backport for "xPack:defaultAdminEmail" 7.x specific behaviour

Author: jloleysens

.eslintrc.js

@@ -209,13 +209,6 @@ module.exports = {
         'react-hooks/rules-of-hooks': 'off',
       },
     },
-    {
-      files: ['x-pack/legacy/plugins/watcher/**/*.{js,ts,tsx}'],
-      rules: {
-        'react-hooks/rules-of-hooks': 'off',
-        'react-hooks/exhaustive-deps': 'off',
-      },
-    },
 
     /**
      * Prettier

src/legacy/ui/public/time_buckets/index.d.ts

@@ -0,0 +1,22 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+declare module 'ui/time_buckets' {
+  export const TimeBuckets: any;
+}

src/plugins/es_ui_shared/public/request/np_ready_request.ts

@@ -19,11 +19,12 @@
 
 import { useEffect, useState, useRef } from 'react';
 
-import { HttpServiceBase } from '../../../../../src/core/public';
+import { HttpServiceBase, HttpFetchQuery } from '../../../../../src/core/public';
 
 export interface SendRequestConfig {
   path: string;
   method: 'get' | 'post' | 'put' | 'delete' | 'patch' | 'head';
+  query?: HttpFetchQuery;
   body?: any;
 }
 
@@ -48,10 +49,10 @@ export interface UseRequestResponse {
 
 export const sendRequest = async (
   httpClient: HttpServiceBase,
-  { path, method, body }: SendRequestConfig
+  { path, method, body, query }: SendRequestConfig
 ): Promise<SendRequestResponse> => {
   try {
-    const response = await httpClient[method](path, { body });
+    const response = await httpClient[method](path, { body, query });
 
     return {
       data: response.data ? response.data : response,
@@ -70,6 +71,7 @@ export const useRequest = (
   {
     path,
     method,
+    query,
     body,
     pollIntervalMs,
     initialData,
@@ -112,6 +114,7 @@ export const useRequest = (
     const requestBody = {
       path,
       method,
+      query,
       body,
     };
 

x-pack/dev-tools/jest/create_jest_config.js

@@ -20,7 +20,8 @@ export function createJestConfig({ kibanaDirectory, xPackKibanaDirectory }) {
       'uiExports/(.*)': fileMockPath,
       '^src/core/(.*)': `${kibanaDirectory}/src/core/$1`,
       '^src/legacy/(.*)': `${kibanaDirectory}/src/legacy/$1`,
-      '^plugins/watcher/models/(.*)': `${xPackKibanaDirectory}/legacy/plugins/watcher/public/models/$1`,
+      '^plugins/watcher/np_ready/application/models/(.*)':
+        `${xPackKibanaDirectory}/legacy/plugins/watcher/public/np_ready/application/models/$1`,
       '^plugins/([^/.]*)(.*)': `${kibanaDirectory}/src/legacy/core_plugins/$1/public$2`,
       '^plugins/xpack_main/(.*);': `${xPackKibanaDirectory}/legacy/plugins/xpack_main/public/$1`,
       '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': fileMockPath,

x-pack/legacy/plugins/watcher/__jest__/client_integration/helpers/app_context.mock.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { ComponentType } from 'enzyme';
+import {
+  chromeServiceMock,
+  docLinksServiceMock,
+  uiSettingsServiceMock,
+  notificationServiceMock,
+  httpServiceMock,
+} from '../../../../../../../src/core/public/mocks';
+import { AppContextProvider } from '../../../public/np_ready/application/app_context';
+
+export const mockContextValue = {
+  docLinks: docLinksServiceMock.createStartContract(),
+  chrome: chromeServiceMock.createStartContract(),
+  legacy: {
+    TimeBuckets: class MockTimeBuckets {
+      setBounds(_domain: any) {
+        return {};
+      }
+      getInterval() {
+        return {
+          expression: {},
+        };
+      }
+    },
+    MANAGEMENT_BREADCRUMB: { text: 'test' },
+    licenseStatus: {},
+  },
+  uiSettings: uiSettingsServiceMock.createSetupContract(),
+  toasts: notificationServiceMock.createSetupContract().toasts,
+  euiUtils: {
+    useChartsTheme: jest.fn(),
+  },
+  // For our test harness, we don't use this mocked out http service
+  http: httpServiceMock.createSetupContract(),
+};
+
+export const withAppContext = (Component: ComponentType<any>) => (props: any) => {
+  return (
+    <AppContextProvider value={mockContextValue}>
+      <Component {...props} />
+    </AppContextProvider>
+  );
+};

x-pack/legacy/plugins/watcher/server/routes/api/fields/index.js renamed to x-pack/legacy/plugins/watcher/__jest__/client_integration/helpers/body_response.ts

@@ -4,4 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { registerFieldsRoutes } from './register_fields_routes';
+export const wrapBodyResponse = (obj: object) => JSON.stringify({ body: JSON.stringify(obj) });
+
+export const unwrapBodyResponse = (string: string) => JSON.parse(JSON.parse(string).body);

x-pack/legacy/plugins/watcher/__jest__/client_integration/helpers/http_requests.ts

@@ -34,7 +34,7 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
     const defaultResponse = { watchHistoryItems: [] };
     server.respondWith(
       'GET',
-      `${API_ROOT}/watch/:id/history?startTime=*`,
+      `${API_ROOT}/watch/:id/history`,
       mockResponse(defaultResponse, response)
     );
   };

x-pack/legacy/plugins/watcher/__jest__/client_integration/helpers/index.ts

@@ -11,7 +11,7 @@ import { setup as watchCreateThresholdSetup } from './watch_create_threshold.hel
 import { setup as watchEditSetup } from './watch_edit.helpers';
 
 export { nextTick, getRandomString, findTestSubject, TestBed } from '../../../../../../test_utils';
-
+export { wrapBodyResponse, unwrapBodyResponse } from './body_response';
 export { setupEnvironment } from './setup_environment';
 
 export const pageHelpers = {

x-pack/legacy/plugins/watcher/__jest__/client_integration/helpers/setup_environment.ts

@@ -7,9 +7,17 @@
 import axios from 'axios';
 import axiosXhrAdapter from 'axios/lib/adapters/xhr';
 import { init as initHttpRequests } from './http_requests';
-import { setHttpClient, setSavedObjectsClient } from '../../../public/lib/api';
+import { setHttpClient, setSavedObjectsClient } from '../../../public/np_ready/application/lib/api';
 
 const mockHttpClient = axios.create({ adapter: axiosXhrAdapter });
+mockHttpClient.interceptors.response.use(
+  res => {
+    return res.data;
+  },
+  rej => {
+    return Promise.reject(rej);
+  }
+);
 
 const mockSavedObjectsClient = () => {
   return {
@@ -23,7 +31,7 @@ export const setupEnvironment = () => {
   // @ts-ignore
   setHttpClient(mockHttpClient);
 
-  setSavedObjectsClient(mockSavedObjectsClient());
+  setSavedObjectsClient(mockSavedObjectsClient() as any);
 
   return {
     server,

x-pack/legacy/plugins/watcher/__jest__/client_integration/helpers/watch_create_json.helpers.ts

@@ -3,10 +3,11 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { withAppContext } from './app_context.mock';
 import { registerTestBed, TestBed, TestBedConfig } from '../../../../../../test_utils';
-import { WatchEdit } from '../../../public/sections/watch_edit/components/watch_edit';
+import { WatchEdit } from '../../../public/np_ready/application/sections/watch_edit/components/watch_edit';
 import { ROUTES, WATCH_TYPES } from '../../../common/constants';
-import { registerRouter } from '../../../public/lib/navigation';
+import { registerRouter } from '../../../public/np_ready/application/lib/navigation';
 
 const testBedConfig: TestBedConfig = {
   memoryRouter: {
@@ -17,7 +18,7 @@ const testBedConfig: TestBedConfig = {
   doMountAsync: true,
 };
 
-const initTestBed = registerTestBed(WatchEdit, testBedConfig);
+const initTestBed = registerTestBed(withAppContext(WatchEdit), testBedConfig);
 
 export interface WatchCreateJsonTestBed extends TestBed<WatchCreateJsonTestSubjects> {
   actions: {