Feature/workflows refactoring (#112)

* refactoring workflow list screen

* fixing spinner

* removing settings cog and workflows from breadcrumb

* eslint and small refactor for criteria

* fixing tests

* 3.14.0-beta.0

Author: just-at-uber

client/App.vue

@@ -93,17 +93,6 @@ export default {
         >
           {{ $route.params.domain }}
         </a>
-        <a
-          class="config"
-          :class="{
-            'router-link-active':
-              $route.path === `/domains/${$route.params.domain}/config`,
-          }"
-          :href="`/domains/${$route.params.domain}/config`"
-        ></a>
-      </div>
-      <div v-if="$route.name === 'workflow-list'">
-        Workflows
       </div>
       <div class="detail-view workflow-id" v-if="$route.params.workflowId">
         <span>{{ $route.params.workflowId }}</span>
@@ -238,7 +227,7 @@ area-loader, section.loading
     height size
     border-radius size
     left "calc(50% - %s)" % (size/2)
-    top "calc(25% - %s)" % (size/2)
+    top 300px;
     border 3px solid uber-blue
     border-bottom-color transparent
     animation spin 800ms linear infinite

client/components/date-range-picker/index.vue

@@ -282,7 +282,7 @@ sidebarWidth = sidebarColumnShortcutsWidth + sidebarColumnCustomRangeWidth;
     cursor: pointer;
     height: auto;
     margin: 0;
-    padding: 8px 30px 8px 10px;
+    padding: 9px 30px 9px 10px;
     width: 325px;
   }
 

client/main.js

@@ -13,17 +13,19 @@ import copyButton from './components/copy.vue';
 import snapscroll from './directives/snapscroll';
 
 import App from './App.vue';
-import Root from './routes/index.vue';
-import Help from './routes/help/index.vue';
+import Domain from './routes/domain/index.vue';
 import DomainList from './routes/domain-list.vue';
-import WorkflowList from './routes/domain/workflow-list.vue';
-import DomainConfig from './routes/domain/domain-config.vue';
-import WorkflowTabs from './routes/workflow/index.vue';
-import WorkflowSummary from './routes/workflow/summary.vue';
+import DomainSettings from './routes/domain/domain-settings.vue';
+import Help from './routes/help/index.vue';
 import History from './routes/workflow/history.vue';
-import StackTrace from './routes/workflow/stack-trace.vue';
 import Query from './routes/workflow/query.vue';
+import Root from './routes/index.vue';
+import StackTrace from './routes/workflow/stack-trace.vue';
 import TaskList from './routes/domain/task-list.vue';
+import WorkflowList from './routes/domain/workflow-list.vue';
+import WorkflowSummary from './routes/workflow/summary.vue';
+import WorkflowTabs from './routes/workflow/index.vue';
+
 import { http, injectMomentDurationFormat, jsonTryParse } from '~helpers';
 
 const routeOpts = {
@@ -51,22 +53,28 @@ const routeOpts = {
       ],
     },
     {
-      name: 'domains-redirect',
-      path: '/domain/*',
-      redirect: '/domains/*',
-    },
-    {
-      name: 'workflow-list',
-      path: '/domains/:domain/workflows',
-      component: WorkflowList,
-    },
-    {
-      name: 'domain-config',
-      path: '/domains/:domain/config',
-      component: DomainConfig,
+      name: 'domain',
+      path: '/domains/:domain',
+      component: Domain,
       props: ({ params }) => ({
         domain: params.domain,
       }),
+      children: [
+        {
+          name: 'workflow-list',
+          path: '/domains/:domain/workflows',
+          components: {
+            'workflow-list': WorkflowList,
+          },
+        },
+        {
+          name: 'domain-settings',
+          path: '/domains/:domain/settings',
+          components: {
+            'domain-settings': DomainSettings,
+          },
+        },
+      ],
     },
     {
       name: 'workflow',
@@ -129,6 +137,19 @@ const routeOpts = {
       path: '/domains/:domain/task-lists/:taskList',
       component: TaskList,
     },
+
+    // redirects
+
+    {
+      name: 'domains-redirect',
+      path: '/domain/*',
+      redirect: '/domains/*',
+    },
+    {
+      name: 'domain-config-redirect',
+      path: '/domains/:domain/config',
+      redirect: '/domains/:domain/settings',
+    },
     {
       path: '/domains/:domain/history',
       redirect: ({ params, query }) => {

client/routes/domain/domain-config.vue renamed to client/routes/domain/domain-settings.vue

@@ -1,5 +1,5 @@
 <template>
-  <section :class="{ 'domain-config domain-description': true, loading }">
+  <section class="domain-settings domain-description" :class="{ loading }">
     <header>
       <h3>{{ domain }}</h3>
     </header>
@@ -52,7 +52,7 @@ export default {
 <style lang="stylus">
 @require "../../styles/definitions.styl"
 
-section.domain-config
+section.domain-settings
   .foobar
     display none
 </style>

client/routes/domain/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <section>
+    <navigation-bar>
+      <navigation-link
+        icon="icon_search"
+        label="Workflows"
+        :to="{ name: 'workflow-list' }"
+      />
+      <navigation-link
+        label="Settings"
+        icon="icon_settings"
+        :to="{ name: 'domain-settings' }"
+      />
+    </navigation-bar>
+    <router-view name="workflow-list" :domain="domain" />
+    <router-view name="domain-settings" :domain="domain" />
+  </section>
+</template>
+
+<script>
+import { NavigationBar, NavigationLink } from '~components';
+
+export default {
+  props: ['domain'],
+  components: {
+    'navigation-bar': NavigationBar,
+    'navigation-link': NavigationLink,
+  },
+};
+</script>
+
+<style lang="stylus"></style>