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

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

webapp/channels/src/components/admin_console/blockable_link/blockable_link.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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