[Overlay] add suppression option to overlay dialog

Author: johnriedel

src/api/overlays/Overlay.js

@@ -19,6 +19,8 @@ class Overlay extends EventEmitter {
     element,
     onDestroy,
     onDismiss,
+    showSuppressOption = false,
+    suppressionText = "Don't ask again",
     size
   } = {}) {
     super();
@@ -38,6 +40,8 @@ class Overlay extends EventEmitter {
           dismiss: this.notifyAndDismiss.bind(this),
           element,
           buttons,
+          showSuppressOption,
+          suppressionText,
           dismissible: this.dismissible
         },
         template: '<overlay-component></overlay-component>'

src/api/overlays/components/OverlayComponent.vue

@@ -35,19 +35,27 @@
           class="c-overlay__contents js-notebook-snapshot-item-wrapper"
           tabindex="0"
         ></div>
-        <div v-if="buttons" class="c-overlay__button-bar">
-          <button
-            v-for="(button, index) in buttons"
-            ref="buttons"
-            :key="index"
-            class="c-button js-overlay__button"
-            tabindex="0"
-            :class="{ 'c-button--major': focusIndex === index }"
-            @focus="focusIndex = index"
-            @click="buttonClickHandler(button.callback)"
-          >
-            {{ button.label }}
-          </button>
+        <div v-if="buttons || showSuppressOption" class="c-overlay__footer">
+          <div class="c-overlay__suppress-option">
+            <div v-if="showSuppressOption">
+              <input v-model="suppress" type="checkbox" class="l-composite-control l-checkbox" />
+              <label>{{ suppressionText }}</label>
+            </div>
+          </div>
+          <div v-if="buttons" class="c-overlay__button-bar">
+            <button
+              v-for="(button, index) in buttons"
+              ref="buttons"
+              :key="index"
+              class="c-button js-overlay__button"
+              tabindex="0"
+              :class="{ 'c-button--major': focusIndex === index }"
+              @focus="focusIndex = index"
+              @click="buttonClickHandler(button.callback)"
+            >
+              {{ button.label }}
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -56,11 +64,12 @@
 
 <script>
 export default {
-  inject: ['dismiss', 'element', 'buttons', 'dismissible'],
+  inject: ['dismiss', 'element', 'buttons', 'dismissible', 'showSuppressOption', 'suppressionText'],
   emits: ['destroy'],
   data() {
     return {
-      focusIndex: -1
+      focusIndex: -1,
+      suppress: false
     };
   },
   mounted() {
@@ -78,7 +87,10 @@ export default {
       }
     },
     buttonClickHandler(method) {
-      method();
+      let callbackData = {
+        suppress: this.suppress
+      };
+      method(callbackData);
       this.$emit('destroy');
     },
     getElementForFocus() {

src/api/overlays/components/overlay-component.scss

@@ -101,6 +101,19 @@
     padding-right: $interiorMargin; // fend off scroll bar
   }
 
+  &__footer {
+    margin-top: $interiorMargin;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &__suppress-option {
+    justify-items: start;
+    align-self: center;
+    padding-left: $interiorMargin;
+  }
+
   &__button-bar {
     flex: 0 0 auto;
     display: flex;

src/plugins/plot/MctPlot.vue

@@ -1795,7 +1795,9 @@ export default {
 
     showSynchronizeDialog() {
       const isFixedTimespanMode = this.timeContext.isFixed();
-      if (!isFixedTimespanMode) {
+      const SYNC_TIME_CONDUCTOR_SUPPRESSION_KEY = 'sync-time-conductor-modal-suppression';
+      let isSuppressed = localStorage.getItem(SYNC_TIME_CONDUCTOR_SUPPRESSION_KEY);
+      if (!isFixedTimespanMode && !isSuppressed) {
         const message = `
                 This action will change the Time Conductor to Fixed Timespan mode with this plot view's current time bounds.
                 Do you want to continue?
@@ -1806,12 +1808,16 @@ export default {
           iconClass: 'alert',
           size: 'fit',
           message: message,
+          showSuppressOption: true,
           buttons: [
             {
               label: 'Ok',
-              callback: () => {
+              callback: (data) => {
                 dialog.dismiss();
                 this.synchronizeTimeConductor();
+                if (data && data.suppress) {
+                  localStorage.setItem(SYNC_TIME_CONDUCTOR_SUPPRESSION_KEY, true);
+                }
               }
             },
             {