[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

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

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

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>
 `;
 

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>

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 {
+const CheckboxCheckedIcon = () => (
-    render() {
+    <svg
-        return (
+        width='18px'
-            <svg
+        height='18px'
-                width='18px'
+        viewBox='0 0 18 18'
-                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
+                <g transform='translate(245.000000, 698.000000)'>
-                    id='Developer-Export'
-                    stroke='none'
-                    strokeWidth='1'
-                    fillRule='evenodd'
-                >
                     <g
-                        transform='translate(-285.000000, -933.000000)'
+                        id='Channel-Administrators'
-                        id='All-Team-Members'
+                        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'
+                                id='row-checkbox---Public-Channels'
-                                transform='translate(0.000000, 106.000000)'
+                                transform='translate(12.000000, 35.000000)'
                             >
                                 <g
-                                    id='data-table/column-1'
+                                    id='Stacked-Group'
-                                    transform='translate(11.000000, 86.000000)'
+                                    transform='translate(0.000000, 5.000000)'
                                 >
-                                    <g
+                                    <g id='data-table/1st/row-checkbox-label-base'>
-                                        id='row-checkbox---Public-Channels'
-                                        transform='translate(12.000000, 35.000000)'
-                                    >
                                         <g
-                                            id='Stacked-Group'
+                                            id='check-on-copy-11'
-                                            transform='translate(0.000000, 5.000000)'
+                                            transform='translate(14.000000, 0.000000)'
                                         >
-                                            <g id='data-table/1st/row-checkbox-label-base'>
+                                            <path
-                                                <g
+                                                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='check-on-copy-11'
+                                                id='checkbox---checked'
-                                                    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>
                                         </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);