Merge pull request #368 from openedx/knguyen2/ent-7980

feat: add alert and help text
openedx · Dec 5, 2023 · 8169d08 · 8169d08
2 parents 750574d + 9aedb36
commit 8169d08
Show file tree

Hide file tree

Showing 23 changed files with 185 additions and 30 deletions.
diff --git a/...Configuration/Provisioning/ProvisioningForm/PolicyForm/ProvisioningFormAccountDetails.jsx b/...Configuration/Provisioning/ProvisioningForm/PolicyForm/ProvisioningFormAccountDetails.jsx
@@ -6,6 +6,7 @@ import {
   generateBudgetDisplayName, formatCurrency, generatePolicyName, indexOnlyPropType, selectProvisioningContext,
 } from '../../data/utils';
 import { isWholeDollarAmount } from '../../../../utils';
+import ProvisioningFormHelpText from '../ProvisioningFormHelpText';
 
 const ProvisioningFormAccountDetails = ({ index }) => {
   const { ACCOUNT_DETAIL } = PROVISIONING_PAGE_TEXT.FORM;
@@ -100,6 +101,7 @@ const ProvisioningFormAccountDetails = ({ index }) => {
           <p className="small">
             {formatCurrency(formData.policies[index].accountValue)}
           </p>
+          <ProvisioningFormHelpText className="my-n2.5" />
         </div>
       ) : (
         <Form.Group
@@ -115,6 +117,7 @@ const ProvisioningFormAccountDetails = ({ index }) => {
           <Form.Control.Feedback>
             {formFeedbackText}
           </Form.Control.Feedback>
+          <ProvisioningFormHelpText />
           {!isWholeDollar && (
             <Form.Control.Feedback
               type="invalid"

diff --git a/src/Configuration/Provisioning/ProvisioningForm/PolicyForm/ProvisioningFormCatalog.jsx b/src/Configuration/Provisioning/ProvisioningForm/PolicyForm/ProvisioningFormCatalog.jsx
@@ -6,6 +6,7 @@ import PROVISIONING_PAGE_TEXT from '../../data/constants';
 import useProvisioningContext from '../../data/hooks';
 import { generateBudgetDisplayName, indexOnlyPropType } from '../../data/utils';
 import { ProvisioningContext } from '../../ProvisioningContext';
+import ProvisioningFormHelpText from '../ProvisioningFormHelpText';
 
 // TODO: Replace URL for hyperlink to somewhere to display catalog content information
 const ProvisioningFormCatalog = ({ index }) => {
@@ -72,9 +73,12 @@ const ProvisioningFormCatalog = ({ index }) => {
           // predefined catalog query (see INITIAL_POLICIES.multiplePolicies).  Do not show a radio element since we
           // want to enforce the predefined catalog query selections for each policy.
           multipleFunds && (
-          <h4>
-            {generateBudgetDisplayName(formData.policies[index])}
-          </h4>
+            <>
+              <h4>
+                {generateBudgetDisplayName(formData.policies[index])}
+              </h4>
+              <ProvisioningFormHelpText />
+            </>
           )
         }
         {
@@ -87,26 +91,26 @@ const ProvisioningFormCatalog = ({ index }) => {
                 value={value}
               >
                 {
-              Object.keys(CATALOG.OPTIONS).map((key) => (
-                <Form.Radio
-                  value={key}
-                  type="radio"
-                  key={uuidv4()}
-                  data-testid={key}
-                  data-predefinedquerytype={key}
-                  isInvalid={isFormFieldInvalid}
-                >
-                  {CATALOG.OPTIONS[key]}
-                </Form.Radio>
-              ))
-            }
+                  Object.keys(CATALOG.OPTIONS).map((key) => (
+                    <Form.Radio
+                      value={key}
+                      type="radio"
+                      key={uuidv4()}
+                      data-testid={key}
+                      data-predefinedquerytype={key}
+                      isInvalid={isFormFieldInvalid}
+                    >
+                      {CATALOG.OPTIONS[key]}
+                    </Form.Radio>
+                  ))
+                }
               </Form.RadioSet>
               {isFormFieldInvalid && (
-              <Form.Control.Feedback
-                type="invalid"
-              >
-                {CATALOG.ERROR}
-              </Form.Control.Feedback>
+                <Form.Control.Feedback
+                  type="invalid"
+                >
+                  {CATALOG.ERROR}
+                </Form.Control.Feedback>
               )}
             </>
           )

diff --git a/src/Configuration/Provisioning/ProvisioningForm/PolicyForm/ProvisioningFormPolicyType.jsx b/src/Configuration/Provisioning/ProvisioningForm/PolicyForm/ProvisioningFormPolicyType.jsx
@@ -6,6 +6,7 @@ import React, { useState } from 'react';
 import PROVISIONING_PAGE_TEXT from '../../data/constants';
 import useProvisioningContext from '../../data/hooks';
 import { indexOnlyPropType, selectProvisioningContext } from '../../data/utils';
+import ProvisioningFormHelpText from '../ProvisioningFormHelpText';
 
 const ProvisioningFormPolicyType = ({ index }) => {
   const { perLearnerCap, setPolicyType, setInvalidPolicyFields } = useProvisioningContext();
@@ -45,11 +46,13 @@ const ProvisioningFormPolicyType = ({ index }) => {
       <Form.Group
         className="mt-3.5"
       >
-        <Form.Label className="mb-2.5">{POLICY_TYPE.LABEL}</Form.Label>
+        <Form.Label>{POLICY_TYPE.LABEL}</Form.Label>
+        <ProvisioningFormHelpText />
         <Form.RadioSet
           name={`display-policy-type-${index}`}
           onChange={handleChange}
           value={value || formData.policies[index]?.policyType}
+          className="mt-2.5"
         >
           {
             Object.values(POLICY_TYPE.OPTIONS).map(({ DESCRIPTION }) => (

diff --git a/...iguration/Provisioning/ProvisioningForm/PolicyForm/tests/ProvisioningFormCatalog.test.jsx b/...iguration/Provisioning/ProvisioningForm/PolicyForm/tests/ProvisioningFormCatalog.test.jsx
@@ -78,6 +78,7 @@ describe('ProvisioningFormCatalog', () => {
       PREDEFINED_QUERY_DISPLAY_NAMES[INITIAL_POLICIES.multiplePolicies[0].predefinedQueryType],
       { exact: false },
     )).toBeTruthy();
+    expect(screen.getByText('Not editable')).toBeTruthy();
   });
   it('sets context state with multipleFunds to be false', async () => {
     const updatedInitialState = {

diff --git a/...ration/Provisioning/ProvisioningForm/PolicyForm/tests/ProvisioningFormPolicyType.test.jsx b/...ration/Provisioning/ProvisioningForm/PolicyForm/tests/ProvisioningFormPolicyType.test.jsx
@@ -51,5 +51,6 @@ describe('ProvisioningFormPolicyType', () => {
       fireEvent.click(policyTypeButtons[i]);
       expect(policyTypeButtons[i].checked).toBeTruthy();
     }
+    expect(screen.getByText('Not editable')).toBeTruthy();
   });
 });
diff --git a/src/Configuration/Provisioning/ProvisioningForm/ProvisioningForm.jsx b/src/Configuration/Provisioning/ProvisioningForm/ProvisioningForm.jsx
@@ -11,6 +11,7 @@ import { generateBudgetDisplayName, selectProvisioningContext } from '../data/ut
 import ProvisioningFormInternalOnly from './ProvisioningFormInternalOnly';
 import ProvisioningFormTitle from './ProvisioningFormTitle';
 import ProvisioningFormAlert from './ProvisioningFormAlert';
+import ProvisioningFormInstructionAlert from './ProvisioningFormInstructionAlert';
 
 const ProvisioningForm = () => {
   const { FORM } = PROVISIONING_PAGE_TEXT;
@@ -27,6 +28,7 @@ const ProvisioningForm = () => {
   return (
     <div className="m-0 p-0 mb-5 mt-5">
       {alertMessage && <ProvisioningFormAlert />}
+      <ProvisioningFormInstructionAlert formMode={FORM.MODE.NEW} />
       <div className="mt-4.5">
         <h2>{FORM.SUB_TITLE}</h2>
       </div>

diff --git a/src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormAccountType.jsx b/src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormAccountType.jsx
@@ -5,6 +5,7 @@ import { logError } from '@edx/frontend-platform/logging';
 import PROVISIONING_PAGE_TEXT from '../data/constants';
 import useProvisioningContext from '../data/hooks';
 import { selectProvisioningContext } from '../data/utils';
+import ProvisioningFormHelpText from './ProvisioningFormHelpText';
 
 const ProvisioningFormAccountType = () => {
   const {
@@ -77,11 +78,13 @@ const ProvisioningFormAccountType = () => {
         <h3>{ACCOUNT_CREATION.TITLE}</h3>
       </div>
       <Form.Group className="mt-3.5">
-        <Form.Label className="mb-2.5">{ACCOUNT_CREATION.SUB_TITLE}</Form.Label>
+        <Form.Label className="mb-1">{ACCOUNT_CREATION.SUB_TITLE}</Form.Label>
+        <ProvisioningFormHelpText />
         <Form.RadioSet
           name="display-account-type"
           onChange={handleChange}
           value={value || formData?.multipleFunds}
+          className="mt-2"
         >
           {
           Object.keys(ACCOUNT_CREATION.OPTIONS).map((key) => (

diff --git a/src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormCustomer.jsx b/src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormCustomer.jsx
@@ -7,6 +7,7 @@ import useProvisioningContext from '../data/hooks';
 import { selectProvisioningContext } from '../data/utils';
 import { isValidOpportunityProduct } from '../../../utils';
 import ProvisioningFormCustomerDropdown from './ProvisioningFormCustomerDropdown';
+import ProvisioningFormHelpText from './ProvisioningFormHelpText';
 
 const ProvisioningFormCustomer = () => {
   const { CUSTOMER } = PROVISIONING_PAGE_TEXT.FORM;
@@ -43,7 +44,7 @@ const ProvisioningFormCustomer = () => {
         <ProvisioningFormCustomerDropdown />
       </Form.Group>
       <Form.Group
-        className="mt-3.5"
+        className="mt-5"
         isInvalid={(!isOpportunityProduct || isOpportunityProductDefinedAndFalse)}
         spellCheck="false"
       >
@@ -53,11 +54,15 @@ const ProvisioningFormCustomer = () => {
           onChange={handleChange}
           data-testid="customer-financial-identifier"
         />
-        {isOpportunityProduct && (
-          <Form.Control.Feedback>
-            {financialIdentifier.length}/{CUSTOMER.FINANCIAL_IDENTIFIER.MAX_LENGTH}
-          </Form.Control.Feedback>
-        )}
+        <div className="d-flex justify-content-between mr-2">
+          <ProvisioningFormHelpText />
+          {isOpportunityProduct && (
+            <Form.Control.Feedback>
+              {financialIdentifier.length}/{CUSTOMER.FINANCIAL_IDENTIFIER.MAX_LENGTH}
+            </Form.Control.Feedback>
+          )}
+        </div>
+
         {!isOpportunityProduct && (
           <Form.Control.Feedback
             type="invalid"

diff --git a/src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormCustomerDropdown.jsx b/src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormCustomerDropdown.jsx
@@ -9,6 +9,7 @@ import debounce from 'lodash.debounce';
 import PROVISIONING_PAGE_TEXT from '../data/constants';
 import { selectProvisioningContext } from '../data/utils';
 import useProvisioningContext from '../data/hooks';
+import ProvisioningFormHelpText from './ProvisioningFormHelpText';
 
 const ProvisioningFormCustomerDropdown = () => {
   const { ENTERPRISE_UUID } = PROVISIONING_PAGE_TEXT.FORM.CUSTOMER;
@@ -68,6 +69,7 @@ const ProvisioningFormCustomerDropdown = () => {
           </Form.AutosuggestOption>
         ))}
       </Form.Autosuggest>
+      <ProvisioningFormHelpText className="my-n3" />
       {isEnterpriseUuidDefinedAndFalse && (
         <Form.Control.Feedback
           type="invalid"

diff --git a/src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormHelpText.jsx b/src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormHelpText.jsx
@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import {
+  Icon, Form,
+} from '@edx/paragon';
+import { WarningFilled } from '@edx/paragon/icons';
+import PROVISIONING_PAGE_TEXT from '../data/constants';
+
+const ProvisioningFormHelpText = ({ className }) => {
+  const { HELP_TEXT } = PROVISIONING_PAGE_TEXT.FORM;
+
+  return (
+    <Form.Control.Feedback className={className} icon={<Icon src={WarningFilled} />}>
+      {HELP_TEXT.LABEL}
+    </Form.Control.Feedback>
+  );
+};
+
+ProvisioningFormHelpText.propTypes = {
+  className: PropTypes.string,
+};
+
+ProvisioningFormHelpText.defaultProps = {
+  className: null,
+};
+
+export default ProvisioningFormHelpText;
diff --git a/src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormInstructionAlert.jsx b/src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormInstructionAlert.jsx
@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+import { Alert, useToggle } from '@edx/paragon';
+import { Edit } from '@edx/paragon/icons';
+import PROVISIONING_PAGE_TEXT from '../data/constants';
+
+const ProvisioningFormInstructionAlert = ({ formMode }) => {
+  const { ALERTS: { NEW_FORM, EDIT_FORM, VIEW_FORM }, MODE } = PROVISIONING_PAGE_TEXT.FORM;
+  const [isOpen, , close] = useToggle(true);
+
+  let alertContent;
+  if (formMode === MODE.NEW) {
+    alertContent = NEW_FORM;
+  } else if (formMode === MODE.EDIT) {
+    alertContent = EDIT_FORM;
+  } else {
+    alertContent = VIEW_FORM;
+  }
+
+  return (
+    <article>
+      <Alert
+        variant="info"
+        icon={Edit}
+        dismissible
+        show={isOpen}
+        closeLabel="Dismiss"
+        onClose={close}
+      >
+        <Alert.Heading>{alertContent.TITLE}</Alert.Heading>
+        <p>
+          {alertContent.DESCRIPTION}
+        </p>
+      </Alert>
+    </article>
+  );
+};
+
+ProvisioningFormInstructionAlert.propTypes = {
+  formMode: PropTypes.oneOf(['new', 'edit', 'view']).isRequired,
+};
+
+export default ProvisioningFormInstructionAlert;
diff --git a/src/Configuration/Provisioning/ProvisioningForm/tests/ProvisioningFormAccountType.test.jsx b/src/Configuration/Provisioning/ProvisioningForm/tests/ProvisioningFormAccountType.test.jsx
@@ -52,6 +52,7 @@ describe('ProvisioningFormAccountType', () => {
     for (let i = 0; i < accountTypeOptions.length; i++) {
       expect(screen.getByText(ACCOUNT_CREATION.OPTIONS[accountTypeOptions[i]])).toBeTruthy();
     }
+    expect(screen.getByText('Not editable')).toBeTruthy();
   });
   it('switches active account type', () => {
     renderWithRouter(<ProvisioningFormAccountTypeWrapper />);

diff --git a/...nfiguration/Provisioning/ProvisioningForm/tests/ProvisioningFormCustomerDropdown.test.jsx b/...nfiguration/Provisioning/ProvisioningForm/tests/ProvisioningFormCustomerDropdown.test.jsx
@@ -37,6 +37,7 @@ describe('ProvisioningFormCustomerDropdown', () => {
 
     expect(screen.getByText(ENTERPRISE_UUID.TITLE)).toBeTruthy();
     expect(screen.getByText(ENTERPRISE_UUID.SUB_TITLE)).toBeTruthy();
+    expect(screen.getByText('Not editable')).toBeTruthy();
   });
   it('renders the customer dropdown options', async () => {
     renderWithRouter(<ProvisioningFormCustomerDropdownWrapper />);

diff --git a/src/Configuration/Provisioning/ProvisioningForm/tests/ProvisioningFormHelpText.test.jsx b/src/Configuration/Provisioning/ProvisioningForm/tests/ProvisioningFormHelpText.test.jsx
@@ -0,0 +1,10 @@
+import '@testing-library/jest-dom/extend-expect';
+import { screen, render } from '@testing-library/react';
+import ProvisioningFormHelpText from '../ProvisioningFormHelpText';
+
+describe('ProvisioningFormInstructionAlert', () => {
+  test('should render help text', () => {
+    render(<ProvisioningFormHelpText />);
+    expect(screen.getByText('Not editable')).toBeInTheDocument();
+  });
+});
diff --git a/...nfiguration/Provisioning/ProvisioningForm/tests/ProvisioningFormInstructionAlert.test.jsx b/...nfiguration/Provisioning/ProvisioningForm/tests/ProvisioningFormInstructionAlert.test.jsx
@@ -0,0 +1,18 @@
+import '@testing-library/jest-dom/extend-expect';
+import { screen, render } from '@testing-library/react';
+import PROVISIONING_PAGE_TEXT from '../../data/constants';
+import ProvisioningFormInstructionAlert from '../ProvisioningFormInstructionAlert';
+
+const { ALERTS } = PROVISIONING_PAGE_TEXT.FORM;
+
+describe('ProvisioningFormInstructionAlert', () => {
+  test.each([
+    ['new', ALERTS.NEW_FORM],
+    ['view', ALERTS.VIEW_FORM],
+    ['edit', ALERTS.EDIT_FORM],
+  ])('should render the correct content for %s mode', (mode, content) => {
+    render(<ProvisioningFormInstructionAlert formMode={mode} />);
+    expect(screen.getByText(content.TITLE)).toBeInTheDocument();
+    expect(screen.getByText(content.DESCRIPTION)).toBeInTheDocument();
+  });
+});
diff --git a/src/Configuration/Provisioning/SubsidyDetailView/AccountTypeDetail.jsx b/src/Configuration/Provisioning/SubsidyDetailView/AccountTypeDetail.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import PROVISIONING_PAGE_TEXT from '../data/constants';
+import ProvisioningFormHelpText from '../ProvisioningForm/ProvisioningFormHelpText';
 
 const AccountTypeDetail = ({ isMultipleFunds }) => {
   const { FORM: { ACCOUNT_CREATION } } = PROVISIONING_PAGE_TEXT;
@@ -14,6 +15,7 @@ const AccountTypeDetail = ({ isMultipleFunds }) => {
         <p className="ml-3 text-gray-500">
           {isMultipleFunds ? ACCOUNT_CREATION.OPTIONS.multiple : ACCOUNT_CREATION.OPTIONS.single}
         </p>
+        <ProvisioningFormHelpText className="ml-3 my-n2.5" />
       </div>
     </article>
   );

diff --git a/src/Configuration/Provisioning/SubsidyDetailView/CustomerDetail.jsx b/src/Configuration/Provisioning/SubsidyDetailView/CustomerDetail.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import PROVISIONING_PAGE_TEXT from '../data/constants';
+import ProvisioningFormHelpText from '../ProvisioningForm/ProvisioningFormHelpText';
 
 const CustomerDetail = ({ enterpriseCustomer, financialIdentifier, uuid }) => {
   const { FORM: { CUSTOMER } } = PROVISIONING_PAGE_TEXT;
@@ -14,12 +15,14 @@ const CustomerDetail = ({ enterpriseCustomer, financialIdentifier, uuid }) => {
         <p className="small">
           {enterpriseCustomer} / {uuid}
         </p>
+        <ProvisioningFormHelpText className="my-n2.5" />
       </div>
-      <div className="mb-1 ml-3 mt-3">
+      <div className="mb-1 ml-3 mt-4.5">
         <h4>{CUSTOMER.FINANCIAL_IDENTIFIER.TITLE}</h4>
         <p className="small">
           {financialIdentifier}
         </p>
+        <ProvisioningFormHelpText className="my-n2.5" />
       </div>
     </article>
   );

diff --git a/src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/PolicyDetail.jsx b/src/Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/PolicyDetail.jsx
@@ -1,4 +1,5 @@
 import PROVISIONING_PAGE_TEXT from '../../data/constants';
+import ProvisioningFormHelpText from '../../ProvisioningForm/ProvisioningFormHelpText';
 import {
   formatCurrency,
   indexOnlyPropType,
@@ -23,6 +24,7 @@ const PolicyDetail = ({ index }) => {
         <p className="small">
           {formatCurrency(formData.policies[index].accountValue)}
         </p>
+        <ProvisioningFormHelpText className="ml-1 my-n2.5" />
       </div>
     </div>
   );

diff --git a/...Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/tests/PolicyDetail.test.jsx b/...Configuration/Provisioning/SubsidyDetailView/PolicyDetailView/tests/PolicyDetail.test.jsx
@@ -29,6 +29,7 @@ describe('PolicyDetail', () => {
     expect(screen.getByText('Display name')).toBeInTheDocument();
     expect(screen.getByText('I love Executive Education Only')).toBeInTheDocument();
     expect(screen.getByText('Budget starting balance ($)')).toBeInTheDocument();
+    expect(screen.getByText('Not editable')).toBeTruthy();
     expect(screen.getByText('$2,500')).toBeInTheDocument();
   });
 });