Bump webpack from 4.44.2 to 5.99.8 in /webapp

webapp/package.json

@@ -37,23 +37,23 @@
     "@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",
+    "@typescript-eslint/eslint-plugin": "6.10.0",
+    "@typescript-eslint/parser": "6.10.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "26.3.0",
     "babel-loader": "8.1.0",
-    "babel-plugin-typescript-to-proptypes": "1.4.1",
+    "babel-plugin-typescript-to-proptypes": "2.1.0",
     "css-loader": "4.3.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.4",
     "enzyme-to-json": "3.5.0",
-    "eslint": "7.9.0",
+    "eslint": "8.57.0",
     "eslint-import-resolver-typescript": "3.6.1",
     "eslint-import-resolver-webpack": "0.12.2",
     "eslint-plugin-header": "3.1.1",
-    "eslint-plugin-import": "2.22.0",
-    "eslint-plugin-react": "7.20.6",
-    "eslint-plugin-react-hooks": "4.1.2",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react-hooks": "4.6.0",
     "file-loader": "6.1.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "26.4.2",
@@ -62,9 +62,9 @@
     "sass": "1.60.0",
     "sass-loader": "10.4.1",
     "style-loader": "1.2.1",
-    "typescript": "4.2.3",
-    "webpack": "4.44.2",
-    "webpack-cli": "3.3.12"
+    "typescript": "5.3.3",
+    "webpack": "5.99.8",
+    "webpack-cli": "4.10.0"
   },
   "dependencies": {
     "@primer/octicons-react": "10.1.0",

webapp/src/actions/index.ts

@@ -305,7 +305,7 @@ export function closeCreateIssueModal() {
 }
 
 export function createIssue(payload: CreateIssuePayload) {
-    return async (dispatch: DispatchFunc) => {
+    return async () => {
         let data;
         try {
             data = await Client.createIssue(payload);

webapp/src/client/client.js

@@ -13,59 +13,59 @@ export default class Client {
 
     getConnected = async (reminder = false) => {
         return this.doGet(`${this.url}/connected?reminder=${reminder}`);
-    }
+    };
 
     getSidebarContent = async () => {
         return this.doGet(`${this.url}/lhs-content`);
-    }
+    };
 
     getPrsDetails = async (prList) => {
         return this.doPost(`${this.url}/prsdetails`, prList);
-    }
+    };
 
     getMentions = async () => {
         return this.doGet(`${this.url}/mentions`);
-    }
+    };
 
     getGitHubUser = async (userID) => {
         return this.doPost(`${this.url}/user`, {user_id: userID});
-    }
+    };
 
     getRepositories = async (channelId) => {
         return this.doGet(`${this.url}/repositories?channelId=${channelId}`);
-    }
+    };
 
     getLabels = async (repo) => {
         return this.doGet(`${this.url}/labels?repo=${repo}`);
-    }
+    };
 
     getAssignees = async (repo) => {
         return this.doGet(`${this.url}/assignees?repo=${repo}`);
-    }
+    };
 
     getMilestones = async (repo) => {
         return this.doGet(`${this.url}/milestones?repo=${repo}`);
-    }
+    };
 
     createIssue = async (payload) => {
         return this.doPost(`${this.url}/createissue`, payload);
-    }
+    };
 
     searchIssues = async (searchTerm) => {
         return this.doGet(`${this.url}/searchissues?term=${searchTerm}`);
-    }
+    };
 
     attachCommentToIssue = async (payload) => {
         return this.doPost(`${this.url}/createissuecomment`, payload);
-    }
+    };
 
     getIssue = async (owner, repo, issueNumber) => {
         return this.doGet(`${this.url}/issue?owner=${owner}&repo=${repo}&number=${issueNumber}`);
-    }
+    };
 
     getPullRequest = async (owner, repo, prNumber) => {
         return this.doGet(`${this.url}/pr?owner=${owner}&repo=${repo}&number=${prNumber}`);
-    }
+    };
 
     doGet = async (url, body, headers = {}) => {
         headers['X-Timezone-Offset'] = new Date().getTimezoneOffset();
@@ -88,7 +88,7 @@ export default class Client {
             status_code: response.status,
             url,
         });
-    }
+    };
 
     doPost = async (url, body, headers = {}) => {
         headers['X-Timezone-Offset'] = new Date().getTimezoneOffset();
@@ -112,7 +112,7 @@ export default class Client {
             status_code: response.status,
             url,
         });
-    }
+    };
 
     doDelete = async (url, body, headers = {}) => {
         headers['X-Timezone-Offset'] = new Date().getTimezoneOffset();
@@ -135,7 +135,7 @@ export default class Client {
             status_code: response.status,
             url,
         });
-    }
+    };
 
     doPut = async (url, body, headers = {}) => {
         headers['X-Timezone-Offset'] = new Date().getTimezoneOffset();
@@ -159,5 +159,5 @@ export default class Client {
             status_code: response.status,
             url,
         });
-    }
+    };
 }

webapp/src/components/github_issue_selector.jsx

@@ -62,7 +62,7 @@ export default class GithubIssueSelector extends PureComponent {
     onChange = (e) => {
         const value = e ? e.value : '';
         this.props.onChange(value);
-    }
+    };
 
     isValid = () => {
         if (!this.props.required) {

webapp/src/components/github_label_selector/github_label_selector.tsx

@@ -48,7 +48,7 @@ export default class GithubLabelSelector extends PureComponent<Props> {
         }
 
         this.props.onChange(selection.map((s) => s.value));
-    }
+    };
 
     render() {
         return (

webapp/src/components/github_repo_selector/github_repo_selector.jsx

@@ -45,7 +45,7 @@ export default class GithubRepoSelector extends PureComponent {
     onChange = (_, name) => {
         const repo = this.props.yourRepos.repos.find((r) => r.full_name === name);
         this.props.onChange({name, permissions: repo.permissions});
-    }
+    };
 
     render() {
         const repoOptions = this.props.yourRepos.repos ? this.props.yourRepos.repos.map((item) => ({value: item.full_name, label: item.full_name})) : [];

webapp/src/components/input.jsx

@@ -125,7 +125,6 @@ export default class Input extends PureComponent {
             input = (
                 <textarea
                     style={style.textarea}
-                    resize='none'
                     id={this.props.id}
                     className='form-control'
                     rows='5'

webapp/src/components/issue_attribute_selector.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {PureComponent} from 'react';
-import ReactSelect, {ValueType, ActionMeta} from 'react-select';
+import ReactSelect, {ValueType} from 'react-select';
 
 import {Theme} from 'mattermost-redux/types/preferences';
 
@@ -96,9 +96,9 @@ export default class IssueAttributeSelector extends PureComponent<Props, State>
         }
 
         this.props.onChange(null);
-    }
+    };
 
-    onChange = (selection: ValueType<ReactSelectOption, boolean>, actionMeta: ActionMeta<ReactSelectOption>) => {
+    onChange = (selection: ValueType<ReactSelectOption, boolean>) => {
         if (this.props.isMulti) {
             this.props.onChange((selection as ReactSelectOption[]) || []);
             return;

webapp/src/components/sidebar_buttons/sidebar_buttons.jsx

@@ -71,17 +71,17 @@ export default class SidebarButtons extends React.PureComponent {
         this.setState({refreshing: true});
         await this.props.actions.getSidebarContent();
         this.setState({refreshing: false});
-    }
+    };
 
     openConnectWindow = (e) => {
         e.preventDefault();
         window.open('/plugins/github/oauth/connect', 'Connect Mattermost to GitHub', 'height=570,width=520');
-    }
+    };
 
     openRHS = (rhsState) => {
         this.props.actions.updateRhsState(rhsState);
         this.props.showRHSPlugin();
-    }
+    };
 
     render() {
         const style = getStyle(this.props.theme);

webapp/src/components/sidebar_right/github_items.tsx

@@ -21,6 +21,14 @@ import ChangesRequestedIcon from '../../images/icons/changes_requested';
 import {getLabelFontColor} from '../../utils/styles';
 import {ReviewState} from '../../constants';
 
+type ReviewStyle = {
+    prOpenSince: React.CSSProperties;
+    icon: React.CSSProperties;
+    iconChangesRequested: React.CSSProperties;
+    subtitle: React.CSSProperties;
+    subtitleSecondLine: React.CSSProperties;
+};
+
 const notificationReasons = {
     assign:	'You were assigned to the issue',
     author:	'You created the thread.',
@@ -388,7 +396,7 @@ function getGithubLabels(labels: GithubLabel[]) {
     });
 }
 
-function getReviewText(item: GithubItem, style: any, secondLine: boolean) {
+function getReviewText(item: GithubItem, style: ReviewStyle, secondLine: boolean) {
     if (!item.reviews || !item.requestedReviewers) {
         return null;
     }
@@ -440,12 +448,6 @@ function getReviewText(item: GithubItem, style: any, secondLine: boolean) {
 
     const totalReviewers = finishedReviewers.length + item.requestedReviewers.length;
     if (totalReviewers > 0) {
-        let reviewName;
-        if (totalReviewers === 1) {
-            reviewName = 'review';
-        } else {
-            reviewName = 'reviews';
-        }
         reviews = (
             <div
                 className='light'
@@ -481,7 +483,8 @@ function getReviewText(item: GithubItem, style: any, secondLine: boolean) {
             style={secondLine ? style.subtitleSecondLine : style.subtitle}
         >
             {reviews} {changes}
-        </div>);
+        </div>
+    );
 }
 
 const itemStyle: CSS.Properties = {

webapp/src/components/sidebar_right/sidebar_right.jsx

@@ -14,23 +14,26 @@ export function renderView(props) {
         <div
             {...props}
             className='scrollbar--view'
-        />);
+        />
+    );
 }
 
 export function renderThumbHorizontal(props) {
     return (
         <div
             {...props}
             className='scrollbar--horizontal'
-        />);
+        />
+    );
 }
 
 export function renderThumbVertical(props) {
     return (
         <div
             {...props}
             className='scrollbar--vertical'
-        />);
+        />
+    );
 }
 
 function mapGithubItemListToPrList(gilist) {

webapp/webpack.config.js

@@ -12,7 +12,7 @@ const PLUGIN_ID = require('../plugin.json').id;
 const NPM_TARGET = process.env.npm_lifecycle_event; //eslint-disable-line no-process-env
 const E2E_TESTING = process.env.E2E_TESTING; //eslint-disable-line no-process-env
 let mode = 'production';
-let devtool = '';
+let devtool;
 if (NPM_TARGET === 'debug' || NPM_TARGET === 'debug:watch') {
     mode = 'development';
     devtool = 'source-map';