From 654669aa003d341ef528b955554e00531c51b3ee Mon Sep 17 00:00:00 2001
From: Yusuke Nemoto <kaakaa@users.noreply.github.com>
Date: Tue, 17 Oct 2023 19:57:03 +0900
Subject: [PATCH] [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>
---
 .../dialog_element/dialog_element.test.tsx    | 26 +++++++++++++++++++
 .../dialog_element/dialog_element.tsx         | 12 ++++++---
 .../src/utils/integration_utils.test.ts       |  4 +++
 .../src/utils/integration_utils.ts            |  2 +-
 4 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/webapp/channels/src/components/interactive_dialog/dialog_element/dialog_element.test.tsx b/webapp/channels/src/components/interactive_dialog/dialog_element/dialog_element.test.tsx
index 8d48f349ca..ed5c32434c 100644
--- a/webapp/channels/src/components/interactive_dialog/dialog_element/dialog_element.test.tsx
+++ b/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
diff --git a/webapp/channels/src/components/interactive_dialog/dialog_element/dialog_element.tsx b/webapp/channels/src/components/interactive_dialog/dialog_element/dialog_element.tsx
index 3e9aa52791..2edf5b0141 100644
--- a/webapp/channels/src/components/interactive_dialog/dialog_element/dialog_element.tsx
+++ b/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}
diff --git a/webapp/channels/src/packages/mattermost-redux/src/utils/integration_utils.test.ts b/webapp/channels/src/packages/mattermost-redux/src/utils/integration_utils.test.ts
index 070d3fa31e..3f4e1c58e6 100644
--- a/webapp/channels/src/packages/mattermost-redux/src/utils/integration_utils.test.ts
+++ b/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);
         });
diff --git a/webapp/channels/src/packages/mattermost-redux/src/utils/integration_utils.ts b/webapp/channels/src/packages/mattermost-redux/src/utils/integration_utils.ts
index c92543bc0b..34be2f5631 100644
--- a/webapp/channels/src/packages/mattermost-redux/src/utils/integration_utils.ts
+++ b/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.',