Add updates by car screen and modal popup (#29)

src/components/App/__snapshots__/App.test.js.snap

@@ -6,17 +6,17 @@ exports[`App Route / authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-90"
+      class="makeStyles-root-104"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-91 makeStyles-appBarShift-92 mui-fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-105 makeStyles-appBarShift-106 mui-fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
           <button
             aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-93 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-107 MuiIconButton-colorInherit MuiIconButton-edgeStart"
             tabindex="0"
             type="button"
           >
@@ -44,7 +44,7 @@ exports[`App Route / authenticated 1`] = `
             Fisker OTA Portal
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-100 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-114 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -60,13 +60,13 @@ exports[`App Route / authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-95"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-109"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-96 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-110 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-97"
+            class="makeStyles-drawerHeader-111"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root"
@@ -212,16 +212,16 @@ exports[`App Route / authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-98 makeStyles-contentShift-99"
+        class="makeStyles-content-112 makeStyles-contentShift-113"
       >
         <div
-          class="makeStyles-drawerHeader-97"
+          class="makeStyles-drawerHeader-111"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-81"
+            class="makeStyles-paper-95"
           >
             <h1
               class="MuiTypography-root MuiTypography-h5"
@@ -242,10 +242,10 @@ exports[`App Route / unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-10"
+      class="makeStyles-root-12"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-11 mui-fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-13 mui-fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -258,21 +258,21 @@ exports[`App Route / unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-18"
+        class="makeStyles-content-20"
       >
         <div
-          class="makeStyles-drawerHeader-17"
+          class="makeStyles-drawerHeader-19"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-1"
+            class="makeStyles-paper-3"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-4 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -299,17 +299,17 @@ exports[`App Route /home authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-110"
+      class="makeStyles-root-127"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-111 makeStyles-appBarShift-112 mui-fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-128 makeStyles-appBarShift-129 mui-fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
           <button
             aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-113 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-130 MuiIconButton-colorInherit MuiIconButton-edgeStart"
             tabindex="0"
             type="button"
           >
@@ -337,7 +337,7 @@ exports[`App Route /home authenticated 1`] = `
             Fisker OTA Portal
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-120 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-137 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -353,13 +353,13 @@ exports[`App Route /home authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-115"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-132"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-116 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-133 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-117"
+            class="makeStyles-drawerHeader-134"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root"
@@ -505,16 +505,16 @@ exports[`App Route /home authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-118 makeStyles-contentShift-119"
+        class="makeStyles-content-135 makeStyles-contentShift-136"
       >
         <div
-          class="makeStyles-drawerHeader-117"
+          class="makeStyles-drawerHeader-134"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-101"
+            class="makeStyles-paper-118"
           >
             <h1
               class="MuiTypography-root MuiTypography-h5"
@@ -535,10 +535,10 @@ exports[`App Route /home unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-30"
+      class="makeStyles-root-35"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-31 mui-fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-36 mui-fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -551,21 +551,21 @@ exports[`App Route /home unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-38"
+        class="makeStyles-content-43"
       >
         <div
-          class="makeStyles-drawerHeader-37"
+          class="makeStyles-drawerHeader-42"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-21"
+            class="makeStyles-paper-26"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-24 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-29 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -592,17 +592,17 @@ exports[`App Route /package-upload authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-130"
+      class="makeStyles-root-150"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-131 makeStyles-appBarShift-132 mui-fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-151 makeStyles-appBarShift-152 mui-fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
           <button
             aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-133 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-153 MuiIconButton-colorInherit MuiIconButton-edgeStart"
             tabindex="0"
             type="button"
           >
@@ -630,7 +630,7 @@ exports[`App Route /package-upload authenticated 1`] = `
             Fisker OTA Portal
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-140 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-160 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -646,13 +646,13 @@ exports[`App Route /package-upload authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-135"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-155"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-136 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-156 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-137"
+            class="makeStyles-drawerHeader-157"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root"
@@ -798,10 +798,10 @@ exports[`App Route /package-upload authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-138 makeStyles-contentShift-139"
+        class="makeStyles-content-158 makeStyles-contentShift-159"
       >
         <div
-          class="makeStyles-drawerHeader-137"
+          class="makeStyles-drawerHeader-157"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -810,7 +810,7 @@ exports[`App Route /package-upload authenticated 1`] = `
             data-testid="mocked-fileuploadprovider"
           >
             <div
-              class="makeStyles-paper-121"
+              class="makeStyles-paper-141"
             >
               <h1
                 class="MuiTypography-root MuiTypography-h5"
@@ -819,7 +819,7 @@ exports[`App Route /package-upload authenticated 1`] = `
               </h1>
               <form
                 action="{onSubmit}"
-                class="makeStyles-form-123"
+                class="makeStyles-form-143"
                 novalidate=""
               >
                 <div
@@ -855,10 +855,10 @@ exports[`App Route /package-upload authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-141 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-162 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-143"
+                        class="PrivateNotchedOutline-legendLabelled-164"
                       >
                         <span>
                           Package name
@@ -901,10 +901,10 @@ exports[`App Route /package-upload authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-141 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-162 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-143"
+                        class="PrivateNotchedOutline-legendLabelled-164"
                       >
                         <span>
                           Version
@@ -939,10 +939,10 @@ exports[`App Route /package-upload authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-141 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-162 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-143"
+                        class="PrivateNotchedOutline-legendLabelled-164"
                       >
                         <span>
                           Description
@@ -977,10 +977,10 @@ exports[`App Route /package-upload authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-141 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-162 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-143"
+                        class="PrivateNotchedOutline-legendLabelled-164"
                       >
                         <span>
                           Release Notes URL
@@ -1021,7 +1021,7 @@ exports[`App Route /package-upload authenticated 1`] = `
                   </div>
                 </div>
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-124 MuiButton-containedPrimary MuiButton-fullWidth"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-144 MuiButton-containedPrimary MuiButton-fullWidth"
                   tabindex="0"
                   type="submit"
                 >
@@ -1050,10 +1050,10 @@ exports[`App Route /package-upload unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-50"
+      class="makeStyles-root-58"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-51 mui-fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-59 mui-fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -1066,21 +1066,21 @@ exports[`App Route /package-upload unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-58"
+        class="makeStyles-content-66"
       >
         <div
-          class="makeStyles-drawerHeader-57"
+          class="makeStyles-drawerHeader-65"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-41"
+            class="makeStyles-paper-49"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-44 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-52 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -1107,17 +1107,17 @@ exports[`App Route /page-not-found authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-198"
+      class="makeStyles-root-227"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-199 makeStyles-appBarShift-200 mui-fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-228 makeStyles-appBarShift-229 mui-fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
           <button
             aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-201 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-230 MuiIconButton-colorInherit MuiIconButton-edgeStart"
             tabindex="0"
             type="button"
           >
@@ -1145,7 +1145,7 @@ exports[`App Route /page-not-found authenticated 1`] = `
             Fisker OTA Portal
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-208 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-237 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -1161,13 +1161,13 @@ exports[`App Route /page-not-found authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-203"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-232"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-204 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-233 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-205"
+            class="makeStyles-drawerHeader-234"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root"
@@ -1313,16 +1313,16 @@ exports[`App Route /page-not-found authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-206 makeStyles-contentShift-207"
+        class="makeStyles-content-235 makeStyles-contentShift-236"
       >
         <div
-          class="makeStyles-drawerHeader-205"
+          class="makeStyles-drawerHeader-234"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-189"
+            class="makeStyles-paper-218"
           >
             <h1
               class="MuiTypography-root MuiTypography-h2"
@@ -1343,10 +1343,10 @@ exports[`App Route /page-not-found unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-178"
+      class="makeStyles-root-204"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-179 mui-fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-205 mui-fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -1359,16 +1359,16 @@ exports[`App Route /page-not-found unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-186"
+        class="makeStyles-content-212"
       >
         <div
-          class="makeStyles-drawerHeader-185"
+          class="makeStyles-drawerHeader-211"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-169"
+            class="makeStyles-paper-195"
           >
             <h1
               class="MuiTypography-root MuiTypography-h2"
@@ -1389,17 +1389,17 @@ exports[`App Route /vehicle-add authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-154"
+      class="makeStyles-root-177"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-155 makeStyles-appBarShift-156 mui-fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-178 makeStyles-appBarShift-179 mui-fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
           <button
             aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-157 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-180 MuiIconButton-colorInherit MuiIconButton-edgeStart"
             tabindex="0"
             type="button"
           >
@@ -1427,7 +1427,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
             Fisker OTA Portal
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-164 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-187 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -1443,13 +1443,13 @@ exports[`App Route /vehicle-add authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-159"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-182"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-160 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-183 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-161"
+            class="makeStyles-drawerHeader-184"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root"
@@ -1595,10 +1595,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-162 makeStyles-contentShift-163"
+        class="makeStyles-content-185 makeStyles-contentShift-186"
       >
         <div
-          class="makeStyles-drawerHeader-161"
+          class="makeStyles-drawerHeader-184"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -1607,7 +1607,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
             data-testid="mocked-vehicleprovider"
           >
             <div
-              class="makeStyles-paper-145"
+              class="makeStyles-paper-168"
             >
               <h1
                 class="MuiTypography-root MuiTypography-h5"
@@ -1616,7 +1616,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
               </h1>
               <form
                 action="{onSubmit}"
-                class="makeStyles-form-147"
+                class="makeStyles-form-170"
                 novalidate=""
               >
                 <div
@@ -1652,10 +1652,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-165 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-189 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-167"
+                        class="PrivateNotchedOutline-legendLabelled-191"
                       >
                         <span>
                           VIN
@@ -1698,10 +1698,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-165 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-189 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-167 PrivateNotchedOutline-legendNotched-168"
+                        class="PrivateNotchedOutline-legendLabelled-191 PrivateNotchedOutline-legendNotched-192"
                       >
                         <span>
                           Model
@@ -1745,10 +1745,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-165 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-189 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-167 PrivateNotchedOutline-legendNotched-168"
+                        class="PrivateNotchedOutline-legendLabelled-191 PrivateNotchedOutline-legendNotched-192"
                       >
                         <span>
                           Year
@@ -1759,7 +1759,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   </div>
                 </div>
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-148 MuiButton-containedPrimary MuiButton-fullWidth"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-171 MuiButton-containedPrimary MuiButton-fullWidth"
                   tabindex="0"
                   type="submit"
                 >
@@ -1788,10 +1788,10 @@ exports[`App Route /vehicle-add unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-70"
+      class="makeStyles-root-81"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-71 mui-fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-82 mui-fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -1804,21 +1804,21 @@ exports[`App Route /vehicle-add unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-78"
+        class="makeStyles-content-89"
       >
         <div
-          class="makeStyles-drawerHeader-77"
+          class="makeStyles-drawerHeader-88"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-61"
+            class="makeStyles-paper-72"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-64 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-75 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >

src/components/CarUpdates/Status/index.jsx

@@ -20,12 +20,15 @@ import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
+import VehicleStatus from "../../Cars/StatusModal";
 
 const MainForm = () => {
   const { packageid } = useParams();
   const classes = useStyles();
   const [pageSize, setPageSize] = useState(10);
   const [pageIndex, setPageIndex] = useState(0);
+  const [viewVIN, setViewVIN] = useState(null);
+
   const {
     getCarUpdates,
     carUpdates,
@@ -74,6 +77,15 @@ const MainForm = () => {
     setPageIndex(0);
   };
 
+  const handleViewVIN = (event) => {
+    event.preventDefault();
+    setViewVIN(event.target.innerHTML);
+  };
+
+  const handleCloseViewVIN = (event) => {
+    setViewVIN(null);
+  };
+
   return (
     <div className={classes.paper} style={{ height: 700, width: "100%" }}>
       <Typography component="h1" variant="h5">
@@ -96,7 +108,11 @@ const MainForm = () => {
             {carUpdates.map((row) => (
               <TableRow key={row.id}>
                 <TableCell align="center">{row.id}</TableCell>
-                <TableCell align="center">{row.vin}</TableCell>
+                <TableCell align="center">
+                  <span className={classes.link} onClick={handleViewVIN}>
+                    {row.vin}
+                  </span>
+                </TableCell>
                 <TableCell align="center">{row.status}</TableCell>
                 <TableCell align="center">
                   {LocalDateTimeString(row.created)}
@@ -126,6 +142,7 @@ const MainForm = () => {
           </TableFooter>
         </Table>
       </TableContainer>
+      <VehicleStatus vin={viewVIN} handleClose={handleCloseViewVIN} />
     </div>
   );
 };

src/components/Cars/List/index.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import {
   Table,
   TableBody,
@@ -75,7 +76,9 @@ const MainForm = () => {
           <TableBody>
             {vehicles.map((row) => (
               <TableRow key={row.vin}>
-                <TableCell align="center">{row.vin}</TableCell>
+                <TableCell align="center">
+                  <Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
+                </TableCell>
                 <TableCell align="center">{row.model}</TableCell>
                 <TableCell align="center">{row.year}</TableCell>
                 <TableCell align="center">

src/components/Cars/Status/index.jsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableFooter,
+  TableHead,
+  TablePagination,
+  TableRow,
+  Typography,
+} from "@material-ui/core";
+
+import {
+  UpdatesProvider,
+  useUpdatesContext,
+} from "../../Contexts/UpdatesContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import useStyles from "../../useStyles";
+import { LocalDateTimeString } from "../../../utils/dates";
+
+const MainForm = () => {
+  const { vin } = useParams();
+  const classes = useStyles();
+  const [pageSize, setPageSize] = useState(10);
+  const [pageIndex, setPageIndex] = useState(0);
+  const { getCarUpdates, carUpdates, totalCarUpdates } = useUpdatesContext();
+  const { setMessage } = useStatusContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
+  useEffect(() => {
+    try {
+      getCarUpdates(
+        {
+          vin,
+          limit: pageSize,
+          offset: pageSize * pageIndex,
+        },
+        token
+      );
+    } catch (e) {
+      setMessage(e.message);
+    }
+    // eslint-disable-next-line
+  }, [pageIndex, pageSize, token]);
+
+  const handleChangePageIndex = (event, newIndex) => {
+    setPageIndex(newIndex);
+  };
+
+  const handleChangePageSize = (event) => {
+    setPageSize(parseInt(event.target.value, 10));
+    setPageIndex(0);
+  };
+
+  return (
+    <div className={classes.paper} style={{ height: 700, width: "100%" }}>
+      <Typography component="h1" variant="h5">
+        {vin} Updates
+      </Typography>
+      <TableContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell align="center">ID</TableCell>
+              <TableCell align="center">Update</TableCell>
+              <TableCell align="center">Status</TableCell>
+              <TableCell align="center">Created</TableCell>
+              <TableCell align="center">Updated</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {carUpdates.map((row) => (
+              <TableRow key={row.id}>
+                <TableCell align="center">{row.id}</TableCell>
+                <TableCell align="center">{`${row.updatepackage.package_name} ${row.updatepackage.version}`}</TableCell>
+                <TableCell align="center">{row.status}</TableCell>
+                <TableCell align="center">
+                  {LocalDateTimeString(row.created)}
+                </TableCell>
+                <TableCell align="center">
+                  {LocalDateTimeString(row.updated)}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TablePagination
+                rowsPerPageOptions={[5, 10, 25]}
+                colSpan={5}
+                count={totalCarUpdates}
+                rowsPerPage={pageSize}
+                page={pageIndex}
+                SelectProps={{
+                  inputProps: { "aria-label": "rows per page" },
+                  native: true,
+                }}
+                onChangePage={handleChangePageIndex}
+                onChangeRowsPerPage={handleChangePageSize}
+              />
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </TableContainer>
+    </div>
+  );
+};
+
+const CarUpdates = () => (
+  <UpdatesProvider>
+    <MainForm />
+  </UpdatesProvider>
+);
+
+export default CarUpdates;

src/components/Cars/StatusModal/index.jsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from "react";
+import {
+  Backdrop,
+  Modal,
+  Fade,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+} from "@material-ui/core";
+
+import useStyles from "../../useStyles";
+import { useUpdatesContext } from "../../Contexts/UpdatesContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { LocalDateTimeString } from "../../../utils/dates";
+
+export default function CarStatusModal(props) {
+  const classes = useStyles();
+  const [updates, setUpdates] = useState([]);
+  const { setMessage } = useStatusContext();
+  const { getVINUpdates } = useUpdatesContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!props.vin) return;
+        const result = await getVINUpdates(props.vin, token);
+        if (result.error) {
+          throw new Error(`Get VIN updates error. ${result.message}`);
+        } else {
+          setUpdates(result.data);
+        }
+      } catch (e) {
+        setMessage(e.message);
+      }
+    })();
+    // eslint-disable-next-line
+  }, [props.vin]);
+  return (
+    <div>
+      <Modal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        className={classes.modal}
+        open={props.vin}
+        onClose={props.handleClose}
+        BackdropComponent={Backdrop}
+        BackdropProps={{
+          timeout: 500,
+        }}
+      >
+        <Fade in={props.vin}>
+          <div className={classes.modaldialog}>
+            <h2 id="transition-modal-title">{props.vin} Updates</h2>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell align="center">Date</TableCell>
+                  <TableCell align="center">Update</TableCell>
+                  <TableCell align="center">Status</TableCell>
+                  <TableCell align="center">Updated</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {updates.map((update) => (
+                  <TableRow key={update.id}>
+                    <TableCell align="center">
+                      {LocalDateTimeString(update.created)}
+                    </TableCell>
+                    <TableCell align="center">{`${update.updatepackage.package_name} ${update.updatepackage.version}`}</TableCell>
+                    <TableCell align="center">{update.status}</TableCell>
+                    <TableCell align="center">
+                      {LocalDateTimeString(update.updated)}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </Fade>
+      </Modal>
+    </div>
+  );
+}

src/components/Contexts/UpdatesContext.jsx

@@ -81,6 +81,21 @@ export const UpdatesProvider = ({ children }) => {
     return result;
   };
 
+  const getVINUpdates = async (vin, token) => {
+    let result;
+
+    try {
+      setBusy(true);
+      result = await api.getVINUpdates(vin, token);
+      if (result.error)
+        throw new Error(`Get VIN updates error. ${result.message}`);
+    } finally {
+      setBusy(false);
+    }
+
+    return result;
+  };
+
   return (
     <UpdatesContext.Provider
       value={{
@@ -93,6 +108,7 @@ export const UpdatesProvider = ({ children }) => {
         updatePackage,
         createCarUpdates,
         getCarUpdates,
+        getVINUpdates,
       }}
     >
       {children}

src/components/Routes/SiteRoutes.jsx

@@ -15,6 +15,7 @@ const UpdatePackagesForm = React.lazy(() => import("../UpdatePackages/List"));
 const UpdatePackageEdit = React.lazy(() => import("../UpdatePackages/Edit"));
 const CarUpdatesDeploy = React.lazy(() => import("../CarUpdates/Deploy"));
 const CarUpdatesStatus = React.lazy(() => import("../CarUpdates/Status"));
+const CarUpdates = React.lazy(() => import("../Cars/Status"));
 const VehiclesList = React.lazy(() => import("../Cars/List"));
 
 const SiteRoutes = () => {
@@ -92,6 +93,14 @@ const SiteRoutes = () => {
           groups={groups}
           roles={[Roles.CREATE]}
         />
+        <AuthRoute
+          path="/vehicle-status/:vin"
+          render={() => <CarUpdates />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          roles={[Roles.READ, Roles.CREATE]}
+        />
         <PageNotFound />
       </Switch>
     </Suspense>

src/components/SSOForm/__snapshots__/SSOForm.test.js.snap

@@ -3,12 +3,12 @@
 exports[`Sign In Form Should render 1`] = `
 <div>
   <div
-    class="makeStyles-paper-1"
+    class="makeStyles-paper-3"
     style="justify-content: center;"
   >
     <a
       aria-disabled="false"
-      class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-4 MuiButton-containedPrimary"
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary"
       href="https://cognito.com/authorize?redirect=https://example.com/callback"
       tabindex="0"
     >

src/components/UpdatePackages/Create/__snapshots__/Create.test.js.snap

@@ -6,7 +6,7 @@ exports[`File Upload Form Should render 1`] = `
     data-testid="mocked-fileuploadprovider"
   >
     <div
-      class="makeStyles-paper-1"
+      class="makeStyles-paper-3"
     >
       <h1
         class="MuiTypography-root MuiTypography-h5"
@@ -15,7 +15,7 @@ exports[`File Upload Form Should render 1`] = `
       </h1>
       <form
         action="{onSubmit}"
-        class="makeStyles-form-3"
+        class="makeStyles-form-5"
         novalidate=""
       >
         <div
@@ -51,10 +51,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-21 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-24 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-23"
+                class="PrivateNotchedOutline-legendLabelled-26"
               >
                 <span>
                   Package name
@@ -97,10 +97,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-21 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-24 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-23"
+                class="PrivateNotchedOutline-legendLabelled-26"
               >
                 <span>
                   Version
@@ -135,10 +135,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-21 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-24 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-23"
+                class="PrivateNotchedOutline-legendLabelled-26"
               >
                 <span>
                   Description
@@ -173,10 +173,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-21 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-24 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-23"
+                class="PrivateNotchedOutline-legendLabelled-26"
               >
                 <span>
                   Release Notes URL
@@ -217,7 +217,7 @@ exports[`File Upload Form Should render 1`] = `
           </div>
         </div>
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-4 MuiButton-containedPrimary MuiButton-fullWidth"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
           tabindex="0"
           type="submit"
         >

src/components/useStyles.jsx

@@ -5,6 +5,17 @@ const MENUITEM_PADDING_TOP = 8;
 const DRAWER_WIDTH = 240;
 
 const useStyles = makeStyles((theme) => ({
+  modal: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  modaldialog: {
+    backgroundColor: theme.palette.background.paper,
+    border: "2px solid #000",
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 3),
+  },
   paper: {
     marginTop: theme.spacing(8),
     display: "flex",
@@ -105,6 +116,13 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: "auto",
     marginRight: -12,
   },
+  link: {
+    cursor: "pointer",
+    textDecorationColor: "Blue",
+    textDecorationStyle: "solid",
+    textDecorationLine: "underline",
+    color: "Blue",
+  },
 }));
 
 export default useStyles;

src/services/__mocks__/updates.js

@@ -41,7 +41,11 @@ const updatesAPI = {
   },
 
   getCarUpdates: async (filter, token) => {
-    return [];
+    return { data:[] };
+  },
+
+  getVINUpdates: async (vin, token) => {
+    return { data:[] };
   },
 };
 

src/services/updates.js

@@ -37,6 +37,14 @@ const updatesAPI = {
       .then(fetchRespHandler);
   },
   
+  getVINUpdates: async (vin, token) => {
+    var u = addQueryParams(`${API_ENDPOINT}/carupdates`, { vin });
+    return fetch(u, {
+      method: "GET",
+      headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
+    })
+      .then(fetchRespHandler);
+  },
 };
 
 export default updatesAPI;