Merge pull request #501 from Fisker-Inc/CEC-5672

CEC-5672 - UI for adding SUMS versions

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

@@ -434,6 +434,28 @@ exports[`App Route / authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/flashpacks"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      Flashpack
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
               <li>
                 <a
                   aria-disabled="false"
@@ -460,7 +482,7 @@ exports[`App Route / authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/tools/flashpacks"
+                  href="/tools/sumsversions"
                   role="button"
                   tabindex="0"
                 >
@@ -470,7 +492,7 @@ exports[`App Route / authenticated 1`] = `
                     <span
                       class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                     >
-                      Flashpack
+                      SUMS
                     </span>
                   </div>
                   <span
@@ -1214,6 +1236,28 @@ exports[`App Route /dashboards/0 authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/sumsversions"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      SUMS
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
             </ul>
           </ul>
         </div>
@@ -1853,6 +1897,28 @@ exports[`App Route /home authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/flashpacks"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      Flashpack
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
               <li>
                 <a
                   aria-disabled="false"
@@ -1879,7 +1945,7 @@ exports[`App Route /home authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/tools/flashpacks"
+                  href="/tools/sumsversions"
                   role="button"
                   tabindex="0"
                 >
@@ -1889,7 +1955,7 @@ exports[`App Route /home authenticated 1`] = `
                     <span
                       class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                     >
-                      Flashpack
+                      SUMS
                     </span>
                   </div>
                   <span
@@ -2649,6 +2715,28 @@ exports[`App Route /issue-info authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/flashpacks"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      Flashpack
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
               <li>
                 <a
                   aria-disabled="false"
@@ -2675,7 +2763,7 @@ exports[`App Route /issue-info authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/tools/flashpacks"
+                  href="/tools/sumsversions"
                   role="button"
                   tabindex="0"
                 >
@@ -2685,7 +2773,7 @@ exports[`App Route /issue-info authenticated 1`] = `
                     <span
                       class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                     >
-                      Flashpack
+                      SUMS
                     </span>
                   </div>
                   <span
@@ -3283,6 +3371,28 @@ exports[`App Route /issues authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/flashpacks"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      Flashpack
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
               <li>
                 <a
                   aria-disabled="false"
@@ -3309,7 +3419,7 @@ exports[`App Route /issues authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/tools/flashpacks"
+                  href="/tools/sumsversions"
                   role="button"
                   tabindex="0"
                 >
@@ -3319,7 +3429,7 @@ exports[`App Route /issues authenticated 1`] = `
                     <span
                       class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                     >
-                      Flashpack
+                      SUMS
                     </span>
                   </div>
                   <span
@@ -4286,6 +4396,28 @@ exports[`App Route /package-deploy authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/flashpacks"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      Flashpack
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
               <li>
                 <a
                   aria-disabled="false"
@@ -4312,7 +4444,7 @@ exports[`App Route /package-deploy authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/tools/flashpacks"
+                  href="/tools/sumsversions"
                   role="button"
                   tabindex="0"
                 >
@@ -4322,7 +4454,7 @@ exports[`App Route /package-deploy authenticated 1`] = `
                     <span
                       class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                     >
-                      Flashpack
+                      SUMS
                     </span>
                   </div>
                   <span
@@ -5412,6 +5544,28 @@ exports[`App Route /package-status authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/flashpacks"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      Flashpack
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
               <li>
                 <a
                   aria-disabled="false"
@@ -5438,7 +5592,7 @@ exports[`App Route /package-status authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/tools/flashpacks"
+                  href="/tools/sumsversions"
                   role="button"
                   tabindex="0"
                 >
@@ -5448,7 +5602,7 @@ exports[`App Route /package-status authenticated 1`] = `
                     <span
                       class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                     >
-                      Flashpack
+                      SUMS
                     </span>
                   </div>
                   <span
@@ -6493,6 +6647,28 @@ exports[`App Route /packages authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/flashpacks"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      Flashpack
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
               <li>
                 <a
                   aria-disabled="false"
@@ -6519,7 +6695,7 @@ exports[`App Route /packages authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/tools/flashpacks"
+                  href="/tools/sumsversions"
                   role="button"
                   tabindex="0"
                 >
@@ -6529,7 +6705,7 @@ exports[`App Route /packages authenticated 1`] = `
                     <span
                       class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                     >
-                      Flashpack
+                      SUMS
                     </span>
                   </div>
                   <span
@@ -7001,7 +7177,7 @@ exports[`App Route /packages authenticated 1`] = `
                       class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                     >
                       <a
-                        href="/sums/2023.03.00.00.E"
+                        href="/tools/sums/2023.03.00.00.E"
                       >
                         2023.03.00.00.E
                       </a>
@@ -7693,6 +7869,28 @@ exports[`App Route /page-not-found authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/flashpacks"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      Flashpack
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
               <li>
                 <a
                   aria-disabled="false"
@@ -7719,7 +7917,7 @@ exports[`App Route /page-not-found authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/tools/flashpacks"
+                  href="/tools/sumsversions"
                   role="button"
                   tabindex="0"
                 >
@@ -7729,7 +7927,7 @@ exports[`App Route /page-not-found authenticated 1`] = `
                     <span
                       class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                     >
-                      Flashpack
+                      SUMS
                     </span>
                   </div>
                   <span
@@ -8343,6 +8541,28 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/flashpacks"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      Flashpack
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
               <li>
                 <a
                   aria-disabled="false"
@@ -8369,7 +8589,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/tools/flashpacks"
+                  href="/tools/sumsversions"
                   role="button"
                   tabindex="0"
                 >
@@ -8379,7 +8599,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                     <span
                       class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                     >
-                      Flashpack
+                      SUMS
                     </span>
                   </div>
                   <span
@@ -9067,6 +9287,28 @@ exports[`App Route /tools/security-dll authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/sumsversions"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      SUMS
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
             </ul>
           </ul>
         </div>
@@ -9659,6 +9901,28 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/flashpacks"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      Flashpack
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
               <li>
                 <a
                   aria-disabled="false"
@@ -9685,7 +9949,7 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/tools/flashpacks"
+                  href="/tools/sumsversions"
                   role="button"
                   tabindex="0"
                 >
@@ -9695,7 +9959,7 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
                     <span
                       class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                     >
-                      Flashpack
+                      SUMS
                     </span>
                   </div>
                   <span
@@ -10408,6 +10672,28 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/flashpacks"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      Flashpack
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
               <li>
                 <a
                   aria-disabled="false"
@@ -10434,7 +10720,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/tools/flashpacks"
+                  href="/tools/sumsversions"
                   role="button"
                   tabindex="0"
                 >
@@ -10444,7 +10730,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     <span
                       class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                     >
-                      Flashpack
+                      SUMS
                     </span>
                   </div>
                   <span
@@ -11612,6 +11898,28 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/flashpacks"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      Flashpack
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
               <li>
                 <a
                   aria-disabled="false"
@@ -11638,7 +11946,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/tools/flashpacks"
+                  href="/tools/sumsversions"
                   role="button"
                   tabindex="0"
                 >
@@ -11648,7 +11956,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                     <span
                       class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                     >
-                      Flashpack
+                      SUMS
                     </span>
                   </div>
                   <span
@@ -12745,6 +13053,28 @@ exports[`App Route /vehicles authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/flashpacks"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      Flashpack
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
               <li>
                 <a
                   aria-disabled="false"
@@ -12771,7 +13101,7 @@ exports[`App Route /vehicles authenticated 1`] = `
                 <a
                   aria-disabled="false"
                   class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/tools/flashpacks"
+                  href="/tools/sumsversions"
                   role="button"
                   tabindex="0"
                 >
@@ -12781,7 +13111,7 @@ exports[`App Route /vehicles authenticated 1`] = `
                     <span
                       class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                     >
-                      Flashpack
+                      SUMS
                     </span>
                   </div>
                   <span

src/components/Contexts/CarUpdatesContext.jsx

@@ -64,6 +64,7 @@ export const CarUpdatesProvider = ({ children }) => {
   const [busy, setBusy] = useState(false);
   const [carUpdates, setCarUpdates] = useState([]);
   const [versions, setVersions] = useState([SELECT_VERSION_OBJ]);
+  const [totalVersions, setTotalVersions] = useState(0);
   const [versionRxSwins, setVersionRxSwins] = useState([]);
   const [totalVersionRxSwins, setTotalVersionRxSwins] = useState(0);
   const [totalCarUpdates, setTotalCarUpdates] = useState(0);
@@ -76,8 +77,9 @@ export const CarUpdatesProvider = ({ children }) => {
     try {
       setBusy(true);
       result = await api.cancelCarUpdate(id, token);
-      if (result.error)
+      if (result.error) {
         throw new Error(`Cancel car update error. ${result.message}`);
+      }
     } finally {
       setBusy(false);
     }
@@ -91,8 +93,9 @@ export const CarUpdatesProvider = ({ children }) => {
     try {
       setBusy(true);
       result = await api.deployCarUpdate(id, token);
-      if (result.error)
+      if (result.error) {
         throw new Error(`Retry car update error. ${result.message}`);
+      }
     } finally {
       setBusy(false);
     }
@@ -107,8 +110,9 @@ export const CarUpdatesProvider = ({ children }) => {
       setBusy(true);
       validateDeployCarUpdates(data);
       result = await api.createCarUpdates(data, token);
-      if (result.error)
+      if (result.error) {
         throw new Error(`Deploy car updates error. ${result.message}`);
+      }
     } finally {
       setBusy(false);
     }
@@ -123,8 +127,9 @@ export const CarUpdatesProvider = ({ children }) => {
       setBusy(true);
       validateDeployFleetUpdates(data);
       result = await api.createFleetUpdates(data, token);
-      if (result.error)
+      if (result.error) {
         throw new Error(`Deploy fleet updates error. ${result.message}`);
+      }
     } finally {
       setBusy(false);
     }
@@ -162,8 +167,9 @@ export const CarUpdatesProvider = ({ children }) => {
     try {
       setBusy(true);
       result = await api.getVINUpdates(vin, token);
-      if (result.error)
+      if (result.error) {
         throw new Error(`Get VIN updates error. ${result.message}`);
+      }
     } finally {
       setBusy(false);
     }
@@ -229,8 +235,9 @@ export const CarUpdatesProvider = ({ children }) => {
         carupdateids.join(","),
         token
       );
-      if (result.error)
+      if (result.error) {
         throw new Error(`Get update progress error. ${result.message}`);
+      }
 
       applyProgressStatuses(result.statuses);
     } catch (e) {
@@ -271,8 +278,9 @@ export const CarUpdatesProvider = ({ children }) => {
     try {
       setBusy(true);
       result = await api.getCarUpdateLog(query, token);
-      if (result.error)
+      if (result.error) {
         throw new Error(`Get car update log error. ${result.message}`);
+      }
     } finally {
       setBusy(false);
     }
@@ -286,9 +294,10 @@ export const CarUpdatesProvider = ({ children }) => {
     try {
       setBusy(true);
 
-      result = await api.getSUMSVersions(token);
+      result = await api.getSUMSVersions(null, token);
-      if (result.error)
+      if (result.error) {
         throw new Error(`Get software versions error. ${result.message}`);
+      }
 
       result.data.unshift(SELECT_VERSION_OBJ)
       setVersions(result.data);
@@ -299,6 +308,73 @@ export const CarUpdatesProvider = ({ children }) => {
     return result;
   };
 
+  const getSUMSVersionsList = async (options, token) => {
+    let result;
+
+    try {
+      setBusy(true);
+
+      result = await api.getSUMSVersions(options, token);
+      if (result.error) {
+        throw new Error(`Get software versions error. ${result.message}`);
+      }
+
+      setVersions(result.data);
+      if (options && options.offset === 0 && result.total) {
+        setTotalVersions(result.total);
+      }
+    } finally {
+      setBusy(false);
+    }
+
+    return result;
+  };
+
+  const addSUMSVersion = async (sums_version, os_version, token) => {
+    let result;
+
+    try {
+      setBusy(true);
+
+      if (!validateSoftwareVersion(sums_version)) throw new Error(`invalid version ${sums_version}`);
+
+      const data = {
+        "sumsversions": [
+          {
+            "version": sums_version,
+            "os_version": os_version,
+          }
+        ],
+      }
+
+      result = await api.addSUMSVersion(data, token);
+      if (result.error) {
+        throw new Error(`Add SUMS version error. ${result.message}`);
+      }
+    } finally {
+      setBusy(false);
+    }
+
+    return result;
+  }
+
+  const deleteSUMSVersion = async (version, token) => {
+    let result;
+
+    try {
+      setBusy(true);
+
+      result = await api.deleteSUMSVersion(version, token);
+      if (result.error) {
+        throw new Error(`Delete software version error. ${result.message}`);
+      }
+    } finally {
+      setBusy(false);
+    }
+
+    return result;
+  }
+
   const updateSUMSVersion = async (id, version, token) => {
     let result;
 
@@ -308,8 +384,9 @@ export const CarUpdatesProvider = ({ children }) => {
       if (!validateSoftwareVersion(version)) throw new Error(`invalid version ${version}`);
 
       result = await api.updateSUMSVersion(id, version, token);
-      if (result.error)
+      if (result.error) {
         throw new Error(`Update manifest version error. ${result.message}`);
+      }
     } finally {
       setBusy(false);
     }
@@ -345,8 +422,9 @@ export const CarUpdatesProvider = ({ children }) => {
       setBusy(true);
 
       result = await api.deleteSUMSVersionRxSwins(sums_version, rxswin, token);
-      if (result.error)
+      if (result.error) {
         throw new Error(`Delete software version rxswin error. ${result.message}`);
+      }
     } finally {
       setBusy(false);
     }
@@ -358,8 +436,9 @@ export const CarUpdatesProvider = ({ children }) => {
     try {
       setBusy(true);
       const result = await api.addSUMSVersionRxSwins(sums_version, data, token);
-      if (result.error)
+      if (result.error) {
         throw new Error(`Add software version rxswin error. ${result.message}`);
+      }
       return result;
     } finally {
       setBusy(false);
@@ -374,6 +453,7 @@ export const CarUpdatesProvider = ({ children }) => {
         totalCarUpdates,
         versionRxSwins,
         versions,
+        totalVersions,
         cancelUpdate,
         deployUpdate,
         deployCarUpdates,
@@ -381,6 +461,9 @@ export const CarUpdatesProvider = ({ children }) => {
         getCarUpdates,
         getLog,
         getSUMSVersions,
+        getSUMSVersionsList,
+        addSUMSVersion,
+        deleteSUMSVersion,
         getVINUpdates,
         startMonitor,
         stopMonitor,

src/components/Contexts/__mocks__/CarUpdatesContext.jsx

@@ -156,6 +156,8 @@ export const useCarUpdatesContext = () => ({
   stopMonitor: jest.fn(),
   approveUpdate: jest.fn(),
   getSUMSVersions: jest.fn(() => sumsVersions),
+  addSUMSVersion: jest.fn(),
+  deleteSUMSVersion: jest.fn(),
   getSUMSVersionRxSwins: jest.fn(() => sumsVersionRxSwins),
   deleteSUMSVersionRxSwins: jest.fn(),
   addSUMSVersionRxSwins: jest.fn(),

src/components/Controls/CarUpdatesTable/index.jsx

@@ -177,7 +177,7 @@ const MainForm = ({ vin, token }) => {
               </Link>
             </TableCell>
             <TableCell align="center">
-              <Link to={`/sums/${row.updatemanifest?.sums}`}>
+              <Link to={`/tools/sums/${row.updatemanifest?.sums}`}>
                 {row.updatemanifest?.sums}
               </Link>
             </TableCell>

src/components/Flashpack/Details/index.jsx

@@ -69,7 +69,7 @@ const MainForm = () => {
   useEffect(() => {
     loadFlashpackECUMappings();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token, token, pageIndex, pageSize, orderBy, order]);
+  }, [token, pageIndex, pageSize, orderBy, order]);
 
   const loadFlashpackECUMappings = async () => {
     try {

src/components/Flashpack/index.jsx

@@ -82,7 +82,7 @@ const MainForm = () => {
   useEffect(() => {
     loadFlashpacks();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token, token, pageIndex, pageSize]);
+  }, [token, pageIndex, pageSize]);
 
   const loadFlashpacks = async () => {
     try {

src/components/Layouts/SideMenu.jsx

@@ -69,6 +69,11 @@ const menuData = [
         to: "/tools/certificates/add",
         rolesPerProvider: Permissions.FiskerMagnaCertificate,
       }] : [],
+      {
+        label: "Flashpack",
+        to: "/tools/flashpacks",
+        rolesPerProvider: Permissions.FiskerRead,
+      },
       {
         label: "Security.dll",
         to: "/tools/security-dll",
@@ -80,10 +85,10 @@ const menuData = [
         rolesPerProvider: Permissions.FiskerCreate,
       },
       {
-        label: "Flashpack",
+        label: "SUMS",
-        to: "/tools/flashpacks",
+        to: "/tools/sumsversions",
-        rolesPerProvider: Permissions.FiskerRead,
+        rolesPerProvider: Permissions.FiskerMagnaCreate,
-      },
+      }
     ],
   },
 ];

src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap

@@ -353,6 +353,28 @@ exports[`SideMenu Authenticated 1`] = `
             />
           </a>
         </li>
+        <li>
+          <a
+            aria-disabled="false"
+            class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+            href="/tools/flashpacks"
+            role="button"
+            tabindex="0"
+          >
+            <div
+              class="MuiListItemText-root"
+            >
+              <span
+                class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+              >
+                Flashpack
+              </span>
+            </div>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </a>
+        </li>
         <li>
           <a
             aria-disabled="false"
@@ -379,7 +401,7 @@ exports[`SideMenu Authenticated 1`] = `
           <a
             aria-disabled="false"
             class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-            href="/tools/flashpacks"
+            href="/tools/sumsversions"
             role="button"
             tabindex="0"
           >
@@ -389,7 +411,7 @@ exports[`SideMenu Authenticated 1`] = `
               <span
                 class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
               >
-                Flashpack
+                SUMS
               </span>
             </div>
             <span
@@ -648,6 +670,28 @@ exports[`SideMenu Magna Authenticated 1`] = `
             />
           </a>
         </li>
+        <li>
+          <a
+            aria-disabled="false"
+            class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+            href="/tools/sumsversions"
+            role="button"
+            tabindex="0"
+          >
+            <div
+              class="MuiListItemText-root"
+            >
+              <span
+                class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+              >
+                SUMS
+              </span>
+            </div>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </a>
+        </li>
       </ul>
     </ul>
   </div>

src/components/Manifest/List/index.jsx

@@ -448,7 +448,7 @@ const MainForm = () => {
                   {formatManifestType(row.manifest_type)}
                 </TableCell>
                 <TableCell align="center">
-                  <Link to={`/sums/${row.sums}`}>
+                  <Link to={`/tools/sums/${row.sums}`}>
                     {row.sums}
                   </Link>
                 </TableCell>

src/components/Routes/SiteRoutes.jsx

@@ -17,15 +17,9 @@ const FleetsList = React.lazy(() => import("../Fleets/Table"));
 const FleetStatus = React.lazy(() => import("../Fleets/Status"));
 const FleetAddForm = React.lazy(() => import("../Fleets/Add"));
 const FleetUpdateForm = React.lazy(() => import("../Fleets/Update"));
-const FleetAddVehicleForm = React.lazy(() =>
+const FleetAddVehicleForm = React.lazy(() => import("../Fleets/Status/Vehicles/Add"));
-  import("../Fleets/Status/Vehicles/Add")
+const FleetAddCANFilterForm = React.lazy(() => import("../Fleets/Status/CANFilters/Add"));
-);
+const FleetUpdateCANFilterForm = React.lazy(() => import("../Fleets/Status/CANFilters/Update"));
-const FleetAddCANFilterForm = React.lazy(() =>
-  import("../Fleets/Status/CANFilters/Add")
-);
-const FleetUpdateCANFilterForm = React.lazy(() =>
-  import("../Fleets/Status/CANFilters/Update")
-);
 const Home = React.lazy(() => import("../Home"));
 const Manifests = React.lazy(() => import("../Manifest/List"));
 const ManifestDeploy = React.lazy(() => import("../Manifest/Deploy"));
@@ -44,6 +38,8 @@ const Flashpacks = React.lazy(() => import("../Flashpack"));
 const FlashpackDetails = React.lazy(() => import("../Flashpack/Details"));
 const FlashpackAdd = React.lazy(() => import("../Flashpack/Add"))
 const Datascope = React.lazy(() => import("../Dashboard"));
+const Sums = React.lazy(() => import("../SUMS/List"))
+const SumsNew = React.lazy(() => import("../SUMS/New"))
 const SumsRxSwin = React.lazy(() => import("../SUMS"));
 const SumsRxSwinAdd = React.lazy(() => import("../SUMS/Add"));
 const DashboardCustom = React.lazy(() => import("../DashboardCustom"));
@@ -338,7 +334,25 @@ const SiteRoutes = () => {
           providers={providers}
         />
         <AuthRoute
-          path="/sums/:sums_version"
+          path="/tools/sumsversions"
+          render={() => <Sums />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          rolesPerGroup={Permissions.FiskerMagnaRead}
+          providers={providers}
+        />
+        <AuthRoute
+          path="/tools/sums/new"
+          render={() => <SumsNew />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          rolesPerGroup={Permissions.FiskerMagnaCreate}
+          providers={providers}
+        />
+        <AuthRoute
+          path="/tools/sums/:sums_version"
           render={() => <SumsRxSwin />}
           type={TYPES.PROTECTED}
           token={token}
@@ -347,7 +361,7 @@ const SiteRoutes = () => {
           providers={providers}
         />
         <AuthRoute
-          path="/sums-rxswin-add/:sums_version"
+          path="/tools/sums-rxswin-add/:sums_version"
           render={() => <SumsRxSwinAdd />}
           type={TYPES.PROTECTED}
           token={token}

src/components/SUMS/Add/index.jsx

@@ -30,9 +30,17 @@ const MainForm = () => {
   useEffect(() => {
     setTitle(`Add RXSWIN to SUMS Version ${sums_version}`);
     setSitePath([
+      {
+        label: "Tools",
+        link: "/tools/sumsversions",
+      },
+      {
+        label: "SUMS Versions",
+        link: "/tools/sumsversions",
+      },
       {
         label: `SUMS Version ${sums_version}`,
-        link: `/sums/${sums_version}`,
+        link: `/tools/sums/${sums_version}`,
       },
       {
         label: `Add RXSWIN`,
@@ -62,7 +70,7 @@ const MainForm = () => {
       if (!result || result.error) return;
 
       setMessage(`Added ${rxswin}`);
-      setRedirect(`/sums/${sums_version}`);
+      setRedirect(`/tools/sums/${sums_version}`);
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);

src/components/SUMS/Add/index.test.jsx

@@ -18,8 +18,8 @@ const renderSUMSAdd = async () => {
     <CarUpdatesProvider>
       <StatusProvider>
         <UserProvider>
-          <MemoryRouter initialEntries={["/sums/add-rxswin/2023.03.00.00.E"]}>
+          <MemoryRouter initialEntries={["/tools/sums-rxswin-add/2023.03.00.00.E"]}>
-            <Route path="/sums/add-rxswin/:sums_version">
+            <Route path="/tools/sums-rxswin-add/:sums_version">
               <MainForm sums_version="2023.03.00.00.E" />
             </Route>
           </MemoryRouter>

src/components/SUMS/List/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,175 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SUMSList Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-carupdatesprovider"
+  >
+    <div
+      data-testid="mocked-statusprovider"
+    >
+      <div
+        data-testid="mocked-userprovider"
+      >
+        <div
+          data-testid="mocked-carupdatesprovider"
+        >
+          <div>
+            <div
+              class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
+            >
+              <div
+                class="MuiGrid-root makeStyles-textJustifyAlign-0 makeStyles-actionsBar-0 MuiGrid-item MuiGrid-grid-md-4"
+              >
+                <a
+                  class="makeStyles-labelInline-0"
+                  href="/tools/sums/new"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+                    />
+                  </svg>
+                </a>
+              </div>
+            </div>
+            <table
+              class="MuiTable-root"
+            >
+              <thead
+                class="MuiTableHead-root"
+              >
+                <tr
+                  class="MuiTableRow-root MuiTableRow-head"
+                >
+                  <th
+                    aria-sort="descending"
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root MuiTableSortLabel-active"
+                      role="button"
+                      tabindex="0"
+                    >
+                      SUMS Version
+                      <span
+                        class="makeStyles-hiddenSortSpan-0"
+                      >
+                        sorted descending
+                      </span>
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionDesc"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      role="button"
+                      tabindex="0"
+                    >
+                      OS Version
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      role="button"
+                      tabindex="0"
+                    >
+                      Created
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      role="button"
+                      tabindex="0"
+                    >
+                      Delete
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root"
+              />
+              <tfoot
+                class="MuiTableFooter-root"
+              >
+                <tr
+                  class="MuiTableRow-root MuiTableRow-footer"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-footer MuiTableCell-alignCenter"
+                    colspan="8"
+                  >
+                    No SUMS Versions
+                  </td>
+                </tr>
+              </tfoot>
+            </table>
+            <div />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/SUMS/List/index.jsx

@@ -0,0 +1,243 @@
+import {
+  Grid,
+  IconButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TablePagination,
+  TableRow,
+} from "@material-ui/core";
+import AddCircleIcon from "@material-ui/icons/AddCircle";
+import DeleteIcon from "@material-ui/icons/Delete";
+import { LocalDateTimeString } from "../../../utils/dates";
+import clsx from "clsx";
+import { Link } from "react-router-dom";
+import { logger } from "../../../services/monitoring";
+import React, { useEffect, useState } from "react";
+import { useCarUpdatesContext, CarUpdatesProvider } from "../../Contexts/CarUpdatesContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import TableHeaderSortable from "../../Table/HeaderSortable";
+import { useLocalStorage } from "../../useLocalStorage";
+import DeleteConfirmation from "../../DeleteConfirmation";
+import useStyles from "../../useStyles";
+import { Permissions } from "../../../utils/roles";
+import { RoleWrap } from "../../Controls/RoleWrap";
+
+const tableColumns = [
+  {
+    id: "version",
+    label: "SUMS Version",
+  },
+  {
+    id: "os_version",
+    label: "OS Version",
+  },
+  {
+    id: "created_at",
+    label: "Created",
+  },
+  {
+    id: "delete",
+    label: "Delete",
+  },
+];
+
+const PAGE_SIZE = "SUMS_VERSIONS_TABLE_PAGE_SIZE";
+
+const MainForm = () => {
+  const classes = useStyles();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
+  const [orderBy, setOrderBy] = useState("version");
+  const [order, setOrder] = useState("desc");
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [rowToDelete, setRowToDelete] = useState({});
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
+  const [pageIndex, setPageIndex] = useState(0);
+  const {
+    getSUMSVersionsList,
+    deleteSUMSVersion,
+    versions,
+    totalVersions,
+    stopMonitor,
+  } = useCarUpdatesContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+    groups,
+    providers,
+  } = useUserContext();
+
+  useEffect(() => {
+    setTitle("SUMS Versions");
+    setSitePath([
+      {
+        label: "Tools",
+        link: "/tools/sumsversions",
+      },
+      {
+        label: "SUMS Versions",
+      },
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    loadSUMSVersions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token, pageIndex, pageSize, orderBy, order]);
+
+  const loadSUMSVersions = async () => {
+    try {
+      if (!token) return;
+      stopMonitor();
+      await getSUMSVersionsList(
+        {
+          limit: pageSize,
+          offset: pageSize * pageIndex,
+          order: `${orderBy} ${order}`,
+        },
+        token
+      );
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  const handleChangePageIndex = (event, newIndex) => {
+    setPageIndex(newIndex);
+  };
+
+  const handleChangePageSize = (event) => {
+    setPageSize(parseInt(event.target.value, 10));
+    setPageIndex(0);
+  };
+
+  const handleSort = (event, property) => {
+    try {
+      if (property === orderBy) {
+        if (order === "asc") {
+          setOrder("desc");
+        } else {
+          setOrder("asc");
+        }
+      } else {
+        setOrderBy(property);
+        setOrder("asc");
+      }
+    } catch (e) {
+      logger.warn(e.stack);
+    }
+  };
+
+  const onDeleteClick = (row) => {
+    setRowToDelete(row);
+    setShowDeleteModal(true);
+  }
+
+  const sendDelete = async () => {
+    if (rowToDelete) {
+      try {
+        const result = await deleteSUMSVersion(rowToDelete.version, token);
+        if (!result || result.error) return;
+
+        setMessage(`Deleted ${rowToDelete.version}`);
+        loadSUMSVersions();
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    }
+  };
+
+  return (
+    <div>
+      <Grid container className={classes.root} spacing={2}>
+        <Grid item md={4} className={clsx(classes.textJustifyAlign, classes.actionsBar)}>
+          <Link to={`/tools/sums/new`} className={classes.labelInline}>
+            <AddCircleIcon fontSize="large" />
+          </Link>
+        </Grid>
+      </Grid>
+      <Table>
+        <TableHeaderSortable
+          classes={classes}
+          orderBy={orderBy}
+          order={order}
+          columnData={tableColumns}
+          onSortRequest={handleSort}
+        />
+        <TableBody>
+          {versions && versions.map((row, index) => (
+            <TableRow key={row.version + row.os_version}>
+              <TableCell align="center">
+                <Link to={`/tools/sums/${row.version}`}>
+                  {row.version}
+                </Link>
+              </TableCell>
+              <TableCell align="center">
+                {row.os_version}
+              </TableCell>
+              <TableCell align="center">
+                {LocalDateTimeString(row.created)}
+              </TableCell>
+              <TableCell>
+                <RoleWrap
+                  groups={groups}
+                  providers={providers}
+                  rolesPerProvider={Permissions.FiskerMagnaDelete}
+                >
+                  <IconButton
+                    onClick={() => onDeleteClick(row)}
+                    aria-label={`Send delete for ${row.version}`}
+                    size="small"
+                    color="primary"
+                  >
+                    <DeleteIcon aria-label={`Delete ${row.version}`} />
+                  </IconButton>
+                </RoleWrap>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            {!versions || versions.length === 0 ? (
+              <TableCell colSpan={8} align="center">No SUMS Versions</TableCell>
+            ) : (
+              <TablePagination
+                rowsPerPageOptions={[5, 10, 25, 100]}
+                colSpan={4}
+                count={totalVersions}
+                rowsPerPage={pageSize}
+                page={pageIndex}
+                SelectProps={{
+                  inputProps: { "aria-label": "rows per page" },
+                  native: true,
+                }}
+                onPageChange={handleChangePageIndex}
+                onRowsPerPageChange={handleChangePageSize}
+              />)}
+          </TableRow>
+        </TableFooter>
+      </Table>
+      <DeleteConfirmation
+        message={rowToDelete && rowToDelete.version ? rowToDelete.version : ""}
+        open={showDeleteModal}
+        close={() => setShowDeleteModal(false)}
+        deleteFunction={sendDelete}
+      />
+    </div>
+  );
+};
+
+const SUMS = () => (
+  <CarUpdatesProvider>
+    <MainForm />
+  </CarUpdatesProvider>
+);
+
+export default SUMS;

src/components/SUMS/List/index.test.jsx

@@ -0,0 +1,46 @@
+jest.mock("../../Contexts/CarUpdatesContext");
+jest.mock("../../Contexts/StatusContext");
+jest.mock("../../Contexts/UserContext");
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
+);
+import { render, waitFor } from "@testing-library/react";
+import { MemoryRouter, Route } from "react-router-dom";
+import { CarUpdatesProvider } from "../../Contexts/CarUpdatesContext";
+import { StatusProvider } from "../../Contexts/StatusContext";
+import { UserProvider, setToken } from "../../Contexts/UserContext";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../utils/snapshot";
+
+const renderSUMSList = async () => {
+  const { container } = render(
+    <CarUpdatesProvider>
+      <StatusProvider>
+        <UserProvider>
+          <MemoryRouter initialEntries={["/tools/sums"]}>
+            <Route path="/tools/sums">
+              <MainForm />
+            </Route>
+          </MemoryRouter>
+        </UserProvider>
+      </StatusProvider>
+    </CarUpdatesProvider>
+  );
+  await waitFor(() => {
+    /* render */
+  });
+  return container;
+};
+
+describe("SUMSList", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT_FISKER);
+    const container = await renderSUMSList();
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/SUMS/New/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,138 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SUMSNew Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-carupdatesprovider"
+  >
+    <div
+      data-testid="mocked-statusprovider"
+    >
+      <div
+        data-testid="mocked-userprovider"
+      >
+        <div
+          data-testid="mocked-carupdatesprovider"
+        >
+          <div
+            class="makeStyles-paper-0"
+          >
+            <form
+              action="{onSubmit}"
+              class="makeStyles-form-0"
+              novalidate=""
+            >
+              <div
+                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                  data-shrink="false"
+                  for="sums_version"
+                  id="sums_version-label"
+                >
+                  SUMS Version
+                  <span
+                    aria-hidden="true"
+                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                  >
+                     
+                    *
+                  </span>
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    id="sums_version"
+                    maxlength="15"
+                    name="sums_version"
+                    required=""
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-0"
+                    >
+                      <span>
+                        SUMS Version
+                         *
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+              <div
+                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                  data-shrink="false"
+                  for="os_version"
+                  id="os_version-label"
+                >
+                  OS Version
+                  <span
+                    aria-hidden="true"
+                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                  >
+                     
+                    *
+                  </span>
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    id="os_version"
+                    maxlength="20"
+                    name="os_version"
+                    required=""
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-0"
+                    >
+                      <span>
+                        OS Version
+                         *
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+              <button
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
+                tabindex="0"
+                type="submit"
+              >
+                <span
+                  class="MuiButton-label"
+                >
+                  Submit
+                </span>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/SUMS/New/index.jsx

@@ -0,0 +1,129 @@
+import {
+  Button,
+  TextField
+} from "@material-ui/core";
+import React, { useEffect, useState } from "react";
+import { Redirect } from "react-router";
+import { logger } from "../../../services/monitoring";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import {
+  CarUpdatesProvider,
+  useCarUpdatesContext
+} from "../../Contexts/CarUpdatesContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import useStyles from "../../useStyles";
+
+const MainForm = () => {
+  const { addSUMSVersion, busy } = useCarUpdatesContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const classes = useStyles();
+  const [redirect, setRedirect] = useState(null);
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
+  const [sumsVersion, setSumsVersion] = useState("");
+  const [osVersion, setOsVersion] = useState("");
+
+  useEffect(() => {
+    setTitle(`New SUMS Version`);
+    setSitePath([
+      {
+        label: "Tools",
+        link: "/tools/sumsversions",
+      },
+      {
+        label: "SUMS Versions",
+        link: "/tools/sumsversions",
+      },
+      {
+        label: `New SUMS Version`,
+      },
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onSUMSVersionChange = (event) => {
+    setSumsVersion(event.target.value);
+  }
+
+  const onOSVersionChange = (event) => {
+    setOsVersion(event.target.value);
+  }
+
+  const onSubmit = async (event) => {
+    try {
+      event.preventDefault();
+
+      const result = await addSUMSVersion(sumsVersion, osVersion, token);
+      if (!result || result.error) return;
+
+      setMessage(`Added ${sumsVersion}`);
+      setRedirect(`/tools/sumsversions`);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  if (redirect && redirect.length > 0) {
+    return <Redirect to={redirect} />;
+  }
+
+  return (
+    <div className={classes.paper}>
+      <form className={classes.form} noValidate action="{onSubmit}">
+        <TextField
+          id="sums_version"
+          name="sums_version"
+          label="SUMS Version"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "15",
+          }}
+          required
+          fullWidth
+          value={sumsVersion}
+          onChange={onSUMSVersionChange}
+          type="text"
+        />
+        <TextField
+          id="os_version"
+          name="os_version"
+          label="OS Version"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "20",
+          }}
+          required
+          fullWidth
+          value={osVersion}
+          onChange={onOSVersionChange}
+          type="text"
+        />
+        <Button
+          type="submit"
+          disabled={busy}
+          fullWidth
+          variant="contained"
+          color="primary"
+          className={classes.submit}
+          onClick={onSubmit}
+        >
+          {busy ? "Submitting..." : "Submit"}
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+const SumsNew = () => (
+  <CarUpdatesProvider>
+    <MainForm />
+  </CarUpdatesProvider>
+);
+
+export default SumsNew;

src/components/SUMS/New/index.test.jsx

@@ -0,0 +1,46 @@
+jest.mock("../../Contexts/CarUpdatesContext");
+jest.mock("../../Contexts/StatusContext");
+jest.mock("../../Contexts/UserContext");
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
+);
+import { render, waitFor } from "@testing-library/react";
+import { MemoryRouter, Route } from "react-router-dom";
+import { CarUpdatesProvider } from "../../Contexts/CarUpdatesContext";
+import { StatusProvider } from "../../Contexts/StatusContext";
+import { UserProvider, setToken } from "../../Contexts/UserContext";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
+import MainForm from "./index";
+import addSnapshotSerializer from "../../../utils/snapshot";
+
+const renderSUMSNew = async () => {
+  const { container } = render(
+    <CarUpdatesProvider>
+      <StatusProvider>
+        <UserProvider>
+          <MemoryRouter initialEntries={["/tools/sums/new"]}>
+            <Route path="/tools/sums/new">
+              <MainForm />
+            </Route>
+          </MemoryRouter>
+        </UserProvider>
+      </StatusProvider>
+    </CarUpdatesProvider>
+  );
+  await waitFor(() => {
+    /* render */
+  });
+  return container;
+};
+
+describe("SUMSNew", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT_FISKER);
+    const container = await renderSUMSNew();
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/SUMS/__snapshots__/index.test.jsx.snap

@@ -23,7 +23,7 @@ exports[`SUMS Render 1`] = `
               >
                 <a
                   class="makeStyles-labelInline-0"
-                  href="/sums-rxswin-add/2023.03.00.00.E"
+                  href="/tools/sums-rxswin-add/2023.03.00.00.E"
                 >
                   <svg
                     aria-hidden="true"
@@ -99,6 +99,29 @@ exports[`SUMS Render 1`] = `
                       </svg>
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      role="button"
+                      tabindex="0"
+                    >
+                      Delete
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </th>
                 </tr>
               </thead>
               <tbody

src/components/SUMS/index.jsx

@@ -38,6 +38,10 @@ const tableColumns = [
     id: "created_at",
     label: "Created",
   },
+  {
+    id: "delete",
+    label: "Delete",
+  },
 ];
 
 const PAGE_SIZE = "SUMS_RXSWIN_TABLE_PAGE_SIZE";
@@ -70,9 +74,16 @@ const MainForm = () => {
   useEffect(() => {
     setTitle(`SUMS Version ${sums_version}`);
     setSitePath([
+      {
+        label: "Tools",
+        link: "/tools/sumsversions",
+      },
+      {
+        label: "SUMS Versions",
+        link: "/tools/sumsversions",
+      },
       {
         label: `SUMS Version ${sums_version}`,
-        link: `/sums/${sums_version}`,
       },
     ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -152,7 +163,7 @@ const MainForm = () => {
     <div>
       <Grid container className={classes.root} spacing={2}>
         <Grid item md={4} className={clsx(classes.textJustifyAlign, classes.actionsBar)}>
-          <Link to={`/sums-rxswin-add/${sums_version}`} className={classes.labelInline}>
+          <Link to={`/tools/sums-rxswin-add/${sums_version}`} className={classes.labelInline}>
             <AddCircleIcon fontSize="large" />
           </Link>
         </Grid>

src/components/SUMS/index.test.jsx

@@ -18,8 +18,8 @@ const renderSUMS = async () => {
     <CarUpdatesProvider>
       <StatusProvider>
         <UserProvider>
-          <MemoryRouter initialEntries={["/sums/2023.03.00.00.E"]}>
+          <MemoryRouter initialEntries={["/tools/sums/2023.03.00.00.E"]}>
-            <Route path="/sums/:sums_version">
+            <Route path="/tools/sums/:sums_version">
               <MainForm sums_version="2023.03.00.00.E" />
             </Route>
           </MemoryRouter>

src/services/updatesAPI.js

@@ -99,8 +99,8 @@ const updatesAPI = {
       .catch(errorHandler);
   },
 
-  getSUMSVersions: async (token) => {
+  getSUMSVersions: async (options, token) => {
-    return fetch(`${API_ENDPOINT}/manifest/sums`, {
+    return fetch(addQueryParams(`${API_ENDPOINT}/manifest/sums`, options), {
       method: "GET",
       headers: Object.assign(
         { "Content-Type": "application/json" },
@@ -111,6 +111,31 @@ const updatesAPI = {
       .catch(errorHandler);
   },
 
+  addSUMSVersion: async (data, token) => {
+    return fetch(`${API_ENDPOINT}/manifest/sums`, {
+      method: "POST",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+      body: JSON.stringify(data),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler);
+  },
+
+  deleteSUMSVersion: async (version, token) => {
+    return fetch(`${API_ENDPOINT}/manifest/sums/${version}`, {
+      method: "DELETE",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler);
+  },
+
   updateSUMSVersion: async (id, version, token) => {
     return fetch(`${API_ENDPOINT}/manifests/${id}/sums`, {
       method: "PUT",