[MM-60073] Migrate /components/admin_console/custom_enable_disable_guest_accounts_setting.tsx from class to function component (#27963)

* chore: update to functional component

* chore: add test and fix text

* chore: remove redundant fn

* fix: comments from review

---------

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

webapp/channels/src/components/admin_console/__snapshots__/custom_enable_disable_guest_accounts_setting.test.tsx.snap

@@ -1,99 +1,129 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting initial state with false 1`] = `
-<Fragment>
-  <Memo(BooleanSetting)
-    disabled={false}
-    helpText={
-      <FormattedMarkdownMessage
-        defaultMessage="When true, external guest can be invited to channels within teams. Please see [Permissions Schemes](../user_management/permissions/system_scheme) for which roles can invite guests."
-        id="admin.guest_access.enableDescription"
+exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders correctly when disabled 1`] = `
+<div>
+  <div
+    class="form-group"
+    data-testid="MySetting"
+  >
+    <label
+      class="control-label col-sm-4"
+      for="MySetting"
+    >
+      Enable Guest Access: 
+    </label>
+    <div
+      class="col-sm-8"
+    >
+      <a
+        id="MySetting"
       />
-    }
-    id="MySetting"
-    label={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Enable Guest Access: "
-        id="admin.guest_access.enableTitle"
-      />
-    }
-    onChange={[Function]}
-    setByEnv={false}
-    value={false}
-  />
-  <ConfirmModal
-    confirmButtonClass="btn btn-primary"
-    confirmButtonText={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Save and Disable Guest Access"
-        id="admin.guest_access.disableConfirmButton"
-      />
-    }
-    message={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Disabling guest access will revoke all current Guest Account sessions. Guests will no longer be able to login and new guests cannot be invited into Mattermost. Guest users will be marked as inactive in user lists. Enabling this feature will not reinstate previous guest accounts. Are you sure you wish to remove these users?"
-        id="admin.guest_access.disableConfirmMessage"
-      />
-    }
-    modalClass=""
-    onCancel={[MockFunction]}
-    onConfirm={[Function]}
-    show={false}
-    title={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Save and Disable Guest Access?"
-        id="admin.guest_access.disableConfirmTitle"
-      />
-    }
-  />
-</Fragment>
+      <label
+        class="Label-eIDBis glIJuw"
+      >
+        <input
+          data-testid="MySettingtrue"
+          id="MySettingtrue"
+          name="MySetting"
+          type="radio"
+          value="true"
+        />
+        True
+      </label>
+      <label
+        class="Label-eIDBis glIJuw"
+      >
+        <input
+          checked=""
+          data-testid="MySettingfalse"
+          id="MySettingfalse"
+          name="MySetting"
+          type="radio"
+          value="false"
+        />
+        False
+      </label>
+      <div
+        class="help-text"
+        data-testid="MySettinghelp-text"
+      >
+        <span>
+          When true, external guest can be invited to channels within teams. Please see 
+          <a
+            href="../user_management/permissions/system_scheme"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Permissions Schemes
+          </a>
+           for which roles can invite guests.
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
-exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting initial state with true 1`] = `
-<Fragment>
-  <Memo(BooleanSetting)
-    disabled={false}
-    helpText={
-      <FormattedMarkdownMessage
-        defaultMessage="When true, external guest can be invited to channels within teams. Please see [Permissions Schemes](../user_management/permissions/system_scheme) for which roles can invite guests."
-        id="admin.guest_access.enableDescription"
+exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders correctly when enabled 1`] = `
+<div>
+  <div
+    class="form-group"
+    data-testid="MySetting"
+  >
+    <label
+      class="control-label col-sm-4"
+      for="MySetting"
+    >
+      Enable Guest Access: 
+    </label>
+    <div
+      class="col-sm-8"
+    >
+      <a
+        id="MySetting"
       />
-    }
-    id="MySetting"
-    label={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Enable Guest Access: "
-        id="admin.guest_access.enableTitle"
-      />
-    }
-    onChange={[Function]}
-    setByEnv={false}
-    value={true}
-  />
-  <ConfirmModal
-    confirmButtonClass="btn btn-primary"
-    confirmButtonText={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Save and Disable Guest Access"
-        id="admin.guest_access.disableConfirmButton"
-      />
-    }
-    message={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Disabling guest access will revoke all current Guest Account sessions. Guests will no longer be able to login and new guests cannot be invited into Mattermost. Guest users will be marked as inactive in user lists. Enabling this feature will not reinstate previous guest accounts. Are you sure you wish to remove these users?"
-        id="admin.guest_access.disableConfirmMessage"
-      />
-    }
-    modalClass=""
-    onCancel={[MockFunction]}
-    onConfirm={[Function]}
-    show={false}
-    title={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Save and Disable Guest Access?"
-        id="admin.guest_access.disableConfirmTitle"
-      />
-    }
-  />
-</Fragment>
+      <label
+        class="Label-eIDBis glIJuw"
+      >
+        <input
+          checked=""
+          data-testid="MySettingtrue"
+          id="MySettingtrue"
+          name="MySetting"
+          type="radio"
+          value="true"
+        />
+        True
+      </label>
+      <label
+        class="Label-eIDBis glIJuw"
+      >
+        <input
+          data-testid="MySettingfalse"
+          id="MySettingfalse"
+          name="MySetting"
+          type="radio"
+          value="false"
+        />
+        False
+      </label>
+      <div
+        class="help-text"
+        data-testid="MySettinghelp-text"
+      >
+        <span>
+          When true, external guest can be invited to channels within teams. Please see 
+          <a
+            href="../user_management/permissions/system_scheme"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Permissions Schemes
+          </a>
+           for which roles can invite guests.
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
 `;

webapp/channels/src/components/admin_console/custom_enable_disable_guest_accounts_setting.test.tsx

@@ -1,10 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {shallow} from 'enzyme';
+import {fireEvent, screen} from '@testing-library/react';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import {renderWithContext} from 'tests/react_testing_utils';
+
 import CustomEnableDisableGuestAccountsSetting from './custom_enable_disable_guest_accounts_setting';
 
 describe('components/AdminConsole/CustomEnableDisableGuestAccountsSetting', () => {
@@ -25,61 +27,66 @@ describe('components/AdminConsole/CustomEnableDisableGuestAccountsSetting', () =
         />
     );
 
-    describe('initial state', () => {
-        test('with true', () => {
-            const props = {
-                ...baseProps,
-                value: true,
-            };
-
-            const wrapper = shallow(
-                <CustomEnableDisableGuestAccountsSetting {...props}/>,
+    describe('renders correctly', () => {
+        test('when enabled', () => {
+            const {container} = renderWithContext(
+                <CustomEnableDisableGuestAccountsSetting
+                    {...baseProps}
+                    value={true}
+                />,
             );
-            expect(wrapper).toMatchSnapshot();
+            expect(container).toMatchSnapshot();
         });
 
-        test('with false', () => {
-            const props = {
-                ...baseProps,
-                value: false,
-            };
-
-            const wrapper = shallow(
-                <CustomEnableDisableGuestAccountsSetting {...props}/>,
+        test('when disabled', () => {
+            const {container} = renderWithContext(
+                <CustomEnableDisableGuestAccountsSetting
+                    {...baseProps}
+                    value={false}
+                />,
             );
-            expect(wrapper).toMatchSnapshot();
+            expect(container).toMatchSnapshot();
         });
     });
 
     describe('handleChange', () => {
         test('should enable without show confirmation modal or warning', () => {
             const props = {
-                ...baseProps,
                 showConfirm: true,
                 onChange: jest.fn(),
             };
 
-            const wrapper = shallow<CustomEnableDisableGuestAccountsSetting>(
-                <CustomEnableDisableGuestAccountsSetting {...props}/>,
+            renderWithContext(
+                <CustomEnableDisableGuestAccountsSetting
+                    {...baseProps}
+                    {...props}
+                />,
             );
 
-            wrapper.instance().handleChange('MySetting', true);
-            expect(props.onChange).toBeCalledWith(baseProps.id, true, false, false, '');
+            const trueRadio = screen.getByTestId('MySettingtrue');
+            fireEvent.click(trueRadio);
+
+            expect(props.onChange).toHaveBeenCalledWith(baseProps.id, true, false, false, '');
         });
 
         test('should show confirmation modal and warning when disabling', () => {
             const props = {
-                ...baseProps,
+                value: true,
                 showConfirm: true,
                 onChange: jest.fn(),
             };
 
-            const wrapper = shallow<CustomEnableDisableGuestAccountsSetting>(
-                <CustomEnableDisableGuestAccountsSetting {...props}/>,
+            renderWithContext(
+                <CustomEnableDisableGuestAccountsSetting
+                    {...baseProps}
+                    {...props}
+                />,
             );
 
-            wrapper.instance().handleChange('MySetting', false);
-            expect(props.onChange).toBeCalledWith(baseProps.id, false, true, false, warningMessage);
+            const falseRadio = screen.getByTestId('MySettingfalse');
+            fireEvent.click(falseRadio);
+
+            expect(props.onChange).toHaveBeenCalledWith(baseProps.id, false, true, false, warningMessage);
         });
 
         test('should call onChange with doSubmit = true when confirm is true', () => {
@@ -89,12 +96,19 @@ describe('components/AdminConsole/CustomEnableDisableGuestAccountsSetting', () =
                 showConfirm: true,
             };
 
-            const wrapper = shallow<CustomEnableDisableGuestAccountsSetting>(
-                <CustomEnableDisableGuestAccountsSetting {...props}/>,
+            renderWithContext(
+                <CustomEnableDisableGuestAccountsSetting
+                    {...props}
+                />,
             );
 
-            wrapper.instance().handleChange('MySetting', false, true);
-            expect(props.onChange).toBeCalledWith(baseProps.id, false, true, true, warningMessage);
+            const falseRadio = screen.getByTestId('MySettingfalse');
+            fireEvent.click(falseRadio);
+
+            const confirmButton = screen.getByText('Save and Disable Guest Access');
+            fireEvent.click(confirmButton);
+
+            expect(props.onChange).toHaveBeenCalledWith(baseProps.id, false, true, true, warningMessage);
         });
     });
 });

webapp/channels/src/components/admin_console/custom_enable_disable_guest_accounts_setting.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useCallback} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import ConfirmModal from 'components/confirm_modal';
@@ -19,9 +19,17 @@ type Props = {
     showConfirm: boolean;
 }
 
-export default class CustomEnableDisableGuestAccountsSetting extends React.PureComponent<Props> {
-    public handleChange = (id: string, value: boolean, submit = false) => {
-        const confirmNeeded = value === false; // Requires confirmation if disabling guest accounts
+const CustomEnableDisableGuestAccountsSetting = ({
+    id,
+    value,
+    onChange,
+    cancelSubmit,
+    disabled,
+    setByEnv,
+    showConfirm,
+}: Props) => {
+    const handleChange = useCallback((targetId: string, newValue: boolean, submit = false) => {
+        const confirmNeeded = newValue === false; // Requires confirmation if disabling guest accounts
         let warning: React.ReactNode | string = '';
         if (confirmNeeded) {
             warning = (
@@ -31,61 +39,63 @@ export default class CustomEnableDisableGuestAccountsSetting extends React.PureC
                 />
             );
         }
-        this.props.onChange(id, value, confirmNeeded, submit, warning);
-    };
+        onChange(targetId, newValue, confirmNeeded, submit, warning);
+    }, [onChange]);
 
-    public render() {
-        const label = (
-            <FormattedMessage
-                id='admin.guest_access.enableTitle'
-                defaultMessage='Enable Guest Access: '
-            />
-        );
-        const helpText = (
-            <FormattedMarkdownMessage
-                id='admin.guest_access.enableDescription'
-                defaultMessage='When true, external guest can be invited to channels within teams. Please see [Permissions Schemes](../user_management/permissions/system_scheme) for which roles can invite guests.'
-            />
-        );
+    const handleConfirm = useCallback(() => {
+        handleChange(id, false, true);
+    }, [handleChange, id]);
 
-        return (
-            <>
-                <BooleanSetting
-                    id={this.props.id}
-                    value={this.props.value}
-                    label={label}
-                    helpText={helpText}
-                    setByEnv={this.props.setByEnv}
-                    onChange={this.handleChange}
-                    disabled={this.props.disabled}
-                />
-                <ConfirmModal
-                    show={this.props.showConfirm && (this.props.value === false)}
-                    title={
-                        <FormattedMessage
-                            id='admin.guest_access.disableConfirmTitle'
-                            defaultMessage='Save and Disable Guest Access?'
-                        />
-                    }
-                    message={
-                        <FormattedMessage
-                            id='admin.guest_access.disableConfirmMessage'
-                            defaultMessage='Disabling guest access will revoke all current Guest Account sessions. Guests will no longer be able to login and new guests cannot be invited into Mattermost. Guest users will be marked as inactive in user lists. Enabling this feature will not reinstate previous guest accounts. Are you sure you wish to remove these users?'
-                        />
-                    }
-                    confirmButtonText={
-                        <FormattedMessage
-                            id='admin.guest_access.disableConfirmButton'
-                            defaultMessage='Save and Disable Guest Access'
-                        />
-                    }
-                    onConfirm={() => {
-                        this.handleChange(this.props.id, false, true);
-                        this.setState({showConfirm: false});
-                    }}
-                    onCancel={this.props.cancelSubmit}
-                />
-            </>
-        );
-    }
-}
+    const label = (
+        <FormattedMessage
+            id='admin.guest_access.enableTitle'
+            defaultMessage='Enable Guest Access: '
+        />
+    );
+
+    const helpText = (
+        <FormattedMarkdownMessage
+            id='admin.guest_access.enableDescription'
+            defaultMessage='When true, external guest can be invited to channels within teams. Please see [Permissions Schemes](../user_management/permissions/system_scheme) for which roles can invite guests.'
+        />
+    );
+
+    return (
+        <>
+            <BooleanSetting
+                id={id}
+                value={value}
+                label={label}
+                helpText={helpText}
+                setByEnv={setByEnv}
+                onChange={handleChange}
+                disabled={disabled}
+            />
+            <ConfirmModal
+                show={showConfirm && (value === false)}
+                title={
+                    <FormattedMessage
+                        id='admin.guest_access.disableConfirmTitle'
+                        defaultMessage='Save and Disable Guest Access?'
+                    />
+                }
+                message={
+                    <FormattedMessage
+                        id='admin.guest_access.disableConfirmMessage'
+                        defaultMessage='Disabling guest access will revoke all current Guest Account sessions. Guests will no longer be able to login and new guests cannot be invited into Mattermost. Guest users will be marked as inactive in user lists. Enabling this feature will not reinstate previous guest accounts. Are you sure you wish to remove these users?'
+                    />
+                }
+                confirmButtonText={
+                    <FormattedMessage
+                        id='admin.guest_access.disableConfirmButton'
+                        defaultMessage='Save and Disable Guest Access'
+                    />
+                }
+                onConfirm={handleConfirm}
+                onCancel={cancelSubmit}
+            />
+        </>
+    );
+};
+
+export default CustomEnableDisableGuestAccountsSetting;