From 7ff635cfb15d9fec5a5cd3ac05fa1ce159650cd8 Mon Sep 17 00:00:00 2001
From: Erin Akarice <erinakarice@gmail.com>
Date: Mon, 30 Oct 2023 02:41:42 -0700
Subject: [PATCH] [MM-54818] Convert system_permission_gate.tsx from Class
 Component to Function Component (#24939)

* Convert class to function for SystemPermissionGate

* refactor into arrow func and destructure props param;

* add newline to file

* indent params, remove space before colon, add semicolon

* Wrap return in empty tags; run fix-style; consolidate multiple IFs into XOR-like condition

* Update with invert=false default param for SystemPermissionGate component

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../system_permission_gate.test.tsx.snap      |  3 ---
 .../system_permission_gate.tsx                | 27 +++++++++----------
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/webapp/channels/src/components/permissions_gates/system_permission_gate/__snapshots__/system_permission_gate.test.tsx.snap b/webapp/channels/src/components/permissions_gates/system_permission_gate/__snapshots__/system_permission_gate.test.tsx.snap
index 0cee0f8eac..679188b6be 100644
--- a/webapp/channels/src/components/permissions_gates/system_permission_gate/__snapshots__/system_permission_gate.test.tsx.snap
+++ b/webapp/channels/src/components/permissions_gates/system_permission_gate/__snapshots__/system_permission_gate.test.tsx.snap
@@ -24,7 +24,6 @@ exports[`components/permissions_gates SystemPermissionGate should match snapshot
     <SystemPermissionGate
       dispatch={[Function]}
       hasPermission={true}
-      invert={false}
       permissions={
         Array [
           "test_system_permission",
@@ -63,7 +62,6 @@ exports[`components/permissions_gates SystemPermissionGate should match snapshot
     <SystemPermissionGate
       dispatch={[Function]}
       hasPermission={true}
-      invert={false}
       permissions={
         Array [
           "test_system_permission",
@@ -136,7 +134,6 @@ exports[`components/permissions_gates SystemPermissionGate should match snapshot
     <SystemPermissionGate
       dispatch={[Function]}
       hasPermission={false}
-      invert={false}
       permissions={
         Array [
           "invalid_permission",
diff --git a/webapp/channels/src/components/permissions_gates/system_permission_gate/system_permission_gate.tsx b/webapp/channels/src/components/permissions_gates/system_permission_gate/system_permission_gate.tsx
index 2463be40ee..a8d45d0009 100644
--- a/webapp/channels/src/components/permissions_gates/system_permission_gate/system_permission_gate.tsx
+++ b/webapp/channels/src/components/permissions_gates/system_permission_gate/system_permission_gate.tsx
@@ -17,7 +17,7 @@ type Props = {
     /**
      * Invert the permission (used for else)
      */
-    invert: boolean;
+    invert?: boolean;
 
     /**
      * Content protected by the permissions gate
@@ -25,18 +25,15 @@ type Props = {
     children: React.ReactNode;
 };
 
-export default class SystemPermissionGate extends React.PureComponent<Props> {
-    public static defaultProps = {
-        invert: false,
-    };
-
-    render() {
-        if (this.props.hasPermission && !this.props.invert) {
-            return this.props.children;
-        }
-        if (!this.props.hasPermission && this.props.invert) {
-            return this.props.children;
-        }
-        return null;
+const SystemPermissionGate = ({
+    invert = false,
+    hasPermission,
+    children,
+}: Props) => {
+    if (hasPermission !== invert) {
+        return <>{children}</>;
     }
-}
+    return null;
+};
+
+export default SystemPermissionGate;