[Remote clusters] Convert service files to TypeScript (#94138)

* Converted some js files to ts as preparation for remote clusters work for Cloud

* Updated the snapshots

* Removed non-null assertion operator in favor of a more explicit nullish coalescing operator

x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/request_flyout.tsx

@@ -7,7 +7,6 @@
 
 import React, { PureComponent } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import PropTypes from 'prop-types';
 
 import {
   EuiButtonEmpty,
@@ -21,15 +20,15 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 
-import { serializeCluster } from '../../../../../common/lib';
+import { Cluster, serializeCluster } from '../../../../../common/lib';
 
-export class RequestFlyout extends PureComponent {
-  static propTypes = {
-    close: PropTypes.func.isRequired,
-    name: PropTypes.string.isRequired,
-    cluster: PropTypes.object.isRequired,
-  };
+interface Props {
+  close: () => void;
+  name: string;
+  cluster: Cluster;
+}
 
+export class RequestFlyout extends PureComponent<Props> {
   render() {
     const { name, close, cluster } = this.props;
     const endpoint = 'PUT _cluster/settings';

x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/validators/validate_address.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-export function isAddressValid(seedNode) {
+export function isAddressValid(seedNode?: string): boolean {
   if (!seedNode) {
     return false;
   }
@@ -17,14 +17,14 @@ export function isAddressValid(seedNode) {
       // no need to wait for regEx if the part is empty
       return true;
     }
-    const [match] = part.match(/[A-Za-z0-9\-]*/);
+    const [match] = part.match(/[A-Za-z0-9\-]*/) ?? [];
     return match !== part;
   });
 
   return !containsInvalidCharacters;
 }
 
-export function isPortValid(seedNode) {
+export function isPortValid(seedNode?: string): boolean {
   if (!seedNode) {
     return false;
   }
@@ -42,6 +42,6 @@ export function isPortValid(seedNode) {
     return false;
   }
 
-  const isPortNumeric = port.match(/[0-9]*/)[0] === port;
+  const isPortNumeric = (port.match(/[0-9]*/) ?? [])[0] === port;
   return isPortNumeric;
 }

x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/validators/validate_name.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-export function validateName(name) {
+export function validateName(name?: string | null): null | JSX.Element {
   if (!name || !name.trim()) {
     return (
       <FormattedMessage

x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/validators/validate_proxy.tsx

@@ -8,9 +8,9 @@
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { isAddressValid, isPortValid } from '../../../../services';
+import { isAddressValid, isPortValid } from './validate_address';
 
-export function validateProxy(proxy) {
+export function validateProxy(proxy?: string): null | JSX.Element {
   if (!proxy) {
     return (
       <FormattedMessage

x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/validators/validate_seed.ts

@@ -7,10 +7,10 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { isAddressValid, isPortValid } from '../../../../services';
+import { isAddressValid, isPortValid } from './validate_address';
 
-export function validateSeed(seed) {
-  const errors = [];
+export function validateSeed(seed?: string): string[] {
+  const errors: string[] = [];
 
   if (!seed) {
     return errors;

x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/validators/validate_seeds.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-export function validateSeeds(seeds, seedInput) {
+export function validateSeeds(seeds: string[], seedInput?: string) {
   const seedsHaveBeenCreated = seeds.some((seed) => Boolean(seed.trim()));
 
   if (seedsHaveBeenCreated) {

x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/validators/validate_server_name.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-export function validateServerName(serverName) {
+export function validateServerName(serverName?: string) {
   if (!serverName || !serverName.trim()) {
     return (
       <FormattedMessage

x-pack/plugins/remote_clusters/public/application/services/api.ts

@@ -7,25 +7,26 @@
 
 import { UIM_CLUSTER_ADD, UIM_CLUSTER_UPDATE } from '../constants';
 import { trackUserRequest } from './ui_metric';
-import { sendGet, sendPost, sendPut, sendDelete } from './http';
+import { sendGet, sendPost, sendPut, sendDelete, SendGetOptions } from './http';
+import { Cluster } from '../../../common/lib';
 
-export async function loadClusters(options) {
+export async function loadClusters(options: SendGetOptions) {
   return await sendGet(undefined, options);
 }
 
-export async function addCluster(cluster) {
+export async function addCluster(cluster: Cluster) {
   const request = sendPost('', cluster);
 
   return await trackUserRequest(request, UIM_CLUSTER_ADD);
 }
 
-export async function editCluster(cluster) {
+export async function editCluster(cluster: Cluster) {
   const { name, ...rest } = cluster;
   const request = sendPut(name, rest);
 
   return await trackUserRequest(request, UIM_CLUSTER_UPDATE);
 }
 
-export function removeClusterRequest(name) {
+export function removeClusterRequest(name: string) {
   return sendDelete(name);
 }

x-pack/plugins/remote_clusters/public/application/services/api_errors.ts

@@ -5,9 +5,10 @@
  * 2.0.
  */
 
+import { IHttpFetchError } from 'kibana/public';
 import { toasts, fatalError } from './notification';
 
-function createToastConfig(error, errorTitle) {
+function createToastConfig(error: IHttpFetchError, errorTitle: string) {
   // Expect an error in the shape provided by http service.
   if (error && error.body) {
     const { error: errorString, statusCode, message } = error.body;
@@ -18,7 +19,7 @@ function createToastConfig(error, errorTitle) {
   }
 }
 
-export function showApiWarning(error, errorTitle) {
+export function showApiWarning(error: IHttpFetchError, errorTitle: string) {
   const toastConfig = createToastConfig(error, errorTitle);
 
   if (toastConfig) {
@@ -30,7 +31,7 @@ export function showApiWarning(error, errorTitle) {
   return fatalError.add(error, errorTitle);
 }
 
-export function showApiError(error, errorTitle) {
+export function showApiError(error: IHttpFetchError, errorTitle: string) {
   const toastConfig = createToastConfig(error, errorTitle);
 
   if (toastConfig) {

x-pack/plugins/remote_clusters/public/application/services/http.ts

@@ -7,10 +7,11 @@
 
 import { HttpSetup, HttpResponse } from 'kibana/public';
 import { API_BASE_PATH } from '../../../common/constants';
+import { Cluster } from '../../../common/lib';
 
 let _httpClient: HttpSetup;
 
-interface SendGetOptions {
+export interface SendGetOptions {
   asSystemRequest?: boolean;
 }
 
@@ -26,14 +27,7 @@ export function getFullPath(path?: string): string {
   return API_BASE_PATH;
 }
 
-export function sendPost(
-  path: string,
-  payload: {
-    name: string;
-    seeds: string[];
-    skipUnavailable: boolean;
-  }
-): Promise<HttpResponse> {
+export function sendPost(path: string, payload: Cluster): Promise<HttpResponse> {
   return _httpClient.post(getFullPath(path), {
     body: JSON.stringify(payload),
   });
@@ -46,13 +40,7 @@ export function sendGet(
   return _httpClient.get(getFullPath(path), { asSystemRequest });
 }
 
-export function sendPut(
-  path: string,
-  payload: {
-    seeds: string[];
-    skipUnavailable: boolean;
-  }
-): Promise<HttpResponse> {
+export function sendPut(path: string, payload: Omit<Cluster, 'name'>): Promise<HttpResponse> {
   return _httpClient.put(getFullPath(path), {
     body: JSON.stringify(payload),
   });

x-pack/plugins/remote_clusters/public/application/services/index.ts

@@ -9,9 +9,9 @@ export { loadClusters, addCluster, editCluster, removeClusterRequest } from './a
 
 export { showApiError, showApiWarning } from './api_errors';
 
-export { initRedirect, redirect } from './redirect';
+export { setBreadcrumbs } from './breadcrumb';
 
-export { isAddressValid, isPortValid } from './validate_address';
+export { redirect } from './redirect';
 
 export { setUserHasLeftApp, getUserHasLeftApp, registerRouter, getRouter } from './routing';
 

x-pack/plugins/remote_clusters/public/application/services/routing.ts

@@ -5,13 +5,15 @@
  * 2.0.
  */
 
+import { ScopedHistory } from 'kibana/public';
+
 /**
  * This file based on guidance from https://github.com/elastic/eui/blob/master/wiki/react-router.md
  */
 
 let _userHasLeftApp = false;
 
-export function setUserHasLeftApp(userHasLeftApp) {
+export function setUserHasLeftApp(userHasLeftApp: boolean) {
   _userHasLeftApp = userHasLeftApp;
 }
 
@@ -19,8 +21,12 @@ export function getUserHasLeftApp() {
   return _userHasLeftApp;
 }
 
-let router;
-export function registerRouter(reactRouter) {
+interface AppRouter {
+  history: ScopedHistory;
+  route: { location: ScopedHistory['location'] };
+}
+let router: AppRouter;
+export function registerRouter(reactRouter: AppRouter) {
   router = reactRouter;
 }