[Overlay] add suppression option to overlay dialog

nasa · Jan 16, 2025 · baae9c2 · baae9c2
1 parent 5be103e
commit baae9c2
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 19 deletions.
diff --git a/src/api/overlays/Overlay.js b/src/api/overlays/Overlay.js
@@ -19,6 +19,9 @@ class Overlay extends EventEmitter {
     element,
     onDestroy,
     onDismiss,
+    showSuppressOption = false,
+    suppressionKey = null,
+    suppressionText = "Don't ask again",
     size
   } = {}) {
     super();
@@ -29,6 +32,10 @@ class Overlay extends EventEmitter {
     this.autoHide = autoHide;
     this.dismissible = dismissible !== false;
 
+    if (showSuppressOption && !suppressionKey) {
+      throw "A 'suppressionKey' parameter is required when showSuppressOption is set to TRUE in an overlay dialog.";
+    }
+
     const { destroy } = mount(
       {
         components: {
@@ -38,6 +45,9 @@ class Overlay extends EventEmitter {
           dismiss: this.notifyAndDismiss.bind(this),
           element,
           buttons,
+          showSuppressOption,
+          suppressionKey,
+          suppressionText,
           dismissible: this.dismissible
         },
         template: '<overlay-component></overlay-component>'

diff --git a/src/api/overlays/components/OverlayComponent.vue b/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,20 @@
 
 <script>
 export default {
-  inject: ['dismiss', 'element', 'buttons', 'dismissible'],
+  inject: [
+    'dismiss',
+    'element',
+    'buttons',
+    'dismissible',
+    'showSuppressOption',
+    'suppressionKey',
+    'suppressionText'
+  ],
   emits: ['destroy'],
   data() {
     return {
-      focusIndex: -1
+      focusIndex: -1,
+      suppress: false
     };
   },
   mounted() {
@@ -78,6 +95,9 @@ export default {
       }
     },
     buttonClickHandler(method) {
+      if (this.showSuppressOption && this.suppress && this.suppressionKey) {
+        localStorage.setItem(this.suppressionKey, true);
+      }
       method();
       this.$emit('destroy');
     },

diff --git a/src/api/overlays/components/overlay-component.scss b/src/api/overlays/components/overlay-component.scss
@@ -101,11 +101,24 @@
     padding-right: $interiorMargin; // fend off scroll bar
   }
 
+  &__footer {
+    margin-top: $interiorMargin;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &__suppress-option {
+    width: 25%;
+    justify-items: start;
+    align-self: center;
+    padding-left: $interiorMargin;
+  }
+
   &__button-bar {
-    flex: 0 0 auto;
+    width: 75%;
     display: flex;
-    justify-content: flex-end;
-    margin-top: $interiorMargin;
+    justify-content: end;
     body.mobile & {
       justify-content: flex-end;
       padding-right: $interiorMargin;

diff --git a/src/plugins/plot/MctPlot.vue b/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,6 +1808,8 @@ export default {
           iconClass: 'alert',
           size: 'fit',
           message: message,
+          showSuppressOption: true,
+          suppressionKey: SYNC_TIME_CONDUCTOR_SUPPRESSION_KEY,
           buttons: [
             {
               label: 'Ok',