[MM-944]: Typescript migration and converting github_label_selector to TS

Author: Kshitij-Katiyar

webapp/.eslintrc.json

@@ -1,21 +1,16 @@
 {
   "extends": [
-      "eslint:recommended",
-      "plugin:react-hooks/recommended"
+    "eslint:recommended",
+    "plugin:react-hooks/recommended"
   ],
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaVersion": 8,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true,
-      "impliedStrict": true,
-      "modules": true,
-      "experimentalObjectRestSpread": true
-    }
+    "project": "./tsconfig.json",
+    "tsconfigRootDir": "./"
   },
-  "parser": "babel-eslint",
   "plugins": [
     "react",
+    "@typescript-eslint",
     "import"
   ],
   "env": {
@@ -35,7 +30,12 @@
     "beforeEach": true
   },
   "settings": {
-    "import/resolver": "webpack"
+    "import/resolver": {
+      "typescript": {}
+    },
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    }
   },
   "rules": {
     "array-bracket-spacing": [
@@ -639,7 +639,7 @@
       ],
       "rules": {
         "@typescript-eslint/ban-ts-ignore": 0,
-        "@typescript-eslint/ban-types": 1,
+        "@typescript-eslint/ban-types": 0,
         "@typescript-eslint/ban-ts-comment": 0,
         "@typescript-eslint/no-var-requires": 0,
         "@typescript-eslint/prefer-interface": 0,

webapp/package-lock.json

@@ -34,6 +34,7 @@
     "@types/react-intl": "3.0.0",
     "@types/react-redux": "7.1.9",
     "@types/react-router-dom": "5.1.5",
+    "@types/react-select": "3.1.0",
     "@types/react-transition-group": "4.4.0",
     "@typescript-eslint/eslint-plugin": "4.1.1",
     "@typescript-eslint/parser": "4.1.1",
@@ -46,6 +47,7 @@
     "enzyme-adapter-react-16": "1.15.4",
     "enzyme-to-json": "3.5.0",
     "eslint": "7.9.0",
+    "eslint-import-resolver-typescript": "3.6.1",
     "eslint-import-resolver-webpack": "0.12.2",
     "eslint-plugin-import": "2.22.0",
     "eslint-plugin-react": "7.20.6",

webapp/package.json

@@ -2,20 +2,21 @@
 // See LICENSE.txt for license information.
 
 import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-
-import IssueAttributeSelector from 'components/issue_attribute_selector';
-
-export default class GithubLabelSelector extends PureComponent {
-    static propTypes = {
-        repoName: PropTypes.string.isRequired,
-        theme: PropTypes.object.isRequired,
-        selectedLabels: PropTypes.array.isRequired,
-        onChange: PropTypes.func.isRequired,
-        actions: PropTypes.shape({
-            getLabelOptions: PropTypes.func.isRequired,
-        }).isRequired,
-    };
+
+import {Theme} from 'mattermost-redux/types/preferences';
+
+import IssueAttributeSelector, {IssueAttributeSelectorSelection} from '../issue_attribute_selector';
+
+import {GitHubLabelSelectorDispatchProps} from '.';
+
+type Props = GitHubLabelSelectorDispatchProps & {
+    repoName: string;
+    theme: Theme;
+    selectedLabels: string[];
+    onChange: (selection: string[]) => void;
+};
+
+export default class GithubLabelSelector extends PureComponent<Props> {
 
     loadLabels = async () => {
         if (this.props.repoName === '') {
@@ -32,13 +33,19 @@ export default class GithubLabelSelector extends PureComponent {
             return [];
         }
 
-        return options.data.map((option) => ({
+        return options.data.map((option: any) => ({
             value: option.name,
             label: option.name,
         }));
     };
 
-    onChange = (selection) => this.props.onChange(selection.map((s) => s.value));
+    onChange = (selection: IssueAttributeSelectorSelection) => {
+        if (!selection || !Array.isArray(selection)) {
+            return;
+        }
+
+        this.props.onChange(selection.map((s) => s.value));
+    }
 
     render() {
         return (

…label_selector/github_label_selector.jsx …label_selector/github_label_selector.tsxwebapp/src/components/github_label_selector/github_label_selector.jsx renamed to webapp/src/components/github_label_selector/github_label_selector.tsx webapp/src/components/github_label_selector/github_label_selector.jsx renamed to webapp/src/components/github_label_selector/github_label_selector.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {connect} from 'react-redux';
+import {Dispatch, bindActionCreators} from 'redux';
+
+import {getLabelOptions} from '../../actions';
+
+import GithubLabelSelector from './github_label_selector';
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+    actions: bindActionCreators({getLabelOptions}, dispatch),
+}) as unknown as Actions;
+
+type Actions = {
+    getLabelOptions: (repoName: string) => ReturnType<ReturnType<typeof getLabelOptions>>;
+};
+
+export type GitHubLabelSelectorDispatchProps = {
+    actions: Actions;
+};
+
+export default connect(
+    null,
+    mapDispatchToProps,
+)(GithubLabelSelector);