[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,57 +37,47 @@ 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>;
+    let hexColor: string | null | undefined;
+
+    if (action.style) {
+        const STATUS_COLORS = getStatusColors(theme);
+        hexColor =
+            STATUS_COLORS[action.style] ||
+            theme[action.style] ||
+            (action.style.match('^#(?:[0-9a-fA-F]{3}){1,2}$') && action.style);
     }
 
-    render() {
+    return (
-        const {action, handleAction, disabled, theme} = this.props;
+        <ActionBtn
-        let hexColor: string | null | undefined;
+            data-action-id={action.id}
-
+            data-action-cookie={action.cookie}
-        if (action.style) {
+            disabled={disabled}
-            const STATUS_COLORS = this.getStatusColors(theme);
+            key={action.id}
-            hexColor =
+            onClick={handleActionClick}
-                STATUS_COLORS[action.style] ||
+            className='btn btn-sm'
-                theme[action.style] ||
+            hexColor={hexColor}
-                (action.style.match('^#(?:[0-9a-fA-F]{3}){1,2}$') && action.style);
+        >
-        }
+            <LoadingWrapper
-
+                loading={actionExecuting}
-        return (
+                text={actionExecutingMessage}
-            <ActionBtn
-                data-action-id={action.id}
-                data-action-cookie={action.cookie}
-                disabled={disabled}
-                key={action.id}
-                onClick={(e) => handleAction(e, this.props.action.options)}
-                className='btn btn-sm'
-                hexColor={hexColor}
             >
-                <LoadingWrapper
+                <Markdown
-                    loading={this.props.actionExecuting}
+                    message={action.name}
-                    text={this.props.actionExecutingMessage}
+                    options={markdownOptions}
-                >
+                />
-                    <Markdown
+            </LoadingWrapper>
-                        message={action.name}
+        </ActionBtn>
-                        options={{
+    );
-                            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",