yarn: update dependencies, prepare for Plug'n'Play

resources/scripts/TransitionRouter.tsx

@@ -7,7 +7,7 @@ import tw from 'twin.macro';
 
 const StyledSwitchTransition = styled(SwitchTransition)`
     ${tw`relative`};
-    
+
     & section {
         ${tw`absolute w-full top-0 left-0`};
     }

resources/scripts/components/FlashMessageRender.tsx

@@ -19,7 +19,7 @@ const FlashMessageRender = ({ byKey, className }: Props) => {
                 {
                     flashes.map((flash, index) => (
                         <React.Fragment key={flash.id || flash.type + flash.message}>
-                            {index > 0 && <div css={tw`mt-2`}></div>}
+                            {index > 0 && <div css={tw`mt-2`}/>}
                             <MessageBox type={flash.type} title={flash.title}>
                                 {flash.message}
                             </MessageBox>

resources/scripts/components/auth/LoginCheckpointContainer.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
+import { StaticContext } from 'react-router';
 import { Link, RouteComponentProps } from 'react-router-dom';
 import loginCheckpoint from '@/api/auth/loginCheckpoint';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import { ActionCreator } from 'easy-peasy';
-import { StaticContext } from 'react-router';
 import { useFormikContext, withFormik } from 'formik';
 import useFlash from '@/plugins/useFlash';
 import { FlashStore } from '@/state/flashes';

resources/scripts/components/elements/CodemirrorEditor.tsx

@@ -158,9 +158,10 @@ export default ({ style, initialContent, filename, mode, fetchContent, onContent
             indentWithTabs: false,
             lineWrapping: true,
             lineNumbers: true,
+            // @ts-ignore
             foldGutter: true,
             fixedGutter: true,
-            scrollbarStyle: 'overlay',
+            scrollbarStyle: 'native',
             coverGutterNextToScrollbar: false,
             readOnly: false,
             showCursorWhenSelecting: false,
@@ -169,8 +170,6 @@ export default ({ style, initialContent, filename, mode, fetchContent, onContent
             autocorrect: false,
             autocapitalize: false,
             lint: false,
-            // This property is actually used, the d.ts file for CodeMirror is incorrect.
-            // @ts-ignore
             autoCloseBrackets: true,
             matchBrackets: true,
             gutters: [ 'CodeMirror-linenumbers', 'CodeMirror-foldgutter' ],

resources/scripts/components/server/ServerConsole.tsx

@@ -7,7 +7,7 @@ import ServerContentBlock from '@/components/elements/ServerContentBlock';
 import ServerDetailsBlock from '@/components/server/ServerDetailsBlock';
 import isEqual from 'react-fast-compare';
 import PowerControls from '@/components/server/PowerControls';
-import { EulaModalFeature } from '@feature/index';
+import { EulaModalFeature } from 'feature/index';
 import ErrorBoundary from '@/components/elements/ErrorBoundary';
 import Spinner from '@/components/elements/Spinner';
 

resources/scripts/components/server/features/index.ts

@@ -6,6 +6,6 @@ import { lazy } from 'react';
  * whenever they are actually loaded for the client (which may be never, depending
  * on the feature and the egg).
  */
-const EulaModalFeature = lazy(() => import(/* webpackChunkName: "feature.eula" */'@feature/eula/EulaModalFeature'));
+const EulaModalFeature = lazy(() => import(/* webpackChunkName: "feature.eula" */'feature/eula/EulaModalFeature'));
 
 export { EulaModalFeature };

resources/scripts/components/server/schedules/TaskDetailsModal.tsx

@@ -35,7 +35,7 @@ interface Values {
 const schema = object().shape({
     action: string().required().oneOf([ 'command', 'power', 'backup' ]),
     payload: string().when('action', {
-        is: v => v !== 'backup',
+        is: (v: string) => v !== 'backup',
         then: string().required('A task payload must be provided.'),
         otherwise: string(),
     }),