[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`] = `
+exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders correctly when disabled 1`] = `
-<Fragment>
+<div>
-  <Memo(BooleanSetting)
+  <div
-    disabled={false}
+    class="form-group"
-    helpText={
+    data-testid="MySetting"
-      <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."
+    <label
-        id="admin.guest_access.enableDescription"
+      class="control-label col-sm-4"
-      />
+      for="MySetting"
-    }
+    >
+      Enable Guest Access: 
+    </label>
+    <div
+      class="col-sm-8"
+    >
+      <a
         id="MySetting"
-    label={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Enable Guest Access: "
-        id="admin.guest_access.enableTitle"
       />
-    }
+      <label
-    onChange={[Function]}
+        class="Label-eIDBis glIJuw"
-    setByEnv={false}
+      >
-    value={false}
+        <input
+          data-testid="MySettingtrue"
+          id="MySettingtrue"
+          name="MySetting"
+          type="radio"
+          value="true"
         />
-  <ConfirmModal
+        True
-    confirmButtonClass="btn btn-primary"
+      </label>
-    confirmButtonText={
+      <label
-      <Memo(MemoizedFormattedMessage)
+        class="Label-eIDBis glIJuw"
-        defaultMessage="Save and Disable Guest Access"
+      >
-        id="admin.guest_access.disableConfirmButton"
+        <input
+          checked=""
+          data-testid="MySettingfalse"
+          id="MySettingfalse"
+          name="MySetting"
+          type="radio"
+          value="false"
         />
-    }
+        False
-    message={
+      </label>
-      <Memo(MemoizedFormattedMessage)
+      <div
-        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?"
+        class="help-text"
-        id="admin.guest_access.disableConfirmMessage"
+        data-testid="MySettinghelp-text"
-      />
+      >
-    }
+        <span>
-    modalClass=""
+          When true, external guest can be invited to channels within teams. Please see 
-    onCancel={[MockFunction]}
+          <a
-    onConfirm={[Function]}
+            href="../user_management/permissions/system_scheme"
-    show={false}
+            rel="noopener noreferrer"
-    title={
+            target="_blank"
-      <Memo(MemoizedFormattedMessage)
+          >
-        defaultMessage="Save and Disable Guest Access?"
+            Permissions Schemes
-        id="admin.guest_access.disableConfirmTitle"
+          </a>
-      />
+           for which roles can invite guests.
-    }
+        </span>
-  />
+      </div>
-</Fragment>
+    </div>
+  </div>
+</div>
 `;
 
-exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting initial state with true 1`] = `
+exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders correctly when enabled 1`] = `
-<Fragment>
+<div>
-  <Memo(BooleanSetting)
+  <div
-    disabled={false}
+    class="form-group"
-    helpText={
+    data-testid="MySetting"
-      <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."
+    <label
-        id="admin.guest_access.enableDescription"
+      class="control-label col-sm-4"
-      />
+      for="MySetting"
-    }
+    >
+      Enable Guest Access: 
+    </label>
+    <div
+      class="col-sm-8"
+    >
+      <a
         id="MySetting"
-    label={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="Enable Guest Access: "
-        id="admin.guest_access.enableTitle"
       />
-    }
+      <label
-    onChange={[Function]}
+        class="Label-eIDBis glIJuw"
-    setByEnv={false}
+      >
-    value={true}
+        <input
+          checked=""
+          data-testid="MySettingtrue"
+          id="MySettingtrue"
+          name="MySetting"
+          type="radio"
+          value="true"
         />
-  <ConfirmModal
+        True
-    confirmButtonClass="btn btn-primary"
+      </label>
-    confirmButtonText={
+      <label
-      <Memo(MemoizedFormattedMessage)
+        class="Label-eIDBis glIJuw"
-        defaultMessage="Save and Disable Guest Access"
+      >
-        id="admin.guest_access.disableConfirmButton"
+        <input
+          data-testid="MySettingfalse"
+          id="MySettingfalse"
+          name="MySetting"
+          type="radio"
+          value="false"
         />
-    }
+        False
-    message={
+      </label>
-      <Memo(MemoizedFormattedMessage)
+      <div
-        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?"
+        class="help-text"
-        id="admin.guest_access.disableConfirmMessage"
+        data-testid="MySettinghelp-text"
-      />
+      >
-    }
+        <span>
-    modalClass=""
+          When true, external guest can be invited to channels within teams. Please see 
-    onCancel={[MockFunction]}
+          <a
-    onConfirm={[Function]}
+            href="../user_management/permissions/system_scheme"
-    show={false}
+            rel="noopener noreferrer"
-    title={
+            target="_blank"
-      <Memo(MemoizedFormattedMessage)
+          >
-        defaultMessage="Save and Disable Guest Access?"
+            Permissions Schemes
-        id="admin.guest_access.disableConfirmTitle"
+          </a>
-      />
+           for which roles can invite guests.
-    }
+        </span>
-  />
+      </div>
-</Fragment>
+    </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', () => {
+    describe('renders correctly', () => {
-        test('with true', () => {
+        test('when enabled', () => {
-            const props = {
+            const {container} = renderWithContext(
-                ...baseProps,
+                <CustomEnableDisableGuestAccountsSetting
-                value: true,
+                    {...baseProps}
-            };
+                    value={true}
-
+                />,
-            const wrapper = shallow(
-                <CustomEnableDisableGuestAccountsSetting {...props}/>,
             );
-            expect(wrapper).toMatchSnapshot();
+            expect(container).toMatchSnapshot();
         });
 
-        test('with false', () => {
+        test('when disabled', () => {
-            const props = {
+            const {container} = renderWithContext(
-                ...baseProps,
+                <CustomEnableDisableGuestAccountsSetting
-                value: false,
+                    {...baseProps}
-            };
+                    value={false}
-
+                />,
-            const wrapper = shallow(
-                <CustomEnableDisableGuestAccountsSetting {...props}/>,
             );
-            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>(
+            renderWithContext(
-                <CustomEnableDisableGuestAccountsSetting {...props}/>,
+                <CustomEnableDisableGuestAccountsSetting
+                    {...baseProps}
+                    {...props}
+                />,
             );
 
-            wrapper.instance().handleChange('MySetting', true);
+            const trueRadio = screen.getByTestId('MySettingtrue');
-            expect(props.onChange).toBeCalledWith(baseProps.id, true, false, false, '');
+            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>(
+            renderWithContext(
-                <CustomEnableDisableGuestAccountsSetting {...props}/>,
+                <CustomEnableDisableGuestAccountsSetting
+                    {...baseProps}
+                    {...props}
+                />,
             );
 
-            wrapper.instance().handleChange('MySetting', false);
+            const falseRadio = screen.getByTestId('MySettingfalse');
-            expect(props.onChange).toBeCalledWith(baseProps.id, false, true, false, warningMessage);
+            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>(
+            renderWithContext(
-                <CustomEnableDisableGuestAccountsSetting {...props}/>,
+                <CustomEnableDisableGuestAccountsSetting
+                    {...props}
+                />,
             );
 
-            wrapper.instance().handleChange('MySetting', false, true);
+            const falseRadio = screen.getByTestId('MySettingfalse');
-            expect(props.onChange).toBeCalledWith(baseProps.id, false, true, true, warningMessage);
+            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> {
+const CustomEnableDisableGuestAccountsSetting = ({
-    public handleChange = (id: string, value: boolean, submit = false) => {
+    id,
-        const confirmNeeded = value === false; // Requires confirmation if disabling guest accounts
+    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,16 +39,20 @@ export default class CustomEnableDisableGuestAccountsSetting extends React.PureC
                 />
             );
         }
-        this.props.onChange(id, value, confirmNeeded, submit, warning);
+        onChange(targetId, newValue, confirmNeeded, submit, warning);
-    };
+    }, [onChange]);
+
+    const handleConfirm = useCallback(() => {
+        handleChange(id, false, true);
+    }, [handleChange, id]);
 
-    public render() {
     const label = (
         <FormattedMessage
             id='admin.guest_access.enableTitle'
             defaultMessage='Enable Guest Access: '
         />
     );
+
     const helpText = (
         <FormattedMarkdownMessage
             id='admin.guest_access.enableDescription'
@@ -51,16 +63,16 @@ export default class CustomEnableDisableGuestAccountsSetting extends React.PureC
     return (
         <>
             <BooleanSetting
-                    id={this.props.id}
+                id={id}
-                    value={this.props.value}
+                value={value}
                 label={label}
                 helpText={helpText}
-                    setByEnv={this.props.setByEnv}
+                setByEnv={setByEnv}
-                    onChange={this.handleChange}
+                onChange={handleChange}
-                    disabled={this.props.disabled}
+                disabled={disabled}
             />
             <ConfirmModal
-                    show={this.props.showConfirm && (this.props.value === false)}
+                show={showConfirm && (value === false)}
                 title={
                     <FormattedMessage
                         id='admin.guest_access.disableConfirmTitle'
@@ -79,13 +91,11 @@ export default class CustomEnableDisableGuestAccountsSetting extends React.PureC
                         defaultMessage='Save and Disable Guest Access'
                     />
                 }
-                    onConfirm={() => {
+                onConfirm={handleConfirm}
-                        this.handleChange(this.props.id, false, true);
+                onCancel={cancelSubmit}
-                        this.setState({showConfirm: false});
-                    }}
-                    onCancel={this.props.cancelSubmit}
             />
         </>
     );
-    }
+};
-}
+
+export default CustomEnableDisableGuestAccountsSetting;