Release/3.16.0 (#156)

* 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

* Feature/news release notes (#155)

* splitting out news into separate posts.

* creating release notes component to render github release notes.

* adding fallback option if release has trouble loading. lets user visit github link instead.

* updating tag for cadence-web

* 3.16.0-beta.9

Author: just-at-uber

.gitignore

@@ -2,6 +2,7 @@ node_modules/
 npm-debug.log
 dist/
 .vscode
+.DS_Store
 .idea
 package-lock.json
 server/idl

client/App.vue

@@ -1,7 +1,7 @@
 <script>
 import { version } from '../package.json';
 import logo from './assets/logo.svg';
-import { FeatureFlag, NotificationBar } from '~components';
+import { FeatureFlag, NewsModal, NotificationBar } from '~components';
 import {
   ENVIRONMENT_LIST,
   NOTIFICATION_TIMEOUT,
@@ -11,11 +11,13 @@ import {
   getEnvironment,
   getEnvironmentList,
   getEnvironmentLocation,
+  getLatestNewsItems,
 } from '~helpers';
 
 export default {
   components: {
     'feature-flag': FeatureFlag,
+    'news-modal': NewsModal,
     'notification-bar': NotificationBar,
   },
   data() {
@@ -33,6 +35,8 @@ export default {
           origin,
         }),
       },
+      newsLastUpdated: localStorage.getItem('news-last-viewed-at'),
+      newsItems: [],
       logo,
       notification: {
         message: '',
@@ -45,10 +49,23 @@ export default {
   beforeDestroy() {
     clearTimeout(this.notification.timeout);
   },
+  async mounted() {
+    await this.fetchLatestNewsItems();
+
+    if (this.newsItems.length) {
+      this.$modal.show('news-modal');
+    }
+  },
   methods: {
+    async fetchLatestNewsItems() {
+      const { newsLastUpdated } = this;
+      const response = await this.$http('/feed.json');
+
+      this.newsItems = getLatestNewsItems({ newsLastUpdated, response });
+    },
     globalClick(e) {
       // Code required for mocha tests to run correctly without infinite looping.
-      if (e.target.tagName === 'A') {
+      if (window.mocha !== undefined && e.target.tagName === 'A') {
         const href = e.target.getAttribute('href');
 
         if (
@@ -76,6 +93,12 @@ export default {
         search,
       });
     },
+    onNewsDismiss() {
+      localStorage.setItem(
+        'news-last-viewed-at',
+        this.newsItems[0].date_modified
+      );
+    },
     onNotification({ message, type = NOTIFICATION_TYPE_SUCCESS }) {
       this.notification.message = message;
       this.notification.type = type;
@@ -151,6 +174,7 @@ export default {
     <router-view @onNotification="onNotification"></router-view>
     <modals-container />
     <v-dialog />
+    <news-modal :news-items="newsItems" @before-close="onNewsDismiss" />
   </main>
 </template>
 

client/components/button-fill.vue

@@ -1,9 +1,16 @@
 <template>
   <component
+    :aria-disabled="disabled"
     class="button-fill"
+    :class="{
+      disabled: disabled,
+      [color]: color,
+    }"
+    :disabled="disabled"
     :href="href"
     :is="tag"
     :to="to"
+    :title="disabledLabelText"
     @click="onClick"
   >
     {{ label }}
@@ -14,6 +21,16 @@
 export default {
   name: 'button-fill',
   props: {
+    color: {
+      type: String,
+      default: 'primary',
+    },
+    disabled: {
+      type: Boolean,
+    },
+    disabledLabel: {
+      type: String
+    },
     href: {
       type: String,
     },
@@ -28,23 +45,52 @@ export default {
       type: Object,
     },
   },
+  computed: {
+    disabledLabelText() {
+      return this.disabled ? this.disabledLabel : '';
+    }
+  },
   methods: {
     onClick(...args) {
-      this.$emit('click', ...args);
+      if (!this.disabled) {
+        this.$emit('click', ...args);
+      }
     },
   },
 };
 </script>
 
 <style lang="stylus">
 .button-fill {
+  border: none;
   cursor: pointer;
   display: inline-block;
+  font-size: 14px;
+  font-weight: 600;
   padding: 13px 21px;
   transition: all 400ms ease;
-  font-weight: 600;
   color: #fff !important;
-  background-color: #11939a;
   white-space: nowrap;
 }
+
+.button-fill.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.button-fill.primary {
+  background-color: #11939a;
+
+  &:hover {
+    background-color: #0e767b;
+  }
+}
+
+.button-fill.secondary {
+  background-color: #ca3b27;
+
+  &:hover {
+    background-color: #a22f1f;
+  }
+}
 </style>

client/components/button-icon.vue

@@ -0,0 +1,63 @@
+<template>
+  <component
+    class="button-icon"
+    :href="href"
+    :is="tag"
+    :to="to"
+    @click="onClick"
+  >
+    <span class="icon" :class="icon" :style="{ 'font-size': size }" />
+    {{ label }}
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'button-icon',
+  props: {
+    href: {
+      type: String,
+    },
+    icon: {
+      type: String,
+    },
+    label: {
+      type: String,
+    },
+    size: {
+      type: String,
+      default: '14px',
+    },
+    tag: {
+      type: String,
+      default: 'button',
+    },
+    to: {
+      type: Object,
+    },
+  },
+  methods: {
+    onClick(...args) {
+      this.$emit('click', ...args);
+    },
+  },
+};
+</script>
+
+<style lang="stylus">
+.button-icon {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 600;
+  line-height: 41px;
+  min-width: 44px;
+  transition: all 400ms ease;
+  white-space: nowrap;
+
+  .icon {
+    vertical-align: middle;
+  }
+}
+</style>

client/components/feature-flag.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="feature-flag" v-if="isFeatureFlagEnabled">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { isFeatureFlagEnabled } from '~helpers';
+
+export default {
+  name: 'feature-flag',
+  props: ['name'],
+  computed: {
+    isFeatureFlagEnabled() {
+      const { name } = this;
+
+      return isFeatureFlagEnabled(name);
+    },
+  },
+};
+</script>

client/components/feature-flag/index.vue

@@ -1,9 +1,21 @@
 <template>
-  <div class="flex-grid">
+  <div
+    class="flex-grid"
+    :style="{
+      'align-items': alignItems,
+      'justify-content': justifyContent,
+    }"
+  >
     <slot></slot>
   </div>
 </template>
 
+<script>
+export default {
+  props: ['alignItems', 'justifyContent'],
+};
+</script>
+
 <style lang="stylus">
 .flex-grid {
   display: flex;

client/components/flex-grid.vue

@@ -1,5 +1,6 @@
 export { default as BarLoader } from './bar-loader';
 export { default as ButtonFill } from './button-fill';
+export { default as ButtonIcon } from './button-icon';
 export { default as Copy } from './copy';
 export { default as DataViewer } from './data-viewer';
 export { default as DetailList } from './detail-list';
@@ -13,6 +14,7 @@ export { default as LoadingMessage } from './loading-message';
 export { default as LoadingSpinner } from './loading-spinner';
 export { default as NavigationBar } from './navigation-bar';
 export { default as NavigationLink } from './navigation-link';
+export { default as NewsModal } from './news-modal';
 export { default as NoResults } from './no-results';
 export { default as NotificationBar } from './notification-bar';
 export { default as TextInput } from './text-input';