[MM-57716] Convert ./components/setting_item.tsx from Class Component to Function Component (#27615)

* refactor: convert setting_item from class to functional component

* fix: removed type casting 'FC'

* fix: fixed failing tests

* fix: made 'max' prop nullable

* fix: revert snapshot file to master

* fix: Update the `useEffect` dependency list to trigger only on `active` prop changes

---------

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

webapp/channels/src/components/setting_item.tsx

@@ -1,11 +1,11 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import type {ReactNode} from 'react';
-import type {ReactNode, RefObject} from 'react';
+import React, {useEffect, useRef} from 'react';
 
-import SettingItemMin from 'components/setting_item_min';
 import type SettingItemMinComponent from 'components/setting_item_min';
+import SettingItemMin from 'components/setting_item_min';
 
 type Props = {
 
@@ -27,7 +27,7 @@ type Props = {
     /**
      * The setting UI when it is maximized (open)
      */
-    max: ReactNode;
+    max?: ReactNode;
 
     // Props to pass through for SettingItemMin
     updateSection: (section: string) => void;
@@ -41,37 +41,42 @@ type Props = {
     collapsedEditButtonWhenDisabled?: ReactNode;
 }
 
-export default class SettingItem extends React.PureComponent<Props> {
+const SettingItem = ({
-    minRef: RefObject<SettingItemMinComponent>;
+    active,
+    areAllSectionsInactive,
+    section,
+    max,
+    updateSection,
+    title,
+    isDisabled,
+    describe,
+    collapsedEditButtonWhenDisabled,
+}: Props) => {
+    const minRef = useRef<SettingItemMinComponent>(null);
 
-    constructor(props: Props) {
+    useEffect(() => {
-        super(props);
-
-        this.minRef = React.createRef();
-    }
-
-    componentDidUpdate(prevProps: Props) {
         // We want to bring back focus to the edit button when the section is opened and then closed along with all sections are closed
-        if (!this.props.active && prevProps.active && this.props.areAllSectionsInactive) {
-            this.minRef.current?.focus();
-        }
-    }
 
-    render() {
+        if (!active && areAllSectionsInactive) {
-        if (this.props.active) {
+            minRef.current?.focus();
-            return this.props.max;
+        }
+    }, [active]);
+
+    if (active) {
+        return <>{max}</>;
     }
 
     return (
         <SettingItemMin
-                ref={this.minRef}
+            ref={minRef}
-                title={this.props.title}
+            title={title}
-                updateSection={this.props.updateSection}
+            updateSection={updateSection}
-                describe={this.props.describe}
+            describe={describe}
-                section={this.props.section}
+            section={section}
-                isDisabled={this.props.isDisabled}
+            isDisabled={isDisabled}
-                collapsedEditButtonWhenDisabled={this.props.collapsedEditButtonWhenDisabled}
+            collapsedEditButtonWhenDisabled={collapsedEditButtonWhenDisabled}
         />
     );
-    }
+};
-}
+
+export default React.memo(SettingItem);

webapp/channels/src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap

@@ -26,7 +26,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
     <div
       className="divider-dark first"
     />
-    <SettingItem
+    <Memo(SettingItem)
       active={false}
       areAllSectionsInactive={false}
       max={null}
@@ -67,7 +67,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
     <div
       className="divider-light"
     />
-    <SettingItem
+    <Memo(SettingItem)
       active={false}
       areAllSectionsInactive={false}
       describe={
@@ -163,7 +163,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
     <div
       className="divider-dark first"
     />
-    <SettingItem
+    <Memo(SettingItem)
       active={false}
       areAllSectionsInactive={false}
       max={null}
@@ -204,7 +204,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
     <div
       className="divider-light"
     />
-    <SettingItem
+    <Memo(SettingItem)
       active={false}
       areAllSectionsInactive={false}
       describe={
@@ -300,7 +300,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
     <div
       className="divider-dark first"
     />
-    <SettingItem
+    <Memo(SettingItem)
       active={false}
       areAllSectionsInactive={false}
       max={null}
@@ -341,7 +341,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
     <div
       className="divider-light"
     />
-    <SettingItem
+    <Memo(SettingItem)
       active={false}
       areAllSectionsInactive={false}
       describe={
@@ -437,7 +437,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
     <div
       className="divider-dark first"
     />
-    <SettingItem
+    <Memo(SettingItem)
       active={false}
       areAllSectionsInactive={false}
       max={null}
@@ -478,7 +478,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
     <div
       className="divider-light"
     />
-    <SettingItem
+    <Memo(SettingItem)
       active={false}
       areAllSectionsInactive={false}
       describe={
@@ -574,7 +574,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
     <div
       className="divider-dark first"
     />
-    <SettingItem
+    <Memo(SettingItem)
       active={false}
       areAllSectionsInactive={false}
       max={null}
@@ -616,7 +616,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
     <div
       className="divider-light"
     />
-    <SettingItem
+    <Memo(SettingItem)
       active={false}
       areAllSectionsInactive={false}
       describe={