Implement a way to overwrite record configs

Bug: 202010519
Change-Id: I8d7c69edbe4e5850aea0095fb4b30336e1aa513a

3 files changed, 36 insertions, 2 deletions

diff --git a/ui/src/assets/record.scss b/ui/src/assets/record.scss
index 599786d0e..6160fd52c 100644
--- a/ui/src/assets/record.scss
+++ b/ui/src/assets/record.scss
@@ -329,7 +329,9 @@
     }
 
     &.save {
-      width: 160px;
+      &.long {
+        width: 160px;
+      }
 
       &:enabled {
         background-color: hsl(197, 50%, 67%);
diff --git a/ui/src/frontend/record_config.ts b/ui/src/frontend/record_config.ts
index e81d23936..0f7f45556 100644
--- a/ui/src/frontend/record_config.ts
+++ b/ui/src/frontend/record_config.ts
@@ -66,6 +66,22 @@ export class RecordConfigStore {
         LOCAL_STORAGE_RECORD_CONFIGS_KEY, JSON.stringify(this.recordConfigs));
   }
 
+  overwrite(recordConfig: RecordConfig, key: string) {
+    // We reload from local storage in case of concurrent
+    // modifications of local storage from a different tab.
+    this.reloadFromLocalStorage();
+
+    const found = this.recordConfigs.find((e) => e.key === key);
+    if (found === undefined) {
+      throw new Error('trying to overwrite non-existing config');
+    }
+
+    found.config = recordConfig;
+
+    window.localStorage.setItem(
+        LOCAL_STORAGE_RECORD_CONFIGS_KEY, JSON.stringify(this.recordConfigs));
+  }
+
   delete(key: string): void {
     // We reload from local storage in case of concurrent
     // modifications of local storage from a different tab.
diff --git a/ui/src/frontend/record_page.ts b/ui/src/frontend/record_page.ts
index ba8962ac1..b863180a7 100644
--- a/ui/src/frontend/record_page.ts
+++ b/ui/src/frontend/record_page.ts
@@ -918,6 +918,22 @@ function displayRecordConfigs() {
       loadConfigButton(item.config, {type: 'NAMED', name: item.title}),
       m('button',
         {
+          class: 'config-button save',
+          onclick: () => {
+            if (confirm(`Overwrite config "${
+                    item.title}" with current settings?`)) {
+              recordConfigStore.overwrite(globals.state.recordConfig, item.key);
+              globals.dispatch(Actions.setRecordConfig({
+                config: item.config,
+                configType: {type: 'NAMED', name: item.title}
+              }));
+              globals.rafScheduler.scheduleFullRedraw();
+            }
+          }
+        },
+        'save'),
+      m('button',
+        {
           class: 'config-button delete',
           onclick: () => {
             recordConfigStore.delete(item.key);
@@ -960,7 +976,7 @@ function Configurations(cssClass: string) {
           }),
           m('button',
             {
-              class: 'config-button save',
+              class: 'config-button save long',
               disabled: !canSave,
               title: canSave ? '' : 'Duplicate name, saving disabled',
               onclick: () => {