From 2f86b1ffd7b62dafb6655f46b5e89f2ffe52cd95 Mon Sep 17 00:00:00 2001
From: Rohit Chaudhari <100275369+rohitkbc@users.noreply.github.com>
Date: Mon, 6 Nov 2023 17:12:55 +0530
Subject: [PATCH] [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>
---
 .../schema_admin_settings.test.jsx.snap       |  2 +-
 .../admin_console/color_setting.tsx           | 46 +++++++++----------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.jsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.jsx.snap
index 1d62288a04..46dda51255 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.jsx.snap
+++ b/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
diff --git a/webapp/channels/src/components/admin_console/color_setting.tsx b/webapp/channels/src/components/admin_console/color_setting.tsx
index 54af4466d8..66b91111ba 100644
--- a/webapp/channels/src/components/admin_console/color_setting.tsx
+++ b/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> {
-    private handleChange = (color: string) => {
-        if (this.props.onChange) {
-            this.props.onChange(this.props.id, color);
+const ColorSetting = (props: Props) => {
+    const handleChange = useCallback((color: string) => {
+        if (props.onChange) {
+            props.onChange(props.id, color);
         }
-    };
+    }, [props.id, props.onChange]);
 
-    public render() {
-        return (
-            <Setting
-                label={this.props.label}
-                helpText={this.props.helpText}
-                inputId={this.props.id}
-            >
-                <ColorInput
-                    id={this.props.id}
-                    value={this.props.value}
-                    onChange={this.handleChange}
-                    isDisabled={this.props.disabled}
-                />
-            </Setting>
-        );
-    }
-}
+    return (
+        <Setting
+            label={props.label}
+            helpText={props.helpText}
+            inputId={props.id}
+        >
+            <ColorInput
+                id={props.id}
+                value={props.value}
+                onChange={handleChange}
+                isDisabled={props.disabled}
+            />
+        </Setting>
+    );
+};
+
+export default React.memo(ColorSetting);