Feature/utc time (#158)

* Feature/news (#149)

* adding vuepress for blog

* customising blog

* reformatting blog posts. getting RSS working which will be used for modal.

* got build somewhat working. now to think about how we integrate with existing app

* got news working within the app.

* changing blog theme version to lower version because of javascript error. Finally got iframe loading consistently.

* adding in error handling

* adding build script from top project level to install and compile news. Adding in some styling for news. Removing unnecessary meta data on posts.

* working out behavior of news modal and close logic. Need to display news items in modal.

* adding news modal - disabled. fixed issue with url not updating with iframe navigation.

* simplifying get location

* simplifying code

* fixing bug where child gets out of sync with parent navigation.

* refactor duplicated code

* adding dismiss button to modal. adding links to headers of articles.

* adding more style options for grid. styling up news modal.

* adding new component for button icon. more styling for news modal

* final styling finished for news modal.

* fixing grammar mistake

* fixing news tab bug

* fixed sort order on feed. latest first, oldest last. got dismiss working which will take latest news item date and store in local storage.

* removing date conversion as its not required.

* Refactoring to help with readability of code.

* lint fixes

* deleting unused files. small refactor with pallette variables

* fixing failing tests

* 3.16.0-beta.0

* fixing bug with news navigation. lint changes

* 3.16.0-beta.1

* hiding header anchor links

* 3.16.0-beta.2

* changing dev deps to deps

* 3.16.0-beta.3

* adding tests for getLatestNewsItems

* small refactoring

* adding tests for news helpers

* eslint fixes

* removing dummy posts

* PR comments

* fixing link to now navigate to news page irrelevant on the current route you are on. (#151)

* Feature/auth (#152)

* moving request defaults to see if it gets auth working server side.

* 3.16.0-beta.4

* domain authorization (#154)

* adding domain authorization feature.

* 3.16.0-beta.5

* adding documentation for how to use and calling next to hook in middleware

* 3.16.0-beta.6

* fix bug passing domain name to server. updated docs for overriding route.

* 3.16.0-beta.7

* Simplifying code. Hiding button on unauthorized instead of disabling button.

* small refactor

* small refactor

* removing unused code

* updating tests. fixing warnings.

* switching buttons in modal to use button-fill components.

* fixing tests

* 3.16.0-beta.8

* starting work on UTC settings modal

* updating flex grid with more props. getting settings button ready.

* got settings modal working

* adding dateFormat to settings options. Adding example textbox to display an example of the datetime format changing when options change. starting to wireup workflow history and archival screens.

* wiring up timezone

* wiring up workflow list screen with date format for start time and end time. tweaked settings modal to fit all 3 dropdowns on one line.

* updated archival screen to support datetime format settings

* adding support to summary and task list screens.

* removing moment reference

* got history working with datetime formatting setting

* updating selected event timestamp to use format. Updated stacktrace to use format.

* fixing unit tests

* fixing tests

* lint fixes

* adding unit tests for getDatetimeFormattedString

* fixing lint

* removing old blog post no longer needed.

* PR comments

client/App.vue

@@ -1,11 +1,27 @@
 <script>
 import { version } from '../package.json';
 import logo from './assets/logo.svg';
-import { FeatureFlag, NewsModal, NotificationBar } from '~components';
 import {
+  ButtonIcon,
+  FeatureFlag,
+  FlexGrid,
+  FlexGridItem,
+  NewsModal,
+  NotificationBar,
+  SettingsModal,
+} from '~components';
+import {
+  DATE_FORMAT_MMM_D_YYYY,
+  DATE_FORMAT_OPTIONS,
   ENVIRONMENT_LIST,
+  LOCAL_STORAGE_NEWS_LAST_VIEWED_AT,
+  LOCAL_STORAGE_SETTINGS,
   NOTIFICATION_TIMEOUT,
   NOTIFICATION_TYPE_SUCCESS,
+  TIME_FORMAT_12,
+  TIME_FORMAT_OPTIONS,
+  TIMEZONE_LOCAL,
+  TIMEZONE_OPTIONS,
 } from '~constants';
 import {
   getEnvironment,
@@ -16,9 +32,13 @@ import {
 
 export default {
   components: {
+    'button-icon': ButtonIcon,
     'feature-flag': FeatureFlag,
+    'flex-grid': FlexGrid,
+    'flex-grid-item': FlexGridItem,
     'news-modal': NewsModal,
     'notification-bar': NotificationBar,
+    'settings-modal': SettingsModal,
   },
   data() {
     const { origin } = window.location;
@@ -35,7 +55,7 @@ export default {
           origin,
         }),
       },
-      newsLastUpdated: localStorage.getItem('news-last-viewed-at'),
+      newsLastUpdated: localStorage.getItem(LOCAL_STORAGE_NEWS_LAST_VIEWED_AT),
       newsItems: [],
       logo,
       notification: {
@@ -44,6 +64,20 @@ export default {
         type: '',
         timeout: undefined,
       },
+      settings: {
+        dateFormat:
+          localStorage.getItem(LOCAL_STORAGE_SETTINGS.dateFormat) ||
+          DATE_FORMAT_MMM_D_YYYY,
+        dateFormatOptions: DATE_FORMAT_OPTIONS,
+        timeFormat:
+          localStorage.getItem(LOCAL_STORAGE_SETTINGS.timeFormat) ||
+          TIME_FORMAT_12,
+        timeFormatOptions: TIME_FORMAT_OPTIONS,
+        timezone:
+          localStorage.getItem(LOCAL_STORAGE_SETTINGS.timezone) ||
+          TIMEZONE_LOCAL,
+        timezoneOptions: TIMEZONE_OPTIONS,
+      },
     };
   },
   beforeDestroy() {
@@ -95,7 +129,7 @@ export default {
     },
     onNewsDismiss() {
       localStorage.setItem(
-        'news-last-viewed-at',
+        LOCAL_STORAGE_NEWS_LAST_VIEWED_AT,
         this.newsItems[0].date_modified
       );
     },
@@ -107,6 +141,17 @@ export default {
     onNotificationClose() {
       this.notification.show = false;
     },
+    onSettingsChange(values) {
+      for (const key in values) {
+        const value = values[key];
+
+        localStorage.setItem(LOCAL_STORAGE_SETTINGS[key], value);
+        this.settings[key] = value;
+      }
+    },
+    onSettingsClick() {
+      this.$modal.show('settings-modal');
+    },
   },
   watch: {
     'notification.show'(value) {
@@ -137,44 +182,77 @@ export default {
       :type="notification.type"
     />
     <header class="top-bar">
-      <a href="/domains" class="logo">
-        <div v-html="logo"></div>
-        <span class="version">{{ version }}</span>
-      </a>
+      <flex-grid align-items="center" width="100%">
+        <flex-grid-item>
+          <a href="/domains" class="logo">
+            <div v-html="logo"></div>
+            <span class="version">{{ version }}</span>
+          </a>
+        </flex-grid-item>
 
-      <feature-flag name="environment-select">
-        <v-select
-          class="environment-select"
-          :on-change="onEnvironmentSelectChange"
-          :options="environment.list"
-          :searchable="false"
-          :value="environment.value"
-        />
-      </feature-flag>
+        <feature-flag name="environment-select">
+          <flex-grid-item>
+            <v-select
+              class="environment-select"
+              :on-change="onEnvironmentSelectChange"
+              :options="environment.list"
+              :searchable="false"
+              :value="environment.value"
+            />
+          </flex-grid-item>
+        </feature-flag>
 
-      <div class="domain" v-if="$route.params.domain">
-        <a
-          class="workflows"
-          :class="{
-            'router-link-active':
-              $route.path === `/domains/${$route.params.domain}/workflows`,
-          }"
-          :href="`/domains/${$route.params.domain}/workflows`"
-        >
-          {{ $route.params.domain }}
-        </a>
-      </div>
-      <div class="detail-view workflow-id" v-if="$route.params.workflowId">
-        <span>{{ $route.params.workflowId }}</span>
-      </div>
-      <div class="detail-view task-list" v-if="$route.params.taskList">
-        <span>{{ $route.params.taskList }}</span>
-      </div>
+        <flex-grid-item v-if="$route.params.domain" margin="15px">
+          <a
+            class="workflows"
+            :class="{
+              'router-link-active':
+                $route.path === `/domains/${$route.params.domain}/workflows`,
+            }"
+            :href="`/domains/${$route.params.domain}/workflows`"
+          >
+            {{ $route.params.domain }}
+          </a>
+        </flex-grid-item>
+
+        <flex-grid-item v-if="$route.params.workflowId">
+          <span>{{ $route.params.workflowId }}</span>
+        </flex-grid-item>
+
+        <flex-grid-item v-if="$route.params.taskList">
+          <span>{{ $route.params.taskList }}</span>
+        </flex-grid-item>
+
+        <flex-grid-item grow="1">
+          <button-icon
+            color="primary"
+            icon="icon_settings"
+            label="SETTINGS"
+            size="30px"
+            style="float: right"
+            @click="onSettingsClick"
+          />
+        </flex-grid-item>
+      </flex-grid>
     </header>
-    <router-view @onNotification="onNotification"></router-view>
+    <router-view
+      :date-format="settings.dateFormat"
+      :time-format="settings.timeFormat"
+      :timezone="settings.timezone"
+      @onNotification="onNotification"
+    ></router-view>
     <modals-container />
     <v-dialog />
     <news-modal :news-items="newsItems" @before-close="onNewsDismiss" />
+    <settings-modal
+      :date-format="settings.dateFormat"
+      :date-format-options="settings.dateFormatOptions"
+      :time-format="settings.timeFormat"
+      :time-format-options="settings.timeFormatOptions"
+      :timezone="settings.timezone"
+      :timezone-options="settings.timezoneOptions"
+      @onChange="onSettingsChange"
+    />
   </main>
 </template>
 
@@ -224,32 +302,7 @@ header.top-bar
   spacing = 1.3em
   nav-label-color = uber-white-40
   nav-label-font-size = 11px
-  & > div
-    margin-right spacing
-  div.domain
-    flex 0 0 auto
-    &::before
-      content 'DOMAIN'
-      font-size nav-label-font-size
-      font-weight normal
-      vertical-align middle
-      color nav-label-color
-      margin-right spacing
-    a:hover
-      color lighten(uber-blue, 15%)
-    .router-link-active
-      pointer-events none
-    span
-      cursor pointer
-      transition smooth-transition
-      color uber-blue
-    & + div
-      icon('\ea5b')
-      one-liner-ellipsis()
-      &::before
-        display inline-block
-        transform scale(1.5)
-        margin-right spacing
+
   .detail-view span::before
     font-size nav-label-font-size
     color nav-label-color

client/components/button-fill.vue

@@ -24,6 +24,8 @@ export default {
     color: {
       type: String,
       default: 'primary',
+      validator: value =>
+        ['primary', 'secondary', 'tertiary'].includes(value),
     },
     disabled: {
       type: Boolean,
@@ -71,26 +73,35 @@ export default {
   transition: all 400ms ease;
   color: #fff !important;
   white-space: nowrap;
-}
 
-.button-fill.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 
-.button-fill.primary {
-  background-color: #11939a;
+  &.primary {
+    background-color: #11939a;
 
-  &:hover {
-    background-color: #0e767b;
+    &:hover {
+      background-color: #0e767b;
+    }
+  }
+
+  &.secondary {
+    background-color: #ca3b27;
+
+    &:hover {
+      background-color: #a22f1f;
+    }
   }
-}
 
-.button-fill.secondary {
-  background-color: #ca3b27;
+  &.tertiary {
+    background-color: transparent;
+    color: #11939a !important;
 
-  &:hover {
-    background-color: #a22f1f;
+    &:hover {
+      color: #0e767b  !important;
+    }
   }
 }
 </style>

client/components/button-icon.vue

@@ -6,15 +6,23 @@
     :to="to"
     @click="onClick"
   >
-    <span class="icon" :class="icon" :style="{ 'font-size': size }" />
-    {{ label }}
+    <span
+      class="icon"
+      :class="{ [icon]: icon, [color]: color }"
+      :style="{ 'font-size': size }"
+    />
+    <span class="label" :class="{ [color]: color }">{{ label }}</span>
   </component>
 </template>
 
 <script>
 export default {
   name: 'button-icon',
   props: {
+    color: {
+      type: String,
+      validator: value => ['primary', 'secondary'].includes(value),
+    },
     href: {
       type: String,
     },
@@ -50,14 +58,26 @@ export default {
   border: none;
   cursor: pointer;
   display: inline-block;
-  font-weight: 600;
-  line-height: 41px;
+  font-weight: 500;
   min-width: 44px;
+  padding: 10px;
   transition: all 400ms ease;
   white-space: nowrap;
 
   .icon {
     vertical-align: middle;
   }
+
+  .label {
+    margin-left: 5px;
+  }
+
+  .primary {
+    color: #11939a;
+  }
+
+  .secondary {
+    color: #ca3b27;
+  }
 }
 </style>

client/components/flex-grid-item.vue

@@ -1,19 +1,21 @@
 <template>
-  <div class="flex-grid-item" :style="{ maxWidth: width }">
+  <div
+    class="flex-grid-item"
+    :style="{ flexGrow: grow, marginRight: margin, maxWidth: width }"
+  >
     <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
   name: 'flex-grid-item',
-  props: ['width'],
+  props: ['grow', 'margin', 'width'],
 };
 </script>
 
 <style lang="stylus">
 .flex-grid-item {
-  flex-grow: 1;
   margin-right: 5px;
   &:last-child {
     margin-right: 0;

client/components/flex-grid.vue

@@ -4,6 +4,7 @@
     :style="{
       'align-items': alignItems,
       'justify-content': justifyContent,
+      width: width,
     }"
   >
     <slot></slot>
@@ -12,7 +13,7 @@
 
 <script>
 export default {
-  props: ['alignItems', 'justifyContent'],
+  props: ['alignItems', 'justifyContent', 'width'],
 };
 </script>