From 733fe8b902e420936794972cbef69e8666dfb1ee Mon Sep 17 00:00:00 2001
From: Amir Helali <54836705+Amir-Helali@users.noreply.github.com>
Date: Mon, 8 Apr 2024 07:54:32 -0400
Subject: [PATCH] [MM-56008] Convert
 `./components/widgets/settings/bool_setting.tsx` to functional component
 (#25614)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Updated bool_setting

Converted bool_setting.tsx to a function component. and Updated the test file.

* Delete package-lock.json

* Update bool_setting.tsx

Updated the code to reflect the requested changes

* Fix lint and types

---------

Co-authored-by: Daniel Espino García <larkox@gmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../dialog_element/dialog_element.tsx         |  2 +-
 .../widgets/settings/bool_setting.test.tsx    |  3 +
 .../widgets/settings/bool_setting.tsx         | 77 ++++++++++---------
 3 files changed, 46 insertions(+), 36 deletions(-)

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 7e284a7f6b..2697cb3fc5 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
@@ -204,7 +204,7 @@ export default class DialogElement extends React.PureComponent<Props, State> {
                     label={displayNameContent}
                     value={boolValue || false}
                     helpText={helpTextContent}
-                    placeholder={placeholder}
+                    placeholder={placeholder || ''}
                     onChange={onChange}
                 />
             );
diff --git a/webapp/channels/src/components/widgets/settings/bool_setting.test.tsx b/webapp/channels/src/components/widgets/settings/bool_setting.test.tsx
index da6dffe14e..1c6963206a 100644
--- a/webapp/channels/src/components/widgets/settings/bool_setting.test.tsx
+++ b/webapp/channels/src/components/widgets/settings/bool_setting.test.tsx
@@ -8,12 +8,15 @@ import BoolSetting from './bool_setting';
 
 describe('components/widgets/settings/BoolSetting', () => {
     test('render component with required props', () => {
+        const onChange = jest.fn();
         const wrapper = shallow(
+
             <BoolSetting
                 id='string.id'
                 label='some label'
                 value={true}
                 placeholder='Text aligned with checkbox'
+                onChange={onChange}
             />,
         );
         expect(wrapper).toMatchInlineSnapshot(`
diff --git a/webapp/channels/src/components/widgets/settings/bool_setting.tsx b/webapp/channels/src/components/widgets/settings/bool_setting.tsx
index a776512245..224461a2e0 100644
--- a/webapp/channels/src/components/widgets/settings/bool_setting.tsx
+++ b/webapp/channels/src/components/widgets/settings/bool_setting.tsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import type {ChangeEvent} from 'react';
 import React from 'react';
 
 import Setting from './setting';
@@ -8,49 +9,55 @@ import Setting from './setting';
 type Props = {
     id: string;
     label: React.ReactNode;
-    labelClassName: string;
+    labelClassName?: string;
     helpText?: React.ReactNode;
     placeholder: string;
     value: boolean;
     disabled?: boolean;
-    inputClassName: string;
+    inputClassName?: string;
     onChange(name: string, value: any): void; // value is any since onChange is a common func for inputs and checkboxes
     autoFocus?: boolean;
 }
 
-export default class BoolSetting extends React.PureComponent<Props> {
-    public static defaultProps: Partial<Props> = {
-        labelClassName: '',
-        inputClassName: '',
+const BoolSetting = ({
+    id,
+    label,
+    labelClassName = '',
+    helpText,
+    placeholder,
+    value,
+    disabled,
+    inputClassName = '',
+    onChange,
+    autoFocus,
+}: Props) => {
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        onChange(id, e.target.checked);
     };
 
-    private handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-        this.props.onChange(this.props.id, e.target.checked);
-    };
+    return (
+        <Setting
+            label={label}
+            labelClassName={labelClassName}
+            inputClassName={inputClassName}
+            helpText={helpText}
+            inputId={id}
+        >
+            <div className='checkbox'>
+                <label>
+                    <input
+                        id={id}
+                        disabled={disabled}
+                        autoFocus={autoFocus}
+                        type='checkbox'
+                        checked={value}
+                        onChange={handleChange}
+                    />
+                    <span>{placeholder}</span>
+                </label>
+            </div>
+        </Setting>
+    );
+};
 
-    public render(): JSX.Element {
-        return (
-            <Setting
-                label={this.props.label}
-                labelClassName={this.props.labelClassName}
-                inputClassName={this.props.inputClassName}
-                helpText={this.props.helpText}
-                inputId={this.props.id}
-            >
-                <div className='checkbox'>
-                    <label>
-                        <input
-                            id={this.props.id}
-                            disabled={this.props.disabled}
-                            autoFocus={this.props.autoFocus}
-                            type='checkbox'
-                            checked={this.props.value}
-                            onChange={this.handleChange}
-                        />
-                        <span>{this.props.placeholder}</span>
-                    </label>
-                </div>
-            </Setting>
-        );
-    }
-}
+export default React.memo(BoolSetting);