feat: allow to inject errors to during PollComposer field updates (#1527)

Allow to inject errors generated outside the PollComposer state
middleware chain so that platform native data (browser event data) can
be reflected in platform agnostic manager state.

Author: MartinCupela

src/messageComposer/middleware/pollComposer/state.ts

@@ -31,6 +31,10 @@ export const pollStateChangeValidators: Partial<
   max_votes_allowed: ({ data, value }) => {
     if (data.enforce_unique_vote && value)
       return { max_votes_allowed: 'Enforce unique vote is enabled' };
+    const numericMatch = value.match(/^[0-9]+$/);
+    if (!numericMatch && value) {
+      return { max_votes_allowed: 'Only numbers are allowed' };
+    }
     if (value?.length > 1 && !value.match(VALID_MAX_VOTES_VALUE_REGEX))
       return { max_votes_allowed: 'Type a number from 2 to 10' };
     return { max_votes_allowed: undefined };
@@ -225,7 +229,7 @@ export const createPollComposerStateMiddleware = ({
         forward,
       }: MiddlewareHandlerParams<PollComposerStateChangeMiddlewareValue>) => {
         if (!state.targetFields) return forward();
-        const { previousState } = state;
+        const { previousState, injectedFieldErrors } = state;
         const finalValidators = {
           ...pollStateChangeValidators,
           ...defaultPollFieldChangeEventValidators,
@@ -247,7 +251,7 @@ export const createPollComposerStateMiddleware = ({
           nextState: {
             ...previousState,
             data: { ...previousState.data, ...newData },
-            errors: { ...previousState.errors, ...newErrors },
+            errors: { ...previousState.errors, ...newErrors, ...injectedFieldErrors },
           },
         });
       },
@@ -275,7 +279,11 @@ export const createPollComposerStateMiddleware = ({
           nextState: {
             ...previousState,
             data: { ...previousState.data, ...newData },
-            errors: { ...previousState.errors, ...newErrors },
+            errors: {
+              ...previousState.errors,
+              ...newErrors,
+              ...state.injectedFieldErrors,
+            },
           },
         });
       },

src/messageComposer/middleware/pollComposer/types.ts

@@ -60,6 +60,7 @@ export type PollComposerStateChangeMiddlewareValue = {
       ? PollComposerOptionUpdate
       : PollComposerState['data'][K];
   }>;
+  injectedFieldErrors?: PollComposerFieldErrors;
 };
 
 export type PollComposerStateMiddlewareValue =

src/messageComposer/pollComposer.ts

@@ -7,7 +7,11 @@ import { StateStore } from '../store';
 import { VotingVisibility } from '../types';
 import { generateUUIDv4 } from '../utils';
 import type { MessageComposer } from './messageComposer';
-import type { PollComposerState, UpdateFieldsData } from './middleware/pollComposer';
+import type {
+  PollComposerFieldErrors,
+  PollComposerState,
+  UpdateFieldsData,
+} from './middleware/pollComposer';
 
 export type PollComposerOptions = {
   composer: MessageComposer;
@@ -102,13 +106,23 @@ export class PollComposer {
     this.state.next(this.initialState);
   };
 
-  updateFields = async (data: UpdateFieldsData) => {
+  /**
+   * Updates specified fields and generates relevant errors
+   * @param data
+   * @param injectedFieldErrors - errors produced externally that will take precedence over the errors generated in the middleware chaing
+   */
+  // FIXME: change method params to a single object with the next major release
+  updateFields = async (
+    data: UpdateFieldsData,
+    injectedFieldErrors?: PollComposerFieldErrors,
+  ) => {
     const { state, status } = await this.stateMiddlewareExecutor.execute({
       eventName: 'handleFieldChange',
       initialValue: {
         nextState: { ...this.state.getLatestValue() },
         previousState: { ...this.state.getLatestValue() },
         targetFields: data,
+        injectedFieldErrors,
       },
     });
 

test/unit/MessageComposer/middleware/pollComposer/state.test.ts

@@ -96,7 +96,9 @@ describe('PollComposerStateMiddleware', () => {
         }),
       );
 
-      expect(result.state.nextState.errors.max_votes_allowed).toBeDefined();
+      expect(result.state.nextState.errors.max_votes_allowed).toBe(
+        'Enforce unique vote is enabled',
+      );
       expect(result.state.nextState.data.max_votes_allowed).toBe('5');
       expect(result.status).toBeUndefined;
     });
@@ -275,6 +277,32 @@ describe('PollComposerStateMiddleware', () => {
       expect(result.state.nextState.errors.options).toEqual({ x: 'failed option X' });
       expect(result.status).toBeUndefined;
     });
+
+    it('should override internally generated errors with injected errors', async () => {
+      const stateMiddleware = setup();
+      const result = await stateMiddleware.handlers.handleFieldChange(
+        setupHandlerParams({
+          nextState: {
+            ...getInitialState(),
+            data: { ...getInitialState().data, enforce_unique_vote: false },
+          },
+          previousState: {
+            ...getInitialState(),
+            data: { ...getInitialState().data, enforce_unique_vote: false },
+          },
+          targetFields: { max_votes_allowed: '5' }, // Valid value (between 2 and 10)
+          injectedFieldErrors: {
+            max_votes_allowed: 'Injected error message',
+          },
+        }),
+      );
+
+      expect(result.state.nextState.errors.max_votes_allowed).toBe(
+        'Injected error message',
+      );
+      expect(result.state.nextState.data.max_votes_allowed).toBe('5');
+      expect(result.status).toBeUndefined;
+    });
   });
 
   describe('handleFieldBlur', () => {
@@ -407,4 +435,30 @@ describe('PollComposerStateMiddleware', () => {
       expect(result.status).toBeUndefined;
     });
   });
+
+  it('should override internally generated errors with injected errors', async () => {
+    const stateMiddleware = setup();
+    const result = await stateMiddleware.handlers.handleFieldBlur(
+      setupHandlerParams({
+        nextState: {
+          ...getInitialState(),
+          data: { ...getInitialState().data, enforce_unique_vote: false },
+        },
+        previousState: {
+          ...getInitialState(),
+          data: { ...getInitialState().data, enforce_unique_vote: false },
+        },
+        targetFields: { max_votes_allowed: '5' }, // Valid value (between 2 and 10)
+        injectedFieldErrors: {
+          max_votes_allowed: 'Injected error message',
+        },
+      }),
+    );
+
+    expect(result.state.nextState.errors.max_votes_allowed).toBe(
+      'Injected error message',
+    );
+    expect(result.state.nextState.data.max_votes_allowed).toBe('5');
+    expect(result.status).toBeUndefined;
+  });
 });