Fixathon: Web app dependency updates part 1 (#29036)

* Ensure all packages remove a node_modules in their folder when cleaning

* Upgrade typescript to 5.6.3 and move to root package.json

Note that this currently fails to build the types package due to
@types/node which I'm going to try to remove

* Update @types/node to 20.11 to match .nvmrc

* Upgrade zen-observable to 0.10.0

It looks like localforage-observable uses its own version
of zen-observable because it hasn't been updated in years.
This seems like something we probably should remove.

* Update yargs to 17.7.2

* Update webpack-dev-server to 5.1.0

* Remove webpack-bundle-analyzer since we haven't used it in years

* Update webpack to 5.95.0

* Update web-vitals to 4.2.4

* Update turndown to 7.2.0

* Update tinycolor2 to 1.6.0

* Update timezones.json to 1.7.0

* Update stylelint to 16.10.0, stylelint-config-recommended-scss to 14.1.0, and stylelint-scss to 6.8.1

* Update webpack-cli to 5.1.4

* Update style-loader to 4.0.0

* Change all Webpack scripts to be ES modules

* Update strip-ansi to 7.1.0

This is a build script dependency

* Update chalk to 5.3.0

This is a build script dependency

* Update concurrently to 9.0.1

This is a build script dependency

* Update smooth-scroll-into-view-if-needed to 2.0.2

* MM-48205 Update serialize-error to 11.0.3

We didn't update this before because it's an ES module which caused Jest to complain. We can fix that by making Jest transform the it

* Update semver to 7.6.3

* Update types for semver, tinycolor2, turndown, and webpack

* Fix type issues: change Props to a type

* Fix type issues: invalid HTML attributes

* Remove unneeded option from Webpack config

webapp/channels/jest.config.js

@@ -41,7 +41,7 @@ const config = {
         ['jest-junit', {outputDirectory: 'build', outputName: 'test-results.xml'}],
     ],
     transformIgnorePatterns: [
-        'node_modules/(?!react-native|react-router|pdfjs-dist|p-queue|p-timeout|@mattermost/compass-components|@mattermost/compass-icons|cidr-regex|ip-regex)',
+        'node_modules/(?!react-native|react-router|pdfjs-dist|p-queue|p-timeout|@mattermost/compass-components|@mattermost/compass-icons|cidr-regex|ip-regex|serialize-error)',
     ],
     transform: {
         '^.+\\.(js|jsx|ts|tsx|mjs)$': 'babel-jest',

webapp/channels/package.json

@@ -21,7 +21,7 @@
     "@tanstack/react-table": "8.10.7",
     "@tippyjs/react": "4.2.6",
     "@types/color-hash": "1.0.2",
-    "@types/turndown": "5.0.1",
+    "@types/turndown": "5.0.5",
     "bootstrap": "3.4.1",
     "buffer": "6.0.3",
     "chart.js": "3.8.2",
@@ -87,18 +87,17 @@
     "redux-thunk": "2.4.2",
     "regenerator-runtime": "0.13.10",
     "rudder-sdk-js": "1.0.16",
-    "semver": "7.5.2",
-    "serialize-error": "8.0.1",
+    "semver": "7.6.3",
+    "serialize-error": "11.0.3",
     "shallow-equals": "1.0.0",
-    "smooth-scroll-into-view-if-needed": "1.1.33",
+    "smooth-scroll-into-view-if-needed": "2.0.2",
     "stream-browserify": "3.0.0",
     "styled-components": "5.3.6",
-    "timezones.json": "1.6.1",
-    "tinycolor2": "1.4.2",
-    "turndown": "7.1.1",
-    "typescript": "5.5.4",
-    "web-vitals": "4.2.0",
-    "zen-observable": "0.9.0"
+    "timezones.json": "1.7.1",
+    "tinycolor2": "1.6.0",
+    "turndown": "7.2.0",
+    "web-vitals": "4.2.4",
+    "zen-observable": "0.10.0"
   },
   "devDependencies": {
     "@deanwhillier/jest-matchmedia-mock": "1.2.0",
@@ -121,7 +120,6 @@
     "@types/luxon": "3.0.2",
     "@types/mark.js": "8.11.6",
     "@types/marked": "0.7.4",
-    "@types/node": "18.19.59",
     "@types/react": "17.0.83",
     "@types/react-beautiful-dnd": "13.1.2",
     "@types/react-bootstrap": "0.32.35",
@@ -138,10 +136,10 @@
     "@types/react-window": "1.8.5",
     "@types/react-window-infinite-loader": "1.0.6",
     "@types/redux-mock-store": "1.0.3",
-    "@types/semver": "7.3.9",
+    "@types/semver": "7.5.8",
     "@types/shallow-equals": "1.0.3",
     "@types/styled-components": "5.1.32",
-    "@types/tinycolor2": "1.4.3",
+    "@types/tinycolor2": "1.4.6",
     "copy-webpack-plugin": "11.0.0",
     "emoji-datasource": "6.1.1",
     "emoji-datasource-apple": "6.1.1",
@@ -169,14 +167,13 @@
     "react-router-enzyme-context": "1.2.0",
     "redux-mock-store": "1.5.4",
     "redux-persist-node-storage": "2.0.0",
-    "stylelint": "16.2.1",
+    "stylelint": "16.10.0",
     "stylelint-config-idiomatic-order": "10.0.0",
-    "stylelint-config-recommended-scss": "14.0.0",
+    "stylelint-config-recommended-scss": "14.1.0",
     "stylelint-order": "6.0.4",
-    "stylelint-scss": "6.1.0",
-    "webpack-bundle-analyzer": "4.7.0",
+    "stylelint-scss": "6.8.1",
     "webpack-pwa-manifest": "4.3.0",
-    "yargs": "16.2.0"
+    "yargs": "17.7.2"
   },
   "overrides": {
     "@mattermost/desktop-api": {

webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap

@@ -376,7 +376,6 @@ exports[`components/SettingItemMin should match snapshot, profile picture on fil
             className="img-preview__image"
           >
             <div
-              alt="profile image preview"
               className="profile-img-preview"
               style={
                 Object {
@@ -626,7 +625,6 @@ exports[`components/SettingItemMin should match snapshot, team icon on file 1`]
             className="img-preview__image"
           >
             <div
-              alt="team image preview"
               className="team-img-preview"
               style={
                 Object {

webapp/channels/src/components/admin_console/team_channel_settings/channel/channel_settings.tsx

@@ -8,9 +8,9 @@ import ChannelsList from 'components/admin_console/team_channel_settings/channel
 import AdminHeader from 'components/widgets/admin_console/admin_header';
 import AdminPanel from 'components/widgets/admin_console/admin_panel';
 
-interface Props {
+type Props = {
     siteName?: string;
-}
+};
 
 export const ChannelsSettings = ({siteName}: Props) => {
     return (

webapp/channels/src/components/channel_header_dropdown/menu_items/leave_channel/leave_channel.tsx

@@ -13,7 +13,7 @@ import {Constants, ModalIdentifiers} from 'utils/constants';
 
 import type {PropsFromRedux} from './index';
 
-interface Props extends PropsFromRedux {
+type Props = PropsFromRedux & {
 
     /**
      * Object with info about user
@@ -34,7 +34,7 @@ interface Props extends PropsFromRedux {
      * Use for test selector
      */
     id?: string;
-}
+};
 
 const LeaveChannel = ({
     isDefault = true,

webapp/channels/src/components/channel_layout/channel_identifier_router/channel_identifier_router.tsx

@@ -20,13 +20,13 @@ export interface Match {
 
 export type MatchAndHistory = Pick<Props, 'match' | 'history'>
 
-interface Props {
+type Props = {
     match: Match;
     actions: {
         onChannelByIdentifierEnter: (props: MatchAndHistory) => any;
     };
     history: any;
-}
+};
 
 export default class ChannelIdentifierRouter extends React.PureComponent<Props> {
     constructor(props: Props) {

webapp/channels/src/components/file_attachment/file_attachment.tsx

@@ -29,7 +29,7 @@ import FilenameOverlay from './filename_overlay';
 
 import type {PropsFromRedux} from './index';
 
-interface Props extends PropsFromRedux {
+type Props = PropsFromRedux & {
 
     /*
     * File detailed information
@@ -52,7 +52,7 @@ interface Props extends PropsFromRedux {
     compactDisplay?: boolean;
     disablePreview?: boolean;
     handleFileDropdownOpened?: (open: boolean) => void;
-}
+};
 
 export default function FileAttachment(props: Props) {
     const mounted = useRef(true);

webapp/channels/src/components/get_public_link_modal/get_public_link_modal.tsx

@@ -8,10 +8,10 @@ import GetLinkModal from 'components/get_link_modal';
 
 import type {PropsFromRedux} from './index';
 
-interface Props extends PropsFromRedux {
+type Props = PropsFromRedux & {
     onExited: () => void;
     fileId: string;
-}
+};
 
 const GetPublicLinkModal = ({
     actions,

webapp/channels/src/components/post/index.tsx

@@ -39,13 +39,13 @@ import type {GlobalState} from 'types/store';
 import {removePostCloseRHSDeleteDraft} from './actions';
 import PostComponent from './post_component';
 
-interface OwnProps {
+type OwnProps = {
     post?: Post | UserActivityPost;
     previousPostId?: string;
     postId?: string;
     shouldHighlight?: boolean;
     location: keyof typeof Locations;
-}
+};
 
 function isFirstReply(post: Post, previousPost?: Post | null): boolean {
     if (post.root_id) {

webapp/channels/src/components/post_emoji/post_emoji.tsx

@@ -10,11 +10,6 @@ export interface Props {
     name: string;
     imageUrl: string;
 }
-declare module 'react' {
-    interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
-        alt?: string;
-    }
-}
 
 const PostEmoji = ({children, name, imageUrl}: Props) => {
     const emojiText = `:${name}:`;
@@ -33,7 +28,6 @@ const PostEmoji = ({children, name, imageUrl}: Props) => {
             placement='top'
         >
             <span
-                alt={emojiText}
                 className='emoticon'
                 data-testid={`postEmoji.${emojiText}`}
                 style={{backgroundImage: backgroundImageUrl}}

webapp/channels/src/components/post_view/commented_on_files_message/commented_on_files_message.tsx

@@ -6,13 +6,13 @@ import {FormattedMessage} from 'react-intl';
 
 import type {FileInfo} from '@mattermost/types/files';
 
-interface Props {
+type Props = {
 
     /*
      * An array of file metadata for the parent post
      */
     fileInfos?: FileInfo[];
-}
+};
 
 const CommentedOnFilesMessage = ({
     fileInfos,

webapp/channels/src/components/post_view/index.ts

@@ -43,11 +43,11 @@ export const isChannelLoading = (params: RouteViewParams, channel?: Channel, tea
     return true;
 };
 
-interface RouteViewParams {
+type RouteViewParams = {
     team?: string;
     identifier?: string;
     postid?: string;
-}
+};
 
 type Props = {channelId: string} & RouteComponentProps<RouteViewParams>
 

webapp/channels/src/components/post_view/post_view.tsx

@@ -9,13 +9,13 @@ import {Preferences} from 'utils/constants';
 
 import PostList from './post_list';
 
-interface Props {
+type Props = {
     lastViewedAt?: number;
     channelLoading: boolean;
     channelId: string;
     focusedPostId?: string;
     unreadScrollPosition: string;
-}
+};
 
 interface State {
     unreadChunkTimeStamp?: number;

webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx

@@ -19,7 +19,7 @@ import {RHSStates} from 'utils/constants';
 
 import type {RhsState} from 'types/store/rhs';
 
-interface Props extends WrappedComponentProps {
+type Props = WrappedComponentProps & {
     isExpanded: boolean;
     isMobileView: boolean;
     rootPostId: string;
@@ -40,7 +40,7 @@ interface Props extends WrappedComponentProps {
     closeRightHandSide: (e?: React.MouseEvent) => void;
     toggleRhsExpanded: (e: React.MouseEvent) => void;
     setThreadFollow: (userId: string, teamId: string, threadId: string, newState: boolean) => void;
-}
+};
 
 class RhsHeaderPost extends React.PureComponent<Props> {
     handleBack = (e: React.MouseEvent) => {

webapp/channels/src/components/setting_picture.tsx

@@ -172,7 +172,6 @@ export default class SettingPicture extends Component<Props, State> {
                 <div className={`${imageContext}-img-preview`}>
                     <div className='img-preview__image'>
                         <div
-                            alt={`${imageContext} image preview`}
                             style={imageStyles}
                             className={`${imageContext}-img-preview`}
                         />

webapp/channels/src/components/team_settings/team_info_tab/team_picture_section.tsx

@@ -78,7 +78,6 @@ const TeamPictureSection = ({team, file, teamName, disabled, onFileChange, onRem
             return (
                 <div
                     id='teamIconImage'
-                    alt='team image preview'
                     style={imageStyles}
                     className='team-img-preview'
                     onClick={handleInputFile}

webapp/channels/src/components/widgets/menu/menu_wrapper.tsx

@@ -10,10 +10,15 @@ import MenuWrapperAnimation from './menu_wrapper_animation';
 import './menu_wrapper.scss';
 
 declare module 'react' {
-    interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+
+    // This isn't a valid HTML attribute, but we use it in enough places now that it'll require some work to remove it
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface HTMLAttributes<T> {
         disabled?: boolean;
     }
 }
+
 type Props = {
     children?: React.ReactNode;
     className: string;

webapp/channels/webpack.config.js

@@ -14,8 +14,6 @@ const webpack = require('webpack');
 const {ModuleFederationPlugin} = require('webpack').container;
 const WebpackPwaManifest = require('webpack-pwa-manifest');
 
-// const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
-
 const packageJson = require('./package.json');
 
 const NPM_TARGET = process.env.npm_lifecycle_event;
@@ -141,7 +139,6 @@ var config = {
             crypto: require.resolve('crypto-browserify'),
             stream: require.resolve('stream-browserify'),
             buffer: require.resolve('buffer/'),
-            process: require.resolve('process/browser.js'),
         },
     },
     performance: {
@@ -266,13 +263,6 @@ var config = {
                 sizes: '96x96',
             }],
         }),
-
-        // Disabling this plugin until we come up with better bundle analysis ci
-        // new BundleAnalyzerPlugin({
-        //     analyzerMode: 'disabled',
-        //     generateStatsFile: true,
-        //     statsFilename: 'bundlestats.json',
-        // }),
     ],
 };
 
@@ -407,16 +397,21 @@ if (targetIsDevServer) {
         devtool: 'eval-cheap-module-source-map',
         devServer: {
             liveReload: true,
-            proxy: {
-
-                // Forward these requests to the server
-                '/api': {
+            proxy: [
+                {
+                    context: '/api',
                     ...proxyToServer,
                     ws: true,
                 },
-                '/plugins': proxyToServer,
-                '/static/plugins': proxyToServer,
-            },
+                {
+                    context: '/plugins',
+                    ...proxyToServer,
+                },
+                {
+                    context: '/static/plugins',
+                    ...proxyToServer,
+                },
+            ],
             port: 9005,
             devMiddleware: {
                 writeToDisk: false,