[Alerting UI] Make connector reducer as generic type. (#86857)

* - * fixed failing tests * fixed typescript checks * fixed typescript checks * fixed failing build * fixed typescript checks * removed typo cast * fixed failing test * fixed faling build
elastic · Jan 7, 2021 · 1c30525 · 1c30525
1 parent 52e3371
commit 1c30525
Show file tree

Hide file tree

Showing 7 changed files with 183 additions and 62 deletions.
diff --git a/...rs_actions_ui/public/application/sections/action_connector_form/action_connector_form.tsx b/...rs_actions_ui/public/application/sections/action_connector_form/action_connector_form.tsx
@@ -17,9 +17,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { ReducerAction } from './connector_reducer';
 import {
-  ActionConnector,
   IErrorObject,
   ActionTypeRegistryContract,
   UserConfiguredActionConnector,
@@ -28,8 +26,11 @@ import {
 import { hasSaveActionsCapability } from '../../lib/capabilities';
 import { useKibana } from '../../../common/lib/kibana';
 import { SectionLoading } from '../../components/section_loading';
+import { ConnectorReducerAction } from './connector_reducer';
 
-export function validateBaseProperties(actionObject: ActionConnector) {
+export function validateBaseProperties<ConnectorConfig, ConnectorSecrets>(
+  actionObject: UserConfiguredActionConnector<ConnectorConfig, ConnectorSecrets>
+) {
   const validationResult = { errors: {} };
   const verrors = {
     name: new Array<string>(),
@@ -78,14 +79,14 @@ interface ActionConnectorProps<
   ConnectorSecrets = Record<string, any>
 > {
   connector: UserConfiguredActionConnector<ConnectorConfig, ConnectorSecrets>;
-  dispatch: React.Dispatch<ReducerAction>;
-  actionTypeName: string;
-  serverError?: {
-    body: { message: string; error: string };
-  };
+  dispatch: React.Dispatch<ConnectorReducerAction<ConnectorConfig, ConnectorSecrets>>;
   errors: IErrorObject;
   actionTypeRegistry: ActionTypeRegistryContract;
   consumer?: string;
+  actionTypeName?: string;
+  serverError?: {
+    body: { message: string; error: string };
+  };
 }
 
 export const ActionConnectorForm = ({
@@ -103,15 +104,31 @@ export const ActionConnectorForm = ({
   } = useKibana().services;
   const canSave = hasSaveActionsCapability(capabilities);
 
-  const setActionProperty = (key: string, value: any) => {
+  const setActionProperty = <
+    Key extends keyof UserConfiguredActionConnector<
+      Record<string, unknown>,
+      Record<string, unknown>
+    >
+  >(
+    key: Key,
+    value:
+      | UserConfiguredActionConnector<Record<string, unknown>, Record<string, unknown>>[Key]
+      | null
+  ) => {
     dispatch({ command: { type: 'setProperty' }, payload: { key, value } });
   };
 
-  const setActionConfigProperty = (key: string, value: any) => {
+  const setActionConfigProperty = <Key extends keyof Record<string, unknown>>(
+    key: Key,
+    value: Record<string, unknown>[Key]
+  ) => {
     dispatch({ command: { type: 'setConfigProperty' }, payload: { key, value } });
   };
 
-  const setActionSecretsProperty = (key: string, value: any) => {
+  const setActionSecretsProperty = <Key extends keyof Record<string, unknown>>(
+    key: Key,
+    value: Record<string, unknown>[Key]
+  ) => {
     dispatch({ command: { type: 'setSecretsProperty' }, payload: { key, value } });
   };
 
@@ -135,7 +152,7 @@ export const ActionConnectorForm = ({
                 id="xpack.triggersActionsUI.sections.actionConnectorForm.actions.actionConfigurationWarningDescriptionText"
                 defaultMessage="To create this connector, you must configure at least one {actionType} account. {docLink}"
                 values={{
-                  actionType: actionTypeName,
+                  actionType: actionTypeName ?? connector.actionTypeId,
                   docLink: (
                     <EuiLink
                       href={`${docLinks.ELASTIC_WEBSITE_URL}guide/en/kibana/${docLinks.DOC_LINK_VERSION}/action-types.html`}

diff --git a/...ers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.tsx b/...ers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.tsx
@@ -24,12 +24,17 @@ import { HttpSetup } from 'kibana/public';
 import { i18n } from '@kbn/i18n';
 import { ActionTypeMenu } from './action_type_menu';
 import { ActionConnectorForm, getConnectorErrors } from './action_connector_form';
-import { ActionType, ActionConnector, ActionTypeRegistryContract } from '../../../types';
-import { connectorReducer } from './connector_reducer';
+import {
+  ActionType,
+  ActionConnector,
+  ActionTypeRegistryContract,
+  UserConfiguredActionConnector,
+} from '../../../types';
 import { hasSaveActionsCapability } from '../../lib/capabilities';
 import { createActionConnector } from '../../lib/action_connector_api';
 import { VIEW_LICENSE_OPTIONS_LINK } from '../../../common/constants';
 import { useKibana } from '../../../common/lib/kibana';
+import { createConnectorReducer, InitialConnector, ConnectorReducer } from './connector_reducer';
 import { getConnectorWithInvalidatedFields } from '../../lib/value_validators';
 
 export interface ConnectorAddFlyoutProps {
@@ -59,15 +64,32 @@ const ConnectorAddFlyout: React.FunctionComponent<ConnectorAddFlyoutProps> = ({
   const [hasActionsUpgradeableByTrial, setHasActionsUpgradeableByTrial] = useState<boolean>(false);
 
   // hooks
-  const initialConnector = {
+  const initialConnector: InitialConnector<Record<string, unknown>, Record<string, unknown>> = {
     actionTypeId: actionType?.id ?? '',
     config: {},
     secrets: {},
-  } as ActionConnector;
-  const [{ connector }, dispatch] = useReducer(connectorReducer, { connector: initialConnector });
-  const setActionProperty = (key: string, value: any) => {
+  };
+
+  const reducer: ConnectorReducer<
+    Record<string, unknown>,
+    Record<string, unknown>
+  > = createConnectorReducer<Record<string, unknown>, Record<string, unknown>>();
+  const [{ connector }, dispatch] = useReducer(reducer, {
+    connector: initialConnector as UserConfiguredActionConnector<
+      Record<string, unknown>,
+      Record<string, unknown>
+    >,
+  });
+
+  const setActionProperty = <Key extends keyof ActionConnector>(
+    key: Key,
+    value:
+      | UserConfiguredActionConnector<Record<string, unknown>, Record<string, unknown>>[Key]
+      | null
+  ) => {
     dispatch({ command: { type: 'setProperty' }, payload: { key, value } });
   };
+
   const setConnector = (value: any) => {
     dispatch({ command: { type: 'setConnector' }, payload: { key: 'connector', value } });
   };

diff --git a/...gers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx b/...gers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx
@@ -18,11 +18,16 @@ import { EuiButtonEmpty } from '@elastic/eui';
 import { EuiOverlayMask } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ActionConnectorForm, getConnectorErrors } from './action_connector_form';
-import { connectorReducer } from './connector_reducer';
+import { createConnectorReducer, InitialConnector, ConnectorReducer } from './connector_reducer';
 import { createActionConnector } from '../../lib/action_connector_api';
 import './connector_add_modal.scss';
 import { hasSaveActionsCapability } from '../../lib/capabilities';
-import { ActionType, ActionConnector, ActionTypeRegistryContract } from '../../../types';
+import {
+  ActionType,
+  ActionConnector,
+  ActionTypeRegistryContract,
+  UserConfiguredActionConnector,
+} from '../../../types';
 import { useKibana } from '../../../common/lib/kibana';
 import { getConnectorWithInvalidatedFields } from '../../lib/value_validators';
 
@@ -47,7 +52,10 @@ export const ConnectorAddModal = ({
     application: { capabilities },
   } = useKibana().services;
   let hasErrors = false;
-  const initialConnector = useMemo(
+  const initialConnector: InitialConnector<
+    Record<string, unknown>,
+    Record<string, unknown>
+  > = useMemo(
     () => ({
       actionTypeId: actionType.id,
       config: {},
@@ -58,7 +66,16 @@ export const ConnectorAddModal = ({
   const [isSaving, setIsSaving] = useState<boolean>(false);
   const canSave = hasSaveActionsCapability(capabilities);
 
-  const [{ connector }, dispatch] = useReducer(connectorReducer, { connector: initialConnector });
+  const reducer: ConnectorReducer<
+    Record<string, unknown>,
+    Record<string, unknown>
+  > = createConnectorReducer<Record<string, unknown>, Record<string, unknown>>();
+  const [{ connector }, dispatch] = useReducer(reducer, {
+    connector: initialConnector as UserConfiguredActionConnector<
+      Record<string, unknown>,
+      Record<string, unknown>
+    >,
+  });
   const setConnector = (value: any) => {
     dispatch({ command: { type: 'setConnector' }, payload: { key: 'connector', value } });
   };

diff --git a/...rs_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx b/...rs_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx
@@ -26,8 +26,12 @@ import { i18n } from '@kbn/i18n';
 import { Option, none, some } from 'fp-ts/lib/Option';
 import { ActionConnectorForm, getConnectorErrors } from './action_connector_form';
 import { TestConnectorForm } from './test_connector_form';
-import { ActionConnector, ActionTypeRegistryContract } from '../../../types';
-import { connectorReducer } from './connector_reducer';
+import {
+  ActionConnector,
+  ActionTypeRegistryContract,
+  UserConfiguredActionConnector,
+} from '../../../types';
+import { ConnectorReducer, createConnectorReducer } from './connector_reducer';
 import { updateActionConnector, executeAction } from '../../lib/action_connector_api';
 import { hasSaveActionsCapability } from '../../lib/capabilities';
 import {
@@ -66,17 +70,29 @@ export const ConnectorEditFlyout = ({
     docLinks,
     application: { capabilities },
   } = useKibana().services;
+  const getConnectorWithoutSecrets = () => ({
+    ...(initialConnector as UserConfiguredActionConnector<
+      Record<string, unknown>,
+      Record<string, unknown>
+    >),
+    secrets: {},
+  });
   const canSave = hasSaveActionsCapability(capabilities);
 
-  const [{ connector }, dispatch] = useReducer(connectorReducer, {
-    connector: { ...initialConnector, secrets: {} },
+  const reducer: ConnectorReducer<
+    Record<string, unknown>,
+    Record<string, unknown>
+  > = createConnectorReducer<Record<string, unknown>, Record<string, unknown>>();
+  const [{ connector }, dispatch] = useReducer(reducer, {
+    connector: getConnectorWithoutSecrets(),
   });
   const [isSaving, setIsSaving] = useState<boolean>(false);
   const [selectedTab, setTab] = useState<EditConectorTabs>(tab);
 
   const [hasChanges, setHasChanges] = useState<boolean>(false);
-  const setConnector = (key: string, value: any) => {
-    dispatch({ command: { type: 'setConnector' }, payload: { key, value } });
+
+  const setConnector = (value: any) => {
+    dispatch({ command: { type: 'setConnector' }, payload: { key: 'connector', value } });
   };
 
   const [testExecutionActionParams, setTestExecutionActionParams] = useState<
@@ -101,7 +117,7 @@ export const ConnectorEditFlyout = ({
   );
 
   const closeFlyout = useCallback(() => {
-    setConnector('connector', { ...initialConnector, secrets: {} });
+    setConnector(getConnectorWithoutSecrets());
     setHasChanges(false);
     setTestExecutionResult(none);
     onClose();
@@ -220,7 +236,6 @@ export const ConnectorEditFlyout = ({
   const onSaveClicked = async (closeAfterSave: boolean = true) => {
     if (hasErrors) {
       setConnector(
-        'connector',
         getConnectorWithInvalidatedFields(
           connector,
           configErrors,
@@ -282,7 +297,6 @@ export const ConnectorEditFlyout = ({
             <ActionConnectorForm
               connector={connector}
               errors={connectorErrors}
-              actionTypeName={connector.actionType}
               dispatch={(changes) => {
                 setHasChanges(true);
                 // if the user changes the connector, "forget" the last execution

diff --git a/...rs_actions_ui/public/application/sections/action_connector_form/connector_reducer.test.ts b/...rs_actions_ui/public/application/sections/action_connector_form/connector_reducer.test.ts
@@ -3,11 +3,14 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { connectorReducer } from './connector_reducer';
-import { ActionConnector } from '../../../types';
+import { UserConfiguredActionConnector } from '../../../types';
+import { createConnectorReducer, ConnectorReducer } from './connector_reducer';
 
 describe('connector reducer', () => {
-  let initialConnector: ActionConnector;
+  let initialConnector: UserConfiguredActionConnector<
+    Record<string, unknown>,
+    Record<string, unknown>
+  >;
   beforeAll(() => {
     initialConnector = {
       secrets: {},
@@ -20,6 +23,11 @@ describe('connector reducer', () => {
     };
   });
 
+  const connectorReducer: ConnectorReducer<
+    Record<string, unknown>,
+    Record<string, unknown>
+  > = createConnectorReducer<Record<string, unknown>, Record<string, unknown>>();
+
   test('if property name was changed', () => {
     const updatedConnector = connectorReducer(
       { connector: initialConnector },