DSEGOG-341 Fix yarn preview:build:dev and address comments

package.json

@@ -78,9 +78,7 @@
     ]
   },
   "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not op_mini all"
+    "defaults"
   ],
   "packageManager": "[email protected]",
   "devDependencies": {

src/images/imageWindow.component.test.tsx

@@ -6,7 +6,6 @@ import { renderComponentWithProviders } from '../testUtils';
 import ImageWindow from './imageWindow.component';
 
 vi.mock('../windows/windowPortal.component', async () => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
   const ReactMock = await vi.importActual('react');
   return {
     default: ReactMock.forwardRef(({ children }, ref) => (

src/main.tsx

@@ -198,7 +198,6 @@ async function prepare() {
       import.meta.env.VITE_APP_INCLUDE_MSW === 'true' ||
       settingsResult?.apiUrl === ''
     ) {
-      // Need to use require instead of import as import breaks when loaded in SG
       const { worker } = await import('./mocks/browser');
       return worker.start({
         onUnhandledRequest(request, print) {

src/plotting/plot.component.tsx

@@ -8,8 +8,6 @@ import {
 } from '../app.types';
 // only import types as we don't actually run any chart.js code in React
 import type { ChartDataset, ChartOptions } from 'chart.js';
-// we import this even though we don't use it so we can get typescript info added to ChartOptions
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 
 export interface PlotProps {
   datasets: PlotDataset[];

src/plotting/plotSettings/plotSettingsController.component.test.tsx

@@ -24,9 +24,9 @@ describe('Plot Settings component', () => {
 
   const createView = async () => {
     // need to import like this in order for the doMock's to work
-    const PlotSettingsController =
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      (await vi.importActual('./plotSettingsController.component')).default;
+    const PlotSettingsController = (
+      await vi.importActual('./plotSettingsController.component')
+    ).default;
     return render(<PlotSettingsController {...props} />);
   };
 

src/plotting/plotSettings/yAxisTab.component.tsx

@@ -468,18 +468,11 @@ const YAxisTab = (props: YAxisTabProps) => {
                 </Typography>
               </Tooltip>
               <Box
-                sx={
-                  // for some reason, styling these buttons in a row causes webkit
-                  // headless playwright e2e tests on linux to fail - so disable this styling in e2e builds
-                  /* istanbul ignore next */
-                  import.meta.env.VITE_APP_BUILD_STANDALONE === 'true'
-                    ? {}
-                    : {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                      }
-                }
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                }}
               >
                 <MoreOptionsToggle
                   channel={plotChannel}

src/plotting/plotWindow.component.test.tsx

@@ -12,7 +12,6 @@ import { WindowPortal } from '../windows/windowPortal.component';
 import PlotWindow from './plotWindow.component';
 
 vi.mock('../windows/windowPortal.component', async () => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
   const ReactMock = await vi.importActual('react');
   return {
     default: ReactMock.forwardRef(({ children }, ref) => (

src/testUtils.tsx

@@ -1,15 +1,9 @@
-import React from 'react';
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
-// need to mock <canvas> for plotting
 import { Action, ThunkAction } from '@reduxjs/toolkit';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { RenderOptions } from '@testing-library/react';
 import { render } from '@testing-library/react';
 import { matchRequestUrl } from 'msw';
+import React from 'react';
 import { Provider } from 'react-redux';
 import { staticChannels } from './api/channels';
 import {
@@ -45,7 +39,6 @@ import {
  * @param url string representing the URL match for the route
  * @returns a promise of the matching request
  *  */
-// TODO: Could this be replaced using an axios spy for the search params instead?
 export function waitForRequest(method: string, url: string) {
   let newRequestId = '';
 

src/traces/tracePlot.component.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import { Waveform } from '../app.types';
 // only import types as we don't actually run any chart.js code in React
 import type { ChartData, ChartOptions } from 'chart.js';
-// we import this even though we don't use it so we can get typescript info added to ChartOptions
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 
 export interface TracePlotProps {
   trace: Waveform;

src/traces/traceWindow.component.test.tsx

@@ -6,7 +6,6 @@ import { renderComponentWithProviders } from '../testUtils';
 import TraceWindow from './traceWindow.component';
 
 vi.mock('../windows/windowPortal.component', async () => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
   const ReactMock = await vi.importActual('react');
   return {
     default: ReactMock.forwardRef(({ children }, ref) => (

vite.config.ts

@@ -93,7 +93,11 @@ export default defineConfig(({ mode }) => {
     // Config for deployment in SciGateway
     config.build = {
       lib: {
-        // https://github.com/vitejs/vite/issues/7130
+        // We use `umd` here as `es` causes some import statements to leak into the main.js, breaking the build
+        // removing this entirely uses a default of both, which for build results in `umd` taking precedence but when
+        // using --watch, `es` appears to replace it intermittently. Hopefully this can be fixed in the future and we
+        // can use `es` instead.
+        formats: ['umd'],
         entry: 'src/main.tsx',
         name: 'operationsgateway',
       },