From ab6e206a5195de3377472b7d0322ff6570a5f2d1 Mon Sep 17 00:00:00 2001
From: Syed Ali Abbas Zaidi
 <88369802+Syed-Ali-Abbas-Zaidi@users.noreply.github.com>
Date: Thu, 21 Dec 2023 15:12:38 +0500
Subject: [PATCH] [MM-56292] Convert
 `./components/widgets/icons/checkbox_partial_icon.tsx` from Class Component
 to Function Component (#25764)

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

* refactor: update snapshots
---
 .../permission_checkbox.test.tsx.snap         |  2 +-
 .../widgets/icons/checkbox_partial_icon.tsx   | 86 +++++++++----------
 2 files changed, 43 insertions(+), 45 deletions(-)

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 a03c165be5..f1a146cfd2 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
@@ -37,6 +37,6 @@ exports[`components/admin_console/permission_schemes_settings/permission_checkbo
   className="permission-check intermediate"
   data-testid="uniqId-checked"
 >
-  <CheckboxPartialIcon />
+  <Memo(CheckboxPartialIcon) />
 </div>
 `;
diff --git a/webapp/channels/src/components/widgets/icons/checkbox_partial_icon.tsx b/webapp/channels/src/components/widgets/icons/checkbox_partial_icon.tsx
index 95ed174126..ff94b19fd7 100644
--- a/webapp/channels/src/components/widgets/icons/checkbox_partial_icon.tsx
+++ b/webapp/channels/src/components/widgets/icons/checkbox_partial_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 CheckboxPartialIcon extends React.PureComponent {
-    render() {
-        return (
-            <svg
-                width='18px'
-                height='18px'
-                viewBox='0 0 18 18'
+const CheckboxPartialIcon = () => (
+    <svg
+        width='18px'
+        height='18px'
+        viewBox='0 0 18 18'
+    >
+        <g
+            id='Developer-Export'
+            stroke='none'
+            strokeWidth='1'
+            fillRule='evenodd'
+        >
+            <g
+                transform='translate(-298.000000, -1273.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(-298.000000, -1273.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---@all-@channel-Mentions'
+                                transform='translate(0.000000, 375.000000)'
                             >
-                                <g
-                                    id='data-table/column-1'
-                                    transform='translate(11.000000, 86.000000)'
-                                >
+                                <g id='Stacked-Group'>
                                     <g
-                                        id='row-checkbox---@all-@channel-Mentions'
-                                        transform='translate(0.000000, 375.000000)'
+                                        id='data-table/1st/row-checkbox-label-base'
+                                        transform='translate(25.000000, 5.000000)'
                                     >
-                                        <g id='Stacked-Group'>
-                                            <g
-                                                id='data-table/1st/row-checkbox-label-base'
-                                                transform='translate(25.000000, 5.000000)'
-                                            >
-                                                <g
-                                                    id='check-on-copy-11'
-                                                    transform='translate(14.000000, 0.000000)'
-                                                >
-                                                    <path
-                                                        d='M19,3 C20.1,3 21,3.9 21,5 L21,19 C21,20.1 20.1,21 19,21 L5,21 C3.9,21 3,20.1 3,19 L3,5 C3,3.9 3.9,3 5,3 L19,3 Z M7,11 L7,13 L17,13 L17,11 L7,11 Z'
-                                                        id='checkbox---partial'
-                                                    />
-                                                </g>
-                                            </g>
+                                        <g
+                                            id='check-on-copy-11'
+                                            transform='translate(14.000000, 0.000000)'
+                                        >
+                                            <path
+                                                d='M19,3 C20.1,3 21,3.9 21,5 L21,19 C21,20.1 20.1,21 19,21 L5,21 C3.9,21 3,20.1 3,19 L3,5 C3,3.9 3.9,3 5,3 L19,3 Z M7,11 L7,13 L17,13 L17,11 L7,11 Z'
+                                                id='checkbox---partial'
+                                            />
                                         </g>
                                     </g>
                                 </g>
@@ -56,7 +52,9 @@ export default class CheckboxPartialIcon extends React.PureComponent {
                         </g>
                     </g>
                 </g>
-            </svg>
-        );
-    }
-}
+            </g>
+        </g>
+    </svg>
+);
+
+export default memo(CheckboxPartialIcon);