From 02e27f78b20e945c9257cacee3bc0886017cb7db Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi
 <88369802+Syed-Ali-Abbas-Zaidi@users.noreply.github.com>
Date: Tue, 26 Dec 2023 08:34:36 +0500
Subject: [PATCH] [MM-56291] Convert
 `./components/widgets/icons/checkbox_checked_icon.tsx` from Class Component
 to Function Component (#25763)

* [MM-56291] Convert `./components/widgets/icons/checkbox_checked_icon.tsx` from Class Component to Function Component

* refactor: update snapshots
---
 .../__snapshots__/group_row.test.tsx.snap     |  2 +-
 .../__snapshots__/groups_list.test.tsx.snap   |  4 +-
 .../permission_checkbox.test.tsx.snap         |  4 +-
 .../channel_moderation.test.tsx.snap          |  6 +-
 .../widgets/icons/checkbox_checked_icon.tsx   | 82 +++++++++----------
 5 files changed, 48 insertions(+), 50 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/group_settings/__snapshots__/group_row.test.tsx.snap b/webapp/channels/src/components/admin_console/group_settings/__snapshots__/group_row.test.tsx.snap
index 19c696f96a..9bba781438 100644
--- a/webapp/channels/src/components/admin_console/group_settings/__snapshots__/group_row.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/group_settings/__snapshots__/group_row.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`components/admin_console/group_settings/GroupRow should match snapshot,
       <div
         className="group-check checked"
       >
-        <CheckboxCheckedIcon />
+        <Memo(CheckboxCheckedIcon) />
       </div>
       <span>
         name
diff --git a/webapp/channels/src/components/admin_console/group_settings/groups_list/__snapshots__/groups_list.test.tsx.snap b/webapp/channels/src/components/admin_console/group_settings/groups_list/__snapshots__/groups_list.test.tsx.snap
index 385a9f6344..d89c98f63e 100644
--- a/webapp/channels/src/components/admin_console/group_settings/groups_list/__snapshots__/groups_list.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/group_settings/groups_list/__snapshots__/groups_list.test.tsx.snap
@@ -104,7 +104,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
           className="filter-check checked"
           onClick={[Function]}
         >
-          <CheckboxCheckedIcon />
+          <Memo(CheckboxCheckedIcon) />
         </span>
         <span>
           <MemoizedFormattedMessage
@@ -120,7 +120,7 @@ exports[`components/admin_console/group_settings/GroupsList.tsx should match sna
           className="filter-check checked"
           onClick={[Function]}
         >
-          <CheckboxCheckedIcon />
+          <Memo(CheckboxCheckedIcon) />
         </span>
         <span>
           <MemoizedFormattedMessage
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/__snapshots__/permission_checkbox.test.tsx.snap b/webapp/channels/src/components/admin_console/permission_schemes_settings/__snapshots__/permission_checkbox.test.tsx.snap
index f1a146cfd2..9b521598fa 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/__snapshots__/permission_checkbox.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/__snapshots__/permission_checkbox.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_checkbo
   className="permission-check checked"
   data-testid="uniqId-checked"
 >
-  <CheckboxCheckedIcon />
+  <Memo(CheckboxCheckedIcon) />
 </div>
 `;
 
@@ -28,7 +28,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_checkbo
   className="permission-check checked"
   data-testid=""
 >
-  <CheckboxCheckedIcon />
+  <Memo(CheckboxCheckedIcon) />
 </div>
 `;
 
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/__snapshots__/channel_moderation.test.tsx.snap b/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/__snapshots__/channel_moderation.test.tsx.snap
index 54c8b2fce3..37a1528562 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/__snapshots__/channel_moderation.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/__snapshots__/channel_moderation.test.tsx.snap
@@ -263,7 +263,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelModeration Should ma
       onClick={[Function]}
       type="button"
     >
-      <CheckboxCheckedIcon />
+      <Memo(CheckboxCheckedIcon) />
     </button>
   </td>
   <td>
@@ -273,7 +273,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelModeration Should ma
       onClick={[Function]}
       type="button"
     >
-      <CheckboxCheckedIcon />
+      <Memo(CheckboxCheckedIcon) />
     </button>
   </td>
 </tr>
@@ -307,7 +307,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelModeration Should ma
       onClick={[Function]}
       type="button"
     >
-      <CheckboxCheckedIcon />
+      <Memo(CheckboxCheckedIcon) />
     </button>
   </td>
 </tr>
diff --git a/webapp/channels/src/components/widgets/icons/checkbox_checked_icon.tsx b/webapp/channels/src/components/widgets/icons/checkbox_checked_icon.tsx
index 3d6e3e5a69..15b3972e14 100644
--- a/webapp/channels/src/components/widgets/icons/checkbox_checked_icon.tsx
+++ b/webapp/channels/src/components/widgets/icons/checkbox_checked_icon.tsx
@@ -1,54 +1,50 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {memo} from 'react';
 
-export default class CheckboxCheckedIcon extends React.PureComponent {
-    render() {
-        return (
-            <svg
-                width='18px'
-                height='18px'
-                viewBox='0 0 18 18'
+const CheckboxCheckedIcon = () => (
+    <svg
+        width='18px'
+        height='18px'
+        viewBox='0 0 18 18'
+    >
+        <g
+            id='Developer-Export'
+            stroke='none'
+            strokeWidth='1'
+            fillRule='evenodd'
+        >
+            <g
+                transform='translate(-285.000000, -933.000000)'
+                id='All-Team-Members'
             >
-                <g
-                    id='Developer-Export'
-                    stroke='none'
-                    strokeWidth='1'
-                    fillRule='evenodd'
-                >
+                <g transform='translate(245.000000, 698.000000)'>
                     <g
-                        transform='translate(-285.000000, -933.000000)'
-                        id='All-Team-Members'
+                        id='Channel-Administrators'
+                        transform='translate(0.000000, 106.000000)'
                     >
-                        <g transform='translate(245.000000, 698.000000)'>
+                        <g
+                            id='data-table/column-1'
+                            transform='translate(11.000000, 86.000000)'
+                        >
                             <g
-                                id='Channel-Administrators'
-                                transform='translate(0.000000, 106.000000)'
+                                id='row-checkbox---Public-Channels'
+                                transform='translate(12.000000, 35.000000)'
                             >
                                 <g
-                                    id='data-table/column-1'
-                                    transform='translate(11.000000, 86.000000)'
+                                    id='Stacked-Group'
+                                    transform='translate(0.000000, 5.000000)'
                                 >
-                                    <g
-                                        id='row-checkbox---Public-Channels'
-                                        transform='translate(12.000000, 35.000000)'
-                                    >
+                                    <g id='data-table/1st/row-checkbox-label-base'>
                                         <g
-                                            id='Stacked-Group'
-                                            transform='translate(0.000000, 5.000000)'
+                                            id='check-on-copy-11'
+                                            transform='translate(14.000000, 0.000000)'
                                         >
-                                            <g id='data-table/1st/row-checkbox-label-base'>
-                                                <g
-                                                    id='check-on-copy-11'
-                                                    transform='translate(14.000000, 0.000000)'
-                                                >
-                                                    <path
-                                                        d='M19,3 L5,3 C3.9,3 3,3.9 3,5 L3,19 C3,20.1 3.9,21 5,21 L19,21 C20.1,21 21,20.1 21,19 L21,5 C21,3.9 20.1,3 19,3 L19,3 Z M10,17 L5,12.1923077 L6.4,10.8461538 L10,14.3076923 L17.6,7 L19,8.34615385 L10,17 L10,17 Z'
-                                                        id='checkbox---checked'
-                                                    />
-                                                </g>
-                                            </g>
+                                            <path
+                                                d='M19,3 L5,3 C3.9,3 3,3.9 3,5 L3,19 C3,20.1 3.9,21 5,21 L19,21 C20.1,21 21,20.1 21,19 L21,5 C21,3.9 20.1,3 19,3 L19,3 Z M10,17 L5,12.1923077 L6.4,10.8461538 L10,14.3076923 L17.6,7 L19,8.34615385 L10,17 L10,17 Z'
+                                                id='checkbox---checked'
+                                            />
                                         </g>
                                     </g>
                                 </g>
@@ -56,7 +52,9 @@ export default class CheckboxCheckedIcon extends React.PureComponent {
                         </g>
                     </g>
                 </g>
-            </svg>
-        );
-    }
-}
+            </g>
+        </g>
+    </svg>
+);
+
+export default memo(CheckboxCheckedIcon);