From 165b5ea82169e0ba8976be7dba89787880a12509 Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi
 <88369802+Syed-Ali-Abbas-Zaidi@users.noreply.github.com>
Date: Fri, 12 Apr 2024 02:54:35 +0500
Subject: [PATCH] [MM-57709] Convert
 `./components/channel_select/channel_select.tsx` from Class Component to
 Function Component (#26718)

---
 .../channel_select/channel_select.tsx         | 122 ++++++++++--------
 .../abstract_incoming_hook.test.tsx.snap      |  12 +-
 .../abstract_outgoing_webhook.test.tsx.snap   |   2 +-
 3 files changed, 74 insertions(+), 62 deletions(-)

diff --git a/webapp/channels/src/components/channel_select/channel_select.tsx b/webapp/channels/src/components/channel_select/channel_select.tsx
index ba79b1c6f7..740f411200 100644
--- a/webapp/channels/src/components/channel_select/channel_select.tsx
+++ b/webapp/channels/src/components/channel_select/channel_select.tsx
@@ -1,13 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {memo} from 'react';
 import type {ChangeEventHandler} from 'react';
+import {useIntl} from 'react-intl';
 
 import type {Channel} from '@mattermost/types/channels';
 
 import Constants from 'utils/constants';
-import * as Utils from 'utils/utils';
 
 type Props = {
     channels: Channel[];
@@ -18,58 +18,70 @@ type Props = {
     selectDm: boolean;
 };
 
-export default class ChannelSelect extends React.PureComponent<Props> {
-    render(): JSX.Element {
-        const options = [
-            <option
-                key=''
-                value=''
-            >
-                {Utils.localizeMessage('channel_select.placeholder', '--- Select a channel ---')}
-            </option>,
-        ];
+const ChannelSelect = ({
+    channels,
+    selectOpen,
+    selectPrivate,
+    selectDm,
+    value,
+    onChange,
+}: Props) => {
+    const intl = useIntl();
 
-        this.props.channels.forEach((channel: Channel) => {
-            const channelName = channel.display_name || channel.name;
-            if (channel.type === Constants.OPEN_CHANNEL && this.props.selectOpen) {
-                options.push(
-                    <option
-                        key={channel.id}
-                        value={channel.id}
-                    >
-                        {channelName}
-                    </option>,
-                );
-            } else if (channel.type === Constants.PRIVATE_CHANNEL && this.props.selectPrivate) {
-                options.push(
-                    <option
-                        key={channel.id}
-                        value={channel.id}
-                    >
-                        {channelName}
-                    </option>,
-                );
-            } else if (channel.type === Constants.DM_CHANNEL && this.props.selectDm) {
-                options.push(
-                    <option
-                        key={channel.id}
-                        value={channel.id}
-                    >
-                        {channelName}
-                    </option>,
-                );
-            }
-        });
+    const options = [
+        <option
+            key=''
+            value=''
+        >
+            {intl.formatMessage({
+                id: 'channel_select.placeholder',
+                defaultMessage: '--- Select a channel ---',
+            })}
+        </option>,
+    ];
 
-        return (
-            <select
-                className='form-control'
-                value={this.props.value}
-                onChange={this.props.onChange}
-                id='channelSelect'
-            >
-                {options}
-            </select>
-        );
-    }
-}
+    channels.forEach((channel: Channel) => {
+        const channelName = channel.display_name || channel.name;
+        if (channel.type === Constants.OPEN_CHANNEL && selectOpen) {
+            options.push(
+                <option
+                    key={channel.id}
+                    value={channel.id}
+                >
+                    {channelName}
+                </option>,
+            );
+        } else if (channel.type === Constants.PRIVATE_CHANNEL && selectPrivate) {
+            options.push(
+                <option
+                    key={channel.id}
+                    value={channel.id}
+                >
+                    {channelName}
+                </option>,
+            );
+        } else if (channel.type === Constants.DM_CHANNEL && selectDm) {
+            options.push(
+                <option
+                    key={channel.id}
+                    value={channel.id}
+                >
+                    {channelName}
+                </option>,
+            );
+        }
+    });
+
+    return (
+        <select
+            className='form-control'
+            value={value}
+            onChange={onChange}
+            id='channelSelect'
+        >
+            {options}
+        </select>
+    );
+};
+
+export default memo(ChannelSelect);
diff --git a/webapp/channels/src/components/integrations/__snapshots__/abstract_incoming_hook.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/abstract_incoming_hook.test.tsx.snap
index 9a1bf54117..5d0515d4c4 100644
--- a/webapp/channels/src/components/integrations/__snapshots__/abstract_incoming_hook.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/__snapshots__/abstract_incoming_hook.test.tsx.snap
@@ -106,7 +106,7 @@ exports[`components/integrations/AbstractIncomingWebhook should call action func
         <div
           className="col-md-5 col-sm-8"
         >
-          <Connect(ChannelSelect)
+          <Connect(Component)
             onChange={[Function]}
             selectDm={false}
             selectOpen={true}
@@ -367,7 +367,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot 1
         <div
           className="col-md-5 col-sm-8"
         >
-          <Connect(ChannelSelect)
+          <Connect(Component)
             onChange={[Function]}
             selectDm={false}
             selectOpen={true}
@@ -628,7 +628,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
         <div
           className="col-md-5 col-sm-8"
         >
-          <Connect(ChannelSelect)
+          <Connect(Component)
             onChange={[Function]}
             selectDm={false}
             selectOpen={true}
@@ -892,7 +892,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
         <div
           className="col-md-5 col-sm-8"
         >
-          <Connect(ChannelSelect)
+          <Connect(Component)
             onChange={[Function]}
             selectDm={false}
             selectOpen={true}
@@ -1120,7 +1120,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
         <div
           className="col-md-5 col-sm-8"
         >
-          <Connect(ChannelSelect)
+          <Connect(Component)
             onChange={[Function]}
             selectDm={false}
             selectOpen={true}
@@ -1348,7 +1348,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
         <div
           className="col-md-5 col-sm-8"
         >
-          <Connect(ChannelSelect)
+          <Connect(Component)
             onChange={[Function]}
             selectDm={false}
             selectOpen={true}
diff --git a/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap b/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap
index 32ab9a3636..f39b321245 100644
--- a/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/__snapshots__/abstract_outgoing_webhook.test.tsx.snap
@@ -163,7 +163,7 @@ exports[`components/integrations/AbstractOutgoingWebhook should match snapshot 1
         <div
           className="col-md-5 col-sm-8"
         >
-          <Connect(ChannelSelect)
+          <Connect(Component)
             onChange={[Function]}
             selectDm={false}
             selectOpen={true}