From 7a08c19c5353d5808b7c32ef749eca0347ff5309 Mon Sep 17 00:00:00 2001
From: Vitalii Shpital <takur12345@gmail.com>
Date: Thu, 12 Aug 2021 15:45:44 +0300
Subject: [PATCH] web/satellite: initial setup for onboarding CLI flow

Added components for the new flow.
Removed onboarding logic from regular access grant wizard.
Updated routes to include new flow.

Change-Id: I52ca6eb3da1e4e3a4b465ed58cd45398d10fd268
---
 .../components/accessGrants/ProgressBar.vue   |  10 +-
 .../components/accessGrants/steps/CLIStep.vue |  28 +---
 .../steps/CreatePassphraseStep.vue            |  37 ------
 .../steps/EnterPassphraseStep.vue             |   2 +-
 .../accessGrants/steps/GatewayStep.vue        |  30 +----
 .../accessGrants/steps/NameStep.vue           |  21 +--
 .../accessGrants/steps/PermissionsStep.vue    |  43 +-----
 .../accessGrants/steps/ResultStep.vue         |  42 +-----
 .../onboardingTour/steps/CLIStep.vue          |  18 +++
 .../steps/CreateAccessGrantStep.vue           | 113 ----------------
 .../onboardingTour/steps/OverviewStep.vue     |   2 +-
 .../onboardingTour/steps/cliFlow/APIKey.vue   |  14 ++
 .../steps/cliFlow/CLIInstall.vue              |  14 ++
 .../onboardingTour/steps/cliFlow/CLISetup.vue |  14 ++
 .../steps/cliFlow/CreateBucket.vue            |  14 ++
 .../steps/cliFlow/DownloadObject.vue          |  14 ++
 .../steps/cliFlow/EncryptYourData.vue         |  14 ++
 .../steps/cliFlow/GenerateAG.vue              |  14 ++
 .../steps/cliFlow/GeneratedAG.vue             |  14 ++
 .../onboardingTour/steps/cliFlow/ImportAG.vue |  14 ++
 .../steps/cliFlow/ListObject.vue              |  14 ++
 .../steps/cliFlow/ShareObject.vue             |  14 ++
 .../steps/cliFlow/SuccessScreen.vue           |  14 ++
 .../steps/cliFlow/UploadObject.vue            |  14 ++
 web/satellite/src/router/index.ts             | 122 ++++++++++++------
 25 files changed, 302 insertions(+), 348 deletions(-)
 create mode 100644 web/satellite/src/components/onboardingTour/steps/CLIStep.vue
 delete mode 100644 web/satellite/src/components/onboardingTour/steps/CreateAccessGrantStep.vue
 create mode 100644 web/satellite/src/components/onboardingTour/steps/cliFlow/APIKey.vue
 create mode 100644 web/satellite/src/components/onboardingTour/steps/cliFlow/CLIInstall.vue
 create mode 100644 web/satellite/src/components/onboardingTour/steps/cliFlow/CLISetup.vue
 create mode 100644 web/satellite/src/components/onboardingTour/steps/cliFlow/CreateBucket.vue
 create mode 100644 web/satellite/src/components/onboardingTour/steps/cliFlow/DownloadObject.vue
 create mode 100644 web/satellite/src/components/onboardingTour/steps/cliFlow/EncryptYourData.vue
 create mode 100644 web/satellite/src/components/onboardingTour/steps/cliFlow/GenerateAG.vue
 create mode 100644 web/satellite/src/components/onboardingTour/steps/cliFlow/GeneratedAG.vue
 create mode 100644 web/satellite/src/components/onboardingTour/steps/cliFlow/ImportAG.vue
 create mode 100644 web/satellite/src/components/onboardingTour/steps/cliFlow/ListObject.vue
 create mode 100644 web/satellite/src/components/onboardingTour/steps/cliFlow/ShareObject.vue
 create mode 100644 web/satellite/src/components/onboardingTour/steps/cliFlow/SuccessScreen.vue
 create mode 100644 web/satellite/src/components/onboardingTour/steps/cliFlow/UploadObject.vue

diff --git a/web/satellite/src/components/accessGrants/ProgressBar.vue b/web/satellite/src/components/accessGrants/ProgressBar.vue
index 3231f691e..1eb627c07 100644
--- a/web/satellite/src/components/accessGrants/ProgressBar.vue
+++ b/web/satellite/src/components/accessGrants/ProgressBar.vue
@@ -38,35 +38,35 @@ export default class ProgressBar extends Vue {
      * Indicates if current route is on name step.
      */
     public get isNameStep(): boolean {
-        return this.$route.name === RouteConfig.NameStep.name || this.$route.name === RouteConfig.AccessGrantName.name;
+        return this.$route.name === RouteConfig.NameStep.name;
     }
 
     /**
      * Indicates if current route is on permissions step.
      */
     public get isPermissionsStep(): boolean {
-        return this.$route.name === RouteConfig.PermissionsStep.name || this.$route.name === RouteConfig.AccessGrantPermissions.name;
+        return this.$route.name === RouteConfig.PermissionsStep.name;
     }
 
     /**
      * Indicates if current route is on passphrase step.
      */
     public get isPassphraseStep(): boolean {
-        return this.$route.name === RouteConfig.CreatePassphraseStep.name || this.$route.name === RouteConfig.EnterPassphraseStep.name || this.$route.name === RouteConfig.AccessGrantPassphrase.name;
+        return this.$route.name === RouteConfig.CreatePassphraseStep.name || this.$route.name === RouteConfig.EnterPassphraseStep.name;
     }
 
     /**
      * Indicates if current route is on result step.
      */
     public get isResultStep(): boolean {
-        return this.$route.name === RouteConfig.ResultStep.name || this.$route.name === RouteConfig.AccessGrantResult.name;
+        return this.$route.name === RouteConfig.ResultStep.name;
     }
 
     /**
      * Indicates if current route is on gateway step.
      */
     public get isGatewayStep(): boolean {
-        return this.$route.name === RouteConfig.GatewayStep.name || this.$route.name === RouteConfig.AccessGrantGateway.name;
+        return this.$route.name === RouteConfig.GatewayStep.name;
     }
 }
 </script>
diff --git a/web/satellite/src/components/accessGrants/steps/CLIStep.vue b/web/satellite/src/components/accessGrants/steps/CLIStep.vue
index d1df47197..25e3fca62 100644
--- a/web/satellite/src/components/accessGrants/steps/CLIStep.vue
+++ b/web/satellite/src/components/accessGrants/steps/CLIStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="cli-container" :class="{ 'border-radius': isOnboardingTour }">
+    <div class="cli-container">
         <BackIcon class="cli-container__back-icon" @click="onBackClick" />
         <h1 class="cli-container__title">Create Access Grant in CLI</h1>
         <p class="cli-container__sub-title">
@@ -82,12 +82,6 @@ export default class CLIStep extends Vue {
      */
     public mounted(): void {
         if (!this.$route.params.key && !this.$route.params.restrictedKey) {
-            if (this.isOnboardingTour) {
-                this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantName)).path);
-
-                return;
-            }
-
             this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
 
             return;
@@ -102,17 +96,6 @@ export default class CLIStep extends Vue {
      * Redirects to previous step.
      */
     public onBackClick(): void {
-        if (this.isOnboardingTour) {
-            this.$router.push({
-                name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantPermissions)).name,
-                params: {
-                    key: this.key,
-                },
-            });
-
-            return;
-        }
-
         this.$router.push({
             name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.PermissionsStep)).name,
             params: {
@@ -126,7 +109,7 @@ export default class CLIStep extends Vue {
      * Redirects to upload step.
      */
     public onDoneClick(): void {
-        this.isOnboardingTour ? this.$router.push(RouteConfig.ProjectDashboard.path) : this.$router.push(RouteConfig.AccessGrants.path);
+        this.$router.push(RouteConfig.AccessGrants.path);
     }
 
     /**
@@ -161,13 +144,6 @@ export default class CLIStep extends Vue {
         this.$copyText(this.restrictedKey);
         this.$notify.success('Token was copied successfully');
     }
-
-    /**
-     * Indicates if current route is onboarding tour.
-     */
-    public get isOnboardingTour(): boolean {
-        return this.$route.path.includes(RouteConfig.OnboardingTour.path);
-    }
 }
 </script>
 
diff --git a/web/satellite/src/components/accessGrants/steps/CreatePassphraseStep.vue b/web/satellite/src/components/accessGrants/steps/CreatePassphraseStep.vue
index 2cb9a8c96..66884dcb0 100644
--- a/web/satellite/src/components/accessGrants/steps/CreatePassphraseStep.vue
+++ b/web/satellite/src/components/accessGrants/steps/CreatePassphraseStep.vue
@@ -44,12 +44,6 @@ export default class CreatePassphraseStep extends Vue {
      */
     public async mounted(): Promise<void> {
         if (!this.$route.params.key && !this.$route.params.restrictedKey) {
-            if (this.isOnboardingTour) {
-                await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantName)).path);
-
-                return;
-            }
-
             await this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
 
             return;
@@ -113,19 +107,6 @@ export default class CreatePassphraseStep extends Vue {
 
         this.isLoading = false;
 
-        if (this.isOnboardingTour) {
-            await this.$router.push({
-                name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantResult)).name,
-                params: {
-                    access: this.access,
-                    key: this.key,
-                    restrictedKey: this.restrictedKey,
-                },
-            });
-
-            return;
-        }
-
         await this.$router.push({
             name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.ResultStep)).name,
             params: {
@@ -141,17 +122,6 @@ export default class CreatePassphraseStep extends Vue {
      * Redirects to previous step.
      */
     public onBackClick(): void {
-        if (this.isOnboardingTour) {
-            this.$router.push({
-                name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantPermissions)).name,
-                params: {
-                    key: this.key,
-                },
-            });
-
-            return;
-        }
-
         this.$router.push({
             name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.PermissionsStep)).name,
             params: {
@@ -159,13 +129,6 @@ export default class CreatePassphraseStep extends Vue {
             },
         });
     }
-
-    /**
-     * Indicates if current route is onboarding tour.
-     */
-    private get isOnboardingTour(): boolean {
-        return this.$route.path.includes(RouteConfig.OnboardingTour.path);
-    }
 }
 </script>
 
diff --git a/web/satellite/src/components/accessGrants/steps/EnterPassphraseStep.vue b/web/satellite/src/components/accessGrants/steps/EnterPassphraseStep.vue
index df7b01dd8..d352b8e31 100644
--- a/web/satellite/src/components/accessGrants/steps/EnterPassphraseStep.vue
+++ b/web/satellite/src/components/accessGrants/steps/EnterPassphraseStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="enter-passphrase" :class="{ 'border-radius': isOnboardingTour }">
+    <div class="enter-passphrase">
         <BackIcon class="enter-passphrase__back-icon" @click="onBackClick" />
         <h1 class="enter-passphrase__title">Enter Encryption Passphrase</h1>
         <p class="enter-passphrase__sub-title">Enter the passphrase you most recently generated for Access Grants</p>
diff --git a/web/satellite/src/components/accessGrants/steps/GatewayStep.vue b/web/satellite/src/components/accessGrants/steps/GatewayStep.vue
index f4eefe92c..d8baf92b1 100644
--- a/web/satellite/src/components/accessGrants/steps/GatewayStep.vue
+++ b/web/satellite/src/components/accessGrants/steps/GatewayStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="gateway" :class="{ 'border-radius': isOnboardingTour }">
+    <div class="gateway">
         <BackIcon class="gateway__back-icon" @click="onBackClick" />
         <h1 class="gateway__title">S3 Gateway</h1>
         <div class="gateway__container">
@@ -131,12 +131,6 @@ export default class GatewayStep extends Vue {
      */
     public mounted(): void {
         if (!this.$route.params.access && !this.$route.params.key && !this.$route.params.resctrictedKey) {
-            if (this.isOnboardingTour) {
-                this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantName)).path);
-
-                return;
-            }
-
             this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
 
             return;
@@ -179,19 +173,6 @@ export default class GatewayStep extends Vue {
      * Redirects to previous step.
      */
     public onBackClick(): void {
-        if (this.isOnboardingTour) {
-            this.$router.push({
-                name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantResult)).name,
-                params: {
-                    access: this.access,
-                    key: this.key,
-                    restrictedKey: this.restrictedKey,
-                },
-            });
-
-            return;
-        }
-
         this.$router.push({
             name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.ResultStep)).name,
             params: {
@@ -207,7 +188,7 @@ export default class GatewayStep extends Vue {
      * Proceed to upload data step.
      */
     public onDoneClick(): void {
-        this.isOnboardingTour ? this.$router.push(RouteConfig.ProjectDashboard.path) : this.$router.push(RouteConfig.AccessGrants.path);
+        this.$router.push(RouteConfig.AccessGrants.path);
     }
 
     /**
@@ -234,13 +215,6 @@ export default class GatewayStep extends Vue {
         this.isLoading = false;
     }
 
-    /**
-     * Indicates if current route is onboarding tour.
-     */
-    public get isOnboardingTour(): boolean {
-        return this.$route.path.includes(RouteConfig.OnboardingTour.path);
-    }
-
     /**
      * Returns generated gateway credentials from store.
      */
diff --git a/web/satellite/src/components/accessGrants/steps/NameStep.vue b/web/satellite/src/components/accessGrants/steps/NameStep.vue
index e8a5ce314..bf3e1959b 100644
--- a/web/satellite/src/components/accessGrants/steps/NameStep.vue
+++ b/web/satellite/src/components/accessGrants/steps/NameStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="name-step" :class="{ 'border-radius': isOnboardingTour }">
+    <div class="name-step">
         <h1 class="name-step__title">Name Your Access Grant</h1>
         <p class="name-step__sub-title">Enter a name for your new Access grant to get started.</p>
         <HeaderedInput
@@ -14,7 +14,6 @@
         />
         <div class="name-step__buttons-area">
             <VButton
-                v-if="!isOnboardingTour"
                 class="cancel-button"
                 label="Cancel"
                 width="50%"
@@ -130,17 +129,6 @@ export default class NameStep extends Vue {
 
         this.isLoading = false;
 
-        if (this.isOnboardingTour) {
-            await this.$router.push({
-                name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantPermissions)).name,
-                params: {
-                    key: this.key,
-                },
-            });
-
-            return;
-        }
-
         await this.$router.push({
             name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.PermissionsStep)).name,
             params: {
@@ -148,13 +136,6 @@ export default class NameStep extends Vue {
             },
         });
     }
-
-    /**
-     * Indicates if current route is onboarding tour.
-     */
-    public get isOnboardingTour(): boolean {
-        return this.$route.path.includes(RouteConfig.OnboardingTour.path);
-    }
 }
 </script>
 
diff --git a/web/satellite/src/components/accessGrants/steps/PermissionsStep.vue b/web/satellite/src/components/accessGrants/steps/PermissionsStep.vue
index b7845c669..78d425fe2 100644
--- a/web/satellite/src/components/accessGrants/steps/PermissionsStep.vue
+++ b/web/satellite/src/components/accessGrants/steps/PermissionsStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="permissions" :class="{ 'border-radius': isOnboardingTour }">
+    <div class="permissions">
         <BackIcon class="permissions__back-icon" @click="onBackClick" />
         <h1 class="permissions__title">Access Permissions</h1>
         <p class="permissions__sub-title">
@@ -112,12 +112,6 @@ export default class PermissionsStep extends Vue {
      */
     public async mounted(): Promise<void> {
         if (!this.$route.params.key) {
-            if (this.isOnboardingTour) {
-                await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantName)).path);
-
-                return;
-            }
-
             this.onBackClick();
 
             return;
@@ -143,9 +137,7 @@ export default class PermissionsStep extends Vue {
      * Redirects to previous step.
      */
     public onBackClick(): void {
-        this.isOnboardingTour ?
-            this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantName)).path) :
-            this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
+        this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
     }
 
     /**
@@ -178,18 +170,6 @@ export default class PermissionsStep extends Vue {
 
         this.isLoading = false;
 
-        if (this.isOnboardingTour) {
-            await this.$router.push({
-                name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantCLI)).name,
-                params: {
-                    key: this.key,
-                    restrictedKey: this.restrictedKey,
-                },
-            });
-
-            return;
-        }
-
         await this.$router.push({
             name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.CLIStep)).name,
             params: {
@@ -218,18 +198,6 @@ export default class PermissionsStep extends Vue {
 
         this.isLoading = false;
 
-        if (this.isOnboardingTour) {
-            await this.$router.push({
-                name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantPassphrase)).name,
-                params: {
-                    key: this.key,
-                    restrictedKey: this.restrictedKey,
-                },
-            });
-
-            return;
-        }
-
         if (this.accessGrantsAmount > 1) {
             await this.$router.push({
                 name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.EnterPassphraseStep)).name,
@@ -258,13 +226,6 @@ export default class PermissionsStep extends Vue {
         return this.$store.state.accessGrantsModule.isAccessGrantsWebWorkerReady;
     }
 
-    /**
-     * Indicates if current route is onboarding tour.
-     */
-    public get isOnboardingTour(): boolean {
-        return this.$route.path.includes(RouteConfig.OnboardingTour.path);
-    }
-
     /**
      * Returns selected bucket names.
      */
diff --git a/web/satellite/src/components/accessGrants/steps/ResultStep.vue b/web/satellite/src/components/accessGrants/steps/ResultStep.vue
index e0922b6e4..3e7f67acb 100644
--- a/web/satellite/src/components/accessGrants/steps/ResultStep.vue
+++ b/web/satellite/src/components/accessGrants/steps/ResultStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="generate-grant" :class="{ 'border-radius': isOnboardingTour }">
+    <div class="generate-grant">
         <BackIcon class="generate-grant__back-icon" @click="onBackClick" />
         <h1 class="generate-grant__title">Generate Access Grant</h1>
         <div class="generate-grant__warning">
@@ -79,12 +79,6 @@ export default class ResultStep extends Vue {
      */
     public mounted(): void {
         if (!this.$route.params.access && !this.$route.params.key && !this.$route.params.resctrictedKey) {
-            if (this.isOnboardingTour) {
-                this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantName)).path);
-
-                return;
-            }
-
             this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
 
             return;
@@ -137,18 +131,6 @@ export default class ResultStep extends Vue {
      * Redirects to previous step.
      */
     public onBackClick(): void {
-        if (this.isOnboardingTour) {
-            this.$router.push({
-                name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantPassphrase)).name,
-                params: {
-                    key: this.key,
-                    restrictedKey: this.restrictedKey,
-                },
-            });
-
-            return;
-        }
-
         if (this.accessGrantsAmount > 1) {
             this.$router.push({
                 name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.EnterPassphraseStep)).name,
@@ -175,7 +157,7 @@ export default class ResultStep extends Vue {
      * Proceed to upload data step.
      */
     public onDoneClick(): void {
-        this.isOnboardingTour ? this.$router.push(RouteConfig.ProjectDashboard.path) : this.$router.push(RouteConfig.AccessGrants.path);
+        this.$router.push(RouteConfig.AccessGrants.path);
     }
 
     /**
@@ -183,19 +165,6 @@ export default class ResultStep extends Vue {
      * Proceed to gateway step.
      */
     public navigateToGatewayStep(): void {
-        if (this.isOnboardingTour) {
-            this.$router.push({
-                name: RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantGateway)).name,
-                params: {
-                    access: this.access,
-                    key: this.key,
-                    restrictedKey: this.restrictedKey,
-                },
-            });
-
-            return;
-        }
-
         this.$router.push({
             name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.GatewayStep)).name,
             params: {
@@ -206,13 +175,6 @@ export default class ResultStep extends Vue {
         });
     }
 
-    /**
-     * Indicates if current route is onboarding tour.
-     */
-    public get isOnboardingTour(): boolean {
-        return this.$route.path.includes(RouteConfig.OnboardingTour.path);
-    }
-
     /**
      * Returns amount of access grants from store.
      */
diff --git a/web/satellite/src/components/onboardingTour/steps/CLIStep.vue b/web/satellite/src/components/onboardingTour/steps/CLIStep.vue
new file mode 100644
index 000000000..70d131ea5
--- /dev/null
+++ b/web/satellite/src/components/onboardingTour/steps/CLIStep.vue
@@ -0,0 +1,18 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="onboarding-cli">
+        <div class="onboarding-cli__container">
+            <router-view />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+// @vue/component
+@Component
+export default class OnbCLIStep extends Vue {}
+</script>
diff --git a/web/satellite/src/components/onboardingTour/steps/CreateAccessGrantStep.vue b/web/satellite/src/components/onboardingTour/steps/CreateAccessGrantStep.vue
deleted file mode 100644
index f60f6d8e6..000000000
--- a/web/satellite/src/components/onboardingTour/steps/CreateAccessGrantStep.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<template>
-    <div class="onboarding-access">
-        <h1 class="onboarding-access__title">Create an Access Grant</h1>
-        <p class="onboarding-access__sub-title">
-            Access Grants are keys that allow access to upload, delete, and view your project’s data.
-        </p>
-        <div
-            class="onboarding-access__content"
-            :class="{
-                'permissions-margin': isPermissionsStep,
-                'passphrase-margin': isPassphraseStep,
-                'result-margin': isResultStep,
-                'cli-margin': isCLIStep,
-            }"
-        >
-            <ProgressBar v-if="!isCLIStep" />
-            <router-view />
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-
-import ProgressBar from '@/components/accessGrants/ProgressBar.vue';
-
-import { RouteConfig } from '@/router';
-
-// @vue/component
-@Component({
-    components: {
-        ProgressBar,
-    },
-})
-export default class CreateAccessGrantStep extends Vue {
-    /**
-     * Indicates if current route is access grant permissions step.
-     */
-    public get isPermissionsStep(): boolean {
-        return this.$route.name === RouteConfig.AccessGrantPermissions.name;
-    }
-
-    /**
-     * Indicates if current route is access grant passphrase step.
-     */
-    public get isPassphraseStep(): boolean {
-        return this.$route.name === RouteConfig.AccessGrantPassphrase.name;
-    }
-
-    /**
-     * Indicates if current route is access grant CLI step.
-     */
-    public get isCLIStep(): boolean {
-        return this.$route.name === RouteConfig.AccessGrantCLI.name;
-    }
-
-    /**
-     * Indicates if current route is access grant result step.
-     */
-    public get isResultStep(): boolean {
-        return this.$route.name === RouteConfig.AccessGrantResult.name;
-    }
-}
-</script>
-
-<style scoped lang="scss">
-    .onboarding-access {
-        font-family: 'font_regular', sans-serif;
-        font-style: normal;
-
-        &__title {
-            font-family: 'font_bold', sans-serif;
-            font-size: 32px;
-            line-height: 39px;
-            text-align: center;
-            color: #1b2533;
-            margin: 0 0 15px 0;
-        }
-
-        &__sub-title {
-            font-size: 16px;
-            line-height: 21px;
-            color: #000;
-            margin: 0 0 50px 0;
-        }
-
-        &__content {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-left: -205px;
-        }
-    }
-
-    .permissions-margin {
-        margin-left: -210px;
-    }
-
-    .passphrase-margin {
-        margin-left: -190px;
-    }
-
-    .result-margin {
-        margin-left: -195px;
-    }
-
-    .cli-margin {
-        margin-left: 0;
-    }
-</style>
diff --git a/web/satellite/src/components/onboardingTour/steps/OverviewStep.vue b/web/satellite/src/components/onboardingTour/steps/OverviewStep.vue
index f617d084d..a4c8ef9a5 100644
--- a/web/satellite/src/components/onboardingTour/steps/OverviewStep.vue
+++ b/web/satellite/src/components/onboardingTour/steps/OverviewStep.vue
@@ -75,7 +75,7 @@ export default class OverviewStep extends Vue {
         this.isLoading = true;
 
         await this.analytics.linkEventTriggered(AnalyticsEvent.PATH_SELECTED, 'CLI');
-        await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).with(RouteConfig.AccessGrantName).path);
+        await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.CLIStep).with(RouteConfig.EncryptYourData).path);
 
         this.isLoading = false;
     }
diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/APIKey.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/APIKey.vue
new file mode 100644
index 000000000..bdde889ca
--- /dev/null
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/APIKey.vue
@@ -0,0 +1,14 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="key" />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+// @vue/component
+@Component
+export default class APIKey extends Vue {}
+</script>
diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/CLIInstall.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/CLIInstall.vue
new file mode 100644
index 000000000..844de0ce5
--- /dev/null
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/CLIInstall.vue
@@ -0,0 +1,14 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="cli-install" />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+// @vue/component
+@Component
+export default class CLIInstall extends Vue {}
+</script>
diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/CLISetup.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/CLISetup.vue
new file mode 100644
index 000000000..bed585fb3
--- /dev/null
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/CLISetup.vue
@@ -0,0 +1,14 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="cli-setup" />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+// @vue/component
+@Component
+export default class CLISetup extends Vue {}
+</script>
diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/CreateBucket.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/CreateBucket.vue
new file mode 100644
index 000000000..0eb205582
--- /dev/null
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/CreateBucket.vue
@@ -0,0 +1,14 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="create-bucket" />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+// @vue/component
+@Component
+export default class CreateBucket extends Vue {}
+</script>
diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/DownloadObject.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/DownloadObject.vue
new file mode 100644
index 000000000..8ce8506d2
--- /dev/null
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/DownloadObject.vue
@@ -0,0 +1,14 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="download-object" />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+// @vue/component
+@Component
+export default class DownloadObject extends Vue {}
+</script>
diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/EncryptYourData.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/EncryptYourData.vue
new file mode 100644
index 000000000..e76b2446c
--- /dev/null
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/EncryptYourData.vue
@@ -0,0 +1,14 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="encrypt" />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+// @vue/component
+@Component
+export default class EncryptYourData extends Vue {}
+</script>
diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/GenerateAG.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/GenerateAG.vue
new file mode 100644
index 000000000..5975b2316
--- /dev/null
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/GenerateAG.vue
@@ -0,0 +1,14 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="generate-ag" />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+// @vue/component
+@Component
+export default class GenerateAG extends Vue {}
+</script>
diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/GeneratedAG.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/GeneratedAG.vue
new file mode 100644
index 000000000..2c5ee2f59
--- /dev/null
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/GeneratedAG.vue
@@ -0,0 +1,14 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="generated" />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+// @vue/component
+@Component
+export default class GeneratedAG extends Vue {}
+</script>
diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/ImportAG.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/ImportAG.vue
new file mode 100644
index 000000000..355d32cbb
--- /dev/null
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/ImportAG.vue
@@ -0,0 +1,14 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="import" />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+// @vue/component
+@Component
+export default class ImportAG extends Vue {}
+</script>
diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/ListObject.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/ListObject.vue
new file mode 100644
index 000000000..7448e00f5
--- /dev/null
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/ListObject.vue
@@ -0,0 +1,14 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="list-object" />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+// @vue/component
+@Component
+export default class ListObject extends Vue {}
+</script>
diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/ShareObject.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/ShareObject.vue
new file mode 100644
index 000000000..3ceb8f306
--- /dev/null
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/ShareObject.vue
@@ -0,0 +1,14 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="share-object" />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+// @vue/component
+@Component
+export default class ShareObject extends Vue {}
+</script>
diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/SuccessScreen.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/SuccessScreen.vue
new file mode 100644
index 000000000..b8fa6ccf7
--- /dev/null
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/SuccessScreen.vue
@@ -0,0 +1,14 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="success-screen" />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+// @vue/component
+@Component
+export default class SuccessScreen extends Vue {}
+</script>
diff --git a/web/satellite/src/components/onboardingTour/steps/cliFlow/UploadObject.vue b/web/satellite/src/components/onboardingTour/steps/cliFlow/UploadObject.vue
new file mode 100644
index 000000000..d98534073
--- /dev/null
+++ b/web/satellite/src/components/onboardingTour/steps/cliFlow/UploadObject.vue
@@ -0,0 +1,14 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="upload-object" />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+// @vue/component
+@Component
+export default class UploadObject extends Vue {}
+</script>
diff --git a/web/satellite/src/router/index.ts b/web/satellite/src/router/index.ts
index 311fbf405..10d4e428e 100644
--- a/web/satellite/src/router/index.ts
+++ b/web/satellite/src/router/index.ts
@@ -26,13 +26,26 @@ import ObjectsArea from '@/components/objects/ObjectsArea.vue';
 import UploadFile from '@/components/objects/UploadFile.vue';
 import WarningView from '@/components/objects/WarningView.vue';
 import OnboardingTourArea from '@/components/onboardingTour/OnboardingTourArea.vue';
-import CreateAccessGrantStep from '@/components/onboardingTour/steps/CreateAccessGrantStep.vue';
+import OnbCLIStep from '@/components/onboardingTour/steps/CLIStep.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';
 import ProjectsList from '@/components/projectsList/ProjectsList.vue';
 import ProjectMembersArea from '@/components/team/ProjectMembersArea.vue';
+import CLIInstall from "@/components/onboardingTour/steps/cliFlow/CLIInstall.vue";
+import APIKey from "@/components/onboardingTour/steps/cliFlow/APIKey.vue";
+import CLISetup from "@/components/onboardingTour/steps/cliFlow/CLISetup.vue";
+import GenerateAG from "@/components/onboardingTour/steps/cliFlow/GenerateAG.vue";
+import CreateBucket from "@/components/onboardingTour/steps/cliFlow/CreateBucket.vue";
+import UploadObject from "@/components/onboardingTour/steps/cliFlow/UploadObject.vue";
+import ListObject from "@/components/onboardingTour/steps/cliFlow/ListObject.vue";
+import DownloadObject from "@/components/onboardingTour/steps/cliFlow/DownloadObject.vue";
+import ShareObject from "@/components/onboardingTour/steps/cliFlow/ShareObject.vue";
+import SuccessScreen from "@/components/onboardingTour/steps/cliFlow/SuccessScreen.vue";
+import EncryptYourData from "@/components/onboardingTour/steps/cliFlow/EncryptYourData.vue";
+import GeneratedAG from "@/components/onboardingTour/steps/cliFlow/GeneratedAG.vue";
+import ImportAG from "@/components/onboardingTour/steps/cliFlow/ImportAG.vue";
 
 import store from '@/store';
 import { OBJECTS_ACTIONS } from '@/store/modules/objects';
@@ -86,13 +99,20 @@ export abstract class RouteConfig {
 
     // onboarding tour child paths
     public static OverviewStep = new NavigationLink('overview', 'Onboarding Overview');
-    public static AccessGrant = new NavigationLink('access', 'Onboarding Access Grant');
-    public static AccessGrantName = new NavigationLink('name', 'Onboarding Name Access Grant');
-    public static AccessGrantPermissions = new NavigationLink('permissions', 'Onboarding Access Grant Permissions');
-    public static AccessGrantCLI = new NavigationLink('cli', 'Onboarding Access Grant CLI');
-    public static AccessGrantPassphrase = new NavigationLink('create-passphrase', 'Onboarding Access Grant Create Passphrase');
-    public static AccessGrantResult = new NavigationLink('result', 'Onboarding Access Grant Result');
-    public static AccessGrantGateway = new NavigationLink('gateway', 'Onboarding Access Grant Gateway');
+    public static OnbCLIStep = new NavigationLink('cli', 'Onboarding CLI');
+    public static EncryptYourData = new NavigationLink('encrypt', 'Onboarding Encrypt Data');
+    public static GeneratedAG = new NavigationLink('generated-ag', 'Onboarding Generated AG');
+    public static APIKey = new NavigationLink('api-key', 'Onboarding API Key');
+    public static CLIInstall = new NavigationLink('cli-install', 'Onboarding CLI Install');
+    public static CLISetup = new NavigationLink('cli-setup', 'Onboarding CLI Setup');
+    public static ImportAG = new NavigationLink('import', 'Onboarding Import AG');
+    public static GenerateAG = new NavigationLink('generate-ag', 'Onboarding Generate AG');
+    public static CreateBucket = new NavigationLink('create-bucket', 'Onboarding Create Bucket');
+    public static UploadObject = new NavigationLink('upload-object', 'Onboarding Upload Object');
+    public static ListObject = new NavigationLink('list-object', 'Onboarding List Object');
+    public static DownloadObject = new NavigationLink('download-object', 'Onboarding Download Object');
+    public static ShareObject = new NavigationLink('share-object', 'Onboarding Share Object');
+    public static SuccessScreen = new NavigationLink('success', 'Onboarding Success Screen');
 
     // objects child paths.
     public static Warning = new NavigationLink('warning', 'Objects Warning');
@@ -208,44 +228,74 @@ export const router = new Router({
                             component: OverviewStep,
                         },
                         {
-                            path: RouteConfig.AccessGrant.path,
-                            name: RouteConfig.AccessGrant.name,
-                            component: CreateAccessGrantStep,
+                            path: RouteConfig.OnbCLIStep.path,
+                            name: RouteConfig.OnbCLIStep.name,
+                            component: OnbCLIStep,
                             children: [
                                 {
-                                    path: RouteConfig.AccessGrantName.path,
-                                    name: RouteConfig.AccessGrantName.name,
-                                    component: NameStep,
+                                    path: RouteConfig.EncryptYourData.path,
+                                    name: RouteConfig.EncryptYourData.name,
+                                    component: EncryptYourData,
                                 },
                                 {
-                                    path: RouteConfig.AccessGrantPermissions.path,
-                                    name: RouteConfig.AccessGrantPermissions.name,
-                                    component: PermissionsStep,
-                                    props: true,
+                                    path: RouteConfig.GeneratedAG.path,
+                                    name: RouteConfig.GeneratedAG.name,
+                                    component: GeneratedAG,
                                 },
                                 {
-                                    path: RouteConfig.AccessGrantCLI.path,
-                                    name: RouteConfig.AccessGrantCLI.name,
-                                    component: CLIStep,
-                                    props: true,
+                                    path: RouteConfig.ImportAG.path,
+                                    name: RouteConfig.ImportAG.name,
+                                    component: ImportAG,
                                 },
                                 {
-                                    path: RouteConfig.AccessGrantPassphrase.path,
-                                    name: RouteConfig.AccessGrantPassphrase.name,
-                                    component: CreatePassphraseStep,
-                                    props: true,
+                                    path: RouteConfig.APIKey.path,
+                                    name: RouteConfig.APIKey.name,
+                                    component: APIKey,
                                 },
                                 {
-                                    path: RouteConfig.AccessGrantResult.path,
-                                    name: RouteConfig.AccessGrantResult.name,
-                                    component: ResultStep,
-                                    props: true,
+                                    path: RouteConfig.CLIInstall.path,
+                                    name: RouteConfig.CLIInstall.name,
+                                    component: CLIInstall,
                                 },
                                 {
-                                    path: RouteConfig.AccessGrantGateway.path,
-                                    name: RouteConfig.AccessGrantGateway.name,
-                                    component: GatewayStep,
-                                    props: true,
+                                    path: RouteConfig.CLISetup.path,
+                                    name: RouteConfig.CLISetup.name,
+                                    component: CLISetup,
+                                },
+                                {
+                                    path: RouteConfig.GenerateAG.path,
+                                    name: RouteConfig.GenerateAG.name,
+                                    component: GenerateAG,
+                                },
+                                {
+                                    path: RouteConfig.CreateBucket.path,
+                                    name: RouteConfig.CreateBucket.name,
+                                    component: CreateBucket,
+                                },
+                                {
+                                    path: RouteConfig.UploadObject.path,
+                                    name: RouteConfig.UploadObject.name,
+                                    component: UploadObject,
+                                },
+                                {
+                                    path: RouteConfig.ListObject.path,
+                                    name: RouteConfig.ListObject.name,
+                                    component: ListObject,
+                                },
+                                {
+                                    path: RouteConfig.DownloadObject.path,
+                                    name: RouteConfig.DownloadObject.name,
+                                    component: DownloadObject,
+                                },
+                                {
+                                    path: RouteConfig.ShareObject.path,
+                                    name: RouteConfig.ShareObject.name,
+                                    component: ShareObject,
+                                },
+                                {
+                                    path: RouteConfig.SuccessScreen.path,
+                                    name: RouteConfig.SuccessScreen.name,
+                                    component: SuccessScreen,
                                 },
                             ],
                         },
@@ -377,8 +427,8 @@ router.beforeEach(async (to, from, next) => {
         return;
     }
 
-    if (navigateToDefaultSubTab(to.matched, RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant))) {
-        next(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).with(RouteConfig.NameStep).path);
+    if (navigateToDefaultSubTab(to.matched, RouteConfig.OnboardingTour.with(RouteConfig.CLIStep))) {
+        next(RouteConfig.OnboardingTour.path);
 
         return;
     }