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

web/satellite: use app pinia module instead of vuex module

Browse Source 
Use new pinia module instead of old vuex module.
Removed 'do you want to leave object browser with ongoing uploads?' feature for now because it doesn't make sense with project level passphrase

Change-Id: I2249ee9a497d3fa7c59b583849e70366491c3eeb
This commit is contained in:
Vitalii 2023-04-11 16:48:10 +03:00 committed by Storj Robot
parent 46debe7f24
commit fc3d31e732
96 changed files with 510 additions and 697 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/satellite/src/App.vue
View File

@ -14,14 +14,14 @@
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { PartneredSatellite } from '@/types/common';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { MetaUtils } from '@/utils/meta';
import { useNotify, useStore } from '@/utils/hooks';
import { useNotify } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import BrandedLoader from '@/components/common/BrandedLoader.vue';
import NotificationArea from '@/components/notifications/NotificationArea.vue';
const store = useStore();
const appStore = useAppStore();
const notify = useNotify();
const isLoading = ref<boolean>(true);
@ -60,7 +60,7 @@ function updateViewportVariable(): void {
*/
onMounted(async (): Promise<void> => {
try {
await store.dispatch(APP_STATE_ACTIONS.FETCH_CONFIG);
await appStore.getConfig();
} catch (error) {
// TODO: Use a harsher error-handling approach when the config is necessary
// for the frontend to function.
@ -78,7 +78,7 @@ onMounted(async (): Promise<void> => {
const couponCodeSignupUIEnabled = MetaUtils.getMetaContent('coupon-code-signup-ui-enabled');
if (satelliteName) {
store.dispatch(APP_STATE_ACTIONS.SET_SATELLITE_NAME, satelliteName);
appStore.setSatelliteName(satelliteName);
if (partneredSatellitesJSON.length) {
const partneredSatellites: PartneredSatellite[] = [];
@ -88,20 +88,20 @@ onMounted(async (): Promise<void> => {
partneredSatellites.push(sat);
}
});
store.dispatch(APP_STATE_ACTIONS.SET_PARTNERED_SATELLITES, partneredSatellites);
appStore.setPartneredSatellites(partneredSatellites);
}
}
if (isBetaSatellite) {
store.dispatch(APP_STATE_ACTIONS.SET_SATELLITE_STATUS, isBetaSatellite === 'true');
appStore.setSatelliteStatus(isBetaSatellite === 'true');
}
if (couponCodeBillingUIEnabled) {
store.dispatch(APP_STATE_ACTIONS.SET_COUPON_CODE_BILLING_UI_STATUS, couponCodeBillingUIEnabled === 'true');
appStore.setCouponCodeBillingUIStatus(couponCodeBillingUIEnabled === 'true');
}
if (couponCodeSignupUIEnabled) {
store.dispatch(APP_STATE_ACTIONS.SET_COUPON_CODE_SIGNUP_UI_STATUS, couponCodeSignupUIEnabled === 'true');
appStore.setCouponCodeSignupUIStatus(couponCodeSignupUIEnabled === 'true');
}
fixViewportHeight();

7
web/satellite/src/components/accessGrants/createFlow/components/EndDatePicker.vue
View File

@ -28,8 +28,7 @@
</template>
<script setup lang="ts">
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import VDatePicker from '@/components/common/VDatePicker.vue';
@ -38,13 +37,13 @@ const props = defineProps<{
setNotAfter: (date: Date | undefined) => void;
}>();
const store = useStore();
const appStore = useAppStore();
/**
* Closes date picker.
*/
function closePicker(): void {
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
appStore.closeDropdowns();
}
/**

9
web/satellite/src/components/accessGrants/createFlow/components/EndDateSelection.vue
View File

@ -26,9 +26,8 @@ import { computed } from 'vue';
import EndDatePicker from './EndDatePicker.vue';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { useStore } from '@/utils/hooks';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { useAppStore } from '@/store/modules/appStore';
import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
@ -38,20 +37,20 @@ const props = defineProps<{
notAfterLabel: string;
}>();
const store = useStore();
const appStore = useAppStore();
/**
* Indicates if date picker is shown.
*/
const isDatePickerVisible = computed((): boolean => {
return store.state.appStateModule.viewsState.activeDropdown === APP_STATE_DROPDOWNS.AG_DATE_PICKER;
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.AG_DATE_PICKER;
});
/**
* Toggles date picker.
*/
function togglePicker(): void {
store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.AG_DATE_PICKER);
appStore.toggleActiveDropdown(APP_STATE_DROPDOWNS.AG_DATE_PICKER);
}
</script>

18
web/satellite/src/components/account/NewSettingsArea.vue
View File

@ -104,16 +104,16 @@ import { computed, onMounted } from 'vue';
import { User } from '@/types/users';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useStore } from '@/utils/hooks';
import { useNotify } from '@/utils/hooks';
import { useLoading } from '@/composables/useLoading';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { Duration } from '@/utils/time';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
const notify = useNotify();
const { isLoading, withLoading } = useLoading();
@ -135,42 +135,42 @@ const userDuration = computed((): Duration | null => {
* Toggles enable MFA modal visibility.
*/
function toggleEnableMFAModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.enableMFA);
appStore.updateActiveModal(MODALS.enableMFA);
}
/**
* Toggles disable MFA modal visibility.
*/
function toggleDisableMFAModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.disableMFA);
appStore.updateActiveModal(MODALS.disableMFA);
}
/**
* Toggles MFA recovery codes modal visibility.
*/
function toggleMFACodesModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.mfaRecovery);
appStore.updateActiveModal(MODALS.mfaRecovery);
}
/**
* Opens change password popup.
*/
function toggleChangePasswordModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.changePassword);
appStore.updateActiveModal(MODALS.changePassword);
}
/**
* Opens edit session timeout modal.
*/
function toggleEditSessionTimeoutModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.editSessionTimeout);
appStore.updateActiveModal(MODALS.editSessionTimeout);
}
/**
* Opens edit account info modal.
*/
function toggleEditProfileModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.editProfile);
appStore.updateActiveModal(MODALS.editProfile);
}
/**

16
web/satellite/src/components/account/SettingsArea.vue
View File

@ -88,10 +88,10 @@ import { computed, onMounted } from 'vue';
import { User } from '@/types/users';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useStore } from '@/utils/hooks';
import { useNotify } from '@/utils/hooks';
import { useLoading } from '@/composables/useLoading';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
@ -99,8 +99,8 @@ import ChangePasswordIcon from '@/../static/images/account/profile/changePasswor
import EmailIcon from '@/../static/images/account/profile/email.svg';
import EditIcon from '@/../static/images/common/edit.svg';
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
const notify = useNotify();
const { isLoading, withLoading } = useLoading();
@ -122,35 +122,35 @@ const avatarLetter = computed((): string => {
* Toggles enable MFA modal visibility.
*/
function toggleEnableMFAModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.enableMFA);
appStore.updateActiveModal(MODALS.enableMFA);
}
/**
* Toggles disable MFA modal visibility.
*/
function toggleDisableMFAModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.disableMFA);
appStore.updateActiveModal(MODALS.disableMFA);
}
/**
* Toggles MFA recovery codes modal visibility.
*/
function toggleMFACodesModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.mfaRecovery);
appStore.updateActiveModal(MODALS.mfaRecovery);
}
/**
* Opens change password popup.
*/
function toggleChangePasswordModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.changePassword);
appStore.updateActiveModal(MODALS.changePassword);
}
/**
* Opens edit account info modal.
*/
function toggleEditProfileModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.editProfile);
appStore.updateActiveModal(MODALS.editProfile);
}
/**

12
web/satellite/src/components/account/billing/BillingArea.vue
View File

@ -43,16 +43,16 @@
import { computed, onMounted, reactive } from 'vue';
import { RouteConfig } from '@/router';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { NavigationLink } from '@/types/navigation';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
const appStore = useAppStore();
const billingStore = useBillingStore();
const store = useStore();
const notify = useNotify();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -63,14 +63,14 @@ const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
* Indicates if free credits dropdown shown.
*/
const isCreditsDropdownShown = computed((): boolean => {
return store.state.appStateModule.viewsState.activeDropdown === APP_STATE_DROPDOWNS.FREE_CREDITS;
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.FREE_CREDITS;
});
/**
* Indicates if available balance dropdown shown.
*/
const isBalanceDropdownShown = computed((): boolean => {
return store.state.appStateModule.viewsState.activeDropdown === APP_STATE_DROPDOWNS.AVAILABLE_BALANCE;
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.AVAILABLE_BALANCE;
});
/**
@ -97,7 +97,7 @@ function routeHas(term: string): boolean {
function closeDropdown(): void {
if (!isCreditsDropdownShown.value && !isBalanceDropdownShown.value) return;
store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, 'none');
appStore.toggleActiveDropdown('none');
}
/**

10
web/satellite/src/components/account/billing/billingTabs/Coupons.vue
View File

@ -36,9 +36,9 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
import { useNotify, useStore } from '@/utils/hooks';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import VLoader from '@/components/common/VLoader.vue';
@ -47,8 +47,8 @@ import CloudIcon from '@/../static/images/onboardingTour/cloudIcon.svg';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const appStore = useAppStore();
const billingStore = useBillingStore();
const store = useStore();
const notify = useNotify();
const isCouponFetching = ref<boolean>(true);
@ -100,7 +100,7 @@ const isActive = computed((): boolean => {
* Returns the whether applying a new coupon is enabled.
*/
const couponCodeBillingUIEnabled = computed((): boolean => {
return store.state.appStateModule.couponCodeBillingUIEnabled;
return appStore.state.couponCodeBillingUIEnabled;
});
/**
@ -111,7 +111,7 @@ function toggleCreateModal(): void {
return;
}
analytics.eventTriggered(AnalyticsEvent.APPLY_NEW_COUPON_CLICKED);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.newBillingAddCoupon);
appStore.updateActiveModal(MODALS.newBillingAddCoupon);
}
/**

10
web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue
View File

@ -97,9 +97,9 @@ import { Wallet } from '@/types/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -109,8 +109,8 @@ import InfoIcon from '@/../static/images/billing/blueInfoIcon.svg';
import StorjSmall from '@/../static/images/billing/storj-icon-small.svg';
import StorjLarge from '@/../static/images/billing/storj-icon-large.svg';
const appStore = useAppStore();
const billingStore = useBillingStore();
const store = useStore();
const notify = useNotify();
const router = useRouter();
@ -122,7 +122,7 @@ const isLoading = ref<boolean>(false);
* Returns wallet from store.
*/
const wallet = computed((): Wallet => {
return billingStore.state.wallet;
return billingStore.state.wallet as Wallet;
});
/**
@ -170,7 +170,7 @@ async function claimWalletClick(): Promise<void> {
*/
function onAddTokensClick(): void {
analytics.eventTriggered(AnalyticsEvent.ADD_FUNDS_CLICKED);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTokenFunds);
appStore.updateActiveModal(MODALS.addTokenFunds);
}
onMounted(async (): Promise<void> => {

6
web/satellite/src/components/browser/FileBrowser.vue
View File

@ -201,14 +201,13 @@ import LockedFilesEntry from './LockedFilesEntry.vue';
import BreadCrumbs from './BreadCrumbs.vue';
import { AnalyticsHttpApi } from '@/api/analytics';
import { BrowserFile } from '@/types/browser';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { RouteConfig } from '@/router';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { Bucket } from '@/types/buckets';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { BrowserObject } from '@/store/modules/files';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
import BucketSettingsNav from '@/components/objects/BucketSettingsNav.vue';
@ -220,6 +219,7 @@ import FileIcon from '@/../static/images/objects/file.svg';
import BlackArrowExpand from '@/../static/images/common/BlackArrowExpand.svg';
import UploadIcon from '@/../static/images/browser/upload.svg';
const appStore = useAppStore();
const store = useStore();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -412,7 +412,7 @@ function closeModalDropdown(): void {
* Toggle the folder creation modal in the store.
*/
function toggleFolderCreationModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.newFolder);
appStore.updateActiveModal(MODALS.newFolder);
}
/**

7
web/satellite/src/components/browser/FileEntry.vue
View File

@ -115,8 +115,8 @@ import prettyBytes from 'pretty-bytes';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { BrowserObject } from '@/store/modules/files';
import { useAppStore } from '@/store/modules/appStore';
import TableItem from '@/components/common/TableItem.vue';
@ -127,6 +127,7 @@ import DownloadIcon from '@/../static/images/objects/download.svg';
import DotsIcon from '@/../static/images/objects/dots.svg';
import CloseIcon from '@/../static/images/common/closeCross.svg';
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
const router = useRouter();
@ -237,7 +238,7 @@ const fileTypeIsFile = computed((): boolean => {
*/
function openModal(): void {
store.commit('files/setObjectPathForModal', props.path + props.file.Key);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.objectDetails);
appStore.updateActiveModal(MODALS.objectDetails);
store.dispatch('files/closeDropdown');
}
@ -427,7 +428,7 @@ function setShiftSelectedFiles(): void {
function share(): void {
store.dispatch('files/closeDropdown');
store.commit('files/setObjectPathForModal', props.path + props.file.Key);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.shareObject);
appStore.updateActiveModal(MODALS.shareObject);
}
/**

9
web/satellite/src/components/browser/LockedFilesEntry.vue
View File

@ -15,20 +15,19 @@
</template>
<script setup lang="ts">
import { useStore } from '@/utils/hooks';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { ManageProjectPassphraseStep } from '@/types/managePassphrase';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useAppStore } from '@/store/modules/appStore';
import TableItem from '@/components/common/TableItem.vue';
const store = useStore();
const appStore = useAppStore();
/**
* Open the modal for the current file.
*/
function openModal(): void {
store.commit(APP_STATE_MUTATIONS.SET_MANAGE_PASSPHRASE_STEP, ManageProjectPassphraseStep.Switch);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
appStore.setManagePassphraseStep(ManageProjectPassphraseStep.Switch);
appStore.updateActiveModal(MODALS.manageProjectPassphrase);
}
</script>

7
web/satellite/src/components/browser/MultiplePassphrasesBanner.vue
View File

@ -35,9 +35,9 @@ import { computed } from 'vue';
import { Bucket } from '@/types/buckets';
import { useStore } from '@/utils/hooks';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { ManageProjectPassphraseStep } from '@/types/managePassphrase';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useAppStore } from '@/store/modules/appStore';
import LockedIcon from '@/../static/images/browser/locked.svg';
import CloseIcon from '@/../static/images/browser/close.svg';
@ -48,6 +48,7 @@ const props = withDefaults(defineProps<{
onClose: () => {},
});
const appStore = useAppStore();
const store = useStore();
const NUMBER_OF_DISPLAYED_OBJECTS = 1000;
@ -75,8 +76,8 @@ const objectsCount = computed((): number => {
* Opens switch passphrase modal.
*/
function openManageModal(): void {
store.commit(APP_STATE_MUTATIONS.SET_MANAGE_PASSPHRASE_STEP, ManageProjectPassphraseStep.Switch);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
appStore.setManagePassphraseStep(ManageProjectPassphraseStep.Switch);
appStore.updateActiveModal(MODALS.manageProjectPassphrase);
}
</script>

7
web/satellite/src/components/modals/AddCouponCodeModal.vue
View File

@ -16,13 +16,12 @@
import { MODALS } from '@/utils/constants/appStatePopUps';
import { RouteConfig } from '@/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import AddCouponCodeInput from '@/components/common/AddCouponCodeInput.vue';
import VModal from '@/components/common/VModal.vue';
const store = useStore();
const appStore = useAppStore();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
@ -31,7 +30,7 @@ const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
*/
function onCloseClick(): void {
analytics.pageVisit(RouteConfig.Account.with(RouteConfig.Billing).path);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addCoupon);
appStore.updateActiveModal(MODALS.addCoupon);
}
</script>

5
web/satellite/src/components/modals/AddPaymentMethodModal.vue
View File

@ -137,11 +137,11 @@ import { MetaUtils } from '@/utils/meta';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { ProjectUsagePriceModel } from '@/types/payments';
import { decimalShift, formatPrice, CENTS_MB_TO_DOLLARS_TB_SHIFT } from '@/utils/strings';
import { useUsersStore } from '@/store/modules/usersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import VModal from '@/components/common/VModal.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -156,6 +156,7 @@ interface StripeForm {
onSubmit(): Promise<void>;
}
const appStore = useAppStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
const store = useStore();
@ -233,7 +234,7 @@ async function addCardToDB(token: string): Promise<void> {
* Closes add payment method modal.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addPaymentMethod);
appStore.updateActiveModal(MODALS.addPaymentMethod);
}
/**

5
web/satellite/src/components/modals/AddTeamMemberModal.vue
View File

@ -88,10 +88,10 @@ import { Validator } from '@/utils/validation';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue';
@ -101,6 +101,7 @@ import AddFieldIcon from '@/../static/images/team/addField.svg';
import AddMemberNotificationIcon from '@/../static/images/team/addMemberNotification.svg';
import DeleteFieldIcon from '@/../static/images/team/deleteField.svg';
const appStore = useAppStore();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
const store = useStore();
@ -258,7 +259,7 @@ function deleteInput(index: number): void {
* Closes modal.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTeamMember);
appStore.updateActiveModal(MODALS.addTeamMember);
}
/**

10
web/satellite/src/components/modals/AddTokenFundsModal.vue
View File

@ -78,9 +78,9 @@ import QRCode from 'qrcode';
import { Wallet } from '@/types/payments';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks';
import { useNotify } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue';
@ -88,8 +88,8 @@ import VInfo from '@/components/common/VInfo.vue';
import InfoIcon from '@/../static/images/payments/infoIcon.svg';
const appStore = useAppStore();
const billingStore = useBillingStore();
const store = useStore();
const notify = useNotify();
const canvas = ref<HTMLCanvasElement>();
@ -98,14 +98,14 @@ const canvas = ref<HTMLCanvasElement>();
* Returns wallet from store.
*/
const wallet = computed((): Wallet => {
return billingStore.state.wallet;
return billingStore.state.wallet as Wallet;
});
/**
* Closes create project prompt modal.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTokenFunds);
appStore.updateActiveModal(MODALS.addTokenFunds);
}
/**

6
web/satellite/src/components/modals/AllModals.vue
View File

@ -10,15 +10,15 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
const store = useStore();
const appStore = useAppStore();
/**
* Indicates the current active modal.
*/
const activeModal = computed((): unknown | null => {
// modal could be of VueConstructor type or Object (for composition api components).
return store.state.appStateModule.viewsState.activeModal;
return appStore.state.viewsState.activeModal;
});
</script>

8
web/satellite/src/components/modals/ChangePasswordModal.vue
View File

@ -70,8 +70,8 @@ import { RouteConfig } from '@/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import PasswordStrength from '@/components/common/PasswordStrength.vue';
import VInput from '@/components/common/VInput.vue';
@ -80,7 +80,7 @@ import VModal from '@/components/common/VModal.vue';
import ChangePasswordIcon from '@/../static/images/account/changePasswordPopup/changePassword.svg';
const store = useStore();
const appStore = useAppStore();
const notify = useNotify();
const router = useRouter();
@ -191,7 +191,7 @@ async function onUpdateClick(): Promise<void> {
* Closes popup.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.changePassword);
appStore.updateActiveModal(MODALS.changePassword);
}
</script>

7
web/satellite/src/components/modals/CreateBucketModal.vue
View File

@ -65,7 +65,7 @@ import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { MetaUtils } from '@/utils/meta';
import { LocalData } from '@/utils/localData';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useAppStore } from '@/store/modules/appStore';
import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue';
@ -74,6 +74,7 @@ import VButton from '@/components/common/VButton.vue';
import CreateBucketIcon from '@/../static/images/buckets/createBucket.svg';
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
const router = useRouter();
@ -84,7 +85,7 @@ const bucketName = ref<string>('');
const nameError = ref<string>('');
const bucketNamesLoading = ref<boolean>(true);
const isLoading = ref<boolean>(false);
const worker = ref<Worker>();
const worker = ref<Worker | null>(null);
const FILE_BROWSER_AG_NAME = 'Web file browser API key';
@ -273,7 +274,7 @@ function setBucketName(name: string): void {
* Closes create bucket modal.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createBucket);
appStore.updateActiveModal(MODALS.createBucket);
}
/**

7
web/satellite/src/components/modals/CreateProjectModal.vue
View File

@ -70,15 +70,16 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
const notify = useNotify();
@ -150,7 +151,7 @@ async function onCreateProjectClick(): Promise<void> {
closeModal();
store.commit(OBJECTS_MUTATIONS.CLEAR);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
appStore.updateActiveModal(MODALS.createProjectPassphrase);
analytics.pageVisit(RouteConfig.ProjectDashboard.path);
await router.push(RouteConfig.ProjectDashboard.path);
@ -168,7 +169,7 @@ function selectCreatedProject(): void {
* Closes create project modal.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
appStore.updateActiveModal(MODALS.createProject);
}
</script>

11
web/satellite/src/components/modals/CreateProjectPromptModal.vue
View File

@ -32,28 +32,27 @@
<script setup lang="ts">
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue';
const store = useStore();
const appStore = useAppStore();
/**
* Holds on button click logic.
* Closes this modal and opens upgrade account modal.
*/
function onClick(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addPaymentMethod);
appStore.updateActiveModal(MODALS.createProjectPrompt);
appStore.updateActiveModal(MODALS.addPaymentMethod);
}
/**
* Closes create project prompt modal.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
appStore.updateActiveModal(MODALS.createProjectPrompt);
}
</script>

5
web/satellite/src/components/modals/DeleteBucketModal.vue
View File

@ -40,8 +40,8 @@ import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { MetaUtils } from '@/utils/meta';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
@ -50,6 +50,7 @@ import VInput from '@/components/common/VInput.vue';
const FILE_BROWSER_AG_NAME = 'Web file browser API key';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
@ -180,7 +181,7 @@ function onChangeName(value: string): void {
* Closes modal.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.deleteBucket);
appStore.updateActiveModal(MODALS.deleteBucket);
}
/**

5
web/satellite/src/components/modals/DisableMFAModal.vue
View File

@ -46,9 +46,9 @@ import { ref } from 'vue';
import { DisableMFARequest } from '@/types/users';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import ConfirmMFAInput from '@/components/account/mfa/ConfirmMFAInput.vue';
import VButton from '@/components/common/VButton.vue';
@ -58,6 +58,7 @@ interface ClearInput {
clearInput(): void;
}
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
const notify = useNotify();
@ -72,7 +73,7 @@ const mfaInput = ref<ConfirmMFAInput & ClearInput>();
* Closes disable MFA modal.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.disableMFA);
appStore.updateActiveModal(MODALS.disableMFA);
}
/**

8
web/satellite/src/components/modals/EditProfileModal.vue
View File

@ -45,16 +45,16 @@ import { UpdatedUser } from '@/types/users';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks';
import { useNotify } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue';
const appStore = useAppStore();
const userStore = useUsersStore();
const store = useStore();
const notify = useNotify();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
@ -106,7 +106,7 @@ async function onUpdateClick(): Promise<void> {
* Closes modal.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.editProfile);
appStore.updateActiveModal(MODALS.editProfile);
}
</script>

10
web/satellite/src/components/modals/EditSessionTimeoutModal.vue
View File

@ -54,11 +54,11 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks';
import { useNotify } from '@/utils/hooks';
import { Duration } from '@/utils/time';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue';
@ -66,8 +66,8 @@ import TimeoutSelector from '@/components/modals/editSessionTimeout/TimeoutSelec
import Icon from '@/../static/images/session/inactivityTimer.svg';
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
const notify = useNotify();
const isLoading = ref(false);
@ -125,8 +125,8 @@ async function save() {
/**
* onClose is called to close this modal.
* */
async function onClose() {
store.commit(APP_STATE_MUTATIONS.REMOVE_ACTIVE_MODAL);
function onClose(): void {
appStore.removeActiveModal();
}
/**

10
web/satellite/src/components/modals/EnableMFAModal.vue
View File

@ -83,16 +83,16 @@ import { computed, onMounted, ref } from 'vue';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks';
import { useNotify } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import ConfirmMFAInput from '@/components/account/mfa/ConfirmMFAInput.vue';
import VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue';
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
const notify = useNotify();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
@ -109,7 +109,7 @@ const canvas = ref<HTMLCanvasElement>();
* Returns satellite name from store.
*/
const satellite = computed((): string => {
return store.state.appStateModule.satelliteName;
return appStore.state.satelliteName;
});
/**
@ -140,7 +140,7 @@ function showEnable(): void {
* Closes enable MFA modal.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.enableMFA);
appStore.updateActiveModal(MODALS.enableMFA);
}
/**

5
web/satellite/src/components/modals/EnterPassphraseModal.vue
View File

@ -41,12 +41,12 @@
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { RouteConfig } from '@/router';
import { useRouter, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import VModal from '@/components/common/VModal.vue';
import VInput from '@/components/common/VInput.vue';
@ -54,6 +54,7 @@ import VButton from '@/components/common/VButton.vue';
import EnterPassphraseIcon from '@/../static/images/buckets/openBucket.svg';
const appStore = useAppStore();
const store = useStore();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -89,7 +90,7 @@ function closeModal(isCloseButton = false): void {
router.push(RouteConfig.ProjectDashboard.path);
}
store.commit(APP_STATE_MUTATIONS.REMOVE_ACTIVE_MODAL);
appStore.removeActiveModal();
}
/**

7
web/satellite/src/components/modals/MFARecoveryCodesModal.vue
View File

@ -33,15 +33,14 @@
import { computed } from 'vue';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue';
const usersStore = useUsersStore();
const store = useStore();
const appStore = useAppStore();
/**
* Returns MFA recovery codes from store.
@ -54,7 +53,7 @@ const userMFARecoveryCodes = computed((): string[] => {
* Closes modal.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.mfaRecovery);
appStore.updateActiveModal(MODALS.mfaRecovery);
}
</script>

7
web/satellite/src/components/modals/NewBillingAddCouponCodeModal.vue
View File

@ -18,15 +18,14 @@
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import NewBillingAddCouponCodeInput from '@/components/common/NewBillingAddCouponCodeInput.vue';
import VModal from '@/components/common/VModal.vue';
import CouponIcon from '@/../static/images/account/billing/greenCoupon.svg';
const store = useStore();
const appStore = useAppStore();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
@ -35,7 +34,7 @@ const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
*/
function onCloseClick(): void {
analytics.eventTriggered(AnalyticsEvent.COUPON_CODE_APPLIED);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.newBillingAddCoupon);
appStore.updateActiveModal(MODALS.newBillingAddCoupon);
}
</script>

10
web/satellite/src/components/modals/NewCreateProjectModal.vue
View File

@ -85,10 +85,10 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useAppStore } from '@/store/modules/appStore';
import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue';
@ -97,6 +97,7 @@ import VButton from '@/components/common/VButton.vue';
import BlueBoxIcon from '@/../static/images/common/blueBox.svg';
const appStore = useAppStore();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
const store = useStore();
@ -173,12 +174,13 @@ async function onCreateProjectClick(): Promise<void> {
store.commit(OBJECTS_MUTATIONS.CLEAR);
if (usersStore.shouldOnboard && store.state.appStateModule.isAllProjectsDashboard) {
if (usersStore.shouldOnboard && appStore.state.isAllProjectsDashboard) {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
await router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
return;
}
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.enterPassphrase);
appStore.updateActiveModal(MODALS.enterPassphrase);
}
/**
@ -196,7 +198,7 @@ async function selectCreatedProject() {
* Closes create project modal.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.REMOVE_ACTIVE_MODAL);
appStore.removeActiveModal();
}
</script>

5
web/satellite/src/components/modals/NewFolderModal.vue
View File

@ -43,14 +43,15 @@ import { computed, ref } from 'vue';
import { BrowserFile } from '@/types/browser';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue';
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
@ -93,7 +94,7 @@ const createFolderEnabled = computed((): boolean => {
* Close the NewFolderModal.
*/
function close(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.newFolder);
appStore.updateActiveModal(MODALS.newFolder);
}
/**

5
web/satellite/src/components/modals/ObjectDetailsModal.vue
View File

@ -119,9 +119,9 @@ import prettyBytes from 'pretty-bytes';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks';
import { BrowserObject } from '@/store/modules/files';
import { useAppStore } from '@/store/modules/appStore';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
@ -129,6 +129,7 @@ import VLoader from '@/components/common/VLoader.vue';
import PlaceholderImage from '@/../static/images/browser/placeholder.svg';
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
@ -273,7 +274,7 @@ function download(): void {
* Close the current opened file details modal.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.objectDetails);
appStore.updateActiveModal(MODALS.objectDetails);
}
/**

5
web/satellite/src/components/modals/OpenBucketModal.vue
View File

@ -59,8 +59,8 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { Bucket } from '@/types/buckets';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import VModal from '@/components/common/VModal.vue';
import VInput from '@/components/common/VInput.vue';
@ -69,6 +69,7 @@ import VButton from '@/components/common/VButton.vue';
import OpenBucketIcon from '@/../static/images/buckets/openBucket.svg';
import OpenWarningIcon from '@/../static/images/objects/openWarning.svg';
const appStore = useAppStore();
const store = useStore();
const router = useRouter();
const notify = useNotify();
@ -151,7 +152,7 @@ async function onContinue(): Promise<void> {
function closeModal(): void {
if (isLoading.value) return;
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.openBucket);
appStore.updateActiveModal(MODALS.openBucket);
}
/**

14
web/satellite/src/components/modals/PricingPlanModal.vue
View File

@ -81,11 +81,11 @@
import { computed, ref, watch } from 'vue';
import { RouteConfig } from '@/router';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { PricingPlanInfo, PricingPlanType } from '@/types/common';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import StripeCardInput from '@/components/account/billing/paymentMethods/StripeCardInput.vue';
import VButton from '@/components/common/VButton.vue';
@ -99,9 +99,9 @@ interface StripeForm {
onSubmit(): Promise<void>;
}
const appStore = useAppStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
const store = useStore();
const router = useRouter();
const notify = useNotify();
@ -114,12 +114,12 @@ const stripeCardInput = ref<(StripeCardInput & StripeForm) | null>(null);
* Returns the pricing plan selected from the onboarding tour.
*/
const plan = computed((): PricingPlanInfo | null => {
return store.state.appStateModule.viewsState.selectedPricingPlan;
return appStore.state.viewsState.selectedPricingPlan;
});
watch(plan, () => {
if (!plan.value) {
store.commit(APP_STATE_MUTATIONS.REMOVE_ACTIVE_MODAL);
appStore.removeActiveModal();
notify.error('No pricing plan has been selected.', null);
}
});
@ -135,9 +135,9 @@ const isFree = computed((): boolean => {
* Closes the modal and advances to the next step in the onboarding tour.
*/
function onClose(): void {
store.commit(APP_STATE_MUTATIONS.REMOVE_ACTIVE_MODAL);
appStore.removeActiveModal();
if (isSuccess.value) {
if (store.state.appStateModule.isAllProjectsDashboard) {
if (appStore.state.isAllProjectsDashboard) {
router.push(RouteConfig.AllProjectsDashboard.path);
return;
}

5
web/satellite/src/components/modals/ShareBucketModal.vue
View File

@ -48,8 +48,8 @@ import { MetaUtils } from '@/utils/meta';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import VModal from '@/components/common/VModal.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -63,6 +63,7 @@ enum ButtonStates {
Copied,
}
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
@ -189,7 +190,7 @@ function setWorker(): void {
function closeModal(): void {
if (isLoading.value) return;
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.shareBucket);
appStore.updateActiveModal(MODALS.shareBucket);
}
onMounted(async () => {

5
web/satellite/src/components/modals/ShareObjectModal.vue
View File

@ -43,8 +43,8 @@
import { computed, onMounted, ref } from 'vue';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
@ -58,6 +58,7 @@ enum ButtonStates {
Copied,
}
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
@ -92,7 +93,7 @@ async function onCopy(): Promise<void> {
function closeModal(): void {
if (isLoading.value) return;
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.shareObject);
appStore.updateActiveModal(MODALS.shareObject);
}
/**

15
web/satellite/src/components/modals/createProjectPassphrase/CreateProjectPassphraseModal.vue
View File

@ -57,16 +57,16 @@
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { computed, reactive, ref } from 'vue';
import { generateMnemonic } from 'bip39';
import { useNotify, useRoute, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { RouteConfig } from '@/router';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { EdgeCredentials } from '@/types/accessGrants';
import { useAppStore } from '@/store/modules/appStore';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
@ -89,10 +89,11 @@ enum CreatePassphraseOption {
Enter = 'Enter',
}
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
const route = useRoute();
const router = useRouter();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
const selectedOption = ref<CreatePassphraseOption>(CreatePassphraseOption.Generate);
const activeStep = ref<CreateProjectPassphraseStep>(CreateProjectPassphraseStep.SelectMode);
@ -147,7 +148,7 @@ function toggleSaved(): void {
* Closes modal.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
appStore.updateActiveModal(MODALS.createProjectPassphrase);
}
/**
@ -199,7 +200,7 @@ async function onContinue(): Promise<void> {
}
if (activeStep.value === CreateProjectPassphraseStep.Success) {
if (route?.name === RouteConfig.OverviewStep.name) {
if (router.currentRoute.name === RouteConfig.OverviewStep.name) {
router.push(RouteConfig.ProjectDashboard.path);
}

15
web/satellite/src/components/modals/editSessionTimeout/TimeoutSelector.vue
View File

@ -24,16 +24,15 @@
</template>
<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { computed } from 'vue';
import { useStore } from '@/utils/hooks';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { Duration } from '@/utils/time';
import { useAppStore } from '@/store/modules/appStore';
import ArrowDownIcon from '@/../static/images/common/dropIcon.svg';
const store = useStore();
const appStore = useAppStore();
const props = defineProps<{
selected: Duration | null;
@ -57,7 +56,7 @@ const options = [
* whether the selector drop down is open
* */
const isOpen = computed((): boolean => {
return store.state.appStateModule.viewsState.activeDropdown === APP_STATE_DROPDOWNS.TIMEOUT_SELECTOR;
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.TIMEOUT_SELECTOR;
});
/**
@ -84,7 +83,7 @@ function select(option: Duration) {
* closeSelector closes the selector dropdown.
* */
function closeSelector() {
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
appStore.closeDropdowns();
}
/**
@ -92,9 +91,9 @@ function closeSelector() {
* */
function toggleSelector() {
if (isOpen.value) {
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
appStore.closeDropdowns();
} else {
store.commit(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.TIMEOUT_SELECTOR);
appStore.toggleActiveDropdown(APP_STATE_DROPDOWNS.TIMEOUT_SELECTOR);
}
}
</script>

5
web/satellite/src/components/modals/manageProjectPassphrase/ClearStep.vue
View File

@ -30,7 +30,7 @@
import { useNotify, useStore } from '@/utils/hooks';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
@ -40,6 +40,7 @@ const props = withDefaults(defineProps<{
onCancel: () => () => {},
});
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
@ -48,7 +49,7 @@ const notify = useNotify();
*/
function onClear(): void {
store.commit(OBJECTS_MUTATIONS.CLEAR);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
appStore.updateActiveModal(MODALS.manageProjectPassphrase);
notify.success('Passphrase was cleared successfully');
}
</script>

10
web/satellite/src/components/modals/manageProjectPassphrase/CreateStep.vue
View File

@ -27,10 +27,8 @@
</template>
<script setup lang="ts">
import { useStore } from '@/utils/hooks';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
@ -40,14 +38,14 @@ const props = withDefaults(defineProps<{
onCancel: () => () => {},
});
const store = useStore();
const appStore = useAppStore();
/**
* Starts create new passphrase flow.
*/
function onNext(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
appStore.updateActiveModal(MODALS.manageProjectPassphrase);
appStore.updateActiveModal(MODALS.createProjectPassphrase);
}
</script>

13
web/satellite/src/components/modals/manageProjectPassphrase/ManageProjectPassphraseModal.vue
View File

@ -32,11 +32,10 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { useNotify, useStore } from '@/utils/hooks';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { useNotify } from '@/utils/hooks';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { ManageProjectPassphraseStep } from '@/types/managePassphrase';
import { useAppStore } from '@/store/modules/appStore';
import VModal from '@/components/common/VModal.vue';
import ManageOptionsStep from '@/components/modals/manageProjectPassphrase/ManageOptionsStep.vue';
@ -46,14 +45,14 @@ import ClearStep from '@/components/modals/manageProjectPassphrase/ClearStep.vue
import LockIcon from '@/../static/images/projectPassphrase/lock.svg';
const store = useStore();
const appStore = useAppStore();
const notify = useNotify();
/**
* Returns step from store.
*/
const storedStep = computed((): ManageProjectPassphraseStep | undefined => {
return store.state.appStateModule.viewsState.managePassphraseStep;
return appStore.state.viewsState.managePassphraseStep;
});
const activeStep = ref<ManageProjectPassphraseStep>(storedStep.value || ManageProjectPassphraseStep.ManageOptions);
@ -90,11 +89,11 @@ function setManageOptions(): void {
* Closes modal.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
appStore.updateActiveModal(MODALS.manageProjectPassphrase);
}
onMounted(() => {
store.commit(APP_STATE_MUTATIONS.SET_MANAGE_PASSPHRASE_STEP, undefined);
appStore.setManagePassphraseStep(undefined);
});
</script>

7
web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue
View File

@ -42,8 +42,8 @@ import { useNotify, useStore } from '@/utils/hooks';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { EdgeCredentials } from '@/types/accessGrants';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue';
@ -54,8 +54,9 @@ const props = withDefaults(defineProps<{
onCancel: () => () => {},
});
const notify = useNotify();
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
const passphrase = ref<string>('');
const enterError = ref<string>('');
@ -89,7 +90,7 @@ async function onSwitch(): Promise<void> {
store.commit(OBJECTS_MUTATIONS.SET_PROMPT_FOR_PASSPHRASE, false);
notify.success('Passphrase was switched successfully');
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
appStore.updateActiveModal(MODALS.manageProjectPassphrase);
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.SWITCH_PROJECT_LEVEL_PASSPHRASE_MODAL);
}

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

@ -53,7 +53,7 @@ import { computed, ref } from 'vue';
import { User } from '@/types/users';
import { RouteConfig } from '@/router';
import { AuthHttpApi } from '@/api/auth';
import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
@ -61,12 +61,12 @@ import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
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 { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import BillingIcon from '@/../static/images/navigation/billing.svg';
import InfoIcon from '@/../static/images/navigation/info.svg';
@ -78,6 +78,7 @@ import LogoutIcon from '@/../static/images/navigation/logout.svg';
import TierBadgeFree from '@/../static/images/navigation/tierBadgeFree.svg';
import TierBadgePro from '@/../static/images/navigation/tierBadgePro.svg';
const appStore = useAppStore();
const store = useStore();
const router = useRouter();
const notify = useNotify();
@ -105,14 +106,14 @@ const style = computed((): Record<string, string> => {
* Indicates if account dropdown is visible.
*/
const isDropdown = computed((): boolean => {
return store.state.appStateModule.viewsState.activeDropdown === APP_STATE_DROPDOWNS.ACCOUNT;
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.ACCOUNT;
});
/**
* Returns satellite name from store.
*/
const satellite = computed((): string => {
return store.state.appStateModule.satelliteName;
return appStore.state.satelliteName;
});
/**
@ -159,7 +160,7 @@ async function onLogout(): Promise<void> {
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLEAR),
appStore.clear(),
billingStore.clear(),
abTestingStore.reset(),
store.dispatch('files/clear'),
@ -189,15 +190,14 @@ function toggleDropdown(): void {
dropdownYPos.value = accountContainer.bottom - DROPDOWN_HEIGHT - SIXTEEN_PIXELS;
dropdownXPos.value = accountContainer.right - TWENTY_PIXELS;
store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.ACCOUNT);
store.commit(APP_STATE_MUTATIONS.CLOSE_BILLING_NOTIFICATION);
appStore.toggleActiveDropdown(APP_STATE_DROPDOWNS.ACCOUNT);
}
/**
* Closes dropdowns.
*/
function closeDropdown(): void {
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
appStore.closeDropdowns();
}
</script>

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

@ -171,17 +171,17 @@ import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { NavigationLink } from '@/types/navigation';
import { Project } from '@/types/projects';
import { User } from '@/types/users';
import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { LocalData } from '@/utils/localData';
import { MetaUtils } from '@/utils/meta';
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 { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import ResourcesLinks from '@/components/navigation/ResourcesLinks.vue';
import QuickStartLinks from '@/components/navigation/QuickStartLinks.vue';
@ -219,6 +219,7 @@ const navigation: NavigationLink[] = [
RouteConfig.Users.withIcon(UsersIcon),
];
const appStore = useAppStore();
const pmStore = useProjectMembersStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
@ -241,7 +242,7 @@ const isLoading = ref<boolean>(false);
* Indicates if all projects dashboard should be used.
*/
const isAllProjectsDashboard = computed((): boolean => {
return store.state.appStateModule.isAllProjectsDashboard;
return appStore.state.isAllProjectsDashboard;
});
/**
@ -269,7 +270,7 @@ const selectedProject = computed((): Project => {
* Returns satellite name from store.
*/
const satellite = computed((): string => {
return store.state.appStateModule.satelliteName;
return appStore.state.satelliteName;
});
/**
@ -347,7 +348,7 @@ function trackClickEvent(path: string): void {
* Toggles manage passphrase modal shown.
*/
function onManagePassphraseClick(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
appStore.updateActiveModal(MODALS.manageProjectPassphrase);
}
async function onProjectClick(): Promise<void> {
@ -422,10 +423,10 @@ function onCreateLinkClick(): void {
const ownProjectsCount: number = store.getters.projectsCount(user.id);
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
appStore.updateActiveModal(MODALS.createProjectPrompt);
} else {
analytics.pageVisit(RouteConfig.CreateProject.path);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
appStore.updateActiveModal(MODALS.createProject);
}
}
@ -472,7 +473,7 @@ async function onLogout(): Promise<void> {
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLEAR),
appStore.clear(),
billingStore.clear(),
abTestingStore.reset(),
store.dispatch('files/clear'),

18
web/satellite/src/components/navigation/NavigationArea.vue
View File

@ -85,9 +85,9 @@ import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router';
import { NavigationLink } from '@/types/navigation';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { useRouter, useStore } from '@/utils/hooks';
import { useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import ProjectSelection from '@/components/navigation/ProjectSelection.vue';
import GuidesDropdown from '@/components/navigation/GuidesDropdown.vue';
@ -105,7 +105,7 @@ import ResourcesIcon from '@/../static/images/navigation/resources.svg';
import QuickStartIcon from '@/../static/images/navigation/quickStart.svg';
import ArrowIcon from '@/../static/images/navigation/arrowExpandRight.svg';
const store = useStore();
const appStore = useAppStore();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -131,21 +131,21 @@ const windowWidth = ref<number>(window.innerWidth);
* Indicates if resources dropdown shown.
*/
const isResourcesDropdownShown = computed((): boolean => {
return store.state.appStateModule.viewsState.activeDropdown === APP_STATE_DROPDOWNS.RESOURCES;
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.RESOURCES;
});
/**
* Indicates if quick start dropdown shown.
*/
const isQuickStartDropdownShown = computed((): boolean => {
return store.state.appStateModule.viewsState.activeDropdown === APP_STATE_DROPDOWNS.QUICK_START;
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.QUICK_START;
});
/**
* Indicates if all projects dashboard should be used.
*/
const isAllProjectsDashboard = computed((): boolean => {
return store.state.appStateModule.isAllProjectsDashboard;
return appStore.state.isAllProjectsDashboard;
});
/**
@ -228,7 +228,7 @@ function setQuickStartDropdownXPos(): void {
function toggleResourcesDropdown(): void {
setResourcesDropdownYPos();
setResourcesDropdownXPos();
store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.RESOURCES);
appStore.toggleActiveDropdown(APP_STATE_DROPDOWNS.RESOURCES);
}
/**
@ -237,14 +237,14 @@ function toggleResourcesDropdown(): void {
function toggleQuickStartDropdown(): void {
setQuickStartDropdownYPos();
setQuickStartDropdownXPos();
store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.QUICK_START);
appStore.toggleActiveDropdown(APP_STATE_DROPDOWNS.QUICK_START);
}
/**
* Closes dropdowns.
*/
function closeDropdowns(): void {
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
appStore.closeDropdowns();
}
/**

18
web/satellite/src/components/navigation/ProjectSelection.vue
View File

@ -63,7 +63,6 @@ import { computed, reactive, ref } from 'vue';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { LocalData } from '@/utils/localData';
@ -73,11 +72,11 @@ import { Project } from '@/types/projects';
import { User } from '@/types/users';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import VLoader from '@/components/common/VLoader.vue';
@ -88,6 +87,7 @@ import PassphraseIcon from '@/../static/images/navigation/passphrase.svg';
import ManageIcon from '@/../static/images/navigation/manage.svg';
import CreateProjectIcon from '@/../static/images/navigation/createProject.svg';
const appStore = useAppStore();
const pmStore = useProjectMembersStore();
const billingStore = useBillingStore();
const userStore = useUsersStore();
@ -129,7 +129,7 @@ const projectName = computed((): string => {
* Indicates if dropdown is shown.
*/
const isDropdownShown = computed((): boolean => {
return store.state.appStateModule.viewsState.activeDropdown === APP_STATE_DROPDOWNS.SELECT_PROJECT;
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.SELECT_PROJECT;
});
/**
@ -187,7 +187,7 @@ async function toggleSelection(): Promise<void> {
* Toggles project dropdown visibility.
*/
function toggleDropdown(): void {
store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.SELECT_PROJECT);
appStore.toggleActiveDropdown(APP_STATE_DROPDOWNS.SELECT_PROJECT);
}
/**
@ -202,7 +202,7 @@ async function onProjectSelected(projectID: string): Promise<void> {
closeDropdown();
store.commit(OBJECTS_MUTATIONS.CLEAR);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.enterPassphrase);
appStore.updateActiveModal(MODALS.enterPassphrase);
if (isBucketsView.value) {
await router.push(RouteConfig.Buckets.path).catch(() => {return; });
@ -252,7 +252,7 @@ async function onProjectSelected(projectID: string): Promise<void> {
* Closes select project dropdown.
*/
function closeDropdown(): void {
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
appStore.closeDropdowns();
}
/**
@ -272,7 +272,7 @@ function onProjectsLinkClick(): void {
* Toggles manage passphrase modal shown.
*/
function onManagePassphraseClick(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
appStore.updateActiveModal(MODALS.manageProjectPassphrase);
closeDropdown();
}
@ -288,10 +288,10 @@ function onCreateLinkClick(): void {
const ownProjectsCount: number = store.getters.projectsCount(user.id);
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
appStore.updateActiveModal(MODALS.createProjectPrompt);
} else {
analytics.pageVisit(RouteConfig.CreateProject.path);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
appStore.updateActiveModal(MODALS.createProject);
}
}

9
web/satellite/src/components/navigation/QuickStartLinks.vue
View File

@ -50,9 +50,9 @@ import { RouteConfig } from '@/router';
import { User } from '@/types/users';
import { AccessType } from '@/types/createAccessGrant';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import NewProjectIcon from '@/../static/images/navigation/newProject.svg';
import CreateAGIcon from '@/../static/images/navigation/createAccessGrant.svg';
@ -60,6 +60,7 @@ import S3Icon from '@/../static/images/navigation/s3.svg';
import UploadInCLIIcon from '@/../static/images/navigation/uploadInCLI.svg';
import UploadInWebIcon from '@/../static/images/navigation/uploadInWeb.svg';
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
const nativeRouter = useRouter();
@ -117,7 +118,7 @@ function navigateToBuckets(): void {
function navigateToCLIFlow(): void {
analytics.eventTriggered(AnalyticsEvent.UPLOAD_USING_CLI_CLICKED);
props.closeDropdowns();
store.commit(APP_STATE_MUTATIONS.SET_ONB_AG_NAME_STEP_BACK_ROUTE, router.currentRoute.path);
appStore.setOnboardingBackRoute(router.currentRoute.path);
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.AGName)).path);
router.push({ name: RouteConfig.AGName.name });
}
@ -133,10 +134,10 @@ function navigateToNewProject(): void {
const ownProjectsCount: number = store.getters.projectsCount(user.id);
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
appStore.updateActiveModal(MODALS.createProjectPrompt);
} else {
analytics.pageVisit(RouteConfig.CreateProject.path);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
appStore.updateActiveModal(MODALS.createProject);
}
}

5
web/satellite/src/components/objects/BucketDetails.vue
View File

@ -29,16 +29,17 @@ import { MONTHS_NAMES } from '@/utils/constants/date';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { AnalyticsHttpApi } from '@/api/analytics';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import BucketDetailsOverview from '@/components/objects/BucketDetailsOverview.vue';
import VOverallLoader from '@/components/common/VOverallLoader.vue';
import ArrowRightIcon from '@/../static/images/common/arrowRight.svg';
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
const nativeRouter = useRouter();
@ -111,7 +112,7 @@ async function openBucket(): Promise<void> {
return;
}
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.openBucket);
appStore.updateActiveModal(MODALS.openBucket);
}
/**

8
web/satellite/src/components/objects/BucketItem.vue
View File

@ -33,9 +33,9 @@ import { RouteConfig } from '@/router';
import { Bucket } from '@/types/buckets';
import { LocalData } from '@/utils/localData';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useResize } from '@/composables/resize';
import { useRouter, useStore } from '@/utils/hooks';
import { useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import TableItem from '@/components/common/TableItem.vue';
@ -43,7 +43,7 @@ import DeleteIcon from '@/../static/images/objects/delete.svg';
import DetailsIcon from '@/../static/images/objects/details.svg';
import DotsIcon from '@/../static/images/objects/dots.svg';
const store = useStore();
const appStore = useAppStore();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
const { screenWidth } = useResize();
@ -116,7 +116,7 @@ function closeDropdown(): void {
* Holds on delete click logic.
*/
function onDeleteClick(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.deleteBucket);
appStore.updateActiveModal(MODALS.deleteBucket);
closeDropdown();
}

16
web/satellite/src/components/objects/BucketSettingsNav.vue
View File

@ -27,22 +27,22 @@
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { computed, reactive, ref } from 'vue';
import { RouteConfig } from '@/router';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { useRoute, useRouter, useStore } from '@/utils/hooks';
import { useRouter, useStore } from '@/utils/hooks';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useAppStore } from '@/store/modules/appStore';
import ArrowDownIcon from '@/../static/images/common/dropIcon.svg';
import DetailsIcon from '@/../static/images/objects/details.svg';
import ShareIcon from '@/../static/images/objects/share.svg';
import GearIcon from '@/../static/images/common/gearIcon.svg';
const router = useRouter();
const route = useRoute();
const appStore = useAppStore();
const store = useStore();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
const props = defineProps<{
bucketName: string,
@ -72,7 +72,7 @@ function onDetailsClick(): void {
name: RouteConfig.BucketsDetails.name,
params: {
bucketName: props.bucketName,
backRoute: route?.name || '',
backRoute: router.currentRoute.name || '',
},
});
@ -83,7 +83,7 @@ function onDetailsClick(): void {
* Toggles share bucket modal.
*/
function onShareBucketClick(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.shareBucket);
appStore.updateActiveModal(MODALS.shareBucket);
isDropdownOpen.value = false;
}
</script>

7
web/satellite/src/components/objects/BucketsTable.vue
View File

@ -77,8 +77,8 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { EdgeCredentials } from '@/types/accessGrants';
import { useAppStore } from '@/store/modules/appStore';
import VTable from '@/components/common/VTable.vue';
import BucketItem from '@/components/objects/BucketItem.vue';
@ -101,6 +101,7 @@ const overallLoading = ref<boolean>(false);
const searchLoading = ref<boolean>(false);
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
const router = useRouter();
@ -158,7 +159,7 @@ const edgeCredentials = computed((): EdgeCredentials => {
* Toggles create bucket modal visibility.
*/
function onCreateBucketClick(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createBucket);
appStore.updateActiveModal(MODALS.createBucket);
}
/**
@ -228,7 +229,7 @@ async function openBucket(bucketName: string): Promise<void> {
return;
}
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.openBucket);
appStore.updateActiveModal(MODALS.openBucket);
}
onBeforeUnmount(() => {

7
web/satellite/src/components/objects/BucketsView.vue
View File

@ -28,14 +28,15 @@ import { BucketPage } from '@/types/buckets';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import EncryptionBanner from '@/components/objects/EncryptionBanner.vue';
import BucketsTable from '@/components/objects/BucketsTable.vue';
import WhitePlusIcon from '@/../static/images/common/plusWhite.svg';
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
@ -81,7 +82,7 @@ async function setBucketsView(): Promise<void> {
}
if (!bucketsPage.value.buckets.length && !wasDemoBucketCreated && !promptForPassphrase.value) {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createBucket);
appStore.updateActiveModal(MODALS.createBucket);
}
} catch (error) {
await notify.error(`Failed to setup Buckets view. ${error.message}`, AnalyticsErrorEventSource.BUCKET_PAGE);
@ -105,7 +106,7 @@ async function fetchBuckets(page = 1): Promise<void> {
* Toggles create bucket modal visibility.
*/
function onCreateBucketClick(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createBucket);
appStore.updateActiveModal(MODALS.createBucket);
}
/**

5
web/satellite/src/components/objects/UploadCancelPopup.vue
View File

@ -31,13 +31,14 @@ import { computed } from 'vue';
import { AnalyticsHttpApi } from '@/api/analytics';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useRouter, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
import WarningIcon from '@/../static/images/objects/cancelWarning.svg';
const appStore = useAppStore();
const store = useStore();
const router = useRouter();
@ -63,7 +64,7 @@ function onLeaveClick(): void {
* Close upload cancel info popup.
*/
function closePopup(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.uploadCancelPopup);
appStore.updateActiveModal(MODALS.uploadCancelPopup);
}
</script>

4
web/satellite/src/components/objects/UploadFile.vue
View File

@ -25,10 +25,12 @@ import { BucketPage } from '@/types/buckets';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import FileBrowser from '@/components/browser/FileBrowser.vue';
import UploadCancelPopup from '@/components/objects/UploadCancelPopup.vue';
const appStore = useAppStore();
const store = useStore();
const router = useRouter();
const notify = useNotify();
@ -42,7 +44,7 @@ const linksharingURL = ref<string>('');
* Indicates if upload cancel popup is visible.
*/
const isCancelUploadPopupVisible = computed((): boolean => {
return store.state.appStateModule.viewsState.activeModal === MODALS.uploadCancelPopup;
return appStore.state.viewsState.activeModal === MODALS.uploadCancelPopup;
});
/**

12
web/satellite/src/components/onboardingTour/steps/OverviewStep.vue
View File

@ -35,14 +35,14 @@ import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/ana
import { MetaUtils } from '@/utils/meta';
import { PartneredSatellite } from '@/types/common';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import OverviewContainer from '@/components/onboardingTour/steps/common/OverviewContainer.vue';
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
const notify = useNotify();
const router = useRouter();
@ -55,7 +55,7 @@ const titleLabel = ref<string>('');
* Returns satellite name.
*/
const satelliteName = computed((): string => {
return store.state.appStateModule.satelliteName;
return appStore.state.satelliteName;
});
/**
@ -64,7 +64,7 @@ const satelliteName = computed((): string => {
async function onSkip(): Promise<void> {
endOnboarding();
await router.push(projectDashboardPath);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
appStore.updateActiveModal(MODALS.createProjectPassphrase);
}
/**
@ -82,7 +82,7 @@ function onUplinkCLIClick(): void {
*/
async function onUploadInBrowserClick(): Promise<void> {
endOnboarding();
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
appStore.updateActiveModal(MODALS.createProjectPassphrase);
}
async function endOnboarding(): Promise<void> {

7
web/satellite/src/components/onboardingTour/steps/PricingPlanStep.vue
View File

@ -24,17 +24,18 @@ import { onBeforeMount, ref } from 'vue';
import { RouteConfig } from '@/router';
import { PricingPlanInfo, PricingPlanType } from '@/types/common';
import { User } from '@/types/users';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { MetaUtils } from '@/utils/meta';
import { PaymentsHttpApi } from '@/api/payments';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import PricingPlanContainer from '@/components/onboardingTour/steps/pricingPlanFlow/PricingPlanContainer.vue';
import VLoader from '@/components/common/VLoader.vue';
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
const router = useRouter();
const notify = useNotify();
const payments: PaymentsHttpApi = new PaymentsHttpApi();
@ -74,7 +75,7 @@ const plans = ref<PricingPlanInfo[]>([
onBeforeMount(async () => {
const user: User = usersStore.state.user;
let nextPath = RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path;
if (store.state.appStateModule.isAllProjectsDashboard) {
if (appStore.state.isAllProjectsDashboard) {
nextPath = RouteConfig.AllProjectsDashboard.path;
}

7
web/satellite/src/components/onboardingTour/steps/cliFlow/AGName.vue
View File

@ -30,16 +30,17 @@ import { computed, ref } from 'vue';
import { RouteConfig } from '@/router';
import { AccessGrant } from '@/types/accessGrants';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import VInput from '@/components/common/VInput.vue';
import Icon from '@/../static/images/onboardingTour/accessGrant.svg';
const appStore = useAppStore();
const store = useStore();
const router = useRouter();
const notify = useNotify();
@ -54,7 +55,7 @@ const isLoading = ref<boolean>(false);
* Returns back route from store.
*/
const backRoute = computed((): string => {
return store.state.appStateModule.viewsState.onbAGStepBackRoute;
return appStore.state.viewsState.onbAGStepBackRoute;
});
/**
@ -104,7 +105,7 @@ async function onNextClick(): Promise<void> {
isLoading.value = false;
}
store.commit(APP_STATE_MUTATIONS.SET_ONB_CLEAN_API_KEY, createdAccessGrant.secret);
appStore.setOnboardingCleanAPIKey(createdAccessGrant.secret);
name.value = '';
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.AGPermissions)).path);

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

@ -43,10 +43,10 @@ import { computed, onMounted, reactive, ref } from 'vue';
import { RouteConfig } from '@/router';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import PermissionsSelect from '@/components/onboardingTour/steps/cliFlow/PermissionsSelect.vue';
@ -57,6 +57,7 @@ import DurationSelection from '@/components/onboardingTour/steps/cliFlow/permiss
import Icon from '@/../static/images/onboardingTour/accessGrant.svg';
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
const nativeRouter = useRouter();
@ -79,7 +80,7 @@ const selectedBucketNames = computed((): string[] => {
* Returns clean API key from store.
*/
const cleanAPIKey = computed((): string => {
return store.state.appStateModule.viewsState.onbCleanApiKey;
return appStore.state.viewsState.onbCleanApiKey;
});
/**
@ -159,7 +160,7 @@ async function onNextClick(): Promise<void> {
try {
const restrictedKey = await generateRestrictedKey();
store.commit(APP_STATE_MUTATIONS.SET_ONB_API_KEY, restrictedKey);
appStore.setOnboardingAPIKey(restrictedKey);
await notify.success('Restrictions were set successfully.');
} catch (error) {
@ -169,7 +170,7 @@ async function onNextClick(): Promise<void> {
isLoading.value = false;
}
await store.commit(APP_STATE_MUTATIONS.SET_ONB_API_KEY_STEP_BACK_ROUTE, router.currentRoute.path);
appStore.setOnboardingAPIKeyStepBackRoute(router.currentRoute.path);
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.APIKey)).path);
await router.push({ name: RouteConfig.APIKey.name });
}

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

@ -26,14 +26,15 @@ import { computed, onMounted } from 'vue';
import { RouteConfig } from '@/router';
import { MetaUtils } from '@/utils/meta';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useRouter, useStore } from '@/utils/hooks';
import { useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import ValueWithCopy from '@/components/onboardingTour/steps/common/ValueWithCopy.vue';
import Icon from '@/../static/images/onboardingTour/apiKeyStep.svg';
const store = useStore();
const appStore = useAppStore();
const router = useRouter();
const satelliteAddress: string = MetaUtils.getMetaContent('satellite-nodeurl');
@ -43,14 +44,14 @@ const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
* Returns API key from store.
*/
const storedAPIKey = computed((): string => {
return store.state.appStateModule.viewsState.onbApiKey;
return appStore.state.viewsState.onbApiKey;
});
/**
* Returns back route from store.
*/
const backRoute = computed((): string => {
return store.state.appStateModule.viewsState.onbAPIKeyStepBackRoute;
return appStore.state.viewsState.onbAPIKeyStepBackRoute;
});
/**

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

@ -45,12 +45,13 @@
import { computed, ref } from 'vue';
import { ACCESS_GRANTS_MUTATIONS } from '@/store/modules/accessGrants';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
const appStore = useAppStore();
const store = useStore();
const isLoading = ref<boolean>(true);
@ -59,7 +60,7 @@ const isLoading = ref<boolean>(true);
* Indicates if dropdown is visible.
*/
const isDropdownVisible = computed((): boolean => {
return store.state.appStateModule.viewsState.activeDropdown === APP_STATE_DROPDOWNS.PERMISSIONS;
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.PERMISSIONS;
});
/**
@ -101,14 +102,14 @@ const allPermissions = computed((): boolean => {
* Toggles dropdown visibility.
*/
function toggleDropdown(): void {
store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.PERMISSIONS);
appStore.toggleActiveDropdown(APP_STATE_DROPDOWNS.PERMISSIONS);
}
/**
* Closes dropdown.
*/
function closeDropdown(): void {
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
appStore.closeDropdowns();
}
/**

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

@ -48,12 +48,13 @@
import { computed, ref } from 'vue';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import SelectionIcon from '@/../static/images/accessGrants/selection.svg';
import UnselectIcon from '@/../static/images/accessGrants/unselect.svg';
const appStore = useAppStore();
const store = useStore();
const bucketSearch = ref<string>('');
@ -104,7 +105,7 @@ function isNameSelected(name: string): boolean {
* Closes dropdown.
*/
function closeDropdown(): void {
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
appStore.closeDropdowns();
}
</script>

7
web/satellite/src/components/onboardingTour/steps/cliFlow/permissions/BucketsSelection.vue
View File

@ -20,21 +20,22 @@
<script setup lang="ts">
import { computed } from 'vue';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import BucketsDropdown from '@/components/onboardingTour/steps/cliFlow/permissions/BucketsDropdown.vue';
import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
const appStore = useAppStore();
const store = useStore();
/**
* Indicates if dropdown is shown.
*/
const isDropdownShown = computed((): boolean => {
return store.state.appStateModule.viewsState.activeDropdown === APP_STATE_DROPDOWNS.BUCKET_NAMES;
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.BUCKET_NAMES;
});
/**
@ -61,7 +62,7 @@ const storedBucketNames = computed((): string[] => {
* Toggles dropdown visibility.
*/
function toggleDropdown(): void {
store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.BUCKET_NAMES);
appStore.toggleActiveDropdown(APP_STATE_DROPDOWNS.BUCKET_NAMES);
}
</script>

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

@ -24,14 +24,15 @@
<script setup lang="ts">
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { DurationPermission } from '@/types/accessGrants';
import { useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import VDateRangePicker from '@/components/common/VDateRangePicker.vue';
const emit = defineEmits(['setLabel']);
const appStore = useAppStore();
const store = useStore();
/**
@ -131,7 +132,7 @@ function onOneYearClick(): void {
* Closes duration picker.
*/
function closePicker(): void {
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
appStore.closeDropdowns();
}
</script>

7
web/satellite/src/components/onboardingTour/steps/cliFlow/permissions/DurationSelection.vue
View File

@ -24,14 +24,15 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import DurationPicker from '@/components/onboardingTour/steps/cliFlow/permissions/DurationPicker.vue';
import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
const appStore = useAppStore();
const store = useStore();
const dateRangeLabel = ref<string>('Forever');
@ -40,7 +41,7 @@ const dateRangeLabel = ref<string>('Forever');
* Indicates if date picker is shown.
*/
const isDurationPickerVisible = computed((): boolean => {
return store.state.appStateModule.viewsState.activeDropdown === APP_STATE_DROPDOWNS.AG_DATE_PICKER;
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.AG_DATE_PICKER;
});
/**
@ -61,7 +62,7 @@ const notAfterPermission = computed((): Date | null => {
* Toggles duration picker.
*/
function togglePicker(): void {
store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.AG_DATE_PICKER);
appStore.toggleActiveDropdown(APP_STATE_DROPDOWNS.AG_DATE_PICKER);
}
/**

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

@ -39,10 +39,9 @@
import { computed, onMounted, ref } from 'vue';
import { OnboardingOS } from '@/types/common';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
const store = useStore();
const appStore = useAppStore();
const props = withDefaults(defineProps<{
isInstallStep: boolean;
@ -56,7 +55,7 @@ const osSelected = ref<OnboardingOS>(OnboardingOS.WINDOWS);
* Returns selected os from store.
*/
const storedOsSelected = computed((): OnboardingOS | null => {
return store.state.appStateModule.viewsState.onbSelectedOs;
return appStore.state.viewsState.onbSelectedOs;
});
/**
@ -85,7 +84,7 @@ const isWindows = computed((): boolean => {
*/
function setTab(os: OnboardingOS): void {
osSelected.value = os;
store.commit(APP_STATE_MUTATIONS.SET_ONB_OS, os);
appStore.setOnboardingOS(os);
}
/**

9
web/satellite/src/components/onboardingTour/steps/pricingPlanFlow/PricingPlanContainer.vue
View File

@ -42,10 +42,9 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useStore } from '@/utils/hooks';
import { PricingPlanInfo, PricingPlanType } from '@/types/common';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
@ -58,14 +57,14 @@ const props = defineProps<{
plan: PricingPlanInfo;
}>();
const store = useStore();
const appStore = useAppStore();
/**
* Sets the selected pricing plan and displays the pricing plan modal.
*/
function onActivateClick(): void {
store.commit(APP_STATE_MUTATIONS.SET_PRICING_PLAN, props.plan);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.pricingPlan);
appStore.setPricingPlan(props.plan);
appStore.updateActiveModal(MODALS.pricingPlan);
}
const isPartner = computed((): boolean => props.plan.type === PricingPlanType.PARTNER);

7
web/satellite/src/components/project/dashboard/DashboardFunctionalHeader.vue
View File

@ -68,7 +68,7 @@ import { BucketPage } from '@/types/buckets';
import { ProjectLimits } from '@/types/projects';
import { RouteConfig } from '@/router';
import { LocalData } from '@/utils/localData';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -79,6 +79,7 @@ const props = withDefaults(defineProps<{
loading: false,
});
const appStore = useAppStore();
const store = useStore();
const router = useRouter();
@ -119,14 +120,14 @@ const bucketsPage = computed((): BucketPage => {
* Toggles create project passphrase modal visibility.
*/
function onSetClick() {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
appStore.updateActiveModal(MODALS.createProjectPassphrase);
}
/**
* Toggles create bucket modal visibility.
*/
function onCreateBucketClick() {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createBucket);
appStore.updateActiveModal(MODALS.createBucket);
}
/**

7
web/satellite/src/components/project/dashboard/DateRangeSelection.vue
View File

@ -21,8 +21,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import VDateRangePicker from '@/components/common/VDateRangePicker.vue';
@ -42,7 +41,7 @@ const props = withDefaults(defineProps<{
toggle: () => {},
});
const store = useStore();
const appStore = useAppStore();
/**
* Returns formatted date range string.
@ -68,7 +67,7 @@ const pickerDateRange = computed((): Date[] => {
* Closes duration picker.
*/
function closePicker(): void {
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
appStore.closeDropdowns();
}
</script>

23
web/satellite/src/components/project/dashboard/ProjectDashboard.vue
View File

@ -156,21 +156,19 @@
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { RouteConfig } from '@/router';
import { DataStamp, Project, ProjectLimits } from '@/types/projects';
import { ProjectCharges } from '@/types/payments';
import { Dimensions, Size } from '@/utils/bytesSize';
import { ChartUtils } from '@/utils/chart';
import { AnalyticsHttpApi } from '@/api/analytics';
import { LocalData } from '@/utils/localData';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import VLoader from '@/components/common/VLoader.vue';
import InfoContainer from '@/components/project/dashboard/InfoContainer.vue';
@ -187,6 +185,7 @@ import ProjectOwnershipTag from '@/components/project/ProjectOwnershipTag.vue';
import NewProjectIcon from '@/../static/images/project/newProject.svg';
import InfoIcon from '@/../static/images/project/infoIcon.svg';
const appStore = useAppStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
const store = useStore();
@ -206,7 +205,7 @@ const chartContainer = ref<HTMLDivElement>();
* Indicates if charts date picker is shown.
*/
const isChartsDatePicker = computed((): boolean => {
return store.state.appStateModule.viewsState.activeDropdown === APP_STATE_DROPDOWNS.CHART_DATE_PICKER;
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.CHART_DATE_PICKER;
});
/**
@ -235,7 +234,7 @@ const isProAccount = computed((): boolean => {
*/
const estimatedCharges = computed((): number => {
const projID: string = store.getters.selectedProject.id;
const charges: ProjectCharges = billingStore.state.projectCharges;
const charges = billingStore.state.projectCharges;
return charges.getProjectPrice(projID);
});
@ -284,7 +283,7 @@ const chartsBeforeDate = computed((): Date => {
* Indicates if user has just logged in.
*/
const hasJustLoggedIn = computed((): boolean => {
return store.state.appStateModule.viewsState.hasJustLoggedIn;
return appStore.state.viewsState.hasJustLoggedIn;
});
/**
@ -325,7 +324,7 @@ function recalculateChartWidth(): void {
* Holds on upgrade button click logic.
*/
function onUpgradeClick(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addPaymentMethod);
appStore.updateActiveModal(MODALS.addPaymentMethod);
}
/**
@ -347,7 +346,7 @@ function usedLimitFormatted(value: number): string {
* toggleChartsDatePicker holds logic for toggling charts date picker.
*/
function toggleChartsDatePicker(): void {
store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.CHART_DATE_PICKER);
appStore.toggleActiveDropdown(APP_STATE_DROPDOWNS.CHART_DATE_PICKER);
}
/**
@ -387,7 +386,7 @@ onMounted(async (): Promise<void> => {
isServerSideEncryptionBannerHidden.value = LocalData.getServerSideEncryptionBannerHidden();
if (!store.getters.selectedProject.id) {
if (store.state.appStateModule.isAllProjectsDashboard) {
if (appStore.state.isAllProjectsDashboard) {
await router.push(RouteConfig.AllProjectsDashboard.path);
return;
}
@ -410,15 +409,15 @@ onMounted(async (): Promise<void> => {
await store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, store.getters.selectedProject.id);
if (hasJustLoggedIn.value) {
if (limits.value.objectCount > 0) {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.enterPassphrase);
appStore.updateActiveModal(MODALS.enterPassphrase);
if (!bucketWasCreated.value) {
LocalData.setBucketWasCreatedStatus();
}
} else {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
appStore.updateActiveModal(MODALS.createProjectPassphrase);
}
store.commit(APP_STATE_MUTATIONS.TOGGLE_HAS_JUST_LOGGED_IN);
appStore.toggleHasJustLoggenIn();
}
await store.dispatch(PROJECTS_ACTIONS.FETCH_DAILY_DATA, { since: past, before: now });

7
web/satellite/src/components/projectsList/ProjectsList.vue
View File

@ -58,11 +58,11 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { User } from '@/types/users';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import ProjectsListItem from '@/components/projectsList/ProjectsListItem.vue';
import VTable from '@/components/common/VTable.vue';
@ -76,6 +76,7 @@ const {
const FIRST_PAGE = 1;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const appStore = useAppStore();
const pmStore = useProjectMembersStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
@ -117,10 +118,10 @@ function onCreateClick(): void {
const ownProjectsCount: number = store.getters.projectsCount(user.id);
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
appStore.updateActiveModal(MODALS.createProjectPrompt);
} else {
analytics.pageVisit(RouteConfig.CreateProject.path);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
appStore.updateActiveModal(MODALS.createProject);
}
}

5
web/satellite/src/components/team/HeaderArea.vue
View File

@ -86,10 +86,10 @@ import { ProjectMemberHeaderState } from '@/types/projectMembers';
import { Project } from '@/types/projects';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useAppStore } from '@/store/modules/appStore';
import VInfo from '@/components/common/VInfo.vue';
import VHeader from '@/components/common/VHeader.vue';
@ -101,6 +101,7 @@ declare interface ClearSearch {
clearSearch(): void;
}
const appStore = useAppStore();
const pmStore = useProjectMembersStore();
const store = useStore();
const notify = useNotify();
@ -144,7 +145,7 @@ const userCountTitle = computed((): string => {
* Opens add team members modal.
*/
function toggleTeamMembersModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTeamMember);
appStore.updateActiveModal(MODALS.addTeamMember);
}
function onFirstDeleteClick(): void {

1
web/satellite/src/router/index.ts
View File

@ -17,7 +17,6 @@ import BillingOverview from '@/components/account/billing/billingTabs/Overview.v
import BillingPaymentMethods from '@/components/account/billing/billingTabs/PaymentMethods.vue';
import BillingHistory from '@/components/account/billing/billingTabs/BillingHistory.vue';
import BillingCoupons from '@/components/account/billing/billingTabs/Coupons.vue';
import SettingsArea from '@/components/account/SettingsArea.vue';
import Page404 from '@/components/errors/Page404.vue';
import BucketsView from '@/components/objects/BucketsView.vue';
import ObjectsArea from '@/components/objects/ObjectsArea.vue';

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

@ -7,27 +7,22 @@ import { RouteRecord } from 'vue-router';
import { AccessGrantsApiGql } from '@/api/accessGrants';
import { BucketsApiGql } from '@/api/buckets';
import { ProjectMembersApiGql } from '@/api/projectMembers';
import { ProjectsApiGql } from '@/api/projects';
import { notProjectRelatedRoutes, RouteConfig, router } from '@/router';
import { AccessGrantsState, makeAccessGrantsModule } from '@/store/modules/accessGrants';
import { makeAppStateModule, AppState } from '@/store/modules/appState';
import { BucketsState, makeBucketsModule } from '@/store/modules/buckets';
import { makeNotificationsModule, NotificationsState } from '@/store/modules/notifications';
import { makeObjectsModule, OBJECTS_ACTIONS, ObjectsState } from '@/store/modules/objects';
import { makeObjectsModule, ObjectsState } from '@/store/modules/objects';
import { makeProjectsModule, PROJECTS_MUTATIONS, ProjectsState } from '@/store/modules/projects';
import { FilesState, makeFilesModule } from '@/store/modules/files';
import { NavigationLink } from '@/types/navigation';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { FrontendConfigHttpApi } from '@/api/config';
import { useAppStore } from '@/store/modules/appStore';
Vue.use(Vuex);
const accessGrantsApi = new AccessGrantsApiGql();
const bucketsApi = new BucketsApiGql();
const projectsApi = new ProjectsApiGql();
const configApi = new FrontendConfigHttpApi();
// 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`.
@ -40,7 +35,6 @@ const webWorkerFactory = {
export interface ModulesState {
notificationsModule: NotificationsState;
accessGrantsModule: AccessGrantsState;
appStateModule: AppState;
projectsModule: ProjectsState;
objectsModule: ObjectsState;
bucketUsageModule: BucketsState;
@ -52,7 +46,6 @@ export const store = new Vuex.Store<ModulesState>({
modules: {
notificationsModule: makeNotificationsModule(),
accessGrantsModule: makeAccessGrantsModule(accessGrantsApi, webWorkerFactory),
appStateModule: makeAppStateModule(configApi),
projectsModule: makeProjectsModule(projectsApi),
bucketUsageModule: makeBucketsModule(bucketsApi),
objectsModule: makeObjectsModule(),
@ -62,7 +55,8 @@ export const store = new Vuex.Store<ModulesState>({
store.subscribe((mutation, state) => {
const currentRouteName = router.currentRoute.name;
const satelliteName = state.appStateModule.satelliteName;
const appStore = useAppStore();
const satelliteName = appStore.state.satelliteName;
switch (mutation.type) {
case PROJECTS_MUTATIONS.REMOVE:
@ -85,11 +79,13 @@ export default store;
*/
router.beforeEach(async (to, from, next) => {
if (to.name === RouteConfig.ProjectDashboard.name && from.name === RouteConfig.Login.name) {
store.commit(APP_STATE_MUTATIONS.TOGGLE_HAS_JUST_LOGGED_IN, true);
const appStore = useAppStore();
appStore.toggleHasJustLoggenIn(true);
}
if (to.name === RouteConfig.AllProjectsDashboard.name && from.name === RouteConfig.Login.name) {
store.commit(APP_STATE_MUTATIONS.TOGGLE_HAS_JUST_LOGGED_IN, true);
const appStore = useAppStore();
appStore.toggleHasJustLoggenIn(true);
}
// On very first login we try to redirect user to project dashboard
@ -97,16 +93,24 @@ router.beforeEach(async (to, from, next) => {
// That's why we toggle this flag here back to false not show create project passphrase modal again
// if user clicks 'Continue in web'.
if (to.name === RouteConfig.ProjectDashboard.name && from.name === RouteConfig.OverviewStep.name) {
store.commit(APP_STATE_MUTATIONS.TOGGLE_HAS_JUST_LOGGED_IN, false);
const appStore = useAppStore();
appStore.toggleHasJustLoggenIn(false);
}
if (to.name === RouteConfig.ProjectDashboard.name && from.name === RouteConfig.AllProjectsDashboard.name) {
store.commit(APP_STATE_MUTATIONS.TOGGLE_HAS_JUST_LOGGED_IN, false);
const appStore = useAppStore();
appStore.toggleHasJustLoggenIn(false);
}
if (!to.path.includes(RouteConfig.UploadFile.path) && (store.state.appStateModule.viewsState.activeModal !== MODALS.uploadCancelPopup)) {
const areUploadsInProgress: boolean = await store.dispatch(OBJECTS_ACTIONS.CHECK_ONGOING_UPLOADS, to.path);
if (areUploadsInProgress) return;
}
// TODO: I disabled this navigation guard because we try to get active pinia before it is initialised.
// In any case this feature is redundant since we have project level passphrase.
// if (!to.path.includes(RouteConfig.UploadFile.path)) {
// const appStore = useAppStore();
// if (appStore.state.viewsState.activeModal !== MODALS.uploadCancelPopup) {
// const areUploadsInProgress: boolean = await store.dispatch(OBJECTS_ACTIONS.CHECK_ONGOING_UPLOADS, to.path);
// if (areUploadsInProgress) return;
// }
// }
if (navigateToDefaultSubTab(to.matched, RouteConfig.Account)) {
next(RouteConfig.Account.with(RouteConfig.Billing).path);
@ -146,8 +150,10 @@ router.afterEach(({ name }, _from) => {
return;
}
const appStore = useAppStore();
if (notProjectRelatedRoutes.includes(name)) {
document.title = `${router.currentRoute.name} | ${store.state.appStateModule.satelliteName}`;
document.title = `${router.currentRoute.name} | ${appStore.state.satelliteName}`;
return;
}
@ -155,7 +161,7 @@ router.afterEach(({ name }, _from) => {
const selectedProjectName = store.state.projectsModule.selectedProject.name ?
`${store.state.projectsModule.selectedProject.name} | ` : '';
document.title = `${selectedProjectName + router.currentRoute.name} | ${store.state.appStateModule.satelliteName}`;
document.title = `${selectedProjectName + router.currentRoute.name} | ${appStore.state.satelliteName}`;
});
/**

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

@ -1,190 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { OnboardingOS, PartneredSatellite, PricingPlanInfo } from '@/types/common';
import { FetchState } from '@/utils/constants/fetchStateEnum';
import { ManageProjectPassphraseStep } from '@/types/managePassphrase';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { MetaUtils } from '@/utils/meta';
import { FrontendConfig, FrontendConfigApi } from '@/types/config';
import { StoreModule } from '@/types/store';
// Object that contains all states of views
class ViewsState {
constructor(
public fetchState = FetchState.LOADING,
public isSuccessfulPasswordResetShown = false,
public hasJustLoggedIn = false,
public onbAGStepBackRoute = '',
public onbAPIKeyStepBackRoute = '',
public onbCleanApiKey = '',
public onbApiKey = '',
public setDefaultPaymentMethodID = '',
public deletePaymentMethodID = '',
public onbSelectedOs: OnboardingOS | null = null,
public selectedPricingPlan: PricingPlanInfo | null = null,
public managePassphraseStep: ManageProjectPassphraseStep | undefined = undefined,
public activeDropdown = 'none',
// activeModal could be of VueConstructor type or Object (for composition api components).
public activeModal: unknown | null = null,
// this field is mainly used on the all projects dashboard as an exit condition
// for when the dashboard opens the pricing plan and the pricing plan navigates back repeatedly.
public hasShownPricingPlan = false,
) {}
}
export class AppState {
constructor(
public viewsState: ViewsState = new ViewsState(),
public satelliteName = '',
public partneredSatellites = new Array<PartneredSatellite>(),
public isBetaSatellite = false,
public couponCodeBillingUIEnabled = false,
public couponCodeSignupUIEnabled = false,
public isAllProjectsDashboard = MetaUtils.getMetaContent('all-projects-dashboard') === 'true',
public config: FrontendConfig = new FrontendConfig(),
) {}
}
interface AppContext {
state: AppState
commit: (string, ...unknown) => void
}
export function makeAppStateModule(configApi: FrontendConfigApi): StoreModule<AppState, AppContext> {
return {
state: new AppState(),
mutations: {
[APP_STATE_MUTATIONS.TOGGLE_SUCCESSFUL_PASSWORD_RESET](state: AppState): void {
state.viewsState.isSuccessfulPasswordResetShown = !state.viewsState.isSuccessfulPasswordResetShown;
},
[APP_STATE_MUTATIONS.TOGGLE_HAS_JUST_LOGGED_IN](state: AppState, hasJustLoggedIn: boolean | null = null): void {
if (hasJustLoggedIn === null) {
state.viewsState.hasJustLoggedIn = !state.viewsState.hasJustLoggedIn;
return;
}
state.viewsState.hasJustLoggedIn = hasJustLoggedIn;
},
[APP_STATE_MUTATIONS.CLEAR](state: AppState): void {
state.viewsState.activeModal = null;
state.viewsState.isSuccessfulPasswordResetShown = false;
state.viewsState.hasJustLoggedIn = false;
state.viewsState.onbAGStepBackRoute = '';
state.viewsState.onbAPIKeyStepBackRoute = '';
state.viewsState.onbCleanApiKey = '';
state.viewsState.onbApiKey = '';
state.viewsState.setDefaultPaymentMethodID = '';
state.viewsState.deletePaymentMethodID = '';
state.viewsState.onbSelectedOs = null;
state.viewsState.managePassphraseStep = undefined;
state.viewsState.selectedPricingPlan = null;
},
[APP_STATE_MUTATIONS.CHANGE_FETCH_STATE](state: AppState, newFetchState: FetchState): void {
state.viewsState.fetchState = newFetchState;
},
[APP_STATE_MUTATIONS.SET_SATELLITE_NAME](state: AppState, satelliteName: string): void {
state.satelliteName = satelliteName;
},
[APP_STATE_MUTATIONS.SET_PARTNERED_SATELLITES](state: AppState, partneredSatellites: PartneredSatellite[]): void {
state.partneredSatellites = partneredSatellites;
},
[APP_STATE_MUTATIONS.SET_SATELLITE_STATUS](state: AppState, isBetaSatellite: boolean): void {
state.isBetaSatellite = isBetaSatellite;
},
[APP_STATE_MUTATIONS.SET_ONB_AG_NAME_STEP_BACK_ROUTE](state: AppState, backRoute: string): void {
state.viewsState.onbAGStepBackRoute = backRoute;
},
[APP_STATE_MUTATIONS.SET_ONB_API_KEY_STEP_BACK_ROUTE](state: AppState, backRoute: string): void {
state.viewsState.onbAPIKeyStepBackRoute = backRoute;
},
[APP_STATE_MUTATIONS.SET_ONB_API_KEY](state: AppState, apiKey: string): void {
state.viewsState.onbApiKey = apiKey;
},
[APP_STATE_MUTATIONS.SET_ONB_CLEAN_API_KEY](state: AppState, apiKey: string): void {
state.viewsState.onbCleanApiKey = apiKey;
},
[APP_STATE_MUTATIONS.SET_COUPON_CODE_BILLING_UI_STATUS](state: AppState, couponCodeBillingUIEnabled: boolean): void {
state.couponCodeBillingUIEnabled = couponCodeBillingUIEnabled;
},
[APP_STATE_MUTATIONS.SET_COUPON_CODE_SIGNUP_UI_STATUS](state: AppState, couponCodeSignupUIEnabled: boolean): void {
state.couponCodeSignupUIEnabled = couponCodeSignupUIEnabled;
},
[APP_STATE_MUTATIONS.SET_ONB_OS](state: AppState, os: OnboardingOS): void {
state.viewsState.onbSelectedOs = os;
},
[APP_STATE_MUTATIONS.SET_PRICING_PLAN](state: AppState, plan: PricingPlanInfo): void {
state.viewsState.selectedPricingPlan = plan;
},
[APP_STATE_MUTATIONS.SET_MANAGE_PASSPHRASE_STEP](state: AppState, step: ManageProjectPassphraseStep | undefined): void {
state.viewsState.managePassphraseStep = step;
},
[APP_STATE_MUTATIONS.SET_CONFIG](state: AppState, config: FrontendConfig): void {
state.config = config;
},
[APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN](state: AppState, dropdown: string): void {
state.viewsState.activeDropdown = dropdown;
},
[APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL](state: AppState, modal: unknown): void {
// modal could be of VueConstructor type or Object (for composition api components).
if (state.viewsState.activeModal === modal) {
state.viewsState.activeModal = null;
return;
}
state.viewsState.activeModal = modal;
},
[APP_STATE_MUTATIONS.REMOVE_ACTIVE_MODAL](state: AppState): void {
state.viewsState.activeModal = null;
},
[APP_STATE_MUTATIONS.SET_HAS_SHOWN_PRICING_PLAN](state: AppState, value: boolean): void {
state.viewsState.hasShownPricingPlan = value;
},
},
actions: {
[APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN]: function ({ commit, state }: AppContext, dropdown: string): void {
if (state.viewsState.activeDropdown === dropdown) {
commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, 'none');
return;
}
commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, dropdown);
},
[APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_PASSWORD_RESET]: function ({ commit, state }: AppContext): void {
if (!state.viewsState.isSuccessfulPasswordResetShown) {
commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, 'none');
}
commit(APP_STATE_MUTATIONS.TOGGLE_SUCCESSFUL_PASSWORD_RESET);
},
[APP_STATE_ACTIONS.CLOSE_POPUPS]: function ({ commit }: AppContext): void {
commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, '');
},
[APP_STATE_ACTIONS.CLEAR]: function ({ commit }: AppContext): void {
commit(APP_STATE_MUTATIONS.CLEAR);
commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, '');
},
[APP_STATE_ACTIONS.CHANGE_FETCH_STATE]: function ({ commit }: AppContext, newFetchState: FetchState): void {
commit(APP_STATE_MUTATIONS.CHANGE_FETCH_STATE, newFetchState);
},
[APP_STATE_ACTIONS.SET_SATELLITE_NAME]: function ({ commit }: AppContext, satelliteName: string): void {
commit(APP_STATE_MUTATIONS.SET_SATELLITE_NAME, satelliteName);
},
[APP_STATE_ACTIONS.SET_PARTNERED_SATELLITES]: function ({ commit }: AppContext, partneredSatellites: PartneredSatellite[]): void {
commit(APP_STATE_MUTATIONS.SET_PARTNERED_SATELLITES, partneredSatellites);
},
[APP_STATE_ACTIONS.SET_SATELLITE_STATUS]: function ({ commit }: AppContext, isBetaSatellite: boolean): void {
commit(APP_STATE_MUTATIONS.SET_SATELLITE_STATUS, isBetaSatellite);
},
[APP_STATE_ACTIONS.SET_COUPON_CODE_BILLING_UI_STATUS]: function ({ commit }: AppContext, couponCodeBillingUIEnabled: boolean): void {
commit(APP_STATE_MUTATIONS.SET_COUPON_CODE_BILLING_UI_STATUS, couponCodeBillingUIEnabled);
},
[APP_STATE_ACTIONS.SET_COUPON_CODE_SIGNUP_UI_STATUS]: function ({ commit }: AppContext, couponCodeSignupUIEnabled: boolean): void {
commit(APP_STATE_MUTATIONS.SET_COUPON_CODE_SIGNUP_UI_STATUS, couponCodeSignupUIEnabled);
},
[APP_STATE_ACTIONS.FETCH_CONFIG]: async function ({ commit }: AppContext): Promise<FrontendConfig> {
const result = await configApi.get();
commit(APP_STATE_MUTATIONS.SET_CONFIG, result);
return result;
},
},
};
}

45
web/satellite/src/store/modules/appStore.ts
View File

@ -8,6 +8,9 @@ import { OnboardingOS, PartneredSatellite, PricingPlanInfo } from '@/types/commo
import { FetchState } from '@/utils/constants/fetchStateEnum';
import { ManageProjectPassphraseStep } from '@/types/managePassphrase';
import { MetaUtils } from '@/utils/meta';
import { FrontendConfig } from '@/types/config.gen';
import { FrontendConfigApi } from '@/types/config';
import { FrontendConfigHttpApi } from '@/api/config';
class ViewsState {
public fetchState = FetchState.LOADING;
@ -25,6 +28,9 @@ class ViewsState {
public activeDropdown = 'none';
// activeModal could be of VueConstructor type or Object (for composition api components).
public activeModal: unknown | null = null;
// this field is mainly used on the all projects dashboard as an exit condition
// for when the dashboard opens the pricing plan and the pricing plan navigates back repeatedly.
public hasShownPricingPlan = false;
}
export class State {
@ -35,11 +41,22 @@ export class State {
public couponCodeBillingUIEnabled = false;
public couponCodeSignupUIEnabled = false;
public isAllProjectsDashboard = MetaUtils.getMetaContent('all-projects-dashboard') === 'true';
public config: FrontendConfig = new FrontendConfig();
}
export const useAppStore = defineStore('app', () => {
const state = reactive<State>(new State());
const configApi: FrontendConfigApi = new FrontendConfigHttpApi();
async function getConfig(): Promise<FrontendConfig> {
const result = await configApi.get();
state.config = result;
return result;
}
function toggleActiveDropdown(dropdown: string): void {
if (state.viewsState.activeDropdown === dropdown) {
state.viewsState.activeDropdown = 'none';
@ -130,6 +147,10 @@ export const useAppStore = defineStore('app', () => {
state.viewsState.managePassphraseStep = step;
}
function setHasShownPricingPlan(value: boolean): void {
state.viewsState.hasShownPricingPlan = value;
}
function closeDropdowns(): void {
state.viewsState.activeDropdown = '';
}
@ -147,11 +168,33 @@ export const useAppStore = defineStore('app', () => {
state.viewsState.onbSelectedOs = null;
state.viewsState.managePassphraseStep = undefined;
state.viewsState.selectedPricingPlan = null;
state.viewsState.hasShownPricingPlan = false;
state.viewsState.activeDropdown = '';
}
return {
appState: state,
state,
getConfig,
toggleActiveDropdown,
toggleSuccessfulPasswordReset,
removeActiveModal,
toggleHasJustLoggenIn,
changeState,
setSatelliteName,
setPartneredSatellites,
setSatelliteStatus,
setOnboardingBackRoute,
setOnboardingAPIKeyStepBackRoute,
setOnboardingAPIKey,
setOnboardingCleanAPIKey,
setCouponCodeBillingUIStatus,
setCouponCodeSignupUIStatus,
setOnboardingOS,
setPricingPlan,
setManagePassphraseStep,
setHasShownPricingPlan,
closeDropdowns,
updateActiveModal,
clear,
};
});

7
web/satellite/src/store/modules/files.ts
View File

@ -5,8 +5,8 @@ import S3, { CommonPrefix } from 'aws-sdk/clients/s3';
import { StoreModule } from '@/types/store';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useAppStore } from '@/store/modules/appStore';
const listCache = new Map();
@ -565,7 +565,8 @@ export const makeFilesModule = (): FilesModule => ({
if (uploadedFiles.length === 1) {
if (state.openModalOnFirstUpload === true) {
commit('setObjectPathForModal', params.Key);
commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.objectDetails, { root: true });
const appStore = useAppStore();
appStore.updateActiveModal(MODALS.objectDetails);
}
}
@ -606,7 +607,7 @@ export const makeFilesModule = (): FilesModule => ({
}
},
async deleteFolder({ commit, dispatch, state }, { file, path }) {
async deleteFolder({ commit, dispatch, state }: FilesContext, { file, path }) {
assertIsInitialized(state);
async function recurse(filePath) {

4
web/satellite/src/store/modules/objectBrowserStore.ts
View File

@ -427,8 +427,8 @@ export const useFilesStore = defineStore('files', () => {
if (state.openModalOnFirstUpload) {
state.objectPathForModal = params.Key;
const { updateActiveModal } = useAppStore();
updateActiveModal(MODALS.objectDetails);
const appStore = useAppStore();
appStore.updateActiveModal(MODALS.objectDetails);
}
}

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

@ -6,11 +6,11 @@ import S3, { Bucket } from 'aws-sdk/clients/s3';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { FilesState } from '@/store/modules/files';
import { StoreModule } from '@/types/store';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { MetaUtils } from '@/utils/meta';
import { useAppStore } from '@/store/modules/appStore';
export const OBJECTS_ACTIONS = {
CLEAR: 'clearObjects',
@ -318,7 +318,8 @@ export function makeObjectsModule(): StoreModule<ObjectsState, ObjectsContext> {
}
commit(SET_LEAVE_ROUTE, leaveRoute);
commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.uploadCancelPopup, null, { root: true });
const appStore = useAppStore();
appStore.updateActiveModal(MODALS.uploadCancelPopup);
return true;
},

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

@ -8,27 +8,3 @@ export const NOTIFICATION_MUTATIONS = {
RESUME: 'RESUME_NOTIFICATION',
CLEAR: 'CLEAR_NOTIFICATIONS',
};
export const APP_STATE_MUTATIONS = {
TOGGLE_SUCCESSFUL_PASSWORD_RESET: 'TOGGLE_SUCCESSFUL_PASSWORD_RESET',
TOGGLE_HAS_JUST_LOGGED_IN: 'TOGGLE_HAS_JUST_LOGGED_IN',
CLEAR: 'CLEAR_APPSTATE',
CHANGE_FETCH_STATE: 'CHANGE_FETCH_STATE',
SET_SATELLITE_NAME: 'SET_SATELLITE_NAME',
SET_PARTNERED_SATELLITES: 'SET_PARTNERED_SATELLITES',
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_AG_NAME_STEP_BACK_ROUTE: 'SET_ONB_AG_NAME_STEP_BACK_ROUTE',
SET_ONB_API_KEY_STEP_BACK_ROUTE: 'SET_ONB_API_KEY_STEP_BACK_ROUTE',
SET_ONB_API_KEY: 'SET_ONB_API_KEY',
SET_ONB_CLEAN_API_KEY: 'SET_ONB_CLEAN_API_KEY',
SET_ONB_OS: 'SET_ONB_OS',
SET_MANAGE_PASSPHRASE_STEP: 'SET_MANAGE_PASSPHRASE_STEP',
TOGGLE_ACTIVE_DROPDOWN: 'TOGGLE_ACTIVE_DROPDOWN',
UPDATE_ACTIVE_MODAL: 'UPDATE_ACTIVE_MODAL',
REMOVE_ACTIVE_MODAL: 'REMOVE_ACTIVE_MODAL',
SET_PRICING_PLAN: 'SET_PRICING_PLAN',
SET_CONFIG: 'SET_CONFIG',
SET_HAS_SHOWN_PRICING_PLAN: 'SET_HAS_SHOWN_PRICING_PLAN',
};

15
web/satellite/src/utils/constants/actionNames.ts
View File

@ -1,21 +1,6 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
export const APP_STATE_ACTIONS = {
TOGGLE_SUCCESSFUL_PASSWORD_RESET: 'TOGGLE_SUCCESSFUL_PASSWORD_RESET',
CLOSE_POPUPS: 'closePopups',
CLEAR: 'clearAppstate',
CHANGE_FETCH_STATE: 'changeFetchState',
SET_SATELLITE_NAME: 'SET_SATELLITE_NAME',
SET_PARTNERED_SATELLITES: 'SET_PARTNERED_SATELLITES',
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_ENCRYPTION_PASSPHRASE_FLOW_STATUS: 'SET_ENCRYPTION_PASSPHRASE_FLOW_STATUS',
TOGGLE_ACTIVE_DROPDOWN: 'TOGGLE_ACTIVE_DROPDOWN',
FETCH_CONFIG: 'FETCH_CONFIG',
};
export const NOTIFICATION_ACTIONS = {
SUCCESS: 'success',
ERROR: 'error',

5
web/satellite/src/views/AuthorizeArea.vue
View File

@ -96,13 +96,13 @@ import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { Project } from '@/types/projects';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { FetchState } from '@/utils/constants/fetchStateEnum';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { OAuthClient, OAuthClientsAPI } from '@/api/oauthClients';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import VInput from '@/components/common/VInput.vue';
@ -117,6 +117,7 @@ const validPerms = {
'delete': true,
};
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
const notify = useNotify();
@ -188,7 +189,7 @@ async function ensureLogin(): Promise<void> {
await usersStore.getUser();
} catch (error) {
if (!(error instanceof ErrorUnauthorized)) {
await store.dispatch(APP_STATE_ACTIONS.CHANGE_FETCH_STATE, FetchState.ERROR);
appStore.changeState(FetchState.ERROR);
await notify.error(error.message, null);
}

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

@ -106,7 +106,7 @@ import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { CouponType } from '@/types/coupons';
import { Project } from '@/types/projects';
import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { FetchState } from '@/utils/constants/fetchStateEnum';
import { LocalData } from '@/utils/localData';
import { User } from '@/types/users';
@ -118,11 +118,11 @@ 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 { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import NavigationArea from '@/components/navigation/NavigationArea.vue';
import InactivityModal from '@/components/modals/InactivityModal.vue';
@ -136,6 +136,7 @@ import UpgradeNotification from '@/components/notifications/UpgradeNotification.
import ProjectLimitBanner from '@/components/notifications/ProjectLimitBanner.vue';
import BrandedLoader from '@/components/common/BrandedLoader.vue';
const appStore = useAppStore();
const billingStore = useBillingStore();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
@ -258,7 +259,7 @@ const isNavigationHidden = computed((): boolean => {
/* whether all projects dashboard should be used */
const isAllProjectsDashboard = computed((): boolean => {
return store.state.appStateModule.isAllProjectsDashboard;
return appStore.state.isAllProjectsDashboard;
});
/* whether the project limit banner should be shown. */
@ -312,14 +313,14 @@ const isOnboardingTour = computed((): boolean => {
* Indicates if satellite is in beta.
*/
const isBetaSatellite = computed((): boolean => {
return store.state.appStateModule.isBetaSatellite;
return appStore.state.isBetaSatellite;
});
/**
* Indicates if loading screen is active.
*/
const isLoading = computed((): boolean => {
return store.state.appStateModule.viewsState.fetchState === FetchState.LOADING;
return appStore.state.viewsState.fetchState === FetchState.LOADING;
});
/**
@ -486,7 +487,7 @@ async function handleInactive(): Promise<void> {
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS),
appStore.clear(),
billingStore.clear(),
abTestingStore.reset(),
store.dispatch('files/clear'),
@ -519,7 +520,7 @@ function setIsHundredLimitModalShown(value: boolean): void {
* Toggles MFA recovery modal visibility.
*/
function toggleMFARecoveryModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.mfaRecovery);
appStore.updateActiveModal(MODALS.mfaRecovery);
}
/**
@ -540,7 +541,7 @@ async function generateNewMFARecoveryCodes(): Promise<void> {
function togglePMModal(): void {
isHundredLimitModalShown.value = false;
isEightyLimitModalShown.value = false;
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addPaymentMethod);
appStore.updateActiveModal(MODALS.addPaymentMethod);
}
/**
@ -591,7 +592,7 @@ onMounted(async () => {
});
if (!(error instanceof ErrorUnauthorized)) {
await store.dispatch(APP_STATE_ACTIONS.CHANGE_FETCH_STATE, FetchState.ERROR);
appStore.changeState(FetchState.ERROR);
await notify.error(error.message, AnalyticsErrorEventSource.OVERALL_APP_WRAPPER_ERROR);
}
@ -634,7 +635,7 @@ onMounted(async () => {
return;
}
if (!store.state.appStateModule.isAllProjectsDashboard) {
if (!appStore.state.isAllProjectsDashboard) {
try {
if (!projects.length) {
await store.dispatch(PROJECTS_ACTIONS.CREATE_DEFAULT_PROJECT, usersStore.state.user.id);
@ -647,7 +648,7 @@ onMounted(async () => {
await analytics.pageVisit(onboardingPath);
await router.push(onboardingPath);
await store.dispatch(APP_STATE_ACTIONS.CHANGE_FETCH_STATE, FetchState.LOADED);
appStore.changeState(FetchState.LOADED);
return;
}
} catch (error) {
@ -656,7 +657,7 @@ onMounted(async () => {
}
}
await store.dispatch(APP_STATE_ACTIONS.CHANGE_FETCH_STATE, FetchState.LOADED);
appStore.changeState(FetchState.LOADED);
});
onBeforeUnmount(() => {

9
web/satellite/src/views/ForgotPassword.vue
View File

@ -105,7 +105,8 @@ import { PartneredSatellite } from '@/types/common';
import { Validator } from '@/utils/validation';
import { MetaUtils } from '@/utils/meta';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import VInput from '@/components/common/VInput.vue';
import VButton from '@/components/common/VButton.vue';
@ -116,7 +117,7 @@ import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
import SelectedCheckIcon from '@/../static/images/common/selectedCheck.svg';
import BottomArrowIcon from '@/../static/images/common/lightBottomArrow.svg';
const store = useStore();
const appStore = useAppStore();
const notify = useNotify();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -142,14 +143,14 @@ const captcha = ref<VueRecaptcha | VueHcaptcha>();
* Name of the current satellite.
*/
const satelliteName = computed((): string => {
return store.state.appStateModule.satelliteName;
return appStore.state.satelliteName;
});
/**
* Information about partnered satellites, including name and signup link.
*/
const partneredSatellites = computed((): PartneredSatellite[] => {
return store.state.appStateModule.partneredSatellites;
return appStore.state.partneredSatellites;
});
/**

11
web/satellite/src/views/LoginArea.vue
View File

@ -166,7 +166,6 @@ import { computed, onMounted, ref } from 'vue';
import { AuthHttpApi } from '@/api/auth';
import { ErrorMFARequired } from '@/api/errors/ErrorMFARequired';
import { RouteConfig } from '@/router';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { FetchState } from '@/utils/constants/fetchStateEnum';
import { Validator } from '@/utils/validation';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
@ -178,6 +177,7 @@ import { LocalData } from '@/utils/localData';
import { useNotify, useRoute, useRouter, useStore } from '@/utils/hooks';
import { PartneredSatellite } from '@/types/common';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue';
@ -227,6 +227,7 @@ const registerPath: string = RouteConfig.Register.path;
const auth = new AuthHttpApi();
const analytics = new AnalyticsHttpApi();
const appStore = useAppStore();
const usersStore = useUsersStore();
const router = useRouter();
const notify = useNotify();
@ -237,14 +238,14 @@ const route = useRoute();
* Name of the current satellite.
*/
const satelliteName = computed((): string => {
return store.state.appStateModule.satelliteName;
return appStore.state.satelliteName;
});
/**
* Information about partnered satellites, including name and signup link.
*/
const partneredSatellites = computed((): PartneredSatellite[] => {
return store.state.appStateModule.partneredSatellites;
return appStore.state.partneredSatellites;
});
/**
@ -255,7 +256,7 @@ onMounted(() => {
isActivatedBannerShown.value = !!route.query.activated;
isActivatedError.value = route.query.activated === 'false';
if (store.state.appStateModule.isAllProjectsDashboard) {
if (appStore.state.isAllProjectsDashboard) {
returnURL.value = RouteConfig.AllProjectsDashboard.path;
}
@ -445,7 +446,7 @@ async function login(): Promise<void> {
}
usersStore.login();
await store.dispatch(APP_STATE_ACTIONS.CHANGE_FETCH_STATE, FetchState.LOADING);
appStore.changeState(FetchState.LOADING);
isLoading.value = false;
analytics.pageVisit(returnURL.value);

12
web/satellite/src/views/ResetPassword.vue
View File

@ -80,12 +80,12 @@ import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { AuthHttpApi } from '@/api/auth';
import { ErrorMFARequired } from '@/api/errors/ErrorMFARequired';
import { RouteConfig } from '@/router';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { Validator } from '@/utils/validation';
import { MetaUtils } from '@/utils/meta';
import { AnalyticsHttpApi } from '@/api/analytics';
import { ErrorTokenExpired } from '@/api/errors/ErrorTokenExpired';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import PasswordStrength from '@/components/common/PasswordStrength.vue';
import VInput from '@/components/common/VInput.vue';
@ -95,7 +95,7 @@ import KeyIcon from '@/../static/images/resetPassword/success.svg';
import LogoIcon from '@/../static/images/logo.svg';
import GreyWarningIcon from '@/../static/images/common/greyWarning.svg';
const store = useStore();
const appStore = useAppStore();
const notify = useNotify();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -122,7 +122,7 @@ const mfaInput = ref<ConfirmMFAInput>();
* Returns whether the successful password reset area is shown.
*/
const isSuccessfulPasswordResetShown = computed(() : boolean => {
return store.state.appStateModule.viewsState.isSuccessfulPasswordResetShown;
return appStore.state.viewsState.isSuccessfulPasswordResetShown;
});
/**
@ -140,7 +140,7 @@ async function onResetClick(): Promise<void> {
try {
await auth.resetPassword(token.value, password.value, passcode.value.trim(), recoveryCode.value.trim());
await store.dispatch(APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_PASSWORD_RESET);
appStore.toggleSuccessfulPasswordReset();
} catch (error) {
isLoading.value = false;
@ -258,7 +258,7 @@ function onConfirmInput(value: string): void {
*/
onBeforeUnmount((): void => {
if (isSuccessfulPasswordResetShown.value) {
store.dispatch(APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_PASSWORD_RESET);
appStore.toggleSuccessfulPasswordReset();
}
});

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

@ -101,21 +101,17 @@
</template>
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { User } from '@/types/users';
import {
AnalyticsErrorEventSource,
} from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify, useRoute, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { RouteConfig } from '@/router';
import {
APP_STATE_ACTIONS,
NOTIFICATION_ACTIONS,
} from '@/utils/constants/actionNames';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
@ -131,6 +127,7 @@ import { useABTestingStore } from '@/store/modules/abTestingStore';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import InactivityModal from '@/components/modals/InactivityModal.vue';
import BetaSatBar from '@/components/infoBars/BetaSatBar.vue';
@ -143,13 +140,15 @@ import ProjectLimitBanner from '@/components/notifications/ProjectLimitBanner.vu
import LoaderImage from '@/../static/images/common/loadIcon.svg';
const router = useRouter();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
const store = useStore();
const notify = useNotify();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore();
const billingStore = useBillingStore();
const appStore = useAppStore();
const analytics = new AnalyticsHttpApi();
const auth: AuthHttpApi = new AuthHttpApi();
@ -258,21 +257,21 @@ const limitState = computed((): LimitedState => {
* Whether the current route is the billing page.
*/
const isBillingPage = computed(() => {
return useRoute().path.includes(RouteConfig.Billing2.path);
return router.currentRoute.path.includes(RouteConfig.Billing2.path);
});
/**
* Indicates if satellite is in beta.
*/
const isBetaSatellite = computed((): boolean => {
return store.state.appStateModule.isBetaSatellite;
return appStore.state.isBetaSatellite;
});
/**
* Indicates if loading screen is active.
*/
const isLoading = computed((): boolean => {
return store.state.appStateModule.viewsState.fetchState === FetchState.LOADING;
return appStore.state.viewsState.fetchState === FetchState.LOADING;
});
/**
@ -346,7 +345,7 @@ async function handleInactive(): Promise<void> {
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS),
appStore.clear(),
billingStore.clear(),
abTestingStore.reset(),
store.dispatch('files/clear'),
@ -383,7 +382,7 @@ async function generateNewMFARecoveryCodes(): Promise<void> {
* Toggles MFA recovery modal visibility.
*/
function toggleMFARecoveryModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.mfaRecovery);
appStore.updateActiveModal(MODALS.mfaRecovery);
}
/**
@ -399,7 +398,7 @@ function closeInactivityModal(): void {
function togglePMModal(): void {
isHundredLimitModalShown.value = false;
isEightyLimitModalShown.value = false;
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addPaymentMethod);
appStore.updateActiveModal(MODALS.addPaymentMethod);
}
/**
@ -535,7 +534,7 @@ onMounted(async () => {
});
if (!(error instanceof ErrorUnauthorized)) {
await store.dispatch(APP_STATE_ACTIONS.CHANGE_FETCH_STATE, FetchState.ERROR);
appStore.changeState(FetchState.ERROR);
await notify.error(error.message, AnalyticsErrorEventSource.ALL_PROJECT_DASHBOARD);
}
@ -576,10 +575,10 @@ onMounted(async () => {
return;
}
await store.dispatch(APP_STATE_ACTIONS.CHANGE_FETCH_STATE, FetchState.LOADED);
appStore.changeState(FetchState.LOADED);
if (usersStore.shouldOnboard && !store.state.appStateModule.viewsState.hasShownPricingPlan) {
store.commit(APP_STATE_MUTATIONS.SET_HAS_SHOWN_PRICING_PLAN, true);
if (usersStore.shouldOnboard && !appStore.state.viewsState.hasShownPricingPlan) {
appStore.setHasShownPricingPlan(true);
// if the user is not legible for a pricing plan, they'll automatically be
// navigated back to all projects dashboard.
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.PricingPlanStep).path);

11
web/satellite/src/views/all-dashboard/components/EmptyProjectItem.vue
View File

@ -30,20 +30,19 @@
<script setup lang="ts">
import { useStore } from '@/utils/hooks';
import {
AnalyticsEvent,
} from '@/utils/constants/analyticsEventNames';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { User } from '@/types/users';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
import BoxIcon from '@/../static/images/allDashboard/box.svg';
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
const analytics = new AnalyticsHttpApi();
@ -58,10 +57,10 @@ function onCreateProjectClicked(): void {
const ownProjectsCount: number = store.getters.projectsCount(user.id);
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
appStore.updateActiveModal(MODALS.createProjectPrompt);
} else {
analytics.pageVisit(RouteConfig.CreateProject.path);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.newCreateProject);
appStore.updateActiveModal(MODALS.newCreateProject);
}
}
</script>

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

@ -102,10 +102,7 @@ import {
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router';
import { User } from '@/types/users';
import {
APP_STATE_ACTIONS,
NOTIFICATION_ACTIONS,
} from '@/utils/constants/actionNames';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
@ -115,6 +112,7 @@ import { useABTestingStore } from '@/store/modules/abTestingStore';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
@ -136,6 +134,7 @@ const store = useStore();
const router = useRouter();
const notify = useNotify();
const appStore = useAppStore();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore();
@ -153,7 +152,7 @@ const isNavOpened = ref(false);
* Returns satellite name from store.
*/
const satellite = computed((): string => {
return store.state.appStateModule.satelliteName;
return appStore.state.satelliteName;
});
/**
@ -183,7 +182,7 @@ function toggleNavigation(): void {
function goToProjects(): void {
toggleNavigation();
// this will close MyAccountButton.vue if it's open.
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
appStore.closeDropdowns();
const projects = RouteConfig.AllProjectsDashboard.path;
if (router.currentRoute.path.includes(projects)) {
@ -238,7 +237,7 @@ async function onLogout(): Promise<void> {
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLEAR),
appStore.clear(),
billingStore.clear(),
abTestingStore.reset(),
store.dispatch('files/clear'),

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

@ -53,10 +53,7 @@ import { computed, ref } from 'vue';
import { RouteConfig } from '@/router';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import {
APP_STATE_ACTIONS,
NOTIFICATION_ACTIONS,
} from '@/utils/constants/actionNames';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
@ -72,6 +69,7 @@ import { useABTestingStore } from '@/store/modules/abTestingStore';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import AccountIcon from '@/../static/images/navigation/account.svg';
import ArrowDownIcon from '@/../static/images/common/dropIcon.svg';
@ -88,6 +86,7 @@ const notify = useNotify();
const analytics = new AnalyticsHttpApi();
const auth = new AuthHttpApi();
const appStore = useAppStore();
const pmStore = useProjectMembersStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
@ -99,22 +98,22 @@ const isHoveredOver = ref(false);
* Indicates if account dropdown is open.
*/
const isDropdownOpen = computed((): boolean => {
return store.state.appStateModule.viewsState.activeDropdown === APP_STATE_DROPDOWNS.ALL_DASH_ACCOUNT;
return appStore.state.viewsState.activeDropdown === APP_STATE_DROPDOWNS.ALL_DASH_ACCOUNT;
});
/**
* Returns satellite name from store.
*/
const satellite = computed((): string => {
return store.state.appStateModule.satelliteName;
return appStore.state.satelliteName;
});
function openDropdown(): void {
store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.ALL_DASH_ACCOUNT);
appStore.toggleActiveDropdown(APP_STATE_DROPDOWNS.ALL_DASH_ACCOUNT);
}
function closeDropdown(): void {
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
appStore.closeDropdowns();
}
/**
@ -163,7 +162,7 @@ async function onLogout(): Promise<void> {
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLEAR),
appStore.clear(),
billingStore.clear(),
abTestingStore.reset(),
store.dispatch('files/clear'),

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

@ -35,17 +35,18 @@ import {
AnalyticsEvent,
} from '@/utils/constants/analyticsEventNames';
import { User } from '@/types/users';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { AnalyticsHttpApi } from '@/api/analytics';
import EmptyProjectItem from '@/views/all-dashboard/components/EmptyProjectItem.vue';
import ProjectItem from '@/views/all-dashboard/components/ProjectItem.vue';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
import RocketIcon from '@/../static/images/common/rocket.svg';
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
const router = useRouter();
@ -70,10 +71,10 @@ function onCreateProjectClicked(): void {
const ownProjectsCount: number = store.getters.projectsCount(user.id);
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
appStore.updateActiveModal(MODALS.createProjectPrompt);
} else {
analytics.pageVisit(RouteConfig.CreateProject.path);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.newCreateProject);
appStore.updateActiveModal(MODALS.newCreateProject);
}
}
</script>

16
web/satellite/src/views/all-dashboard/components/ProjectItem.vue
View File

@ -50,20 +50,17 @@ import { computed } from 'vue';
import { Project } from '@/types/projects';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import {
AnalyticsEvent,
} from '@/utils/constants/analyticsEventNames';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { User } from '@/types/users';
import { AnalyticsHttpApi } from '@/api/analytics';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { LocalData } from '@/utils/localData';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { RouteConfig } from '@/router';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useAppStore } from '@/store/modules/appStore';
import VButton from '@/components/common/VButton.vue';
import ProjectOwnershipTag from '@/components/project/ProjectOwnershipTag.vue';
@ -72,6 +69,7 @@ import GearIcon from '@/../static/images/common/gearIcon.svg';
import UsersIcon from '@/../static/images/navigation/users.svg';
import MenuIcon from '@/../static/images/allDashboard/menu.svg';
const appStore = useAppStore();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
const store = useStore();
@ -90,7 +88,7 @@ const props = withDefaults(defineProps<{
* isDropdownOpen if dropdown is open.
*/
const isDropdownOpen = computed((): boolean => {
return store.state.appStateModule.viewsState.activeDropdown === props.project.id;
return appStore.state.viewsState.activeDropdown === props.project.id;
});
/**
@ -108,11 +106,11 @@ const isOwner = computed((): boolean => {
});
function toggleDropDown() {
store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, props.project.id);
appStore.toggleActiveDropdown(props.project.id);
}
function closeDropDown() {
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
appStore.closeDropdowns();
}
/**
@ -126,7 +124,7 @@ async function onOpenClicked(): Promise<void> {
return;
}
await analytics.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.enterPassphrase);
appStore.updateActiveModal(MODALS.enterPassphrase);
}
async function selectProject() {

32
web/satellite/src/views/registration/RegisterArea.vue
View File

@ -281,7 +281,7 @@
<script setup lang="ts">
import VueRecaptcha from 'vue-recaptcha';
import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
import { computed, onBeforeMount, ref } from 'vue';
import { computed, onBeforeMount, reactive, ref } from 'vue';
import BottomArrowIcon from '../../../static/images/common/lightBottomArrow.svg';
import SelectedCheckIcon from '../../../static/images/common/selectedCheck.svg';
@ -295,7 +295,8 @@ import { User } from '@/types/users';
import { MetaUtils } from '@/utils/meta';
import { Validator } from '@/utils/validation';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify, useRoute, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import SelectInput from '@/components/common/SelectInput.vue';
import PasswordStrength from '@/components/common/PasswordStrength.vue';
@ -365,26 +366,27 @@ const captcha = ref<VueRecaptcha | VueHcaptcha | null>(null);
const analytics = new AnalyticsHttpApi();
const auth = new AuthHttpApi();
const appStore = useAppStore();
const notify = useNotify();
const router = useRouter();
const store = useStore();
const route = useRoute();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
/**
* Lifecycle hook before initial render.
* Sets up variables from route params and loads config.
*/
onBeforeMount(() => {
if (route.query.token) {
secret.value = route.query.token.toString();
if (router.currentRoute.query.token) {
secret.value = router.currentRoute.query.token.toString();
}
if (route.query.partner) {
user.value.partner = route.query.partner.toString();
if (router.currentRoute.query.partner) {
user.value.partner = router.currentRoute.query.partner.toString();
}
if (route.query.promo) {
user.value.signupPromoCode = route.query.promo.toString();
if (router.currentRoute.query.promo) {
user.value.signupPromoCode = router.currentRoute.query.promo.toString();
}
try {
@ -494,14 +496,14 @@ function setRepeatedPassword(value: string): void {
* Name of the current satellite.
*/
const satelliteName = computed((): string => {
return store.state.appStateModule.satelliteName;
return appStore.state.satelliteName;
});
/**
* Information about partnered satellites, including name and signup link.
*/
const partneredSatellites = computed((): PartneredSatellite[] => {
const satellites = store.state.appStateModule.partneredSatellites;
const satellites = appStore.state.partneredSatellites;
return satellites.map((s: PartneredSatellite) => {
s.address = `${s.address}/signup`;
@ -517,14 +519,14 @@ const partneredSatellites = computed((): PartneredSatellite[] => {
* Indicates if satellite is in beta.
*/
const isBetaSatellite = computed((): boolean => {
return store.state.appStateModule.isBetaSatellite;
return appStore.state.isBetaSatellite;
});
/**
* Indicates if coupon code ui is enabled
*/
const couponCodeSignupUIEnabled = computed((): boolean => {
return store.state.appStateModule.couponCodeSigunpUIEnabled;
return appStore.state.couponCodeSignupUIEnabled;
});
/**

18
web/satellite/tests/unit/ignore/common/HeaderArea.spec.ts
View File

@ -4,24 +4,18 @@
import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { FrontendConfigApiMock } from '../../mock/api/config';
import { makeAppStateModule } from '@/store/modules/appState';
import { makeNotificationsModule } from '@/store/modules/notifications';
import { ProjectMemberHeaderState } from '@/types/projectMembers';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { MODALS } from '@/utils/constants/appStatePopUps';
import HeaderArea from '@/components/team/HeaderArea.vue';
const localVue = createLocalVue();
const appStateModule = makeAppStateModule(new FrontendConfigApiMock());
const notificationsModule = makeNotificationsModule();
localVue.use(Vuex);
const store = new Vuex.Store({ modules: { appStateModule, notificationsModule } });
const store = new Vuex.Store({ modules: { notificationsModule } });
describe('Team HeaderArea', () => {
it('renders correctly', () => {
@ -41,8 +35,6 @@ describe('Team HeaderArea', () => {
});
it('renders correctly with opened Add team member popup', () => {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTeamMember);
const wrapper = shallowMount<HeaderArea>(HeaderArea, {
store,
localVue,
@ -53,13 +45,9 @@ describe('Team HeaderArea', () => {
expect(wrapper.vm.isDeleteClicked).toBe(false);
expect(wrapper.findAll('.blur-content').length).toBe(0);
expect(wrapper.findAll('.blur-search').length).toBe(0);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTeamMember);
});
it('renders correctly with selected users', () => {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTeamMember);
const selectedUsersCount = 2;
const wrapper = shallowMount<HeaderArea>(HeaderArea, {
@ -81,8 +69,6 @@ describe('Team HeaderArea', () => {
});
it('renders correctly with 2 selected users and delete clicked once', async () => {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTeamMember);
const selectedUsersCount = 2;
const wrapper = shallowMount<HeaderArea>(HeaderArea, {
@ -108,8 +94,6 @@ describe('Team HeaderArea', () => {
});
it('renders correctly with 1 selected user and delete clicked once', async () => {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTeamMember);
const selectedUsersCount = 1;
const wrapper = shallowMount<HeaderArea>(HeaderArea, {

7
web/satellite/tests/unit/ignore/onboardingTour/steps/OverviewStep.spec.ts
View File

@ -4,26 +4,19 @@
import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { FrontendConfigApiMock } from '@/../tests/unit/mock/api/config';
import { router } from '@/router';
import { makeAppStateModule } from '@/store/modules/appState';
import OverviewStep from '@/components/onboardingTour/steps/OverviewStep.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
const appStateModule = makeAppStateModule(new FrontendConfigApiMock());
const store = new Vuex.Store({ modules: { appStateModule } });
// TODO: figure out how to fix the test
xdescribe('OverviewStep.vue', (): void => {
it('renders correctly', (): void => {
const wrapper = shallowMount(OverviewStep, {
localVue,
router,
store,
});
expect(wrapper).toMatchSnapshot();

5
web/satellite/tests/unit/ignore/projectMembers/ProjectMembersArea.spec.ts
View File

@ -5,8 +5,6 @@ import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { ProjectsApiMock } from '@/../tests/unit/mock/api/projects';
import { FrontendConfigApiMock } from '@/../tests/unit/mock/api/config';
import { makeAppStateModule } from '@/store/modules/appState';
import { makeProjectsModule } from '@/store/modules/projects';
import { ProjectMember, ProjectMembersPage } from '@/types/projectMembers';
import { Project } from '@/types/projects';
@ -16,10 +14,9 @@ import ProjectMembersArea from '@/components/team/ProjectMembersArea.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
const appStateModule = makeAppStateModule(new FrontendConfigApiMock());
const projectsApi = new ProjectsApiMock();
const projectsModule = makeProjectsModule(projectsApi);
const store = new Vuex.Store({ modules: { projectsModule, appStateModule } });
const store = new Vuex.Store({ modules: { projectsModule } });
describe('ProjectMembersArea.vue', () => {
const project = new Project('id', 'projectName', 'projectDescription', 'test', 'testOwnerId', true);

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

@ -6,14 +6,11 @@ import { createLocalVue, shallowMount } from '@vue/test-utils';
import { AccessGrantsMock } from '../../mock/api/accessGrants';
import { BucketsMock } from '../../mock/api/buckets';
import { FrontendConfigApiMock } from '../../mock/api/config';
import { RouteConfig, router } from '@/router';
import { makeAccessGrantsModule } from '@/store/modules/accessGrants';
import { makeAppStateModule } from '@/store/modules/appState';
import { makeBucketsModule } from '@/store/modules/buckets';
import { makeNotificationsModule } from '@/store/modules/notifications';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { FetchState } from '@/utils/constants/fetchStateEnum';
import { NotificatorPlugin } from '@/utils/plugins/notificator';
import { AnalyticsHttpApi } from '@/api/analytics';
@ -22,7 +19,6 @@ import DashboardArea from '@/views/DashboardArea.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
const appStateModule = makeAppStateModule(new FrontendConfigApiMock());
const accessGrantsModule = makeAccessGrantsModule(new AccessGrantsMock());
const bucketsModule = makeBucketsModule(new BucketsMock());
const notificationsModule = makeNotificationsModule();
@ -32,7 +28,6 @@ const store = new Vuex.Store({
notificationsModule,
bucketsModule,
accessGrantsModule,
appStateModule,
},
});
@ -57,8 +52,6 @@ describe('Dashboard', () => {
});
it('renders correctly when data is loaded', () => {
store.dispatch(APP_STATE_ACTIONS.CHANGE_FETCH_STATE, FetchState.LOADED);
const wrapper = shallowMount(DashboardArea, {
store,
localVue,