Adds a confirmation dialog for deleting repertoires.

src/client/css/constants.css

@@ -7,6 +7,7 @@
   --blue-hover-bg: rgba(56, 147, 232, 0.4);
   --blue-selected-bg: rgb(56, 147, 232);
   --modal-gray-bg: #2b2b2b;
+  --delete-red-bg: #bd3b31;
 
   --dark-gray-box-shadow: 0 0 4px #dfdfdf inset;
   --very-dark-gray-border: solid 1px rgb(50, 50, 50);

src/client/css/main.css

@@ -177,6 +177,23 @@ div, img {
   vertical-align: top;
 }
 
+#pickerConfirmDeleteDialog {
+  max-width: 300px;
+}
+
+#pickerConfirmDeleteDialog > #pickerConfirmDeleteMessage {
+  margin-bottom: 10px;
+}
+
+#pickerConfirmDeleteDialog > #pickerConfirmDeleteOk {
+  background-color: var(--delete-red-bg);
+  opacity: 0.9;
+}
+
+#pickerConfirmDeleteDialog > #pickerConfirmDeleteOk:hover {
+  opacity: 1;
+}
+
 /** Study mode */
 
 #studyMode {

src/client/js/main.ts

@@ -86,7 +86,7 @@ class Main {
       assert(document.getElementById('treeButtonExport')),
       assert(document.getElementById('soundToggler'))
     ]);
-    PickerFeature.install(pickerController);
+    PickerFeature.install(flags, pickerController);
 
     FooterLinks.logImpressionsForClicks(
         impressionSender,

src/client/js/picker/confirmdeletedialog.ts

@@ -0,0 +1,45 @@
+import { PickerController } from './pickercontroller';
+
+export class ConfirmDeleteDialog {
+  private pickerController_: PickerController;
+  private dialogEl_: HTMLElement;
+  private dialogMessageEl_: HTMLElement;
+  private okButton_: HTMLElement;
+
+  constructor(
+      pickerController: PickerController,
+      dialogEl: HTMLElement,
+      dialogMessageEl: HTMLElement,
+      okButton: HTMLElement,
+      cancelButton: HTMLElement) {
+    this.pickerController_ = pickerController;
+    this.dialogEl_ = dialogEl;
+    this.dialogMessageEl_ = dialogMessageEl;
+    this.okButton_ = okButton;
+
+    cancelButton.onclick = () => this.onCancelClick_();
+  }
+
+  isVisible(): boolean {
+    return !this.dialogEl_.classList.contains('hidden');
+  }
+
+  showForRepertoire(
+      repertoireId: string,
+      repertoireName: string): void {
+    this.dialogMessageEl_.innerText =
+        `Are you sure you want to delete '${repertoireName}'?`;
+    this.dialogEl_.classList.remove('hidden');
+
+    this.okButton_.onclick = () => this.onOkClick_(repertoireId);
+  }
+
+  private onOkClick_(repertoireId: string): void {
+    this.pickerController_.deleteMetadataId(repertoireId)
+        .then(() => this.dialogEl_.classList.add('hidden'));
+  }
+
+  private onCancelClick_(): void {
+    this.dialogEl_.classList.add('hidden');
+  }
+}

src/client/js/picker/pickerfeature.ts

@@ -1,18 +1,31 @@
+import { EvaluatedFlags } from '../../../protocol/evaluatedflags';
+import { assert } from '../../../util/assert';
+import { ConfirmDeleteDialog } from './confirmdeletedialog';
 import { PickerController } from './pickercontroller';
 import { PickerModel } from './pickermodel';
 import { PickerView } from './pickerview';
 
 export class PickerFeature {
-  static install(controller: PickerController): void {
-    const pickerElement = document.getElementById('picker');
-    const addMetadataElement = document.getElementById('addMetadata');
-    if (!pickerElement || !addMetadataElement) {
-      throw new Error('Couldn\'t find necessary DOM elements for picker.');
-    }
+  static install(
+      flags: EvaluatedFlags,
+      controller: PickerController): void {
+    const pickerElement = assert(document.getElementById('picker'));
+    const addMetadataElement = assert(document.getElementById('addMetadata'));
+    const confirmDeleteDialog = new ConfirmDeleteDialog(
+        controller,
+        assert(document.getElementById('pickerConfirmDeleteDialog')),
+        assert(document.getElementById('pickerConfirmDeleteMessage')),
+        assert(document.getElementById('pickerConfirmDeleteOk')),
+        assert(document.getElementById('pickerConfirmDeleteCancel')));
 
     const model = new PickerModel();
     const view = new PickerView(
-        model, controller, pickerElement, addMetadataElement);
+        flags,
+        model,
+        controller,
+        confirmDeleteDialog,
+        pickerElement,
+        addMetadataElement);
 
     controller.initialize(model, view);
   }

src/client/js/picker/pickerview.ts

@@ -1,4 +1,7 @@
+import { FlagName } from '../../../flag/flags';
+import { EvaluatedFlags } from '../../../protocol/evaluatedflags';
 import { Metadata } from '../../../protocol/storage';
+import { ConfirmDeleteDialog } from './confirmdeletedialog';
 import { PickerController } from './pickercontroller';
 import { PickerModel } from './pickermodel';
 
@@ -12,18 +15,24 @@ enum CssClasses {
 }
 
 export class PickerView {
+  private flags_: EvaluatedFlags;
   private pickerModel_: PickerModel;
   private pickerController_: PickerController;
+  private confirmDeleteDialog_: ConfirmDeleteDialog;
   private pickerElement_: HTMLElement;
   private addMetadataElement_: HTMLElement;
 
   constructor(
+      flags: EvaluatedFlags,
       pickerModel: PickerModel,
       pickerController: PickerController,
+      confirmDeleteDialog: ConfirmDeleteDialog,
       pickerElement: HTMLElement,
       addMetadataElement: HTMLElement) {
+    this.flags_ = flags;
     this.pickerModel_ = pickerModel;
     this.pickerController_ = pickerController;
+    this.confirmDeleteDialog_ = confirmDeleteDialog;
     this.pickerElement_ = pickerElement;
     this.addMetadataElement_ = addMetadataElement;
 
@@ -68,7 +77,8 @@ export class PickerView {
     label.innerText = metadata.name;
 
     const deleteButton = document.createElement('div');
-    deleteButton.onclick = (e) => this.handleDeleteButton_(e, metadata.id);
+    deleteButton.onclick = (e) => this.handleDeleteButton_(
+        e, metadata.id, metadata.name);
 
     deleteButton.classList.add(
         CssClasses.HOVER_BUTTON, CssClasses.DELETE_BUTTON);
@@ -80,8 +90,14 @@ export class PickerView {
     return newElement;
   }
 
-  private handleDeleteButton_(e: MouseEvent, metadataId: string): void {
-    this.pickerController_.deleteMetadataId(metadataId);
+  private handleDeleteButton_(
+      e: MouseEvent, metadataId: string, metadataName: string): void {
+    if (!this.flags_[FlagName.ENABLE_PICKER_DELETE_CONFIRM]) {
+      this.pickerController_.deleteMetadataId(metadataId);
+    } else {
+      this.confirmDeleteDialog_.showForRepertoire(metadataId, metadataName);
+    }
+
     // The click should not propagate to the parent metadata element since doing
     // so would cause the repertoire being deleted to also be loaded.
     e.stopPropagation();

src/client/main.html

@@ -88,6 +88,11 @@
         <span>Add a new repertoire</span>
       </div>
     </div>
+    <div id="pickerConfirmDeleteDialog" class="hidden modal">
+      <div id="pickerConfirmDeleteMessage"></div>
+      <div id="pickerConfirmDeleteOk" class="selectable modalButton">Delete</div>
+      <div id="pickerConfirmDeleteCancel" class="selectable modalButton">Cancel</div>
+    </div>
     <div id="footer">
       <a id="aboutPageLink" href="/about" target="_blank">About</a>
       •