added tooltip to subform save buttons (#4584)

Enterprise-CMCS · Mar 9, 2023 · b8f9bc9 · b8f9bc9
1 parent 5d73938
commit b8f9bc9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 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
@@ -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
@@ -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>
   );
 };