[MM-55332] Convert ./components/permissions_gates/channel_permission_gate.tsx from Class Component to Function Component (#25399)

* [MM-55332] Convert `./components/permissions_gates/channel_permission_gate/channel_permission_gate.tsx` from Class Component to Function Component

* refactor: unify the if conditions

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
Syed Ali Abbas Zaidi 2023-11-14 01:37:24 +05:00 committed by GitHub
parent 9156770b25
commit 71ea829328
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 83 additions and 80 deletions

View File

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

View File

@ -13,7 +13,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
} }
} }
> >
<Connect(ChannelPermissionGate) <Connect(Component)
channelId="invalid_id" channelId="invalid_id"
permissions={ permissions={
Array [ Array [
@ -22,7 +22,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
} }
teamId="team_id" teamId="team_id"
> >
<ChannelPermissionGate <Memo(ChannelPermissionGate)
channelId="invalid_id" channelId="invalid_id"
dispatch={[Function]} dispatch={[Function]}
hasPermission={false} hasPermission={false}
@ -32,8 +32,10 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
] ]
} }
teamId="team_id" teamId="team_id"
/> >
</Connect(ChannelPermissionGate)> <p />
</Memo(ChannelPermissionGate)>
</Connect(Component)>
</Provider> </Provider>
`; `;
@ -50,7 +52,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
} }
} }
> >
<Connect(ChannelPermissionGate) <Connect(Component)
channelId="channel_id" channelId="channel_id"
permissions={ permissions={
Array [ Array [
@ -59,7 +61,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
} }
teamId="" teamId=""
> >
<ChannelPermissionGate <Memo(ChannelPermissionGate)
channelId="channel_id" channelId="channel_id"
dispatch={[Function]} dispatch={[Function]}
hasPermission={false} hasPermission={false}
@ -69,8 +71,10 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
] ]
} }
teamId="" teamId=""
/> >
</Connect(ChannelPermissionGate)> <p />
</Memo(ChannelPermissionGate)>
</Connect(Component)>
</Provider> </Provider>
`; `;
@ -129,7 +133,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
} }
} }
> >
<Connect(ChannelPermissionGate) <Connect(Component)
channelId="channel_id" channelId="channel_id"
permissions={ permissions={
Array [ Array [
@ -138,7 +142,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
} }
teamId="team_id" teamId="team_id"
> >
<ChannelPermissionGate <Memo(ChannelPermissionGate)
channelId="channel_id" channelId="channel_id"
dispatch={[Function]} dispatch={[Function]}
hasPermission={true} hasPermission={true}
@ -152,8 +156,8 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
<p> <p>
Valid permission (shown) Valid permission (shown)
</p> </p>
</ChannelPermissionGate> </Memo(ChannelPermissionGate)>
</Connect(ChannelPermissionGate)> </Connect(Component)>
</Provider> </Provider>
`; `;
@ -170,7 +174,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
} }
} }
> >
<Connect(ChannelPermissionGate) <Connect(Component)
channelId="channel_id" channelId="channel_id"
invert={true} invert={true}
permissions={ permissions={
@ -180,7 +184,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
} }
teamId="team_id" teamId="team_id"
> >
<ChannelPermissionGate <Memo(ChannelPermissionGate)
channelId="channel_id" channelId="channel_id"
dispatch={[Function]} dispatch={[Function]}
hasPermission={true} hasPermission={true}
@ -191,8 +195,10 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
] ]
} }
teamId="team_id" teamId="team_id"
/> >
</Connect(ChannelPermissionGate)> <p />
</Memo(ChannelPermissionGate)>
</Connect(Component)>
</Provider> </Provider>
`; `;
@ -209,7 +215,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
} }
} }
> >
<Connect(ChannelPermissionGate) <Connect(Component)
channelId="channel_id" channelId="channel_id"
permissions={ permissions={
Array [ Array [
@ -218,7 +224,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
} }
teamId="team_id" teamId="team_id"
> >
<ChannelPermissionGate <Memo(ChannelPermissionGate)
channelId="channel_id" channelId="channel_id"
dispatch={[Function]} dispatch={[Function]}
hasPermission={true} hasPermission={true}
@ -232,8 +238,8 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
<p> <p>
Valid permission (shown) Valid permission (shown)
</p> </p>
</ChannelPermissionGate> </Memo(ChannelPermissionGate)>
</Connect(ChannelPermissionGate)> </Connect(Component)>
</Provider> </Provider>
`; `;
@ -250,7 +256,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
} }
} }
> >
<Connect(ChannelPermissionGate) <Connect(Component)
channelId="channel_id" channelId="channel_id"
permissions={ permissions={
Array [ Array [
@ -259,7 +265,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
} }
teamId="team_id" teamId="team_id"
> >
<ChannelPermissionGate <Memo(ChannelPermissionGate)
channelId="channel_id" channelId="channel_id"
dispatch={[Function]} dispatch={[Function]}
hasPermission={true} hasPermission={true}
@ -273,8 +279,8 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
<p> <p>
Valid permission (shown) Valid permission (shown)
</p> </p>
</ChannelPermissionGate> </Memo(ChannelPermissionGate)>
</Connect(ChannelPermissionGate)> </Connect(Component)>
</Provider> </Provider>
`; `;
@ -291,7 +297,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
} }
} }
> >
<Connect(ChannelPermissionGate) <Connect(Component)
channelId="channel_id" channelId="channel_id"
permissions={ permissions={
Array [ Array [
@ -300,7 +306,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
} }
teamId="" teamId=""
> >
<ChannelPermissionGate <Memo(ChannelPermissionGate)
channelId="channel_id" channelId="channel_id"
dispatch={[Function]} dispatch={[Function]}
hasPermission={true} hasPermission={true}
@ -314,8 +320,8 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
<p> <p>
Valid permission (shown) Valid permission (shown)
</p> </p>
</ChannelPermissionGate> </Memo(ChannelPermissionGate)>
</Connect(ChannelPermissionGate)> </Connect(Component)>
</Provider> </Provider>
`; `;
@ -332,7 +338,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
} }
} }
> >
<Connect(ChannelPermissionGate) <Connect(Component)
channelId="channel_id" channelId="channel_id"
permissions={ permissions={
Array [ Array [
@ -341,7 +347,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
} }
teamId="team_id" teamId="team_id"
> >
<ChannelPermissionGate <Memo(ChannelPermissionGate)
channelId="channel_id" channelId="channel_id"
dispatch={[Function]} dispatch={[Function]}
hasPermission={false} hasPermission={false}
@ -351,8 +357,10 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
] ]
} }
teamId="team_id" teamId="team_id"
/> >
</Connect(ChannelPermissionGate)> <p />
</Memo(ChannelPermissionGate)>
</Connect(Component)>
</Provider> </Provider>
`; `;
@ -369,7 +377,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
} }
} }
> >
<Connect(ChannelPermissionGate) <Connect(Component)
channelId="channel_id" channelId="channel_id"
invert={true} invert={true}
permissions={ permissions={
@ -379,7 +387,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
} }
teamId="team_id" teamId="team_id"
> >
<ChannelPermissionGate <Memo(ChannelPermissionGate)
channelId="channel_id" channelId="channel_id"
dispatch={[Function]} dispatch={[Function]}
hasPermission={false} hasPermission={false}
@ -394,7 +402,7 @@ exports[`components/permissions_gates ChannelPermissionGate should match snapsho
<p> <p>
Invalid permission but inverted (shown) Invalid permission but inverted (shown)
</p> </p>
</ChannelPermissionGate> </Memo(ChannelPermissionGate)>
</Connect(ChannelPermissionGate)> </Connect(Component)>
</Provider> </Provider>
`; `;

View File

@ -36,16 +36,11 @@ type Props = {
children: React.ReactNode; children: React.ReactNode;
} }
export default class ChannelPermissionGate extends React.PureComponent<Props> { const ChannelPermissionGate = ({hasPermission, children, invert = false}: Props) => {
render() { if (hasPermission !== invert) {
const {hasPermission, children, invert = false} = this.props; return <>{children}</>;
if (hasPermission && !invert) {
return children;
}
if (!hasPermission && invert) {
return children;
}
return null;
} }
} return null;
};
export default React.memo(ChannelPermissionGate);

View File

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

View File

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