Upgrading javascript dependencies

This commit is contained in:
Jesús Espino 2021-03-25 19:40:50 +01:00
parent ba3e598139
commit 8845683b09
4 changed files with 1871 additions and 3460 deletions

5196
webapp/package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -21,14 +21,14 @@
"cypress:open": "cypress open" "cypress:open": "cypress open"
}, },
"dependencies": { "dependencies": {
"emoji-mart": "^3.0.0", "emoji-mart": "^3.0.1",
"marked": ">=2.0.0", "marked": ">=2.0.1",
"nanoevents": "^5.1.10", "nanoevents": "^5.1.13",
"react": "^16.13.1", "react": "^17.0.2",
"react-dom": "^16.13.1", "react-dom": "^17.0.2",
"react-intl": "^5.8.6", "react-intl": "^5.13.5",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-select": "^3.1.0", "react-select": "^4.3.0",
"react-simplemde-editor": "^4.1.3" "react-simplemde-editor": "^4.1.3"
}, },
"jest": { "jest": {
@ -50,50 +50,49 @@
] ]
}, },
"devDependencies": { "devDependencies": {
"@formatjs/cli": "^2.13.2", "@formatjs/cli": "^3.2.0",
"@formatjs/ts-transformer": "^2.11.3", "@formatjs/ts-transformer": "^3.2.1",
"@testing-library/jest-dom": "^5.11.4", "@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.0.4", "@testing-library/react": "^11.2.5",
"@types/emoji-mart": "^3.0.3", "@types/emoji-mart": "^3.0.4",
"@types/jest": "^26.0.14", "@types/jest": "^26.0.21",
"@types/marked": "^1.2.2", "@types/marked": "^2.0.0",
"@types/nanoevents": "^1.0.0", "@types/nanoevents": "^1.0.0",
"@types/react": "^16.9.49", "@types/react": "^17.0.3",
"@types/react-dom": "^16.9.8", "@types/react-dom": "^17.0.3",
"@types/react-intl": "^3.0.0", "@types/react-intl": "^3.0.0",
"@types/react-router-dom": "^5.1.6", "@types/react-router-dom": "^5.1.7",
"@types/react-select": "^3.0.22", "@types/react-select": "^4.0.13",
"@typescript-eslint/eslint-plugin": "^4.4.1", "@typescript-eslint/eslint-plugin": "^4.19.0",
"@typescript-eslint/parser": "^4.4.1", "@typescript-eslint/parser": "^4.19.0",
"copy-webpack-plugin": "^8.1.0", "copy-webpack-plugin": "^8.1.0",
"css-loader": "^4.3.0", "css-loader": "^5.2.0",
"eslint": "^7.11.0", "eslint": "^7.22.0",
"eslint-import-resolver-webpack": "0.12.2", "eslint-import-resolver-webpack": "0.13.0",
"eslint-plugin-babel": "5.3.1", "eslint-plugin-cypress": "2.11.2",
"eslint-plugin-cypress": "2.11.1", "eslint-plugin-header": "3.1.1",
"eslint-plugin-header": "3.0.0", "eslint-plugin-import": "2.22.1",
"eslint-plugin-import": "2.22.0",
"eslint-plugin-jquery": "1.5.1", "eslint-plugin-jquery": "1.5.1",
"eslint-plugin-mattermost": "github:mattermost/eslint-plugin-mattermost#070ce792d105482ffb2b27cfc0b7e78b3d20acee", "eslint-plugin-mattermost": "github:mattermost/eslint-plugin-mattermost#070ce792d105482ffb2b27cfc0b7e78b3d20acee",
"eslint-plugin-no-only-tests": "2.4.0", "eslint-plugin-no-only-tests": "2.4.0",
"eslint-plugin-react": "7.20.6", "eslint-plugin-react": "7.23.1",
"file-loader": "^6.1.0", "file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.0", "html-webpack-plugin": "^5.3.1",
"isomorphic-fetch": "^3.0.0", "isomorphic-fetch": "^3.0.0",
"jest": "^26.6.3", "jest": "^26.6.3",
"sass": "^1.27.0", "sass": "^1.32.8",
"sass-loader": "^10.0.2", "sass-loader": "^11.0.1",
"start-server-and-test": "^1.11.7", "start-server-and-test": "^1.12.1",
"style-loader": "^1.3.0", "style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.1.1", "terser-webpack-plugin": "^5.1.1",
"ts-jest": "^26.4.1", "ts-jest": "^26.5.4",
"ts-loader": "^8.0.3", "ts-loader": "^8.0.18",
"typescript": "^4.0.2", "typescript": "^4.2.3",
"webpack": "^4.44.1", "webpack": "^5.28.0",
"webpack-cli": "^3.3.12", "webpack-cli": "^4.5.0",
"webpack-merge": "^5.1.2" "webpack-merge": "^5.7.3"
}, },
"optionalDependencies": { "optionalDependencies": {
"cypress": "^6.2.1" "cypress": "^6.8.0"
} }
} }

View file

@ -1,9 +1,10 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import React, {CSSProperties} from 'react' import React from 'react'
import {injectIntl, IntlShape} from 'react-intl' import {injectIntl, IntlShape} from 'react-intl'
import {ActionMeta, ValueType, FormatOptionLabelMeta} from 'react-select' import {ActionMeta, ValueType, FormatOptionLabelMeta} from 'react-select'
import CreatableSelect from 'react-select/creatable' import CreatableSelect from 'react-select/creatable'
import { CSSObject } from '@emotion/serialize';
import {IPropertyOption} from '../blocks/board' import {IPropertyOption} from '../blocks/board'
import {Constants} from '../constants' import {Constants} from '../constants'
@ -43,7 +44,7 @@ class ValueSelector extends React.Component<Props, State> {
return true return true
} }
private renderLabel = (option: IPropertyOption, meta: FormatOptionLabelMeta<IPropertyOption>): React.ReactNode => { private renderLabel = (option: IPropertyOption, meta: FormatOptionLabelMeta<IPropertyOption, false>): React.ReactNode => {
if (meta.context === 'value') { if (meta.context === 'value') {
return <span className={`octo-label ${option.color}`} >{option.value}</span> return <span className={`octo-label ${option.color}`} >{option.value}</span>
} }
@ -93,40 +94,40 @@ class ValueSelector extends React.Component<Props, State> {
<CreatableSelect <CreatableSelect
isClearable={true} isClearable={true}
styles={{ styles={{
indicatorsContainer: (provided: CSSProperties): CSSProperties => ({ indicatorsContainer: (provided: CSSObject): CSSObject => ({
...provided, ...provided,
display: 'none', display: 'none',
}), }),
menu: (provided: CSSProperties): CSSProperties => ({ menu: (provided: CSSObject): CSSObject => ({
...provided, ...provided,
width: 'unset', width: 'unset',
background: 'rgb(var(--main-bg))', background: 'rgb(var(--main-bg))',
}), }),
option: (provided: CSSProperties, state: {isFocused: boolean}): CSSProperties => ({ option: (provided: CSSObject, state: {isFocused: boolean}): CSSObject => ({
...provided, ...provided,
background: state.isFocused ? 'rgba(var(--main-fg), 0.1)' : 'rgb(var(--main-bg))', background: state.isFocused ? 'rgba(var(--main-fg), 0.1)' : 'rgb(var(--main-bg))',
color: state.isFocused ? 'rgb(var(--main-fg))' : 'rgb(var(--main-fg))', color: state.isFocused ? 'rgb(var(--main-fg))' : 'rgb(var(--main-fg))',
padding: '2px 8px', padding: '2px 8px',
}), }),
control: (): CSSProperties => ({ control: (): CSSObject => ({
border: 0, border: 0,
}), }),
valueContainer: (provided: CSSProperties): CSSProperties => ({ valueContainer: (provided: CSSObject): CSSObject => ({
...provided, ...provided,
padding: '0 8px', padding: '0 8px',
}), }),
singleValue: (provided: CSSProperties): CSSProperties => ({ singleValue: (provided: CSSObject): CSSObject => ({
...provided, ...provided,
color: 'rgb(var(--main-fg))', color: 'rgb(var(--main-fg))',
}), }),
input: (provided: CSSProperties): CSSProperties => ({ input: (provided: CSSObject): CSSObject => ({
...provided, ...provided,
paddingBottom: 0, paddingBottom: 0,
paddingTop: 0, paddingTop: 0,
marginBottom: 0, marginBottom: 0,
marginTop: 0, marginTop: 0,
}), }),
menuList: (provided: CSSProperties): CSSProperties => ({ menuList: (provided: CSSObject): CSSObject => ({
...provided, ...provided,
overflowY: 'unset', overflowY: 'unset',
}), }),
@ -136,7 +137,7 @@ class ValueSelector extends React.Component<Props, State> {
options={this.props.options} options={this.props.options}
getOptionLabel={(o: IPropertyOption) => o.value} getOptionLabel={(o: IPropertyOption) => o.value}
getOptionValue={(o: IPropertyOption) => o.id} getOptionValue={(o: IPropertyOption) => o.id}
onChange={(value: ValueType<IPropertyOption>, action: ActionMeta<IPropertyOption>): void => { onChange={(value: ValueType<IPropertyOption, false>, action: ActionMeta<IPropertyOption>): void => {
if (action.action === 'select-option') { if (action.action === 'select-option') {
this.props.onChange((value as IPropertyOption).id) this.props.onChange((value as IPropertyOption).id)
} else if (action.action === 'clear') { } else if (action.action === 'clear') {

View file

@ -17,6 +17,12 @@ function makeCommonConfig() {
}, },
module: { module: {
rules: [ rules: [
{
test: /\.m?js/,
resolve: {
fullySpecified: false
}
},
{ {
test: /\.tsx?$/, test: /\.tsx?$/,
use: { use: {
@ -37,7 +43,7 @@ function makeCommonConfig() {
}, },
{ {
test: /\.html$/, test: /\.html$/,
loader: 'file-loader', type: 'asset/resource',
}, },
{ {
test: /\.s[ac]ss$/i, test: /\.s[ac]ss$/i,
@ -55,7 +61,7 @@ function makeCommonConfig() {
], ],
}, },
{ {
test: /\.(tsx?|js|jsx|html)$/, test: /\.(tsx?|js|jsx|mjs|html)$/,
use: [ use: [
], ],
exclude: [/node_modules/], exclude: [/node_modules/],
@ -67,6 +73,7 @@ function makeCommonConfig() {
'node_modules', 'node_modules',
path.resolve(__dirname), path.resolve(__dirname),
], ],
fullySpecified: false,
extensions: ['.js', '.jsx', '.ts', '.tsx'], extensions: ['.js', '.jsx', '.ts', '.tsx'],
}, },
plugins: [ plugins: [