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 | 328 ++---------------- 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, 378 insertions(+), 633 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 dc2fb49501a2..9c043c4dfdc9 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 ec186bab2a2f..c8f26355ea48 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 2025859f125a..a492247921a3 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 18d7f02a1bb6..48852ed767fa 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 600f1d63e191..ebc4c2c27d78 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 0aa0352944a1..846f05011501 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 313a01be95c4..b1b91d998af9 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 1ef43c6a7942..aed74c169f1c 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 5a8e54050f94..58d7822c1cd7 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 71994860326c..7ede129b839d 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 59e1109b67eb..974361be856f 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 515c49616a79..86a348c2dcb7 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 7e96ab46b357..b6bb04cf2283 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 3e4b3e488922..f094f54eb3bc 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 51b067e3a331..aef2675ff859 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 12472781f1fb..f98793aed557 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 84fb3c9b6136..57b609ab9ef5 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 ac86bd57c379..6d622905c6c4 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 26d0a111cfd3..4bd86f4d89bb 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 59cbbc8e6318..099acf001150 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 5b4845a1dedd..ea158a8c568a 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 e0adf7fa7eb9..4a381e18f494 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 ba1fec576d07..f6f219477522 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 2706ca082799..f37742a2aa0d 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 b5d0a1643339..98cdeb947d8f 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 5956f75f3b67..6be0c488c223 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 422ac05ab375..8cba679de3e2 100644 --- a/web/satellite/src/components/objects/UploadCancelPopup.vue +++ b/web/satellite/src/components/objects/UploadCancelPopup.vue @@ -29,8 +29,9 @@