Switch to new JSX runtime (#4225)

* Use new JSX runtime and update Babel Node target
* Update .eslintrc
* Remove React imports

GitOrigin-RevId: 559de0267f8f2934c56a860ea8701bb522aa861a

services/web/.eslintrc

@@ -49,9 +49,7 @@
     "node/no-callback-literal": "off",
     "node/no-deprecated-api": "off",
     "node/handle-callback-err": "off",
-    "node/no-path-concat": "off",
-
-    "react/jsx-no-target-blank": "off",
+    "node/no-path-concat": "off"
   },
   "overrides": [
     // NOTE: changing paths may require updating them in the Makefile too.
@@ -106,7 +104,7 @@
     },
     {
       // Frontend specific rules
-      "files": ["**/frontend/js/**/*.js"],
+      "files": ["**/frontend/js/**/*.js", "**/frontend/stories/**/*.js", "**/*.stories.js", "**/test/frontend/**/*.js"],
       "globals": {
         "$": true,
         "angular": true,
@@ -128,6 +126,13 @@
           "children": "never"
         }],
 
+        // Allow target="_blank" in JSX
+        "react/jsx-no-target-blank": "off",
+
+        // Don't import React for JSX; the JSX runtime is added by a Babel plugin
+        "react/react-in-jsx-scope": "off",
+        "react/jsx-uses-react": "off",
+
         // Fix conflict between prettier & standard by overriding to prefer
         // double quotes
         "jsx-quotes": ["error", "prefer-double"],

services/web/.storybook/preview.js

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import './preview.css'
 
 // Storybook does not (currently) support async loading of "stories". Therefore

services/web/babel.config.json

@@ -1,10 +1,18 @@
 {
   "presets": [
+    [
       "@babel/react",
-    ["@babel/env", {
+      {
+        "runtime": "automatic"
+      }
+    ],
+    [
+      "@babel/env",
+      {
         "useBuiltIns": "usage",
         "corejs": { "version": 3 }
-    }]
+      }
+    ]
   ],
   "plugins": ["angularjs-annotate", "macros"],
   // Target our current Node version in test environment, to transform and
@@ -12,12 +20,20 @@
   "env": {
     "test": {
       "presets": [
+        [
           "@babel/react",
-        ["@babel/env", {
-            "targets": {"node": "10.21"},
+          {
+            "runtime": "automatic"
+          }
+        ],
+        [
+          "@babel/env",
+          {
+            "targets": { "node": "12.21" },
             "useBuiltIns": "usage",
             "corejs": { "version": 3 }
-          }]
+          }
+        ]
       ]
     }
   }

services/web/frontend/js/features/chat/components/chat-fallback-error.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import { Button, Alert } from 'react-bootstrap'

services/web/frontend/js/features/chat/components/infinite-scroll.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useLayoutEffect } from 'react'
+import { useRef, useEffect, useLayoutEffect } from 'react'
 import PropTypes from 'prop-types'
 import _ from 'lodash'
 

services/web/frontend/js/features/chat/components/message-content.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react'
+import { useRef, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import Linkify from 'react-linkify'
 

services/web/frontend/js/features/chat/components/message-input.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 

services/web/frontend/js/features/chat/components/message-list.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import moment from 'moment'
 import Message from './message'

services/web/frontend/js/features/chat/components/message.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { getHueForUserId } from '../../../shared/utils/colors'
 import MessageContent from './message-content'

services/web/frontend/js/features/chat/context/chat-context.js

@@ -1,4 +1,4 @@
-import React, {
+import {
   createContext,
   useCallback,
   useContext,

services/web/frontend/js/features/clone-project-modal/components/clone-project-modal-content.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { Trans } from 'react-i18next'
 import {

services/web/frontend/js/features/clone-project-modal/components/clone-project-modal.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import PropTypes from 'prop-types'
 import { cloneProject } from '../utils/api'
 import CloneProjectModalContent from './clone-project-modal-content'

services/web/frontend/js/features/editor-navigation-toolbar/components/back-to-projects-button.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import Icon from '../../../shared/components/icon'
 import { useTranslation } from 'react-i18next'
 

services/web/frontend/js/features/editor-navigation-toolbar/components/chat-toggle-button.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'

services/web/frontend/js/features/editor-navigation-toolbar/components/cobranding-logo.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 
 function CobrandingLogo({

services/web/frontend/js/features/editor-navigation-toolbar/components/history-toggle-button.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'

services/web/frontend/js/features/editor-navigation-toolbar/components/menu-button.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import Icon from '../../../shared/components/icon'

services/web/frontend/js/features/editor-navigation-toolbar/components/pdf-toggle-button.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import classNames from 'classnames'

services/web/frontend/js/features/editor-navigation-toolbar/components/project-name-editable-label.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'

services/web/frontend/js/features/editor-navigation-toolbar/components/share-project-button.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import Icon from '../../../shared/components/icon'

services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'

services/web/frontend/js/features/file-tree/components/file-tree-context.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 
 import { FileTreeMainProvider } from '../contexts/file-tree-main'

services/web/frontend/js/features/file-tree/components/file-tree-create/danger-message.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { Alert } from 'react-bootstrap'
 

services/web/frontend/js/features/file-tree/components/file-tree-create/error-message.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import { FetchError } from '../../../../infrastructure/fetch-json'

services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-create-name-input.js

@@ -1,7 +1,7 @@
 import ControlLabel from 'react-bootstrap/lib/ControlLabel'
 import { Alert, FormControl } from 'react-bootstrap'
 import FormGroup from 'react-bootstrap/lib/FormGroup'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useFileTreeCreateName } from '../../contexts/file-tree-create-name'
 import PropTypes from 'prop-types'

services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-modal-create-file-body.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useTranslation } from 'react-i18next'
 import FileTreeCreateNewDoc from './modes/file-tree-create-new-doc'
 import FileTreeImportFromUrl from './modes/file-tree-import-from-url'

services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-modal-create-file-footer.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert, Button } from 'react-bootstrap'
 import { useFileTreeCreateForm } from '../../contexts/file-tree-create-form'

services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-modal-create-file-mode.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import classnames from 'classnames'
 import { Button } from 'react-bootstrap'
 import PropTypes from 'prop-types'

services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-create-new-doc.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import FileTreeCreateNameInput from '../file-tree-create-name-input'
 import { useFileTreeActionable } from '../../../contexts/file-tree-actionable'
 import { useFileTreeCreateName } from '../../../contexts/file-tree-create-name'

services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-project.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect, useMemo } from 'react'
+import { useState, useCallback, useEffect, useMemo } from 'react'
 import { Button, ControlLabel, FormControl, FormGroup } from 'react-bootstrap'
 import Icon from '../../../../../shared/components/icon'
 import FileTreeCreateNameInput from '../file-tree-create-name-input'

services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-import-from-url.js

@@ -1,5 +1,5 @@
 import { ControlLabel, FormControl, FormGroup } from 'react-bootstrap'
-import React, { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import FileTreeCreateNameInput from '../file-tree-create-name-input'
 import { useFileTreeActionable } from '../../../contexts/file-tree-actionable'

services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-upload-doc.js

@@ -1,6 +1,6 @@
 import { Trans } from 'react-i18next'
 import { Alert, Button } from 'react-bootstrap'
-import React, { useCallback, useState } from 'react'
+import { useCallback, useState } from 'react'
 import PropTypes from 'prop-types'
 import Uppy from '@uppy/core'
 import XHRUpload from '@uppy/xhr-upload'

services/web/frontend/js/features/file-tree/components/file-tree-create/redirect-to-login.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import { Trans } from 'react-i18next'
 import { useFileTreeMainContext } from '../../contexts/file-tree-main'
 

services/web/frontend/js/features/file-tree/components/file-tree-doc.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 

services/web/frontend/js/features/file-tree/components/file-tree-draggable-preview-layer.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import { useRef } from 'react'
 import PropTypes from 'prop-types'
 import { useDragLayer } from 'react-dnd'
 import classNames from 'classnames'

services/web/frontend/js/features/file-tree/components/file-tree-error.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 

services/web/frontend/js/features/file-tree/components/file-tree-folder-list.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 

services/web/frontend/js/features/file-tree/components/file-tree-folder.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'

services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.js

@@ -1,4 +1,4 @@
-import React, { useEffect, createRef } from 'react'
+import { useEffect, createRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'

services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-menu-items.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { MenuItem } from 'react-bootstrap'

services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-menu.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { findDOMNode } from 'react-dom'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'

services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-name.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
 import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-focus'

services/web/frontend/js/features/file-tree/components/file-tree-toolbar.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import Icon from '../../../shared/components/icon'

services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-file.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Modal } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { useFileTreeActionable } from '../../contexts/file-tree-actionable'

services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-folder.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import PropTypes from 'prop-types'
 
 import { Button, Modal } from 'react-bootstrap'

services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-delete.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Button, Modal } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 

services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-error.js

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Button, Modal } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 

services/web/frontend/js/features/file-tree/contexts/file-tree-actionable.js

@@ -1,4 +1,4 @@
-import React, {
+import {
   createContext,
   useCallback,
   useMemo,

services/web/frontend/js/features/file-tree/contexts/file-tree-create-form.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState } from 'react'
+import { createContext, useContext, useState } from 'react'
 import PropTypes from 'prop-types'
 
 const FileTreeCreateFormContext = createContext()

services/web/frontend/js/features/file-tree/contexts/file-tree-create-name.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo, useReducer } from 'react'
+import { createContext, useContext, useMemo, useReducer } from 'react'
 import { isCleanFilename } from '../util/safe-path'
 import PropTypes from 'prop-types'
 

services/web/frontend/js/features/file-tree/contexts/file-tree-draggable.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from 'react'
+import { useRef, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 

services/web/frontend/js/features/file-tree/contexts/file-tree-main.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState } from 'react'
+import { createContext, useContext, useState } from 'react'
 import PropTypes from 'prop-types'
 
 const FileTreeMainContext = createContext()

services/web/frontend/js/features/file-tree/contexts/file-tree-mutable.js

@@ -1,4 +1,4 @@
-import React, {
+import {
   createContext,
   useCallback,
   useReducer,

services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js

@@ -1,4 +1,4 @@
-import React, {
+import {
   createContext,
   useCallback,
   useContext,

services/web/frontend/js/features/file-view/components/file-view-header.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react'
+import { useState, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { Trans, useTranslation } from 'react-i18next'
 

services/web/frontend/js/features/file-view/components/file-view-image.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { useEditorContext } from '../../../shared/context/editor-context'
 

services/web/frontend/js/features/file-view/components/file-view-text.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { useEditorContext } from '../../../shared/context/editor-context'
 

services/web/frontend/js/features/file-view/components/file-view.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 

services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Button, Modal, Row, Col } from 'react-bootstrap'
 import PropTypes from 'prop-types'
 import { Trans, useTranslation } from 'react-i18next'

services/web/frontend/js/features/outline/components/outline-item.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, createRef, useRef } from 'react'
+import { useState, useEffect, createRef, useRef } from 'react'
 import PropTypes from 'prop-types'
 import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
 import classNames from 'classnames'

services/web/frontend/js/features/outline/components/outline-list.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import OutlineItem from './outline-item'

services/web/frontend/js/features/outline/components/outline-root.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 

services/web/frontend/js/features/preview/components/preview-download-button.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { Dropdown, OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'

services/web/frontend/js/features/preview/components/preview-download-file-list.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { MenuItem } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'

services/web/frontend/js/features/preview/components/preview-error.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import PreviewLogsPaneEntry from './preview-logs-pane-entry'

services/web/frontend/js/features/preview/components/preview-first-error-pop-up.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import Icon from '../../../shared/components/icon'

services/web/frontend/js/features/preview/components/preview-logs-pane-entry.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react'
+import { useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'

services/web/frontend/js/features/preview/components/preview-logs-pane.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import { Dropdown } from 'react-bootstrap'

services/web/frontend/js/features/preview/components/preview-logs-toggle-button.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'

services/web/frontend/js/features/preview/components/preview-recompile-button.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { Dropdown, MenuItem, OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'

services/web/frontend/js/features/preview/components/preview-toolbar.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'

services/web/frontend/js/features/preview/components/preview-validation-issue.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import PreviewLogsPaneEntry from './preview-logs-pane-entry'

services/web/frontend/js/features/share-project-modal/components/add-collaborators-upgrade.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Button } from 'react-bootstrap'
 import PropTypes from 'prop-types'

services/web/frontend/js/features/share-project-modal/components/add-collaborators.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react'
+import { useState, useMemo } from 'react'
 import { useTranslation, Trans } from 'react-i18next'
 import { Form, FormGroup, FormControl, Button } from 'react-bootstrap'
 import { useMultipleSelection } from 'downshift'

services/web/frontend/js/features/share-project-modal/components/edit-member.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { Trans, useTranslation } from 'react-i18next'
 import {

services/web/frontend/js/features/share-project-modal/components/invite.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import {
   useProjectContext,

services/web/frontend/js/features/share-project-modal/components/link-sharing.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import { useCallback, useState } from 'react'
 import PropTypes from 'prop-types'
 import { Button, Col, OverlayTrigger, Row, Tooltip } from 'react-bootstrap'
 import { Trans } from 'react-i18next'

services/web/frontend/js/features/share-project-modal/components/member-privileges.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { Trans } from 'react-i18next'
 

services/web/frontend/js/features/share-project-modal/components/owner-info.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useProjectContext } from './share-project-modal'
 import { Col, Row } from 'react-bootstrap'
 import { Trans } from 'react-i18next'

services/web/frontend/js/features/share-project-modal/components/select-collaborators.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState, useRef, useCallback } from 'react'
+import { useEffect, useMemo, useState, useRef, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { Trans, useTranslation } from 'react-i18next'
 import { matchSorter } from 'match-sorter'

services/web/frontend/js/features/share-project-modal/components/send-invites-notice.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Col, Row } from 'react-bootstrap'
 import PropTypes from 'prop-types'
 import { Trans } from 'react-i18next'

services/web/frontend/js/features/share-project-modal/components/send-invites.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { Row } from 'react-bootstrap'
 import { useProjectContext } from './share-project-modal'
 import AddCollaborators from './add-collaborators'

services/web/frontend/js/features/share-project-modal/components/share-modal-body.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   useProjectContext,
   useShareProjectContext,

services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Button, Modal, Grid } from 'react-bootstrap'
 import { Trans } from 'react-i18next'
 import ShareModalBody from './share-modal-body'

services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Modal, Button } from 'react-bootstrap'
 import { Trans } from 'react-i18next'
 import PropTypes from 'prop-types'

services/web/frontend/js/features/share-project-modal/components/view-member.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { Col, Row } from 'react-bootstrap'
 import MemberPrivileges from './member-privileges'

services/web/frontend/js/features/symbol-palette/components/symbol-palette-body.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { TabPanels, TabPanel } from '@reach/tabs'
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'

services/web/frontend/js/features/symbol-palette/components/symbol-palette-content.js

@@ -1,5 +1,5 @@
 import { Tabs } from '@reach/tabs'
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
 import { matchSorter } from 'match-sorter'

services/web/frontend/js/features/symbol-palette/components/symbol-palette-info-link.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 

services/web/frontend/js/features/symbol-palette/components/symbol-palette-item.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import PropTypes from 'prop-types'
 

services/web/frontend/js/features/symbol-palette/components/symbol-palette-items.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import SymbolPaletteItem from './symbol-palette-item'
 

services/web/frontend/js/features/symbol-palette/components/symbol-palette-search.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
 import { FormControl } from 'react-bootstrap'

services/web/frontend/js/features/symbol-palette/components/symbol-palette-tabs.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { TabList, Tab } from '@reach/tabs'
 import PropTypes from 'prop-types'
 

services/web/frontend/js/features/symbol-palette/components/symbol-palette.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import SymbolPaletteContent from './symbol-palette-content'
 

services/web/frontend/js/features/word-count-modal/components/word-count-modal-content.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Row, Col, Modal, Grid, Alert, Button } from 'react-bootstrap'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'

services/web/frontend/js/features/word-count-modal/components/word-count-modal.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import WordCountModalContent from './word-count-modal-content'
 import { fetchWordCount } from '../utils/api'

services/web/frontend/js/ide/human-readable-logs/HumanReadableLogsRules.js

@@ -1,5 +1,4 @@
 /* eslint-disable no-useless-escape */
-import React from 'react'
 import PropTypes from 'prop-types'
 
 function WikiLink({ url, children }) {

services/web/frontend/js/infrastructure/error-boundary.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { captureException } from './error-reporter'
 import { ErrorBoundary } from 'react-error-boundary'
 

services/web/frontend/js/shared/components/accessible-modal.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { Modal } from 'react-bootstrap'
 

services/web/frontend/js/shared/components/beta-badge.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import PropTypes from 'prop-types'