Migrate off Input Paragon Deprecation

src/FeatureBasedEnrollments/FeatureBasedEnrollmentIndexPage.jsx

@@ -8,7 +8,7 @@ import React, {
   useLayoutEffect,
 } from 'react';
 import PropTypes from 'prop-types';
-import { Input, Button } from '@edx/paragon';
+import { Button, Form } from '@edx/paragon';
 
 import UserMessagesContext from '../userMessages/UserMessagesContext';
 import AlertList from '../userMessages/AlertList';
@@ -82,8 +82,8 @@ export default function FeatureBasedEnrollmentIndexPage({ location }) {
   // To change the url with appropriate query param if query param info is not present in URL
   useLayoutEffect(() => {
     if (searchValue
-        && location.pathname.indexOf(TAB_PATH_MAP[FEATURE_BASED_ENROLLMENT_TAB]) !== -1
-        && !params.get('course_id')) {
+      && location.pathname.indexOf(TAB_PATH_MAP[FEATURE_BASED_ENROLLMENT_TAB]) !== -1
+      && !params.get('course_id')) {
       pushHistoryIfChanged(`${TAB_PATH_MAP[FEATURE_BASED_ENROLLMENT_TAB]}/?course_id=${searchValue}`);
     }
   });
@@ -94,11 +94,21 @@ export default function FeatureBasedEnrollmentIndexPage({ location }) {
       <AlertList topic="featureBasedEnrollmentGeneral" className="mb-3" />
 
       <section className="mb-3">
-        <form className="form-inline">
-          <label htmlFor="courseId">Course ID</label>
-          <Input ref={searchRef} className="mr-1 ml-1 col-sm-4" name="courseId" type="text" defaultValue={searchValue} />
-          <Button type="submit" onClick={submit} className="ml-1 col-sm-1" variant="primary">Search</Button>
-        </form>
+        <Form className="m-0">
+          <Form.Group>
+            <Form.Row>
+              <Form.Label className="mt-2" htmlFor="courseId">Course ID</Form.Label>
+              <Form.Control
+                ref={searchRef}
+                className="ml-1 mr-2 col-sm-4"
+                name="courseId"
+                defaultValue={searchValue}
+              />
+
+              <Button type="submit" onClick={submit} className="col-sm-1" variant="primary">Search</Button>
+            </Form.Row>
+          </Form.Group>
+        </Form>
       </section>
 
       {searchValue && <FeatureBasedEnrollment courseId={searchValue} apiFetchSignal={apiFetchSignal} />}

src/ProgramEnrollments/LinkProgramEnrollments.jsx

@@ -1,4 +1,4 @@
-import { Input, Button } from '@edx/paragon';
+import { Button, Form } from '@edx/paragon';
 import React, { useState, useCallback } from 'react';
 import getLinkProgramEnrollmentDetails from './data/api';
 import LinkProgramEnrollmentsTable from './LinkProgramEnrollmentsTable';
@@ -45,33 +45,38 @@ export default function LinkProgramEnrollments() {
     <>
       <h3>Link Program Enrollments</h3>
       <section className="my-3">
-        <form>
+        <Form>
           <div className="my-2">
-            <label htmlFor="programUUID">Program UUID</label>
-            <Input
-              className="mr-1 col-sm-12"
-              name="programUUID"
-              type="text"
-              defaultValue={programID}
-              onChange={onProgramChange}
-            />
+            <Form.Group>
+              <Form.Label htmlFor="programUUID">Program UUID</Form.Label>
+
+              <Form.Control
+                name="programUUID"
+                defaultValue={programID}
+                type="text"
+                onChange={onProgramChange}
+              />
+            </Form.Group>
           </div>
           <div className="my-4">
-            <label
-              className="d-flex align-items-start"
-              htmlFor="usernamePairText"
-            >
-              List of External key and username pairings (one per line)
-            </label>
-            <Input
-              className="mr-1 col-sm-12"
-              name="usernamePairText"
-              type="textarea"
-              rows="10"
-              onChange={onUserTextChange}
-              defaultValue={usernamePairText}
-              placeholder="external_user_key,lms_username"
-            />
+
+            <Form.Group>
+              <Form.Label
+                className="d-flex align-items-start"
+                htmlFor="usernamePairText"
+              >
+                List of External key and username pairings (one per line)
+              </Form.Label>
+              <Form.Control
+                name="usernamePairText"
+                as="textarea"
+                autoResize
+                rows="10"
+                onChange={onUserTextChange}
+                defaultValue={usernamePairText}
+                placeholder="external_user_key,lms_username"
+              />
+            </Form.Group>
           </div>
           <Button
             type="submit"
@@ -80,15 +85,15 @@ export default function LinkProgramEnrollments() {
           >
             Submit
           </Button>
-        </form>
+        </Form>
       </section>
       {((errorMessage && errorMessage.length > 0)
-      || (successMessage && successMessage.length > 0)) && (
-        <LinkProgramEnrollmentsTable
-          successMessage={successMessage}
-          errorMessage={errorMessage}
-          usernamePairText={usernamePairText}
-        />
+        || (successMessage && successMessage.length > 0)) && (
+          <LinkProgramEnrollmentsTable
+            successMessage={successMessage}
+            errorMessage={errorMessage}
+            usernamePairText={usernamePairText}
+          />
       )}
     </>
   );

src/ProgramEnrollments/ProgramInspector/ProgramInspector.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Alert, Col, Row, Button, Input,
+  Alert, Col, Row, Button, Form,
 } from '@edx/paragon';
 import { history } from '@edx/frontend-platform';
 import { getSsoRecords } from '../../users/data/api';
@@ -26,12 +26,12 @@ export default function ProgramInspector({ location }) {
   const [clickEventCall, setClickEventCall] = useState(false);
 
   const getOrgKeyList = () => (orgKeyList
-    ? orgKeyList.map((data) => ({
-      value: data,
-      label: data,
-    }))
+    ? orgKeyList.map((data) => ((
+      <option key={data} value={data}>
+        {data}
+      </option>
+    )))
     : orgKeyList);
-
   const handleSubmit = () => {
     if (!username && !externalUserKey) {
       setUsername(undefined);
@@ -40,8 +40,7 @@ export default function ProgramInspector({ location }) {
       setSsoRecords([]);
       history.push('/programs');
     } else {
-      const newLink = `/programs?edx_user=${
-        username || ''
+      const newLink = `/programs?edx_user=${username || ''
       }&org_key=${activeOrgKey}&external_user_key=${externalUserKey || ''}`;
       if (newLink === location.pathname + location.search) {
         setClickEventCall(!clickEventCall);
@@ -113,50 +112,55 @@ export default function ProgramInspector({ location }) {
       )}
       <h3>Program Enrollments Inspector</h3>
       <section className="my-3">
-        <form>
+        <Form>
           <div className="d-flex">
             <div className="col-sm-4 pl-0">
-              <label htmlFor="username">edX username or email</label>
-              <Input
-                className="col-sm-12"
-                name="username"
-                type="text"
-                defaultValue={username}
-                onChange={(e) => (e.target.value
-                  ? setUsername(e.target.value)
-                  : setUsername(undefined))}
-                placeholder="[email protected]"
-              />
+              <Form.Group>
+                <Form.Label htmlFor="username"> edX username or email</Form.Label>
+                <Form.Control
+                  name="username"
+                  defaultValue={username}
+                  onChange={(e) => (e.target.value
+                    ? setUsername(e.target.value)
+                    : setUsername(undefined))}
+                  placeholder="[email protected]"
+                />
+              </Form.Group>
             </div>
             <div className="col-sm-4">
-              <label htmlFor="orgKey">Identity-providing institution</label>
-              <Input
-                className="col-sm-12"
-                name="orgKey"
-                type="select"
-                defaultValue={activeOrgKey}
-                options={getOrgKeyList()}
-                onChange={(e) => setActiveOrgKey(e.target.value)}
-              />
+
+              <Form.Group>
+                <Form.Label htmlFor="orgKey">Identity-providing institution</Form.Label>
+
+                <Form.Control
+                  name="orgKey"
+                  as="select"
+                  defaultValue={activeOrgKey}
+                  onChange={(e) => setActiveOrgKey(e.target.value)}
+                >
+                  {getOrgKeyList()}
+                </Form.Control>
+              </Form.Group>
             </div>
             <div className="col-sm-4 pr-0">
-              <label htmlFor="externalKey">Institution user key</label>
-              <Input
-                className="col-sm-12"
-                name="externalKey"
-                type="text"
-                defaultValue={externalUserKey}
-                onChange={(e) => (e.target.value
-                  ? setExternalUserKey(e.target.value)
-                  : setExternalUserKey(undefined))}
-                placeholder="ex. GTPersonDirectoryID for GT Students"
-              />
+              <Form.Group>
+                <Form.Label htmlFor="externalKey">Institution user key</Form.Label>
+
+                <Form.Control
+                  name="externalKey"
+                  defaultValue={externalUserKey}
+                  onChange={(e) => (e.target.value
+                    ? setExternalUserKey(e.target.value)
+                    : setExternalUserKey(undefined))}
+                  placeholder="ex. GTPersonDirectoryID for GT Students"
+                />
+              </Form.Group>
             </div>
           </div>
           <Button type="submit" className="mt-4" onClick={submit}>
             Search Program Records
           </Button>
-        </form>
+        </Form>
       </section>
 
       {learnerProgramEnrollment && learnerProgramEnrollment.user && (

src/users/EntitlementsAndEnrollmentsContainer.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Input } from '@edx/paragon';
+import { Form } from '@edx/paragon';
 import Enrollments from './enrollments/Enrollments';
 import Entitlements from './entitlements/Entitlements';
 
@@ -12,7 +12,13 @@ export default function EntitlementsAndEnrollmentsContainer({
   return (
     <div id="entitlementsAndEnrollmentsContainer">
       <div className="mb-2 p-2 background-light-gray">
-        <Input name="courseId" className="mr-1 col-sm-4" type="text" placeholder="Course ID or Name" defaultValue={searchValue} onChange={(e) => { setSearchValue(e.target.value.toLowerCase()); }} />
+        <Form.Control
+          placeholder="Course ID or Name"
+          className="mr-1 col-sm-4"
+          name="courseId"
+          defaultValue={searchValue}
+          onChange={(e) => { setSearchValue(e.target.value.toLowerCase()); }}
+        />
       </div>
       <Entitlements
         user={user}

src/users/UserSearch.jsx

@@ -3,7 +3,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 
-import { Input, Button } from '@edx/paragon';
+import { Button, Form } from '@edx/paragon';
 
 export default function UserSearch({ userIdentifier, searchHandler }) {
   const searchRef = useRef();
@@ -16,11 +16,19 @@ export default function UserSearch({ userIdentifier, searchHandler }) {
 
   return (
     <section className="mb-3">
-      <form className="form-inline">
-        <label htmlFor="userIdentifier">Username, Email or LMS User ID</label>
-        <Input ref={searchRef} className="flex-grow-1 ml-1 mr-1" name="userIdentifier" type="text" defaultValue={userIdentifier} />
+      <Form className="m-0 row">
+        <Form.Label className="mt-2" htmlFor="userIdentifier">Username, Email or LMS User ID</Form.Label>
+        <Form.Control
+          as="input"
+          ref={searchRef}
+          className="flex-grow-1 ml-1 mr-1"
+          name="userIdentifier"
+          defaultValue={userIdentifier}
+        />
+
         <Button type="submit" onClick={submit} variant="primary">Search</Button>
-      </form>
+      </Form>
+
     </section>
   );
 }

src/users/__snapshots__/UserSearch.test.jsx.snap

@@ -5,19 +5,25 @@ exports[`User Search Page renders correctly matches snapshot 1`] = `
   className="mb-3"
 >
   <form
-    className="form-inline"
+    className="m-0 row"
   >
     <label
+      className="pgn__form-label mt-2"
       htmlFor="userIdentifier"
     >
       Username, Email or LMS User ID
     </label>
-    <input
-      className="form-control flex-grow-1 ml-1 mr-1"
-      defaultValue=""
-      name="userIdentifier"
-      type="text"
-    />
+    <div
+      className="pgn__form-control-decorator-group flex-grow-1 ml-1 mr-1"
+    >
+      <input
+        className="form-control"
+        defaultValue=""
+        name="userIdentifier"
+        onBlur={[Function]}
+        onChange={[Function]}
+      />
+    </div>
     <button
       className="btn btn-primary"
       disabled={false}

src/users/account-actions/TogglePasswordStatus.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Button, Input, Alert, ModalDialog, ActionRow,
+  Button, Alert, ModalDialog, ActionRow, Form,
 } from '@edx/paragon';
 import { postTogglePasswordStatus } from '../data/api';
 
@@ -44,20 +44,23 @@ export default function TogglePasswordStatus({
             {`${passwordStatus.status === PASSWORD_STATUS.USABLE ? DISABLE_USER_CONFIRMATION : ENABLE_USER_CONFIRMATION}`}
           </ModalDialog.Title>
         </ModalDialog.Header>
-        <ModalDialog.Body className="mb-3">
+        <ModalDialog.Body className="mb-2">
           <div>
             <Alert variant="warning">
               <p>
                 Please provide the reason for {`${passwordStatus.status === PASSWORD_STATUS.USABLE ? 'disabling' : 'enabling'}`} the user <b>{username}</b>.
               </p>
             </Alert>
-            <label htmlFor="comment">Reason: </label>
-            <Input
-              name="comment"
-              type="text"
-              value={comment}
-              onChange={(event) => setComment(event.target.value)}
-            />
+
+            <Form.Group>
+              <Form.Label htmlFor="comment">Reason:</Form.Label>
+
+              <Form.Control
+                name="comment"
+                value={comment}
+                onChange={(event) => setComment(event.target.value)}
+              />
+            </Form.Group>
           </div>
         </ModalDialog.Body>
         <ModalDialog.Footer>