From a272a78e634f17969ae9b392b0437665a2131bcf Mon Sep 17 00:00:00 2001
From: Dipan Dhali <121673023+dipandhali2021@users.noreply.github.com>
Date: Wed, 18 Oct 2023 13:34:40 +0530
Subject: [PATCH] Convert ShieldOutlineIcon to function Component (#24810)

* Convert ShieldOutlineIcon to function Component

* Fixed Extra line and Test file
---
 .../system_user_detail.test.tsx.snap          | 12 +++---
 .../widgets/icons/shield_outline_icon.tsx     | 37 ++++++++++---------
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap b/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
index 56473fb795..7454856b48 100644
--- a/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
@@ -68,7 +68,7 @@ exports[`components/admin_console/system_user_detail should match default snapsh
             <div
               className="SystemUserDetail__field-text"
             >
-              <ShieldOutlineIcon
+              <Memo(ShieldOutlineIcon)
                 className="SystemUserDetail__field-icon"
               />
               <span
@@ -304,7 +304,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if LD
             <div
               className="SystemUserDetail__field-text"
             >
-              <ShieldOutlineIcon
+              <Memo(ShieldOutlineIcon)
                 className="SystemUserDetail__field-icon"
               />
               <span
@@ -542,7 +542,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if MF
             <div
               className="SystemUserDetail__field-text"
             >
-              <ShieldOutlineIcon
+              <Memo(ShieldOutlineIcon)
                 className="SystemUserDetail__field-icon"
               />
               <span
@@ -786,7 +786,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if SA
             <div
               className="SystemUserDetail__field-text"
             >
-              <ShieldOutlineIcon
+              <Memo(ShieldOutlineIcon)
                 className="SystemUserDetail__field-icon"
               />
               <span
@@ -1024,7 +1024,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if no
             <div
               className="SystemUserDetail__field-text"
             >
-              <ShieldOutlineIcon
+              <Memo(ShieldOutlineIcon)
                 className="SystemUserDetail__field-icon"
               />
               <span
@@ -1260,7 +1260,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if us
             <div
               className="SystemUserDetail__field-text"
             >
-              <ShieldOutlineIcon
+              <Memo(ShieldOutlineIcon)
                 className="SystemUserDetail__field-icon"
               />
               <span
diff --git a/webapp/channels/src/components/widgets/icons/shield_outline_icon.tsx b/webapp/channels/src/components/widgets/icons/shield_outline_icon.tsx
index 9db97c1099..dfa6c6c815 100644
--- a/webapp/channels/src/components/widgets/icons/shield_outline_icon.tsx
+++ b/webapp/channels/src/components/widgets/icons/shield_outline_icon.tsx
@@ -3,21 +3,22 @@
 
 import React from 'react';
 
-export default class ShieldOutlineIcon extends React.PureComponent<React.HTMLAttributes<HTMLSpanElement>> {
-    render() {
-        return (
-            <span {...this.props}>
-                <svg
-                    width='100%'
-                    height='100%'
-                    viewBox='0 0 24 24'
-                >
-                    <path
-                        fill='inherit'
-                        d='M21,11C21,16.55 17.16,21.74 12,23C6.84,21.74 3,16.55 3,11V5L12,1L21,5V11M12,21C15.75,20 19,15.54 19,11.22V6.3L12,3.18L5,6.3V11.22C5,15.54 8.25,20 12,21Z'
-                    />
-                </svg>
-            </span>
-        );
-    }
-}
+type Props = React.HTMLAttributes<HTMLSpanElement>;
+
+const ShieldOutlineIcon = (props: Props) => {
+    return (
+        <span {...props}>
+            <svg
+                width='100%'
+                height='100%'
+                viewBox='0 0 24 24'
+            >
+                <path
+                    fill='inherit'
+                    d='M21,11C21,16.55 17.16,21.74 12,23C6.84,21.74 3,16.55 3,11V5L12,1L21,5V11M12,21C15.75,20 19,15.54 19,11.22V6.3L12,3.18L5,6.3V11.22C5,15.54 8.25,20 12,21Z'
+                />
+            </svg>
+        </span>
+    );
+};
+export default React.memo(ShieldOutlineIcon);