Convert ILM remove_lifecycle_confirm_modal component to TS. (#70382)

- Also convert api and api_errors services, and improve typing of http service. - Fix bug where fatalErrors service was improperly consumed in api_errors. - Improve typing in Rollup api_errors service, for consistency.
elastic · Jul 20, 2020 · 88e8c30 · 88e8c30
1 parent 85d8ec8
commit 88e8c30
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 26 deletions.
diff --git a/...ugins/index_lifecycle_management/__jest__/client_integration/helpers/setup_environment.ts b/...ugins/index_lifecycle_management/__jest__/client_integration/helpers/setup_environment.ts
@@ -29,6 +29,8 @@ export const setupEnvironment = () => {
   );
 
   mockHttpClient.interceptors.response.use(({ data }) => data);
+  // This expects HttpSetup but we're giving it AxiosInstance.
+  // @ts-ignore
   initHttp(mockHttpClient);
   const { server, httpRequestsMockHelpers } = initHttpRequests();
 

diff --git a/x-pack/plugins/index_lifecycle_management/public/application/services/api.ts b/x-pack/plugins/index_lifecycle_management/public/application/services/api.ts
@@ -5,7 +5,6 @@
  */
 
 import { METRIC_TYPE } from '@kbn/analytics';
-import { trackUiMetric } from './ui_metric';
 
 import {
   UIM_POLICY_DELETE,
@@ -15,8 +14,13 @@ import {
   UIM_INDEX_RETRY_STEP,
 } from '../constants';
 
+import { trackUiMetric } from './ui_metric';
 import { sendGet, sendPost, sendDelete, useRequest } from './http';
 
+interface GenericObject {
+  [key: string]: any;
+}
+
 export async function loadNodes() {
   return await sendGet(`nodes/list`);
 }
@@ -33,7 +37,7 @@ export async function loadPolicies(withIndices: boolean) {
   return await sendGet('policies', { withIndices });
 }
 
-export async function savePolicy(policy: any) {
+export async function savePolicy(policy: GenericObject) {
   return await sendPost(`policies`, policy);
 }
 
@@ -58,14 +62,14 @@ export const removeLifecycleForIndex = async (indexNames: string[]) => {
   return response;
 };
 
-export const addLifecyclePolicyToIndex = async (body: any) => {
+export const addLifecyclePolicyToIndex = async (body: GenericObject) => {
   const response = await sendPost(`index/add`, body);
   // Only track successful actions.
   trackUiMetric(METRIC_TYPE.COUNT, UIM_POLICY_ATTACH_INDEX);
   return response;
 };
 
-export const addLifecyclePolicyToTemplate = async (body: any) => {
+export const addLifecyclePolicyToTemplate = async (body: GenericObject) => {
   const response = await sendPost(`template`, body);
   // Only track successful actions.
   trackUiMetric(METRIC_TYPE.COUNT, UIM_POLICY_ATTACH_INDEX_TEMPLATE);

diff --git a/...public/application/services/api_errors.js → ...public/application/services/api_errors.ts b/...public/application/services/api_errors.js → ...public/application/services/api_errors.ts
@@ -4,10 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { IHttpFetchError } from 'src/core/public';
 import { fatalErrors, toasts } from './notification';
 
-function createToastConfig(error, errorTitle) {
+function createToastConfig(error: IHttpFetchError, errorTitle: string) {
   if (error && error.body) {
+    // Error body shape is defined by the API.
     const { error: errorString, statusCode, message } = error.body;
 
     return {
@@ -17,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) {
@@ -26,10 +28,10 @@ export function showApiWarning(error, errorTitle) {
 
   // This error isn't an HTTP error, so let the fatal error screen tell the user something
   // unexpected happened.
-  return fatalErrors(error, errorTitle);
+  return fatalErrors.add(error, errorTitle);
 }
 
-export function showApiError(error, errorTitle) {
+export function showApiError(error: IHttpFetchError, errorTitle: string) {
   const toastConfig = createToastConfig(error, errorTitle);
 
   if (toastConfig) {

diff --git a/x-pack/plugins/index_lifecycle_management/public/application/services/http.ts b/x-pack/plugins/index_lifecycle_management/public/application/services/http.ts
@@ -4,15 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { HttpSetup } from 'src/core/public';
 import {
   UseRequestConfig,
   useRequest as _useRequest,
   Error,
 } from '../../../../../../src/plugins/es_ui_shared/public';
 
-let _httpClient: any;
+interface GenericObject {
+  [key: string]: any;
+}
+
+let _httpClient: HttpSetup;
 
-export function init(httpClient: any): void {
+export function init(httpClient: HttpSetup): void {
   _httpClient = httpClient;
 }
 
@@ -26,15 +31,15 @@ function getFullPath(path: string): string {
   return apiPrefix;
 }
 
-export function sendPost(path: string, payload: any): any {
+export function sendPost(path: string, payload: GenericObject) {
   return _httpClient.post(getFullPath(path), { body: JSON.stringify(payload) });
 }
 
-export function sendGet(path: string, query?: any): any {
+export function sendGet(path: string, query?: GenericObject): any {
   return _httpClient.get(getFullPath(path), { query });
 }
 
-export function sendDelete(path: string): any {
+export function sendDelete(path: string) {
   return _httpClient.delete(getFullPath(path));
 }
 

diff --git a/...ponents/remove_lifecycle_confirm_modal.js → ...onents/remove_lifecycle_confirm_modal.tsx b/...ponents/remove_lifecycle_confirm_modal.js → ...onents/remove_lifecycle_confirm_modal.tsx
@@ -13,16 +13,13 @@ import { removeLifecycleForIndex } from '../../application/services/api';
 import { showApiError } from '../../application/services/api_errors';
 import { toasts } from '../../application/services/notification';
 
-export class RemoveLifecyclePolicyConfirmModal extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      policies: [],
-      selectedPolicyName: null,
-      selectedAlias: null,
-    };
-  }
+interface Props {
+  indexNames: string[];
+  closeModal: () => void;
+  reloadIndices: () => void;
+}
 
+export class RemoveLifecyclePolicyConfirmModal extends Component<Props> {
   removePolicy = async () => {
     const { indexNames, closeModal, reloadIndices } = this.props;
 

diff --git a/x-pack/plugins/rollup/public/crud_app/services/api_errors.ts b/x-pack/plugins/rollup/public/crud_app/services/api_errors.ts
@@ -4,20 +4,22 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { IHttpFetchError } from 'src/core/public';
 import { getNotifications, getFatalErrors } from '../../kibana_services';
 
-function createToastConfig(error: any, errorTitle: string) {
-  // Expect an error in the shape provided by http service.
+function createToastConfig(error: IHttpFetchError, errorTitle: string) {
   if (error && error.body) {
+    // Error body shape is defined by the API.
     const { error: errorString, statusCode, message } = error.body;
+
     return {
       title: errorTitle,
       text: `${statusCode}: ${errorString}. ${message}`,
     };
   }
 }
 
-export function showApiWarning(error: any, errorTitle: string) {
+export function showApiWarning(error: IHttpFetchError, errorTitle: string) {
   const toastConfig = createToastConfig(error, errorTitle);
 
   if (toastConfig) {
@@ -29,7 +31,7 @@ export function showApiWarning(error: any, errorTitle: string) {
   return getFatalErrors().add(error, errorTitle);
 }
 
-export function showApiError(error: any, errorTitle: string) {
+export function showApiError(error: IHttpFetchError, errorTitle: string) {
   const toastConfig = createToastConfig(error, errorTitle);
 
   if (toastConfig) {