refactor(ui): moved project nav routes to backend

Author: Guillaume Chau

packages/@vue/cli-ui/src/components/ProjectNav.vue

@@ -12,7 +12,7 @@
           class="flat big icon-button"
           :value="route.name"
           :icon-left="route.icon"
-          v-tooltip.right="renderTooltip(route.tooltip)"
+          v-tooltip.right="$t(route.tooltip)"
         />
       </VueGroup>
     </div>
@@ -22,32 +22,19 @@
 <script>
 import { isSameRoute, isIncludedRoute } from '../util/route'
 
-const BUILTIN_ROUTES = [
-  {
-    name: 'project-plugins',
-    icon: 'widgets',
-    tooltip: 'plugins'
-  },
-  {
-    name: 'project-configurations',
-    icon: 'settings_applications',
-    tooltip: 'configuration'
-  },
-  {
-    name: 'project-tasks',
-    icon: 'assignment',
-    tooltip: 'tasks'
-  }
-]
+import ROUTES from '../graphql/routes.gql'
 
 export default {
   data () {
     return {
-      routes: [
-        ...BUILTIN_ROUTES
-        // Plugins routes here
-        // TODO
-      ]
+      routes: []
+    }
+  },
+
+  apollo: {
+    routes: {
+      query: ROUTES,
+      fetchPolicy: 'cache-and-network'
     }
   },
 
@@ -66,12 +53,6 @@ export default {
         }
       }
     }
-  },
-
-  methods: {
-    renderTooltip (target) {
-      return this.$t(`components.project-nav.tooltips.${target}`)
-    }
   }
 }
 </script>

packages/@vue/cli-ui/src/graphql-api/channels.js

@@ -4,5 +4,8 @@ module.exports = {
   PROGRESS_REMOVED: 'progress_removed',
   CONSOLE_LOG_ADDED: 'console_log_added',
   TASK_CHANGED: 'task_changed',
-  TASK_LOG_ADDED: 'task_log_added'
+  TASK_LOG_ADDED: 'task_log_added',
+  ROUTE_ADDED: 'route_added',
+  ROUTE_REMOVED: 'route_removed',
+  ROUTE_CHANGED: 'route_changed'
 }

packages/@vue/cli-ui/src/graphql-api/connectors/routes.js

@@ -0,0 +1,32 @@
+const BUILTIN_ROUTES = [
+  {
+    id: 'project-plugins',
+    name: 'project-plugins',
+    icon: 'widgets',
+    tooltip: 'components.project-nav.tooltips.plugins'
+  },
+  {
+    id: 'project-configurations',
+    name: 'project-configurations',
+    icon: 'settings_applications',
+    tooltip: 'components.project-nav.tooltips.configuration'
+  },
+  {
+    id: 'project-tasks',
+    name: 'project-tasks',
+    icon: 'assignment',
+    tooltip: 'components.project-nav.tooltips.tasks'
+  }
+]
+
+let routes = [
+  ...BUILTIN_ROUTES
+]
+
+function list (context) {
+  return routes
+}
+
+module.exports = {
+  list
+}

packages/@vue/cli-ui/src/graphql-api/resolvers.js

@@ -14,6 +14,7 @@ const tasks = require('./connectors/tasks')
 const configurations = require('./connectors/configurations')
 const git = require('./connectors/git')
 const files = require('./connectors/files')
+const routes = require('./connectors/routes')
 
 // Prevent code from exiting server process
 exit.exitProcess = false
@@ -61,7 +62,8 @@ module.exports = {
     task: (root, { id }, context) => tasks.findOne(id, context),
     configurations: (root, args, context) => configurations.list(context),
     configuration: (root, { id }, context) => configurations.findOne(id, context),
-    fileDiffs: (root, args, context) => git.getDiffs(context)
+    fileDiffs: (root, args, context) => git.getDiffs(context),
+    routes: (root, args, context) => routes.list(context)
   },
 
   Mutation: {

packages/@vue/cli-ui/src/graphql-api/type-defs.js

@@ -249,6 +249,13 @@ input OpenInEditorInput {
   gitPath: Boolean
 }
 
+type Route {
+  id: ID!
+  name: String!
+  icon: String!
+  tooltip: String
+}
+
 type Query {
   progress (id: ID!): Progress
   cwd: String!
@@ -266,6 +273,7 @@ type Query {
   configurations: [Configuration]
   configuration (id: ID!): Configuration
   fileDiffs: [FileDiff]
+  routes: [Route]
 }
 
 type Mutation {
@@ -303,5 +311,8 @@ type Subscription {
   cwdChanged: String!
   taskChanged: Task
   taskLogAdded (id: ID!): TaskLog
+  routeAdded: Route
+  routeRemoved: Route
+  routeChanged: Route
 }
 `

packages/@vue/cli-ui/src/graphql/routeFragment.gql

@@ -0,0 +1,6 @@
+fragment route on Route {
+  id
+  name
+  icon
+  tooltip
+}

packages/@vue/cli-ui/src/graphql/routes.gql

@@ -0,0 +1,7 @@
+#import "./routeFragment.gql"
+
+query routes {
+  routes {
+    ...route
+  }
+}