web/satellite: hot fix for Onb CLI flow's Create Bucket component's back button

There is a bug with back button of Create Bucket step of new onb CLI flow when proceeding further into flow and trying to come back.

Change-Id: I663a05021824164617ba933815973d8be856539f

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

@@ -12,7 +12,24 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
+import { RouteConfig } from "@/router";
+import { APP_STATE_MUTATIONS } from "@/store/mutationConstants";
+
 // @vue/component
 @Component
-export default class OnbCLIStep extends Vue {}
+export default class OnbCLIStep extends Vue {
+    /**
+     * Lifecycle hook after initial render.
+     * Sets default create bucket component's back route.
+     */
+    public async mounted(): Promise<void> {
+        // Setting here instead of directly in store because it causes tests dependent on appStateModule to fail.
+        // Probably because of mixing Vuex store and Vue-Router.
+        // As a workaround we could try to store this info in Local Storage of user's browser.
+        this.$store.commit(
+            APP_STATE_MUTATIONS.SET_ONB_CLI_FLOW_CREATE_BUCKET_BACK_ROUTE,
+            RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.GenerateAG)).path,
+        )
+    }
+}
 </script>

web/satellite/src/components/onboardingTour/steps/cliFlow/CreateBucket.vue

@@ -55,7 +55,7 @@ export default class CreateBucket extends Vue {
      * Holds on back button click logic.
      */
     public async onBackClick(): Promise<void> {
-        await this.$router.go(-1);
+        await this.$router.push(this.backRoute);
     }
 
     /**
@@ -64,6 +64,13 @@ export default class CreateBucket extends Vue {
     public async onNextClick(): Promise<void> {
         await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.UploadObject)).path);
     }
+
+    /**
+     * Returns back route path from store.
+     */
+    private get backRoute(): string {
+        return this.$store.state.appStateModule.appState.onbCLIFlowCreateBucketBackRoute;
+    }
 }
 </script>
 

web/satellite/src/components/onboardingTour/steps/cliFlow/GenerateAG.vue

@@ -37,6 +37,7 @@
 import { Component, Vue } from 'vue-property-decorator';
 
 import { RouteConfig } from "@/router";
+import { APP_STATE_MUTATIONS } from "@/store/mutationConstants";
 
 import CLIFlowContainer from "@/components/onboardingTour/steps/common/CLIFlowContainer.vue";
 import OSContainer from "@/components/onboardingTour/steps/common/OSContainer.vue";
@@ -65,6 +66,10 @@ export default class GenerateAG extends Vue {
      * Holds on next button click logic.
      */
     public async onNextClick(): Promise<void> {
+        this.$store.commit(
+            APP_STATE_MUTATIONS.SET_ONB_CLI_FLOW_CREATE_BUCKET_BACK_ROUTE,
+            RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.GenerateAG)).path,
+        )
         await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CreateBucket)).path);
     }
 }

web/satellite/src/components/onboardingTour/steps/cliFlow/ImportAG.vue

@@ -33,6 +33,7 @@
 import { Component, Vue } from 'vue-property-decorator';
 
 import { RouteConfig } from "@/router";
+import { APP_STATE_MUTATIONS } from "@/store/mutationConstants";
 
 import CLIFlowContainer from "@/components/onboardingTour/steps/common/CLIFlowContainer.vue";
 import OSContainer from "@/components/onboardingTour/steps/common/OSContainer.vue";
@@ -61,6 +62,10 @@ export default class ImportAG extends Vue {
      * Holds on next button click logic.
      */
     public async onNextClick(): Promise<void> {
+        this.$store.commit(
+            APP_STATE_MUTATIONS.SET_ONB_CLI_FLOW_CREATE_BUCKET_BACK_ROUTE,
+            RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.ImportAG)).path,
+        )
         await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.CreateBucket)).path);
     }
 }

web/satellite/src/store/modules/appState.ts

@@ -29,6 +29,8 @@ class ViewsState {
 
         public setDefaultPaymentMethodID: string = "",
         public deletePaymentMethodID: string = "",
+
+        public onbCLIFlowCreateBucketBackRoute: string = "",
     ) {}
 }
 
@@ -110,6 +112,9 @@ export const appStateModule = {
         [APP_STATE_MUTATIONS.SHOW_DELETE_PAYMENT_METHOD_POPUP](state: State, id: string): void {
             state.appState.deletePaymentMethodID = id;
         },
+        [APP_STATE_MUTATIONS.SET_ONB_CLI_FLOW_CREATE_BUCKET_BACK_ROUTE](state: State, route: string): void {
+            state.appState.onbCLIFlowCreateBucketBackRoute = route;
+        },
         // Mutation that closes each popup/dropdown
         [APP_STATE_MUTATIONS.CLOSE_ALL](state: State): void {
             state.appState.isAccountDropdownShown = false;

web/satellite/src/store/mutationConstants.ts

@@ -35,4 +35,5 @@ export const APP_STATE_MUTATIONS = {
     SET_SATELLITE_STATUS: 'SET_SATELLITE_STATUS',
     SET_COUPON_CODE_BILLING_UI_STATUS: 'SET_COUPON_CODE_BILLING_UI_STATUS',
     SET_COUPON_CODE_SIGNUP_UI_STATUS: 'SET_COUPON_CODE_SIGNUP_UI_STATUS',
+    SET_ONB_CLI_FLOW_CREATE_BUCKET_BACK_ROUTE: 'SET_ONB_CLI_FLOW_CREATE_BUCKET_BACK_ROUTE',
 };