Migrate ./components/channel_header_mobile/show_search_button/show_search_button.tsx from Class component to functional component (#25636)

* chore: migrate show_search_button.tsx to functional component

* chore: styled show_search_button to match the pattern

* test: updated snapshots

webapp/channels/src/components/channel_header_mobile/__snapshots__/channel_header_mobile.test.tsx.snap

@@ -42,7 +42,7 @@ exports[`components/ChannelHeaderMobile/ChannelHeaderMobile should match snapsho
           }
         }
       />
-      <Connect(ShowSearchButton) />
+      <Connect(Component) />
       <Connect(injectIntl(MobileChannelHeaderPlug))
         channel={
           Object {
@@ -113,7 +113,7 @@ exports[`components/ChannelHeaderMobile/ChannelHeaderMobile should match snapsho
           }
         }
       />
-      <Connect(ShowSearchButton) />
+      <Connect(Component) />
       <Connect(injectIntl(MobileChannelHeaderPlug))
         channel={
           Object {
@@ -184,7 +184,7 @@ exports[`components/ChannelHeaderMobile/ChannelHeaderMobile should match snapsho
           }
         }
       />
-      <Connect(ShowSearchButton) />
+      <Connect(Component) />
       <Connect(injectIntl(MobileChannelHeaderPlug))
         channel={
           Object {
@@ -255,7 +255,7 @@ exports[`components/ChannelHeaderMobile/ChannelHeaderMobile should match snapsho
           }
         }
       />
-      <Connect(ShowSearchButton) />
+      <Connect(Component) />
       <Connect(injectIntl(MobileChannelHeaderPlug))
         channel={
           Object {

webapp/channels/src/components/channel_header_mobile/show_search_button/show_search_button.tsx

@@ -15,24 +15,23 @@ type Props = {
     actions: Actions;
 }
 
-export default class ShowSearchButton extends React.PureComponent<Props> {
+const ShowSearchButton = ({actions}: Props) => {
-    handleClick = () => {
+    const handleClick = () => {
-        this.props.actions.openRHSSearch();
+        actions.openRHSSearch();
     };
 
-    render() {
+    return (
-        return (
+        <button
-            <button
+            type='button'
-                type='button'
+            className='navbar-toggle navbar-right__icon navbar-search pull-right'
-                className='navbar-toggle navbar-right__icon navbar-search pull-right'
+            onClick={handleClick}
-                onClick={this.handleClick}
+            aria-label={localizeMessage('accessibility.button.Search', 'Search')}
-                aria-label={localizeMessage('accessibility.button.Search', 'Search')}
+        >
-            >
+            <SearchIcon
-                <SearchIcon
+                className='icon icon__search'
-                    className='icon icon__search'
+                aria-hidden='true'
-                    aria-hidden='true'
+            />
-                />
+        </button>
-            </button>
+    );
-        );
+};
-    }
+export default React.memo(ShowSearchButton);
-}