[FIX] Implemented "no pipelines" button

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._

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');
+  });
 });

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>