From b8f9bc92a38138acc867e552878b3bceea1fd339 Mon Sep 17 00:00:00 2001
From: Tiffany <tforkner@fearless.tech>
Date: Thu, 9 Mar 2023 16:47:27 -0500
Subject: [PATCH] added tooltip to subform save buttons (#4584)

---
 e2e/cypress/integration/02-apd/01-apd-basics.cy.js |  5 +++++
 web/src/components/FormAndReviewList.js            | 14 +++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/e2e/cypress/integration/02-apd/01-apd-basics.cy.js b/e2e/cypress/integration/02-apd/01-apd-basics.cy.js
index 1bedcc1683..18b1f644ce 100644
--- a/e2e/cypress/integration/02-apd/01-apd-basics.cy.js
+++ b/e2e/cypress/integration/02-apd/01-apd-basics.cy.js
@@ -386,6 +386,10 @@ describe('APD Basics', { tags: ['@apd', '@default'] }, function () {
         'exist'
       );
 
+      cy.get('.ds-c-tooltip__container').should('exist');
+      cy.get('.ds-c-tooltip__container').trigger('mouseover');
+      cy.contains('All fields are required before saving.');
+      cy.get('.ds-c-tooltip__container').trigger('mouseout');
       cy.findByRole('button', { name: /Save/i }).should('be.disabled');
 
       cy.get('[data-cy="key-person-0__name"]').type(keyPersons[0].name);
@@ -400,6 +404,7 @@ describe('APD Basics', { tags: ['@apd', '@default'] }, function () {
       cy.get('input[type="radio"][value="no"]').check({ force: true }).blur();
       cy.get('[data-cy="key-person-0__name"]').focus().blur();
 
+      cy.get('.ds-c-tooltip__container').should('not.exist');
       cy.findByRole('button', { name: /Save/i })
         .should('not.be.disabled')
         .click();
diff --git a/web/src/components/FormAndReviewList.js b/web/src/components/FormAndReviewList.js
index f9482eaa02..6534c64b48 100644
--- a/web/src/components/FormAndReviewList.js
+++ b/web/src/components/FormAndReviewList.js
@@ -1,4 +1,4 @@
-import { Alert, Button } from '@cmsgov/design-system';
+import { Alert, Button, Tooltip, TooltipIcon } from '@cmsgov/design-system';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
@@ -55,6 +55,7 @@ const FormAndReviewItem = ({
       <Button onClick={() => handleCancel()} className="ds-u-margin-right--2">
         Cancel
       </Button>
+
       <Button
         id="form-and-review-list--done-btn"
         variation="primary"
@@ -67,6 +68,17 @@ const FormAndReviewItem = ({
       >
         Save
       </Button>
+      {!isFormValid ? (
+        <Tooltip
+          className="ds-c-tooltip__trigger-link"
+          component="a"
+          onClose={function noRefCheck() {}}
+          onOpen={function noRefCheck() {}}
+          title="All fields are required before saving."
+        >
+          <TooltipIcon />
+        </Tooltip>
+      ) : null}
     </div>
   );
 };