Release/3.19.0 (#181)

* fixing eslint (#175)

* Feature/global component changes (#176)

* component changes for event history highlight

* adding reference to where highlight is used in the code

* changes to move settings-modal into a folder. breaking into smaller reusable components. (#177)

* Adding workflow event type to helpers and add constant type. (#178)

* New helpers which manage workflowHistoryEventHighlightList. (#179)

* Helper changes for highlight toggle (#180)

* Feature/workflow history highlight toggle (#182)

* New helpers which manage workflowHistoryEventHighlightList.

* Helper changes for highlight toggle

* adding highlight-toggle to workflow history

* Feature/workflow history settings modal (#183)

* New helpers which manage workflowHistoryEventHighlightList.

* Helper changes for highlight toggle

* adding highlight-toggle to workflow history

* Add workflow history screen to settings modal

* 3.19.0-beta.0

* fix/spec eslint fixes (#185)

* New helpers which manage workflowHistoryEventHighlightList.

* Helper changes for highlight toggle

* adding highlight-toggle to workflow history

* Add workflow history screen to settings modal

* 3.19.0-beta.0

* fixing eslint on spec files.

* fixing previous dates and adding 3.19.0 release notes (#184)

* 3.19.0-beta.1

* 3.19.0

Author: just-at-uber

client/App.vue

@@ -28,6 +28,8 @@ import {
   getEnvironmentList,
   getEnvironmentLocation,
   getLatestNewsItems,
+  parseStringToBoolean,
+  workflowHistoryEventHighlightListAddOrUpdate,
 } from '~helpers';
 
 export default {
@@ -77,6 +79,18 @@ export default {
           localStorage.getItem(LOCAL_STORAGE_SETTINGS.timezone) ||
           TIMEZONE_LOCAL,
         timezoneOptions: TIMEZONE_OPTIONS,
+        workflowHistoryEventHighlightList:
+          JSON.parse(
+            localStorage.getItem(
+              LOCAL_STORAGE_SETTINGS.workflowHistoryEventHighlightList
+            )
+          ) || [],
+        workflowHistoryEventHighlightListEnabled: parseStringToBoolean(
+          localStorage.getItem(
+            LOCAL_STORAGE_SETTINGS.workflowHistoryEventHighlightListEnabled
+          ),
+          true
+        ),
       },
     };
   },
@@ -144,14 +158,39 @@ export default {
     onSettingsChange(values) {
       for (const key in values) {
         const value = values[key];
+        const storeValue =
+          typeof value === 'object' ? JSON.stringify(value) : value;
+
+        localStorage.setItem(LOCAL_STORAGE_SETTINGS[key], storeValue);
 
-        localStorage.setItem(LOCAL_STORAGE_SETTINGS[key], value);
         this.settings[key] = value;
       }
     },
     onSettingsClick() {
       this.$modal.show('settings-modal');
     },
+    onWorkflowHistoryEventParamToggle({
+      eventParam: { key: eventParamName, isHighlighted },
+      eventType,
+    }) {
+      const {
+        settings: { workflowHistoryEventHighlightList },
+      } = this;
+
+      this.settings.workflowHistoryEventHighlightList = workflowHistoryEventHighlightListAddOrUpdate(
+        {
+          eventParamName,
+          eventType,
+          isEnabled: !isHighlighted,
+          workflowHistoryEventHighlightList,
+        }
+      );
+
+      localStorage.setItem(
+        LOCAL_STORAGE_SETTINGS.workflowHistoryEventHighlightList,
+        JSON.stringify(this.settings.workflowHistoryEventHighlightList)
+      );
+    },
   },
   watch: {
     'notification.show'(value) {
@@ -239,6 +278,13 @@ export default {
       :date-format="settings.dateFormat"
       :time-format="settings.timeFormat"
       :timezone="settings.timezone"
+      :workflow-history-event-highlight-list="
+        settings.workflowHistoryEventHighlightList
+      "
+      :workflow-history-event-highlight-list-enabled="
+        settings.workflowHistoryEventHighlightListEnabled
+      "
+      @onWorkflowHistoryEventParamToggle="onWorkflowHistoryEventParamToggle"
       @onNotification="onNotification"
     ></router-view>
     <modals-container />
@@ -251,7 +297,13 @@ export default {
       :time-format-options="settings.timeFormatOptions"
       :timezone="settings.timezone"
       :timezone-options="settings.timezoneOptions"
-      @onChange="onSettingsChange"
+      :workflow-history-event-highlight-list="
+        settings.workflowHistoryEventHighlightList
+      "
+      :workflow-history-event-highlight-list-enabled="
+        settings.workflowHistoryEventHighlightListEnabled
+      "
+      @change="onSettingsChange"
     />
   </main>
 </template>

client/components/button-icon.vue

@@ -1,6 +1,9 @@
 <template>
   <component
+    :aria-disabled="disabled"
     class="button-icon"
+    :class="{ disabled: disabled }"
+    :disabled="disabled"
     :href="href"
     :is="tag"
     :to="to"
@@ -11,7 +14,9 @@
       :class="{ [icon]: icon, [color]: color }"
       :style="{ 'font-size': size }"
     />
-    <span class="label" :class="{ [color]: color }">{{ label }}</span>
+    <span class="label" :class="{ [color]: color }" v-if="label">{{
+      label
+    }}</span>
   </component>
 </template>
 
@@ -23,6 +28,9 @@ export default {
       type: String,
       validator: value => ['primary', 'secondary'].includes(value),
     },
+    disabled: {
+      type: Boolean,
+    },
     href: {
       type: String,
     },
@@ -46,7 +54,9 @@ export default {
   },
   methods: {
     onClick(...args) {
-      this.$emit('click', ...args);
+      if (!this.disabled) {
+        this.$emit('click', ...args);
+      }
     },
   },
 };
@@ -64,6 +74,11 @@ export default {
   transition: all 400ms ease;
   white-space: nowrap;
 
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
   .icon {
     vertical-align: middle;
   }

client/components/data-viewer.vue

@@ -5,12 +5,7 @@
       class="view-full-screen"
       @click.stop.prevent="viewFullScreen"
     ></a>
-    <prism v-if="highlight !== false" language="json" ref="codebox">{{
-      item.jsonStringDisplay
-    }}</prism>
-    <pre v-if="highlight === false" ref="codebox">{{
-      item.jsonStringDisplay
-    }}</pre>
+    <prism language="json" ref="codebox">{{ item.jsonStringDisplay }}</prism>
   </div>
 </template>
 
@@ -21,7 +16,7 @@ import Prism from 'vue-prism-component';
 
 export default {
   name: 'data-viewer',
-  props: ['compact', 'highlight', 'item', 'title'],
+  props: ['compact', 'item', 'title'],
   data() {
     return {};
   },
@@ -42,9 +37,7 @@ export default {
       this.$el.classList[action]('overflow');
     };
     window.addEventListener('resize', this.checkOverflow);
-    ['item', 'highlight', 'compact'].forEach(e =>
-      this.$watch(e, this.checkOverflow)
-    );
+    ['item', 'compact'].forEach(e => this.$watch(e, this.checkOverflow));
     this.$watch(() => this.$route, this.checkOverflow);
   },
   mounted() {

client/components/detail-list.vue

@@ -1,12 +1,14 @@
 <script>
-import { DataViewer } from '~components';
+import DataViewer from './data-viewer';
+import HighlightToggle from './highlight-toggle';
 import { preKeys } from '~constants';
 
 export default {
   name: 'detail-list',
-  props: ['compact', 'highlight', 'item', 'title'],
+  props: ['compact', 'isHighlightEnabled', 'item', 'title'],
   components: {
     'data-viewer': DataViewer,
+    'highlight-toggle': HighlightToggle,
   },
   data() {
     return {};
@@ -17,7 +19,7 @@ export default {
     },
   },
   render(h) {
-    const { highlight, compact, title } = this;
+    const { compact, title } = this;
 
     function dd(kvp) {
       if (kvp.routeLink) {
@@ -30,7 +32,6 @@ export default {
               props: {
                 item: kvp.value,
                 compact,
-                highlight,
                 title: `${title} - ${kvp.key}`,
               },
             }),
@@ -43,7 +44,19 @@ export default {
       { class: 'details' },
       this.item.kvps.map(kvp =>
         h('div', { attrs: { 'data-prop': kvp.key } }, [
-          h('dt', null, kvp.key),
+          h('highlight-toggle', {
+            props: {
+              isHighlighted: kvp.isHighlighted,
+              isEnabled: this.isHighlightEnabled,
+              label: kvp.key,
+              tag: 'dt',
+            },
+            on: {
+              click: () => {
+                this.$emit('onWorkflowHistoryEventParamToggle', kvp);
+              },
+            },
+          }),
           h('dd', null, dd(kvp)),
         ])
       )

client/components/feature-flag.vue

@@ -24,17 +24,21 @@ export default {
     },
     params: {
       type: Object,
-    }
+    },
   },
   data() {
     return {
       isFeatureFlagEnabled: false,
-    }
+    };
   },
   async mounted() {
     const { name, params } = this;
     const featureFlagService = new FeatureFlagService();
-    this.isFeatureFlagEnabled = await featureFlagService.isFeatureFlagEnabled({ name, params });
+
+    this.isFeatureFlagEnabled = await featureFlagService.isFeatureFlagEnabled({
+      name,
+      params,
+    });
   },
 };
 </script>

client/components/flex-grid.vue

@@ -3,6 +3,7 @@
     class="flex-grid"
     :style="{
       'align-items': alignItems,
+      'flex-direction': flexDirection,
       'justify-content': justifyContent,
       width: width,
     }"
@@ -13,14 +14,27 @@
 
 <script>
 export default {
-  props: ['alignItems', 'justifyContent', 'width'],
+  props: {
+    alignItems: {
+      type: String,
+    },
+    flexDirection: {
+      type: String,
+      default: 'row',
+    },
+    justifyContent: {
+      type: String,
+    },
+    width: {
+      type: String,
+    },
+  },
 };
 </script>
 
 <style lang="stylus">
 .flex-grid {
   display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
 }
 </style>

client/components/highlight-toggle.vue

@@ -0,0 +1,80 @@
+<template>
+  <component class="highlight-toggle" :is="tag">
+    <span class="label" :class="{ highlight: isHighlighted }">
+      {{ label }}
+    </span>
+    <button-icon
+      :class="{
+        active: isHighlighted,
+        disabled: !isEnabled,
+      }"
+      icon="icon_search"
+      @click="onClick"
+    />
+  </component>
+</template>
+
+<script>
+import ButtonIcon from './button-icon';
+
+export default {
+  name: 'highlight-toggle',
+  props: {
+    isHighlighted: {
+      type: Boolean,
+      default: false,
+    },
+    isEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+    },
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+  components: {
+    'button-icon': ButtonIcon,
+  },
+  methods: {
+    onClick(...args) {
+      if (this.isEnabled) {
+        this.$emit('click', ...args);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="stylus">
+.highlight-toggle {
+  line-height: 18px;
+
+  &:hover {
+    .button-icon {
+      display: inline-block;
+    }
+  }
+
+  .button-icon {
+    display: none;
+    min-width: 24px;
+    padding: 0;
+
+    &.active {
+      display: inline-block;
+    }
+
+    &.disabled {
+      display: none !important;
+    }
+  }
+
+  .label.highlight {
+    font-weight: bold;
+  }
+}
+</style>

client/components/index.js

@@ -10,6 +10,7 @@ export { default as ErrorMessage } from './error-message';
 export { default as FeatureFlag } from './feature-flag';
 export { default as FlexGrid } from './flex-grid';
 export { default as FlexGridItem } from './flex-grid-item';
+export { default as HighlightToggle } from './highlight-toggle';
 export { default as LoadingMessage } from './loading-message';
 export { default as LoadingSpinner } from './loading-spinner';
 export { default as NavigationBar } from './navigation-bar';