[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,20 +18,31 @@ type Props = {
     selectDm: boolean;
 };
 
-export default class ChannelSelect extends React.PureComponent<Props> {
+const ChannelSelect = ({
-    render(): JSX.Element {
+    channels,
+    selectOpen,
+    selectPrivate,
+    selectDm,
+    value,
+    onChange,
+}: Props) => {
+    const intl = useIntl();
+
     const options = [
         <option
             key=''
             value=''
         >
-                {Utils.localizeMessage('channel_select.placeholder', '--- Select a channel ---')}
+            {intl.formatMessage({
+                id: 'channel_select.placeholder',
+                defaultMessage: '--- Select a channel ---',
+            })}
         </option>,
     ];
 
-        this.props.channels.forEach((channel: Channel) => {
+    channels.forEach((channel: Channel) => {
         const channelName = channel.display_name || channel.name;
-            if (channel.type === Constants.OPEN_CHANNEL && this.props.selectOpen) {
+        if (channel.type === Constants.OPEN_CHANNEL && selectOpen) {
             options.push(
                 <option
                     key={channel.id}
@@ -40,7 +51,7 @@ export default class ChannelSelect extends React.PureComponent<Props> {
                     {channelName}
                 </option>,
             );
-            } else if (channel.type === Constants.PRIVATE_CHANNEL && this.props.selectPrivate) {
+        } else if (channel.type === Constants.PRIVATE_CHANNEL && selectPrivate) {
             options.push(
                 <option
                     key={channel.id}
@@ -49,7 +60,7 @@ export default class ChannelSelect extends React.PureComponent<Props> {
                     {channelName}
                 </option>,
             );
-            } else if (channel.type === Constants.DM_CHANNEL && this.props.selectDm) {
+        } else if (channel.type === Constants.DM_CHANNEL && selectDm) {
             options.push(
                 <option
                     key={channel.id}
@@ -64,12 +75,13 @@ export default class ChannelSelect extends React.PureComponent<Props> {
     return (
         <select
             className='form-control'
-                value={this.props.value}
+            value={value}
-                onChange={this.props.onChange}
+            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}