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

web/satellite: migrated components to use pinia ab testing module instead of Vuex

Browse Source 
Migrated components to use new pinia ab testing module instead of old Vuex module.

Change-Id: Ib71ff1ad8d08829d939dee2ae87f4349bd4c33cf
This commit is contained in:
Vitalii 2023-03-17 18:18:15 +02:00
parent a588f96b90
commit 2922eeed07
10 changed files with 23 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/satellite/src/components/navigation/AccountArea.vue
View File

@ -63,10 +63,10 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MetaUtils } from '@/utils/meta';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { AB_TESTING_ACTIONS } from '@/store/modules/abTesting';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useABTestingStore } from '@/store/modules/abTestingStore';
import BillingIcon from '@/../static/images/navigation/billing.svg';
import InfoIcon from '@/../static/images/navigation/info.svg';
@ -81,6 +81,7 @@ import TierBadgePro from '@/../static/images/navigation/tierBadgePro.svg';
const store = useStore();
const router = useRouter();
const notify = useNotify();
const abTestingStore = useABTestingStore();
const auth: AuthHttpApi = new AuthHttpApi();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
@ -169,7 +170,7 @@ async function onLogout(): Promise<void> {
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLEAR),
store.dispatch(PAYMENTS_ACTIONS.CLEAR_PAYMENT_INFO),
store.dispatch(AB_TESTING_ACTIONS.RESET),
abTestingStore.reset(),
store.dispatch('files/clear'),
]);

5
web/satellite/src/components/navigation/MobileNavigation.vue
View File

@ -177,10 +177,10 @@ import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/con
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { LocalData } from '@/utils/localData';
import { MetaUtils } from '@/utils/meta';
import { AB_TESTING_ACTIONS } from '@/store/modules/abTesting';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useABTestingStore } from '@/store/modules/abTestingStore';
import ResourcesLinks from '@/components/navigation/ResourcesLinks.vue';
import QuickStartLinks from '@/components/navigation/QuickStartLinks.vue';
@ -221,6 +221,7 @@ const navigation: NavigationLink[] = [
const store = useStore();
const router = useRouter();
const notify = useNotify();
const abTestingStore = useABTestingStore();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const auth: AuthHttpApi = new AuthHttpApi();
@ -466,7 +467,7 @@ async function onLogout(): Promise<void> {
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLEAR),
store.dispatch(PAYMENTS_ACTIONS.CLEAR_PAYMENT_INFO),
store.dispatch(AB_TESTING_ACTIONS.RESET),
abTestingStore.reset(),
store.dispatch('files/clear'),
]);

3
web/satellite/src/components/notifications/UpgradeNotification.vue
View File

@ -22,8 +22,6 @@ import { ref } from 'vue';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AB_TESTING_ACTIONS } from '@/store/modules/abTesting';
import { ABHitAction } from '@/types/abtesting';
import { useStore } from '@/utils/hooks';
import SunnyIcon from '@/../static/images/notifications/sunnyicon.svg';
@ -51,7 +49,6 @@ function onCloseClick(): void {
async function openBanner(): Promise<void> {
props.openAddPMModal();
await analytics.eventTriggered(AnalyticsEvent.UPGRADE_BANNER_CLICKED);
await store.dispatch(AB_TESTING_ACTIONS.HIT, ABHitAction.UPGRADE_ACCOUNT_CLICKED);
}
</script>

5
web/satellite/src/store/index.ts
View File

@ -24,8 +24,6 @@ import { makeUsersModule } from '@/store/modules/users';
import { User } from '@/types/users';
import { FilesState, makeFilesModule } from '@/store/modules/files';
import { NavigationLink } from '@/types/navigation';
import { ABTestingState, makeABTestingModule } from '@/store/modules/abTesting';
import { ABHttpApi } from '@/api/abtesting';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
@ -38,7 +36,6 @@ const bucketsApi = new BucketsApiGql();
const projectMembersApi = new ProjectMembersApiGql();
const projectsApi = new ProjectsApiGql();
const paymentsApi = new PaymentsHttpApi();
const abTestingAPI = new ABHttpApi();
// We need to use a WebWorker factory because jest testing does not support
// WebWorkers yet. This is a way to avoid a direct dependency to `new Worker`.
@ -58,7 +55,6 @@ export interface ModulesState {
projectsModule: ProjectsState;
objectsModule: ObjectsState;
files: FilesState;
abTestingModule: ABTestingState;
}
// Satellite store (vuex)
@ -74,7 +70,6 @@ export const store = new Vuex.Store<ModulesState>({
bucketUsageModule: makeBucketsModule(bucketsApi),
objectsModule: makeObjectsModule(),
files: makeFilesModule(),
abTestingModule: makeABTestingModule(abTestingAPI),
},
});

81
web/satellite/src/store/modules/abTesting.ts
View File

@ -1,81 +0,0 @@
// Copyright (C) 2022 Storj Labs, Inc.
// See LICENSE for copying information.
import { StoreModule } from '@/types/store';
import { MetaUtils } from '@/utils/meta';
import { ABHitAction, ABTestApi, ABTestValues } from '@/types/abtesting';
export const AB_TESTING_ACTIONS = {
FETCH: 'fetchAbTestValues',
RESET: 'resetAbTestValues',
HIT: 'sendHitEvent',
};
export const AB_TESTING_MUTATIONS = {
SET: 'SET_AB_VALUES',
INIT: 'SET_AB_INITIALIZED',
};
export class ABTestingState {
public abTestValues = new ABTestValues();
public abTestingEnabled = MetaUtils.getMetaContent('ab-testing-enabled') === 'true';
public abTestingInitialized = false;
}
interface ABTestingContext {
state: ABTestingState
commit: (string, ...unknown) => void
dispatch: (string, ...unknown) => Promise<any> // eslint-disable-line @typescript-eslint/no-explicit-any
}
const {
FETCH,
RESET,
HIT,
} = AB_TESTING_ACTIONS;
const {
SET,
INIT,
} = AB_TESTING_MUTATIONS;
export function makeABTestingModule(api: ABTestApi): StoreModule<ABTestingState, ABTestingContext> {
return {
state: new ABTestingState(),
mutations: {
[SET](state: ABTestingState, values: ABTestValues): void {
state.abTestValues = values;
},
[INIT](state: ABTestingState, isInitialized = true): void {
state.abTestingInitialized = isInitialized;
},
},
actions: {
[FETCH]: async function ({ state, commit }: ABTestingContext): Promise<ABTestValues> {
if (!state.abTestingEnabled)
return state.abTestValues;
const values = await api.fetchABTestValues();
await commit(SET, values);
await commit(INIT);
return values;
},
[RESET]: async function ({ commit }: ABTestingContext) {
await commit(SET, new ABTestValues());
await commit(INIT, false);
},
[HIT]: async function ({ state, dispatch }: ABTestingContext, action: ABHitAction) {
if (!state.abTestingEnabled) return;
if (!state.abTestingInitialized) {
await dispatch(FETCH);
}
switch (action) {
case ABHitAction.UPGRADE_ACCOUNT_CLICKED:
api.sendHit(ABHitAction.UPGRADE_ACCOUNT_CLICKED).catch(_ => {});
break;
}
},
},
};
}

7
web/satellite/src/views/DashboardArea.vue
View File

@ -120,13 +120,13 @@ import { User } from '@/types/users';
import { AuthHttpApi } from '@/api/auth';
import { MetaUtils } from '@/utils/meta';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AB_TESTING_ACTIONS } from '@/store/modules/abTesting';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useABTestingStore } from '@/store/modules/abTestingStore';
import BillingNotification from '@/components/notifications/BillingNotification.vue';
import NavigationArea from '@/components/navigation/NavigationArea.vue';
@ -151,6 +151,7 @@ const store = useStore();
// TODO: will be swapped with useRouter from new version of router. remove after vue-router version upgrade.
const nativeRouter = useRouter();
const notify = useNotify();
const abTestingStore = useABTestingStore();
const router = reactive(nativeRouter);
@ -493,7 +494,7 @@ async function handleInactive(): Promise<void> {
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS),
store.dispatch(PAYMENTS_ACTIONS.CLEAR_PAYMENT_INFO),
store.dispatch(AB_TESTING_ACTIONS.RESET),
abTestingStore.reset(),
store.dispatch('files/clear'),
]);
@ -598,7 +599,7 @@ onMounted(async () => {
try {
await store.dispatch(USER_ACTIONS.GET);
await store.dispatch(USER_ACTIONS.GET_FROZEN_STATUS);
await store.dispatch(AB_TESTING_ACTIONS.FETCH);
await abTestingStore.fetchValues();
setupSessionTimers();
} catch (error) {
store.subscribeAction((action) => {

7
web/satellite/src/views/all-dashboard/AllDashboardArea.vue
View File

@ -125,7 +125,6 @@ import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { AB_TESTING_ACTIONS } from '@/store/modules/abTesting';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
import { MetaUtils } from '@/utils/meta';
import { AppState } from '@/utils/constants/appStateEnum';
@ -133,6 +132,7 @@ import { LocalData } from '@/utils/localData';
import { CouponType } from '@/types/coupons';
import { AuthHttpApi } from '@/api/auth';
import Heading from '@/views/all-dashboard/components/Heading.vue';
import { useABTestingStore } from '@/store/modules/abTestingStore';
import BillingNotification from '@/components/notifications/BillingNotification.vue';
import InactivityModal from '@/components/modals/InactivityModal.vue';
@ -154,6 +154,7 @@ const {
const router = useRouter();
const store = useStore();
const notify = useNotify();
const abTestingStore = useABTestingStore();
const analytics = new AnalyticsHttpApi();
const auth: AuthHttpApi = new AuthHttpApi();
@ -348,7 +349,7 @@ async function handleInactive(): Promise<void> {
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS),
store.dispatch(PAYMENTS_ACTIONS.CLEAR_PAYMENT_INFO),
store.dispatch(AB_TESTING_ACTIONS.RESET),
abTestingStore.reset(),
store.dispatch('files/clear'),
]);
@ -537,7 +538,7 @@ onMounted(async () => {
try {
await store.dispatch(USER_ACTIONS.GET);
await store.dispatch(USER_ACTIONS.GET_FROZEN_STATUS);
await store.dispatch(AB_TESTING_ACTIONS.FETCH);
await abTestingStore.fetchValues();
setupSessionTimers();
} catch (error) {
store.subscribeAction((action) => {

7
web/satellite/src/views/all-dashboard/components/Heading.vue
View File

@ -93,7 +93,7 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useNotify, useRoute, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import MyAccountButton from '@/views/all-dashboard/components/MyAccountButton.vue';
import {
AnalyticsErrorEventSource,
@ -113,9 +113,9 @@ import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { AB_TESTING_ACTIONS } from '@/store/modules/abTesting';
import { AuthHttpApi } from '@/api/auth';
import { MetaUtils } from '@/utils/meta';
import { useABTestingStore } from '@/store/modules/abTestingStore';
import VButton from '@/components/common/VButton.vue';
@ -135,6 +135,7 @@ import MenuIcon from '@/../static/images/navigation/menu.svg';
const router = useRouter();
const store = useStore();
const abTestingStore = useABTestingStore();
const analytics = new AnalyticsHttpApi();
const auth = new AuthHttpApi();
const notify = useNotify();
@ -242,7 +243,7 @@ async function onLogout(): Promise<void> {
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLEAR),
store.dispatch(PAYMENTS_ACTIONS.CLEAR_PAYMENT_INFO),
store.dispatch(AB_TESTING_ACTIONS.RESET),
abTestingStore.reset(),
store.dispatch('files/clear'),
]);

8
web/satellite/src/views/all-dashboard/components/MyAccountButton.vue
View File

@ -52,7 +52,7 @@
import { computed, ref } from 'vue';
import { RouteConfig } from '@/router';
import { useNotify, useRoute, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import {
APP_STATE_ACTIONS,
NOTIFICATION_ACTIONS,
@ -64,7 +64,6 @@ import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { AB_TESTING_ACTIONS } from '@/store/modules/abTesting';
import {
AnalyticsErrorEventSource,
AnalyticsEvent,
@ -73,6 +72,7 @@ import { MetaUtils } from '@/utils/meta';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AuthHttpApi } from '@/api/auth';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { useABTestingStore } from '@/store/modules/abTestingStore';
import AccountIcon from '@/../static/images/navigation/account.svg';
import ArrowDownIcon from '@/../static/images/common/dropIcon.svg';
@ -88,6 +88,8 @@ const notify = useNotify();
const analytics = new AnalyticsHttpApi();
const auth = new AuthHttpApi();
const abTestingStore = useABTestingStore();
const isHoveredOver = ref(false);
/**
@ -167,7 +169,7 @@ async function onLogout(): Promise<void> {
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLEAR),
store.dispatch(PAYMENTS_ACTIONS.CLEAR_PAYMENT_INFO),
store.dispatch(AB_TESTING_ACTIONS.RESET),
abTestingStore.reset(),
store.dispatch('files/clear'),
]);

4
web/satellite/tests/unit/ignore/views/DashboardArea.spec.ts
View File

@ -10,7 +10,6 @@ import { PaymentsMock } from '../../mock/api/payments';
import { ProjectMembersApiMock } from '../../mock/api/projectMembers';
import { ProjectsApiMock } from '../../mock/api/projects';
import { UsersApiMock } from '../../mock/api/users';
import { ABMockApi } from '../../mock/api/abtesting';
import { RouteConfig, router } from '@/router';
import { makeAccessGrantsModule } from '@/store/modules/accessGrants';
@ -25,7 +24,6 @@ import { User } from '@/types/users';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { AppState } from '@/utils/constants/appStateEnum';
import { NotificatorPlugin } from '@/utils/plugins/notificator';
import { makeABTestingModule } from '@/store/modules/abTesting';
import DashboardArea from '@/views/DashboardArea.vue';
import { AnalyticsHttpApi } from '@/api/analytics';
@ -45,7 +43,6 @@ const teamMembersModule = makeProjectMembersModule(new ProjectMembersApiMock());
const bucketsModule = makeBucketsModule(new BucketsMock());
const notificationsModule = makeNotificationsModule();
const paymentsModule = makePaymentsModule(new PaymentsMock());
const abTestingModule = makeABTestingModule(new ABMockApi());
const store = new Vuex.Store({
modules: {
@ -57,7 +54,6 @@ const store = new Vuex.Store({
appStateModule,
teamMembersModule,
paymentsModule,
abTestingModule,
},
});