feat(JBU-51): allow multiple snapshots to be stored simultaneously

Author: davidsl4

userscript/src/components/background-actions/actions/AutoBackupBigJunctionBeforeDelete.tsx

@@ -26,7 +26,7 @@ export function AutoBackupBigJunctionBeforeDelete() {
 
   const backupBigJunction = (bigJunction: BigJunctionDataModel) => {
     const backup = BigJunctionBackup.fromBigJunction(bigJunction);
-    BigJunctionBackupTemplate.backup = backup;
+    BigJunctionBackupTemplate.storeBackup(backup);
     Logger.info('Big Junction snapshot has been created and saved');
   };
 
@@ -37,22 +37,22 @@ export function AutoBackupBigJunctionBeforeDelete() {
 
       Logger.info('Automatic big junction backup script running...');
 
-      const storedSnapshot = BigJunctionBackupTemplate.backup;
-      const snapshotSignatureMatch =
-        storedSnapshot &&
-        storedSnapshot.getOriginalBigJunction()?.getAttribute('id') ===
-          action.bigJunction.getAttribute('id');
+      const snapshotSignatureMatch = BigJunctionBackupTemplate.backups.some(
+        (snapshot) =>
+          snapshot.getOriginalBigJunction()?.getAttribute('id') ===
+          action.bigJunction.getAttribute('id'),
+      );
 
-      if (!storedSnapshot) {
-        Logger.info('Has no snapshot stored, backing up...');
+      if (BigJunctionBackupTemplate.canStoreMoreBackups()) {
+        Logger.info('Has free snapshot slot, backing up...');
         gtag('event', 'auto_backup', { event_category: 'big_junction_backup' });
         backupBigJunction(action.bigJunction);
         addAction(action);
       } else if (snapshotSignatureMatch) {
         Logger.info('Big Junction and Snapshot signatures matches, skipping');
         addAction(action);
       } else {
-        Logger.info('Asking the user to override the snapshot');
+        Logger.info('Asking the user to override the oldest snapshot');
         new Promise<void>((resolve, reject) => {
           setConfirmBalloonCallback({
             attributes: { bigJunction: action.bigJunction },
@@ -105,10 +105,10 @@ export function AutoBackupBigJunctionBeforeDelete() {
       disableDontShowAgainCheckbox
       mapEntity={confirmBalloonCallback.attributes.bigJunction}
       title={t(
-        'jb_utils.big_junction.backup_restore.confirm_overwrite_backup.title',
+        'jb_utils.big_junction.backup_restore.confirm_overwrite_backup.title_oldest',
       )}
       details={t(
-        'jb_utils.big_junction.backup_restore.confirm_overwrite_backup.details',
+        'jb_utils.big_junction.backup_restore.confirm_overwrite_backup.details_oldest',
       )}
       confirmButtonText={t(
         'jb_utils.big_junction.backup_restore.confirm_overwrite_backup.backup_btn',

userscript/src/components/edit-panel/big-junction-backup/components/EnrollBackupButton.tsx

@@ -11,7 +11,7 @@ import { gtag } from '@/google-analytics';
 
 export function EnrollBackupButton() {
   const buttonRef = useRef<HTMLButtonElement>();
-  const { isBackupAvailable, setBackup } = useBackupContext();
+  const { canStoreMoreBackups, setBackup } = useBackupContext();
   const [bigJunction] = useSelectedDataModelsContext<BigJunctionDataModel>();
   const [showOverrideConfirmation, setShowOverrideConfirmation] =
     useState(false);
@@ -26,7 +26,7 @@ export function EnrollBackupButton() {
   const handleButtonClick: MouseEventHandler<HTMLButtonElement> = (e) => {
     e.currentTarget.blur();
     gtag('event', 'backup_clicked', { event_category: 'big_junction_backup' });
-    if (isBackupAvailable) {
+    if (!canStoreMoreBackups()) {
       setShowOverrideConfirmation(true);
       return;
     }
@@ -50,10 +50,10 @@ export function EnrollBackupButton() {
           alarming
           disableDontShowAgainCheckbox
           title={t(
-            'jb_utils.big_junction.backup_restore.confirm_overwrite_backup.title',
+            'jb_utils.big_junction.backup_restore.confirm_overwrite_backup.title_oldest',
           )}
           details={t(
-            'jb_utils.big_junction.backup_restore.confirm_overwrite_backup.details',
+            'jb_utils.big_junction.backup_restore.confirm_overwrite_backup.details_oldest',
           )}
           onConfirmClick={() => {
             backupBigJunction();

userscript/src/components/edit-panel/big-junction-backup/contexts/BackupContext.tsx

@@ -1,9 +1,11 @@
+import { BigJunctionBackupTemplate } from '@/components/edit-panel/big-junction-backup';
 import { ReactNode, createContext, useState } from 'react';
 import { BigJunctionBackup } from '../models';
 import { createMandatoryUseContext } from '@/utils';
 
 interface BackupContextPayload {
   readonly isBackupAvailable: boolean;
+  canStoreMoreBackups(): boolean;
   backup: BigJunctionBackup;
   setBackup(newBackup: BigJunctionBackup): void;
 }
@@ -25,6 +27,9 @@ export function BackupContextProvider({
     <BackupContext.Provider
       value={{
         isBackupAvailable: !!backup,
+        canStoreMoreBackups() {
+          return BigJunctionBackupTemplate.canStoreMoreBackups();
+        },
         get backup() {
           return backup;
         },

userscript/src/components/edit-panel/big-junction-backup/template.tsx

@@ -1,4 +1,6 @@
 import { WazeMapEditorEntityType } from '@/@waze/Waze/consts';
+import { BigJunctionDataModel } from '@/@waze/Waze/DataModels/BigJunctionDataModel';
+import { compareJunctionToBackup } from '@/components/edit-panel/big-junction-backup/utils';
 import { EditPanelTemplate } from '@/components/edit-panel/edit-panel-template';
 import { ReactNode } from 'react';
 import { BackupContextProvider, RestoreContextProvider } from './contexts';
@@ -12,10 +14,14 @@ import { backupNotRestoredSaveLock } from './backup-not-restored-save-lock';
 import { UnverifiedTurnsListView } from './components/UnverifiedTurnsListView';
 
 export const BigJunctionBackupTemplate = class implements EditPanelTemplate {
-  static backup: BigJunctionBackup = null;
+  static backups: BigJunctionBackup[] = [];
+  static MAX_BACKUPS = 10;
 
-  constructor() {
+  subjectBigJunction: BigJunctionDataModel;
+
+  constructor(bigJunctions: BigJunctionDataModel[]) {
     backupNotRestoredSaveLock.set();
+    this.subjectBigJunction = bigJunctions[0];
   }
 
   static getSupportedElementTypes(): WazeMapEditorEntityType[] {
@@ -26,16 +32,35 @@ export const BigJunctionBackupTemplate = class implements EditPanelTemplate {
     return true;
   }
 
+  static canStoreMoreBackups() {
+    return this.backups.length < this.MAX_BACKUPS;
+  }
+
+  static storeBackup(backup: BigJunctionBackup) {
+    if (!this.canStoreMoreBackups()) this.backups.shift();
+    this.backups.push(backup);
+  }
+
+  static getBackupForBigJunction(
+    bigJunction: BigJunctionDataModel,
+  ): BigJunctionBackup {
+    return this.backups.findLast((backup) =>
+      compareJunctionToBackup(bigJunction, backup),
+    );
+  }
+
   getTargetElement(): HTMLElement {
     return document.createElement('div');
   }
 
   render(): ReactNode {
     return (
       <BackupContextProvider
-        initialBackup={BigJunctionBackupTemplate.backup}
+        initialBackup={BigJunctionBackupTemplate.getBackupForBigJunction(
+          this.subjectBigJunction,
+        )}
         onBackupChanged={(backup) =>
-          (BigJunctionBackupTemplate.backup = backup)
+          BigJunctionBackupTemplate.storeBackup(backup)
         }
       >
         <RestoreContextProvider>

userscript/src/resources/localization/userscript.json

@@ -63,7 +63,9 @@
         },
         "confirm_overwrite_backup": {
           "title": "Override backup?",
+          "title_oldest": "Override oldest backup?",
           "details": "You're about to override a Junction Box backup. This action is irreversible",
+          "details_oldest": "You're about to override the oldest Junction Box backup. This action is irreversible",
           "backup_btn": "Yes",
           "ignore_btn": "No"
         },