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

web/satellite: store selected os tab during onboarding flow

Browse Source 
Store selected os tab during onboarding flow.
Use stored value to show correct tab during all the CLI steps.

Change-Id: I82e9af7e5dd3a7eaf503ed4f38789b7b0fb4aa84
This commit is contained in:
Vitalii 2022-04-12 12:36:42 +03:00 committed by Vitalii Shpital
parent 3f3f028c88
commit d506e9c07b
4 changed files with 56 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
web/satellite/src/components/onboardingTour/steps/common/OSContainer.vue
View File

@ -8,7 +8,7 @@
class="os__tabs__choice"
:class="{active: isWindows && !isInstallStep, 'active-install-step': isWindows && isInstallStep}"
aria-roledescription="windows"
@click="setIsWindows"
@click="setTab(OnboardingOS.WINDOWS)"
>
Windows
</p>
@ -16,7 +16,7 @@
class="os__tabs__choice"
:class="{active: isLinux && !isInstallStep, 'active-install-step': isLinux && isInstallStep}"
aria-roledescription="linux"
@click="setIsLinux"
@click="setTab(OnboardingOS.LINUX)"
>
Linux
</p>
@ -24,19 +24,21 @@
class="os__tabs__choice"
:class="{active: isMacOS && !isInstallStep, 'active-install-step': isMacOS && isInstallStep}"
aria-roledescription="macos"
@click="setIsMacOS"
@click="setTab(OnboardingOS.MAC)"
>
macOS
</p>
</div>
<slot v-if="isWindows" name="windows" />
<slot v-if="isLinux" name="linux" />
<slot v-if="isMacOS" name="macos" />
<slot v-if="isWindows" :name="OnboardingOS.WINDOWS" />
<slot v-if="isLinux" :name="OnboardingOS.LINUX" />
<slot v-if="isMacOS" :name="OnboardingOS.MAC" />
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { OnboardingOS } from "@/types/common";
import { APP_STATE_MUTATIONS } from "@/store/mutationConstants";
// @vue/component
@Component
@ -44,52 +46,67 @@ export default class OSContainer extends Vue {
@Prop({ default: false })
public readonly isInstallStep: boolean;
public isWindows = false;
public isLinux = false;
public isMacOS = false;
public osSelected = OnboardingOS.WINDOWS;
// This is done to fix "non-reactive property issue" to be able to use enum in template.
public OnboardingOS = OnboardingOS;
/**
* Lifecycle hook after initial render.
* Checks user's OS.
*/
public mounted(): void {
if (this.storedOsSelected) {
this.setTab(this.storedOsSelected)
return;
}
switch (true) {
case navigator.appVersion.indexOf("Mac") !== -1:
this.isMacOS = true;
this.setTab(OnboardingOS.MAC)
return;
case navigator.appVersion.indexOf("Linux") !== -1:
this.isLinux = true;
this.setTab(OnboardingOS.LINUX)
return;
default:
this.isWindows = true;
this.setTab(OnboardingOS.WINDOWS)
}
}
/**
* Sets view to windows state.
* Sets view to given state.
*/
public setIsWindows(): void {
this.isLinux = false;
this.isMacOS = false;
this.isWindows = true;
public setTab(os: OnboardingOS): void {
this.osSelected = os;
this.$store.commit(APP_STATE_MUTATIONS.SET_ONB_OS, os)
}
/**
* Sets view to linux state.
* Returns selected os from store.
*/
public setIsLinux(): void {
this.isMacOS = false;
this.isWindows = false;
this.isLinux = true;
public get storedOsSelected(): OnboardingOS | null {
return this.$store.state.appStateModule.appState.onbSelectedOs;
}
/**
* Sets view to macOS state.
* Indicates if mac tab is selected.
*/
public setIsMacOS(): void {
this.isLinux = false;
this.isWindows = false;
this.isMacOS = true;
private get isMacOS(): boolean {
return this.osSelected === OnboardingOS.MAC;
}
/**
* Indicates if linux tab is selected.
*/
private get isLinux(): boolean {
return this.osSelected === OnboardingOS.LINUX;
}
/**
* Indicates if windows tab is selected.
*/
private get isWindows(): boolean {
return this.osSelected === OnboardingOS.WINDOWS;
}
}
</script>

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

@ -1,7 +1,7 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import { PartneredSatellite } from '@/types/common';
import { OnboardingOS, PartneredSatellite } from '@/types/common';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { AppState } from '@/utils/constants/appStateEnum';
@ -37,6 +37,7 @@ class ViewsState {
public onbApiKey = "",
public setDefaultPaymentMethodID = "",
public deletePaymentMethodID = "",
public onbSelectedOs: OnboardingOS | null = null,
) {}
}
@ -180,6 +181,9 @@ export const appStateModule = {
[APP_STATE_MUTATIONS.SET_COUPON_CODE_SIGNUP_UI_STATUS](state: State, couponCodeSignupUIEnabled: boolean): void {
state.couponCodeSignupUIEnabled = couponCodeSignupUIEnabled;
},
[APP_STATE_MUTATIONS.SET_ONB_OS](state: State, os: OnboardingOS): void {
state.appState.onbSelectedOs = os;
},
},
actions: {
[APP_STATE_ACTIONS.TOGGLE_TEAM_MEMBERS]: function ({commit, state}: AppContext): void {

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

@ -46,4 +46,5 @@ export const APP_STATE_MUTATIONS = {
SET_ONB_CLEAN_API_KEY: 'SET_ONB_CLEAN_API_KEY',
SET_NAV_STRUCTURE_STATUS: 'SET_NAV_STRUCTURE_STATUS',
SET_OBJECTS_FLOW_STATUS: 'SET_OBJECTS_FLOW_STATUS',
SET_ONB_OS: 'SET_ONB_OS',
};

6
web/satellite/src/types/common.ts
View File

@ -6,6 +6,12 @@ export enum SortDirection {
DESCENDING,
}
export enum OnboardingOS {
WINDOWS = "windows",
MAC = "macos",
LINUX = "linux",
}
export class PartneredSatellite {
constructor(
public name: string = '',