From 109da3c798330251459b9a85ad0a6c0621ffa07e Mon Sep 17 00:00:00 2001 From: Malcolm Bouzi Date: Wed, 4 Jan 2023 09:50:28 -0500 Subject: [PATCH] web/satellite: refactor appstate store module to use enum for popups 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 --- .../permissions/BucketsSelection.vue | 11 +- .../permissions/DurationSelection.vue | 5 +- .../src/components/account/SettingsArea.vue | 14 +- .../account/billing/BillingArea.vue | 9 +- .../account/billing/billingTabs/Coupons.vue | 5 +- .../account/billing/coupons/CouponArea.vue | 20 +- .../PeriodSelection.vue | 7 +- .../paymentMethods/AddTokenCardNative.vue | 6 +- .../paymentMethods/TokenDepositSelection.vue | 7 +- .../src/components/browser/FileBrowser.vue | 5 +- .../src/components/browser/FileEntry.vue | 8 +- .../components/modals/AddCouponCodeModal.vue | 3 +- .../modals/AddPaymentMethodModal.vue | 5 +- .../components/modals/AddTeamMemberModal.vue | 7 +- .../components/modals/AddTokenFundsModal.vue | 6 +- .../src/components/modals/AllModals.vue | 180 +--------- .../components/modals/ChangePasswordModal.vue | 3 +- .../components/modals/CreateBucketModal.vue | 5 +- .../components/modals/CreateProjectModal.vue | 13 +- .../modals/CreateProjectPromptModal.vue | 7 +- .../components/modals/DeleteBucketModal.vue | 6 +- .../src/components/modals/DisableMFAModal.vue | 6 +- .../components/modals/EditProfileModal.vue | 4 +- .../src/components/modals/EnableMFAModal.vue | 5 +- .../modals/EnterPassphraseModal.vue | 2 +- .../modals/MFARecoveryCodesModal.vue | 3 +- .../modals/NewBillingAddCouponCodeModal.vue | 4 +- .../src/components/modals/NewFolderModal.vue | 5 +- .../components/modals/ObjectDetailsModal.vue | 5 +- .../src/components/modals/OpenBucketModal.vue | 5 +- .../components/modals/ShareBucketModal.vue | 6 +- .../components/modals/ShareObjectModal.vue | 4 +- .../CreateProjectPassphraseModal.vue | 6 +- .../manageProjectPassphrase/ClearStep.vue | 6 +- .../manageProjectPassphrase/CreateStep.vue | 6 +- .../ManageProjectPassphraseModal.vue | 4 +- .../manageProjectPassphrase/SwitchStep.vue | 6 +- .../src/components/navigation/AccountArea.vue | 7 +- .../navigation/MobileNavigation.vue | 9 +- .../components/navigation/NavigationArea.vue | 10 +- .../navigation/ProjectSelection.vue | 15 +- .../components/navigation/QuickStartLinks.vue | 7 +- .../notifications/BillingNotification.vue | 1 + .../src/components/objects/BucketDetails.vue | 4 +- .../src/components/objects/BucketItem.vue | 3 +- .../components/objects/BucketSettingsNav.vue | 14 +- .../src/components/objects/BucketsTable.vue | 11 +- .../src/components/objects/BucketsView.vue | 13 +- .../components/objects/UploadCancelPopup.vue | 5 +- .../src/components/objects/UploadFile.vue | 3 +- .../onboardingTour/steps/OverviewStep.vue | 5 +- .../steps/cliFlow/PermissionsSelect.vue | 5 +- .../DashboardFunctionalHeader.vue | 7 +- .../NewProjectDashboard.vue | 13 +- .../components/projectsList/ProjectsList.vue | 13 +- .../src/components/team/HeaderArea.vue | 5 +- web/satellite/src/store/index.ts | 3 +- web/satellite/src/store/modules/appState.ts | 332 ++---------------- web/satellite/src/store/modules/files.ts | 3 +- web/satellite/src/store/modules/objects.ts | 5 +- web/satellite/src/store/mutationConstants.ts | 4 +- .../src/utils/constants/actionNames.ts | 2 + .../src/utils/constants/appStatePopUps.ts | 97 +++++ web/satellite/src/views/DashboardArea.vue | 7 +- .../billing/coupons/CouponArea.spec.ts | 3 +- 65 files changed, 380 insertions(+), 635 deletions(-) create mode 100644 web/satellite/src/utils/constants/appStatePopUps.ts diff --git a/web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue b/web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue index dc2fb4950..9c043c4df 100644 --- a/web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue +++ b/web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue @@ -13,9 +13,9 @@ alt="Arrow down (expand)" /> - @@ -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; } /** diff --git a/web/satellite/src/components/accessGrants/permissions/DurationSelection.vue b/web/satellite/src/components/accessGrants/permissions/DurationSelection.vue index ec186bab2..c8f26355e 100644 --- a/web/satellite/src/components/accessGrants/permissions/DurationSelection.vue +++ b/web/satellite/src/components/accessGrants/permissions/DurationSelection.vue @@ -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; } /** diff --git a/web/satellite/src/components/account/SettingsArea.vue b/web/satellite/src/components/account/SettingsArea.vue index 2025859f1..a49224792 100644 --- a/web/satellite/src/components/account/SettingsArea.vue +++ b/web/satellite/src/components/account/SettingsArea.vue @@ -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); } /** diff --git a/web/satellite/src/components/account/billing/BillingArea.vue b/web/satellite/src/components/account/billing/BillingArea.vue index 18d7f02a1..48852ed76 100644 --- a/web/satellite/src/components/account/billing/BillingArea.vue +++ b/web/satellite/src/components/account/billing/BillingArea.vue @@ -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'); } /** diff --git a/web/satellite/src/components/account/billing/billingTabs/Coupons.vue b/web/satellite/src/components/account/billing/billingTabs/Coupons.vue index 600f1d63e..ebc4c2c27 100644 --- a/web/satellite/src/components/account/billing/billingTabs/Coupons.vue +++ b/web/satellite/src/components/account/billing/billingTabs/Coupons.vue @@ -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); } /** diff --git a/web/satellite/src/components/account/billing/coupons/CouponArea.vue b/web/satellite/src/components/account/billing/coupons/CouponArea.vue index 0aa035294..846f05011 100644 --- a/web/satellite/src/components/account/billing/coupons/CouponArea.vue +++ b/web/satellite/src/components/account/billing/coupons/CouponArea.vue @@ -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(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. diff --git a/web/satellite/src/components/account/billing/depositAndBillingHistory/PeriodSelection.vue b/web/satellite/src/components/account/billing/depositAndBillingHistory/PeriodSelection.vue index 313a01be9..b1b91d998 100644 --- a/web/satellite/src/components/account/billing/depositAndBillingHistory/PeriodSelection.vue +++ b/web/satellite/src/components/account/billing/depositAndBillingHistory/PeriodSelection.vue @@ -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(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); } /** diff --git a/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue b/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue index 1ef43c6a7..aed74c169 100644 --- a/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue +++ b/web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue @@ -93,11 +93,13 @@ diff --git a/web/satellite/src/components/modals/AddPaymentMethodModal.vue b/web/satellite/src/components/modals/AddPaymentMethodModal.vue index 5a8e54050..58d7822c1 100644 --- a/web/satellite/src/components/modals/AddPaymentMethodModal.vue +++ b/web/satellite/src/components/modals/AddPaymentMethodModal.vue @@ -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); } /** diff --git a/web/satellite/src/components/modals/AddTeamMemberModal.vue b/web/satellite/src/components/modals/AddTeamMemberModal.vue index 719948603..7ede129b8 100644 --- a/web/satellite/src/components/modals/AddTeamMemberModal.vue +++ b/web/satellite/src/components/modals/AddTeamMemberModal.vue @@ -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); } /** diff --git a/web/satellite/src/components/modals/AddTokenFundsModal.vue b/web/satellite/src/components/modals/AddTokenFundsModal.vue index 59e1109b6..974361be8 100644 --- a/web/satellite/src/components/modals/AddTokenFundsModal.vue +++ b/web/satellite/src/components/modals/AddTokenFundsModal.vue @@ -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); } /** diff --git a/web/satellite/src/components/modals/AllModals.vue b/web/satellite/src/components/modals/AllModals.vue index 515c49616..86a348c2d 100644 --- a/web/satellite/src/components/modals/AllModals.vue +++ b/web/satellite/src/components/modals/AllModals.vue @@ -2,29 +2,8 @@ // See LICENSE for copying information. @@ -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; } } diff --git a/web/satellite/src/components/modals/ChangePasswordModal.vue b/web/satellite/src/components/modals/ChangePasswordModal.vue index 7e96ab46b..b6bb04cf2 100644 --- a/web/satellite/src/components/modals/ChangePasswordModal.vue +++ b/web/satellite/src/components/modals/ChangePasswordModal.vue @@ -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); } } diff --git a/web/satellite/src/components/modals/CreateBucketModal.vue b/web/satellite/src/components/modals/CreateBucketModal.vue index 3e4b3e488..f094f54eb 100644 --- a/web/satellite/src/components/modals/CreateBucketModal.vue +++ b/web/satellite/src/components/modals/CreateBucketModal.vue @@ -52,7 +52,6 @@ diff --git a/web/satellite/src/components/modals/CreateProjectPromptModal.vue b/web/satellite/src/components/modals/CreateProjectPromptModal.vue index 51b067e3a..aef2675ff 100644 --- a/web/satellite/src/components/modals/CreateProjectPromptModal.vue +++ b/web/satellite/src/components/modals/CreateProjectPromptModal.vue @@ -33,6 +33,7 @@ diff --git a/web/satellite/src/components/modals/DeleteBucketModal.vue b/web/satellite/src/components/modals/DeleteBucketModal.vue index 12472781f..f98793aed 100644 --- a/web/satellite/src/components/modals/DeleteBucketModal.vue +++ b/web/satellite/src/components/modals/DeleteBucketModal.vue @@ -31,7 +31,7 @@ diff --git a/web/satellite/src/components/modals/NewFolderModal.vue b/web/satellite/src/components/modals/NewFolderModal.vue index 84fb3c9b6..57b609ab9 100644 --- a/web/satellite/src/components/modals/NewFolderModal.vue +++ b/web/satellite/src/components/modals/NewFolderModal.vue @@ -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); } /** diff --git a/web/satellite/src/components/modals/ObjectDetailsModal.vue b/web/satellite/src/components/modals/ObjectDetailsModal.vue index ac86bd57c..6d622905c 100644 --- a/web/satellite/src/components/modals/ObjectDetailsModal.vue +++ b/web/satellite/src/components/modals/ObjectDetailsModal.vue @@ -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); } /** diff --git a/web/satellite/src/components/modals/OpenBucketModal.vue b/web/satellite/src/components/modals/OpenBucketModal.vue index 26d0a111c..4bd86f4d8 100644 --- a/web/satellite/src/components/modals/OpenBucketModal.vue +++ b/web/satellite/src/components/modals/OpenBucketModal.vue @@ -53,7 +53,6 @@ diff --git a/web/satellite/src/components/modals/createProjectPassphrase/CreateProjectPassphraseModal.vue b/web/satellite/src/components/modals/createProjectPassphrase/CreateProjectPassphraseModal.vue index 59cbbc8e6..099acf001 100644 --- a/web/satellite/src/components/modals/createProjectPassphrase/CreateProjectPassphraseModal.vue +++ b/web/satellite/src/components/modals/createProjectPassphrase/CreateProjectPassphraseModal.vue @@ -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); } /** diff --git a/web/satellite/src/components/modals/manageProjectPassphrase/ClearStep.vue b/web/satellite/src/components/modals/manageProjectPassphrase/ClearStep.vue index 5b4845a1d..ea158a8c5 100644 --- a/web/satellite/src/components/modals/manageProjectPassphrase/ClearStep.vue +++ b/web/satellite/src/components/modals/manageProjectPassphrase/ClearStep.vue @@ -28,8 +28,10 @@ diff --git a/web/satellite/src/components/modals/manageProjectPassphrase/CreateStep.vue b/web/satellite/src/components/modals/manageProjectPassphrase/CreateStep.vue index e0adf7fa7..4a381e18f 100644 --- a/web/satellite/src/components/modals/manageProjectPassphrase/CreateStep.vue +++ b/web/satellite/src/components/modals/manageProjectPassphrase/CreateStep.vue @@ -28,6 +28,8 @@ diff --git a/web/satellite/src/components/modals/manageProjectPassphrase/ManageProjectPassphraseModal.vue b/web/satellite/src/components/modals/manageProjectPassphrase/ManageProjectPassphraseModal.vue index ba1fec576..f6f219477 100644 --- a/web/satellite/src/components/modals/manageProjectPassphrase/ManageProjectPassphraseModal.vue +++ b/web/satellite/src/components/modals/manageProjectPassphrase/ManageProjectPassphraseModal.vue @@ -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(() => { diff --git a/web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue b/web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue index 2706ca082..f37742a2a 100644 --- a/web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue +++ b/web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue @@ -39,7 +39,7 @@ diff --git a/web/satellite/src/components/objects/BucketsTable.vue b/web/satellite/src/components/objects/BucketsTable.vue index b5d0a1643..98cdeb947 100644 --- a/web/satellite/src/components/objects/BucketsTable.vue +++ b/web/satellite/src/components/objects/BucketsTable.vue @@ -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(() => { diff --git a/web/satellite/src/components/objects/BucketsView.vue b/web/satellite/src/components/objects/BucketsView.vue index 5956f75f3..6be0c488c 100644 --- a/web/satellite/src/components/objects/BucketsView.vue +++ b/web/satellite/src/components/objects/BucketsView.vue @@ -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); } /** diff --git a/web/satellite/src/components/objects/UploadCancelPopup.vue b/web/satellite/src/components/objects/UploadCancelPopup.vue index 422ac05ab..8cba679de 100644 --- a/web/satellite/src/components/objects/UploadCancelPopup.vue +++ b/web/satellite/src/components/objects/UploadCancelPopup.vue @@ -29,8 +29,9 @@