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

web/satellite: refactor appstate store module to use enum for popups

Browse Source 
This change refactors appstate, removing the big list of booleans
Previously used to toggle modals and dropdowns, replacing them with enums.

Issue: https://github.com/storj/storj/issues/5244

Change-Id: I4cffb7ab3ad7712f7ff79dd7486df938ca63830e
This commit is contained in:
Malcolm Bouzi 2023-01-04 09:50:28 -05:00 committed by Wilfred Asomani
parent 0e1c99f75a
commit 109da3c798
65 changed files with 380 additions and 635 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue
View File

@ -13,9 +13,9 @@
alt="Arrow down (expand)"
/>
</div>
<BucketsDropdown
v-if="isDropdownShown"
:show-scrollbar="showScrollbar"
<BucketsDropdown
v-if="isDropdownShown"
:show-scrollbar="showScrollbar"
/>
</div>
</template>
@ -24,6 +24,7 @@
import { Component, Vue, Prop } from 'vue-property-decorator';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import BucketsDropdown from '@/components/accessGrants/permissions/BucketsDropdown.vue';
@ -43,14 +44,14 @@ export default class BucketsSelection extends Vue {
* Toggles dropdown visibility.
*/
public toggleDropdown(): void {
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_BUCKET_NAMES_DROPDOWN);
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.BUCKET_NAMES);
}
/**
* Indicates if dropdown is shown.
*/
public get isDropdownShown(): boolean {
return this.$store.state.appStateModule.appState.isBucketNamesDropdownShown;
return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.BUCKET_NAMES;
}
/**

5
web/satellite/src/components/accessGrants/permissions/DurationSelection.vue
View File

@ -26,6 +26,7 @@
import { Component, Vue, Prop } from 'vue-property-decorator';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import DurationPicker from '@/components/accessGrants/permissions/DurationPicker.vue';
@ -65,7 +66,7 @@ export default class DurationSelection extends Vue {
* Toggles duration picker.
*/
public togglePicker(): void {
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_AG_DATEPICKER_DROPDOWN);
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.AG_DATE_PICKER);
}
/**
@ -79,7 +80,7 @@ export default class DurationSelection extends Vue {
* Indicates if date picker is shown.
*/
public get isDurationPickerVisible(): boolean {
return this.$store.state.appStateModule.appState.isAGDatePickerShown;
return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.AG_DATE_PICKER;
}
/**

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

@ -87,10 +87,12 @@ import { computed, onMounted } from 'vue';
import { USER_ACTIONS } from '@/store/modules/users';
import { User } from '@/types/users';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useStore } from '@/utils/hooks';
import { useLoading } from '@/composables/useLoading';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import VButton from '@/components/common/VButton.vue';
@ -120,35 +122,35 @@ const avatarLetter = computed((): string => {
* Toggles enable MFA modal visibility.
*/
function toggleEnableMFAModal(): void {
store.commit(APP_STATE_MUTATIONS.TOGGLE_ENABLE_MFA_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.enableMFA);
}
/**
* Toggles disable MFA modal visibility.
*/
function toggleDisableMFAModal(): void {
store.commit(APP_STATE_MUTATIONS.TOGGLE_DISABLE_MFA_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.disableMFA);
}
/**
* Toggles MFA recovery codes modal visibility.
*/
function toggleMFACodesModal(): void {
store.commit(APP_STATE_MUTATIONS.TOGGLE_MFA_RECOVERY_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.mfaRecovery);
}
/**
* Opens change password popup.
*/
function toggleChangePasswordModal(): void {
store.commit(APP_STATE_MUTATIONS.TOGGLE_CHANGE_PASSWORD_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.changePassword);
}
/**
* Opens edit account info modal.
*/
function toggleEditProfileModal(): void {
store.commit(APP_STATE_MUTATIONS.TOGGLE_EDIT_PROFILE_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.editProfile);
}
/**

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

@ -97,6 +97,7 @@ import { AccountBalance } from '@/types/payments';
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 PeriodSelection from '@/components/account/billing/depositAndBillingHistory/PeriodSelection.vue';
import SmallDepositHistory from '@/components/account/billing/depositAndBillingHistory/SmallDepositHistory.vue';
@ -157,14 +158,14 @@ export default class BillingArea extends Vue {
* Indicates if free credits dropdown shown.
*/
public get isCreditsDropdownShown(): boolean {
return this.$store.state.appStateModule.appState.isFreeCreditsDropdownShown;
return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.FREE_CREDITS;
}
/**
* Indicates if available balance dropdown shown.
*/
public get isBalanceDropdownShown(): boolean {
return this.$store.state.appStateModule.appState.isAvailableBalanceDropdownShown;
return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.AVAILABLE_BALANCE;
}
/**
@ -222,7 +223,7 @@ export default class BillingArea extends Vue {
* Toggles available balance dropdown visibility.
*/
public toggleBalanceDropdown(): void {
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_AVAILABLE_BALANCE_DROPDOWN);
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.AVAILABLE_BALANCE);
}
/**
@ -231,7 +232,7 @@ export default class BillingArea extends Vue {
public closeDropdown(): void {
if (!this.isCreditsDropdownShown && !this.isBalanceDropdownShown) return;
this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, 'none');
}
/**

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

@ -53,8 +53,9 @@ import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { Coupon } from '@/types/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useStore } from '@/utils/hooks';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import VLoader from '@/components/common/VLoader.vue';
@ -126,7 +127,7 @@ const expirationHelper = computed((): string => {
*/
function toggleCreateModal(): void {
analytics.eventTriggered(AnalyticsEvent.APPLY_NEW_COUPON_CLICKED);
store.commit(APP_STATE_MUTATIONS.TOGGLE_NEW_BILLING_ADD_COUPON_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.newBillingAddCoupon);
}
/**

20
web/satellite/src/components/account/billing/coupons/CouponArea.vue
View File

@ -57,8 +57,10 @@ import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { Coupon, CouponDuration } from '@/types/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useStore } from '@/utils/hooks';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -73,6 +75,14 @@ const notify = useNotify();
const isCouponFetching = ref<boolean>(true);
/**
* Opens Add Coupon modal.
*/
function onCreateClick(): void {
analytics.eventTriggered(AnalyticsEvent.APPLY_NEW_COUPON_CLICKED);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addCoupon);
}
/**
* Returns the coupon applied to the user's account.
*/
@ -138,14 +148,6 @@ const expiration = computed((): string => {
}
});
/**
* Opens Add Coupon modal.
*/
function onCreateClick(): void {
analytics.eventTriggered(AnalyticsEvent.APPLY_NEW_COUPON_CLICKED);
store.commit(APP_STATE_MUTATIONS.TOGGLE_ADD_COUPON_MODAL_SHOWN);
}
/**
* Lifecycle hook after initial render.
* Fetches coupon.

7
web/satellite/src/components/account/billing/depositAndBillingHistory/PeriodSelection.vue
View File

@ -37,6 +37,7 @@ import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import DatePickerIcon from '@/../static/images/account/billing/datePicker.svg';
import SelectedIcon from '@/../static/images/account/billing/selected.svg';
@ -59,8 +60,8 @@ const currentOption = ref<string>(periodOptions[0]);
/**
* Indicates if periods dropdown is shown.
*/
const isDropdownShown = computed((): Date => {
return store.state.appStateModule.appState.isPeriodsDropdownShown;
const isDropdownShown = computed((): boolean => {
return store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.PERIODS;
});
/**
@ -98,7 +99,7 @@ function closeDropdown(): void {
* Toggles dropdown visibility.
*/
function toggleDropdown(): void {
store.dispatch(APP_STATE_ACTIONS.TOGGLE_PERIODS_DROPDOWN);
store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.PERIODS);
}
/**

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

@ -93,11 +93,13 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { Wallet } from '@/types/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -179,7 +181,7 @@ export default class AddTokenCardNative extends Vue {
*/
public onAddTokensClick(): void {
this.analytics.eventTriggered(AnalyticsEvent.ADD_FUNDS_CLICKED);
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ADD_TOKEN_FUNDS_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTokenFunds);
}
/**

7
web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue
View File

@ -64,6 +64,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
import { PaymentAmountOption } from '@/types/payments';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
// @vue/component
@Component
@ -102,14 +103,14 @@ export default class TokenDepositSelection3 extends Vue {
* isSelectionShown flag that indicate is token amount selection shown.
*/
public get isSelectionShown(): boolean {
return this.$store.state.appStateModule.appState.isPaymentSelectionShown;
return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.PAYMENT_SELECTION;
}
/**
* opens token amount selection.
*/
public open(): void {
setTimeout(() => this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_PAYMENT_SELECTION, true), 0);
setTimeout(() => this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.PAYMENT_SELECTION), 0);
}
/**
@ -340,7 +341,7 @@ export default class TokenDepositSelection3 extends Vue {
}
&__custom-input::placeholder {
font-size: 14;
font-size: 14px;
}
&__custom-input::-webkit-inner-spin-button,

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

@ -214,10 +214,11 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { BrowserFile } from '@/types/browser';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { RouteConfig } from '@/router';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import eventBus from '@/utils/eventBus';
import { Bucket } from '@/types/buckets';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import VButton from '@/components/common/VButton.vue';
import BucketSettingsNav from '@/components/objects/BucketSettingsNav.vue';
@ -432,7 +433,7 @@ function closeModalDropdown(): void {
* Toggle the folder creation modal in the store.
*/
function toggleFolderCreationModal(): void {
store.commit(APP_STATE_MUTATIONS.TOGGLE_NEW_FOLDER_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.newFolder);
}
/**

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

@ -109,9 +109,11 @@ import { computed, ref } from 'vue';
import prettyBytes from 'pretty-bytes';
import type { BrowserFile } from '@/types/browser';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
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 TableItem from '@/components/common/TableItem.vue';
@ -202,7 +204,7 @@ const fileTypeIsFile = computed((): boolean => {
*/
function openModal(): void {
store.commit('files/setObjectPathForModal', props.path + props.file.Key);
store.commit(APP_STATE_MUTATIONS.TOGGLE_OBJECT_DETAILS_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.objectDetails);
store.dispatch('files/closeDropdown');
}
@ -372,7 +374,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.TOGGLE_SHARE_OBJECT_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.SHARE_OBJECT);
}
/**

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

@ -15,6 +15,7 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { RouteConfig } from '@/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
@ -37,7 +38,7 @@ export default class AddCouponCodeModal extends Vue {
*/
public onCloseClick(): void {
this.analytics.pageVisit(RouteConfig.Account.with(RouteConfig.Billing).path);
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ADD_COUPON_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addCoupon);
}
}
</script>

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

@ -130,11 +130,12 @@ import { Component, Vue } from 'vue-property-decorator';
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { USER_ACTIONS } from '@/store/modules/users';
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 VModal from '@/components/common/VModal.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -222,7 +223,7 @@ export default class AddPaymentMethodModal extends Vue {
* Closes add payment method modal.
*/
public closeModal(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_IS_ADD_PM_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addPaymentMethod);
}
/**

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

@ -84,11 +84,12 @@ import { Component, Vue } from 'vue-property-decorator';
import { RouteConfig } from '@/router';
import { EmailInput } from '@/types/EmailInput';
import { PM_ACTIONS } from '@/utils/constants/actionNames';
import { APP_STATE_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
import { Validator } from '@/utils/validation';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
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 VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue';
@ -233,7 +234,7 @@ export default class AddTeamMemberModal extends Vue {
* Closes modal.
*/
public closeModal(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ADD_TEAM_MEMBERS_MODAL);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTeamMember);
}
/**

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

@ -75,9 +75,11 @@
import QRCode from 'qrcode';
import { Component, Vue } from 'vue-property-decorator';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
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 VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue';
@ -118,7 +120,7 @@ export default class AddTokenFundsModal extends Vue {
* Closes create project prompt modal.
*/
public closeModal(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ADD_TOKEN_FUNDS_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTokenFunds);
}
/**

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

@ -2,29 +2,8 @@
// See LICENSE for copying information.
<template>
<div>
<CreateProjectPromptModal v-if="isCreateProjectPromptModal" />
<CreateProjectModal v-if="isCreateProjectModal" />
<AddPaymentMethodModal v-if="isAddPMModal" />
<OpenBucketModal v-if="isOpenBucketModal" />
<MFARecoveryCodesModal v-if="isMFARecoveryModal" />
<EnableMFAModal v-if="isEnableMFAModal" />
<DisableMFAModal v-if="isDisableMFAModal" />
<EditProfileModal v-if="isEditProfileModal" />
<ChangePasswordModal v-if="isChangePasswordModal" />
<AddTeamMemberModal v-if="isAddTeamMembersModal" />
<AddTokenFundsModal v-if="isAddTokenFundsModal" />
<ShareBucketModal v-if="isShareBucketModal" />
<ShareObjectModal v-if="isShareObjectModal" />
<ObjectDetailsModal v-if="isObjectDetailsModal" />
<NewFolderModal v-if="isNewFolderModal" />
<DeleteBucketModal v-if="isDeleteBucketModal" />
<AddCouponCodeModal v-if="isAddCouponModal" />
<NewBillingAddCouponCodeModal v-if="isNewBillingAddCouponModal" />
<CreateProjectPassphraseModal v-if="isCreateProjectPassphraseModal" />
<ManageProjectPassphraseModal v-if="isManageProjectPassphraseModal" />
<CreateBucketModal v-if="isCreateBucketModal" />
<EnterPassphraseModal v-if="isEnterPassphraseModal" />
<div v-if="activeModal">
<component :is="activeModal" />
</div>
</template>
@ -83,158 +62,13 @@ import EnterPassphraseModal from '@/components/modals/EnterPassphraseModal.vue';
})
export default class AllModals extends Vue {
// TODO: add active modal indicator.
/**
* Indicates if create project prompt modal is shown.
*/
public get isCreateProjectPromptModal(): boolean {
return this.$store.state.appStateModule.appState.isCreateProjectPromptModalShown;
}
/**
* Indicates if create project prompt modal is shown.
*/
public get isCreateProjectModal(): boolean {
return this.$store.state.appStateModule.appState.isCreateProjectModalShown;
}
/**
* Indicates if add payment method modal is shown.
*/
public get isAddPMModal(): boolean {
return this.$store.state.appStateModule.appState.isAddPMModalShown;
}
/**
* Indicates if open bucket modal is shown.
*/
public get isOpenBucketModal(): boolean {
return this.$store.state.appStateModule.appState.isOpenBucketModalShown;
}
/**
* Indicates if MFA recovery modal is shown.
*/
public get isMFARecoveryModal(): boolean {
return this.$store.state.appStateModule.appState.isMFARecoveryModalShown;
}
/**
* Indicates if enable MFA modal is shown.
*/
public get isEnableMFAModal(): boolean {
return this.$store.state.appStateModule.appState.isEnableMFAModalShown;
}
/**
* Indicates if disable MFA modal is shown.
*/
public get isDisableMFAModal(): boolean {
return this.$store.state.appStateModule.appState.isDisableMFAModalShown;
}
/**
* Indicates if edit profile modal is shown.
*/
public get isEditProfileModal(): boolean {
return this.$store.state.appStateModule.appState.isEditProfileModalShown;
}
/**
* Indicates if change password modal is shown.
*/
public get isChangePasswordModal(): boolean {
return this.$store.state.appStateModule.appState.isChangePasswordModalShown;
}
/**
* Indicates if add team members modal is shown.
*/
public get isAddTeamMembersModal(): boolean {
return this.$store.state.appStateModule.appState.isAddTeamMembersModalShown;
}
/**
* Indicates if add token funds modal is shown.
*/
public get isAddTokenFundsModal(): boolean {
return this.$store.state.appStateModule.appState.isAddTokenFundsModalShown;
}
/**
* Indicates if share bucket modal is shown.
*/
public get isShareBucketModal(): boolean {
return this.$store.state.appStateModule.appState.isShareBucketModalShown;
}
/**
* Indicates if share object modal is shown.
*/
public get isShareObjectModal(): boolean {
return this.$store.state.appStateModule.appState.isShareObjectModalShown;
}
/**
* Indicates if delete bucket modal is shown.
*/
public get isDeleteBucketModal(): boolean {
return this.$store.state.appStateModule.appState.isDeleteBucketModalShown;
}
/**
* Indicates if object details modal is shown.
*/
public get isObjectDetailsModal(): boolean {
return this.$store.state.appStateModule.appState.isObjectDetailsModalShown;
}
/**
* Indicates if new folder modal is shown.
*/
public get isNewFolderModal(): boolean {
return this.$store.state.appStateModule.appState.isNewFolderModalShown;
}
/**
* Indicates if add coupon modal is shown.
*/
public get isAddCouponModal(): boolean {
return this.$store.state.appStateModule.appState.isAddCouponModalShown;
}
/**
* Indicates if new add coupon modal is shown.
*/
public get isNewBillingAddCouponModal(): boolean {
return this.$store.state.appStateModule.appState.isNewBillingAddCouponModalShown;
}
/**
* Indicates if create project passphrase modal is shown.
*/
public get isCreateProjectPassphraseModal(): boolean {
return this.$store.state.appStateModule.appState.isCreateProjectPassphraseModalShown;
}
/**
* Indicates if manage project passphrase modal is shown.
*/
public get isManageProjectPassphraseModal(): boolean {
return this.$store.state.appStateModule.appState.isManageProjectPassphraseModalShown;
}
/**
* Indicates if create bucket modal is shown.
*/
public get isCreateBucketModal(): boolean {
return this.$store.state.appStateModule.appState.isCreateBucketModalShown;
}
/**
* Indicates if enter passphrase modal is shown.
*/
public get isEnterPassphraseModal(): boolean {
return this.$store.state.appStateModule.appState.isEnterPassphraseModalShown;
* Indicates the current active modal.
*/
public get activeModal(): unknown | null {
// modal could be of VueConstructor type or Object (for composition api components).
return this.$store.state.appStateModule.appState.activeModal;
}
}
</script>

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

@ -69,6 +69,7 @@ import { Validator } from '@/utils/validation';
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 PasswordStrength from '@/components/common/PasswordStrength.vue';
@ -203,7 +204,7 @@ export default class ChangePasswordModal extends Vue {
* Closes popup.
*/
public closeModal(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CHANGE_PASSWORD_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.changePassword);
}
}
</script>

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

@ -52,7 +52,6 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { RouteConfig } from '@/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
@ -65,6 +64,8 @@ import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
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 VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue';
@ -262,7 +263,7 @@ function setBucketName(name: string): void {
* Closes create bucket modal.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_BUCKET_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createBucket);
}
/**

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

@ -62,7 +62,6 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ProjectFields } from '@/types/projects';
@ -70,6 +69,8 @@ import { LocalData } from '@/utils/localData';
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 VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue';
@ -169,19 +170,11 @@ export default class CreateProjectModal extends Vue {
LocalData.setSelectedProjectId(this.createdProjectId);
}
/**
* Holds on button click logic.
* Closes this modal and opens create project modal.
*/
public onClick(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_POPUP);
}
/**
* Closes create project modal.
*/
public closeModal(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_POPUP);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
}
}
</script>

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

@ -33,6 +33,7 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import VButton from '@/components/common/VButton.vue';
@ -51,15 +52,15 @@ export default class CreateProjectPromptModal extends Vue {
* Closes this modal and opens upgrade account modal.
*/
public onClick(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PROMPT_POPUP);
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_IS_ADD_PM_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addPaymentMethod);
}
/**
* Closes create project prompt modal.
*/
public closeModal(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PROMPT_POPUP);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
}
}
</script>

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

@ -31,7 +31,7 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
@ -40,6 +40,8 @@ import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
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 VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
@ -171,7 +173,7 @@ export default class DeleteBucketModal extends Vue {
* Closes modal.
*/
public closeModal(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_DELETE_BUCKET_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.deleteBucket);
}
/**

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

@ -45,8 +45,10 @@ import { Component, Vue } from 'vue-property-decorator';
import { USER_ACTIONS } from '@/store/modules/users';
import { DisableMFARequest } from '@/types/users';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import ConfirmMFAInput from '@/components/account/mfa/ConfirmMFAInput.vue';
import VButton from '@/components/common/VButton.vue';
@ -78,7 +80,7 @@ export default class DisableMFAModal extends Vue {
* Closes disable MFA modal.
*/
public closeModal(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_DISABLE_MFA_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.disableMFA);
}
/**

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

@ -45,6 +45,8 @@ import { USER_ACTIONS } from '@/store/modules/users';
import { UpdatedUser } from '@/types/users';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import VModal from '@/components/common/VModal.vue';
@ -104,7 +106,7 @@ export default class EditProfileModal extends Vue {
* Closes modal.
*/
public closeModal(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_EDIT_PROFILE_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.editProfile);
}
/**

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

@ -81,9 +81,10 @@ import QRCode from 'qrcode';
import { Component, Vue } from 'vue-property-decorator';
import { USER_ACTIONS } from '@/store/modules/users';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
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 ConfirmMFAInput from '@/components/account/mfa/ConfirmMFAInput.vue';
import VButton from '@/components/common/VButton.vue';
@ -137,7 +138,7 @@ export default class EnableMFAModal extends Vue {
* Closes enable MFA modal.
*/
public closeModal(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ENABLE_MFA_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.enableMFA);
}
/**

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

@ -180,7 +180,7 @@ export default class EnterPassphraseModal extends Vue {
public closeModal(): void {
if (this.isLoading) return;
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ENTER_PASSPHRASE_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.REMOVE_ACTIVE_MODAL);
}
/**

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

@ -32,6 +32,7 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import VButton from '@/components/common/VButton.vue';
@ -49,7 +50,7 @@ export default class MFARecoveryCodesModal extends Vue {
* Closes modal.
*/
public closeModal(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_MFA_RECOVERY_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.mfaRecovery);
}
/**

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

@ -19,6 +19,8 @@ import { Component, Vue } from 'vue-property-decorator';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import NewBillingAddCouponCodeInput from '@/components/common/NewBillingAddCouponCodeInput.vue';
@ -42,7 +44,7 @@ export default class NewBillingAddCouponCodeModal extends Vue {
*/
public onCloseClick(): void {
this.analytics.eventTriggered(AnalyticsEvent.COUPON_CODE_APPLIED);
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_NEW_BILLING_ADD_COUPON_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.newBillingAddCoupon);
}
}
</script>

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

@ -41,8 +41,9 @@
import { Component, Vue } from 'vue-property-decorator';
import { BrowserFile } from '@/types/browser';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
@ -72,7 +73,7 @@ export default class NewFolderModal extends Vue {
* Close the NewFolderModal.
*/
public close(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_NEW_FOLDER_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.newFolder);
}
/**

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

@ -118,8 +118,9 @@ import { Component, Vue, Watch } from 'vue-property-decorator';
import prettyBytes from 'pretty-bytes';
import { BrowserFile } from '@/types/browser';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
@ -294,7 +295,7 @@ export default class ObjectDetailsModal extends Vue {
* Close the current opened file details modal.
*/
public closeModal(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_OBJECT_DETAILS_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.objectDetails);
}
/**

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

@ -53,7 +53,6 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { RouteConfig } from '@/router';
import { OBJECTS_ACTIONS, OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { MetaUtils } from '@/utils/meta';
@ -63,6 +62,8 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
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 VModal from '@/components/common/VModal.vue';
import VInput from '@/components/common/VInput.vue';
@ -213,7 +214,7 @@ export default class OpenBucketModal extends Vue {
public closeModal(): void {
if (this.isLoading) return;
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_OPEN_BUCKET_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.openBucket);
}
/**

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

@ -38,12 +38,14 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
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 VModal from '@/components/common/VModal.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -173,7 +175,7 @@ export default class ShareBucketModal extends Vue {
public closeModal(): void {
if (this.isLoading) return;
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_SHARE_BUCKET_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.shareBucket);
}
/**

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

@ -38,6 +38,8 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import VModal from '@/components/common/VModal.vue';
@ -104,7 +106,7 @@ export default class ShareObjectModal extends Vue {
public closeModal(): void {
if (this.isLoading) return;
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_SHARE_OBJECT_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.shareObject);
}
}
</script>

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

@ -61,14 +61,16 @@ import { computed, onMounted, ref } from 'vue';
import { generateMnemonic } from 'bip39';
import { useNotify, useRoute, useRouter, useStore } from '@/utils/hooks';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { OBJECTS_ACTIONS, OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { MetaUtils } from '@/utils/meta';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { RouteConfig } from '@/router';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
@ -168,7 +170,7 @@ function toggleSaved(): void {
* Closes modal.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PASSPHRASE_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
}
/**

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

@ -28,8 +28,10 @@
<script setup lang="ts">
import { useStore } from '@/utils/hooks';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import VButton from '@/components/common/VButton.vue';
@ -46,7 +48,7 @@ const store = useStore();
*/
function onClear(): void {
store.commit(OBJECTS_MUTATIONS.CLEAR);
store.commit(APP_STATE_MUTATIONS.TOGGLE_MANAGE_PROJECT_PASSPHRASE_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
}
</script>

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

@ -28,6 +28,8 @@
<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 VButton from '@/components/common/VButton.vue';
@ -44,8 +46,8 @@ const store = useStore();
* Starts create new passphrase flow.
*/
function onNext(): void {
store.commit(APP_STATE_MUTATIONS.TOGGLE_MANAGE_PROJECT_PASSPHRASE_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PASSPHRASE_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
}
</script>

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

@ -33,6 +33,8 @@
import { computed, onMounted, ref } from 'vue';
import { useNotify, 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 { ManageProjectPassphraseStep } from '@/types/managePassphrase';
@ -88,7 +90,7 @@ function setManageOptions(): void {
* Closes modal.
*/
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.TOGGLE_MANAGE_PROJECT_PASSPHRASE_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
}
onMounted(() => {

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

@ -39,7 +39,7 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { useNotify, useStore } from '@/utils/hooks';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
@ -47,6 +47,8 @@ import { OBJECTS_ACTIONS, OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { MetaUtils } from '@/utils/meta';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue';
@ -191,7 +193,7 @@ async function onSwitch(): Promise<void> {
store.dispatch(OBJECTS_ACTIONS.SET_PASSPHRASE, passphrase.value);
notify.success('Passphrase was switched successfully');
store.commit(APP_STATE_MUTATIONS.TOGGLE_MANAGE_PROJECT_PASSPHRASE_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.SWITCH_PROJECT_LEVEL_PASSPHRASE_MODAL);
} finally {

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

@ -62,10 +62,11 @@ import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { MetaUtils } from '@/utils/meta';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { AB_TESTING_ACTIONS } from '@/store/modules/abTesting';
import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import BillingIcon from '@/../static/images/navigation/billing.svg';
import InfoIcon from '@/../static/images/navigation/info.svg';
@ -169,7 +170,7 @@ export default class AccountArea extends Vue {
this.dropdownYPos = accountContainer.bottom - DROPDOWN_HEIGHT - SIXTEEN_PIXELS;
this.dropdownXPos = accountContainer.right - TWENTY_PIXELS;
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACCOUNT);
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.ACCOUNT);
this.$store.commit(APP_STATE_MUTATIONS.CLOSE_BILLING_NOTIFICATION);
}
@ -199,7 +200,7 @@ export default class AccountArea extends Vue {
* Indicates if account dropdown is visible.
*/
public get isDropdown(): boolean {
return this.$store.state.appStateModule.appState.isAccountDropdownShown;
return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.ACCOUNT;
}
/**

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

@ -171,7 +171,6 @@ import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { USER_ACTIONS } from '@/store/modules/users';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { NavigationLink } from '@/types/navigation';
import { Project } from '@/types/projects';
import { User } from '@/types/users';
@ -180,6 +179,8 @@ import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/ana
import { LocalData } from '@/utils/localData';
import { MetaUtils } from '@/utils/meta';
import { AB_TESTING_ACTIONS } from '@/store/modules/abTesting';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import ResourcesLinks from '@/components/navigation/ResourcesLinks.vue';
import QuickStartLinks from '@/components/navigation/QuickStartLinks.vue';
@ -346,7 +347,7 @@ export default class MobileNavigation extends Vue {
* Toggles manage passphrase modal shown.
*/
public onManagePassphraseClick(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_MANAGE_PROJECT_PASSPHRASE_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
}
/**
@ -434,10 +435,10 @@ export default class MobileNavigation extends Vue {
const ownProjectsCount: number = this.$store.getters.projectsCount;
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PROMPT_POPUP);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
} else {
this.analytics.pageVisit(RouteConfig.CreateProject.path);
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_POPUP);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
}
}

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

@ -81,7 +81,7 @@ 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_MUTATIONS } from '@/store/mutationConstants';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import ProjectSelection from '@/components/navigation/ProjectSelection.vue';
import GuidesDropdown from '@/components/navigation/GuidesDropdown.vue';
@ -224,7 +224,7 @@ export default class NavigationArea extends Vue {
public toggleResourcesDropdown(): void {
this.setResourcesDropdownYPos();
this.setResourcesDropdownXPos();
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_RESOURCES_DROPDOWN);
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.RESOURCES);
}
/**
@ -233,7 +233,7 @@ export default class NavigationArea extends Vue {
public toggleQuickStartDropdown(): void {
this.setQuickStartDropdownYPos();
this.setQuickStartDropdownXPos();
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_QUICK_START_DROPDOWN);
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.QUICK_START);
}
/**
@ -247,14 +247,14 @@ export default class NavigationArea extends Vue {
* Indicates if resources dropdown shown.
*/
public get isResourcesDropdownShown(): boolean {
return this.$store.state.appStateModule.appState.isResourcesDropdownShown;
return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.RESOURCES;
}
/**
* Indicates if quick start dropdown shown.
*/
public get isQuickStartDropdownShown(): boolean {
return this.$store.state.appStateModule.appState.isQuickStartDropdownShown;
return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.QUICK_START;
}
/**

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

@ -67,10 +67,11 @@ import { LocalData } from '@/utils/localData';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
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 VLoader from '@/components/common/VLoader.vue';
@ -138,7 +139,7 @@ export default class ProjectSelection extends Vue {
* Toggles project dropdown visibility.
*/
public toggleDropdown(): void {
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_SELECT_PROJECT_DROPDOWN);
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.SELECT_PROJECT);
}
/**
@ -223,8 +224,8 @@ export default class ProjectSelection extends Vue {
/**
* Indicates if dropdown is shown.
*/
public get isDropdownShown(): string {
return this.$store.state.appStateModule.appState.isSelectProjectDropdownShown;
public get isDropdownShown(): boolean {
return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.SELECT_PROJECT;
}
/**
@ -265,7 +266,7 @@ export default class ProjectSelection extends Vue {
* Toggles manage passphrase modal shown.
*/
public onManagePassphraseClick(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_MANAGE_PROJECT_PASSPHRASE_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
this.closeDropdown();
}
@ -281,10 +282,10 @@ export default class ProjectSelection extends Vue {
const ownProjectsCount: number = this.$store.getters.projectsCount;
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PROMPT_POPUP);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
} else {
this.analytics.pageVisit(RouteConfig.CreateProject.path);
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_POPUP);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
}
}

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

@ -47,9 +47,10 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { RouteConfig } from '@/router';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { User } from '@/types/users';
import { AccessType } from '@/types/createAccessGrant';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import NewProjectIcon from '@/../static/images/navigation/newProject.svg';
import CreateAGIcon from '@/../static/images/navigation/createAccessGrant.svg';
@ -151,10 +152,10 @@ export default class QuickStartLinks extends Vue {
const ownProjectsCount: number = this.$store.getters.projectsCount;
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PROMPT_POPUP);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
} else {
this.analytics.pageVisit(RouteConfig.CreateProject.path);
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_POPUP);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
}
}

1
web/satellite/src/components/notifications/BillingNotification.vue
View File

@ -20,6 +20,7 @@
import { Component, Vue } from 'vue-property-decorator';
import { RouteConfig } from '@/router';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import InfoIcon from '@/../static/images/notifications/info.svg';

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

@ -27,6 +27,8 @@ import { RouteConfig } from '@/router';
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_ACTIONS } from '@/utils/constants/actionNames';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import BucketDetailsOverview from '@/components/objects/BucketDetailsOverview.vue';
@ -93,7 +95,7 @@ export default class BucketDetails extends Vue {
return;
}
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_OPEN_BUCKET_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.openBucket);
}
/**

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

@ -31,6 +31,7 @@ import { Component, Prop } from 'vue-property-decorator';
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 TableItem from '@/components/common/TableItem.vue';
@ -119,7 +120,7 @@ export default class BucketItem extends Resizable {
* Holds on delete click logic.
*/
public onDeleteClick(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_DELETE_BUCKET_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.deleteBucket);
this.closeDropdown();
}

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

@ -2,11 +2,11 @@
// See LICENSE for copying information.
<template>
<div
<div
class="bucket-settings-nav"
@click.stop.prevent="isDropdownOpen = !isDropdownOpen"
@mouseenter="isHoveredOver = true"
@mouseleave="isHoveredOver = false"
@click.stop.prevent="isDropdownOpen = !isDropdownOpen"
@mouseenter="isHoveredOver = true"
@mouseleave="isHoveredOver = false"
>
<div class="bucket-settings-nav__button">
<GearIcon class="bucket-settings-nav__button__icon" :class="{active: isHoveredOver || isDropdownOpen}" />
@ -30,8 +30,10 @@
import { computed, ref } from 'vue';
import { RouteConfig } from '@/router';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { useRoute, useRouter, useStore } from '@/utils/hooks';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import ArrowDownIcon from '@/../static/images/common/dropIcon.svg';
import DetailsIcon from '@/../static/images/objects/details.svg';
@ -81,7 +83,7 @@ function onDetailsClick(): void {
* Toggles share bucket modal.
*/
function onShareBucketClick(): void {
store.commit(APP_STATE_MUTATIONS.TOGGLE_SHARE_BUCKET_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.shareBucket);
isDropdownOpen.value = false;
}
</script>

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

@ -70,12 +70,14 @@ import { computed, onBeforeUnmount, ref } from 'vue';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { BucketPage } from '@/types/buckets';
import { RouteConfig } from '@/router';
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 VTable from '@/components/common/VTable.vue';
import BucketItem from '@/components/objects/BucketItem.vue';
@ -147,14 +149,15 @@ const promptForPassphrase = computed((): boolean => {
* Toggles set passphrase modal visibility.
*/
function onSetClick() {
store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PASSPHRASE_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.CREATE_PROJECT_PASSPHRASE);
}
/**
* Toggles create bucket modal visibility.
*/
function onCreateBucketClick(): void {
store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_BUCKET_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.CREATE_BUCKET);
}
/**
@ -211,7 +214,7 @@ function openBucket(bucketName: string): void {
return;
}
store.commit(APP_STATE_MUTATIONS.TOGGLE_OPEN_BUCKET_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.openBucket);
}
onBeforeUnmount(() => {

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

@ -27,6 +27,8 @@ import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { BucketPage } from '@/types/buckets';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import EncryptionBanner from '@/components/objects/EncryptionBanner.vue';
@ -81,7 +83,7 @@ export default class BucketsView extends Vue {
}
if (!this.bucketsPage.buckets.length && !wasDemoBucketCreated && !this.promptForPassphrase) {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_BUCKET_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createBucket);
}
} catch (error) {
await this.$notify.error(`Failed to setup Buckets view. ${error.message}`, AnalyticsErrorEventSource.BUCKET_PAGE);
@ -101,11 +103,18 @@ export default class BucketsView extends Vue {
}
}
/**
* Toggles create project passphrase modal visibility.
*/
public onSetClick(): void {
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
}
/**
* Toggles create bucket modal visibility.
*/
public onCreateBucketClick(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_BUCKET_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createBucket);
}
/**

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

@ -29,8 +29,9 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import VButton from '@/components/common/VButton.vue';
@ -60,7 +61,7 @@ export default class UploadCancelPopup extends Vue {
* Close upload cancel info popup.
*/
public closePopup(): void {
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_UPLOAD_CANCEL_POPUP);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.uploadCancelPopup);
}
/**

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

@ -19,6 +19,7 @@ import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { MetaUtils } from '@/utils/meta';
import { BucketPage } from '@/types/buckets';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
@ -189,7 +190,7 @@ export default class UploadFile extends Vue {
* Indicates if upload cancel popup is visible.
*/
public get isCancelUploadPopupVisible(): boolean {
return this.$store.state.appStateModule.appState.isUploadCancelPopupVisible;
return this.$store.state.appStateModule.appState.activeModal == MODALS.uploadCancelPopup;
}
/**

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

@ -34,6 +34,7 @@ import { RouteConfig } from '@/router';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MetaUtils } from '@/utils/meta';
import { PartneredSatellite } from '@/types/common';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import OverviewContainer from '@/components/onboardingTour/steps/common/OverviewContainer.vue';
@ -78,7 +79,7 @@ export default class OverviewStep extends Vue {
*/
public onSkip(): void {
this.$router.push(this.projectDashboardPath);
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PASSPHRASE_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
}
/**
@ -95,7 +96,7 @@ export default class OverviewStep extends Vue {
* Redirects to buckets page.
*/
public onUploadInBrowserClick(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PASSPHRASE_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
}
/**

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

@ -46,6 +46,7 @@ import { Component, Vue } from 'vue-property-decorator';
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 ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
@ -62,7 +63,7 @@ export default class PermissionsSelect extends Vue {
* Toggles dropdown visibility.
*/
public toggleDropdown(): void {
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_PERMISSIONS_DROPDOWN);
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.PERMISSIONS);
}
/**
@ -104,7 +105,7 @@ export default class PermissionsSelect extends Vue {
* Indicates if dropdown is visible.
*/
public get isDropdownVisible(): boolean {
return this.$store.state.appStateModule.appState.isPermissionsDropdownShown;
return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.PERMISSIONS;
}
/**

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

@ -63,11 +63,12 @@
import { computed } from 'vue';
import { useRouter, useStore } from '@/utils/hooks';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { MODALS } from '@/utils/constants/appStatePopUps';
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 VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -118,14 +119,14 @@ const bucketsPage = computed((): BucketPage => {
* Toggles create project passphrase modal visibility.
*/
function onSetClick() {
store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PASSPHRASE_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.CREATE_PROJECT_PASSPHRASE);
}
/**
* Toggles create bucket modal visibility.
*/
function onCreateBucketClick() {
store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_BUCKET_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createBucket);
}
/**

13
web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue
View File

@ -156,7 +156,6 @@ import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { RouteConfig } from '@/router';
import { DataStamp, ProjectLimits } from '@/types/projects';
import { Dimensions, Size } from '@/utils/bytesSize';
@ -164,6 +163,8 @@ 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 VLoader from '@/components/common/VLoader.vue';
import InfoContainer from '@/components/project/newProjectDashboard/InfoContainer.vue';
@ -235,12 +236,12 @@ export default class NewProjectDashboard extends Vue {
await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, this.$store.getters.selectedProject.id);
if (this.hasJustLoggedIn) {
if (this.limits.objectCount > 0) {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ENTER_PASSPHRASE_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.enterPassphrase);
if (!this.bucketWasCreated) {
LocalData.setBucketWasCreatedStatus();
}
} else {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PASSPHRASE_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
}
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_HAS_JUST_LOGGED_IN);
@ -292,7 +293,7 @@ export default class NewProjectDashboard extends Vue {
* Holds on upgrade button click logic.
*/
public onUpgradeClick(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_IS_ADD_PM_MODAL_SHOWN);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addPaymentMethod);
}
/**
@ -314,7 +315,7 @@ export default class NewProjectDashboard extends Vue {
* toggleChartsDatePicker holds logic for toggling charts date picker.
*/
public toggleChartsDatePicker(): void {
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_CHARTS_DATEPICKER_DROPDOWN);
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.CHART_DATE_PICKER);
}
/**
@ -338,7 +339,7 @@ export default class NewProjectDashboard extends Vue {
* Indicates if charts date picker is shown.
*/
public get isChartsDatePicker(): boolean {
return this.$store.state.appStateModule.appState.isChartsDatePickerShown;
return this.$store.state.appStateModule.appState.activeDropdown == APP_STATE_DROPDOWNS.CHART_DATE_PICKER;
}
/**

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

@ -54,12 +54,13 @@ import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { Project, ProjectsPage } from '@/types/projects';
import { PM_ACTIONS } from '@/utils/constants/actionNames';
import { APP_STATE_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
import { LocalData } from '@/utils/localData';
import { AnalyticsHttpApi } from '@/api/analytics';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
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 ProjectsListItem from '@/components/projectsList/ProjectsListItem.vue';
import VTable from '@/components/common/VTable.vue';
@ -124,10 +125,10 @@ export default class Projects extends Vue {
const ownProjectsCount: number = this.$store.getters.projectsCount;
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PROMPT_POPUP);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
} else {
this.analytics.pageVisit(RouteConfig.CreateProject.path);
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_POPUP);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
}
}
@ -137,9 +138,9 @@ export default class Projects extends Vue {
*/
public async onProjectSelected(project: Project): Promise<void> {
if (this.isLoading) return;
this.isLoading = true;
const projectID = project.id;
await this.$store.dispatch(PROJECTS_ACTIONS.SELECT, projectID);
LocalData.setSelectedProjectId(projectID);

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

@ -86,8 +86,9 @@ import { ProjectMemberHeaderState } from '@/types/projectMembers';
import { Project } from '@/types/projects';
import { PM_ACTIONS } from '@/utils/constants/actionNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { MODALS } from '@/utils/constants/appStatePopUps';
import VInfo from '@/components/common/VInfo.vue';
import VHeader from '@/components/common/VHeader.vue';
@ -146,7 +147,7 @@ export default class HeaderArea extends Vue {
* Opens add team members modal.
*/
public toggleTeamMembersModal(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_ADD_TEAM_MEMBERS_MODAL);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTeamMember);
}
public onFirstDeleteClick(): void {

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

@ -26,6 +26,7 @@ import { FilesState, makeFilesModule } from '@/store/modules/files';
import { NavigationLink } from '@/types/navigation';
import { ABTestingState, makeABTestingModule } from '@/store/modules/abTesting';
import { ABHttpApi } from '@/api/abtesting';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
Vue.use(Vuex);
@ -113,7 +114,7 @@ router.beforeEach(async (to, from, next) => {
store.commit(APP_STATE_MUTATIONS.TOGGLE_HAS_JUST_LOGGED_IN);
}
if (!to.path.includes(RouteConfig.UploadFile.path) && !store.state.appStateModule.appState.isUploadCancelPopupVisible) {
if (!to.path.includes(RouteConfig.UploadFile.path) && (store.state.appStateModule.appState.activeModal !== MODALS.uploadCancelPopup)) {
const areUploadsInProgress: boolean = await store.dispatch(OBJECTS_ACTIONS.CHECK_ONGOING_UPLOADS, to.path);
if (areUploadsInProgress) return;
}

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

@ -1,57 +1,19 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { OnboardingOS, PartneredSatellite } from '@/types/common';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { OnboardingOS, PartneredSatellite } from '@/types/common';
import { AppState } from '@/utils/constants/appStateEnum';
import { ManageProjectPassphraseStep } from '@/types/managePassphrase';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
// Object that contains all states of views
class ViewsState {
constructor(
public fetchState = AppState.LOADING,
public isAddTeamMembersModalShown = false,
public isAccountDropdownShown = false,
public isSelectProjectDropdownShown = false,
public isResourcesDropdownShown = false,
public isQuickStartDropdownShown = false,
public isSettingsDropdownShown = false,
public isEditProjectDropdownShown = false,
public isFreeCreditsDropdownShown = false,
public isAvailableBalanceDropdownShown = false,
public isPeriodsDropdownShown = false,
public isBucketNamesDropdownShown = false,
public isAGDatePickerShown = false,
public isChartsDatePickerShown = false,
public isPermissionsDropdownShown = false,
public isEditProfileModalShown = false,
public isChangePasswordModalShown = false,
public isPaymentSelectionShown = false,
public isUploadCancelPopupVisible = false,
public isSuccessfulPasswordResetShown = false,
public isCreateProjectPromptModalShown = false,
public isCreateProjectModalShown = false,
public isCreateBucketModalShown = false,
public isAddPMModalShown = false,
public isOpenBucketModalShown = false,
public isEnterPassphraseModalShown = false,
public isMFARecoveryModalShown = false,
public isEnableMFAModalShown = false,
public isDisableMFAModalShown = false,
public isAddTokenFundsModalShown = false,
public isShareBucketModalShown = false,
public isShareObjectModalShown = false,
public isDeleteBucketModalShown = false,
public isNewFolderModalShown = false,
public isCreateProjectPassphraseModalShown = false,
public isManageProjectPassphraseModalShown = false,
public isObjectDetailsModalShown = false,
public isAddCouponModalShown = false,
public isNewBillingAddCouponModalShown = false,
public isBillingNotificationShown = true,
public hasJustLoggedIn = false,
public onbAGStepBackRoute = '',
public onbAPIKeyStepBackRoute = '',
public onbCleanApiKey = '',
@ -60,6 +22,9 @@ class ViewsState {
public deletePaymentMethodID = '',
public onbSelectedOs: OnboardingOS | 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,
) {}
}
@ -84,127 +49,12 @@ interface AppContext {
export const appStateModule = {
state: new State(),
mutations: {
[APP_STATE_MUTATIONS.TOGGLE_ADD_TEAM_MEMBERS_MODAL](state: State): void {
state.appState.isAddTeamMembersModalShown = !state.appState.isAddTeamMembersModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_ACCOUNT_DROPDOWN](state: State): void {
state.appState.isAccountDropdownShown = !state.appState.isAccountDropdownShown;
},
[APP_STATE_MUTATIONS.TOGGLE_SELECT_PROJECT_DROPDOWN](state: State): void {
state.appState.isSelectProjectDropdownShown = !state.appState.isSelectProjectDropdownShown;
},
[APP_STATE_MUTATIONS.TOGGLE_RESOURCES_DROPDOWN](state: State): void {
state.appState.isResourcesDropdownShown = !state.appState.isResourcesDropdownShown;
},
[APP_STATE_MUTATIONS.TOGGLE_QUICK_START_DROPDOWN](state: State): void {
state.appState.isQuickStartDropdownShown = !state.appState.isQuickStartDropdownShown;
},
[APP_STATE_MUTATIONS.TOGGLE_SETTINGS_DROPDOWN](state: State): void {
state.appState.isSettingsDropdownShown = !state.appState.isSettingsDropdownShown;
},
[APP_STATE_MUTATIONS.TOGGLE_EDIT_PROJECT_DROPDOWN](state: State): void {
state.appState.isEditProjectDropdownShown = !state.appState.isEditProjectDropdownShown;
},
[APP_STATE_MUTATIONS.TOGGLE_FREE_CREDITS_DROPDOWN](state: State): void {
state.appState.isFreeCreditsDropdownShown = !state.appState.isFreeCreditsDropdownShown;
},
[APP_STATE_MUTATIONS.TOGGLE_AVAILABLE_BALANCE_DROPDOWN](state: State): void {
state.appState.isAvailableBalanceDropdownShown = !state.appState.isAvailableBalanceDropdownShown;
},
[APP_STATE_MUTATIONS.TOGGLE_PERIODS_DROPDOWN](state: State): void {
state.appState.isPeriodsDropdownShown = !state.appState.isPeriodsDropdownShown;
},
[APP_STATE_MUTATIONS.TOGGLE_AG_DATEPICKER_DROPDOWN](state: State): void {
state.appState.isAGDatePickerShown = !state.appState.isAGDatePickerShown;
},
[APP_STATE_MUTATIONS.TOGGLE_CHARTS_DATEPICKER_DROPDOWN](state: State): void {
state.appState.isChartsDatePickerShown = !state.appState.isChartsDatePickerShown;
},
[APP_STATE_MUTATIONS.TOGGLE_BUCKET_NAMES_DROPDOWN](state: State): void {
state.appState.isBucketNamesDropdownShown = !state.appState.isBucketNamesDropdownShown;
},
[APP_STATE_MUTATIONS.TOGGLE_PERMISSIONS_DROPDOWN](state: State): void {
state.appState.isPermissionsDropdownShown = !state.appState.isPermissionsDropdownShown;
},
[APP_STATE_MUTATIONS.TOGGLE_SUCCESSFUL_PASSWORD_RESET](state: State): void {
state.appState.isSuccessfulPasswordResetShown = !state.appState.isSuccessfulPasswordResetShown;
},
[APP_STATE_MUTATIONS.TOGGLE_CHANGE_PASSWORD_MODAL_SHOWN](state: State): void {
state.appState.isChangePasswordModalShown = !state.appState.isChangePasswordModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_EDIT_PROFILE_MODAL_SHOWN](state: State): void {
state.appState.isEditProfileModalShown = !state.appState.isEditProfileModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_UPLOAD_CANCEL_POPUP](state: State): void {
state.appState.isUploadCancelPopupVisible = !state.appState.isUploadCancelPopupVisible;
},
[APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PROMPT_POPUP](state: State): void {
state.appState.isCreateProjectPromptModalShown = !state.appState.isCreateProjectPromptModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_POPUP](state: State): void {
state.appState.isCreateProjectModalShown = !state.appState.isCreateProjectModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_IS_ADD_PM_MODAL_SHOWN](state: State): void {
state.appState.isAddPMModalShown = !state.appState.isAddPMModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_OPEN_BUCKET_MODAL_SHOWN](state: State): void {
state.appState.isOpenBucketModalShown = !state.appState.isOpenBucketModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_ENTER_PASSPHRASE_MODAL_SHOWN](state: State): void {
state.appState.isEnterPassphraseModalShown = !state.appState.isEnterPassphraseModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_HAS_JUST_LOGGED_IN](state: State): void {
state.appState.hasJustLoggedIn = !state.appState.hasJustLoggedIn;
},
[APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PASSPHRASE_MODAL_SHOWN](state: State): void {
state.appState.isCreateProjectPassphraseModalShown = !state.appState.isCreateProjectPassphraseModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_MANAGE_PROJECT_PASSPHRASE_MODAL_SHOWN](state: State, step?: ManageProjectPassphraseStep): void {
if (step) {
state.appState.managePassphraseStep = step;
}
state.appState.isManageProjectPassphraseModalShown = !state.appState.isManageProjectPassphraseModalShown;
},
[APP_STATE_MUTATIONS.CLEAR_MANAGE_PASSPHRASE_STEP](state: State): void {
state.appState.managePassphraseStep = undefined;
},
[APP_STATE_MUTATIONS.TOGGLE_CREATE_BUCKET_MODAL_SHOWN](state: State): void {
state.appState.isCreateBucketModalShown = !state.appState.isCreateBucketModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_MFA_RECOVERY_MODAL_SHOWN](state: State): void {
state.appState.isMFARecoveryModalShown = !state.appState.isMFARecoveryModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_ENABLE_MFA_MODAL_SHOWN](state: State): void {
state.appState.isEnableMFAModalShown = !state.appState.isEnableMFAModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_DISABLE_MFA_MODAL_SHOWN](state: State): void {
state.appState.isDisableMFAModalShown = !state.appState.isDisableMFAModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_ADD_TOKEN_FUNDS_MODAL_SHOWN](state: State): void {
state.appState.isAddTokenFundsModalShown = !state.appState.isAddTokenFundsModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_SHARE_BUCKET_MODAL_SHOWN](state: State): void {
state.appState.isShareBucketModalShown = !state.appState.isShareBucketModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_SHARE_OBJECT_MODAL_SHOWN](state: State): void {
state.appState.isShareObjectModalShown = !state.appState.isShareObjectModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_DELETE_BUCKET_MODAL_SHOWN](state: State): void {
state.appState.isDeleteBucketModalShown = !state.appState.isDeleteBucketModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_OBJECT_DETAILS_MODAL_SHOWN](state: State): void {
state.appState.isObjectDetailsModalShown = !state.appState.isObjectDetailsModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_ADD_COUPON_MODAL_SHOWN](state: State): void {
state.appState.isAddCouponModalShown = !state.appState.isAddCouponModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_NEW_BILLING_ADD_COUPON_MODAL_SHOWN](state: State): void {
state.appState.isNewBillingAddCouponModalShown = !state.appState.isNewBillingAddCouponModalShown;
},
[APP_STATE_MUTATIONS.TOGGLE_NEW_FOLDER_MODAL_SHOWN](state: State): void {
state.appState.isNewFolderModalShown = !state.appState.isNewFolderModalShown;
},
[APP_STATE_MUTATIONS.SHOW_SET_DEFAULT_PAYMENT_METHOD_POPUP](state: State, id: string): void {
state.appState.setDefaultPaymentMethodID = id;
},
@ -214,47 +64,10 @@ export const appStateModule = {
[APP_STATE_MUTATIONS.CLOSE_BILLING_NOTIFICATION](state: State): void {
state.appState.isBillingNotificationShown = false;
},
[APP_STATE_MUTATIONS.CLOSE_ALL](state: State): void {
state.appState.isAccountDropdownShown = false;
state.appState.isSelectProjectDropdownShown = false;
state.appState.isResourcesDropdownShown = false;
state.appState.isQuickStartDropdownShown = false;
state.appState.isSettingsDropdownShown = false;
state.appState.isEditProjectDropdownShown = false;
state.appState.isFreeCreditsDropdownShown = false;
state.appState.isAvailableBalanceDropdownShown = false;
state.appState.isPermissionsDropdownShown = false;
state.appState.isPeriodsDropdownShown = false;
state.appState.isPaymentSelectionShown = false;
state.appState.isAGDatePickerShown = false;
state.appState.isChartsDatePickerShown = false;
state.appState.isBucketNamesDropdownShown = false;
},
[APP_STATE_MUTATIONS.CLEAR](state: State): void {
state.appState.isAddTeamMembersModalShown = false;
state.appState.isEditProfileModalShown = false;
state.appState.isChangePasswordModalShown = false;
state.appState.isUploadCancelPopupVisible = false;
state.appState.activeModal = null;
state.appState.isSuccessfulPasswordResetShown = false;
state.appState.isCreateProjectPromptModalShown = false;
state.appState.isCreateProjectModalShown = false;
state.appState.isAddPMModalShown = false;
state.appState.isOpenBucketModalShown = false;
state.appState.isMFARecoveryModalShown = false;
state.appState.isEnableMFAModalShown = false;
state.appState.isDisableMFAModalShown = false;
state.appState.isAddTokenFundsModalShown = false;
state.appState.isShareBucketModalShown = false;
state.appState.isShareObjectModalShown = false;
state.appState.isDeleteBucketModalShown = false;
state.appState.isNewFolderModalShown = false;
state.appState.isCreateProjectPassphraseModalShown = false;
state.appState.isManageProjectPassphraseModalShown = false;
state.appState.isObjectDetailsModalShown = false;
state.appState.isEnterPassphraseModalShown = false;
state.appState.hasJustLoggedIn = false;
state.appState.isAddCouponModalShown = false;
state.appState.isNewBillingAddCouponModalShown = false;
state.appState.onbAGStepBackRoute = '';
state.appState.onbAPIKeyStepBackRoute = '';
state.appState.onbCleanApiKey = '';
@ -267,9 +80,6 @@ export const appStateModule = {
[APP_STATE_MUTATIONS.CHANGE_STATE](state: State, newFetchState: AppState): void {
state.appState.fetchState = newFetchState;
},
[APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION](state: State, value: boolean): void {
state.appState.isPaymentSelectionShown = value;
},
[APP_STATE_MUTATIONS.SET_SATELLITE_NAME](state: State, satelliteName: string): void {
state.satelliteName = satelliteName;
},
@ -306,136 +116,58 @@ export const appStateModule = {
[APP_STATE_MUTATIONS.SET_ONB_OS](state: State, os: OnboardingOS): void {
state.appState.onbSelectedOs = os;
},
[APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN](state: State, dropdown: string): void {
state.appState.activeDropdown = dropdown;
},
[APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL](state: State, modal: unknown): void {
// modal could be of VueConstructor type or Object (for composition api components).
if (state.appState.activeModal === modal) {
state.appState.activeModal = null;
return;
}
state.appState.activeModal = modal;
},
[APP_STATE_MUTATIONS.REMOVE_ACTIVE_MODAL](state: State): void {
state.appState.activeModal = null;
},
},
actions: {
[APP_STATE_ACTIONS.TOGGLE_ACCOUNT]: function ({ commit, state }: AppContext): void {
if (!state.appState.isAccountDropdownShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
[APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN]: function ({ commit, state }: AppContext, dropdown: string): void {
if (state.appState.activeDropdown === dropdown) {
commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, 'none');
return;
}
commit(APP_STATE_MUTATIONS.TOGGLE_ACCOUNT_DROPDOWN);
},
[APP_STATE_ACTIONS.TOGGLE_SELECT_PROJECT_DROPDOWN]: function ({ commit, state }: AppContext): void {
if (!state.appState.isSelectProjectDropdownShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
}
commit(APP_STATE_MUTATIONS.TOGGLE_SELECT_PROJECT_DROPDOWN);
},
[APP_STATE_ACTIONS.TOGGLE_RESOURCES_DROPDOWN]: function ({ commit, state }: AppContext): void {
if (!state.appState.isResourcesDropdownShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
}
commit(APP_STATE_MUTATIONS.TOGGLE_RESOURCES_DROPDOWN);
},
[APP_STATE_ACTIONS.TOGGLE_QUICK_START_DROPDOWN]: function ({ commit, state }: AppContext): void {
if (!state.appState.isQuickStartDropdownShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
}
commit(APP_STATE_MUTATIONS.TOGGLE_QUICK_START_DROPDOWN);
},
[APP_STATE_ACTIONS.TOGGLE_SETTINGS_DROPDOWN]: function ({ commit, state }: AppContext): void {
if (!state.appState.isSettingsDropdownShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
}
commit(APP_STATE_MUTATIONS.TOGGLE_SETTINGS_DROPDOWN);
},
[APP_STATE_ACTIONS.TOGGLE_EDIT_PROJECT_DROPDOWN]: function ({ commit, state }: AppContext): void {
if (!state.appState.isEditProjectDropdownShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
}
commit(APP_STATE_MUTATIONS.TOGGLE_EDIT_PROJECT_DROPDOWN);
},
[APP_STATE_ACTIONS.TOGGLE_FREE_CREDITS_DROPDOWN]: function ({ commit, state }: AppContext): void {
if (!state.appState.isFreeCreditsDropdownShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
}
commit(APP_STATE_MUTATIONS.TOGGLE_FREE_CREDITS_DROPDOWN);
},
[APP_STATE_ACTIONS.TOGGLE_AVAILABLE_BALANCE_DROPDOWN]: function ({ commit, state }: AppContext): void {
if (!state.appState.isAvailableBalanceDropdownShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
}
commit(APP_STATE_MUTATIONS.TOGGLE_AVAILABLE_BALANCE_DROPDOWN);
},
[APP_STATE_ACTIONS.TOGGLE_PERIODS_DROPDOWN]: function ({ commit, state }: AppContext): void {
if (!state.appState.isPeriodsDropdownShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
}
commit(APP_STATE_MUTATIONS.TOGGLE_PERIODS_DROPDOWN);
},
[APP_STATE_ACTIONS.TOGGLE_AG_DATEPICKER_DROPDOWN]: function ({ commit, state }: AppContext): void {
if (!state.appState.isAGDatePickerShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
}
commit(APP_STATE_MUTATIONS.TOGGLE_AG_DATEPICKER_DROPDOWN);
},
[APP_STATE_ACTIONS.TOGGLE_CHARTS_DATEPICKER_DROPDOWN]: function ({ commit, state }: AppContext): void {
if (!state.appState.isChartsDatePickerShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
}
commit(APP_STATE_MUTATIONS.TOGGLE_CHARTS_DATEPICKER_DROPDOWN);
},
[APP_STATE_ACTIONS.TOGGLE_BUCKET_NAMES_DROPDOWN]: function ({ commit, state }: AppContext): void {
if (!state.appState.isBucketNamesDropdownShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
}
commit(APP_STATE_MUTATIONS.TOGGLE_BUCKET_NAMES_DROPDOWN);
},
[APP_STATE_ACTIONS.TOGGLE_PERMISSIONS_DROPDOWN]: function ({ commit, state }: AppContext): void {
if (!state.appState.isPermissionsDropdownShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
}
commit(APP_STATE_MUTATIONS.TOGGLE_PERMISSIONS_DROPDOWN);
},
[APP_STATE_ACTIONS.TOGGLE_PAYMENT_SELECTION]: function ({ commit, state }: AppContext, value: boolean): void {
if (!state.appState.isPaymentSelectionShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
}
commit(APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION, value);
commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, dropdown);
},
[APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_PASSWORD_RESET]: function ({ commit, state }: AppContext): void {
if (!state.appState.isSuccessfulPasswordResetShown) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, 'none');
}
commit(APP_STATE_MUTATIONS.TOGGLE_SUCCESSFUL_PASSWORD_RESET);
},
[APP_STATE_ACTIONS.TOGGLE_UPLOAD_CANCEL_POPUP]: function ({ commit }: AppContext): void {
commit(APP_STATE_MUTATIONS.TOGGLE_UPLOAD_CANCEL_POPUP);
},
[APP_STATE_ACTIONS.SHOW_SET_DEFAULT_PAYMENT_METHOD_POPUP]: function ({ commit, state }: AppContext, methodID: string): void {
if (!state.appState.setDefaultPaymentMethodID) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, '');
}
commit(APP_STATE_MUTATIONS.SHOW_SET_DEFAULT_PAYMENT_METHOD_POPUP, methodID);
},
[APP_STATE_ACTIONS.SHOW_DELETE_PAYMENT_METHOD_POPUP]: function ({ commit, state }: AppContext, methodID: string): void {
if (!state.appState.deletePaymentMethodID) {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, '');
}
commit(APP_STATE_MUTATIONS.SHOW_DELETE_PAYMENT_METHOD_POPUP, methodID);
},
[APP_STATE_ACTIONS.CLOSE_POPUPS]: function ({ commit }: AppContext): void {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, '');
},
[APP_STATE_ACTIONS.CLEAR]: function ({ commit }: AppContext): void {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
commit(APP_STATE_MUTATIONS.CLEAR);
commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, '');
},
[APP_STATE_ACTIONS.CHANGE_STATE]: function ({ commit }: AppContext, newFetchState: AppState): void {
commit(APP_STATE_MUTATIONS.CHANGE_STATE, newFetchState);

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

@ -4,8 +4,9 @@
import S3, { CommonPrefix } from 'aws-sdk/clients/s3';
import { StoreModule } from '@/types/store';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
const listCache = new Map();

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

@ -4,9 +4,10 @@
import S3, { Bucket, ObjectList } from 'aws-sdk/clients/s3';
import { EdgeCredentials } from '@/types/accessGrants';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { FilesState } from '@/store/modules/files';
import { StoreModule } from '@/types/store';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { MODALS } from '@/utils/constants/appStatePopUps';
export const OBJECTS_ACTIONS = {
CLEAR: 'clearObjects',
@ -256,7 +257,7 @@ export function makeObjectsModule(): StoreModule<ObjectsState, ObjectsContext> {
}
commit(SET_LEAVE_ROUTE, leaveRoute);
dispatch(APP_STATE_ACTIONS.TOGGLE_UPLOAD_CANCEL_POPUP, null, { root: true });
commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.uploadCancelPopup, null, { root: true });
return true;
},

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

@ -51,7 +51,6 @@ export const APP_STATE_MUTATIONS = {
TOGGLE_CREATE_BUCKET_MODAL_SHOWN: 'TOGGLE_CREATE_BUCKET_MODAL_SHOWN',
SHOW_DELETE_PAYMENT_METHOD_POPUP: 'SHOW_DELETE_PAYMENT_METHOD_POPUP',
SHOW_SET_DEFAULT_PAYMENT_METHOD_POPUP: 'SHOW_SET_DEFAULT_PAYMENT_METHOD_POPUP',
CLOSE_ALL: 'CLOSE_ALL',
CLEAR: 'CLEAR_APPSTATE',
CLOSE_BILLING_NOTIFICATION: 'closeBillingNotification',
CHANGE_STATE: 'CHANGE_STATE',
@ -69,4 +68,7 @@ export const APP_STATE_MUTATIONS = {
SET_ONB_CLEAN_API_KEY: 'SET_ONB_CLEAN_API_KEY',
SET_ONB_OS: 'SET_ONB_OS',
CLEAR_MANAGE_PASSPHRASE_STEP: 'CLEAR_MANAGE_PASSPHRASE_STEP',
TOGGLE_ACTIVE_DROPDOWN: 'TOGGLE_ACTIVE_DROPDOWN',
UPDATE_ACTIVE_MODAL: 'UPDATE_ACTIVE_MODAL',
REMOVE_ACTIVE_MODAL: 'REMOVE_ACTIVE_MODAL',
};

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

@ -32,6 +32,8 @@ export const APP_STATE_ACTIONS = {
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_PROJECT_DASHBOARD_STATUS: 'SET_PROJECT_DASHBOARD_STATUS',
SET_ENCRYPTION_PASSPHRASE_FLOW_STATUS: 'SET_ENCRYPTION_PASSPHRASE_FLOW_STATUS',
TOGGLE_ACTIVE_DROPDOWN: 'TOGGLE_ACTIVE_DROPDOWN',
};
export const NOTIFICATION_ACTIONS = {

97
web/satellite/src/utils/constants/appStatePopUps.ts Normal file
View File

@ -0,0 +1,97 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
import AddTeamMemberModal from '@/components/modals/AddTeamMemberModal.vue';
import EditProfileModal from '@/components/modals/EditProfileModal.vue';
import ChangePasswordModal from '@/components/modals/ChangePasswordModal.vue';
import CreateProjectModal from '@/components/modals/CreateProjectModal.vue';
import AddPaymentMethodModal from '@/components/modals/AddPaymentMethodModal.vue';
import OpenBucketModal from '@/components/modals/OpenBucketModal.vue';
import MFARecoveryCodesModal from '@/components/modals/MFARecoveryCodesModal.vue';
import EnableMFAModal from '@/components/modals/EnableMFAModal.vue';
import DisableMFAModal from '@/components/modals/DisableMFAModal.vue';
import AddTokenFundsModal from '@/components/modals/AddTokenFundsModal.vue';
import ShareBucketModal from '@/components/modals/ShareBucketModal.vue';
import ShareObjectModal from '@/components/modals/ShareObjectModal.vue';
import DeleteBucketModal from '@/components/modals/DeleteBucketModal.vue';
import CreateBucketModal from '@/components/modals/CreateBucketModal.vue';
import NewFolderModal from '@/components/modals/NewFolderModal.vue';
import CreateProjectPassphraseModal
from '@/components/modals/createProjectPassphrase/CreateProjectPassphraseModal.vue';
import ManageProjectPassphraseModal
from '@/components/modals/manageProjectPassphrase/ManageProjectPassphraseModal.vue';
import AddCouponCodeModal from '@/components/modals/AddCouponCodeModal.vue';
import NewBillingAddCouponCodeModal
from '@/components/modals/NewBillingAddCouponCodeModal.vue';
import CreateProjectPromptModal from '@/components/modals/CreateProjectPromptModal.vue';
import UploadCancelPopup from '@/components/objects/UploadCancelPopup.vue';
import ObjectDetailsModal from '@/components/modals/ObjectDetailsModal.vue';
import EnterPassphraseModal from '@/components/modals/EnterPassphraseModal.vue';
export const APP_STATE_DROPDOWNS = {
ACCOUNT: 'isAccountDropdownShown',
SELECT_PROJECT: 'isSelectProjectDropdownShown',
RESOURCES: 'isResourcesDropdownShown',
QUICK_START: 'isQuickStartDropdownShown',
FREE_CREDITS: 'isFreeCreditsDropdownShown',
AVAILABLE_BALANCE: 'isAvailableBalanceDropdownShown',
PERIODS: 'isPeriodsDropdownShown',
BUCKET_NAMES: 'isBucketNamesDropdownShown',
AG_DATE_PICKER: 'isAGDatePickerShown',
CHART_DATE_PICKER: 'isChartsDatePickerShown',
PERMISSIONS: 'isPermissionsDropdownShown',
PAYMENT_SELECTION: 'isPaymentSelectionShown',
};
enum Modals {
ADD_TEAM_MEMBER= 'addTeamMember',
EDIT_PROFILE= 'editProfile',
CHANGE_PASSWORD= 'changePassword',
CREATE_PROJECT= 'createProject',
ADD_PAYMENT_METHOD= 'addPaymentMethod',
OPEN_BUCKET= 'openBucket',
MFA_RECOVERY= 'mfaRecovery',
ENABLE_MFA= 'enableMFA',
DISABLE_MFA= 'disableMFA',
ADD_TOKEN_FUNDS= 'addTokenFunds',
SHARE_BUCKET= 'shareBucket',
SHARE_OBJECT= 'shareObject',
DELETE_BUCKET= 'deleteBucket',
CREATE_BUCKET= 'createBucket',
NEW_FOLDER= 'newFolder',
CREATE_PROJECT_PASSPHRASE= 'createProjectPassphrase',
MANAGE_PROJECT_PASSPHRASE= 'manageProjectPassphrase',
ADD_COUPON= 'addCoupon',
NEW_BILLING_ADD_COUPON= 'newBillingAddCoupon',
CREATE_PROJECT_PROMPT= 'createProjectPrompt',
UPLOAD_CANCEL_POPUP= 'uploadCancelPopup',
OBJECT_DETAILS= 'objectDetails',
ENTER_PASSPHRASE= 'enterPassphrase',
}
// modals could be of VueConstructor type or Object (for composition api components).
export const MODALS: Record<Modals, unknown> = {
[Modals.ADD_TEAM_MEMBER]: AddTeamMemberModal,
[Modals.EDIT_PROFILE]: EditProfileModal,
[Modals.CHANGE_PASSWORD]: ChangePasswordModal,
[Modals.CREATE_PROJECT]: CreateProjectModal,
[Modals.ADD_PAYMENT_METHOD]: AddPaymentMethodModal,
[Modals.OPEN_BUCKET]: OpenBucketModal,
[Modals.MFA_RECOVERY]: MFARecoveryCodesModal,
[Modals.ENABLE_MFA]: EnableMFAModal,
[Modals.DISABLE_MFA]: DisableMFAModal,
[Modals.ADD_TOKEN_FUNDS]: AddTokenFundsModal,
[Modals.SHARE_BUCKET]: ShareBucketModal,
[Modals.SHARE_OBJECT]: ShareObjectModal,
[Modals.DELETE_BUCKET]: DeleteBucketModal,
[Modals.CREATE_BUCKET]: CreateBucketModal,
[Modals.NEW_FOLDER]: NewFolderModal,
[Modals.CREATE_PROJECT_PASSPHRASE]: CreateProjectPassphraseModal,
[Modals.MANAGE_PROJECT_PASSPHRASE]: ManageProjectPassphraseModal,
[Modals.ADD_COUPON]: AddCouponCodeModal,
[Modals.NEW_BILLING_ADD_COUPON]: NewBillingAddCouponCodeModal,
[Modals.CREATE_PROJECT_PROMPT]: CreateProjectPromptModal,
[Modals.UPLOAD_CANCEL_POPUP]: UploadCancelPopup,
[Modals.OBJECT_DETAILS]: ObjectDetailsModal,
[Modals.ENTER_PASSPHRASE]: EnterPassphraseModal,
};

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

@ -89,7 +89,6 @@ import { CouponType } from '@/types/coupons';
import { CreditCard } from '@/types/payments';
import { Project } from '@/types/projects';
import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { AppState } from '@/utils/constants/appStateEnum';
import { LocalData } from '@/utils/localData';
import { User } from '@/types/users';
@ -102,6 +101,8 @@ import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import ProjectInfoBar from '@/components/infoBars/ProjectInfoBar.vue';
import BillingNotification from '@/components/notifications/BillingNotification.vue';
@ -476,7 +477,7 @@ function setIsLimitModalShown(value: boolean): void {
* Toggles MFA recovery modal visibility.
*/
function toggleMFARecoveryModal(): void {
store.commit(APP_STATE_MUTATIONS.TOGGLE_MFA_RECOVERY_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.mfaRecovery);
}
/**
@ -496,7 +497,7 @@ async function generateNewMFARecoveryCodes(): Promise<void> {
*/
function togglePMModal(): void {
isLimitModalShown.value = false;
store.commit(APP_STATE_MUTATIONS.TOGGLE_IS_ADD_PM_MODAL_SHOWN);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addPaymentMethod);
}
/**

3
web/satellite/tests/unit/ignore/account/billing/coupons/CouponArea.spec.ts
View File

@ -10,6 +10,7 @@ import { appStateModule } from '@/store/modules/appState';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { makePaymentsModule } from '@/store/modules/payments';
import { Coupon, CouponDuration } from '@/types/payments';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import CouponArea from '@/components/account/billing/coupons/CouponArea.vue';
@ -30,7 +31,7 @@ paymentsApi.setMockCoupon(new Coupon(
));
const store = new Vuex.Store({ modules: { paymentsModule, appStateModule } });
store.commit(APP_STATE_ACTIONS.SET_COUPON_CODE_BILLING_UI_STATUS, true);
store.commit(APP_STATE_MUTATIONS.SET_COUPON_CODE_BILLING_UI_STATUS, true);
describe('CouponArea', (): void => {
it('renders correctly', async (): Promise<void> => {