web/satellite: update onboarding tour: routing

WHAT:
first step of updating onboarding tour - adding routes

WHY:
onboarding your is being reworked so adding routes will make it easier to operate over it's states

Change-Id: Ide830989e39a6222e975bd2a6106b0efbb3839f9

web/satellite/src/components/onboardingTour/steps/CreateAccessGrantStep.vue

@@ -0,0 +1,11 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template></template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component
+export default class CreateAccessGrantStep extends Vue {}
+</script>

web/satellite/src/router/index.ts

@@ -21,6 +21,9 @@ import SettingsArea from '@/components/account/SettingsArea.vue';
 import ApiKeysArea from '@/components/apiKeys/ApiKeysArea.vue';
 import Page404 from '@/components/errors/Page404.vue';
 import OnboardingTourArea from '@/components/onboardingTour/OnboardingTourArea.vue';
+import AddPaymentStep from '@/components/onboardingTour/steps/AddPaymentStep.vue';
+import CreateAccessGrantStep from '@/components/onboardingTour/steps/CreateAccessGrantStep.vue';
+import OverviewStep from '@/components/onboardingTour/steps/OverviewStep.vue';
 import CreateProject from '@/components/project/CreateProject.vue';
 import EditProjectDetails from '@/components/project/EditProjectDetails.vue';
 import ProjectDashboard from '@/components/project/ProjectDashboard.vue';
@@ -53,12 +56,14 @@ export abstract class RouteConfig {
     public static EditProjectDetails = new NavigationLink('/edit-project-details', 'Edit Project Details');
     public static AccessGrants = new NavigationLink('/access-grants', 'Access Grants');
 
-    // child paths
+    // account child paths
     public static Settings = new NavigationLink('settings', 'Settings');
     public static Billing = new NavigationLink('billing', 'Billing');
     public static BillingHistory = new NavigationLink('billing-history', 'Billing History');
     public static DepositHistory = new NavigationLink('deposit-history', 'Deposit History');
     public static CreditsHistory = new NavigationLink('credits-history', 'Credits History');
+
+    // access grant child paths
     public static CreateAccessGrant = new NavigationLink('create-grant', 'Create Access Grant');
     public static NameStep = new NavigationLink('name', 'Name Access Grant');
     public static PermissionsStep = new NavigationLink('permissions', 'Access Grant Permissions');
@@ -68,6 +73,11 @@ export abstract class RouteConfig {
     public static CLIStep = new NavigationLink('cli', 'Access Grant In CLI');
     public static UploadStep = new NavigationLink('upload', 'Access Grant Upload Data');
 
+    // onboarding tour child paths
+    public static OverviewStep = new NavigationLink('overview', 'Onboarding Overview');
+    public static PaymentStep = new NavigationLink('payment', 'Onboarding Payment');
+    public static AccessGrant = new NavigationLink('access', 'Onboarding Access Grant');
+
     // TODO: disabled until implementation
     // public static Referral = new NavigationLink('referral', 'Referral');
 
@@ -174,6 +184,46 @@ export const router = new Router({
                     path: RouteConfig.OnboardingTour.path,
                     name: RouteConfig.OnboardingTour.name,
                     component: OnboardingTourArea,
+                    children: [
+                        {
+                            path: RouteConfig.OverviewStep.path,
+                            name: RouteConfig.OverviewStep.name,
+                            component: OverviewStep,
+                        },
+                        {
+                            path: RouteConfig.PaymentStep.path,
+                            name: RouteConfig.PaymentStep.name,
+                            component: AddPaymentStep,
+                        },
+                        {
+                            path: RouteConfig.AccessGrant.path,
+                            name: RouteConfig.AccessGrant.name,
+                            component: CreateAccessGrantStep,
+                            children: [
+                                {
+                                    path: RouteConfig.NameStep.path,
+                                    name: RouteConfig.NameStep.name,
+                                    component: NameStep,
+                                },
+                                {
+                                    path: RouteConfig.PermissionsStep.path,
+                                    name: RouteConfig.PermissionsStep.name,
+                                    component: PermissionsStep,
+                                    props: true,
+                                },
+                                {
+                                    path: RouteConfig.CreatePassphraseStep.path,
+                                    name: RouteConfig.CreatePassphraseStep.name,
+                                    component: CreatePassphraseStep,
+                                },
+                                {
+                                    path: RouteConfig.ResultStep.path,
+                                    name: RouteConfig.ResultStep.name,
+                                    component: ResultStep,
+                                },
+                            ],
+                        },
+                    ],
                 },
                 {
                     path: RouteConfig.CreateProject.path,
@@ -258,6 +308,12 @@ router.beforeEach((to, from, next) => {
         return;
     }
 
+    if (navigateToDefaultSubTab(to.matched, RouteConfig.OnboardingTour)) {
+        next(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
+
+        return;
+    }
+
     if (to.name === 'default') {
         next(RouteConfig.ProjectDashboard.path);