[MM-55327]: Convert /components/permissions_gates/team_permission_gate/team_permission_gate.tsx from Class Component to Function Component (#25395)

* fix: convert to func component

* fix: update failing test snapshots

* Handle tests better

* Standarize all gates

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: Daniel Espino García <larkox@gmail.com>

webapp/channels/src/components/actions_menu/__snapshots__/actions_menu.test.tsx.snap

@@ -206,7 +206,7 @@ exports[`components/actions_menu/ActionsMenu no actions - sysadmin - menu should
     openLeft={true}
     openUp={false}
   >
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       key="visit-marketplace-permissions"
       permissions={
         Array [
@@ -243,7 +243,7 @@ exports[`components/actions_menu/ActionsMenu no actions - sysadmin - menu should
           </span>
         </button>
       </div>
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
   </Menu>
 </MenuWrapper>
 `;

webapp/channels/src/components/browse_channels/__snapshots__/browse_channels.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`components/BrowseChannels should match snapshot and state 1`] = `
   compassDesign={true}
   enforceFocus={false}
   headerButton={
-    <Memo(Connect(TeamPermissionGate))
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "create_public_channel",
@@ -30,7 +30,7 @@ exports[`components/BrowseChannels should match snapshot and state 1`] = `
           id="more_channels.create"
         />
       </button>
-    </Memo(Connect(TeamPermissionGate))>
+    </Memo(TeamPermissionGate)>
   }
   id="browseChannelsModal"
   keyboardEscape={true}
@@ -128,7 +128,7 @@ exports[`components/BrowseChannels should match snapshot and state 1`] = `
             id="more_channels.searchError"
           />
         </p>
-        <Memo(Connect(TeamPermissionGate))
+        <Memo(TeamPermissionGate)
           permissions={
             Array [
               "create_public_channel",
@@ -151,7 +151,7 @@ exports[`components/BrowseChannels should match snapshot and state 1`] = `
               id="more_channels.create"
             />
           </button>
-        </Memo(Connect(TeamPermissionGate))>
+        </Memo(TeamPermissionGate)>
       </React.Fragment>
     }
     rememberHideJoinedChannelsChecked={false}

webapp/channels/src/components/channel_header_dropdown/__snapshots__/channel_header_dropdown.test.tsx.snap

@@ -233,7 +233,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
     />
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(Component)
+    <Memo(ChannelPermissionGate)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -296,7 +296,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
         show={false}
         text="Add Members"
       />
-    </Connect(Component)>
+    </Memo(ChannelPermissionGate)>
     <Connect(ToggleChannelMembersRHS)
       channel={
         Object {
@@ -321,7 +321,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
       show={false}
       text="View Members"
     />
-    <Connect(Component)
+    <Memo(ChannelPermissionGate)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -388,8 +388,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
         show={true}
         text="Manage Members"
       />
-    </Connect(Component)>
+    </Memo(ChannelPermissionGate)>
-    <Connect(Component)
+    <Memo(ChannelPermissionGate)
       channelId="test-channel-id"
       invert={true}
       permissions={
@@ -423,7 +423,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
         show={true}
         text="View Members"
       />
-    </Connect(Component)>
+    </Memo(ChannelPermissionGate)>
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
     <MenuItemToggleModalRedux
@@ -498,7 +498,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
     />
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(Component)
+    <Memo(ChannelPermissionGate)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -612,8 +612,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
         show={true}
         text="Rename Channel"
       />
-    </Connect(Component)>
+    </Memo(ChannelPermissionGate)>
-    <Connect(Component)
+    <Memo(ChannelPermissionGate)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -642,7 +642,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
         show={true}
         text="Convert to Private Channel"
       />
-    </Connect(Component)>
+    </Memo(ChannelPermissionGate)>
     <Connect(Component)
       channel={
         Object {
@@ -667,7 +667,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
       isDefault={false}
       isGuestUser={false}
     />
-    <Connect(Component)
+    <Memo(ChannelPermissionGate)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -713,7 +713,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
         show={true}
         text="Archive Channel"
       />
-    </Connect(Component)>
+    </Memo(ChannelPermissionGate)>
     <Connect(CloseMessage)
       channel={
         Object {
@@ -783,7 +783,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
   </Memo(MenuGroup)>
   <Memo(MenuGroup) />
   <Memo(MenuGroup)>
-    <Connect(Component)
+    <Memo(ChannelPermissionGate)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -827,7 +827,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with no plugin i
         show={false}
         text="Unarchive Channel"
       />
-    </Connect(Component)>
+    </Memo(ChannelPermissionGate)>
   </Memo(MenuGroup)>
 </Fragment>
 `;
@@ -1065,7 +1065,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
     />
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(Component)
+    <Memo(ChannelPermissionGate)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -1128,7 +1128,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
         show={false}
         text="Add Members"
       />
-    </Connect(Component)>
+    </Memo(ChannelPermissionGate)>
     <Connect(ToggleChannelMembersRHS)
       channel={
         Object {
@@ -1153,7 +1153,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
       show={false}
       text="View Members"
     />
-    <Connect(Component)
+    <Memo(ChannelPermissionGate)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -1220,8 +1220,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
         show={true}
         text="Manage Members"
       />
-    </Connect(Component)>
+    </Memo(ChannelPermissionGate)>
-    <Connect(Component)
+    <Memo(ChannelPermissionGate)
       channelId="test-channel-id"
       invert={true}
       permissions={
@@ -1255,7 +1255,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
         show={true}
         text="View Members"
       />
-    </Connect(Component)>
+    </Memo(ChannelPermissionGate)>
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
     <MenuItemToggleModalRedux
@@ -1330,7 +1330,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
     />
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(Component)
+    <Memo(ChannelPermissionGate)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -1444,8 +1444,8 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
         show={true}
         text="Rename Channel"
       />
-    </Connect(Component)>
+    </Memo(ChannelPermissionGate)>
-    <Connect(Component)
+    <Memo(ChannelPermissionGate)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -1474,7 +1474,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
         show={true}
         text="Convert to Private Channel"
       />
-    </Connect(Component)>
+    </Memo(ChannelPermissionGate)>
     <Connect(Component)
       channel={
         Object {
@@ -1499,7 +1499,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
       isDefault={false}
       isGuestUser={false}
     />
-    <Connect(Component)
+    <Memo(ChannelPermissionGate)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -1545,7 +1545,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
         show={true}
         text="Archive Channel"
       />
-    </Connect(Component)>
+    </Memo(ChannelPermissionGate)>
     <Connect(CloseMessage)
       channel={
         Object {
@@ -1630,7 +1630,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
     />
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(Component)
+    <Memo(ChannelPermissionGate)
       channelId="test-channel-id"
       permissions={
         Array [
@@ -1674,7 +1674,7 @@ exports[`components/ChannelHeaderDropdown should match snapshot with plugins 1`]
         show={false}
         text="Unarchive Channel"
       />
-    </Connect(Component)>
+    </Memo(ChannelPermissionGate)>
   </Memo(MenuGroup)>
 </Fragment>
 `;

webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/__snapshots__/product_menu_list.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`components/global/product_switcher_menu should match snapshot with id 1
     <MenuItemCloudLimit
       id="menuItemCloudLimit"
     />
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "sysconsole_write_about_edition_and_license",
@@ -21,8 +21,8 @@ exports[`components/global/product_switcher_menu should match snapshot with id 1
       <MenuStartTrial
         id="startTrial"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "sysconsole_read_about_edition_and_license",
@@ -97,7 +97,7 @@ exports[`components/global/product_switcher_menu should match snapshot with id 1
         }
         to="/admin_console"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
     <MenuItemLink
       icon={
         <WebhookIncomingIcon
@@ -138,7 +138,7 @@ exports[`components/global/product_switcher_menu should match snapshot with id 1
       sibling={false}
       text="User Groups"
     />
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "sysconsole_write_plugins",
@@ -163,7 +163,7 @@ exports[`components/global/product_switcher_menu should match snapshot with id 1
         show={false}
         text="App Marketplace"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
     <MenuItemExternalLink
       icon={
         <DownloadOutlineIcon
@@ -209,7 +209,7 @@ exports[`components/global/product_switcher_menu should match snapshot with most
     <MenuItemCloudLimit
       id="menuItemCloudLimit"
     />
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "sysconsole_write_about_edition_and_license",
@@ -219,8 +219,8 @@ exports[`components/global/product_switcher_menu should match snapshot with most
       <MenuStartTrial
         id="startTrial"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "sysconsole_read_about_edition_and_license",
@@ -295,7 +295,7 @@ exports[`components/global/product_switcher_menu should match snapshot with most
         }
         to="/admin_console"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
     <MenuItemLink
       icon={
         <WebhookIncomingIcon
@@ -336,7 +336,7 @@ exports[`components/global/product_switcher_menu should match snapshot with most
       sibling={false}
       text="User Groups"
     />
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "sysconsole_write_plugins",
@@ -361,7 +361,7 @@ exports[`components/global/product_switcher_menu should match snapshot with most
         show={true}
         text="App Marketplace"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
     <MenuItemExternalLink
       icon={
         <DownloadOutlineIcon
@@ -533,7 +533,7 @@ exports[`components/global/product_switcher_menu should show integrations should
     <MenuItemCloudLimit
       id="menuItemCloudLimit"
     />
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "sysconsole_write_about_edition_and_license",
@@ -543,8 +543,8 @@ exports[`components/global/product_switcher_menu should show integrations should
       <MenuStartTrial
         id="startTrial"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "sysconsole_read_about_edition_and_license",
@@ -619,7 +619,7 @@ exports[`components/global/product_switcher_menu should show integrations should
         }
         to="/admin_console"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
     <MenuItemLink
       icon={
         <WebhookIncomingIcon
@@ -660,7 +660,7 @@ exports[`components/global/product_switcher_menu should show integrations should
       sibling={false}
       text="User Groups"
     />
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "sysconsole_write_plugins",
@@ -685,7 +685,7 @@ exports[`components/global/product_switcher_menu should show integrations should
         show={false}
         text="App Marketplace"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
     <MenuItemExternalLink
       icon={
         <DownloadOutlineIcon

webapp/channels/src/components/integrations/__snapshots__/abstract_oauth_app.test.tsx.snap

@@ -32,7 +32,7 @@ exports[`components/integrations/AbstractOAuthApp should match snapshot 1`] = `
     <form
       className="form-horizontal"
     >
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "manage_system",
@@ -94,7 +94,7 @@ exports[`components/integrations/AbstractOAuthApp should match snapshot 1`] = `
             </div>
           </div>
         </div>
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
       <div
         className="form-group"
       >
@@ -337,7 +337,7 @@ exports[`components/integrations/AbstractOAuthApp should match snapshot, display
     <form
       className="form-horizontal"
     >
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "manage_system",
@@ -399,7 +399,7 @@ exports[`components/integrations/AbstractOAuthApp should match snapshot, display
             </div>
           </div>
         </div>
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
       <div
         className="form-group"
       >

webapp/channels/src/components/main_menu/__snapshots__/main_menu.test.tsx.snap

@@ -55,7 +55,7 @@ exports[`components/Menu should match snapshot with guest access disabled and no
   ariaLabel="team menu"
 >
   <Memo(MenuGroup)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -77,8 +77,8 @@ exports[`components/Menu should match snapshot with guest access disabled and no
         show={false}
         text="Add Groups to Team"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "add_user_to_team",
@@ -87,7 +87,7 @@ exports[`components/Menu should match snapshot with guest access disabled and no
       }
       teamId="team-id"
     />
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -109,8 +109,8 @@ exports[`components/Menu should match snapshot with guest access disabled and no
         show={true}
         text="Team Settings"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -137,8 +137,8 @@ exports[`components/Menu should match snapshot with guest access disabled and no
         show={false}
         text="Manage Groups"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "remove_user_from_team",
@@ -161,8 +161,8 @@ exports[`components/Menu should match snapshot with guest access disabled and no
         show={true}
         text="Manage Members"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       invert={true}
       permissions={
         Array [
@@ -186,7 +186,7 @@ exports[`components/Menu should match snapshot with guest access disabled and no
         show={true}
         text="View Members"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
     <MenuItemLink
       id="joinTeam"
       show={false}
@@ -210,7 +210,7 @@ exports[`components/Menu should match snapshot with guest access disabled and no
     />
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "create_team",
@@ -226,7 +226,7 @@ exports[`components/Menu should match snapshot with guest access disabled and no
         text="Create a Team"
         to="/create_team"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
     <Memo(MenuGroup)>
       <div
         className="MainMenu_dropdown-link"
@@ -245,7 +245,7 @@ exports[`components/Menu should match snapshot with id 1`] = `
   id="test-id"
 >
   <Memo(MenuGroup)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -267,8 +267,8 @@ exports[`components/Menu should match snapshot with id 1`] = `
         show={false}
         text="Add Groups to Team"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "add_user_to_team",
@@ -294,8 +294,8 @@ exports[`components/Menu should match snapshot with id 1`] = `
         show={true}
         text="Invite People"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -317,8 +317,8 @@ exports[`components/Menu should match snapshot with id 1`] = `
         show={true}
         text="Team Settings"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -345,8 +345,8 @@ exports[`components/Menu should match snapshot with id 1`] = `
         show={false}
         text="Manage Groups"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "remove_user_from_team",
@@ -369,8 +369,8 @@ exports[`components/Menu should match snapshot with id 1`] = `
         show={true}
         text="Manage Members"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       invert={true}
       permissions={
         Array [
@@ -394,7 +394,7 @@ exports[`components/Menu should match snapshot with id 1`] = `
         show={true}
         text="View Members"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
     <MenuItemLink
       id="joinTeam"
       show={false}
@@ -418,7 +418,7 @@ exports[`components/Menu should match snapshot with id 1`] = `
     />
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "create_team",
@@ -434,7 +434,7 @@ exports[`components/Menu should match snapshot with id 1`] = `
         text="Create a Team"
         to="/create_team"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
     <Memo(MenuGroup)>
       <div
         className="MainMenu_dropdown-link"
@@ -452,7 +452,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1
   ariaLabel="team menu"
 >
   <Memo(MenuGroup)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -474,8 +474,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1
         show={false}
         text="Add Groups to Team"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "add_user_to_team",
@@ -501,8 +501,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1
         show={true}
         text="Invite People"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -524,8 +524,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1
         show={true}
         text="Team Settings"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -552,8 +552,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1
         show={false}
         text="Manage Groups"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "remove_user_from_team",
@@ -576,8 +576,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1
         show={true}
         text="Manage Members"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       invert={true}
       permissions={
         Array [
@@ -601,7 +601,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1
         show={true}
         text="View Members"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
     <MenuItemLink
       id="joinTeam"
       show={false}
@@ -625,7 +625,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1
     />
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "create_team",
@@ -641,7 +641,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1
         text="Create a Team"
         to="/create_team"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
     <Memo(MenuGroup)>
       <div
         className="MainMenu_dropdown-link"
@@ -659,7 +659,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
   ariaLabel="main menu"
 >
   <Memo(MenuGroup)>
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "sysconsole_write_billing",
@@ -669,10 +669,10 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
       <MenuCloudTrial
         id="menuCloudTrial"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "sysconsole_write_about_edition_and_license",
@@ -682,7 +682,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
       <MenuStartTrial
         id="startTrial"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
     <MenuItemAction
@@ -761,7 +761,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
     />
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -788,8 +788,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
         show={false}
         text="Add Groups to Team"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "add_user_to_team",
@@ -819,10 +819,10 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
         show={true}
         text="Invite People"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -849,8 +849,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
         show={true}
         text="Team Settings"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -882,8 +882,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
         show={false}
         text="Manage Groups"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "remove_user_from_team",
@@ -911,8 +911,8 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
         show={true}
         text="Manage Members"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       invert={true}
       permissions={
         Array [
@@ -941,10 +941,10 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
         show={true}
         text="View Members"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "create_team",
@@ -962,7 +962,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
         text="Create a Team"
         to="/create_team"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
     <MenuItemLink
       icon={
         <i
@@ -1072,7 +1072,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1`
   ariaLabel="team menu"
 >
   <Memo(MenuGroup)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -1094,8 +1094,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1`
         show={false}
         text="Add Groups to Team"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "add_user_to_team",
@@ -1121,8 +1121,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1`
         show={true}
         text="Invite People"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -1144,8 +1144,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1`
         show={true}
         text="Team Settings"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -1172,8 +1172,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1`
         show={false}
         text="Manage Groups"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "remove_user_from_team",
@@ -1196,8 +1196,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1`
         show={true}
         text="Manage Members"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       invert={true}
       permissions={
         Array [
@@ -1221,7 +1221,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1`
         show={true}
         text="View Members"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
     <MenuItemLink
       id="joinTeam"
       show={false}
@@ -1245,7 +1245,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1`
     />
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "create_team",
@@ -1261,7 +1261,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1`
         text="Create a Team"
         to="/create_team"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
     <Memo(MenuGroup)>
       <div
         className="MainMenu_dropdown-link"
@@ -1279,7 +1279,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
   ariaLabel="main menu"
 >
   <Memo(MenuGroup)>
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "sysconsole_write_billing",
@@ -1289,10 +1289,10 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
       <MenuCloudTrial
         id="menuCloudTrial"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "sysconsole_write_about_edition_and_license",
@@ -1302,7 +1302,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
       <MenuStartTrial
         id="startTrial"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
     <MenuItemAction
@@ -1381,7 +1381,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
     />
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -1408,8 +1408,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
         show={false}
         text="Add Groups to Team"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "add_user_to_team",
@@ -1439,10 +1439,10 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
         show={true}
         text="Invite People"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -1469,8 +1469,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
         show={true}
         text="Team Settings"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -1502,8 +1502,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
         show={false}
         text="Manage Groups"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "remove_user_from_team",
@@ -1531,8 +1531,8 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
         show={true}
         text="Manage Members"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       invert={true}
       permissions={
         Array [
@@ -1561,10 +1561,10 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
         show={true}
         text="View Members"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "create_team",
@@ -1582,7 +1582,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
         text="Create a Team"
         to="/create_team"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
     <MenuItemLink
       icon={
         <i
@@ -1694,7 +1694,7 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
   ariaLabel="team menu"
 >
   <Memo(MenuGroup)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -1716,8 +1716,8 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
         show={false}
         text="Add Groups to Team"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "add_user_to_team",
@@ -1743,8 +1743,8 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
         show={true}
         text="Invite People"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -1766,8 +1766,8 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
         show={true}
         text="Team Settings"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -1794,8 +1794,8 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
         show={false}
         text="Manage Groups"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "remove_user_from_team",
@@ -1818,8 +1818,8 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
         show={true}
         text="Manage Members"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       invert={true}
       permissions={
         Array [
@@ -1843,7 +1843,7 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
         show={true}
         text="View Members"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
     <MenuItemLink
       id="joinTeam"
       show={false}
@@ -1867,7 +1867,7 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
     />
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "create_team",
@@ -1883,7 +1883,7 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
         text="Create a Team"
         to="/create_team"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
     <Memo(MenuGroup)>
       <div
         className="MainMenu_dropdown-link"
@@ -1916,7 +1916,7 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
   ariaLabel="main menu"
 >
   <Memo(MenuGroup)>
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "sysconsole_write_billing",
@@ -1926,10 +1926,10 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
       <MenuCloudTrial
         id="menuCloudTrial"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "sysconsole_write_about_edition_and_license",
@@ -1939,7 +1939,7 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
       <MenuStartTrial
         id="startTrial"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
     <MenuItemAction
@@ -2018,7 +2018,7 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
     />
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -2045,8 +2045,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
         show={false}
         text="Add Groups to Team"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "add_user_to_team",
@@ -2076,10 +2076,10 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
         show={true}
         text="Invite People"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -2106,8 +2106,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
         show={true}
         text="Team Settings"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "manage_team",
@@ -2139,8 +2139,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
         show={false}
         text="Manage Groups"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "remove_user_from_team",
@@ -2168,8 +2168,8 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
         show={true}
         text="Manage Members"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       invert={true}
       permissions={
         Array [
@@ -2198,10 +2198,10 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
         show={true}
         text="View Members"
       />
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
   </Memo(MenuGroup)>
   <Memo(MenuGroup)>
-    <Connect(SystemPermissionGate)
+    <Memo(SystemPermissionGate)
       permissions={
         Array [
           "create_team",
@@ -2219,7 +2219,7 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
         text="Create a Team"
         to="/create_team"
       />
-    </Connect(SystemPermissionGate)>
+    </Memo(SystemPermissionGate)>
     <MenuItemLink
       icon={
         <i

webapp/channels/src/components/permissions_gates/any_team_permission_gate.test.tsx

@@ -0,0 +1,142 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import {renderWithContext, screen} from 'tests/react_testing_utils';
+
+import AnyTeamPermissionGate from './any_team_permission_gate';
+
+describe('components/permissions_gates', () => {
+    const state = {
+        entities: {
+            channels: {
+                myMembers: {
+                    channel_id: {channel_id: 'channel_id', roles: 'channel_role'},
+                },
+            },
+            teams: {
+                teams: {
+                    team_id: {id: 'team_id', delete_at: 0},
+                    team_id2: {id: 'team_id2', delete_at: 0},
+                },
+                myMembers: {
+                    team_id: {team_id: 'team_id', roles: 'team_role'},
+                    team_id2: {team_id: 'team_id2', roles: 'team_role2'},
+                },
+            },
+            users: {
+                currentUserId: 'user_id',
+                profiles: {
+                    user_id: {
+                        id: 'user_id',
+                        roles: 'system_role',
+                    },
+                },
+            },
+            roles: {
+                roles: {
+                    system_role: {permissions: ['test_system_permission']},
+                    team_role: {permissions: ['test_team_permission']},
+                    team_role2: {permissions: ['other_permission']},
+                    channel_role: {permissions: ['test_channel_permission']},
+                },
+            },
+        },
+    };
+    const CONTENT = 'The content inside the permission gate';
+
+    describe('TeamPermissionGate', () => {
+        test('should show content when user have permission', () => {
+            renderWithContext(
+                <AnyTeamPermissionGate permissions={['test_team_permission']}>
+                    <p>{CONTENT}</p>
+                </AnyTeamPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).toBeInTheDocument();
+        });
+        test('should show content when user have the permission in other team', () => {
+            renderWithContext(
+                <AnyTeamPermissionGate permissions={['other_permission']}>
+                    <p>{CONTENT}</p>
+                </AnyTeamPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).toBeInTheDocument();
+        });
+        test('should show content when user have at least one of the permissions', () => {
+            renderWithContext(
+                <AnyTeamPermissionGate permissions={['test_team_permission', 'not_existing_permission']}>
+                    <p>{CONTENT}</p>
+                </AnyTeamPermissionGate>,
+                state,
+            );
+        });
+        test('should NOT show content when user have permission and use invert', () => {
+            renderWithContext(
+                <AnyTeamPermissionGate
+                    permissions={['test_team_permission']}
+                    invert={true}
+                >
+                    <p>{CONTENT}</p>
+                </AnyTeamPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).not.toBeInTheDocument();
+        });
+        test('should show content when user not have permission and use invert', () => {
+            renderWithContext(
+                <AnyTeamPermissionGate
+                    permissions={['invalid_permission']}
+                    invert={true}
+                >
+                    <p>{CONTENT}</p>
+                </AnyTeamPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).toBeInTheDocument();
+        });
+        test('should NOT show content when user have the permission in other team and use invert', () => {
+            renderWithContext(
+                <AnyTeamPermissionGate
+                    permissions={['other_permission']}
+                    invert={true}
+                >
+                    <p>{CONTENT}</p>
+                </AnyTeamPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).not.toBeInTheDocument();
+        });
+        test('should NOT show content when user doesn\'t have permission', () => {
+            renderWithContext(
+                <AnyTeamPermissionGate
+                    permissions={['invalid_permission']}
+                >
+                    <p>{CONTENT}</p>
+                </AnyTeamPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).not.toBeInTheDocument();
+        });
+        test('should show content when user have permission system wide', () => {
+            renderWithContext(
+                <AnyTeamPermissionGate
+                    permissions={['test_system_permission']}
+                >
+                    <p>{CONTENT}</p>
+                </AnyTeamPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).toBeInTheDocument();
+        });
+    });
+});

webapp/channels/src/components/permissions_gates/any_team_permission_gate.tsx

@@ -0,0 +1,56 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {useSelector} from 'react-redux';
+
+import type {GlobalState} from '@mattermost/types/store';
+
+import {haveITeamPermission} from 'mattermost-redux/selectors/entities/roles';
+import {getMyTeams} from 'mattermost-redux/selectors/entities/teams';
+
+import Gate from './gate';
+
+export type Props = {
+
+    /**
+     * Permissions enough to pass the gate (binary OR)
+     */
+    permissions: string[];
+
+    /**
+     * Invert the permission (used for else)
+     */
+    invert?: boolean;
+
+    /**
+     * Content protected by the permissions gate
+     */
+    children: React.ReactNode;
+};
+
+const AnyTeamPermissionGate = ({permissions, children, invert = false}: Props) => {
+    const hasPermission = useSelector((state: GlobalState) => {
+        const teams = getMyTeams(state);
+        for (const team of teams) {
+            for (const permission of permissions) {
+                if (haveITeamPermission(state, team.id, permission)) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    });
+
+    return (
+        <Gate
+            invert={invert}
+            hasPermission={hasPermission}
+        >
+            {children}
+        </Gate>
+    );
+};
+
+export default React.memo(AnyTeamPermissionGate);

webapp/channels/src/components/permissions_gates/any_team_permission_gate/__snapshots__/any_team_permission_gate.test.tsx.snap

@@ -1,299 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/permissions_gates TeamPermissionGate should match snapshot when user doesn't have permission 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(Component)
-    permissions={
-      Array [
-        "invalid_permission",
-      ]
-    }
-  >
-    <Memo(AnyTeamPermissionGate)
-      dispatch={[Function]}
-      hasPermission={false}
-      permissions={
-        Array [
-          "invalid_permission",
-        ]
-      }
-    >
-      <p />
-    </Memo(AnyTeamPermissionGate)>
-  </Connect(Component)>
-</Provider>
-`;
-
-exports[`components/permissions_gates TeamPermissionGate should match snapshot when user have at least one of the permissions 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(Component)
-    permissions={
-      Array [
-        "test_team_permission",
-        "not_existing_permission",
-      ]
-    }
-  >
-    <Memo(AnyTeamPermissionGate)
-      dispatch={[Function]}
-      hasPermission={true}
-      permissions={
-        Array [
-          "test_team_permission",
-          "not_existing_permission",
-        ]
-      }
-    >
-      <p>
-        Valid permission (shown)
-      </p>
-    </Memo(AnyTeamPermissionGate)>
-  </Connect(Component)>
-</Provider>
-`;
-
-exports[`components/permissions_gates TeamPermissionGate should match snapshot when user have permission 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(Component)
-    permissions={
-      Array [
-        "test_team_permission",
-      ]
-    }
-  >
-    <Memo(AnyTeamPermissionGate)
-      dispatch={[Function]}
-      hasPermission={true}
-      permissions={
-        Array [
-          "test_team_permission",
-        ]
-      }
-    >
-      <p>
-        Valid permission (shown)
-      </p>
-    </Memo(AnyTeamPermissionGate)>
-  </Connect(Component)>
-</Provider>
-`;
-
-exports[`components/permissions_gates TeamPermissionGate should match snapshot when user have permission and use invert 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(Component)
-    invert={true}
-    permissions={
-      Array [
-        "test_team_permission",
-      ]
-    }
-  >
-    <Memo(AnyTeamPermissionGate)
-      dispatch={[Function]}
-      hasPermission={true}
-      invert={true}
-      permissions={
-        Array [
-          "test_team_permission",
-        ]
-      }
-    >
-      <p />
-    </Memo(AnyTeamPermissionGate)>
-  </Connect(Component)>
-</Provider>
-`;
-
-exports[`components/permissions_gates TeamPermissionGate should match snapshot when user have permission system wide 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(Component)
-    permissions={
-      Array [
-        "test_system_permission",
-      ]
-    }
-  >
-    <Memo(AnyTeamPermissionGate)
-      dispatch={[Function]}
-      hasPermission={true}
-      permissions={
-        Array [
-          "test_system_permission",
-        ]
-      }
-    >
-      <p>
-        Valid permission (shown)
-      </p>
-    </Memo(AnyTeamPermissionGate)>
-  </Connect(Component)>
-</Provider>
-`;
-
-exports[`components/permissions_gates TeamPermissionGate should match snapshot when user have the permission in other team 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(Component)
-    permissions={
-      Array [
-        "other_permission",
-      ]
-    }
-  >
-    <Memo(AnyTeamPermissionGate)
-      dispatch={[Function]}
-      hasPermission={true}
-      permissions={
-        Array [
-          "other_permission",
-        ]
-      }
-    >
-      <p>
-        Valid permission (shown)
-      </p>
-    </Memo(AnyTeamPermissionGate)>
-  </Connect(Component)>
-</Provider>
-`;
-
-exports[`components/permissions_gates TeamPermissionGate should match snapshot when user have the permission in other team and use invert 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(Component)
-    invert={true}
-    permissions={
-      Array [
-        "other_permission",
-      ]
-    }
-  >
-    <Memo(AnyTeamPermissionGate)
-      dispatch={[Function]}
-      hasPermission={true}
-      invert={true}
-      permissions={
-        Array [
-          "other_permission",
-        ]
-      }
-    >
-      <p />
-    </Memo(AnyTeamPermissionGate)>
-  </Connect(Component)>
-</Provider>
-`;
-
-exports[`components/permissions_gates TeamPermissionGate should match snapshot when user not have permission and use invert 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(Component)
-    invert={true}
-    permissions={
-      Array [
-        "invalid_permission",
-      ]
-    }
-  >
-    <Memo(AnyTeamPermissionGate)
-      dispatch={[Function]}
-      hasPermission={false}
-      invert={true}
-      permissions={
-        Array [
-          "invalid_permission",
-        ]
-      }
-    >
-      <p>
-        Invalid permission but inverted (shown)
-      </p>
-    </Memo(AnyTeamPermissionGate)>
-  </Connect(Component)>
-</Provider>
-`;

webapp/channels/src/components/permissions_gates/any_team_permission_gate/any_team_permission_gate.test.tsx

@@ -1,154 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {mount} from 'enzyme';
-import React from 'react';
-import {Provider} from 'react-redux';
-
-import AnyTeamPermissionGate from 'components/permissions_gates/any_team_permission_gate';
-
-import mockStore from 'tests/test_store';
-
-describe('components/permissions_gates', () => {
-    const state = {
-        entities: {
-            channels: {
-                myMembers: {
-                    channel_id: {channel_id: 'channel_id', roles: 'channel_role'},
-                },
-            },
-            teams: {
-                teams: {
-                    team_id: {id: 'team_id', delete_at: 0},
-                    team_id2: {id: 'team_id2', delete_at: 0},
-                },
-                myMembers: {
-                    team_id: {team_id: 'team_id', roles: 'team_role'},
-                    team_id2: {team_id: 'team_id2', roles: 'team_role2'},
-                },
-            },
-            users: {
-                currentUserId: 'user_id',
-                profiles: {
-                    user_id: {
-                        id: 'user_id',
-                        roles: 'system_role',
-                    },
-                },
-            },
-            roles: {
-                roles: {
-                    system_role: {permissions: ['test_system_permission']},
-                    team_role: {permissions: ['test_team_permission']},
-                    team_role2: {permissions: ['other_permission']},
-                    channel_role: {permissions: ['test_channel_permission']},
-                },
-            },
-        },
-    };
-    const store = mockStore(state);
-
-    describe('TeamPermissionGate', () => {
-        test('should match snapshot when user have permission', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <AnyTeamPermissionGate permissions={['test_team_permission']}>
-                        <p>{'Valid permission (shown)'}</p>
-                    </AnyTeamPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user have the permission in other team', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <AnyTeamPermissionGate permissions={['other_permission']}>
-                        <p>{'Valid permission (shown)'}</p>
-                    </AnyTeamPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user have at least one of the permissions', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <AnyTeamPermissionGate permissions={['test_team_permission', 'not_existing_permission']}>
-                        <p>{'Valid permission (shown)'}</p>
-                    </AnyTeamPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user have permission and use invert', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <AnyTeamPermissionGate
-                        permissions={['test_team_permission']}
-                        invert={true}
-                    >
-                        <p>{'Valid permission but inverted (not shown)'}</p>
-                    </AnyTeamPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user not have permission and use invert', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <AnyTeamPermissionGate
-                        permissions={['invalid_permission']}
-                        invert={true}
-                    >
-                        <p>{'Invalid permission but inverted (shown)'}</p>
-                    </AnyTeamPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user have the permission in other team and use invert', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <AnyTeamPermissionGate
-                        permissions={['other_permission']}
-                        invert={true}
-                    >
-                        <p>{'Valid permission but inverted (not shown)'}</p>
-                    </AnyTeamPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user doesn\'t have permission', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <AnyTeamPermissionGate
-                        permissions={['invalid_permission']}
-                    >
-                        <p>{'Invalid permission (not shown)'}</p>
-                    </AnyTeamPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user have permission system wide', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <AnyTeamPermissionGate
-                        permissions={['test_system_permission']}
-                    >
-                        <p>{'Valid permission (shown)'}</p>
-                    </AnyTeamPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-    });
-});

webapp/channels/src/components/permissions_gates/any_team_permission_gate/any_team_permission_gate.tsx

@@ -1,37 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-
-export type Props = {
-
-    /**
-     * Permissions enough to pass the gate (binary OR)
-     */
-    permissions: string[];
-
-    /**
-     * Has permission
-     */
-    hasPermission: boolean;
-
-    /**
-     * Invert the permission (used for else)
-     */
-    invert?: boolean;
-
-    /**
-     * Content protected by the permissions gate
-     */
-    children: React.ReactNode;
-};
-
-const AnyTeamPermissionGate = ({hasPermission, children, invert = false}: Props) => {
-    return (
-        <>
-            {hasPermission === invert ? null : children}
-        </>
-    );
-};
-
-export default React.memo(AnyTeamPermissionGate);

webapp/channels/src/components/permissions_gates/any_team_permission_gate/index.ts

@@ -1,30 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {connect} from 'react-redux';
-
-import type {GlobalState} from '@mattermost/types/store';
-
-import {haveITeamPermission} from 'mattermost-redux/selectors/entities/roles';
-import {getMyTeams} from 'mattermost-redux/selectors/entities/teams';
-
-import AnyTeamPermissionGate from './any_team_permission_gate';
-
-type Props = {
-    permissions: string[];
-}
-
-function mapStateToProps(state: GlobalState, ownProps: Props) {
-    const teams = getMyTeams(state);
-    for (const team of teams) {
-        for (const permission of ownProps.permissions) {
-            if (haveITeamPermission(state, team.id, permission)) {
-                return {hasPermission: true};
-            }
-        }
-    }
-
-    return {hasPermission: false};
-}
-
-export default connect(mapStateToProps)(AnyTeamPermissionGate);

webapp/channels/src/components/permissions_gates/channel_permission_gate.test.tsx

@@ -0,0 +1,192 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import {renderWithContext, screen} from 'tests/react_testing_utils';
+
+import ChannelPermissionGate from './channel_permission_gate';
+
+describe('components/permissions_gates', () => {
+    const state = {
+        entities: {
+            channels: {
+                myMembers: {
+                    channel_id: {channel_id: 'channel_id', roles: 'channel_role'},
+                },
+                roles: {
+                    channel_id: new Set(['channel_role']),
+                },
+            },
+            teams: {
+                myMembers: {
+                    team_id: {team_id: 'team_id', roles: 'team_role'},
+                },
+            },
+            users: {
+                currentUserId: 'user_id',
+                profiles: {
+                    user_id: {
+                        id: 'user_id',
+                        roles: 'system_role',
+                    },
+                },
+            },
+            roles: {
+                roles: {
+                    system_role: {permissions: ['test_system_permission']},
+                    team_role: {permissions: ['test_team_permission']},
+                    channel_role: {permissions: ['test_channel_permission']},
+                },
+            },
+        },
+    };
+    const CONTENT = 'The content inside the permission gate';
+
+    describe('ChannelPermissionGate', () => {
+        test('should show content when user have permission', () => {
+            renderWithContext(
+                <ChannelPermissionGate
+                    channelId={'channel_id'}
+                    teamId={'team_id'}
+                    permissions={['test_channel_permission']}
+                >
+                    <p>{CONTENT}</p>
+                </ChannelPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).toBeInTheDocument();
+        });
+        test('should show content when user have at least on of the permissions', () => {
+            renderWithContext(
+                <ChannelPermissionGate
+                    channelId={'channel_id'}
+                    teamId={'team_id'}
+                    permissions={['test_channel_permission', 'not_existing_permission']}
+                >
+                    <p>{CONTENT}</p>
+                </ChannelPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).toBeInTheDocument();
+        });
+        test('should NOT show content when user have permission and use invert', () => {
+            renderWithContext(
+                <ChannelPermissionGate
+                    channelId={'channel_id'}
+                    teamId={'team_id'}
+                    permissions={['test_channel_permission']}
+                    invert={true}
+                >
+                    <p>{CONTENT}</p>
+                </ChannelPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).not.toBeInTheDocument();
+        });
+        test('should show content when user not have permission and use invert', () => {
+            renderWithContext(
+                <ChannelPermissionGate
+                    channelId={'channel_id'}
+                    teamId={'team_id'}
+                    permissions={['invalid_permission']}
+                    invert={true}
+                >
+                    <p>{CONTENT}</p>
+                </ChannelPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).toBeInTheDocument();
+        });
+        test('should NOT show content when user haven\'t permission', () => {
+            renderWithContext(
+                <ChannelPermissionGate
+                    channelId={'channel_id'}
+                    teamId={'team_id'}
+                    permissions={['invalid_permission']}
+                >
+                    <p>{CONTENT}</p>
+                </ChannelPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).not.toBeInTheDocument();
+        });
+        test('should NOT show content when the channel doesn\'t exists', () => {
+            renderWithContext(
+                <ChannelPermissionGate
+                    channelId={'invalid_id'}
+                    teamId={'team_id'}
+                    permissions={['test_channel_permission']}
+                >
+                    <p>{CONTENT}</p>
+                </ChannelPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).not.toBeInTheDocument();
+        });
+        test('should show content when user have permission team wide', () => {
+            renderWithContext(
+                <ChannelPermissionGate
+                    channelId={'channel_id'}
+                    teamId={'team_id'}
+                    permissions={['test_team_permission']}
+                >
+                    <p>{CONTENT}</p>
+                </ChannelPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).toBeInTheDocument();
+        });
+        test('should show content when user have permission system wide', () => {
+            renderWithContext(
+                <ChannelPermissionGate
+                    channelId={'channel_id'}
+                    teamId={'team_id'}
+                    permissions={['test_system_permission']}
+                >
+                    <p>{CONTENT}</p>
+                </ChannelPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).toBeInTheDocument();
+        });
+
+        test('should show content when user have permissions in DM and GM', () => {
+            renderWithContext(
+                <ChannelPermissionGate
+                    channelId={'channel_id'}
+                    teamId={''}
+                    permissions={['test_channel_permission']}
+                >
+                    <p>{CONTENT}</p>
+                </ChannelPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).toBeInTheDocument();
+        });
+
+        test('should NOT show content when user does not have permissions in DM and GM', () => {
+            renderWithContext(
+                <ChannelPermissionGate
+                    channelId={'channel_id'}
+                    teamId={''}
+                    permissions={['invalid_permission']}
+                >
+                    <p>{CONTENT}</p>
+                </ChannelPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).not.toBeInTheDocument();
+        });
+    });
+});

webapp/channels/src/components/permissions_gates/channel_permission_gate.tsx

@@ -0,0 +1,64 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {useSelector} from 'react-redux';
+
+import type {GlobalState} from '@mattermost/types/store';
+
+import {haveIChannelPermission} from 'mattermost-redux/selectors/entities/roles';
+
+import Gate from './gate';
+
+type Props = {
+
+    /**
+     * Channel to check the permission
+     */
+    channelId?: string;
+
+    /**
+     * Team to check the permission
+     */
+    teamId?: string;
+
+    /**
+     * Permissions enough to pass the gate (binary OR)
+     */
+    permissions: string[];
+
+    /**
+     * Invert the permission (used for else)
+     */
+    invert?: boolean;
+
+    /**
+     * Content protected by the permissions gate
+     */
+    children: React.ReactNode;
+}
+
+const ChannelPermissionGate = ({channelId, teamId, permissions, children, invert = false}: Props) => {
+    const hasPermission = useSelector((state: GlobalState) => {
+        if (!channelId || teamId === null || typeof teamId === 'undefined') {
+            return false;
+        }
+        for (const permission of permissions) {
+            if (haveIChannelPermission(state, teamId, channelId, permission)) {
+                return true;
+            }
+        }
+        return false;
+    });
+
+    return (
+        <Gate
+            invert={invert}
+            hasPermission={hasPermission}
+        >
+            {children}
+        </Gate>
+    );
+};
+
+export default React.memo(ChannelPermissionGate);

webapp/channels/src/components/permissions_gates/channel_permission_gate/__snapshots__/channel_permission_gate.test.tsx.snap

@@ -1,408 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/permissions_gates ChannelPermissionGate should match snapshot when the channel doesn't exists 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(Component)
-    channelId="invalid_id"
-    permissions={
-      Array [
-        "test_channel_permission",
-      ]
-    }
-    teamId="team_id"
-  >
-    <Memo(ChannelPermissionGate)
-      channelId="invalid_id"
-      dispatch={[Function]}
-      hasPermission={false}
-      permissions={
-        Array [
-          "test_channel_permission",
-        ]
-      }
-      teamId="team_id"
-    >
-      <p />
-    </Memo(ChannelPermissionGate)>
-  </Connect(Component)>
-</Provider>
-`;
-
-exports[`components/permissions_gates ChannelPermissionGate should match snapshot when user does not have permissions in DM and GM 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(Component)
-    channelId="channel_id"
-    permissions={
-      Array [
-        "invalid_permission",
-      ]
-    }
-    teamId=""
-  >
-    <Memo(ChannelPermissionGate)
-      channelId="channel_id"
-      dispatch={[Function]}
-      hasPermission={false}
-      permissions={
-        Array [
-          "invalid_permission",
-        ]
-      }
-      teamId=""
-    >
-      <p />
-    </Memo(ChannelPermissionGate)>
-  </Connect(Component)>
-</Provider>
-`;
-
-exports[`components/permissions_gates ChannelPermissionGate should match snapshot when user have at least on of the permissions 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(TeamPermissionGate)
-    permissions={
-      Array [
-        "test_team_permission",
-        "not_existing_permission",
-      ]
-    }
-    teamId="team_id"
-  >
-    <TeamPermissionGate
-      dispatch={[Function]}
-      hasPermission={true}
-      invert={false}
-      permissions={
-        Array [
-          "test_team_permission",
-          "not_existing_permission",
-        ]
-      }
-      teamId="team_id"
-    >
-      <p>
-        Valid permission (shown)
-      </p>
-    </TeamPermissionGate>
-  </Connect(TeamPermissionGate)>
-</Provider>
-`;
-
-exports[`components/permissions_gates ChannelPermissionGate should match snapshot when user have permission 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(Component)
-    channelId="channel_id"
-    permissions={
-      Array [
-        "test_channel_permission",
-      ]
-    }
-    teamId="team_id"
-  >
-    <Memo(ChannelPermissionGate)
-      channelId="channel_id"
-      dispatch={[Function]}
-      hasPermission={true}
-      permissions={
-        Array [
-          "test_channel_permission",
-        ]
-      }
-      teamId="team_id"
-    >
-      <p>
-        Valid permission (shown)
-      </p>
-    </Memo(ChannelPermissionGate)>
-  </Connect(Component)>
-</Provider>
-`;
-
-exports[`components/permissions_gates ChannelPermissionGate should match snapshot when user have permission and use invert 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(Component)
-    channelId="channel_id"
-    invert={true}
-    permissions={
-      Array [
-        "test_channel_permission",
-      ]
-    }
-    teamId="team_id"
-  >
-    <Memo(ChannelPermissionGate)
-      channelId="channel_id"
-      dispatch={[Function]}
-      hasPermission={true}
-      invert={true}
-      permissions={
-        Array [
-          "test_channel_permission",
-        ]
-      }
-      teamId="team_id"
-    >
-      <p />
-    </Memo(ChannelPermissionGate)>
-  </Connect(Component)>
-</Provider>
-`;
-
-exports[`components/permissions_gates ChannelPermissionGate should match snapshot when user have permission system wide 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(Component)
-    channelId="channel_id"
-    permissions={
-      Array [
-        "test_system_permission",
-      ]
-    }
-    teamId="team_id"
-  >
-    <Memo(ChannelPermissionGate)
-      channelId="channel_id"
-      dispatch={[Function]}
-      hasPermission={true}
-      permissions={
-        Array [
-          "test_system_permission",
-        ]
-      }
-      teamId="team_id"
-    >
-      <p>
-        Valid permission (shown)
-      </p>
-    </Memo(ChannelPermissionGate)>
-  </Connect(Component)>
-</Provider>
-`;
-
-exports[`components/permissions_gates ChannelPermissionGate should match snapshot when user have permission team wide 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(Component)
-    channelId="channel_id"
-    permissions={
-      Array [
-        "test_team_permission",
-      ]
-    }
-    teamId="team_id"
-  >
-    <Memo(ChannelPermissionGate)
-      channelId="channel_id"
-      dispatch={[Function]}
-      hasPermission={true}
-      permissions={
-        Array [
-          "test_team_permission",
-        ]
-      }
-      teamId="team_id"
-    >
-      <p>
-        Valid permission (shown)
-      </p>
-    </Memo(ChannelPermissionGate)>
-  </Connect(Component)>
-</Provider>
-`;
-
-exports[`components/permissions_gates ChannelPermissionGate should match snapshot when user have permissions in DM and GM 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(Component)
-    channelId="channel_id"
-    permissions={
-      Array [
-        "test_channel_permission",
-      ]
-    }
-    teamId=""
-  >
-    <Memo(ChannelPermissionGate)
-      channelId="channel_id"
-      dispatch={[Function]}
-      hasPermission={true}
-      permissions={
-        Array [
-          "test_channel_permission",
-        ]
-      }
-      teamId=""
-    >
-      <p>
-        Valid permission (shown)
-      </p>
-    </Memo(ChannelPermissionGate)>
-  </Connect(Component)>
-</Provider>
-`;
-
-exports[`components/permissions_gates ChannelPermissionGate should match snapshot when user haven't permission 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(Component)
-    channelId="channel_id"
-    permissions={
-      Array [
-        "invalid_permission",
-      ]
-    }
-    teamId="team_id"
-  >
-    <Memo(ChannelPermissionGate)
-      channelId="channel_id"
-      dispatch={[Function]}
-      hasPermission={false}
-      permissions={
-        Array [
-          "invalid_permission",
-        ]
-      }
-      teamId="team_id"
-    >
-      <p />
-    </Memo(ChannelPermissionGate)>
-  </Connect(Component)>
-</Provider>
-`;
-
-exports[`components/permissions_gates ChannelPermissionGate should match snapshot when user not have permission and use invert 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(Component)
-    channelId="channel_id"
-    invert={true}
-    permissions={
-      Array [
-        "invalid_permission",
-      ]
-    }
-    teamId="team_id"
-  >
-    <Memo(ChannelPermissionGate)
-      channelId="channel_id"
-      dispatch={[Function]}
-      hasPermission={false}
-      invert={true}
-      permissions={
-        Array [
-          "invalid_permission",
-        ]
-      }
-      teamId="team_id"
-    >
-      <p>
-        Invalid permission but inverted (shown)
-      </p>
-    </Memo(ChannelPermissionGate)>
-  </Connect(Component)>
-</Provider>
-`;

webapp/channels/src/components/permissions_gates/channel_permission_gate/channel_permission_gate.test.tsx

@@ -1,204 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {mount} from 'enzyme';
-import React from 'react';
-import {Provider} from 'react-redux';
-
-import ChannelPermissionGate from 'components/permissions_gates/channel_permission_gate';
-import TeamPermissionGate from 'components/permissions_gates/team_permission_gate';
-
-import mockStore from 'tests/test_store';
-
-describe('components/permissions_gates', () => {
-    const state = {
-        entities: {
-            channels: {
-                myMembers: {
-                    channel_id: {channel_id: 'channel_id', roles: 'channel_role'},
-                },
-                roles: {
-                    channel_id: new Set(['channel_role']),
-                },
-            },
-            teams: {
-                myMembers: {
-                    team_id: {team_id: 'team_id', roles: 'team_role'},
-                },
-            },
-            users: {
-                currentUserId: 'user_id',
-                profiles: {
-                    user_id: {
-                        id: 'user_id',
-                        roles: 'system_role',
-                    },
-                },
-            },
-            roles: {
-                roles: {
-                    system_role: {permissions: ['test_system_permission']},
-                    team_role: {permissions: ['test_team_permission']},
-                    channel_role: {permissions: ['test_channel_permission']},
-                },
-            },
-        },
-    };
-    const store = mockStore(state);
-
-    describe('ChannelPermissionGate', () => {
-        test('should match snapshot when user have permission', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <ChannelPermissionGate
-                        channelId={'channel_id'}
-                        teamId={'team_id'}
-                        permissions={['test_channel_permission']}
-                    >
-                        <p>{'Valid permission (shown)'}</p>
-                    </ChannelPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user have at least on of the permissions', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <TeamPermissionGate
-                        teamId={'team_id'}
-                        permissions={['test_team_permission', 'not_existing_permission']}
-                    >
-                        <p>{'Valid permission (shown)'}</p>
-                    </TeamPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user have permission and use invert', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <ChannelPermissionGate
-                        channelId={'channel_id'}
-                        teamId={'team_id'}
-                        permissions={['test_channel_permission']}
-                        invert={true}
-                    >
-                        <p>{'Valid permission but inverted (not shown)'}</p>
-                    </ChannelPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user not have permission and use invert', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <ChannelPermissionGate
-                        channelId={'channel_id'}
-                        teamId={'team_id'}
-                        permissions={['invalid_permission']}
-                        invert={true}
-                    >
-                        <p>{'Invalid permission but inverted (shown)'}</p>
-                    </ChannelPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user haven\'t permission', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <ChannelPermissionGate
-                        channelId={'channel_id'}
-                        teamId={'team_id'}
-                        permissions={['invalid_permission']}
-                    >
-                        <p>{'Invalid permission (not shown)'}</p>
-                    </ChannelPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when the channel doesn\'t exists', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <ChannelPermissionGate
-                        channelId={'invalid_id'}
-                        teamId={'team_id'}
-                        permissions={['test_channel_permission']}
-                    >
-                        <p>{'Valid permission invalid channel (not shown)'}</p>
-                    </ChannelPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user have permission team wide', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <ChannelPermissionGate
-                        channelId={'channel_id'}
-                        teamId={'team_id'}
-                        permissions={['test_team_permission']}
-                    >
-                        <p>{'Valid permission (shown)'}</p>
-                    </ChannelPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user have permission system wide', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <ChannelPermissionGate
-                        channelId={'channel_id'}
-                        teamId={'team_id'}
-                        permissions={['test_system_permission']}
-                    >
-                        <p>{'Valid permission (shown)'}</p>
-                    </ChannelPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-
-        test('should match snapshot when user have permissions in DM and GM', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <ChannelPermissionGate
-                        channelId={'channel_id'}
-                        teamId={''}
-                        permissions={['test_channel_permission']}
-                    >
-                        <p>{'Valid permission (shown)'}</p>
-                    </ChannelPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-
-        test('should match snapshot when user does not have permissions in DM and GM', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <ChannelPermissionGate
-                        channelId={'channel_id'}
-                        teamId={''}
-                        permissions={['invalid_permission']}
-                    >
-                        <p>{'Invalid permission (not shown)'}</p>
-                    </ChannelPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-    });
-});

webapp/channels/src/components/permissions_gates/channel_permission_gate/channel_permission_gate.tsx

@@ -1,46 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-
-type Props = {
-
-    /**
-     * Channel to check the permission
-     */
-    channelId?: string;
-
-    /**
-     * Team to check the permission
-     */
-    teamId?: string;
-
-    /**
-     * Permissions enough to pass the gate (binary OR)
-     */
-    permissions: string[];
-
-    /**
-     * Has permission
-     */
-    hasPermission: boolean;
-
-    /**
-     * Invert the permission (used for else)
-     */
-    invert?: boolean;
-
-    /**
-     * Content protected by the permissions gate
-     */
-    children: React.ReactNode;
-}
-
-const ChannelPermissionGate = ({hasPermission, children, invert = false}: Props) => {
-    if (hasPermission !== invert) {
-        return <>{children}</>;
-    }
-    return null;
-};
-
-export default React.memo(ChannelPermissionGate);

webapp/channels/src/components/permissions_gates/channel_permission_gate/index.ts

@@ -1,32 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {connect} from 'react-redux';
-
-import type {GlobalState} from '@mattermost/types/store';
-
-import {haveIChannelPermission} from 'mattermost-redux/selectors/entities/roles';
-
-import ChannelPermissionGate from './channel_permission_gate';
-
-type Props = {
-    channelId?: string;
-    teamId?: string;
-    permissions: string[];
-}
-
-function mapStateToProps(state: GlobalState, ownProps: Props) {
-    if (!ownProps.channelId || ownProps.teamId === null || typeof ownProps.teamId === 'undefined') {
-        return {hasPermission: false};
-    }
-
-    for (const permission of ownProps.permissions) {
-        if (haveIChannelPermission(state, ownProps.teamId, ownProps.channelId, permission)) {
-            return {hasPermission: true};
-        }
-    }
-
-    return {hasPermission: false};
-}
-
-export default connect(mapStateToProps)(ChannelPermissionGate);

webapp/channels/src/components/permissions_gates/channel_permission_gate/mattermost.code-workspace

@@ -1,20 +0,0 @@
-{
-  "folders": [
-    {
-      "path": "../../../../wp-calypso"
-    },
-    {
-      "path": "../../../../wk9"
-    },
-    {
-      "path": "../../.."
-    },
-    {
-      "path": "../../../../mattermost-server"
-    },
-    {
-      "path": "../../../../../Desktop/Coursera/confusion-master"
-    }
-  ],
-  "settings": {}
-}

webapp/channels/src/components/permissions_gates/gate.test.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import {render, screen} from 'tests/react_testing_utils';
+
+import Gate from './gate';
+
+describe('components/permissions_gates', () => {
+    const CONTENT = 'The content inside the permission gate';
+
+    describe('Gate', () => {
+        for (const hasPermission of [true, false]) {
+            for (const invert of [true, false]) {
+                test(`hasPermission=${hasPermission}; invert=${invert}; expected=${invert !== hasPermission}`, () => {
+                    render(
+                        <Gate
+                            hasPermission={hasPermission}
+                            invert={invert}
+                        >
+                            <p>{CONTENT}</p>
+                        </Gate>,
+                    );
+                    if (invert === hasPermission) {
+                        expect(screen.queryByText(CONTENT)).not.toBeInTheDocument();
+                    } else {
+                        expect(screen.queryByText(CONTENT)).toBeInTheDocument();
+                    }
+                });
+            }
+        }
+    });
+});

webapp/channels/src/components/permissions_gates/gate.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+type Props = {
+    hasPermission: boolean;
+    invert?: boolean;
+    children: React.ReactNode;
+}
+
+const Gate = ({
+    hasPermission,
+    invert,
+    children,
+}: Props) => {
+    if (hasPermission !== invert) {
+        return <>{children}</>;
+    }
+    return null;
+};
+
+export default Gate;

webapp/channels/src/components/permissions_gates/system_permission_gate.test.tsx

@@ -0,0 +1,101 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import {renderWithContext, screen} from 'tests/react_testing_utils';
+
+import SystemPermissionGate from './system_permission_gate';
+
+describe('components/permissions_gates', () => {
+    const state = {
+        entities: {
+            channels: {
+                myMembers: {
+                    channel_id: {channel_id: 'channel_id', roles: 'channel_role'},
+                },
+            },
+            teams: {
+                myMembers: {
+                    team_id: {team_id: 'team_id', roles: 'team_role'},
+                },
+            },
+            users: {
+                currentUserId: 'user_id',
+                profiles: {
+                    user_id: {
+                        id: 'user_id',
+                        roles: 'system_role',
+                    },
+                },
+            },
+            roles: {
+                roles: {
+                    system_role: {permissions: ['test_system_permission']},
+                    team_role: {permissions: ['test_team_permission']},
+                    channel_role: {permissions: ['test_channel_permission']},
+                },
+            },
+        },
+    };
+    const CONTENT = 'The content inside the permission gate';
+
+    describe('SystemPermissionGate', () => {
+        test('should show content when user have permission', () => {
+            renderWithContext(
+                <SystemPermissionGate permissions={['test_system_permission']}>
+                    <p>{CONTENT}</p>
+                </SystemPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).toBeInTheDocument();
+        });
+        test('should show content when user have at least on of the permissions', () => {
+            renderWithContext(
+                <SystemPermissionGate permissions={['test_system_permission', 'not_existing_permission']}>
+                    <p>{CONTENT}</p>
+                </SystemPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).toBeInTheDocument();
+        });
+        test('should NOT show content when user have permission and use invert', () => {
+            renderWithContext(
+                <SystemPermissionGate
+                    permissions={['test_system_permission']}
+                    invert={true}
+                >
+                    <p>{CONTENT}</p>
+                </SystemPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).not.toBeInTheDocument();
+        });
+        test('should show content when user not have permission and use invert', () => {
+            renderWithContext(
+                <SystemPermissionGate
+                    permissions={['invalid_permission']}
+                    invert={true}
+                >
+                    <p>{CONTENT}</p>
+                </SystemPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).toBeInTheDocument();
+        });
+        test('should NOT show content when user haven\'t permission', () => {
+            renderWithContext(
+                <SystemPermissionGate permissions={['invalid_permission']}>
+                    <p>{CONTENT}</p>
+                </SystemPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).not.toBeInTheDocument();
+        });
+    });
+});

webapp/channels/src/components/permissions_gates/system_permission_gate.tsx

@@ -0,0 +1,52 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {useSelector} from 'react-redux';
+
+import type {GlobalState} from '@mattermost/types/store';
+
+import {haveISystemPermission} from 'mattermost-redux/selectors/entities/roles_helpers';
+
+import Gate from './gate';
+
+type Props = {
+    permissions: string[];
+
+    /**
+     * Invert the permission (used for else)
+     */
+    invert?: boolean;
+
+    /**
+     * Content protected by the permissions gate
+     */
+    children: React.ReactNode;
+};
+
+const SystemPermissionGate = ({
+    invert = false,
+    permissions,
+    children,
+}: Props) => {
+    const hasPermission = useSelector((state: GlobalState) => {
+        for (const permission of permissions) {
+            if (haveISystemPermission(state, {permission})) {
+                return true;
+            }
+        }
+
+        return false;
+    });
+
+    return (
+        <Gate
+            invert={invert}
+            hasPermission={hasPermission}
+        >
+            {children}
+        </Gate>
+    );
+};
+
+export default React.memo(SystemPermissionGate);

webapp/channels/src/components/permissions_gates/system_permission_gate/__snapshots__/system_permission_gate.test.tsx.snap

@@ -1,184 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/permissions_gates SystemPermissionGate should match snapshot when user have at least on of the permissions 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(SystemPermissionGate)
-    permissions={
-      Array [
-        "test_system_permission",
-        "not_existing_permission",
-      ]
-    }
-  >
-    <SystemPermissionGate
-      dispatch={[Function]}
-      hasPermission={true}
-      permissions={
-        Array [
-          "test_system_permission",
-          "not_existing_permission",
-        ]
-      }
-    >
-      <p>
-        Valid permission (shown)
-      </p>
-    </SystemPermissionGate>
-  </Connect(SystemPermissionGate)>
-</Provider>
-`;
-
-exports[`components/permissions_gates SystemPermissionGate should match snapshot when user have permission 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(SystemPermissionGate)
-    permissions={
-      Array [
-        "test_system_permission",
-      ]
-    }
-  >
-    <SystemPermissionGate
-      dispatch={[Function]}
-      hasPermission={true}
-      permissions={
-        Array [
-          "test_system_permission",
-        ]
-      }
-    >
-      <p>
-        Valid permission (shown)
-      </p>
-    </SystemPermissionGate>
-  </Connect(SystemPermissionGate)>
-</Provider>
-`;
-
-exports[`components/permissions_gates SystemPermissionGate should match snapshot when user have permission and use invert 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(SystemPermissionGate)
-    invert={true}
-    permissions={
-      Array [
-        "test_system_permission",
-      ]
-    }
-  >
-    <SystemPermissionGate
-      dispatch={[Function]}
-      hasPermission={true}
-      invert={true}
-      permissions={
-        Array [
-          "test_system_permission",
-        ]
-      }
-    />
-  </Connect(SystemPermissionGate)>
-</Provider>
-`;
-
-exports[`components/permissions_gates SystemPermissionGate should match snapshot when user haven't permission 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(SystemPermissionGate)
-    permissions={
-      Array [
-        "invalid_permission",
-      ]
-    }
-  >
-    <SystemPermissionGate
-      dispatch={[Function]}
-      hasPermission={false}
-      permissions={
-        Array [
-          "invalid_permission",
-        ]
-      }
-    />
-  </Connect(SystemPermissionGate)>
-</Provider>
-`;
-
-exports[`components/permissions_gates SystemPermissionGate should match snapshot when user not have permission and use invert 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(SystemPermissionGate)
-    invert={true}
-    permissions={
-      Array [
-        "invalid_permission",
-      ]
-    }
-  >
-    <SystemPermissionGate
-      dispatch={[Function]}
-      hasPermission={false}
-      invert={true}
-      permissions={
-        Array [
-          "invalid_permission",
-        ]
-      }
-    >
-      <p>
-        Invalid permission but inverted (shown)
-      </p>
-    </SystemPermissionGate>
-  </Connect(SystemPermissionGate)>
-</Provider>
-`;

webapp/channels/src/components/permissions_gates/system_permission_gate/index.ts

@@ -1,25 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {connect} from 'react-redux';
-
-import {haveISystemPermission} from 'mattermost-redux/selectors/entities/roles';
-
-import type {GlobalState} from 'types/store';
-
-import SystemPermissionGate from './system_permission_gate';
-
-type Props = {
-    permissions: string[];
-}
-function mapStateToProps(state: GlobalState, ownProps: Props) {
-    for (const permission of ownProps.permissions) {
-        if (haveISystemPermission(state, {permission})) {
-            return {hasPermission: true};
-        }
-    }
-
-    return {hasPermission: false};
-}
-
-export default connect(mapStateToProps)(SystemPermissionGate);

webapp/channels/src/components/permissions_gates/system_permission_gate/system_permission_gate.test.tsx

@@ -1,108 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {mount} from 'enzyme';
-import React from 'react';
-import {Provider} from 'react-redux';
-
-import SystemPermissionGate from 'components/permissions_gates/system_permission_gate';
-
-import mockStore from 'tests/test_store';
-
-describe('components/permissions_gates', () => {
-    const state = {
-        entities: {
-            channels: {
-                myMembers: {
-                    channel_id: {channel_id: 'channel_id', roles: 'channel_role'},
-                },
-            },
-            teams: {
-                myMembers: {
-                    team_id: {team_id: 'team_id', roles: 'team_role'},
-                },
-            },
-            users: {
-                currentUserId: 'user_id',
-                profiles: {
-                    user_id: {
-                        id: 'user_id',
-                        roles: 'system_role',
-                    },
-                },
-            },
-            roles: {
-                roles: {
-                    system_role: {permissions: ['test_system_permission']},
-                    team_role: {permissions: ['test_team_permission']},
-                    channel_role: {permissions: ['test_channel_permission']},
-                },
-            },
-        },
-    };
-    const store = mockStore(state);
-
-    describe('SystemPermissionGate', () => {
-        test('should match snapshot when user have permission', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <SystemPermissionGate permissions={['test_system_permission']}>
-                        <p>{'Valid permission (shown)'}</p>
-                    </SystemPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user have at least on of the permissions', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <SystemPermissionGate permissions={['test_system_permission', 'not_existing_permission']}>
-                        <p>{'Valid permission (shown)'}</p>
-                    </SystemPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user have permission and use invert', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <SystemPermissionGate
-                        permissions={['test_system_permission']}
-                        invert={true}
-                    >
-                        <p>{'Valid permission but inverted (not shown)'}</p>
-                    </SystemPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user not have permission and use invert', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <SystemPermissionGate
-                        permissions={['invalid_permission']}
-                        invert={true}
-                    >
-                        <p>{'Invalid permission but inverted (shown)'}</p>
-                    </SystemPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user haven\'t permission', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <SystemPermissionGate permissions={['invalid_permission']}>
-                        <p>{'Invalid permission (not shown)'}</p>
-                    </SystemPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-    });
-});

webapp/channels/src/components/permissions_gates/system_permission_gate/system_permission_gate.tsx

@@ -1,39 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-
-type Props = {
-    permissions: string[];
-
-    /**
-     * Has permission
-     * This prop is will always be passed by the mapStateToProps function
-     * it should be required when this component is converted to TS, for now its optional to make the TS compiler quite.
-     * about this prop not being passed from where this component is used
-     */
-    hasPermission: boolean;
-
-    /**
-     * Invert the permission (used for else)
-     */
-    invert?: boolean;
-
-    /**
-     * Content protected by the permissions gate
-     */
-    children: React.ReactNode;
-};
-
-const SystemPermissionGate = ({
-    invert = false,
-    hasPermission,
-    children,
-}: Props) => {
-    if (hasPermission !== invert) {
-        return <>{children}</>;
-    }
-    return null;
-};
-
-export default SystemPermissionGate;

webapp/channels/src/components/permissions_gates/team_permission_gate.test.tsx

@@ -0,0 +1,138 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import {renderWithContext, screen} from 'tests/react_testing_utils';
+
+import TeamPermissionGate from './team_permission_gate';
+
+describe('components/permissions_gates', () => {
+    const state = {
+        entities: {
+            channels: {
+                myMembers: {
+                    channel_id: {channel_id: 'channel_id', roles: 'channel_role'},
+                },
+            },
+            teams: {
+                myMembers: {
+                    team_id: {team_id: 'team_id', roles: 'team_role'},
+                },
+            },
+            users: {
+                currentUserId: 'user_id',
+                profiles: {
+                    user_id: {
+                        id: 'user_id',
+                        roles: 'system_role',
+                    },
+                },
+            },
+            roles: {
+                roles: {
+                    system_role: {permissions: ['test_system_permission']},
+                    team_role: {permissions: ['test_team_permission']},
+                    channel_role: {permissions: ['test_channel_permission']},
+                },
+            },
+        },
+    };
+    const CONTENT = 'The content inside the permission gate';
+
+    describe('TeamPermissionGate', () => {
+        test('should show content when user have permission', () => {
+            renderWithContext(
+                <TeamPermissionGate
+                    teamId={'team_id'}
+                    permissions={['test_team_permission']}
+                >
+                    <p>{CONTENT}</p>
+                </TeamPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).toBeInTheDocument();
+        });
+        test('should show content when user have at least on of the permissions', () => {
+            renderWithContext(
+                <TeamPermissionGate
+                    teamId={'team_id'}
+                    permissions={['test_team_permission', 'not_existing_permission']}
+                >
+                    <p>{CONTENT}</p>
+                </TeamPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).toBeInTheDocument();
+        });
+        test('should NOT show content when user have permission and use invert', () => {
+            renderWithContext(
+                <TeamPermissionGate
+                    teamId={'team_id'}
+                    permissions={['test_team_permission']}
+                    invert={true}
+                >
+                    <p>{CONTENT}</p>
+                </TeamPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).not.toBeInTheDocument();
+        });
+        test('should show content when user not have permission and use invert', () => {
+            renderWithContext(
+                <TeamPermissionGate
+                    teamId={'team_id'}
+                    permissions={['invalid_permission']}
+                    invert={true}
+                >
+                    <p>{CONTENT}</p>
+                </TeamPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).toBeInTheDocument();
+        });
+        test('should NOT show content when user haven\'t permission', () => {
+            renderWithContext(
+                <TeamPermissionGate
+                    teamId={'team_id'}
+                    permissions={['invalid_permission']}
+                >
+                    <p>{CONTENT}</p>
+                </TeamPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).not.toBeInTheDocument();
+        });
+        test('should NOT show content when the team doesn\'t exists', () => {
+            renderWithContext(
+                <TeamPermissionGate
+                    teamId={'invalid_id'}
+                    permissions={['test_team_permission']}
+                >
+                    <p>{CONTENT}</p>
+                </TeamPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).not.toBeInTheDocument();
+        });
+        test('should show content when user have permission system wide', () => {
+            renderWithContext(
+                <TeamPermissionGate
+                    teamId={'team_id'}
+                    permissions={['test_system_permission']}
+                >
+                    <p>{CONTENT}</p>
+                </TeamPermissionGate>,
+                state,
+            );
+
+            expect(screen.queryByText(CONTENT)).toBeInTheDocument();
+        });
+    });
+});

webapp/channels/src/components/permissions_gates/team_permission_gate.tsx

@@ -0,0 +1,66 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {useSelector} from 'react-redux';
+
+import {haveITeamPermission} from 'mattermost-redux/selectors/entities/roles';
+
+import type {GlobalState} from 'types/store';
+
+import Gate from './gate';
+
+type Props = {
+
+    /**
+     * Team to check the permission
+     */
+    teamId?: string;
+
+    /**
+     * Permissions enough to pass the gate (binary OR)
+     */
+    permissions: string[];
+
+    /**
+     * Invert the permission (used for else)
+     */
+    invert?: boolean;
+
+    /**
+     * Content protected by the permissions gate
+     */
+    children: React.ReactNode;
+};
+
+const TeamPermissionGate = ({
+    teamId,
+    permissions,
+    invert = false,
+    children,
+}: Props) => {
+    const hasPermission = useSelector((state: GlobalState) => {
+        if (!teamId) {
+            return false;
+        }
+
+        for (const permission of permissions) {
+            if (haveITeamPermission(state, teamId, permission)) {
+                return true;
+            }
+        }
+
+        return false;
+    });
+
+    return (
+        <Gate
+            invert={invert}
+            hasPermission={hasPermission}
+        >
+            {children}
+        </Gate>
+    );
+};
+
+export default React.memo(TeamPermissionGate);

webapp/channels/src/components/permissions_gates/team_permission_gate/__snapshots__/team_permission_gate.test.tsx.snap

@@ -1,273 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/permissions_gates TeamPermissionGate should match snapshot when the team doesn't exists 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(TeamPermissionGate)
-    permissions={
-      Array [
-        "test_team_permission",
-      ]
-    }
-    teamId="invalid_id"
-  >
-    <TeamPermissionGate
-      dispatch={[Function]}
-      hasPermission={false}
-      invert={false}
-      permissions={
-        Array [
-          "test_team_permission",
-        ]
-      }
-      teamId="invalid_id"
-    />
-  </Connect(TeamPermissionGate)>
-</Provider>
-`;
-
-exports[`components/permissions_gates TeamPermissionGate should match snapshot when user have at least on of the permissions 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(TeamPermissionGate)
-    permissions={
-      Array [
-        "test_team_permission",
-        "not_existing_permission",
-      ]
-    }
-    teamId="team_id"
-  >
-    <TeamPermissionGate
-      dispatch={[Function]}
-      hasPermission={true}
-      invert={false}
-      permissions={
-        Array [
-          "test_team_permission",
-          "not_existing_permission",
-        ]
-      }
-      teamId="team_id"
-    >
-      <p>
-        Valid permission (shown)
-      </p>
-    </TeamPermissionGate>
-  </Connect(TeamPermissionGate)>
-</Provider>
-`;
-
-exports[`components/permissions_gates TeamPermissionGate should match snapshot when user have permission 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(TeamPermissionGate)
-    permissions={
-      Array [
-        "test_team_permission",
-      ]
-    }
-    teamId="team_id"
-  >
-    <TeamPermissionGate
-      dispatch={[Function]}
-      hasPermission={true}
-      invert={false}
-      permissions={
-        Array [
-          "test_team_permission",
-        ]
-      }
-      teamId="team_id"
-    >
-      <p>
-        Valid permission (shown)
-      </p>
-    </TeamPermissionGate>
-  </Connect(TeamPermissionGate)>
-</Provider>
-`;
-
-exports[`components/permissions_gates TeamPermissionGate should match snapshot when user have permission and use invert 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(TeamPermissionGate)
-    invert={true}
-    permissions={
-      Array [
-        "test_team_permission",
-      ]
-    }
-    teamId="team_id"
-  >
-    <TeamPermissionGate
-      dispatch={[Function]}
-      hasPermission={true}
-      invert={true}
-      permissions={
-        Array [
-          "test_team_permission",
-        ]
-      }
-      teamId="team_id"
-    />
-  </Connect(TeamPermissionGate)>
-</Provider>
-`;
-
-exports[`components/permissions_gates TeamPermissionGate should match snapshot when user have permission system wide 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(TeamPermissionGate)
-    permissions={
-      Array [
-        "test_system_permission",
-      ]
-    }
-    teamId="team_id"
-  >
-    <TeamPermissionGate
-      dispatch={[Function]}
-      hasPermission={true}
-      invert={false}
-      permissions={
-        Array [
-          "test_system_permission",
-        ]
-      }
-      teamId="team_id"
-    >
-      <p>
-        Valid permission (shown)
-      </p>
-    </TeamPermissionGate>
-  </Connect(TeamPermissionGate)>
-</Provider>
-`;
-
-exports[`components/permissions_gates TeamPermissionGate should match snapshot when user haven't permission 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(TeamPermissionGate)
-    permissions={
-      Array [
-        "invalid_permission",
-      ]
-    }
-    teamId="team_id"
-  >
-    <TeamPermissionGate
-      dispatch={[Function]}
-      hasPermission={false}
-      invert={false}
-      permissions={
-        Array [
-          "invalid_permission",
-        ]
-      }
-      teamId="team_id"
-    />
-  </Connect(TeamPermissionGate)>
-</Provider>
-`;
-
-exports[`components/permissions_gates TeamPermissionGate should match snapshot when user not have permission and use invert 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(TeamPermissionGate)
-    invert={true}
-    permissions={
-      Array [
-        "invalid_permission",
-      ]
-    }
-    teamId="team_id"
-  >
-    <TeamPermissionGate
-      dispatch={[Function]}
-      hasPermission={false}
-      invert={true}
-      permissions={
-        Array [
-          "invalid_permission",
-        ]
-      }
-      teamId="team_id"
-    >
-      <p>
-        Invalid permission but inverted (shown)
-      </p>
-    </TeamPermissionGate>
-  </Connect(TeamPermissionGate)>
-</Provider>
-`;

webapp/channels/src/components/permissions_gates/team_permission_gate/index.ts

@@ -1,31 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {connect} from 'react-redux';
-
-import {haveITeamPermission} from 'mattermost-redux/selectors/entities/roles';
-
-import type {GlobalState} from 'types/store';
-
-import TeamPermissionGate from './team_permission_gate';
-
-type Props = {
-    teamId?: string;
-    permissions: string[];
-}
-
-function mapStateToProps(state: GlobalState, ownProps: Props) {
-    if (!ownProps.teamId) {
-        return {hasPermission: false};
-    }
-
-    for (const permission of ownProps.permissions) {
-        if (haveITeamPermission(state, ownProps.teamId, permission)) {
-            return {hasPermission: true};
-        }
-    }
-
-    return {hasPermission: false};
-}
-
-export default connect(mapStateToProps)(TeamPermissionGate);

webapp/channels/src/components/permissions_gates/team_permission_gate/team_permission_gate.test.tsx

@@ -1,147 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {mount} from 'enzyme';
-import React from 'react';
-import {Provider} from 'react-redux';
-
-import TeamPermissionGate from 'components/permissions_gates/team_permission_gate';
-
-import mockStore from 'tests/test_store';
-
-describe('components/permissions_gates', () => {
-    const state = {
-        entities: {
-            channels: {
-                myMembers: {
-                    channel_id: {channel_id: 'channel_id', roles: 'channel_role'},
-                },
-            },
-            teams: {
-                myMembers: {
-                    team_id: {team_id: 'team_id', roles: 'team_role'},
-                },
-            },
-            users: {
-                currentUserId: 'user_id',
-                profiles: {
-                    user_id: {
-                        id: 'user_id',
-                        roles: 'system_role',
-                    },
-                },
-            },
-            roles: {
-                roles: {
-                    system_role: {permissions: ['test_system_permission']},
-                    team_role: {permissions: ['test_team_permission']},
-                    channel_role: {permissions: ['test_channel_permission']},
-                },
-            },
-        },
-    };
-    const store = mockStore(state);
-
-    describe('TeamPermissionGate', () => {
-        test('should match snapshot when user have permission', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <TeamPermissionGate
-                        teamId={'team_id'}
-                        permissions={['test_team_permission']}
-                    >
-                        <p>{'Valid permission (shown)'}</p>
-                    </TeamPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user have at least on of the permissions', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <TeamPermissionGate
-                        teamId={'team_id'}
-                        permissions={['test_team_permission', 'not_existing_permission']}
-                    >
-                        <p>{'Valid permission (shown)'}</p>
-                    </TeamPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user have permission and use invert', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <TeamPermissionGate
-                        teamId={'team_id'}
-                        permissions={['test_team_permission']}
-                        invert={true}
-                    >
-                        <p>{'Valid permission but inverted (not shown)'}</p>
-                    </TeamPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user not have permission and use invert', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <TeamPermissionGate
-                        teamId={'team_id'}
-                        permissions={['invalid_permission']}
-                        invert={true}
-                    >
-                        <p>{'Invalid permission but inverted (shown)'}</p>
-                    </TeamPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user haven\'t permission', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <TeamPermissionGate
-                        teamId={'team_id'}
-                        permissions={['invalid_permission']}
-                    >
-                        <p>{'Invalid permission (not shown)'}</p>
-                    </TeamPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when the team doesn\'t exists', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <TeamPermissionGate
-                        teamId={'invalid_id'}
-                        permissions={['test_team_permission']}
-                    >
-                        <p>{'Valid permission invalid team (not shown)'}</p>
-                    </TeamPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-        test('should match snapshot when user have permission system wide', () => {
-            const wrapper = mount(
-                <Provider store={store}>
-                    <TeamPermissionGate
-                        teamId={'team_id'}
-                        permissions={['test_system_permission']}
-                    >
-                        <p>{'Valid permission (shown)'}</p>
-                    </TeamPermissionGate>
-                </Provider>,
-            );
-
-            expect(wrapper).toMatchSnapshot();
-        });
-    });
-});

webapp/channels/src/components/permissions_gates/team_permission_gate/team_permission_gate.tsx

@@ -1,38 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-
-type Props = {
-
-    /**
-     * Has permission
-     */
-    hasPermission: boolean;
-
-    /**
-     * Invert the permission (used for else)
-     */
-    invert: boolean;
-
-    /**
-     * Content protected by the permissions gate
-     */
-    children: React.ReactNode;
-};
-
-export default class TeamPermissionGate 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;
-    }
-}

webapp/channels/src/components/post_view/channel_intro_message/__snapshots__/add_members_button.test.tsx.snap

@@ -1,188 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/post_view/AddMembersButton should match snapshot, less than limit 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Memo(AddMembersButton)
-    channel={
-      Object {
-        "create_at": 1508265709607,
-        "creator_id": "creator_id",
-        "delete_at": 0,
-        "display_name": "test channel",
-        "header": "test",
-        "id": "channel_id",
-        "last_post_at": 1508265709635,
-        "name": "testing",
-        "purpose": "test",
-        "team_id": "team-id",
-        "type": "O",
-        "update_at": 1508265709607,
-      }
-    }
-    totalUsers={10}
-    usersLimit={100}
-  >
-    <Connect(TeamPermissionGate)
-      permissions={
-        Array [
-          "add_user_to_team",
-          "invite_guest",
-        ]
-      }
-      teamId="team-id"
-    >
-      <TeamPermissionGate
-        dispatch={[Function]}
-        hasPermission={false}
-        invert={false}
-        permissions={
-          Array [
-            "add_user_to_team",
-            "invite_guest",
-          ]
-        }
-        teamId="team-id"
-      />
-    </Connect(TeamPermissionGate)>
-  </Memo(AddMembersButton)>
-</Provider>
-`;
-
-exports[`components/post_view/AddMembersButton should match snapshot, more than limit 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Memo(AddMembersButton)
-    channel={
-      Object {
-        "create_at": 1508265709607,
-        "creator_id": "creator_id",
-        "delete_at": 0,
-        "display_name": "test channel",
-        "header": "test",
-        "id": "channel_id",
-        "last_post_at": 1508265709635,
-        "name": "testing",
-        "purpose": "test",
-        "team_id": "team-id",
-        "type": "O",
-        "update_at": 1508265709607,
-      }
-    }
-    totalUsers={100}
-    usersLimit={10}
-  >
-    <Connect(TeamPermissionGate)
-      permissions={
-        Array [
-          "add_user_to_team",
-          "invite_guest",
-        ]
-      }
-      teamId="team-id"
-    >
-      <TeamPermissionGate
-        dispatch={[Function]}
-        hasPermission={false}
-        invert={false}
-        permissions={
-          Array [
-            "add_user_to_team",
-            "invite_guest",
-          ]
-        }
-        teamId="team-id"
-      />
-    </Connect(TeamPermissionGate)>
-  </Memo(AddMembersButton)>
-</Provider>
-`;
-
-exports[`components/post_view/AddMembersButton should match snapshot, setHeader and pluginButtons 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Memo(AddMembersButton)
-    channel={
-      Object {
-        "create_at": 1508265709607,
-        "creator_id": "creator_id",
-        "delete_at": 0,
-        "display_name": "test channel",
-        "header": "test",
-        "id": "channel_id",
-        "last_post_at": 1508265709635,
-        "name": "testing",
-        "purpose": "test",
-        "team_id": "team-id",
-        "type": "O",
-        "update_at": 1508265709607,
-      }
-    }
-    pluginButtons={
-      <button>
-        Create a board
-      </button>
-    }
-    setHeader={
-      <button>
-        Create a board
-      </button>
-    }
-    totalUsers={100}
-    usersLimit={10}
-  >
-    <Connect(TeamPermissionGate)
-      permissions={
-        Array [
-          "add_user_to_team",
-          "invite_guest",
-        ]
-      }
-      teamId="team-id"
-    >
-      <TeamPermissionGate
-        dispatch={[Function]}
-        hasPermission={false}
-        invert={false}
-        permissions={
-          Array [
-            "add_user_to_team",
-            "invite_guest",
-          ]
-        }
-        teamId="team-id"
-      />
-    </Connect(TeamPermissionGate)>
-  </Memo(AddMembersButton)>
-</Provider>
-`;

webapp/channels/src/components/post_view/channel_intro_message/add_members_button.test.tsx

@@ -1,15 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {mount} from 'enzyme';
 import React from 'react';
-import {Provider} from 'react-redux';
 
 import type {Channel} from '@mattermost/types/channels';
 
+import {Permissions} from 'mattermost-redux/constants';
 import * as teams from 'mattermost-redux/selectors/entities/teams';
 
-import mockStore from 'tests/test_store';
+import {renderWithContext, screen} from 'tests/react_testing_utils';
 
 import AddMembersButton from './add_members_button';
 
@@ -35,6 +34,7 @@ describe('components/post_view/AddMembersButton', () => {
                 currentTeamId: 'team-id',
             },
             users: {
+                currentUserId: 'test-user-id',
                 profiles: {
                     'test-user-id': {
                         id: 'test-user-id',
@@ -44,15 +44,15 @@ describe('components/post_view/AddMembersButton', () => {
             },
             roles: {
                 roles: {
-                    system_role: {permissions: ['test_system_permission']},
+                    system_role: {permissions: [
-                    team_role: {permissions: ['test_team_permission']},
+                        Permissions.ADD_USER_TO_TEAM,
-                    channel_role: {permissions: ['test_channel_permission']},
+                        Permissions.MANAGE_PUBLIC_CHANNEL_MEMBERS,
+                    ]},
                 },
             },
         },
     };
 
-    const store = mockStore(initialState);
     jest.spyOn(teams, 'getCurrentTeamId').mockReturnValue('team-id');
 
     test('should match snapshot, less than limit', () => {
@@ -61,13 +61,12 @@ describe('components/post_view/AddMembersButton', () => {
             usersLimit: 100,
             channel,
         };
-        const wrapper = mount(
+        renderWithContext(
-            <Provider store={store}>
+            <AddMembersButton {...props}/>,
-                <AddMembersButton {...props}/>
+            initialState,
-            </Provider>,
         );
 
-        expect(wrapper).toMatchSnapshot();
+        expect(screen.queryByText('Invite others to the workspace')).toBeInTheDocument();
     });
 
     test('should match snapshot, more than limit', () => {
@@ -76,39 +75,33 @@ describe('components/post_view/AddMembersButton', () => {
             usersLimit: 10,
             channel,
         };
-        const wrapper = mount(
+        renderWithContext(
-            <Provider store={store}>
+            <AddMembersButton {...props}/>,
-                <AddMembersButton {...props}/>
+            initialState,
-            </Provider>,
         );
 
-        expect(wrapper).toMatchSnapshot();
+        expect(screen.queryByText('Add people')).toBeInTheDocument();
     });
 
     test('should match snapshot, setHeader and pluginButtons', () => {
+        const PLUGIN_TEXT = 'Create a board plugin';
         const pluginButtons = (
             <button>
-                {'Create a board'}
+                {PLUGIN_TEXT}
-            </button>
-        );
-        const setHeader = (
-            <button>
-                {'Create a board'}
             </button>
         );
+
         const props = {
             totalUsers: 100,
             usersLimit: 10,
             channel,
-            setHeader,
             pluginButtons,
         };
-        const wrapper = mount(
+        renderWithContext(
-            <Provider store={store}>
+            <AddMembersButton {...props}/>,
-                <AddMembersButton {...props}/>
+            initialState,
-            </Provider>,
         );
 
-        expect(wrapper).toMatchSnapshot();
+        expect(screen.queryByText(PLUGIN_TEXT)).toBeInTheDocument();
     });
 });

webapp/channels/src/components/post_view/channel_intro_message/add_members_button.tsx

@@ -21,7 +21,6 @@ import ToggleModalButton from 'components/toggle_modal_button';
 import LoadingSpinner from 'components/widgets/loading/loading_spinner';
 
 import {Constants, ModalIdentifiers} from 'utils/constants';
-import {localizeMessage} from 'utils/utils';
 
 import './add_members_button.scss';
 
@@ -68,7 +67,7 @@ const LessThanMaxFreeUsers = ({pluginButtons}: {pluginButtons: React.ReactNode})
             {pluginButtons}
             <div className='LessThanMaxFreeUsers'>
                 <ToggleModalButton
-                    ariaLabel={localizeMessage('intro_messages.inviteOthers', 'Invite others to the workspace')}
+                    ariaLabel={formatMessage({id: 'intro_messages.inviteOthers', defaultMessage: 'Invite others to the workspace'})}
                     id='introTextInvite'
                     className='btn btn-sm btn-primary'
                     modalId={ModalIdentifiers.INVITATION}

webapp/channels/src/components/post_view/post_reaction/__snapshots__/post_reaction.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/post_view/PostReaction should match snapshot 1`] = `
-<Connect(Component)
+<Memo(ChannelPermissionGate)
   channelId="current_channel_id"
   permissions={
     Array [
@@ -39,5 +39,5 @@ exports[`components/post_view/PostReaction should match snapshot 1`] = `
       />
     </button>
   </WithTooltip>
-</Connect(Component)>
+</Memo(ChannelPermissionGate)>
 `;

webapp/channels/src/components/post_view/reaction_list/__snapshots__/reactions_list.test.tsx.snap

@@ -62,7 +62,7 @@ exports[`components/ReactionList should render when there are reactions 1`] = `
         target={[Function]}
         topOffset={-5}
       />
-      <Connect(Component)
+      <Memo(ChannelPermissionGate)
         channelId=""
         permissions={
           Array [
@@ -94,7 +94,7 @@ exports[`components/ReactionList should render when there are reactions 1`] = `
             </span>
           </button>
         </WithTooltip>
-      </Connect(Component)>
+      </Memo(ChannelPermissionGate)>
     </span>
   </div>
 </div>

webapp/channels/src/components/select_team/__snapshots__/select_team.test.tsx.snap

@@ -62,7 +62,7 @@ exports[`components/select_team/SelectTeam should match snapshot 1`] = `
           </div>
         </InfiniteScroll>
       </div>
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "create_team",
@@ -89,8 +89,8 @@ exports[`components/select_team/SelectTeam should match snapshot 1`] = `
             />
           </Link>
         </div>
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "manage_system",
@@ -111,7 +111,7 @@ exports[`components/select_team/SelectTeam should match snapshot 1`] = `
             />
           </Link>
         </div>
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
     </div>
   </div>
 </div>
@@ -179,7 +179,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on create team
           </div>
         </InfiniteScroll>
       </div>
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "manage_system",
@@ -200,7 +200,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on create team
             />
           </Link>
         </div>
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
     </div>
   </div>
 </div>
@@ -240,7 +240,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on error 1`] =
           </label>
         </div>
       </div>
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "create_team",
@@ -267,8 +267,8 @@ exports[`components/select_team/SelectTeam should match snapshot, on error 1`] =
             />
           </Link>
         </div>
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "manage_system",
@@ -289,7 +289,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on error 1`] =
             />
           </Link>
         </div>
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
     </div>
   </div>
 </div>
@@ -316,7 +316,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on loading 1`]
         siteName="Mattermost"
       />
       <LoadingScreen />
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "create_team",
@@ -343,8 +343,8 @@ exports[`components/select_team/SelectTeam should match snapshot, on loading 1`]
             />
           </Link>
         </div>
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "manage_system",
@@ -365,7 +365,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on loading 1`]
             />
           </Link>
         </div>
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
     </div>
   </div>
 </div>
@@ -425,7 +425,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
             className="signup-team-dir-err"
           >
             <div>
-              <Connect(SystemPermissionGate)
+              <Memo(SystemPermissionGate)
                 permissions={
                   Array [
                     "create_team",
@@ -436,8 +436,8 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
                   defaultMessage="No teams are available to join. Please create a new team or ask your administrator for an invite."
                   id="signup_team.no_open_teams_canCreate"
                 />
-              </Connect(SystemPermissionGate)>
+              </Memo(SystemPermissionGate)>
-              <Connect(SystemPermissionGate)
+              <Memo(SystemPermissionGate)
                 invert={true}
                 permissions={
                   Array [
@@ -449,12 +449,12 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
                   defaultMessage="No teams are available to join. Please ask your administrator for an invite."
                   id="signup_team.no_open_teams"
                 />
-              </Connect(SystemPermissionGate)>
+              </Memo(SystemPermissionGate)>
             </div>
           </div>
         </InfiniteScroll>
       </div>
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "create_team",
@@ -481,8 +481,8 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
             />
           </Link>
         </div>
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "manage_system",
@@ -503,7 +503,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
             />
           </Link>
         </div>
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
     </div>
   </div>
 </div>
@@ -545,7 +545,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
           </label>
         </div>
       </div>
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "create_team",
@@ -572,8 +572,8 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
             />
           </Link>
         </div>
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "manage_system",
@@ -594,7 +594,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
             />
           </Link>
         </div>
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
     </div>
   </div>
 </div>
@@ -662,7 +662,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
           </div>
         </InfiniteScroll>
       </div>
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "create_team",
@@ -689,8 +689,8 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
             />
           </Link>
         </div>
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "manage_system",
@@ -711,7 +711,7 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
             />
           </Link>
         </div>
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
     </div>
   </div>
 </div>

webapp/channels/src/components/sidebar/__snapshots__/invite_members_button.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`components/sidebar/invite_members_button should match snapshot 1`] = `
   <InviteMembersButton
     isAdmin={false}
   >
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "add_user_to_team",
@@ -25,17 +25,9 @@ exports[`components/sidebar/invite_members_button should match snapshot 1`] = `
       }
       teamId="team_id2sss"
     >
-      <TeamPermissionGate
+      <Gate
-        dispatch={[Function]}
         hasPermission={true}
         invert={false}
-        permissions={
-          Array [
-            "add_user_to_team",
-            "invite_guest",
-          ]
-        }
-        teamId="team_id2sss"
       >
         <ToggleModalButton
           ariaLabel="Invite Members"
@@ -76,8 +68,8 @@ exports[`components/sidebar/invite_members_button should match snapshot 1`] = `
             </div>
           </button>
         </ToggleModalButton>
-      </TeamPermissionGate>
+      </Gate>
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
   </InviteMembersButton>
 </Provider>
 `;

webapp/channels/src/components/team_members_modal/__snapshots__/team_members_modal.test.tsx.snap

@@ -51,7 +51,7 @@ exports[`components/TeamMembersModal should match snapshot 1`] = `
         }
       />
     </ModalTitle>
-    <Connect(TeamPermissionGate)
+    <Memo(TeamPermissionGate)
       permissions={
         Array [
           "add_user_to_team",
@@ -71,7 +71,7 @@ exports[`components/TeamMembersModal should match snapshot 1`] = `
           id="team_member_modal.invitePeople"
         />
       </button>
-    </Connect(TeamPermissionGate)>
+    </Memo(TeamPermissionGate)>
   </ModalHeader>
   <ModalBody
     bsClass="modal-body"

webapp/channels/src/plugins/test/__snapshots__/main_menu_action.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
     style={Object {}}
   >
     <Memo(MenuGroup)>
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "sysconsole_write_billing",
@@ -22,10 +22,10 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
         <MenuCloudTrial
           id="menuCloudTrial"
         />
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "sysconsole_write_about_edition_and_license",
@@ -35,7 +35,7 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
         <MenuStartTrial
           id="startTrial"
         />
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
       <MenuItemAction
@@ -114,7 +114,7 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
       />
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
-      <Connect(TeamPermissionGate)
+      <Memo(TeamPermissionGate)
         permissions={
           Array [
             "manage_team",
@@ -141,8 +141,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
           show={true}
           text="Add Groups to Team"
         />
-      </Connect(TeamPermissionGate)>
+      </Memo(TeamPermissionGate)>
-      <Connect(TeamPermissionGate)
+      <Memo(TeamPermissionGate)
         permissions={
           Array [
             "add_user_to_team",
@@ -172,10 +172,10 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
           show={true}
           text="Invite People"
         />
-      </Connect(TeamPermissionGate)>
+      </Memo(TeamPermissionGate)>
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
-      <Connect(TeamPermissionGate)
+      <Memo(TeamPermissionGate)
         permissions={
           Array [
             "manage_team",
@@ -202,8 +202,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
           show={true}
           text="Team Settings"
         />
-      </Connect(TeamPermissionGate)>
+      </Memo(TeamPermissionGate)>
-      <Connect(TeamPermissionGate)
+      <Memo(TeamPermissionGate)
         permissions={
           Array [
             "manage_team",
@@ -235,8 +235,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
           show={true}
           text="Manage Groups"
         />
-      </Connect(TeamPermissionGate)>
+      </Memo(TeamPermissionGate)>
-      <Connect(TeamPermissionGate)
+      <Memo(TeamPermissionGate)
         permissions={
           Array [
             "remove_user_from_team",
@@ -264,8 +264,8 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
           show={true}
           text="Manage Members"
         />
-      </Connect(TeamPermissionGate)>
+      </Memo(TeamPermissionGate)>
-      <Connect(TeamPermissionGate)
+      <Memo(TeamPermissionGate)
         invert={true}
         permissions={
           Array [
@@ -294,10 +294,10 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
           show={true}
           text="View Members"
         />
-      </Connect(TeamPermissionGate)>
+      </Memo(TeamPermissionGate)>
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "create_team",
@@ -315,7 +315,7 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
           text="Create a Team"
           to="/create_team"
         />
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
       <MenuItemLink
         icon={
           <i
@@ -441,7 +441,7 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = `
     style={Object {}}
   >
     <Memo(MenuGroup)>
-      <Connect(TeamPermissionGate)
+      <Memo(TeamPermissionGate)
         permissions={
           Array [
             "manage_team",
@@ -463,8 +463,8 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = `
           show={true}
           text="Add Groups to Team"
         />
-      </Connect(TeamPermissionGate)>
+      </Memo(TeamPermissionGate)>
-      <Connect(TeamPermissionGate)
+      <Memo(TeamPermissionGate)
         permissions={
           Array [
             "add_user_to_team",
@@ -490,8 +490,8 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = `
           show={true}
           text="Invite People"
         />
-      </Connect(TeamPermissionGate)>
+      </Memo(TeamPermissionGate)>
-      <Connect(TeamPermissionGate)
+      <Memo(TeamPermissionGate)
         permissions={
           Array [
             "manage_team",
@@ -513,8 +513,8 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = `
           show={true}
           text="Team Settings"
         />
-      </Connect(TeamPermissionGate)>
+      </Memo(TeamPermissionGate)>
-      <Connect(TeamPermissionGate)
+      <Memo(TeamPermissionGate)
         permissions={
           Array [
             "manage_team",
@@ -541,8 +541,8 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = `
           show={true}
           text="Manage Groups"
         />
-      </Connect(TeamPermissionGate)>
+      </Memo(TeamPermissionGate)>
-      <Connect(TeamPermissionGate)
+      <Memo(TeamPermissionGate)
         permissions={
           Array [
             "remove_user_from_team",
@@ -565,8 +565,8 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = `
           show={true}
           text="Manage Members"
         />
-      </Connect(TeamPermissionGate)>
+      </Memo(TeamPermissionGate)>
-      <Connect(TeamPermissionGate)
+      <Memo(TeamPermissionGate)
         invert={true}
         permissions={
           Array [
@@ -590,7 +590,7 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = `
           show={true}
           text="View Members"
         />
-      </Connect(TeamPermissionGate)>
+      </Memo(TeamPermissionGate)>
       <MenuItemLink
         id="joinTeam"
         show={true}
@@ -614,7 +614,7 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = `
       />
     </Memo(MenuGroup)>
     <Memo(MenuGroup)>
-      <Connect(SystemPermissionGate)
+      <Memo(SystemPermissionGate)
         permissions={
           Array [
             "create_team",
@@ -630,7 +630,7 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = `
           text="Create a Team"
           to="/create_team"
         />
-      </Connect(SystemPermissionGate)>
+      </Memo(SystemPermissionGate)>
       <Memo(MenuGroup)>
         <div
           className="MainMenu_dropdown-link"