refactor: migrated deprecated Input and ValidationForm group components

.github/workflows/ci.yml

@@ -14,6 +14,7 @@ jobs:
     strategy:
       matrix:
         node: [16]
+        npm: [8.5.x]
     steps:
     - name: Checkout
       uses: actions/checkout@v2
@@ -22,6 +23,7 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node }}
+    - run: npm install -g npm@${{ matrix.npm }}
 
     - name: Install dependencies
       run: npm ci

src/payment/__snapshots__/PaymentPage.test.jsx.snap

@@ -2353,20 +2353,26 @@ exports[`<PaymentPage /> Renders correctly in various states should render the b
                 <div
                   className="position-relative"
                 >
-                  <input
-                    className="form-control form-control-sm"
-                    defaultValue={1}
-                    id="code-quantity"
-                    max="100"
-                    min="1"
-                    name="code-quantity"
-                    style={
-                      Object {
-                        "width": "5rem",
+                  <div
+                    className="pgn__form-control-decorator-group form-control-sm"
+                  >
+                    <input
+                      className="has-value form-control"
+                      defaultValue={1}
+                      id="code-quantity"
+                      max="100"
+                      min="1"
+                      name="code-quantity"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      style={
+                        Object {
+                          "width": "5rem",
+                        }
                       }
-                    }
-                    type="number"
-                  />
+                      type="number"
+                    />
+                  </div>
                   <small
                     className="text-muted small"
                     style={

src/payment/cart/CouponForm.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Button, Input, ValidationFormGroup } from '@edx/paragon';
+import { Button, Form } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 
@@ -44,16 +44,16 @@ class CouponForm extends Component {
 
     return (
       <form onSubmit={this.handleAddSubmit} className="summary-row d-flex align-items-end">
-        <ValidationFormGroup for={id} invalid={false} className="mb-0 mr-2">
+        <Form.Group controlId={id} invalid={false} className="mb-0 mr-2">
           <label className="h6 d-block" htmlFor={id}>
             <FormattedMessage
               id="payment.coupon.label"
               defaultMessage="Add coupon code (optional)"
               description="Label for the add coupon form"
             />
           </label>
-          <Input name={id} id={id} type="text" defaultValue={code} />
-        </ValidationFormGroup>
+          <Form.Control name={id} id={id} type="text" defaultValue={code} />
+        </Form.Group>
         <Button
           disabled={isBasketProcessing}
           variant="outline-primary"

src/payment/cart/UpdateQuantityForm.jsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { StatefulButton, Input } from '@edx/paragon';
+import { StatefulButton, Form } from '@edx/paragon';
 
 import { updateQuantity } from '../data/actions';
 import { updateQuantityFormSelector } from '../data/selectors';
@@ -34,7 +34,7 @@ function UpdateQuantityForm(props) {
           />
         </label>
         <div className="position-relative">
-          <Input
+          <Form.Control
             className="form-control-sm"
             name={id}
             id={id}

src/payment/cart/__snapshots__/Cart.test.jsx.snap

@@ -198,22 +198,30 @@ exports[`<Cart /> renders a basic, one product cart with coupon form 1`] = `
         onSubmit={[Function]}
       >
         <div
-          className="form-group mb-0 mr-2"
+          className="pgn__form-group mb-0 mr-2"
+          invalid={false}
         >
-          <label
-            className="h6 d-block"
-            htmlFor="couponField"
-          >
-            Add coupon code (optional)
-          </label>
-          <input
-            aria-describedby=""
-            className="form-control"
-            defaultValue=""
-            id="couponField"
-            name="couponField"
-            type="text"
-          />
+          Array [
+            <label
+              className="h6 d-block"
+              htmlFor="couponField"
+            >
+              Add coupon code (optional)
+            </label>,
+            <div
+              className="pgn__form-control-decorator-group"
+            >
+              <input
+                className="form-control"
+                defaultValue=""
+                id="couponField"
+                name="couponField"
+                onBlur={[Function]}
+                onChange={[Function]}
+                type="text"
+              />
+            </div>,
+          ]
         </div>
         <button
           className="btn btn-outline-primary"
@@ -325,20 +333,26 @@ exports[`<Cart /> renders a bulk enrollment cart 1`] = `
           <div
             className="position-relative"
           >
-            <input
-              className="form-control form-control-sm"
-              defaultValue={1}
-              id="code-quantity"
-              max="100"
-              min="1"
-              name="code-quantity"
-              style={
-                Object {
-                  "width": "5rem",
+            <div
+              className="pgn__form-control-decorator-group form-control-sm"
+            >
+              <input
+                className="has-value form-control"
+                defaultValue={1}
+                id="code-quantity"
+                max="100"
+                min="1"
+                name="code-quantity"
+                onBlur={[Function]}
+                onChange={[Function]}
+                style={
+                  Object {
+                    "width": "5rem",
+                  }
                 }
-              }
-              type="number"
-            />
+                type="number"
+              />
+            </div>
             <small
               className="text-muted small"
               style={

src/payment/cart/__snapshots__/CouponForm.test.jsx.snap

@@ -26,22 +26,30 @@ exports[`CouponForm should render a form when there is no coupon 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="form-group mb-0 mr-2"
+    className="pgn__form-group mb-0 mr-2"
+    invalid={false}
   >
-    <label
-      className="h6 d-block"
-      htmlFor="couponField"
-    >
-      Add coupon code (optional)
-    </label>
-    <input
-      aria-describedby=""
-      className="form-control"
-      defaultValue=""
-      id="couponField"
-      name="couponField"
-      type="text"
-    />
+    Array [
+      <label
+        className="h6 d-block"
+        htmlFor="couponField"
+      >
+        Add coupon code (optional)
+      </label>,
+      <div
+        className="pgn__form-control-decorator-group"
+      >
+        <input
+          className="form-control"
+          defaultValue=""
+          id="couponField"
+          name="couponField"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="text"
+        />
+      </div>,
+    ]
   </div>
   <button
     className="btn btn-outline-primary"