ORV2-386 Adjustments to power unit form fields (#165)

bcgov · Jan 30, 2023 · 41a9705 · 41a9705
1 parent 5d5eeb5
commit 41a9705
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 42 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -12,7 +12,7 @@
     <link rel="apple-touch-icon" href="/BCID_V_rgb_pos.png" />
     <link rel="manifest" href="/manifest.json" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <title>onRouteBc</title>
+    <title>onRouteBC</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "onRouteBc",
-  "name": "onRouteBc",
+  "short_name": "onRouteBC",
+  "name": "onRouteBC",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/frontend/src/_tests_/Header.test.tsx b/frontend/src/_tests_/Header.test.tsx
@@ -35,6 +35,6 @@ beforeEach(() => {
 test("Should render Header/Nav without breaking", () => {
   mockMatchMedia();
   renderHeader();
-  expect(screen.getByText("onRouteBc")).toBeInTheDocument();
+  expect(screen.getByText("onRouteBC")).toBeInTheDocument();
 });
 
diff --git a/frontend/src/common/components/header/Header.tsx b/frontend/src/common/components/header/Header.tsx
@@ -59,11 +59,11 @@ export const Header = () => {
       <a href={routes.HOME}>
         <img
           src="https://developer.gov.bc.ca/static/BCID_H_rgb_rev-20eebe74aef7d92e02732a18b6aa6bbb.svg"
-          alt="Go to the onRouteBc Home Page"
+          alt="Go to the onRouteBC Home Page"
           height="50px"
         />
       </a>
-      <h1>onRouteBc</h1>
+      <h1>onRouteBC</h1>
     </div>
   );
 

diff --git a/frontend/src/features/manageVehicles/components/dashboard/Dashboard.tsx b/frontend/src/features/manageVehicles/components/dashboard/Dashboard.tsx
@@ -208,7 +208,7 @@ export const Dashboard = React.memo(() => {
         isOpen={showForm}
         onRequestClose={closeSlidePanel}
         from="right"
-        width="28%"
+        width="538px"
         title={
           addVehicleMode === VEHICLE_TYPES_ENUM.POWER_UNIT
             ? t("vehicle.add-vehicle.power-unit")

diff --git a/frontend/src/features/manageVehicles/components/form/PowerUnitForm.tsx b/frontend/src/features/manageVehicles/components/form/PowerUnitForm.tsx
@@ -109,10 +109,14 @@ export const PowerUnitForm = ({
    */
   const formFieldStyle = {
     fontWeight: "bold",
-    width: "300px",
+    width: "490px",
     marginLeft: "8px",
   };
 
+  const inputHeight = {
+    height: "48px",
+  }
+
   /**
    * Adds a vehicle.
    */
@@ -142,11 +146,11 @@ export const PowerUnitForm = ({
                   key="controller-powerunit-unitNumber"
                   name="unitNumber"
                   control={control}
-                  rules={{ required: true }}
+                  rules={{ required: false, maxLength: 10 }}
                   defaultValue={powerUnit?.unitNumber || ""}
-                  render={({ fieldState: { invalid } }) => (
+                  render={() => (
                     <>
-                      <FormControl margin="normal" error={invalid}>
+                      <FormControl margin="normal">
                         <FormLabel
                           id="power-unit-unit-number-label"
                           sx={formFieldStyle}
@@ -155,18 +159,14 @@ export const PowerUnitForm = ({
                         </FormLabel>
                         <OutlinedInput
                           aria-labelledby="power-unit-unit-number-label"
+                          inputProps={{ maxLength: 10 }}
+                          sx={inputHeight}
                           defaultValue={powerUnit?.unitNumber}
                           {...register("unitNumber", {
-                            required: true,
+                            required: false,
+                            maxLength: 10,
                           })}
                         />
-                        {invalid && (
-                          <FormHelperText error>
-                            {t("vehicle.power-unit.required", {
-                              fieldName: "Unit Number",
-                            })}
-                          </FormHelperText>
-                        )}
                       </FormControl>
                     </>
                   )}
@@ -177,7 +177,7 @@ export const PowerUnitForm = ({
                   key="controller-powerunit-make"
                   name="make"
                   control={control}
-                  rules={{ required: true }}
+                  rules={{ required: true, maxLength: 20 }}
                   defaultValue={powerUnit?.make || ""}
                   render={({ fieldState: { invalid } }) => (
                     <>
@@ -190,9 +190,13 @@ export const PowerUnitForm = ({
                         </FormLabel>
                         <OutlinedInput
                           aria-labelledby="power-unit-make-label"
+                          inputProps={{ maxLength: 20 }}
                           defaultValue={powerUnit?.make}
+                          sx={inputHeight}
+                          className="height"
                           {...register("make", {
                             required: true,
+                            maxLength: 20,
                           })}
                         />
                         {invalid && (
@@ -227,9 +231,13 @@ export const PowerUnitForm = ({
                           <OutlinedInput
                             aria-labelledby="power-unit-year-label"
                             defaultValue={powerUnit?.year}
+                            sx={inputHeight}
+                            inputProps={{ maxLength: 4, minLength: 4 }}
                             {...register("year", {
                               required: true,
-                              valueAsNumber: true
+                              valueAsNumber: true,
+                              maxLength: 4,
+                              minLength: 4,
                             })}
                           />
                           {invalid && (
@@ -263,6 +271,7 @@ export const PowerUnitForm = ({
                         </FormLabel>
                         <OutlinedInput
                           inputProps={{ maxLength: 17 }}
+                          sx={inputHeight}
                           aria-labelledby="power-unit-vin-label"
                           {...register("vin", {
                             required: true,
@@ -287,7 +296,7 @@ export const PowerUnitForm = ({
                   key="controller-powerunit-plate"
                   name="plate"
                   control={control}
-                  rules={{ required: true }}
+                  rules={{ required: true, maxLength: 10 }}
                   defaultValue={powerUnit?.plate || ""}
                   render={({ fieldState: { invalid } }) => (
                     <>
@@ -300,8 +309,11 @@ export const PowerUnitForm = ({
                         </FormLabel>
                         <OutlinedInput
                           aria-labelledby="power-unit-plate-label"
+                          inputProps={{ maxLength: 10 }}
+                          sx={inputHeight}
                           {...register("plate", {
                             required: true,
+                            maxLength: 10,
                           })}
                         />
                         {invalid && (
@@ -335,6 +347,7 @@ export const PowerUnitForm = ({
                         <Select
                           aria-labelledby="power-unit-power-unit-type-label"
                           defaultValue={""}
+                          sx={inputHeight}
                           {...register("powerUnitTypeCode", {
                             required: true,
                           })}
@@ -392,10 +405,10 @@ export const PowerUnitForm = ({
                         </FormLabel>
                         <OutlinedInput
                           aria-labelledby="power-unit-licensed-gvw-label"
-                          // defaultValue={axleGroup?.axleGroupNumber}
+                          sx={inputHeight}
                           {...register("licensedGvw", {
                             required: true,
-                            valueAsNumber: true
+                            valueAsNumber: true,
                           })}
                         />
                         {invalid && (
@@ -415,11 +428,11 @@ export const PowerUnitForm = ({
                   key="controller-powerunit-steer-axle-tire-size"
                   name="steerAxleTireSize"
                   control={control}
-                  rules={{ required: true }}
+                  rules={{ required: false }}
                   defaultValue={powerUnit?.steerAxleTireSize || undefined}
-                  render={({ fieldState: { invalid } }) => (
+                  render={() => (
                     <>
-                      <FormControl margin="normal" error={invalid}>
+                      <FormControl margin="normal">
                         <FormLabel
                           id="power-unit-steer-axle-tire-size-label"
                           sx={formFieldStyle}
@@ -428,19 +441,12 @@ export const PowerUnitForm = ({
                         </FormLabel>
                         <OutlinedInput
                           aria-labelledby="power-unit-steer-axle-tire-size-label"
-                          // defaultValue={axleGroup?.axleGroupNumber}
+                          sx={inputHeight}
                           {...register("steerAxleTireSize", {
-                            required: true,
-                            valueAsNumber: true
+                            required: false,
+                            valueAsNumber: true,
                           })}
                         />
-                        {invalid && (
-                          <FormHelperText error>
-                            {t("vehicle.power-unit.required", {
-                              fieldName: "Steer Axle Tire Size",
-                            })}
-                          </FormHelperText>
-                        )}
                       </FormControl>
                     </>
                   )}

diff --git a/frontend/src/features/manageVehicles/components/form/subsections/CountryAndProvince.tsx b/frontend/src/features/manageVehicles/components/form/subsections/CountryAndProvince.tsx
@@ -63,9 +63,14 @@ export const CountryAndProvince = ({
    */
   const formFieldStyle = {
     fontWeight: "bold",
-    width: "300px",
+    width: "490px",
+    marginLeft: "8px",
   };
 
+  const inputHeight = {
+    height: "48px",
+  }
+
   /**
    * Function to handle changes on selecting a country.
    * When the selected country supports provinces, provinces are displayed.
@@ -132,6 +137,7 @@ export const CountryAndProvince = ({
                 <Select
                   aria-labelledby="power-unit-country-label"
                   defaultValue={country || ""}
+                  sx={inputHeight}
                   {...register("country", {
                     required: true,
                     onChange: onChangeCountry,
@@ -159,10 +165,10 @@ export const CountryAndProvince = ({
       {shouldDisplayProvince && (
         <div>
           <Controller
-            key=""
-            name=""
+            key="controller-powerunit-province"
+            name="province"
             rules={{ required: shouldDisplayProvince }}
-            defaultValue={country || ""}
+            defaultValue={province || ""}
             render={({ fieldState: { invalid } }) => (
               <>
                 <FormControl
@@ -175,6 +181,7 @@ export const CountryAndProvince = ({
                   <Select
                     aria-labelledby="power-unit-province-label"
                     defaultValue={province || ""}
+                    sx={inputHeight}
                     {...register("province", {
                       required: shouldDisplayProvince,
                       onChange: onChangeProvince,
@@ -193,7 +200,10 @@ export const CountryAndProvince = ({
                   {invalid && (
                     <FormHelperText error>
                       {t("vehicle.power-unit.required", {
-                        fieldName: "Province/State",
+                        fieldName: "Province / State",
+                        interpolation: {
+                          escapeValue: false,
+                        }
                       })}
                     </FormHelperText>
                   )}