Merge pull request #634 from sanger/blogRegistration

Blog registration
sanger · Apr 18, 2024 · 37a1811 · 37a1811
2 parents a32d43a + 81dc549
commit 37a1811
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 20 deletions.
diff --git a/src/components/upload/FileUploader.tsx b/src/components/upload/FileUploader.tsx
@@ -128,12 +128,12 @@ const FileUploader = <T extends object>({
 
   /**Callback function to perform upload**/
   const uploadFiles = React.useCallback(
-    (existingExternalNames?: string[]) => {
+    (existingExternalNames?: string[], ignoreExternalNames?: boolean) => {
       if (files.length === 0) return;
       setUploadInProgress(undefined);
       setConfirmUploadOutcome(undefined);
       files.forEach((file) => {
-        requestUpload(file, setUploadInProgress, existingExternalNames);
+        requestUpload(file, setUploadInProgress, existingExternalNames, ignoreExternalNames);
       });
     },
     [setUploadInProgress, setConfirmUploadOutcome, files, requestUpload]
@@ -218,8 +218,14 @@ const FileUploader = <T extends object>({
           <ClashModal
             registrationResult={clashes}
             onConfirm={() => {
-              const existingExternalNames: string[] = clashes.clashes.map((clash) => clash.tissue.externalName!);
-              uploadFiles(existingExternalNames);
+              uploadFiles(clashes.clashes.map((clash) => clash.tissue.externalName!));
+              setClashes(undefined);
+            }}
+            onConfirmAndUnrelease={() => {
+              uploadFiles(
+                clashes.clashes.map((clash) => clash.tissue.externalName!),
+                true
+              );
               setClashes(undefined);
             }}
             onCancel={() => {

diff --git a/src/components/upload/useUpload.ts b/src/components/upload/useUpload.ts
@@ -33,14 +33,18 @@ export function useUpload<T>(url: string, errorField?: string) {
     (
       file: File,
       notifyUploadProgress?: (uploadProgress: UploadProgress | undefined) => void,
-      existingExternalNames?: string[]
+      existingExternalNames?: string[],
+      ignoreExternalNames: boolean = false
     ) => {
       const retUploadResult: UploadResult<T> = { file, success: false, error: undefined, response: undefined };
       async function postUpload(url: string, file: File) {
         const formData = new FormData();
         formData.append('file', file);
         if (existingExternalNames) {
-          formData.append('existingExternalNames', existingExternalNames.join(','));
+          formData.append(
+            ignoreExternalNames ? 'ignoreExternalNames' : 'existingExternalNames',
+            existingExternalNames.join(',')
+          );
         }
         return await fetch(url, {
           method: 'POST',

diff --git a/src/lib/machines/registration/registrationMachine.ts b/src/lib/machines/registration/registrationMachine.ts
@@ -5,7 +5,11 @@ import { ClientError } from 'graphql-request';
 
 export interface RegistrationContext<F, M> {
   registrationFormInput: Maybe<F>;
-  buildRegistrationInput: (formInput: F, existingTissues?: Array<string>) => Promise<M>;
+  buildRegistrationInput: (
+    formInput: F,
+    existingTissues?: Array<string>,
+    ignoreExistingTissues?: boolean
+  ) => Promise<M>;
   registrationService: (mutationInput: M) => Promise<RegisterResultFieldsFragment>;
   registrationResult: Maybe<RegisterResultFieldsFragment>;
   registrationErrors: Maybe<ServerErrors>;
@@ -15,6 +19,7 @@ export interface RegistrationContext<F, M> {
 type SubmitFormEvent<F> = {
   type: 'SUBMIT_FORM';
   values: F;
+  ignoreExistingTissues?: boolean;
 };
 
 type EditSubmissionEvent = {
@@ -41,7 +46,11 @@ export type RegistrationEvent<F> =
  * XState state machine for Registration
  */
 export function createRegistrationMachine<F, M>(
-  buildRegistrationInput: (formInput: F, existingTissues?: Array<string>) => Promise<M>,
+  buildRegistrationInput: (
+    formInput: F,
+    existingTissues?: Array<string>,
+    ignoreExistingTissues?: boolean
+  ) => Promise<M>,
   registrationService: (mutationInput: M) => Promise<RegisterResultFieldsFragment>
 ) {
   return createMachine(
@@ -71,12 +80,15 @@ export function createRegistrationMachine<F, M>(
           invoke: {
             id: 'submitting',
             src: fromPromise(({ input }) => {
-              return buildRegistrationInput(input.values, input.confirmedTissues).then(input.registrationService);
+              return buildRegistrationInput(input.values, input.confirmedTissues, input.ignoreExistingTissues).then(
+                input.registrationService
+              );
             }),
             input: ({ context, event }) => ({
               values: (event as SubmitFormEvent<F>).values,
               registrationService: context.registrationService,
-              confirmedTissues: context.confirmedTissues
+              confirmedTissues: context.confirmedTissues,
+              ignoreExistingTissues: (event as SubmitFormEvent<F>).ignoreExistingTissues
             }),
 
             onDone: {
@@ -138,7 +150,8 @@ export function createRegistrationMachine<F, M>(
           if (event.type !== 'xstate.error.actor.submitting') {
             return context;
           }
-          context.registrationErrors = extractServerErrors(event.error);
+          context.registrationErrors =
+            event.error instanceof ClientError ? extractServerErrors(event.error) : event.error;
           return context;
         })
       },

diff --git a/src/pages/BlockRegistration.tsx b/src/pages/BlockRegistration.tsx
@@ -124,10 +124,11 @@ function buildRegistrationSchema(registrationInfo: GetRegistrationInfoQuery) {
  */
 export function buildRegisterTissuesMutationVariables(
   formValues: RegistrationFormValues,
-  existingTissues: Array<string> = []
+  existingTissues: Array<string> = [],
+  ignoreExistingTissues: boolean = false
 ): Promise<RegisterTissuesMutationVariables> {
-  return new Promise((resolve) => {
-    const blocks = formValues.tissues.reduce<BlockRegisterRequest[]>((memo, tissue) => {
+  return new Promise((resolve, reject) => {
+    let blocks = formValues.tissues.reduce<BlockRegisterRequest[]>((memo, tissue) => {
       return [
         ...memo,
         ...tissue.blocks.map<BlockRegisterRequest>((block) => {
@@ -138,7 +139,7 @@ export function buildRegisterTissuesMutationVariables(
             highestSection: block.lastKnownSectionNumber,
             hmdmc: tissue.hmdmc.trim(),
             labwareType: block.labwareType.trim(),
-            lifeStage: tissue.lifeStage in LifeStage ? tissue.lifeStage : undefined,
+            lifeStage: Object.values(LifeStage).includes(tissue.lifeStage) ? tissue.lifeStage : undefined,
             tissueType: tissue.tissueType.trim(),
             spatialLocation: block.spatialLocation,
             replicateNumber: block.replicateNumber,
@@ -151,7 +152,7 @@ export function buildRegisterTissuesMutationVariables(
               : undefined
           };
 
-          if (existingTissues.includes(blockRegisterRequest.externalIdentifier)) {
+          if (!ignoreExistingTissues && existingTissues.includes(blockRegisterRequest.externalIdentifier)) {
             blockRegisterRequest.existingTissue = true;
           }
 
@@ -160,6 +161,12 @@ export function buildRegisterTissuesMutationVariables(
       ];
     }, []);
 
+    if (ignoreExistingTissues) {
+      blocks = blocks.filter((block) => !existingTissues.includes(block.externalIdentifier));
+    }
+    if (blocks.length === 0) {
+      reject({ problems: ['No blocks to register after filtering the ones with existing tissues'] });
+    }
     resolve({ request: { blocks, workNumbers: formValues.workNumbers } });
   });
 }

diff --git a/src/pages/registration/ClashModal.tsx b/src/pages/registration/ClashModal.tsx
@@ -12,9 +12,15 @@ type ClashModalProps = {
   registrationResult: RegisterResultFieldsFragment;
   onConfirm: () => void;
   onCancel: () => void;
+  onConfirmAndUnrelease: () => void;
 };
 
-export default function ClashModal({ registrationResult, onConfirm, onCancel }: ClashModalProps) {
+export default function ClashModal({
+  registrationResult,
+  onConfirm,
+  onCancel,
+  onConfirmAndUnrelease
+}: ClashModalProps) {
   const linkToUnrelease: string = registrationResult.clashes
     .map((clash) => {
       return clash.labware.map((lw) => `barcode=${lw.barcode}`).join('&');
@@ -65,8 +71,14 @@ export default function ClashModal({ registrationResult, onConfirm, onCancel }:
         <BlueButton onClick={onConfirm} className="w-full text-base sm:ml-3 sm:w-auto sm:text-sm">
           Confirm
         </BlueButton>
-        <Link to={`/admin/unrelease?${linkToUnrelease}`} className="mt-3 w-full sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-          <BlueButton action="tertiary">Unrelease</BlueButton>
+        <Link
+          to={`/admin/unrelease?${linkToUnrelease}`}
+          target="_blank"
+          className="mt-3 w-full sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+        >
+          <BlueButton action="tertiary" onClick={onConfirmAndUnrelease}>
+            Confirm and Unrelease
+          </BlueButton>
         </Link>
         <BlueButton action="secondary" onClick={onCancel} className="mt-3 w-full sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
           Cancel

diff --git a/src/pages/registration/Registration.tsx b/src/pages/registration/Registration.tsx
@@ -206,6 +206,7 @@ function Registration<M, T extends TissueValues<B>, B, R extends Required<Labwar
                     <ClashModal
                       registrationResult={registrationResult}
                       onConfirm={() => send({ type: 'SUBMIT_FORM', values })}
+                      onConfirmAndUnrelease={() => send({ type: 'SUBMIT_FORM', values, ignoreExistingTissues: true })}
                       onCancel={() => send({ type: 'EDIT_SUBMISSION' })}
                     />
                   )}

diff --git a/src/pages/registration/RegistrationForm.tsx b/src/pages/registration/RegistrationForm.tsx
@@ -55,7 +55,7 @@ const RegistrationForm = <T extends TissueValues<B>, B>({
   // Available spatial locations are determined by the current tissue type
   const availableSpatialLocations: GetRegistrationInfoQuery['tissueTypes'][number]['spatialLocations'] = useMemo(() => {
     return (
-      registrationInfo.tissueTypes.find((tt) => tt.name === values.tissues[currentIndex].tissueType)
+      registrationInfo.tissueTypes.find((tt) => tt.name === values.tissues[currentIndex]?.tissueType)
         ?.spatialLocations ?? []
     );
   }, [registrationInfo.tissueTypes, values.tissues, currentIndex]);