[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>

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",

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> {
+const SystemPermissionGate = ({
-    public static defaultProps = {
+    invert = false,
-        invert: false,
+    hasPermission,
-    };
+    children,
-
+}: Props) => {
-    render() {
+    if (hasPermission !== invert) {
-        if (this.props.hasPermission && !this.props.invert) {
+        return <>{children}</>;
-            return this.props.children;
-        }
-        if (!this.props.hasPermission && this.props.invert) {
-            return this.props.children;
-        }
-        return null;
     }
-}
+    return null;
+};
+
+export default SystemPermissionGate;