[MM-54858] Can't set 0 to a dialog element with subtype=number in interactive dialog (#24916)

* fix: avoid considering 0 as falsy value

* refactor: simplify value assertion

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/interactive_dialog/dialog_element/dialog_element.test.tsx

@@ -33,6 +33,32 @@ describe('components/interactive_dialog/DialogElement', () => {
         expect(wrapper.find(TextSetting).props().type).toEqual('text');
     });
 
+    describe('subtype number', () => {
+        test('value is 0', () => {
+            const wrapper = shallow(
+                <DialogElement
+                    {...baseDialogProps}
+                    type='text'
+                    subtype='number'
+                    value={0}
+                />,
+            );
+            expect(wrapper.find(TextSetting).props().value).toEqual(0);
+        });
+
+        test('value is 123', () => {
+            const wrapper = shallow(
+                <DialogElement
+                    {...baseDialogProps}
+                    type='text'
+                    subtype='number'
+                    value={123}
+                />,
+            );
+            expect(wrapper.find(TextSetting).props().value).toEqual(123);
+        });
+    });
+
     it('subtype email', () => {
         const wrapper = shallow(
             <DialogElement

webapp/channels/src/components/interactive_dialog/dialog_element/dialog_element.tsx

@@ -39,7 +39,7 @@ export type Props = {
         text: string;
         value: string;
     }>;
-    value?: string | boolean;
+    value?: string | number | boolean;
     onChange: (name: string, selected: string) => void;
     autoFocus?: boolean;
     actions: {
@@ -163,7 +163,13 @@ export default class DialogElement extends React.PureComponent<Props, State> {
                 textSettingMaxLength = maxLength || TEXTAREA_DEFAULT_MAX_LENGTH;
             }
 
-            const textValue = value as string;
+            let assertedValue;
+            if (subtype === 'number' && typeof value === 'number') {
+                assertedValue = value as number;
+            } else {
+                assertedValue = value as string || '';
+            }
+
             return (
                 <TextSetting
                     autoFocus={this.props.autoFocus}
@@ -171,7 +177,7 @@ export default class DialogElement extends React.PureComponent<Props, State> {
                     type={subtype as InputTypes || 'text'}
                     label={displayNameContent}
                     maxLength={textSettingMaxLength}
-                    value={textValue || ''}
+                    value={assertedValue}
                     placeholder={placeholder}
                     helpText={helpTextContent}
                     onChange={onChange}

webapp/channels/src/packages/mattermost-redux/src/utils/integration_utils.test.ts

@@ -23,6 +23,10 @@ describe('integration utils', () => {
             expect(checkDialogElementForError(TestHelper.getDialogElementMock({type: 'text', min_length: 5}), '123')!.id).toBe('interactive_dialog.error.too_short');
         });
 
+        it('should return null on 0', () => {
+            expect(checkDialogElementForError(TestHelper.getDialogElementMock({type: 'text', subtype: 'number'}), 0)).toBe(null);
+        });
+
         it('should return null on good number element', () => {
             expect(checkDialogElementForError(TestHelper.getDialogElementMock({type: 'text', subtype: 'number'}), '123')).toBe(null);
         });

webapp/channels/src/packages/mattermost-redux/src/utils/integration_utils.ts

@@ -9,7 +9,7 @@ type DialogError = {
     values?: any;
 };
 export function checkDialogElementForError(elem: DialogElement, value: any): DialogError | undefined | null {
-    if (!value && !elem.optional) {
+    if ((!value && value !== 0) && !elem.optional) {
         return {
             id: 'interactive_dialog.error.required',
             defaultMessage: 'This field is required.',