spiff up process groups new form

package-lock.json

@@ -39,7 +39,7 @@
         "keycloak-js": "^18.0.1",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
-        "react-bootstrap": "^2.4.0",
+        "react-bootstrap": "^2.5.0",
         "react-bootstrap-typeahead": "^6.0.0",
         "react-datepicker": "^4.8.0",
         "react-dom": "^18.2.0",

package.json

@@ -34,7 +34,7 @@
     "keycloak-js": "^18.0.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.4.0",
+    "react-bootstrap": "^2.5.0",
     "react-bootstrap-typeahead": "^6.0.0",
     "react-datepicker": "^4.8.0",
     "react-dom": "^18.2.0",

src/routes/ProcessGroupNew.tsx

@@ -1,5 +1,7 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import { slugifyString } from '../helpers';
 import HttpService from '../services/HttpService';
@@ -39,26 +41,28 @@ export default function ProcessGroupNew() {
       <ProcessBreadcrumb />
       <h2>Add Process Group</h2>
       <form onSubmit={addProcessGroup}>
-        <label>Display Name:</label>
-        <input
-          name="display_name"
-          type="text"
-          value={displayName}
-          onChange={(e) => onDisplayNameChanged(e.target.value)}
-        />
-        <br />
-        <label>ID:</label>
-        <input
-          name="id"
-          type="text"
-          value={identifier}
-          onChange={(e) => {
-            setIdentifier(e.target.value);
-            setIdHasBeenUpdatedByUser(true);
-          }}
-        />
-        <br />
-        <button type="submit">Submit</button>
+        <Form.Group className="mb-3" controlId="formDisplayName">
+          <Form.Label>Display Name:</Form.Label>
+          <Form.Control
+            type="text"
+            value={displayName}
+            onChange={(e) => onDisplayNameChanged(e.target.value)}
+          />
+        </Form.Group>
+        <Form.Group className="mb-3" controlId="formIdentifier">
+          <Form.Label>ID:</Form.Label>
+          <Form.Control
+            type="text"
+            value={identifier}
+            onChange={(e) => {
+              setIdentifier(e.target.value);
+              setIdHasBeenUpdatedByUser(true);
+            }}
+          />
+        </Form.Group>
+        <Button variant="primary" type="submit">
+          Submit
+        </Button>
       </form>
     </main>
   );