Feature/notification bar (#86)

* moved widgets to components folder. Added onNotification event to trigger notification bar from any subview.

* added notification event for terminating a workflow. Removed old error handling logic.

* fixing lint

* adding success banner after terminating workflow

* eslint fixes

* adding in error notification to replace old error handling logic in workflow history screen.

* adding retry logic into history page.

* allowing getErrorMessage to recieve default to be overridden

* 3.9.0

Author: just-at-uber

client/App.vue

@@ -1,13 +1,27 @@
 <script>
 import { version } from '../package.json';
 import logo from './assets/logo.svg';
+import NotificationBar from './components/notification-bar.vue';
+import { NOTIFICATION_TIMEOUT, NOTIFICATION_TYPE_SUCCESS } from './constants';
 
 export default {
+  components: {
+    NotificationBar,
+  },
   data() {
     return {
       logo,
+      notification: {
+        message: '',
+        show: false,
+        type: '',
+        timeout: undefined,
+      },
     };
   },
+  beforeDestroy() {
+    clearTimeout(this.notification.timeout);
+  },
   methods: {
     globalClick(e) {
       if (this.editing && !this.$refs.domain.contains(e.target)) {
@@ -29,6 +43,26 @@ export default {
         }
       }
     },
+    onNotification({ message, type = NOTIFICATION_TYPE_SUCCESS }) {
+      this.notification.message = message;
+      this.notification.type = type;
+      this.notification.show = true;
+    },
+    onNotificationClose() {
+      this.notification.show = false;
+    },
+  },
+  watch: {
+    'notification.show'(value) {
+      clearTimeout(this.notification.timeout);
+
+      if (value) {
+        this.notification.timeout = setTimeout(
+          this.onNotificationClose,
+          NOTIFICATION_TIMEOUT
+        );
+      }
+    },
   },
   computed: {
     version() {
@@ -40,6 +74,12 @@ export default {
 
 <template>
   <main @click="globalClick">
+    <NotificationBar
+      :message="notification.message"
+      :onClose="onNotificationClose"
+      :show="notification.show"
+      :type="notification.type"
+    />
     <header class="top-bar">
       <a href="/" class="logo">
         <div v-html="logo"></div>
@@ -74,7 +114,7 @@ export default {
         <span>{{ $route.params.taskList }}</span>
       </div>
     </header>
-    <router-view></router-view>
+    <router-view @onNotification="onNotification"></router-view>
     <modals-container />
     <v-dialog />
   </main>

client/widgets/bar-loader.vue client/components/bar-loader.vueclient/widgets/bar-loader.vue renamed to client/components/bar-loader.vue

@@ -0,0 +1,79 @@
+<template>
+  <transition name="fade">
+    <div class="notification-bar" :class="type" v-if="show">
+      <div class="message">
+        {{ message }}
+      </div>
+      <span class="close icon icon_delete" @click="onClose" />
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'notification-bar',
+  props: [
+    'message',
+    'onClose',
+    'show',
+    'type', // 'error', 'success', 'warning'
+  ],
+};
+</script>
+
+<style scoped lang="stylus">
+UberGreen = #3AA76D;
+UberRed = #D44333;
+UberOrange = #ED6E33;
+DefaultColor = UberGreen;
+
+.close {
+  cursor: pointer;
+  line-height: 60px;
+  padding: 0 13px;
+  position: absolute;
+  right: 6px;
+  top: 0;
+}
+
+.notification-bar {
+  background-color: DefaultColor;
+  color: #fff;
+  font-size: 18px;
+  height: 60px;
+  left: 0;
+  line-height: 60px;
+  overflow: hidden;
+  padding: 0 50px 0 24px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+}
+
+.error {
+  background-color: UberRed;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.25s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+.message {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.success {
+  background-color: UberGreen;
+}
+
+.warning {
+  background-color: UberOrange;
+}
+</style>

client/widgets/copy.vue client/components/copy.vueclient/widgets/copy.vue renamed to client/components/copy.vue

@@ -4,3 +4,10 @@ export const preKeys = jsonKeys.concat(['stackTrace', 'details.stackTrace']);
 export const MAXIMUM_JSON_CHARACTER_LIMIT = 5000;
 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 cadence-support.';
+export const NOTIFICATION_TYPE_SUCCESS = 'success';
+export const NOTIFICATION_TYPE_WARNING = 'warning';
+export const NOTIFICATION_TIMEOUT = 5000;