[MM-57709] Convert ./components/channel_select/channel_select.tsx from Class Component to Function Component (#26718)

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> {
+const ChannelSelect = ({
-    render(): JSX.Element {
+    channels,
-        const options = [
+    selectOpen,
-            <option
+    selectPrivate,
-                key=''
+    selectDm,
-                value=''
+    value,
-            >
+    onChange,
-                {Utils.localizeMessage('channel_select.placeholder', '--- Select a channel ---')}
+}: Props) => {
-            </option>,
+    const intl = useIntl();
-        ];
 
-        this.props.channels.forEach((channel: Channel) => {
+    const options = [
-            const channelName = channel.display_name || channel.name;
+        <option
-            if (channel.type === Constants.OPEN_CHANNEL && this.props.selectOpen) {
+            key=''
-                options.push(
+            value=''
-                    <option
+        >
-                        key={channel.id}
+            {intl.formatMessage({
-                        value={channel.id}
+                id: 'channel_select.placeholder',
-                    >
+                defaultMessage: '--- Select a channel ---',
-                        {channelName}
+            })}
-                    </option>,
+        </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>,
-                );
-            }
-        });
 
-        return (
+    channels.forEach((channel: Channel) => {
-            <select
+        const channelName = channel.display_name || channel.name;
-                className='form-control'
+        if (channel.type === Constants.OPEN_CHANNEL && selectOpen) {
-                value={this.props.value}
+            options.push(
-                onChange={this.props.onChange}
+                <option
-                id='channelSelect'
+                    key={channel.id}
-            >
+                    value={channel.id}
-                {options}
+                >
-            </select>
+                    {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);

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}

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}