IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

[MM-55334] Migrate ./components/admin_console/blockable_link/blockab_link.tsx from Class Component to Function Component (#25386)

Browse Source 
* [MM-55334] Migrate `./components/admin_console/blockable_link/blockable_link.tsx` from Class Component to Function Component

* refactor: use prop destructuring

* fix: Implement useCallback to avoid unwanted renders

* refactor: import mouse event type from react

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
Syed Ali Abbas Zaidi 2023-11-14 14:02:09 +05:00 committed by GitHub
parent b5bbe278eb
commit 620acc029a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 73 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
webapp/channels/src/components/admin_console/blockable_link/blockable_link.tsx
View File

@ -1,7 +1,8 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import React from 'react'; import React, {useCallback} from 'react';
import type {MouseEvent} from 'react';
import {NavLink} from 'react-router-dom'; import {NavLink} from 'react-router-dom';
import {getHistory} from 'utils/browser_history'; import {getHistory} from 'utils/browser_history';
@ -24,29 +25,26 @@ type Props = {
className?: string; className?: string;
onClick?: (e: React.MouseEvent) => void; onClick?: (e: React.MouseEvent) => void;
}; };
export default class BlockableLink extends React.PureComponent<Props> {
private handleClick = (e: React.MouseEvent) => { const BlockableLink = ({blocked, actions, onClick, to, ...restProps}: Props) => {
if (this.props.onClick) { const handleClick = useCallback((e: MouseEvent) => {
this.props.onClick(e); onClick?.(e);
}
if (this.props.blocked) { if (blocked) {
e.preventDefault(); e.preventDefault();
this.props.actions.deferNavigation(() => { actions.deferNavigation(() => {
getHistory().push(this.props.to); getHistory().push(to);
}); });
} }
}; }, [actions, blocked, onClick, to]);
public render() {
const props = {...this.props};
Reflect.deleteProperty(props, 'blocked');
Reflect.deleteProperty(props, 'actions');
return ( return (
<NavLink <NavLink
{...props} {...restProps}
onClick={this.handleClick} to={to}
onClick={handleClick}
/> />
); );
} };
}
export default React.memo(BlockableLink);

12
webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/__snapshots__/custom_policy_form.test.tsx.snap
View File

@ -8,7 +8,7 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/compliance/data_retention_settings" to="/admin_console/compliance/data_retention_settings"
/> />
@ -247,7 +247,7 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
/> />
} }
/> />
<Connect(BlockableLink) <Connect(Component)
className="cancel-button" className="cancel-button"
to="/admin_console/compliance/data_retention_settings" to="/admin_console/compliance/data_retention_settings"
> >
@ -255,7 +255,7 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
defaultMessage="Cancel" defaultMessage="Cancel"
id="admin.data_retention.custom_policy.cancel" id="admin.data_retention.custom_policy.cancel"
/> />
</Connect(BlockableLink)> </Connect(Component)>
</div> </div>
</div> </div>
`; `;
@ -268,7 +268,7 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/compliance/data_retention_settings" to="/admin_console/compliance/data_retention_settings"
/> />
@ -504,7 +504,7 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
/> />
} }
/> />
<Connect(BlockableLink) <Connect(Component)
className="cancel-button" className="cancel-button"
to="/admin_console/compliance/data_retention_settings" to="/admin_console/compliance/data_retention_settings"
> >
@ -512,7 +512,7 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
defaultMessage="Cancel" defaultMessage="Cancel"
id="admin.data_retention.custom_policy.cancel" id="admin.data_retention.custom_policy.cancel"
/> />
</Connect(BlockableLink)> </Connect(Component)>
</div> </div>
</div> </div>
`; `;

6
webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/__snapshots__/global_policy_form.test.tsx.snap
View File

@ -8,7 +8,7 @@ exports[`components/PluginManagement should match snapshot 1`] = `
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/compliance/data_retention_settings" to="/admin_console/compliance/data_retention_settings"
/> />
@ -220,7 +220,7 @@ exports[`components/PluginManagement should match snapshot 1`] = `
/> />
} }
/> />
<Connect(BlockableLink) <Connect(Component)
className="cancel-button" className="cancel-button"
to="/admin_console/compliance/data_retention_settings" to="/admin_console/compliance/data_retention_settings"
> >
@ -228,7 +228,7 @@ exports[`components/PluginManagement should match snapshot 1`] = `
defaultMessage="Cancel" defaultMessage="Cancel"
id="admin.data_retention.custom_policy.cancel" id="admin.data_retention.custom_policy.cancel"
/> />
</Connect(BlockableLink)> </Connect(Component)>
</div> </div>
</div> </div>
`; `;

8
webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_details.test.tsx.snap
View File

@ -8,7 +8,7 @@ exports[`components/admin_console/group_settings/group_details/GroupDetails shou
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/groups" to="/admin_console/user_management/groups"
/> />
@ -158,7 +158,7 @@ exports[`components/admin_console/group_settings/group_details/GroupDetails shou
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/groups" to="/admin_console/user_management/groups"
/> />
@ -307,7 +307,7 @@ exports[`components/admin_console/group_settings/group_details/GroupDetails shou
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/groups" to="/admin_console/user_management/groups"
/> />
@ -445,7 +445,7 @@ exports[`components/admin_console/group_settings/group_details/GroupDetails shou
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/groups" to="/admin_console/user_management/groups"
/> />

24
webapp/channels/src/components/admin_console/permission_schemes_settings/permission_system_scheme_settings/__snapshots__/permission_system_scheme_settings.test.tsx.snap
View File

@ -151,7 +151,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/permissions" to="/admin_console/user_management/permissions"
/> />
@ -397,7 +397,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage="Saving Config..."
/> />
<Connect(BlockableLink) <Connect(Component)
className="btn btn-tertiary" className="btn btn-tertiary"
to="/admin_console/user_management/permissions" to="/admin_console/user_management/permissions"
> >
@ -405,7 +405,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
defaultMessage="Cancel" defaultMessage="Cancel"
id="admin.permissions.permissionSchemes.cancel" id="admin.permissions.permissionSchemes.cancel"
/> />
</Connect(BlockableLink)> </Connect(Component)>
<a <a
className="btn btn-quaternary" className="btn btn-quaternary"
data-testid="resetPermissionsToDefault" data-testid="resetPermissionsToDefault"
@ -461,7 +461,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/permissions" to="/admin_console/user_management/permissions"
/> />
@ -708,7 +708,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage="Saving Config..."
/> />
<Connect(BlockableLink) <Connect(Component)
className="btn btn-tertiary" className="btn btn-tertiary"
to="/admin_console/user_management/permissions" to="/admin_console/user_management/permissions"
> >
@ -716,7 +716,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
defaultMessage="Cancel" defaultMessage="Cancel"
id="admin.permissions.permissionSchemes.cancel" id="admin.permissions.permissionSchemes.cancel"
/> />
</Connect(BlockableLink)> </Connect(Component)>
<a <a
className="btn btn-quaternary" className="btn btn-quaternary"
data-testid="resetPermissionsToDefault" data-testid="resetPermissionsToDefault"
@ -772,7 +772,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/permissions" to="/admin_console/user_management/permissions"
/> />
@ -1019,7 +1019,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage="Saving Config..."
/> />
<Connect(BlockableLink) <Connect(Component)
className="btn btn-tertiary" className="btn btn-tertiary"
to="/admin_console/user_management/permissions" to="/admin_console/user_management/permissions"
> >
@ -1027,7 +1027,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
defaultMessage="Cancel" defaultMessage="Cancel"
id="admin.permissions.permissionSchemes.cancel" id="admin.permissions.permissionSchemes.cancel"
/> />
</Connect(BlockableLink)> </Connect(Component)>
<a <a
className="btn btn-quaternary" className="btn btn-quaternary"
data-testid="resetPermissionsToDefault" data-testid="resetPermissionsToDefault"
@ -1083,7 +1083,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/permissions" to="/admin_console/user_management/permissions"
/> />
@ -1330,7 +1330,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage="Saving Config..."
/> />
<Connect(BlockableLink) <Connect(Component)
className="btn btn-tertiary" className="btn btn-tertiary"
to="/admin_console/user_management/permissions" to="/admin_console/user_management/permissions"
> >
@ -1338,7 +1338,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
defaultMessage="Cancel" defaultMessage="Cancel"
id="admin.permissions.permissionSchemes.cancel" id="admin.permissions.permissionSchemes.cancel"
/> />
</Connect(BlockableLink)> </Connect(Component)>
<a <a
className="btn btn-quaternary" className="btn btn-quaternary"
data-testid="resetPermissionsToDefault" data-testid="resetPermissionsToDefault"

24
webapp/channels/src/components/admin_console/permission_schemes_settings/permission_team_scheme_settings/__snapshots__/permission_team_scheme_settings.test.tsx.snap
View File

@ -34,7 +34,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/permissions" to="/admin_console/user_management/permissions"
/> />
@ -287,7 +287,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage="Saving Config..."
/> />
<Connect(BlockableLink) <Connect(Component)
className="cancel-button" className="cancel-button"
to="/admin_console/user_management/permissions" to="/admin_console/user_management/permissions"
> >
@ -295,7 +295,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
defaultMessage="Cancel" defaultMessage="Cancel"
id="admin.permissions.permissionSchemes.cancel" id="admin.permissions.permissionSchemes.cancel"
/> />
</Connect(BlockableLink)> </Connect(Component)>
<div <div
className="error-message" className="error-message"
> >
@ -358,7 +358,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/permissions" to="/admin_console/user_management/permissions"
/> />
@ -634,7 +634,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage="Saving Config..."
/> />
<Connect(BlockableLink) <Connect(Component)
className="cancel-button" className="cancel-button"
to="/admin_console/user_management/permissions" to="/admin_console/user_management/permissions"
> >
@ -642,7 +642,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
defaultMessage="Cancel" defaultMessage="Cancel"
id="admin.permissions.permissionSchemes.cancel" id="admin.permissions.permissionSchemes.cancel"
/> />
</Connect(BlockableLink)> </Connect(Component)>
<div <div
className="error-message" className="error-message"
> >
@ -705,7 +705,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/permissions" to="/admin_console/user_management/permissions"
/> />
@ -983,7 +983,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage="Saving Config..."
/> />
<Connect(BlockableLink) <Connect(Component)
className="cancel-button" className="cancel-button"
to="/admin_console/user_management/permissions" to="/admin_console/user_management/permissions"
> >
@ -991,7 +991,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
defaultMessage="Cancel" defaultMessage="Cancel"
id="admin.permissions.permissionSchemes.cancel" id="admin.permissions.permissionSchemes.cancel"
/> />
</Connect(BlockableLink)> </Connect(Component)>
<div <div
className="error-message" className="error-message"
> >
@ -1120,7 +1120,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/permissions" to="/admin_console/user_management/permissions"
/> />
@ -1398,7 +1398,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage="Saving Config..."
/> />
<Connect(BlockableLink) <Connect(Component)
className="cancel-button" className="cancel-button"
to="/admin_console/user_management/permissions" to="/admin_console/user_management/permissions"
> >
@ -1406,7 +1406,7 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
defaultMessage="Cancel" defaultMessage="Cancel"
id="admin.permissions.permissionSchemes.cancel" id="admin.permissions.permissionSchemes.cancel"
/> />
</Connect(BlockableLink)> </Connect(Component)>
<div <div
className="error-message" className="error-message"
> >

4
webapp/channels/src/components/admin_console/system_roles/system_role/__snapshots__/system_role.test.tsx.snap
View File

@ -8,7 +8,7 @@ exports[`admin_console/system_role should match snapshot 1`] = `
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/system_roles" to="/admin_console/user_management/system_roles"
/> />
@ -73,7 +73,7 @@ exports[`admin_console/system_role should match snapshot with isLicensedForCloud
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/system_roles" to="/admin_console/user_management/system_roles"
/> />

12
webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
View File

@ -8,7 +8,7 @@ exports[`components/admin_console/system_user_detail should match default snapsh
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/users" to="/admin_console/user_management/users"
/> />
@ -244,7 +244,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if LD
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/users" to="/admin_console/user_management/users"
/> />
@ -482,7 +482,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if MF
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/users" to="/admin_console/user_management/users"
/> />
@ -726,7 +726,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if SA
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/users" to="/admin_console/user_management/users"
/> />
@ -964,7 +964,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if no
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/users" to="/admin_console/user_management/users"
/> />
@ -1200,7 +1200,7 @@ exports[`components/admin_console/system_user_detail should match snapshot if us
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/users" to="/admin_console/user_management/users"
/> />

12
webapp/channels/src/components/admin_console/team_channel_settings/channel/details/__snapshots__/channel_details.test.tsx.snap
View File

@ -8,7 +8,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelDetails should match
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/channels" to="/admin_console/user_management/channels"
/> />
@ -195,7 +195,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelDetails should match
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/channels" to="/admin_console/user_management/channels"
/> />
@ -378,7 +378,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelDetails should match
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/channels" to="/admin_console/user_management/channels"
/> />
@ -517,7 +517,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelDetails should match
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/channels" to="/admin_console/user_management/channels"
/> />
@ -652,7 +652,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelDetails should match
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/channels" to="/admin_console/user_management/channels"
/> />
@ -791,7 +791,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelDetails should match
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/channels" to="/admin_console/user_management/channels"
/> />

4
webapp/channels/src/components/admin_console/team_channel_settings/team/details/__snapshots__/team_details.test.tsx.snap
View File

@ -8,7 +8,7 @@ exports[`admin_console/team_channel_settings/team/TeamDetails should match snaps
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/teams" to="/admin_console/user_management/teams"
/> />
@ -114,7 +114,7 @@ exports[`admin_console/team_channel_settings/team/TeamDetails should match snaps
withBackButton={true} withBackButton={true}
> >
<div> <div>
<Connect(BlockableLink) <Connect(Component)
className="fa fa-angle-left back" className="fa fa-angle-left back"
to="/admin_console/user_management/teams" to="/admin_console/user_management/teams"
/> />