JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Vitalii Shpital 2021-09-08 22:51:02 +03:00
parent 7f595445ac
commit b472925c1e
6 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/satellite/src/components/onboardingTour/steps/CLIStep.vue
View File

@ -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>

9
web/satellite/src/components/onboardingTour/steps/cliFlow/CreateBucket.vue
View File

@ -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>

5
web/satellite/src/components/onboardingTour/steps/cliFlow/GenerateAG.vue
View File

@ -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);
}
}

5
web/satellite/src/components/onboardingTour/steps/cliFlow/ImportAG.vue
View File

@ -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);
}
}

5
web/satellite/src/store/modules/appState.ts
View File

@ -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;

1
web/satellite/src/store/mutationConstants.ts
View File

@ -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',
};