MM-19142 - Update webapp dependencies

.eslintrc.json

@@ -21,6 +21,7 @@
  },
  "rules": {
  "import/no-unresolved": 2,
+ "comma-dangle": 0,
  "import/order": [
  "error",
  {
@@ -77,8 +78,10 @@
  "plugin:cypress/recommended"
  ],
  "rules": {
+ "comma-dangle": 0,
  "@typescript-eslint/no-non-null-assertion": 0,
  "@typescript-eslint/no-var-requires": 0,
+ "@typescript-eslint/no-empty-function": 0,
  "@typescript-eslint/prefer-interface": 0,
  "@typescript-eslint/explicit-function-return-type": 0,
  "@typescript-eslint/indent": [

.storybook/webpack.config.js

@@ -28,7 +28,9 @@ module.exports = async ({config, mode}) => {
  {
  loader: 'sass-loader',
  options: {
- includePaths: ['node_modules/compass-mixins/lib', 'sass'],
+ sassOptions: {
+ includePaths: ['node_modules/compass-mixins/lib', 'sass'],
+ },
  },
  },
  ],

components/analytics/doughnut_chart.tsx

@@ -38,8 +38,8 @@ export default class DoughnutChart extends React.PureComponent<Props> {
  if (!this.refs.canvas) {
  return;
  }
- var el = ReactDOM.findDOMNode(this.refs.canvas) as HTMLCanvasElement;
- var ctx = el.getContext('2d') as CanvasRenderingContext2D;
+ const el = ReactDOM.findDOMNode(this.refs.canvas) as HTMLCanvasElement;
+ const ctx = el.getContext('2d') as CanvasRenderingContext2D;
  const dataCopy = JSON.parse(JSON.stringify(this.props.data));
  this.chart = new Chart(ctx, {type: 'doughnut', data: dataCopy, options: {}});
  if (update && this.chart) {

components/analytics/format.tsx

@@ -36,7 +36,7 @@ export function formatPostDoughtnutData(filePosts: any, hashtagPosts: any, total
 }
 
 export function formatPostsPerDayData(data: any) {
- var chartData = {
+ const chartData = {
  labels: [] as any,
  datasets: [{
  fillColor: 'rgba(151,187,205,0.2)',
@@ -49,9 +49,9 @@ export function formatPostsPerDayData(data: any) {
  }],
  };
 
- for (var index in data) {
+ for (const index in data) {
  if (data[index]) {
- var row = data[index];
+ const row = data[index];
  chartData.labels.push(row.name);
  chartData.datasets[0].data.push(row.value);
  }
@@ -61,7 +61,7 @@ export function formatPostsPerDayData(data: any) {
 }
 
 export function formatUsersWithPostsPerDayData(data: any) {
- var chartData = {
+ const chartData = {
  labels: [] as any,
  datasets: [{
  label: '',
@@ -75,9 +75,9 @@ export function formatUsersWithPostsPerDayData(data: any) {
  }],
  };
 
- for (var index in data) {
+ for (const index in data) {
  if (data[index]) {
- var row = data[index];
+ const row = data[index];
  chartData.labels.push(row.name);
  chartData.datasets[0].data.push(row.value);
  }

components/color_input.test.tsx

@@ -87,8 +87,6 @@ describe('components/ColorInput', () => {
 
  const newColorData: any = {hex: '#ccc'};
 
- // Ignoring for now since this test won't matter after TS conversion
- // @ts-ignore
  wrapper.instance().handleChange(newColorData);
 
  expect(onChange).toHaveBeenCalledTimes(1);

components/color_input.tsx

@@ -48,7 +48,7 @@ class ColorInput extends React.PureComponent<Props, State> {
  this.setState({isOpened: !this.state.isOpened});
  };
 
- private handleChange = (newColorData: ColorResult) => {
+ public handleChange = (newColorData: ColorResult) => {
  const {hex} = newColorData;
  const {onChange: handleChange} = this.props;
 

components/copy_url_context_menu/__snapshots__/copy_url_context_menu.test.jsx.snap

@@ -10,11 +10,15 @@ exports[`components/CopyUrlContextMenu should copy absolute url on click 1`] = `
  onHide={[Function]}
  onMouseLeave={[Function]}
  onShow={[Function]}
+ preventHideOnContextMenu={false}
+ preventHideOnResize={false}
+ preventHideOnScroll={false}
  rtl={false}
  style={Object {}}
  >
  <MenuItem
  attributes={Object {}}
+ className=""
  data={Object {}}
  disabled={false}
  divider={false}
@@ -38,6 +42,7 @@ exports[`components/CopyUrlContextMenu should copy absolute url on click 1`] = `
  disableIfShiftIsPressed={false}
  holdToDisplay={-1}
  id="copy-url-context-menuresource"
+ mouseButton={2}
  posX={0}
  posY={0}
  renderTag="div"
@@ -59,11 +64,15 @@ exports[`components/CopyUrlContextMenu should copy relative url on click 1`] = `
  onHide={[Function]}
  onMouseLeave={[Function]}
  onShow={[Function]}
+ preventHideOnContextMenu={false}
+ preventHideOnResize={false}
+ preventHideOnScroll={false}
  rtl={false}
  style={Object {}}
  >
  <MenuItem
  attributes={Object {}}
+ className=""
  data={Object {}}
  disabled={false}
  divider={false}
@@ -87,6 +96,7 @@ exports[`components/CopyUrlContextMenu should copy relative url on click 1`] = `
  disableIfShiftIsPressed={false}
  holdToDisplay={-1}
  id="copy-url-context-menuresource"
+ mouseButton={2}
  posX={0}
  posY={0}
  renderTag="div"

components/error_page/error_page.tsx

@@ -38,7 +38,7 @@ export default class ErrorPage extends React.PureComponent<Props> {
  const params: URLSearchParams = new URLSearchParams(this.props.location.search);
  const signature = params.get('s');
 
- var trustParams = false;
+ let trustParams = false;
  if (signature) {
  params.delete('s');
 

components/multiselect/multiselect.test.tsx

@@ -17,7 +17,7 @@ describe('components/multiselect/multiselect', () => {
  const totalCount = 8;
  const optionsNumber = 8;
  const users = [];
- for (var i = 0; i < optionsNumber; i++) {
+ for (let i = 0; i < optionsNumber; i++) {
  users.push({id: `${i}`, label: `${i}`, value: `${i}`});
  }
 

components/multiselect/multiselect_list.tsx

@@ -41,7 +41,7 @@ export default class MultiSelectList extends React.Component<Props, State> {
  onAction: () => null,
  };
 
- private toSelect: number = -1
+ private toSelect = -1
  private listRef = React.createRef<HTMLDivElement>()
  private selectedRef = React.createRef<HTMLDivElement>()
 
@@ -126,7 +126,7 @@ export default class MultiSelectList extends React.Component<Props, State> {
  }
 
  private defaultOptionRenderer = (option: Value, isSelected: boolean, onAdd: Props['onAdd']) => {
- var rowSelected = '';
+ let rowSelected = '';
  if (isSelected) {
  rowSelected = 'more-modal__row--selected';
  }

components/select_team/components/__snapshots__/select_team_item.test.jsx.snap

@@ -226,13 +226,16 @@ exports[`components/select_team/components/SelectTeamItem should match snapshot,
  "useCallback": [Function],
  "useContext": [Function],
  "useDebugValue": [Function],
+ "useDeferredValue": [Function],
  "useEffect": [Function],
  "useImperativeHandle": [Function],
  "useLayoutEffect": [Function],
  "useMemo": [Function],
  "useReducer": [Function],
  "useRef": [Function],
+ "useResponder": [Function],
  "useState": [Function],
+ "useTransition": [Function],
  },
  "_element": <SelectTeamItem
  canJoinPrivateTeams={false}

components/widgets/admin_console/admin_header.test.tsx

@@ -20,18 +20,4 @@ describe('components/widgets/admin_console/AdminHeader', () => {
 `
  );
  });
-
- test('children prop is mandatory', () => {
- const originalError = console.error;
- console.error = jest.fn();
-
- // Ignoring since this is a prop check which will go away with TS conversion
- // @ts-ignore
- shallow(<AdminHeader/>);
-
- expect(console.error).toBeCalledTimes(1);
- expect(console.error).toBeCalledWith('Warning: Failed prop type: The prop `children` is marked as required in `AdminHeader`, but its value is `undefined`.\n in AdminHeader');
-
- console.error = originalError;
- });
 });

components/widgets/admin_console/admin_header.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 
 type Props = {
- children: React.ReactNode;
+ children: JSX.Element[] | JSX.Element | string;
 };
 
 export default class AdminHeader extends React.Component<Props> {