Automated cherry pick of #3793 (#3820)

* MM-21632: fix toggling interactive dialog boolean

My fix for MM-17519 broke the /rendering/ of the boolean toggle, but not
the underlying interactive dialog state (and the thrust of the original
issue).

* MM-21683: fix handling of boolean defaults

* unit tests

Co-authored-by: Jesse Hallam <jesse.hallam@gmail.com>

app/screens/interactive_dialog/dialog_element.js

@@ -158,7 +158,7 @@ export default class DialogElement extends PureComponent {
                 <BoolSetting
                     id={name}
                     label={displayName}
-                    value={value === 'true'}
+                    value={Boolean(value)}
                     placeholder={placeholder}
                     helpText={helpText}
                     errorText={errorText}

app/screens/interactive_dialog/dialog_element.test.js

@@ -6,6 +6,7 @@ import {shallow} from 'enzyme';
 
 import Preferences from 'mattermost-redux/constants/preferences';
 import RadioSetting from 'app/components/widgets/settings/radio_setting';
+import BoolSetting from 'app/components/widgets/settings/bool_setting';
 import DialogElement from './dialog_element.js';
 
 describe('DialogElement', () => {
@@ -58,4 +59,42 @@ describe('DialogElement', () => {
             expect(wrapper.find(RadioSetting).find({options: radioOptions, default: radioOptions[1].value}).exists()).toBe(true);
         });
     });
+
+    describe('boolSetting', () => {
+        test('propagates when false', () => {
+            const wrapper = shallow(
+                <DialogElement
+                    {...baseDialogProps}
+                    theme={theme}
+                    type='bool'
+                    value={false}
+                />
+            );
+            expect(wrapper.find(BoolSetting).find({value: false}).exists()).toBe(true);
+        });
+
+        test('propagates when true', () => {
+            const wrapper = shallow(
+                <DialogElement
+                    {...baseDialogProps}
+                    theme={theme}
+                    type='bool'
+                    value={true}
+                />
+            );
+            expect(wrapper.find(BoolSetting).find({value: true}).exists()).toBe(true);
+        });
+
+        test('propagates when null', () => {
+            const wrapper = shallow(
+                <DialogElement
+                    {...baseDialogProps}
+                    theme={theme}
+                    type='bool'
+                    value={null}
+                />
+            );
+            expect(wrapper.find(BoolSetting).find({value: false}).exists()).toBe(true);
+        });
+    });
 });

app/screens/interactive_dialog/interactive_dialog.js

@@ -43,7 +43,11 @@ export default class InteractiveDialog extends PureComponent {
         const values = {};
         if (props.elements != null) {
             props.elements.forEach((e) => {
-                values[e.name] = e.default || null;
+                if (e.type === 'bool') {
+                    values[e.name] = (e.default === true || String(e.default).toLowerCase() === 'true');
+                } else {
+                    values[e.name] = e.default || null;
+                }
             });
         }
 

app/screens/interactive_dialog/interactive_dialog.test.js

@@ -8,6 +8,7 @@ import Preferences from 'mattermost-redux/constants/preferences';
 import InteractiveDialog from './interactive_dialog';
 
 import ErrorText from 'app/components/error_text';
+import DialogElement from 'app/screens/interactive_dialog/dialog_element';
 
 describe('InteractiveDialog', () => {
     const baseProps = {
@@ -177,4 +178,48 @@ describe('InteractiveDialog', () => {
             expect(wrapper.instance().scrollView.current.scrollTo).not.toHaveBeenCalled();
         });
     });
+
+    describe('bool element should handle', () => {
+        const element = {
+            data_source: '',
+            display_name: 'Boolean Selector',
+            name: 'somebool',
+            optional: false,
+            type: 'bool',
+            placeholder: 'Subscribe?',
+        };
+        const {elements, ...rest} = baseProps;
+        const props = {
+            ...rest,
+            elements: [
+                ...elements,
+                element,
+            ],
+        };
+
+        const testCases = [
+            {description: 'no default', expectedChecked: false},
+            {description: 'unknown default', default: 'unknown', expectedChecked: false},
+            {description: 'default of "false"', default: 'false', expectedChecked: false},
+            {description: 'default of true', default: true, expectedChecked: true},
+            {description: 'default of "true"', default: 'True', expectedChecked: true},
+            {description: 'default of "True"', default: 'True', expectedChecked: true},
+            {description: 'default of "TRUE"', default: 'TRUE', expectedChecked: true},
+        ];
+
+        testCases.forEach((testCase) => test(`should interpret ${testCase.description}`, () => {
+            if (testCase.default === undefined) {
+                delete element.default;
+            } else {
+                element.default = testCase.default;
+            }
+
+            const wrapper = shallow(
+                <InteractiveDialog {...props}/>
+            );
+            wrapper.instance().scrollView = {current: {scrollTo: jest.fn()}};
+
+            expect(wrapper.find(DialogElement).at(1).props().value).toBe(testCase.expectedChecked);
+        }));
+    });
 });