fix: replace all form with paragon component

Author: dcoa

src/FeatureBasedEnrollments/FeatureBasedEnrollmentIndexPage.jsx

@@ -7,7 +7,7 @@ import React, {
   useLayoutEffect,
 } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { Form, Button } from '@openedx/paragon';
+import { Form, Button, Row } from '@openedx/paragon';
 
 import UserMessagesContext from '../userMessages/UserMessagesContext';
 import AlertList from '../userMessages/AlertList';
@@ -94,14 +94,14 @@ export default function FeatureBasedEnrollmentIndexPage() {
 
       <AlertList topic="featureBasedEnrollmentGeneral" className="mb-3" />
 
-      <section className="mb-3">
-        <form className="form-inline">
-          <Form.Group>
-            <Form.Label htmlFor="courseId">Course ID</Form.Label>
-            <Form.Control ref={searchRef} className="mr-1 ml-1 col-sm-4" name="courseId" defaultValue={searchValue} />
-          </Form.Group>
-          <Button type="submit" onClick={submit} className="ml-1 col-sm-1" variant="primary">Search</Button>
-        </form>
+      <section className="mb-3 px-2">
+        <Form>
+          <Form.Row>
+            <Form.Label htmlFor="courseId" className="my-auto">Course ID</Form.Label>
+            <Form.Control ref={searchRef} name="courseId" className="mr-1 ml-1 col-sm-4" defaultValue={searchValue} />
+            <Button type="submit" onClick={submit} className="ml-1 col-sm-1" variant="primary">Search</Button>
+          </Form.Row>
+        </Form>
       </section>
 
       {searchValue && <FeatureBasedEnrollment courseId={searchValue} apiFetchSignal={apiFetchSignal} />}

src/ProgramEnrollments/LinkProgramEnrollments.jsx

@@ -45,43 +45,38 @@ export default function LinkProgramEnrollments() {
     <>
       <h3>Link Program Enrollments</h3>
       <section className="my-3">
-        <form>
-          <div className="my-2">
-            <Form.Group>
+        <Form>
+            <Form.Group className="my-2">
               <Form.Label htmlFor="programUUID">Program UUID</Form.Label>
               <Form.Control
-                className="mr-1 col-sm-12"
                 name="programUUID"
                 defaultValue={programID}
                 onChange={onProgramChange}
               />
             </Form.Group>
-          </div>
-          <div className="my-4">
-            <label
-              className="d-flex align-items-start"
+          <Form.Group className="my-4">
+            <Form.Label
               htmlFor="usernamePairText"
             >
               List of External key and username pairings (one per line)
-            </label>
+            </Form.Label>
             <Form.Control
-              className="mr-1 col-sm-12"
               name="usernamePairText"
               as="textarea"
               rows="10"
               onChange={onUserTextChange}
               defaultValue={usernamePairText}
               placeholder="external_user_key,lms_username"
             />
-          </div>
+          </Form.Group>
           <Button
             type="submit"
             onClick={submit}
             disabled={isFetchingData}
           >
             Submit
           </Button>
-        </form>
+        </Form>
       </section>
       {((errorMessage && errorMessage.length > 0)
       || (successMessage && successMessage.length > 0)) && (

src/ProgramEnrollments/ProgramInspector/ProgramInspector.jsx

@@ -120,7 +120,6 @@ export default function ProgramInspector() {
               <Form.Group>
                 <Form.Label htmlFor="username">edX username or email</Form.Label>
                 <Form.Control
-                  className="col-sm-12"
                   name="username"
                   defaultValue={username}
                   onChange={(e) => (e.target.value
@@ -134,7 +133,6 @@ export default function ProgramInspector() {
               <Form.Group>
                 <Form.Label htmlFor="orgKey">Identity-providing institution</Form.Label>
                 <Form.Control
-                  className="col-sm-12"
                   name="orgKey"
                   as="select"
                   defaultValue={activeOrgKey}
@@ -152,7 +150,6 @@ export default function ProgramInspector() {
               <Form.Group>
                 <Form.Label htmlFor="externalKey">Institution user key</Form.Label>
                 <Form.Control
-                  className="col-sm-12"
                   name="externalKey"
                   defaultValue={externalUserKey}
                   onChange={(e) => (e.target.value

src/users/UserSearch.jsx

@@ -15,12 +15,14 @@ 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>
+    <section className="mb-3 px-2">
+      <Form>
+      <Form.Row>
+        <Form.Label htmlFor="userIdentifier" className="my-auto">Username, Email or LMS User ID</Form.Label>
         <Form.Control 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.Row>
+      </Form>
     </section>
   );
 }