[MM-54816] Convert ./components/admin_console/color_setting.tsx from Class Component to Function Component (#24963)

* Convert class component to function component

* Apply changes from suggestions

* Lint check

* Update schema_admin_settings.test.jsx.snap

---------

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

webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.jsx.snap

@@ -595,7 +595,7 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
             }
             value={true}
           />
-          <ColorSetting
+          <Memo(ColorSetting)
             disabled={false}
             helpText={
               <SchemaText

webapp/channels/src/components/admin_console/color_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 ColorInput from 'components/color_input';
 
@@ -16,27 +16,27 @@ type Props = {
     disabled?: boolean;
 }
 
-export default class ColorSetting extends React.PureComponent<Props> {
+const ColorSetting = (props: Props) => {
-    private handleChange = (color: string) => {
+    const handleChange = useCallback((color: string) => {
-        if (this.props.onChange) {
+        if (props.onChange) {
-            this.props.onChange(this.props.id, color);
+            props.onChange(props.id, color);
         }
-    };
+    }, [props.id, props.onChange]);
 
-    public render() {
+    return (
-        return (
+        <Setting
-            <Setting
+            label={props.label}
-                label={this.props.label}
+            helpText={props.helpText}
-                helpText={this.props.helpText}
+            inputId={props.id}
-                inputId={this.props.id}
+        >
-            >
+            <ColorInput
-                <ColorInput
+                id={props.id}
-                    id={this.props.id}
+                value={props.value}
-                    value={this.props.value}
+                onChange={handleChange}
-                    onChange={this.handleChange}
+                isDisabled={props.disabled}
-                    isDisabled={this.props.disabled}
+            />
-                />
+        </Setting>
-            </Setting>
+    );
-        );
+};
-    }
+
-}
+export default React.memo(ColorSetting);