[MM-57718] Convert ./components/post_view/message_attachments/action_button/action_button.tsx from Class Component to Function Component (#26728)

* [MM-57718] Convert `./components/post_view/message_attachments/action_button/action_button.tsx` from Class Component to Function Component

* :refactor: improve code structure

webapp/channels/src/components/post_view/message_attachments/action_button/action_button.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, {memo, useCallback} from 'react';
 import styled, {css} from 'styled-components';
 
 import type {PostAction, PostActionOption} from '@mattermost/types/integration_actions';
@@ -12,6 +12,22 @@ import {changeOpacity} from 'mattermost-redux/utils/theme_utils';
 import Markdown from 'components/markdown';
 import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 
+const getStatusColors = (theme: Theme) => {
+    return {
+        good: '#339970',
+        warning: '#CC8F00',
+        danger: theme.errorTextColor,
+        default: theme.centerChannelColor,
+        primary: theme.buttonBg,
+        success: '#339970',
+    } as Record<string, string>;
+};
+const markdownOptions = {
+    mentionHighlight: false,
+    markdown: false,
+    autolinkedUrlSchemes: [],
+};
+
 type Props = {
     action: PostAction;
     handleAction: (e: React.MouseEvent, options?: PostActionOption[]) => void;
@@ -21,24 +37,19 @@ type Props = {
     actionExecutingMessage?: string;
 }
 
-export default class ActionButton extends React.PureComponent<Props> {
+const ActionButton = ({
-    getStatusColors(theme: Theme) {
+    action,
-        return {
+    handleAction,
-            good: '#339970',
+    disabled,
-            warning: '#CC8F00',
+    theme,
-            danger: theme.errorTextColor,
+    actionExecuting,
-            default: theme.centerChannelColor,
+    actionExecutingMessage,
-            primary: theme.buttonBg,
+}: Props) => {
-            success: '#339970',
+    const handleActionClick = useCallback((e) => handleAction(e, action.options), [action.options, handleAction]);
-        } as Record<string, string>;
-    }
-
-    render() {
-        const {action, handleAction, disabled, theme} = this.props;
     let hexColor: string | null | undefined;
 
     if (action.style) {
-            const STATUS_COLORS = this.getStatusColors(theme);
+        const STATUS_COLORS = getStatusColors(theme);
         hexColor =
             STATUS_COLORS[action.style] ||
             theme[action.style] ||
@@ -51,27 +62,22 @@ export default class ActionButton extends React.PureComponent<Props> {
             data-action-cookie={action.cookie}
             disabled={disabled}
             key={action.id}
-                onClick={(e) => handleAction(e, this.props.action.options)}
+            onClick={handleActionClick}
             className='btn btn-sm'
             hexColor={hexColor}
         >
             <LoadingWrapper
-                    loading={this.props.actionExecuting}
+                loading={actionExecuting}
-                    text={this.props.actionExecutingMessage}
+                text={actionExecutingMessage}
             >
                 <Markdown
                     message={action.name}
-                        options={{
+                    options={markdownOptions}
-                            mentionHighlight: false,
-                            markdown: false,
-                            autolinkedUrlSchemes: [],
-                        }}
                 />
             </LoadingWrapper>
         </ActionBtn>
     );
-    }
+};
-}
 
 type ActionBtnProps = {hexColor: string | null | undefined};
 const ActionBtn = styled.button<ActionBtnProps>`
@@ -86,3 +92,5 @@ const ActionBtn = styled.button<ActionBtnProps>`
         }
     `}
 `;
+
+export default memo(ActionButton);

webapp/channels/src/components/post_view/message_attachments/message_attachment/__snapshots__/message_attachment.test.tsx.snap

@@ -104,7 +104,7 @@ exports[`components/post_view/MessageAttachment should call actions.doPostAction
           <div
             className="attachment-actions"
           >
-            <Connect(ActionButton)
+            <Connect(Component)
               action={
                 Object {
                   "cookie": "cookie-contents",
@@ -685,7 +685,7 @@ exports[`components/post_view/MessageAttachment should match value on renderPost
 <div
   className="attachment-actions"
 >
-  <Memo(Connect(ActionButton))
+  <Memo(Connect(Component))
     action={
       Object {
         "id": "action_id_1",
@@ -695,7 +695,7 @@ exports[`components/post_view/MessageAttachment should match value on renderPost
     actionExecuting={false}
     handleAction={[Function]}
   />
-  <Memo(Connect(ActionButton))
+  <Memo(Connect(Component))
     action={
       Object {
         "id": "action_id_2",