[GH-394] Migration to TypeScript: Sidebar_button migrated to Typescri…

…pt (#438) * sidebar_button converted in Typescript * updated import * Some changes based on comments * Unnecessary imports removed * Updated imports * Reset the node-version to 14.21.1 * revert changes to package-lock.json --------- Co-authored-by: Michael Kochell <6913320+mickmister@users.noreply.github.com>
mattermost · Jan 23, 2024 · b49b535 · b49b535
1 parent eab8193
commit b49b535
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 54 deletions.
diff --git a/webapp/.eslintrc.json b/webapp/.eslintrc.json
@@ -272,19 +272,7 @@
     "no-lone-blocks": 2,
     "no-lonely-if": 2,
     "no-loop-func": 2,
-    "no-magic-numbers": [
-      1,
-      {
-        "ignore": [
-          -1,
-          0,
-          1,
-          2
-        ],
-        "enforceConst": true,
-        "detectObjects": true
-      }
-    ],
+    "no-magic-numbers": "off",
     "no-mixed-operators": [
       2,
       {
@@ -377,14 +365,7 @@
         "args": "after-used"
       }
     ],
-    "no-use-before-define": [
-      2,
-      {
-        "classes": false,
-        "functions": false,
-        "variables": false
-      }
-    ],
+    "no-use-before-define": "off",
     "no-useless-computed-key": 2,
     "no-useless-concat": 2,
     "no-useless-constructor": 2,

diff --git a/webapp/src/components/sidebar_buttons/index.js b/webapp/src/components/sidebar_buttons/index.js
@@ -11,7 +11,7 @@ import {id} from '../../manifest';
 
 import {getPluginServerRoute} from '../../selectors';
 
-import SidebarButtons from './sidebar_buttons.jsx';
+import SidebarButtons from './sidebar_buttons';
 
 function mapStateToProps(state) {
     return {

diff --git a/...nents/sidebar_buttons/sidebar_buttons.jsx → ...nents/sidebar_buttons/sidebar_buttons.tsx b/...nents/sidebar_buttons/sidebar_buttons.jsx → ...nents/sidebar_buttons/sidebar_buttons.tsx
@@ -1,36 +1,44 @@
-import React from 'react';
+import React, {PureComponent, ReactElement} from 'react';
 import {Tooltip, OverlayTrigger} from 'react-bootstrap';
-import PropTypes from 'prop-types';
+
 import {makeStyleFromTheme, changeOpacity} from 'mattermost-redux/utils/theme_utils';
 
-import {RHSStates, connectUsingBrowserMessage} from 'src/constants';
-import {isDesktopApp} from 'src/utils/user_agent';
+import {Placement} from 'react-bootstrap/esm/Overlay';
+
+import {Theme} from 'mattermost-redux/types/preferences';
+
+import {RHSStates, connectUsingBrowserMessage} from '../../constants';
+import {isDesktopApp} from '../../utils/user_agent';
 
 import {GitLabIssuesIcon, GitLabMergeRequestIcon, GitLabReviewsIcon, GitLabTodosIcon} from './button_icons';
 
-export default class SidebarButtons extends React.PureComponent {
-    static propTypes = {
-        theme: PropTypes.object.isRequired,
-        connected: PropTypes.bool,
-        username: PropTypes.string,
-        org: PropTypes.string,
-        clientId: PropTypes.string,
-        gitlabURL: PropTypes.string,
-        reviews: PropTypes.arrayOf(PropTypes.object),
-        todos: PropTypes.arrayOf(PropTypes.object),
-        yourAssignedPrs: PropTypes.arrayOf(PropTypes.object),
-        yourAssignedIssues: PropTypes.arrayOf(PropTypes.object),
-        isTeamSidebar: PropTypes.bool,
-        pluginServerRoute: PropTypes.string.isRequired,
-        showRHSPlugin: PropTypes.func.isRequired,
-        actions: PropTypes.shape({
-            updateRHSState: PropTypes.func.isRequired,
-            sendEphemeralPost: PropTypes.func.isRequired,
-            getLHSData: PropTypes.func.isRequired,
-        }).isRequired,
+interface SidebarButtonsProps {
+    theme: Theme;
+    connected: boolean;
+    username: string;
+    org: string;
+    clientId: string;
+    gitlabURL: string;
+    reviews: unknown[];
+    todos: unknown[];
+    yourAssignedPrs: unknown[];
+    yourAssignedIssues: unknown[];
+    isTeamSidebar: boolean;
+    pluginServerRoute: string;
+    showRHSPlugin: () => void;
+    actions: {
+        updateRHSState: (rhsState: string) => void;
+        sendEphemeralPost: (message: string) => void;
+        getLHSData: () => Promise<void>;
     };
+}
+
+interface SidebarButtonsState {
+    refreshing: boolean;
+}
 
-    constructor(props) {
+export default class SidebarButtons extends PureComponent<SidebarButtonsProps, SidebarButtonsState> {
+    constructor(props: SidebarButtonsProps) {
         super(props);
 
         this.state = {
@@ -44,13 +52,13 @@ export default class SidebarButtons extends React.PureComponent {
         }
     }
 
-    componentDidUpdate(prevProps) {
+    componentDidUpdate(prevProps: SidebarButtonsProps) {
         if (this.props.connected && !prevProps.connected) {
             this.getData();
         }
     }
 
-    getData = async (e) => {
+    getData = async (e?: React.MouseEvent<HTMLAnchorElement, MouseEvent>): Promise<void> => {
         if (this.state.refreshing) {
             return;
         }
@@ -64,7 +72,7 @@ export default class SidebarButtons extends React.PureComponent {
         this.setState({refreshing: false});
     };
 
-    openConnectWindow = (e) => {
+    openConnectWindow = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void => {
         e.preventDefault();
         if (isDesktopApp()) {
             this.props.actions.sendEphemeralPost(connectUsingBrowserMessage);
@@ -73,18 +81,18 @@ export default class SidebarButtons extends React.PureComponent {
         window.open(`${this.props.pluginServerRoute}/oauth/connect`, 'Connect Mattermost to GitLab', 'height=570,width=520');
     };
 
-    openRHS = (rhsState) => {
+    openRHS = (rhsState: string): void => {
         this.props.actions.updateRHSState(rhsState);
         this.props.showRHSPlugin();
     };
 
-    render() {
+    render(): ReactElement {
         const style = getStyle(this.props.theme);
         const isTeamSidebar = this.props.isTeamSidebar;
 
         let container = style.containerHeader;
         let button = style.buttonHeader;
-        let placement = 'bottom';
+        let placement: Placement = 'bottom';
         if (isTeamSidebar) {
             placement = 'right';
             button = style.buttonTeam;
@@ -109,7 +117,6 @@ export default class SidebarButtons extends React.PureComponent {
                     </OverlayTrigger>
                 );
             }
-            return null;
         }
 
         const baseURL = this.props.gitlabURL || 'https://gitlab.com';