[Synthetics] Perform params API HTTP migration

x-pack/plugins/synthetics/common/runtime_types/monitor_management/synthetics_params.ts

@@ -7,10 +7,10 @@
 
 import * as t from 'io-ts';
 
-export const SyntheticsParamSOCodec = t.intersection([
+export const SyntheticsParamsReadonlyCodec = t.intersection([
   t.interface({
+    id: t.string,
     key: t.string,
-    value: t.string,
   }),
   t.partial({
     description: t.string,
@@ -19,7 +19,23 @@ export const SyntheticsParamSOCodec = t.intersection([
   }),
 ]);
 
-export type SyntheticsParamSO = t.TypeOf<typeof SyntheticsParamSOCodec>;
+export type SyntheticsParamsReadonly = t.TypeOf<typeof SyntheticsParamsReadonlyCodec>;
+
+export const SyntheticsParamsCodec = t.intersection([
+  SyntheticsParamsReadonlyCodec,
+  t.interface({ value: t.string }),
+]);
+
+export type SyntheticsParams = t.TypeOf<typeof SyntheticsParamsCodec>;
+
+export type SyntheticsParamSOAttributes = t.TypeOf<typeof SyntheticsParamsCodec>;
+
+export const DeleteParamsResponseCodec = t.interface({
+  id: t.string,
+  deleted: t.boolean,
+});
+
+export type DeleteParamsResponse = t.TypeOf<typeof DeleteParamsResponseCodec>;
 
 export const SyntheticsParamRequestCodec = t.intersection([
   t.interface({

x-pack/plugins/synthetics/public/apps/synthetics/components/settings/global_params/add_param_flyout.tsx

@@ -31,7 +31,7 @@ import {
 } from '../../../state/global_params';
 import { ClientPluginsStart } from '../../../../../plugin';
 import { ListParamItem } from './params_list';
-import { SyntheticsParamSO } from '../../../../../../common/runtime_types';
+import { SyntheticsParams } from '../../../../../../common/runtime_types';
 import { useFormWrapped } from '../../../../../hooks/use_form_wrapped';
 import { AddParamForm } from './add_param_form';
 import { syncGlobalParamsAction } from '../../../state/settings';
@@ -49,7 +49,7 @@ export const AddParamFlyout = ({
 
   const { id, ...dataToSave } = isEditingItem ?? {};
 
-  const form = useFormWrapped<SyntheticsParamSO>({
+  const form = useFormWrapped<SyntheticsParams>({
     mode: 'onSubmit',
     reValidateMode: 'onChange',
     shouldFocusError: true,
@@ -77,7 +77,7 @@ export const AddParamFlyout = ({
 
   const { isSaving, savedData } = useSelector(selectGlobalParamState);
 
-  const onSubmit = (formData: SyntheticsParamSO) => {
+  const onSubmit = (formData: SyntheticsParams) => {
     const { namespaces, ...paramRequest } = formData;
     const shareAcrossSpaces = namespaces?.includes(ALL_SPACES_ID);
 

x-pack/plugins/synthetics/public/apps/synthetics/components/settings/global_params/add_param_form.tsx

@@ -16,7 +16,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { Controller, useFormContext, useFormState } from 'react-hook-form';
-import { SyntheticsParamSO } from '../../../../../../common/runtime_types';
+import { SyntheticsParams } from '../../../../../../common/runtime_types';
 import { ListParamItem } from './params_list';
 
 export const AddParamForm = ({
@@ -26,8 +26,8 @@ export const AddParamForm = ({
   items: ListParamItem[];
   isEditingItem: ListParamItem | null;
 }) => {
-  const { register, control } = useFormContext<SyntheticsParamSO>();
-  const { errors } = useFormState<SyntheticsParamSO>();
+  const { register, control } = useFormContext<SyntheticsParams>();
+  const { errors } = useFormState<SyntheticsParams>();
 
   const tagsList = items.reduce((acc, item) => {
     const tags = item.tags || [];

x-pack/plugins/synthetics/public/apps/synthetics/components/settings/global_params/delete_param.tsx

@@ -35,14 +35,14 @@ export const DeleteParam = ({
 
   const { status } = useFetcher(() => {
     if (isDeleting) {
-      return deleteGlobalParams({ ids: items.map(({ id }) => id) });
+      return deleteGlobalParams(items.map(({ id }) => id));
     }
   }, [items, isDeleting]);
 
   const name = items
     .map(({ key }) => key)
     .join(', ')
-    .substr(0, 50);
+    .slice(0, 50);
 
   useEffect(() => {
     if (!isDeleting) {

x-pack/plugins/synthetics/public/apps/synthetics/components/settings/global_params/params_list.tsx

@@ -24,12 +24,12 @@ import { EuiBasicTableColumn } from '@elastic/eui/src/components/basic_table/bas
 import { useDebounce } from 'react-use';
 import { TableTitle } from '../../common/components/table_title';
 import { ParamsText } from './params_text';
-import { SyntheticsParamSO } from '../../../../../../common/runtime_types';
+import { SyntheticsParams } from '../../../../../../common/runtime_types';
 import { useParamsList } from '../hooks/use_params_list';
 import { AddParamFlyout } from './add_param_flyout';
 import { DeleteParam } from './delete_param';
 
-export interface ListParamItem extends SyntheticsParamSO {
+export interface ListParamItem extends SyntheticsParams {
   id: string;
 }
 

x-pack/plugins/synthetics/public/apps/synthetics/components/settings/hooks/use_params_list.ts

@@ -20,12 +20,7 @@ export const useParamsList = () => {
 
   return useMemo(() => {
     return {
-      items:
-        listOfParams?.map((item) => ({
-          id: item.id,
-          ...item.attributes,
-          namespaces: item.namespaces,
-        })) ?? [],
+      items: listOfParams ?? [],
       isLoading,
     };
   }, [listOfParams, isLoading]);

x-pack/plugins/synthetics/public/apps/synthetics/state/certs/index.ts

@@ -6,7 +6,7 @@
  */
 
 import { createReducer } from '@reduxjs/toolkit';
-import { CertResult, SyntheticsParamSO } from '../../../../../common/runtime_types';
+import { CertResult, SyntheticsParams } from '../../../../../common/runtime_types';
 import { IHttpSerializedFetchError } from '..';
 import { getCertsListAction } from './actions';
 
@@ -15,7 +15,7 @@ export interface CertsListState {
   data?: CertResult;
   error: IHttpSerializedFetchError | null;
   isSaving?: boolean;
-  savedData?: SyntheticsParamSO;
+  savedData?: SyntheticsParams;
 }
 
 const initialState: CertsListState = {

x-pack/plugins/synthetics/public/apps/synthetics/state/global_params/actions.ts

@@ -5,15 +5,14 @@
  * 2.0.
  */
 
-import { SavedObject } from '@kbn/core-saved-objects-common';
-import { SyntheticsParamRequest, SyntheticsParamSO } from '../../../../../common/runtime_types';
+import { SyntheticsParamRequest, SyntheticsParams } from '../../../../../common/runtime_types';
 import { createAsyncAction } from '../utils/actions';
 
-export const getGlobalParamAction = createAsyncAction<void, Array<SavedObject<SyntheticsParamSO>>>(
+export const getGlobalParamAction = createAsyncAction<void, SyntheticsParams[]>(
   'GET GLOBAL PARAMS'
 );
 
-export const addNewGlobalParamAction = createAsyncAction<SyntheticsParamRequest, SyntheticsParamSO>(
+export const addNewGlobalParamAction = createAsyncAction<SyntheticsParamRequest, SyntheticsParams>(
   'ADD NEW GLOBAL PARAM'
 );
 
@@ -22,5 +21,5 @@ export const editGlobalParamAction = createAsyncAction<
     id: string;
     paramRequest: SyntheticsParamRequest;
   },
-  SyntheticsParamSO
+  SyntheticsParams
 >('EDIT GLOBAL PARAM');

x-pack/plugins/synthetics/public/apps/synthetics/state/global_params/api.ts

@@ -5,43 +5,46 @@
  * 2.0.
  */
 
-import { SavedObject } from '@kbn/core-saved-objects-common';
 import { SYNTHETICS_API_URLS } from '../../../../../common/constants';
-import { SyntheticsParamRequest, SyntheticsParamSO } from '../../../../../common/runtime_types';
+import {
+  DeleteParamsResponse,
+  SyntheticsParamRequest,
+  SyntheticsParams,
+  SyntheticsParamsCodec,
+  SyntheticsParamsReadonlyCodec,
+} from '../../../../../common/runtime_types';
 import { apiService } from '../../../../utils/api_service/api_service';
 
-export const getGlobalParams = async (): Promise<Array<SavedObject<SyntheticsParamSO>>> => {
-  const result = (await apiService.get(SYNTHETICS_API_URLS.PARAMS)) as {
-    data: Array<SavedObject<SyntheticsParamSO>>;
-  };
-  return result.data;
+export const getGlobalParams = async (): Promise<SyntheticsParams[]> => {
+  return apiService.get<SyntheticsParams[]>(
+    SYNTHETICS_API_URLS.PARAMS,
+    undefined,
+    SyntheticsParamsReadonlyCodec
+  );
 };
 
 export const addGlobalParam = async (
   paramRequest: SyntheticsParamRequest
-): Promise<SyntheticsParamSO> => {
-  return apiService.post(SYNTHETICS_API_URLS.PARAMS, paramRequest);
-};
+): Promise<SyntheticsParams> =>
+  apiService.post(SYNTHETICS_API_URLS.PARAMS, paramRequest, SyntheticsParamsCodec);
 
 export const editGlobalParam = async ({
   paramRequest,
   id,
 }: {
   id: string;
   paramRequest: SyntheticsParamRequest;
-}): Promise<SyntheticsParamSO> => {
-  return apiService.put(SYNTHETICS_API_URLS.PARAMS, {
-    id,
-    ...paramRequest,
-  });
-};
+}): Promise<SyntheticsParams> =>
+  apiService.put<SyntheticsParams>(
+    SYNTHETICS_API_URLS.PARAMS,
+    {
+      id,
+      ...paramRequest,
+    },
+    SyntheticsParamsCodec
+  );
 
-export const deleteGlobalParams = async ({
-  ids,
-}: {
-  ids: string[];
-}): Promise<SyntheticsParamSO> => {
-  return apiService.delete(SYNTHETICS_API_URLS.PARAMS, {
+export const deleteGlobalParams = async (ids: string[]): Promise<DeleteParamsResponse[]> =>
+  apiService.delete(SYNTHETICS_API_URLS.PARAMS, {
     ids: JSON.stringify(ids),
   });
-};

x-pack/plugins/synthetics/public/apps/synthetics/state/global_params/index.ts

@@ -6,18 +6,17 @@
  */
 
 import { createReducer } from '@reduxjs/toolkit';
-import { SavedObject } from '@kbn/core-saved-objects-common';
-import { SyntheticsParamSO } from '../../../../../common/runtime_types';
+import { SyntheticsParams } from '../../../../../common/runtime_types';
 import { IHttpSerializedFetchError } from '..';
 import { addNewGlobalParamAction, editGlobalParamAction, getGlobalParamAction } from './actions';
 
 export interface GlobalParamsState {
   isLoading?: boolean;
-  listOfParams?: Array<SavedObject<SyntheticsParamSO>>;
+  listOfParams?: SyntheticsParams[];
   addError: IHttpSerializedFetchError | null;
   editError: IHttpSerializedFetchError | null;
   isSaving?: boolean;
-  savedData?: SyntheticsParamSO;
+  savedData?: SyntheticsParams;
 }
 
 const initialState: GlobalParamsState = {

x-pack/plugins/synthetics/public/utils/api_service/api_service.ts

@@ -41,20 +41,7 @@ class ApiService {
     return ApiService.instance;
   }
 
-  public async get<T>(
-    apiUrl: string,
-    params?: HttpFetchQuery,
-    decodeType?: any,
-    asResponse = false
-  ) {
-    const response = await this._http!.fetch<T>({
-      path: apiUrl,
-      query: params,
-      asResponse,
-    });
-
-    this.addInspectorRequest?.({ data: response, status: FETCH_STATUS.SUCCESS, loading: false });
-
+  private parseResponse<T>(response: Awaited<T>, apiUrl: string, decodeType?: any): T {
     if (decodeType) {
       const decoded = decodeType.decode(response);
       if (isRight(decoded)) {
@@ -69,10 +56,26 @@ class ApiService {
         );
       }
     }
-
     return response;
   }
 
+  public async get<T>(
+    apiUrl: string,
+    params?: HttpFetchQuery,
+    decodeType?: any,
+    asResponse = false
+  ) {
+    const response = await this._http!.fetch<T>({
+      path: apiUrl,
+      query: params,
+      asResponse,
+    });
+
+    this.addInspectorRequest?.({ data: response, status: FETCH_STATUS.SUCCESS, loading: false });
+
+    return this.parseResponse(response, apiUrl, decodeType);
+  }
+
   public async post<T>(apiUrl: string, data?: any, decodeType?: any, params?: HttpFetchQuery) {
     const response = await this._http!.post<T>(apiUrl, {
       method: 'POST',
@@ -82,18 +85,7 @@ class ApiService {
 
     this.addInspectorRequest?.({ data: response, status: FETCH_STATUS.SUCCESS, loading: false });
 
-    if (decodeType) {
-      const decoded = decodeType.decode(response);
-      if (isRight(decoded)) {
-        return decoded.right as T;
-      } else {
-        // eslint-disable-next-line no-console
-        console.warn(
-          `API ${apiUrl} is not returning expected response, ${formatErrors(decoded.left)}`
-        );
-      }
-    }
-    return response;
+    return this.parseResponse(response, apiUrl, decodeType);
   }
 
   public async put<T>(apiUrl: string, data?: any, decodeType?: any) {
@@ -102,18 +94,7 @@ class ApiService {
       body: JSON.stringify(data),
     });
 
-    if (decodeType) {
-      const decoded = decodeType.decode(response);
-      if (isRight(decoded)) {
-        return decoded.right as T;
-      } else {
-        // eslint-disable-next-line no-console
-        console.warn(
-          `API ${apiUrl} is not returning expected response, ${formatErrors(decoded.left)}`
-        );
-      }
-    }
-    return response;
+    return this.parseResponse(response, apiUrl, decodeType);
   }
 
   public async delete<T>(apiUrl: string, params?: HttpFetchQuery) {