[FIX] Implemented "no pipelines" button (#336)

* Updated `docker compose` command in README.md * Implemented "no pipeline" button * Added test for "no pipeline" button
neurobagel · Oct 31, 2024 · bd57b48 · bd57b48
1 parent 44c2c08
commit bd57b48
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -163,10 +163,10 @@ git submodule init
 git submodule update
 ```
 
-2. Bring up the stack using the `test` profile:
+2. Pull the latest images and bring up the stack using the `test` profile:
 
 ```bash
-docker compose --profile test up -d
+docker compose --profile test pull && docker compose --profile test up -d
 ```
 
 _NOTE: Make sure your .env file in the root directory doesn't contain any of the environment variables used in the docker compose file as it will conflict with the configuration, since docker compose will try to use .env by default._

diff --git a/cypress/component/ResultCard.cy.tsx b/cypress/component/ResultCard.cy.tsx
@@ -71,4 +71,22 @@ describe('ResultCard', () => {
     cy.get('[data-cy="card-some uuid-checkbox"] input').check();
     cy.get('@onCheckboxChangeSpy').should('have.been.calledWith', props.datasetUUID);
   });
+  it('Displays a disabled button with "No pipelines" text when no pipelines are available', () => {
+    cy.mount(
+      <ResultCard
+        nodeName={props.nodeName}
+        datasetUUID={props.datasetUUID}
+        datasetName={props.datasetName}
+        datasetTotalSubjects={props.datasetTotalSubjects}
+        numMatchingSubjects={props.numMatchingSubjects}
+        imageModals={props.imageModals}
+        pipelines={{}}
+        checked={false}
+        onCheckboxChange={props.onCheckboxChange}
+      />
+    );
+    cy.get('[data-cy="card-some uuid-available-pipelines-button"]')
+      .should('be.disabled')
+      .should('contain', 'No pipelines');
+  });
 });
diff --git a/src/components/ResultCard.tsx b/src/components/ResultCard.tsx
@@ -51,30 +51,43 @@ const ResultCard = memo(
             </Typography>
           </div>
           <div className="col-span-2 col-start-7">
-            <Tooltip
-              data-cy={`card-${datasetUUID}-available-pipelines-tooltip`}
-              title={
-                <Typography variant="body1">
-                  {Object.entries(pipelines)
-                    .flatMap(([name, versions]) =>
-                      versions.map((version) => `${name.slice(65)} ${version}`)
-                    )
-                    .map((pipeline) => (
-                      <Divider>{pipeline}</Divider>
-                    ))}
-                </Typography>
-              }
-              placement="top"
-            >
+            {Object.entries(pipelines).length === 0 ? (
               <Button
                 data-cy={`card-${datasetUUID}-available-pipelines-button`}
                 variant="contained"
+                disabled
                 className="shadow-none hover:shadow-none"
-                startIcon={<UnfoldMoreIcon />}
+                sx={{ textTransform: 'none' }}
               >
-                Available pipelines
+                No pipelines
               </Button>
-            </Tooltip>
+            ) : (
+              <Tooltip
+                data-cy={`card-${datasetUUID}-available-pipelines-tooltip`}
+                title={
+                  <Typography variant="body1">
+                    {Object.entries(pipelines)
+                      .flatMap(([name, versions]) =>
+                        versions.map((version) => `${name.slice(65)} ${version}`)
+                      )
+                      .map((pipeline) => (
+                        <Divider>{pipeline}</Divider>
+                      ))}
+                  </Typography>
+                }
+                placement="top"
+              >
+                <Button
+                  data-cy={`card-${datasetUUID}-available-pipelines-button`}
+                  variant="contained"
+                  className="shadow-none hover:shadow-none"
+                  startIcon={<UnfoldMoreIcon />}
+                  sx={{ textTransform: 'none' }}
+                >
+                  Available pipelines
+                </Button>
+              </Tooltip>
+            )}
           </div>
           <div className="col-span-2 col-start-11 justify-self-end">
             <ButtonGroup>