feat: 1594 adjustments for orchard screen

frontend/cypress/e2e/smoke-test/a-class-seedlot-reg-form-orchard.cy.ts

@@ -57,24 +57,22 @@ describe('A Class Seedlot Registration form, Orchard', () => {
       .eq(0)
       .should('have.text', regFormData.orchard.subtitle);
 
-    cy.get('.seedlot-orchard-title-row')
+    cy.get('.seedlot-gamete-title-row')
       .find('h2')
-      .eq(1)
       .should('have.text', regFormData.orchard.gameteTitle);
 
-    cy.get('.seedlot-orchard-title-row')
+    cy.get('.seedlot-gamete-title-row')
       .find('.subtitle-section')
-      .eq(1)
       .should('have.text', regFormData.orchard.gameteSubtitle);
 
     cy.get('.seedlot-orchard-title-row')
       .find('h2')
-      .eq(2)
+      .eq(1)
       .should('have.text', regFormData.orchard.pollenTitle);
 
     cy.get('.seedlot-orchard-title-row')
       .find('.subtitle-section')
-      .eq(2)
+      .eq(1)
       .should('have.text', regFormData.orchard.pollenSubtitle);
   });
 

frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx

@@ -190,17 +190,9 @@ const OrchardStep = ({
   };
 
   // Remove options that are already selected by a user
-  const removeSelectedOption = (data: MultiOptionsObj[]) => {
-    const filteredOptions: MultiOptionsObj[] = structuredClone(data);
-    const orchardId = state.orchards.primaryOrchard.value.code;
-    // The index of a matching orchard in filteredOptions
-    const orchardOptIndex = filteredOptions.findIndex((option) => option.code === orchardId);
-    if (orchardOptIndex > -1) {
-      // Remove found option
-      filteredOptions.splice(orchardOptIndex, 1);
-    }
-    return filteredOptions;
-  };
+  const filterOrchardOptions = (codeToFilter: string) => orchardQuery.data?.filter(
+    (orchards) => orchards.code !== codeToFilter
+  );
 
   const isTableEmpty = Object.keys(tableRowData).length === 0;
 
@@ -304,7 +296,7 @@ const OrchardStep = ({
                     placeholder={orchardStepText.orchardSection.orchardInput.placeholder}
                     items={
                       orchardQuery.status === 'success'
-                        ? removeSelectedOption(orchardQuery.data)
+                        ? filterOrchardOptions(state.orchards.secondaryOrchard.value.code)
                         : []
                     }
                     selectedItem={state.orchards.primaryOrchard.value}
@@ -326,6 +318,20 @@ const OrchardStep = ({
                         } else setOrchard(true, e.selectedItem);
                       }
                     }
+                    // This event is necessary to track the changes when cleaning the combobox
+                    // i.e. when the user clicks on the small 'X' when there is an orchard selected
+                    onInputChange={
+                      (inputText: string) => {
+                        if (inputText === '' && !isTableEmpty) {
+                          setModalType('change');
+                          setStagedOrchard({
+                            ...state.orchards.primaryOrchard,
+                            value: EmptyMultiOptObj
+                          });
+                          setModalOpen(true);
+                        }
+                      }
+                    }
                     readOnly={isFormSubmitted || isReview}
                   />
                   {
@@ -359,7 +365,7 @@ const OrchardStep = ({
                       placeholder={orchardStepText.orchardSection.orchardInput.placeholder}
                       items={
                         orchardQuery.status === 'success'
-                          ? removeSelectedOption(orchardQuery.data)
+                          ? filterOrchardOptions(state.orchards.primaryOrchard.value.code)
                           : []
                       }
                       selectedItem={state.orchards.secondaryOrchard.value}
@@ -381,6 +387,21 @@ const OrchardStep = ({
                           } else setOrchard(false, e.selectedItem);
                         }
                       }
+                      // This event is necessary to track the changes when cleaning the combobox
+                      // i.e. when the user clicks on the small 'X' when there is an
+                      // orchard selected
+                      onInputChange={
+                        (inputText: string) => {
+                          if (inputText === '' && !isTableEmpty) {
+                            setModalType('change');
+                            setStagedOrchard({
+                              ...state.orchards.primaryOrchard,
+                              value: EmptyMultiOptObj
+                            });
+                            setModalOpen(true);
+                          }
+                        }
+                      }
                       readOnly={isFormSubmitted || isReview}
                     />
                     {
@@ -449,7 +470,7 @@ const OrchardStep = ({
         </Column>
       </Row>
       <Row className="orchard-row">
-        <Column sm={4} md={8} lg={16} xlg={12} max={10}>
+        <Column sm={4} md={4} lg={8} xlg={6}>
           {
             gameticMethodologyQuery.isFetching
               ? <DropdownSkeleton />
@@ -475,7 +496,7 @@ const OrchardStep = ({
         </Column>
       </Row>
       <Row className="orchard-row">
-        <Column sm={4} md={8} lg={16} xlg={12} max={10}>
+        <Column sm={4} md={4} lg={8} xlg={6}>
           {
             gameticMethodologyQuery.isFetching
               ? <DropdownSkeleton />
@@ -592,13 +613,14 @@ const OrchardStep = ({
           ? (
             <>
               <Row className="pollen-contam-row">
-                <Column sm={4} md={8} lg={16} xlg={12}>
+                <Column sm={4} md={4} lg={8} xlg={6}>
                   <NumberInput
                     id={state.breedingPercentage.id}
                     name="breedingPercentage"
                     defaultValue={state.breedingPercentage.value}
                     step={10}
                     disableWheel
+                    hideSteppers
                     type="number"
                     label={orchardStepText.pollenSection.breedingPercentage.label}
                     helperText={orchardStepText.pollenSection.breedingPercentage.helper}