[FIX] Prevent previously selected pipeline version from appearing in …

…the query after the field has been disabled (#487)

* Fixed the lingering value of pipeline version field when its disabled

* Added tests for the bug

* Added a separate test case for the bug

cypress/e2e/APIRequests.cy.ts

@@ -400,13 +400,21 @@ describe('Successful API query requests', () => {
     cy.get('[data-cy="Maximum age-continuous-field"]').type('30');
     cy.get('[data-cy="Minimum number of imaging sessions-continuous-field"]').type('2');
     cy.get('[data-cy="Minimum number of phenotypic sessions-continuous-field"]').type('3');
+    // Assert that pipeline version doesn't sneak into the query if pipeline name is cleared
+    cy.get('[data-cy="Pipeline name-categorical-field"]').type('fmri{downarrow}{enter}');
+    cy.get('[data-cy="Pipeline version-categorical-field"]').type('0.2.3{downarrow}{enter}');
+    cy.get('[data-cy="Pipeline version-categorical-field"] input').should('have.value', '0.2.3');
+    cy.get('[data-cy="Pipeline name-categorical-field"]').clear();
+    cy.get('[data-cy="Pipeline version-categorical-field"] input').should('be.disabled');
+    cy.get('[data-cy="Pipeline version-categorical-field"]').should('have.value', '');
     cy.get('[data-cy="submit-query-button"]').click();
     cy.wait('@call')
       .its('request.url')
       .should('contain', 'min_age=10')
       .and('contain', 'max_age=30')
       .and('contain', 'min_num_imaging_sessions=2')
-      .and('contain', 'min_num_phenotypic_sessions=3');
+      .and('contain', 'min_num_phenotypic_sessions=3')
+      .and('not.contain', 'pipeline_version');
   });
 });
 

cypress/e2e/Form.cy.ts

@@ -86,6 +86,24 @@ describe('App', () => {
     cy.get('[data-cy="Pipeline version-categorical-field"]').type('0.2.3{downarrow}{enter}');
     cy.get('[data-cy="Pipeline version-categorical-field"] input').should('have.value', '0.2.3');
   });
+  it('Should disable and clear the pipeline version field when the pipeline name field is cleared', () => {
+    cy.intercept(
+      {
+        method: 'GET',
+        url: '/pipelines/np:fmriprep/versions',
+      },
+      pipelineVersionOptions
+    ).as('getPipelineVersionsOptions');
+    cy.get('[data-cy="Pipeline version-categorical-field"] input').should('be.disabled');
+    cy.get('[data-cy="Pipeline name-categorical-field"]').type('fmri{downarrow}{enter}');
+    cy.wait('@getPipelineVersionsOptions');
+    cy.get('[data-cy="Pipeline version-categorical-field"] input').should('not.be.disabled');
+    cy.get('[data-cy="Pipeline version-categorical-field"]').type('0.2.3{downarrow}{enter}');
+    cy.get('[data-cy="Pipeline version-categorical-field"] input').should('have.value', '0.2.3');
+    cy.get('[data-cy="Pipeline name-categorical-field"]').clear();
+    cy.get('[data-cy="Pipeline version-categorical-field"] input').should('be.disabled');
+    cy.get('[data-cy="Pipeline version-categorical-field"]').should('have.value', '');
+  });
   it('should toggle the filter form visibility when clicking the button', () => {
     cy.viewport(800, 600); // Mobile/tablet viewport
     cy.get('[data-cy="filter-toggle-button"]').should('be.visible');

src/App.tsx

@@ -406,8 +406,8 @@ function App() {
     );
     setQueryParam('assessment', assessmentTool, queryParams);
     setQueryParam('image_modal', imagingModality, queryParams);
-    setQueryParam('pipeline_version', pipelineVersion, queryParams);
     setQueryParam('pipeline_name', pipelineName, queryParams);
+    setQueryParam('pipeline_version', pipelineName ? pipelineVersion : null, queryParams);
 
     // Remove keys with empty values
     const keysToDelete: string[] = [];

src/components/QueryForm.tsx

@@ -220,7 +220,7 @@ function QueryForm({
               label="Pipeline version"
               options={[]}
               onFieldChange={(label, value) => updateCategoricalQueryParams(label, value)}
-              inputValue={pipelineVersion}
+              inputValue={null}
               disabled
             />
           </div>