[7.x] [Uptime] refactor Synthetics Integration package UI (#102080)

x-pack/plugins/uptime/public/components/fleet_package/contexts/http_context.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import { IHTTPSimpleFields, ConfigKeys, ScheduleUnit, DataStream } from '../types';
+
+interface IHTTPSimpleFieldsContext {
+  setFields: React.Dispatch<React.SetStateAction<IHTTPSimpleFields>>;
+  fields: IHTTPSimpleFields;
+  defaultValues: IHTTPSimpleFields;
+}
+
+interface IHTTPSimpleFieldsContextProvider {
+  children: React.ReactNode;
+  defaultValues?: IHTTPSimpleFields;
+}
+
+export const initialValues = {
+  [ConfigKeys.URLS]: '',
+  [ConfigKeys.MAX_REDIRECTS]: '0',
+  [ConfigKeys.MONITOR_TYPE]: DataStream.HTTP,
+  [ConfigKeys.SCHEDULE]: {
+    number: '3',
+    unit: ScheduleUnit.MINUTES,
+  },
+  [ConfigKeys.APM_SERVICE_NAME]: '',
+  [ConfigKeys.TAGS]: [],
+  [ConfigKeys.TIMEOUT]: '16',
+};
+
+const defaultContext: IHTTPSimpleFieldsContext = {
+  setFields: (_fields: React.SetStateAction<IHTTPSimpleFields>) => {
+    throw new Error(
+      'setFields was not initialized for HTTP Simple Fields, set it when you invoke the context'
+    );
+  },
+  fields: initialValues, // mutable
+  defaultValues: initialValues, // immutable
+};
+
+export const HTTPSimpleFieldsContext = createContext(defaultContext);
+
+export const HTTPSimpleFieldsContextProvider = ({
+  children,
+  defaultValues = initialValues,
+}: IHTTPSimpleFieldsContextProvider) => {
+  const [fields, setFields] = useState<IHTTPSimpleFields>(defaultValues);
+
+  const value = useMemo(() => {
+    return { fields, setFields, defaultValues };
+  }, [fields, defaultValues]);
+
+  return <HTTPSimpleFieldsContext.Provider value={value} children={children} />;
+};
+
+export const useHTTPSimpleFieldsContext = () => useContext(HTTPSimpleFieldsContext);

x-pack/plugins/uptime/public/components/fleet_package/contexts/http_provider.tsx

@@ -0,0 +1,69 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { ReactNode } from 'react';
+import { IHTTPSimpleFields, IHTTPAdvancedFields, ITLSFields, ConfigKeys } from '../types';
+import {
+  HTTPSimpleFieldsContextProvider,
+  HTTPAdvancedFieldsContextProvider,
+  TLSFieldsContextProvider,
+} from '.';
+
+interface HTTPContextProviderProps {
+  defaultValues?: any;
+  children: ReactNode;
+}
+
+export const HTTPContextProvider = ({ defaultValues, children }: HTTPContextProviderProps) => {
+  const httpAdvancedFields: IHTTPAdvancedFields | undefined = defaultValues
+    ? {
+        [ConfigKeys.USERNAME]: defaultValues[ConfigKeys.USERNAME],
+        [ConfigKeys.PASSWORD]: defaultValues[ConfigKeys.PASSWORD],
+        [ConfigKeys.PROXY_URL]: defaultValues[ConfigKeys.PROXY_URL],
+        [ConfigKeys.RESPONSE_BODY_CHECK_NEGATIVE]:
+          defaultValues[ConfigKeys.RESPONSE_BODY_CHECK_NEGATIVE],
+        [ConfigKeys.RESPONSE_BODY_CHECK_POSITIVE]:
+          defaultValues[ConfigKeys.RESPONSE_BODY_CHECK_POSITIVE],
+        [ConfigKeys.RESPONSE_BODY_INDEX]: defaultValues[ConfigKeys.RESPONSE_BODY_INDEX],
+        [ConfigKeys.RESPONSE_HEADERS_CHECK]: defaultValues[ConfigKeys.RESPONSE_HEADERS_CHECK],
+        [ConfigKeys.RESPONSE_HEADERS_INDEX]: defaultValues[ConfigKeys.RESPONSE_HEADERS_INDEX],
+        [ConfigKeys.RESPONSE_STATUS_CHECK]: defaultValues[ConfigKeys.RESPONSE_STATUS_CHECK],
+        [ConfigKeys.REQUEST_BODY_CHECK]: defaultValues[ConfigKeys.REQUEST_BODY_CHECK],
+        [ConfigKeys.REQUEST_HEADERS_CHECK]: defaultValues[ConfigKeys.REQUEST_HEADERS_CHECK],
+        [ConfigKeys.REQUEST_METHOD_CHECK]: defaultValues[ConfigKeys.REQUEST_METHOD_CHECK],
+      }
+    : undefined;
+  const httpSimpleFields: IHTTPSimpleFields | undefined = defaultValues
+    ? {
+        [ConfigKeys.APM_SERVICE_NAME]: defaultValues[ConfigKeys.APM_SERVICE_NAME],
+        [ConfigKeys.MAX_REDIRECTS]: defaultValues[ConfigKeys.MAX_REDIRECTS],
+        [ConfigKeys.MONITOR_TYPE]: defaultValues[ConfigKeys.MONITOR_TYPE],
+        [ConfigKeys.SCHEDULE]: defaultValues[ConfigKeys.SCHEDULE],
+        [ConfigKeys.TAGS]: defaultValues[ConfigKeys.TAGS],
+        [ConfigKeys.TIMEOUT]: defaultValues[ConfigKeys.TIMEOUT],
+        [ConfigKeys.URLS]: defaultValues[ConfigKeys.URLS],
+      }
+    : undefined;
+  const tlsFields: ITLSFields | undefined = defaultValues
+    ? {
+        [ConfigKeys.TLS_CERTIFICATE_AUTHORITIES]:
+          defaultValues[ConfigKeys.TLS_CERTIFICATE_AUTHORITIES],
+        [ConfigKeys.TLS_CERTIFICATE]: defaultValues[ConfigKeys.TLS_CERTIFICATE],
+        [ConfigKeys.TLS_KEY]: defaultValues[ConfigKeys.TLS_KEY],
+        [ConfigKeys.TLS_KEY_PASSPHRASE]: defaultValues[ConfigKeys.TLS_KEY_PASSPHRASE],
+        [ConfigKeys.TLS_VERIFICATION_MODE]: defaultValues[ConfigKeys.TLS_VERIFICATION_MODE],
+        [ConfigKeys.TLS_VERSION]: defaultValues[ConfigKeys.TLS_VERSION],
+      }
+    : undefined;
+  return (
+    <HTTPAdvancedFieldsContextProvider defaultValues={httpAdvancedFields}>
+      <HTTPSimpleFieldsContextProvider defaultValues={httpSimpleFields}>
+        <TLSFieldsContextProvider defaultValues={tlsFields}>{children}</TLSFieldsContextProvider>
+      </HTTPSimpleFieldsContextProvider>
+    </HTTPAdvancedFieldsContextProvider>
+  );
+};

x-pack/plugins/uptime/public/components/fleet_package/contexts/icmp_context.tsx

@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import { IICMPSimpleFields, ConfigKeys, ScheduleUnit, DataStream } from '../types';
+
+interface IICMPSimpleFieldsContext {
+  setFields: React.Dispatch<React.SetStateAction<IICMPSimpleFields>>;
+  fields: IICMPSimpleFields;
+  defaultValues: IICMPSimpleFields;
+}
+
+interface IICMPSimpleFieldsContextProvider {
+  children: React.ReactNode;
+  defaultValues?: IICMPSimpleFields;
+}
+
+export const initialValues = {
+  [ConfigKeys.HOSTS]: '',
+  [ConfigKeys.MAX_REDIRECTS]: '0',
+  [ConfigKeys.MONITOR_TYPE]: DataStream.ICMP,
+  [ConfigKeys.SCHEDULE]: {
+    number: '3',
+    unit: ScheduleUnit.MINUTES,
+  },
+  [ConfigKeys.APM_SERVICE_NAME]: '',
+  [ConfigKeys.TAGS]: [],
+  [ConfigKeys.TIMEOUT]: '16',
+  [ConfigKeys.WAIT]: '1',
+};
+
+const defaultContext: IICMPSimpleFieldsContext = {
+  setFields: (_fields: React.SetStateAction<IICMPSimpleFields>) => {
+    throw new Error(
+      'setFields was not initialized for ICMP Simple Fields, set it when you invoke the context'
+    );
+  },
+  fields: initialValues, // mutable
+  defaultValues: initialValues, // immutable
+};
+
+export const ICMPSimpleFieldsContext = createContext(defaultContext);
+
+export const ICMPSimpleFieldsContextProvider = ({
+  children,
+  defaultValues = initialValues,
+}: IICMPSimpleFieldsContextProvider) => {
+  const [fields, setFields] = useState<IICMPSimpleFields>(defaultValues);
+
+  const value = useMemo(() => {
+    return { fields, setFields, defaultValues };
+  }, [fields, defaultValues]);
+
+  return <ICMPSimpleFieldsContext.Provider value={value} children={children} />;
+};
+
+export const useICMPSimpleFieldsContext = () => useContext(ICMPSimpleFieldsContext);

x-pack/plugins/uptime/public/components/fleet_package/contexts/index.ts

@@ -6,11 +6,29 @@
  */
 
 export {
-  SimpleFieldsContext,
-  SimpleFieldsContextProvider,
-  initialValues as defaultSimpleFields,
-  useSimpleFieldsContext,
-} from './simple_fields_context';
+  MonitorTypeContext,
+  MonitorTypeContextProvider,
+  initialValue as defaultMonitorType,
+  useMonitorTypeContext,
+} from './monitor_type_context';
+export {
+  HTTPSimpleFieldsContext,
+  HTTPSimpleFieldsContextProvider,
+  initialValues as defaultHTTPSimpleFields,
+  useHTTPSimpleFieldsContext,
+} from './http_context';
+export {
+  TCPSimpleFieldsContext,
+  TCPSimpleFieldsContextProvider,
+  initialValues as defaultTCPSimpleFields,
+  useTCPSimpleFieldsContext,
+} from './tcp_context';
+export {
+  ICMPSimpleFieldsContext,
+  ICMPSimpleFieldsContextProvider,
+  initialValues as defaultICMPSimpleFields,
+  useICMPSimpleFieldsContext,
+} from './icmp_context';
 export {
   TCPAdvancedFieldsContext,
   TCPAdvancedFieldsContextProvider,
@@ -29,3 +47,5 @@ export {
   initialValues as defaultTLSFields,
   useTLSFieldsContext,
 } from './tls_fields_context';
+export { HTTPContextProvider } from './http_provider';
+export { TCPContextProvider } from './tcp_provider';

x-pack/plugins/uptime/public/components/fleet_package/contexts/monitor_type_context.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import { DataStream } from '../types';
+
+interface IMonitorTypeFieldsContext {
+  setMonitorType: React.Dispatch<React.SetStateAction<DataStream>>;
+  monitorType: DataStream;
+  defaultValue: DataStream;
+}
+
+interface IMonitorTypeFieldsContextProvider {
+  children: React.ReactNode;
+  defaultValue?: DataStream;
+}
+
+export const initialValue = DataStream.HTTP;
+
+const defaultContext: IMonitorTypeFieldsContext = {
+  setMonitorType: (_monitorType: React.SetStateAction<DataStream>) => {
+    throw new Error('setMonitorType was not initialized, set it when you invoke the context');
+  },
+  monitorType: initialValue, // mutable
+  defaultValue: initialValue, // immutable
+};
+
+export const MonitorTypeContext = createContext(defaultContext);
+
+export const MonitorTypeContextProvider = ({
+  children,
+  defaultValue = initialValue,
+}: IMonitorTypeFieldsContextProvider) => {
+  const [monitorType, setMonitorType] = useState<DataStream>(defaultValue);
+
+  const value = useMemo(() => {
+    return { monitorType, setMonitorType, defaultValue };
+  }, [monitorType, defaultValue]);
+
+  return <MonitorTypeContext.Provider value={value} children={children} />;
+};
+
+export const useMonitorTypeContext = () => useContext(MonitorTypeContext);