Chore: Update react (#2234)

.eslintrc.js

@@ -147,7 +147,8 @@ module.exports = {
  }],
  'spaced-comment': 'off',
  'use-isnan': 'error',
- 'valid-typeof': 'off'
+ 'valid-typeof': 'off',
+ 'react/react-in-jsx-scope': 'off'
  },
  settings: {
  react: {

__mocks__/react-monaco-editor.js

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 function MonacoEditor() {
  return (<div />);
 }

package.json

@@ -18,6 +18,7 @@
  "adaptive-expressions": "4.17.1",
  "adaptivecards": "2.11.1",
  "adaptivecards-templating": "2.3.1",
+ "ajv": "8.11.0",
  "apg-js": "4.1.2",
  "babel-loader": "8.2.5",
  "babel-preset-react-app": "10.0.1",
@@ -45,9 +46,9 @@
  "postcss-loader": "7.0.1",
  "postcss-preset-env": "7.8.2",
  "re-resizable": "6.9.9",
- "react": "16.14.0",
+ "react": "18.2.0",
  "react-app-polyfill": "3.0.0",
- "react-dom": "16.14.0",
+ "react-dom": "18.2.0",
  "react-intl": "6.2.1",
  "react-redux": "8.0.4",
  "redux": "4.2.0",
@@ -95,8 +96,8 @@
  "@types/isomorphic-fetch": "0.0.36",
  "@types/jest": "27.4.1",
  "@types/lodash.debounce": "4.0.7",
- "@types/react": "17.0.44",
- "@types/react-dom": "17.0.11",
+ "@types/react": "18.0.25",
+ "@types/react-dom": "18.0.8",
  "@types/react-intl": "3.0.0",
  "@types/react-redux": "7.1.23",
  "@types/redux-logger": "3.0.9",
@@ -131,6 +132,6 @@
  "indent": 4
  },
  "resolutions": {
- "@types/react": "17.0.30"
+ "axe-core": "4.4.3"
  }
 }

src/app/services/actions/ocps-action-creators.spec.ts

@@ -71,7 +71,8 @@ describe('OCPS action creators', () => {
  const store = mockStore({});
  const expectedActions = [
  {
- type: GET_POLICY_PENDING
+ type: GET_POLICY_PENDING,
+ response: null
  },
  {
  type: GET_POLICY_SUCCESS,

src/app/services/actions/snippet-action-creator.spec.ts

@@ -62,7 +62,8 @@ describe('Snippet actions creators', () => {
  // Arrange
  const expectedActions = [
  {
- type: 'GET_SNIPPET_PENDING'
+ type: 'GET_SNIPPET_PENDING',
+ response: null
  },
  {
  type: GET_SNIPPET_SUCCESS,

src/app/views/App.tsx

@@ -1,6 +1,6 @@
 import { Announced, getTheme, ITheme, styled } from '@fluentui/react';
 import { Resizable } from 're-resizable';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';

src/app/views/app-sections/FeedbackButton.tsx

@@ -1,5 +1,5 @@
 import { DirectionalHint, IconButton, IIconProps, TooltipHost } from '@fluentui/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { translateMessage } from '../../utils/translate-messages';
 import FeedbackForm from '../query-runner/request/feedback/FeedbackForm';
 import { ACCOUNT_TYPE } from '../../services/graph-constants';

src/app/views/app-sections/HeaderMessaging.tsx

@@ -1,5 +1,4 @@
 import { Link, MessageBar, MessageBarType } from '@fluentui/react';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { getLoginType } from '../../../modules/authentication/authUtils';

src/app/views/app-sections/StatusMessages.tsx

@@ -1,5 +1,5 @@
 import { Link, MessageBar } from '@fluentui/react';
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 

src/app/views/app-sections/TermsOfUseMessage.tsx

@@ -1,5 +1,4 @@
 import { Link, MessageBar, MessageBarType, styled } from '@fluentui/react';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 

src/app/views/authentication/Authentication.tsx

@@ -1,6 +1,6 @@
 import { MessageBarType, Spinner, SpinnerSize, styled } from '@fluentui/react';
 import { SeverityLevel } from '@microsoft/applicationinsights-web';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { injectIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 

src/app/views/authentication/auth-util-components/ProfileButton.tsx

@@ -1,5 +1,4 @@
 import { ActionButton, getId, getTheme, TooltipHost } from '@fluentui/react';
-import React from 'react';
 import { translateMessage } from '../../../utils/translate-messages';
 import Profile from '../profile/Profile';
 import { profileButtonStyles } from './ProfileButton.styles';

src/app/views/authentication/profile/Profile.tsx

@@ -2,7 +2,7 @@ import {
  ActionButton, Callout, FontSizes, getTheme, IPersonaProps, IPersonaSharedProps, mergeStyleSets,
  Persona, PersonaSize, Spinner, SpinnerSize, Stack, styled
 } from '@fluentui/react';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useId } from '@fluentui/react-hooks';
 

src/app/views/common/copy/CopyButton.tsx

@@ -1,5 +1,5 @@
 import { IButton, IconButton, IIconProps, PrimaryButton } from '@fluentui/react';
-import React, { useState } from 'react';
+import { createRef, useState } from 'react';
 import { translateMessage } from '../../../utils/translate-messages';
 
 interface ICopyButtonProps {
@@ -18,7 +18,7 @@ export function CopyButton(props:ICopyButtonProps) {
 
  const copyLabel: string = !copied ? translateMessage('Copy') : translateMessage('Copied');
 
- const copyRef = React.createRef<IButton>();
+ const copyRef = createRef<IButton>();
  const onSetFocus = () => copyRef.current!.focus();
 
  const handleCopyClick = async () => {

src/app/views/common/image/Image.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { IImageComponentProps } from '../../../../types/image';
 
 export const Image = ({ styles, alt, body }: IImageComponentProps): JSX.Element => {

src/app/views/common/monaco/Monaco.tsx

@@ -1,6 +1,6 @@
 import { FocusZone } from '@fluentui/react';
 import Editor, { OnChange, useMonaco } from '@monaco-editor/react';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 
 import { ThemeContext } from '../../../../themes/theme-context';
 import './monaco.scss';