ui: upgrade to webpack5

packages/ui-default/components/scratchpad/DataInputComponent.jsx

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 
 export default function DataInputComponent(props) {
   const {

packages/ui-default/components/scratchpad/PanelButtonComponent.jsx

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 
 export default function PanelButtonComponent(props) {
   const {

packages/ui-default/components/scratchpad/PanelComponent.jsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
 import SplitPaneFillOverlay from 'vj/components/react-splitpane/SplitPaneFillOverlayComponent';
 
 export default function PanelComponent(props) {

packages/ui-default/components/scratchpad/ScratchpadPretestContainer.jsx

@@ -1,11 +1,10 @@
+import AnsiUp from 'ansi_up';
 import React from 'react';
 import { connect } from 'react-redux';
-import AnsiUp from 'ansi_up';
-
-import i18n from 'vj/utils/i18n';
 import Icon from 'vj/components/react/IconComponent';
-import Panel from './PanelComponent';
+import i18n from 'vj/utils/i18n';
 import DataInput from './DataInputComponent';
+import Panel from './PanelComponent';
 
 const AU = new AnsiUp();
 

packages/ui-default/components/scratchpad/ScratchpadRecordsContainer.jsx

@@ -1,8 +1,8 @@
+import classNames from 'classnames';
 import React from 'react';
 import { connect } from 'react-redux';
-import classNames from 'classnames';
-import i18n from 'vj/utils/i18n';
 import Icon from 'vj/components/react/IconComponent';
+import i18n from 'vj/utils/i18n';
 import Panel from './PanelComponent';
 import ScratchpadRecordsRow from './ScratchpadRecordsRowContainer';
 

packages/ui-default/components/scratchpad/ScratchpadRecordsRowContainer.jsx

@@ -1,15 +1,14 @@
-import React from 'react';
 import classNames from 'classnames';
+import _ from 'lodash';
+import moment from 'moment';
+import React from 'react';
 import { connect } from 'react-redux';
 import TimeAgo from 'timeago-react';
-import moment from 'moment';
-import _ from 'lodash';
-
-import substitute from 'vj/utils/substitute';
-import emulateAnchorClick from 'vj/utils/emulateAnchorClick';
-import { parse as parseMongoId } from 'vj/utils/mongoId';
-import i18n from 'vj/utils/i18n';
 import * as recordEnum from 'vj/constant/record';
+import emulateAnchorClick from 'vj/utils/emulateAnchorClick';
+import i18n from 'vj/utils/i18n';
+import { parse as parseMongoId } from 'vj/utils/mongoId';
+import substitute from 'vj/utils/substitute';
 
 const shouldShowDetail = (data) => recordEnum.STATUS_SCRATCHPAD_SHOW_DETAIL_FLAGS[data.status];
 

packages/ui-default/components/scratchpad/ScratchpadToolbarContainer.jsx

@@ -1,16 +1,15 @@
 /* eslint-disable react/static-property-placement */
 import _ from 'lodash';
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import { connect } from 'react-redux';
-
-import i18n from 'vj/utils/i18n';
-import request from 'vj/utils/request';
 import Icon from 'vj/components/react/IconComponent';
 import getAvailableLangs from 'vj/utils/availableLangs';
+import i18n from 'vj/utils/i18n';
+import request from 'vj/utils/request';
 import Toolbar, {
-  ToolbarItemComponent as ToolbarItem,
   ToolbarButtonComponent as ToolbarButton,
+  ToolbarItemComponent as ToolbarItem,
   ToolbarSplitComponent as ToolbarSplit,
 } from './ToolbarComponent';
 

packages/ui-default/components/scratchpad/ToolbarComponent.jsx

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 
 export default function ToolbarComponent(props) {
   const {

packages/ui-default/components/scratchpad/index.jsx

@@ -1,14 +1,15 @@
-import React from 'react';
-import SplitPane from 'react-split-pane';
-import { useDispatch, useSelector } from 'react-redux';
-import _ from 'lodash';
-import SplitPaneFillOverlay from 'vj/components/react-splitpane/SplitPaneFillOverlayComponent';
 import ProblemIcon from '@vscode/codicons/src/icons/file.svg?react';
+import $ from 'jquery';
+import _ from 'lodash';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import SplitPane from 'react-split-pane';
 import Dom from 'vj/components/react/DomComponent';
-import ScratchpadToolbar from './ScratchpadToolbarContainer';
+import SplitPaneFillOverlay from 'vj/components/react-splitpane/SplitPaneFillOverlayComponent';
 import ScratchpadEditor from './ScratchpadEditorContainer';
 import ScratchpadPretest from './ScratchpadPretestContainer';
 import ScratchpadRecords from './ScratchpadRecordsContainer';
+import ScratchpadToolbar from './ScratchpadToolbarContainer';
 
 function buildNestedPane([a, ...panes], mode = 'horizontal') {
   const elements = [

packages/ui-default/components/scratchpad/reducers/index.ts

@@ -1,9 +1,9 @@
 import { combineReducers } from 'redux';
-import ui from './ui';
 import editor from './editor';
 import pretest from './pretest';
 import records from './records';
 import state from './state';
+import ui from './ui';
 
 const reducer = combineReducers({
   ui,