DSEGOG-341 Fix remaining tsc errors and add preview:build for SciGateway

.gitignore

@@ -22,7 +22,7 @@ screenshots/
 **/cypress/fixtures/example.json
 
 # production
-/build
+dist
 
 # misc
 .DS_Store

package.json

@@ -46,6 +46,9 @@
   "scripts": {
     "dev": "vite --open",
     "build": "tsc --project tsconfig.build.json && vite build",
+    "preview": "vite preview",
+    "preview:build": "yarn build && yarn preview",
+    "preview:build:dev": "yarn build --watch & yarn preview",
     "lint:js": "eslint --max-warnings=0 --ext=tsx --ext=ts --ext=js --ext=jsx --fix ./src",
     "serve:build": "yarn build && serve -l 5001 build",
     "test": "craco test --env=jsdom --coverage --watchAll=false",

src/App.tsx

@@ -1,21 +1,21 @@
-import React from 'react';
-import ViewTabs from './views/viewTabs.component';
 import {
+  QueryCache,
   QueryClient,
   QueryClientProvider,
-  QueryCache,
 } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { configureApp } from './state/slices/configSlice';
-import { requestPluginRerender } from './state/scigateway.actions';
+import React from 'react';
+import { connect, Provider } from 'react-redux';
+import './App.css';
 import { MicroFrontendId } from './app.types';
 import OGThemeProvider from './ogThemeProvider.component';
-import OpenWindows from './windows/openWindows.component';
-import { store, RootState } from './state/store';
-import { connect, Provider } from 'react-redux';
 import Preloader from './preloader/preloader.component';
-import './App.css';
 import SettingsMenuItems from './settingsMenuItems.component';
+import { requestPluginRerender } from './state/scigateway.actions';
+import { configureApp } from './state/slices/configSlice';
+import { RootState, store } from './state/store';
+import ViewTabs from './views/viewTabs.component';
+import OpenWindows from './windows/openWindows.component';
 
 const queryClient = new QueryClient({
   defaultOptions: {

src/mocks/handlers.ts

@@ -291,6 +291,8 @@ export const handlers = [
     }
   ),
   http.post('/users/preferences', async ({ request }) => {
+    // Ignoring here as don't have types defined for these endpoints
+    // @ts-ignore
     preferredColourMap = (await request.json()).value;
     return HttpResponse.json(preferredColourMap, { status: 200 });
   }),

src/setupTests.tsx

@@ -73,36 +73,60 @@ if (typeof window.URL.revokeObjectURL === 'undefined') {
  * @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 requestId = '';
-
-  return new Promise<MockedRequest>((resolve, reject) => {
-    const onRequestStart = (req) => {
-      const matchesMethod = req.method.toLowerCase() === method.toLowerCase();
-
-      const matchesUrl = matchRequestUrl(req.url, url).matches;
+  let newRequestId = '';
+
+  return new Promise<Request>((resolve, reject) => {
+    const onRequestStart = ({
+      request,
+      requestId,
+    }: {
+      request: Request;
+      requestId: string;
+    }) => {
+      const requestURL = new URL(request.url);
+      const matchesMethod =
+        request.method.toLowerCase() === method.toLowerCase();
+
+      const matchesUrl = matchRequestUrl(requestURL, url).matches;
 
       if (matchesMethod && matchesUrl) {
-        requestId = req.id;
+        newRequestId = requestId;
       }
     };
 
-    const onRequestMatch = (req) => {
-      if (req.id === requestId) {
+    const onRequestMatch = ({
+      request,
+      requestId,
+    }: {
+      request: Request;
+      requestId: string;
+    }) => {
+      if (requestId === newRequestId) {
         server.events.removeListener('request:start', onRequestStart);
         server.events.removeListener('request:match', onRequestMatch);
         server.events.removeListener('request:unhandled', onRequestUnhandled);
-        resolve(req);
+        resolve(request);
       }
     };
 
-    const onRequestUnhandled = (req) => {
-      if (req.id === requestId) {
+    const onRequestUnhandled = ({
+      request,
+      requestId,
+    }: {
+      request: Request;
+      requestId: string;
+    }) => {
+      const requestURL = new URL(request.url);
+      if (requestId === newRequestId) {
         server.events.removeListener('request:start', onRequestStart);
         server.events.removeListener('request:match', onRequestMatch);
         server.events.removeListener('request:unhandled', onRequestUnhandled);
         reject(
-          new Error(`The ${req.method} ${req.url.href} request was unhandled.`)
+          new Error(
+            `The ${request.method} ${requestURL.href} request was unhandled.`
+          )
         );
       }
     };
@@ -189,11 +213,6 @@ export const createTestQueryClient = (): QueryClient =>
         staleTime: 300000,
       },
     },
-    logger: {
-      log: console.log,
-      warn: console.warn,
-      error: jest.fn(),
-    },
   });
 
 export const hooksWrapperWithProviders = (
@@ -202,7 +221,7 @@ export const hooksWrapperWithProviders = (
 ) => {
   const testQueryClient = queryClient ?? createTestQueryClient();
   const store = setupStore(state);
-  const wrapper = ({ children }) => (
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
     <Provider store={store}>
       <QueryClientProvider client={testQueryClient}>
         {children}
@@ -286,6 +305,8 @@ export const applyDatePickerWorkaround = (): void => {
 };
 
 export const cleanupDatePickerWorkaround = (): void => {
+  // TODO JOEL: Check if can remove the work around once tests migrated
+  // @ts-ignore
   delete window.matchMedia;
 };
 
@@ -300,10 +321,13 @@ export const testChannels = [
   ),
 ];
 
+// TODO JOEL: Verify working with tests - previously had staticChannels included as is
 export const testScalarChannels: FullScalarChannelMetadata[] = [
-  ...Object.values(staticChannels),
+  ...Object.values(staticChannels).filter(
+    (channel) => channel.type === 'scalar'
+  ),
   ...Object.entries(channelsJson.channels)
-    .filter(([systemName, channel]) => channel.type === 'scalar')
+    .filter(([_systemName, channel]) => channel.type === 'scalar')
     .map(
       ([systemName, channel]) =>
         ({

src/vite-env.d.ts

@@ -1 +1,5 @@
 /// <reference types="vite/client" />
+
+// Needed to recognise overridden plugins types in ChartOptions
+// see https://github.com/chartjs/chartjs-plugin-zoom/issues/763
+/// <reference types="chartjs-plugin-zoom" />

vite.config.ts

@@ -84,7 +84,7 @@ export default defineConfig(({ mode }) => {
       lib: {
         // https://github.com/vitejs/vite/issues/7130
         entry: 'src/main.tsx',
-        name: 'inventory-management-system',
+        name: 'operationsgateway',
       },
       rollupOptions: {
         external: ['react', 'react-dom'].concat(rollupExternals),