From bd57b4876dfc949fe572f03c8bcaef51fa81fec4 Mon Sep 17 00:00:00 2001
From: Arman Jahanpour <77515879+rmanaem@users.noreply.github.com>
Date: Thu, 31 Oct 2024 10:09:01 -0400
Subject: [PATCH] [FIX] Implemented "no pipelines" button (#336)

* Updated `docker compose` command in README.md

* Implemented "no pipeline" button

* Added test for "no pipeline" button
---
 README.md                           |  4 +--
 cypress/component/ResultCard.cy.tsx | 18 +++++++++++
 src/components/ResultCard.tsx       | 49 ++++++++++++++++++-----------
 3 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index 0611666e..0de6b0a1 100644
--- 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
index 38bdc84e..c583c4a2 100644
--- 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
index c38c8134..3284f6b1 100644
--- 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>