Refactor data-viewer to rely on css not js, improve UX

client/components/data-viewer.vue

@@ -1,64 +1,38 @@
 <template>
   <div class="data-viewer">
-    <a
-      href="#"
-      class="view-full-screen"
-      @click.stop.prevent="viewFullScreen"
-    ></a>
-    <prism language="json" ref="codebox">{{ preview }}</prism>
+    <prism language="json" ref="codebox" class="code" :style="maxLinesStl">{{
+      fullview
+    }}</prism>
+    <a href="#" class="view-full-screen" @click.stop.prevent="viewFullScreen">
+    </a>
   </div>
 </template>
 
 <script>
 import 'prismjs';
 import 'prismjs/components/prism-json';
 import Prism from 'vue-prism-component';
-import getStringElipsis from '~helpers/get-string-elipsis';
 
 export default {
   name: 'data-viewer',
-  props: ['compact', 'highlight', 'item', 'title'],
+  props: {
+    item: [Object, Array, String, Number],
+    title: String,
+    maxLines: { type: Number, default: 3 },
+  },
   data() {
     return {};
   },
-  created() {
-    this.checkOverflow = () => {
-      const el = this.$refs.codebox;
-
-      if (!el) {
-        return;
-      }
-
-      const hasMoreJson = this.fullview.length > this.preview.length;
-
-      const overflowed =
-        el.scrollWidth > el.offsetWidth + 2 ||
-        el.scrollHeight > el.offsetHeight + 2;
-
-      const action = hasMoreJson || overflowed ? 'add' : 'remove';
-
-      this.$el.classList[action]('overflow');
-    };
-    window.addEventListener('resize', this.checkOverflow);
-    ['item', 'highlight', 'compact'].forEach((e) =>
-      this.$watch(e, this.checkOverflow)
-    );
-    this.$watch(() => this.$route, this.checkOverflow);
-  },
-  mounted() {
-    this.checkOverflow();
-  },
   computed: {
     fullview() {
       return this.item ? JSON.stringify(this.item, null, 2) : '';
     },
-    preview() {
-      return this.item ? getStringElipsis(this.fullview) : '';
+    maxLinesStl() {
+      return {
+        'max-height': `${0.8 + this.maxLines}rem`,
+      };
     },
   },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.checkOverflow);
-  },
   methods: {
     viewFullScreen() {
       this.$modal.show(
@@ -97,7 +71,13 @@ export default {
 
 .data-viewer
   position relative
-  &:not(.overflow) a.view-full-screen
+  display flex
+  max-width: 40vw;
+  .code
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+  &:not(:hover) a.view-full-screen
     display none
   a.view-full-screen
     position absolute

client/components/detail-list.vue

@@ -4,7 +4,7 @@ import { preKeys } from '~constants';
 
 export default {
   name: 'detail-list',
-  props: ['compact', 'highlight', 'item', 'title'],
+  props: ['item', 'title'],
   components: {
     'data-viewer': DataViewer,
   },
@@ -17,7 +17,7 @@ export default {
     },
   },
   render(h) {
-    const { highlight, compact, title } = this;
+    const { title } = this;
 
     function dd(kvp) {
       if (kvp.routeLink) {
@@ -29,9 +29,8 @@ export default {
             h('data-viewer', {
               props: {
                 item: kvp.value,
-                compact,
-                highlight,
                 title: `${title} - ${kvp.key}`,
+                maxLines: 3,
               },
             }),
           ]
@@ -41,7 +40,7 @@ export default {
     return h(
       'dl',
       { class: 'details' },
-      this.item.kvps.map(kvp =>
+      this.item.kvps.map((kvp) =>
         h('div', { attrs: { 'data-prop': kvp.key } }, [
           h('dt', null, kvp.key),
           h('dd', null, dd(kvp)),

client/constants.js

@@ -24,10 +24,6 @@ export const ENVIRONMENT_LIST = [
   // },
 ];
 
-export const MAXIMUM_JSON_CHARACTER_LIMIT = 100;
-export const MAXIMUM_JSON_MESSAGE =
-  '\n * to see more open full screen mode from top right arrow.';
-
 export const NOTIFICATION_TYPE_ERROR = 'error';
 export const NOTIFICATION_TYPE_ERROR_MESSAGE_DEFAULT =
   'An unexpected error has occurred. Please try again. If problems persist contact temporal-support.';

client/helpers/index.js

@@ -5,7 +5,6 @@ export { default as getEnvironmentLocation } from './get-environment-location';
 export { default as getErrorMessage } from './get-error-message';
 export { default as getKeyValuePairs } from './get-key-value-pairs';
 export { default as getStartTimeIsoString } from './get-start-time-iso-string';
-export { default as getStringElipsis } from './get-string-elipsis';
 export { default as http } from './http';
 export { default as injectMomentDurationFormat } from './inject-moment-duration-format';
 export { default as jsonTryParse } from './json-try-parse';

client/routes/workflow/history.vue

@@ -166,7 +166,6 @@
                             : item.eventFullDetails
                         "
                         :compact="compactDetails && !item.expanded"
-                        :highlight="events.length < 100"
                       />
                     </div>
                   </div>

client/routes/workflow/summary.vue

@@ -73,7 +73,11 @@
       <div class="workflow-result" v-if="resultView" data-cy="workflow-result">
         <dt>Result</dt>
         <dd>
-          <data-viewer :item="resultView" :title="workflowId + ' Result'" />
+          <data-viewer
+            :item="resultView"
+            :title="workflowId + ' Result'"
+            :maxLines="10"
+          />
         </dd>
       </div>
       <div class="workflow-id" data-cy="workflow-id">
@@ -122,6 +126,7 @@
             v-if="input !== undefined"
             :item="input"
             :title="workflowId + ' Input'"
+            :maxLines="10"
           />
         </dd>
       </div>