Xstate ugrade

package.json

@@ -52,7 +52,7 @@
     "use-immer": "^0.9.0",
     "webpack": "5.94.0",
     "xlsx": "^0.18.5",
-    "xstate": "^5.3.1",
+    "xstate": "^5.13.2",
     "yup": "^1.2.0"
   },
   "scripts": {

public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.2.10'
-const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
+const PACKAGE_VERSION = '2.6.6'
+const INTEGRITY_CHECKSUM = 'ca7800994cc8bfb5eb961e037c877074'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,7 +62,12 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: true,
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
       })
       break
     }
@@ -155,6 +160,10 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -183,12 +192,14 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    const headers = Object.fromEntries(requestClone.headers.entries())
-
-    // Remove internal MSW request header so the passthrough request
-    // complies with any potential CORS preflight checks on the server.
-    // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    headers.delete('accept', 'msw/passthrough')
 
     return fetch(requestClone, { headers })
   }

src/components/LayoutPlanner.tsx

@@ -12,7 +12,7 @@ import { buildSlotColor, buildSlotSecondaryText, buildSlotText } from '../pages/
 import { ActorRef, MachineSnapshot } from 'xstate';
 
 interface LayoutPlannerProps {
-  actor: ActorRef<MachineSnapshot<LayoutContext, LayoutEvents, any, any, any, any>, any>;
+  actor: ActorRef<MachineSnapshot<LayoutContext, LayoutEvents, any, any, any, any, any, any>, any>;
   children: React.ReactNode;
 }
 

src/components/libraryGeneration/DualIndexPlateComponent.tsx

@@ -23,7 +23,7 @@ import { OutputSlotCopyData } from '../slotMapper/slotMapper.types';
 type DualIndexPlateParams = {
   destinationLabware?: LabwareFlaggedFieldsFragment;
   send: (event: ReagentTransferEvent) => void;
-  current: MachineSnapshot<ReagentTransferContext, any, any, any, any, any>;
+  current: MachineSnapshot<ReagentTransferContext, any, any, any, any, any, any, any>;
   outputSlotCopies?: Array<OutputSlotCopyData>;
   destinationCleanedOutAddresses?: string[];
 };

src/components/libraryGeneration/SlotCopyComponent.tsx

@@ -21,7 +21,7 @@ type SlotCopyParams = {
   initialOutputLabware: NewFlaggedLabwareLayout[];
   initialOutputSlotCopy: Array<Destination>;
   send: (event: SlotCopyEvent) => void;
-  current: MachineSnapshot<SlotCopyContext, SlotCopyEvent, any, any, any, any>;
+  current: MachineSnapshot<SlotCopyContext, SlotCopyEvent, any, any, any, any, any, any>;
   slotCopyModes: Array<SlotCopyMode>;
   addPlateOption?: boolean;
   labwareDestinationSelectionMode?: DestinationSelectionMode;
@@ -329,7 +329,7 @@ function SlotCopyComponent({
         ? (plateFactory.build() as NewFlaggedLabwareLayout)
         : (stripTubeFactory.build() as NewFlaggedLabwareLayout);
 
-    const labwareArray = destinations.map((dest) => dest.labware);
+    const labwareArray = destinations.map((dest: Destination) => dest.labware);
     labwareArray.push(labware);
     toast(addDestinationPlateNotification(labware.labwareType.name), {
       position: toast.POSITION.TOP_RIGHT,
@@ -378,7 +378,7 @@ function SlotCopyComponent({
   );
 
   const cleanedOutInputAddresses: Map<number, string[]> = new Map();
-  sources.forEach((source) => {
+  sources.forEach((source: Source) => {
     cleanedOutInputAddresses.set(source.labware.id, source.cleanedOutAddresses ?? []);
   });
 
@@ -410,15 +410,15 @@ function SlotCopyComponent({
               cleanedOutAddresses: output.cleanedOutAddresses
             };
           })}
-          initialInputLabware={sources.map((source) => source.labware)}
+          initialInputLabware={sources.map((source: Source) => source.labware)}
           onInputLabwareChange={handleInputLabwareChange}
           onChange={handleOnSlotMapperChange}
           onOutputLabwareChange={handleOutputLabwareChange}
           inputLabwareConfigPanel={
             sources.length > 0 && (
               <SlotCopySourceConfigPanel
                 onChangeState={onSourceLabwareStateChange}
-                selectedSource={sources.find((src) => src.labware.barcode === selectedSource?.barcode)}
+                selectedSource={sources.find((src: Source) => src.labware.barcode === selectedSource?.barcode)}
               />
             )
           }
@@ -428,7 +428,7 @@ function SlotCopyComponent({
               onChangeBioState={onChangeBioState}
               onLabwareScan={onDestinationLabwareScan}
               onDestinationSelectionModeChange={onDestinationSelectionModeChange}
-              labware={destinations.find((dest) => dest.labware.id === selectedDestination.id)}
+              labware={destinations.find((dest: Destination) => dest.labware.id === selectedDestination.id)}
               destinationSelectionMode={updateDestinationModeWhenPaginating()}
             />
           }

src/components/sectioningConfirm/index.ts

@@ -2,5 +2,5 @@ import { ConfirmLabwareContext, ConfirmLabwareEvent } from './confirmLabware.mac
 import { MachineSnapshot } from 'xstate';
 
 export const selectConfirmOperationLabware = (
-  state: MachineSnapshot<ConfirmLabwareContext, ConfirmLabwareEvent, any, any, any, any, any>
+  state: MachineSnapshot<ConfirmLabwareContext, ConfirmLabwareEvent, any, any, any, any, any, any>
 ) => state.context.confirmSectionLabware;

src/components/slotMapper/slotMapper.machine.ts

@@ -11,12 +11,23 @@ import { buildAddresses, cycleColors } from '../../lib/helpers';
 import { sortWithDirection } from '../../lib/helpers/addressHelper';
 import { find, indexOf, intersection, map } from 'lodash';
 import { stanCore } from '../../lib/sdk';
-import { assign, createMachine, fromPromise, MachineImplementations } from 'xstate';
-import { produce } from '../../dependencies/immer';
+import { assign, createMachine, fromPromise, InternalMachineImplementations } from 'xstate';
+import { produce } from 'immer';
 
 const colors = cycleColors();
 
-const machineImplementations: MachineImplementations<SlotMapperContext, SlotMapperEvent> = {
+type SlotMapperMachineImplementation = {
+  context: SlotMapperContext;
+  events: SlotMapperEvent;
+  actors: any;
+  actions: any;
+  guards: any;
+  delays: any;
+  tags: any;
+  emitted: any;
+};
+
+const machineImplementations: InternalMachineImplementations<SlotMapperMachineImplementation> = {
   actions: {
     assignInputLabware: assign(({ context, event }) => {
       if (event.type === 'UPDATE_INPUT_LABWARE') {
@@ -26,20 +37,22 @@ const machineImplementations: MachineImplementations<SlotMapperContext, SlotMapp
 
           // Update the failedSlots array if it has entries for any removed labware
           let keys = Array.from(draft.failedSlots.keys()).filter(
-            (key) => draft.inputLabware.findIndex((labware) => labware.barcode === key) === -1
+            (key) =>
+              draft.inputLabware.findIndex((labware: LabwareFlaggedFieldsFragment) => labware.barcode === key) === -1
           );
           keys.forEach((key) => draft.failedSlots.delete(key));
 
           // Update the errors array if it has entries for any removed labware
           keys = Array.from(draft.errors.keys()).filter(
-            (key) => draft.inputLabware.findIndex((labware) => labware.barcode === key) === -1
+            (key) =>
+              draft.inputLabware.findIndex((labware: LabwareFlaggedFieldsFragment) => labware.barcode === key) === -1
           );
           keys.forEach((key) => draft.errors.delete(key));
 
           // Update destination slotCopyContent if it has entries for any removed labware
-          draft.outputSlotCopies.forEach((outputScc) => {
-            outputScc.slotCopyContent = outputScc.slotCopyContent.filter((scc) =>
-              draft.inputLabware.some((lw) => lw.barcode === scc.sourceBarcode)
+          draft.outputSlotCopies.forEach((outputScc: OutputSlotCopyData) => {
+            outputScc.slotCopyContent = outputScc.slotCopyContent.filter((scc: SlotCopyContent) =>
+              draft.inputLabware.some((lw: LabwareFlaggedFieldsFragment) => lw.barcode === scc.sourceBarcode)
             );
           });
         });

src/lib/machines/labelPrinter/labelPrinterMachine.ts

@@ -1,4 +1,4 @@
-import { assign, createMachine, fromPromise, MachineConfig, MachineImplementations } from 'xstate';
+import { assign, createMachine, fromPromise, InternalMachineImplementations, MachineConfig } from 'xstate';
 import { LabelPrinterContext, LabelPrinterEvent } from './labelPrinterMachineTypes';
 import { find } from 'lodash';
 import { castDraft, produce } from '../../../dependencies/immer';
@@ -8,7 +8,19 @@ import { LabelType, LabwareFieldsFragment, PrinterFieldsFragment } from '../../.
 /**
  * LabelPrinter Machine Options
  */
-const machineOptions: MachineImplementations<LabelPrinterContext, LabelPrinterEvent> = {
+
+type LabelPrinterMachineImplementation = {
+  context: LabelPrinterContext;
+  events: LabelPrinterEvent;
+  actors: any;
+  actions: any;
+  guards: any;
+  delays: any;
+  tags: any;
+  emitted: any;
+};
+
+const machineOptions: InternalMachineImplementations<LabelPrinterMachineImplementation> = {
   actions: {
     assignPrinters: assign(({ context, event }) => {
       if (event.type !== 'xstate.done.actor.fetchPrinters') {

src/lib/machines/layout/layoutMachineOptions.ts

@@ -1,10 +1,11 @@
 import { LayoutContext, Source } from './layoutContext';
 import { isEqual } from 'lodash';
 import { tissue } from '../../helpers/labwareHelper';
-import { LabwareFieldsFragment } from '../../../types/sdk';
-import { assign, MachineImplementations, sendParent } from 'xstate';
+import { LabwareFieldsFragment, Slot } from '../../../types/sdk';
+import { assign, InternalMachineImplementations, sendParent } from 'xstate';
 import { LayoutEvents } from './layoutEvents';
-import { produce } from '../../../dependencies/immer';
+import { LayoutSchema } from './layoutStates';
+import { produce } from 'immer';
 
 export const layoutMachineKey = 'layoutMachine';
 
@@ -21,7 +22,19 @@ export enum Actions {
   CANCEL_EDIT_LAYOUT = 'layoutMachine.cancelEditLayout'
 }
 
-export const machineOptions: MachineImplementations<LayoutContext, LayoutEvents> = {
+type LayoutMachineImplementation = {
+  context: LayoutContext;
+  events: LayoutEvents;
+  schema: LayoutSchema;
+  actors: any;
+  actions: any;
+  guards: any;
+  delays: any;
+  tags: any;
+  emitted: any;
+};
+
+export const machineOptions: InternalMachineImplementations<LayoutMachineImplementation> = {
   actions: {
     [Actions.ASSIGN_SELECTED]: assign(({ context, event }) => {
       if (event.type !== 'SELECT_SOURCE') {
@@ -72,7 +85,8 @@ export const machineOptions: MachineImplementations<LayoutContext, LayoutEvents>
         return context;
       }
       return produce(context, (draft) => {
-        draft.layoutPlan.destinationLabware.slots.forEach((slot) => {
+        // @ts-ignore
+        draft.layoutPlan.destinationLabware.slots.forEach((slot: Slot) => {
           draft.layoutPlan.plannedActions.set(slot.address, [event.source]);
         });
       });

src/lib/machines/locations/locationMachine.ts

@@ -1,4 +1,4 @@
-import { assign, createMachine, fromPromise, MachineConfig, MachineImplementations, raise } from 'xstate';
+import { assign, createMachine, fromPromise, InternalMachineImplementations, MachineConfig, raise } from 'xstate';
 import {
   LocationContext,
   LocationEvent,
@@ -33,7 +33,18 @@ enum Service {
 /**
  * Location Machine Options
  */
-export const machineOptions: MachineImplementations<LocationContext, LocationEvent> = {
+type LocationMachineImplementation = {
+  context: LocationContext;
+  events: LocationEvent;
+  actors: any;
+  actions: any;
+  guards: any;
+  delays: any;
+  tags: any;
+  emitted: any;
+};
+
+export const machineOptions: InternalMachineImplementations<LocationMachineImplementation> = {
   actions: {
     [Action.ASSIGN_LOCATION_SEARCH_PARAMS]: assign(({ context, event }) => {
       if (event.type !== 'FETCH_LOCATION') {

src/mocks/handlers/xeniumHandlers.ts

@@ -34,7 +34,6 @@ const xeniumHandlers = [
       {
         data: {
           analyserScanData: {
-            barcode: variables.barcode,
             workNumbers: ['SGP1008'],
             probes: [
               faker.string.alphanumeric({ length: { min: 5, max: 8 } }),