[Overlay] add suppression option to overlay dialog

Author: johnriedel

e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js

@@ -84,6 +84,58 @@ test.describe('Plot Rendering', () => {
     await expect(page.getByLabel('Time Conductor Mode')).toHaveText('Fixed Timespan');
   });
 
+  test('Time conductor synchronization confirmation dialog can be suppressed', async ({ page }) => {
+    // Navigate to Sine Wave Generator
+    await page.goto(sineWaveGeneratorObject.url);
+    // Switch to real-time mode
+    await setRealTimeMode(page);
+
+    // hover over plot for plot controls
+    await page.getByLabel('Plot Canvas').hover();
+    // click on pause control
+    await page.getByTitle('Pause incoming real-time data').click();
+
+    // expect plot to be paused
+    await expect(page.getByTitle('Resume displaying real-time data')).toBeVisible();
+
+    // hover over plot for plot controls
+    await page.getByLabel('Plot Canvas').hover();
+
+    // click on synchronize with time conductor
+    await page.getByTitle('Synchronize Time Conductor').click();
+
+    await expect(page.locator('.c-message__action-text')).toContainText(
+      'This action will change the Time Conductor to Fixed Timespan mode'
+    );
+
+    await page.getByLabel('Checkbox to Suppress Dialog').click();
+
+    await page.getByRole('button', { name: 'Ok', exact: true }).click();
+
+    //confirm that you're now in fixed mode with the correct range
+    await expect(page.getByLabel('Time Conductor Mode')).toHaveText('Fixed Timespan');
+
+    await page.getByLabel('Zoom in').click();
+
+    await page.getByTitle('Synchronize Time Conductor').click();
+
+    await expect(page.locator('.c-message-banner__message')).toHaveText(
+      'Time conductor bounds have changed.'
+    );
+
+    await expect(page.locator('.c-message__action-text')).toBeHidden();
+
+    const suppressionVal = await page.evaluate(() =>
+      window.localStorage.getItem('sync-time-conductor-modal-suppression')
+    );
+
+    await expect(suppressionVal).toBe('true');
+
+    await page.evaluate(() =>
+      window.localStorage.removeItem('sync-time-conductor-modal-suppression')
+    );
+  });
+
   test('Plot is rendered when infinity values exist', async ({ page }) => {
     // Edit Plot
     await editSineWaveToUseInfinityOption(page, sineWaveGeneratorObject);

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,33 @@
           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
+                id="suppressCheckbox"
+                v-model="suppress"
+                type="checkbox"
+                class="l-composite-control l-checkbox"
+                aria-label="Checkbox to Suppress Dialog"
+              />
+              <label for="suppressCheckbox">{{ suppressionText }}</label>
+            </div>
+          </div>
+          <div v-if="buttons" class="c-overlay__button-bar">
+            <button
+              v-for="(button, buttonIndex) in buttons"
+              ref="buttons"
+              :key="buttonIndex"
+              class="c-button js-overlay__button"
+              tabindex="0"
+              :class="{ 'c-button--major': focusIndex === buttonIndex }"
+              @focus="focusIndex = buttonIndex"
+              @click="buttonClickHandler(button.callback)"
+            >
+              {{ button.label }}
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -56,11 +70,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 +93,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

@@ -1801,7 +1801,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?
@@ -1812,12 +1814,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);
+                }
               }
             },
             {