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

web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue

@@ -13,9 +13,9 @@
                 alt="Arrow down (expand)"
             />
         </div>
-        <BucketsDropdown 
+        <BucketsDropdown
-            v-if="isDropdownShown" 
+            v-if="isDropdownShown"
-            :show-scrollbar="showScrollbar" 
+            :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;
     }
 
     /**

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;
     }
 
     /**

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);
 }
 
 /**

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');
     }
 
     /**

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);
 }
 
 /**

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<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.

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<string>(periodOptions[0]);
 /**
  * Indicates if periods dropdown is shown.
  */
-const isDropdownShown = computed((): Date => {
+const isDropdownShown = computed((): boolean => {
-    return store.state.appStateModule.appState.isPeriodsDropdownShown;
+    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);
 }
 
 /**

web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue

@@ -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);
     }
 
     /**

web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue

@@ -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,

web/satellite/src/components/browser/FileBrowser.vue

@@ -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);
 }
 
 /**

web/satellite/src/components/browser/FileEntry.vue

@@ -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);
 }
 
 /**

web/satellite/src/components/modals/AddCouponCodeModal.vue

@@ -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>

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);
     }
 
     /**

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);
     }
 
     /**

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);
     }
 
     /**

web/satellite/src/components/modals/AllModals.vue

@@ -2,29 +2,8 @@
 // See LICENSE for copying information.
 
 <template>
-    <div>
+    <div v-if="activeModal">
-        <CreateProjectPromptModal v-if="isCreateProjectPromptModal" />
+        <component :is="activeModal" />
-        <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>
 </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.
+   * Indicates the current active modal.
-     */
+   */
-    public get isCreateProjectModal(): boolean {
+    public get activeModal(): unknown | null {
-        return this.$store.state.appStateModule.appState.isCreateProjectModalShown;
+        // modal could be of VueConstructor type or Object (for composition api components).
-    }
+        return this.$store.state.appStateModule.appState.activeModal;
-
-    /**
-     * 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;
     }
 }
 </script>

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);
     }
 }
 </script>

web/satellite/src/components/modals/CreateBucketModal.vue

@@ -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);
 }
 
 /**

web/satellite/src/components/modals/CreateProjectModal.vue

@@ -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>

web/satellite/src/components/modals/CreateProjectPromptModal.vue

@@ -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.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
-        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_IS_ADD_PM_MODAL_SHOWN);
+        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>

web/satellite/src/components/modals/DeleteBucketModal.vue

@@ -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);
     }
 
     /**

web/satellite/src/components/modals/DisableMFAModal.vue

@@ -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);
     }
 
     /**

web/satellite/src/components/modals/EditProfileModal.vue

@@ -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);
     }
 
     /**

web/satellite/src/components/modals/EnableMFAModal.vue

@@ -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);
     }
 
     /**

web/satellite/src/components/modals/EnterPassphraseModal.vue

@@ -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);
     }
 
     /**

web/satellite/src/components/modals/MFARecoveryCodesModal.vue

@@ -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);
     }
 
     /**

web/satellite/src/components/modals/NewBillingAddCouponCodeModal.vue

@@ -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>

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);
     }
 
     /**

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);
     }
 
     /**

web/satellite/src/components/modals/OpenBucketModal.vue

@@ -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);
     }
 
     /**

web/satellite/src/components/modals/ShareBucketModal.vue

@@ -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);
     }
 
     /**

web/satellite/src/components/modals/ShareObjectModal.vue

@@ -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>

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);
 }
 
 /**

web/satellite/src/components/modals/manageProjectPassphrase/ClearStep.vue

@@ -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>
 

web/satellite/src/components/modals/manageProjectPassphrase/CreateStep.vue

@@ -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.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
-    store.commit(APP_STATE_MUTATIONS.TOGGLE_CREATE_PROJECT_PASSPHRASE_MODAL_SHOWN);
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
 }
 </script>
 

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(() => {

web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue

@@ -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 {

web/satellite/src/components/navigation/AccountArea.vue

@@ -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;
     }
 
     /**

web/satellite/src/components/navigation/MobileNavigation.vue

@@ -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);
             }
         }
 

web/satellite/src/components/navigation/NavigationArea.vue

@@ -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;
     }
 
     /**

web/satellite/src/components/navigation/ProjectSelection.vue

@@ -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 {
+    public get isDropdownShown(): boolean {
-        return this.$store.state.appStateModule.appState.isSelectProjectDropdownShown;
+        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);
             }
         }
 

web/satellite/src/components/navigation/QuickStartLinks.vue

@@ -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);
             }
         }
 

web/satellite/src/components/notifications/BillingNotification.vue

@@ -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';

web/satellite/src/components/objects/BucketDetails.vue

@@ -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);
     }
 
     /**

web/satellite/src/components/objects/BucketItem.vue

@@ -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();
     }
 

web/satellite/src/components/objects/BucketSettingsNav.vue

@@ -2,11 +2,11 @@
 // See LICENSE for copying information.
 
 <template>
-    <div 
+    <div
         class="bucket-settings-nav"
-        @click.stop.prevent="isDropdownOpen = !isDropdownOpen" 
+        @click.stop.prevent="isDropdownOpen = !isDropdownOpen"
-        @mouseenter="isHoveredOver = true" 
+        @mouseenter="isHoveredOver = true"
-        @mouseleave="isHoveredOver = false"  
+        @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>

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(() => {

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);
     }
 
     /**

web/satellite/src/components/objects/UploadCancelPopup.vue

@@ -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);
     }
 
     /**

web/satellite/src/components/objects/UploadFile.vue

@@ -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;
     }
 
     /**

web/satellite/src/components/onboardingTour/steps/OverviewStep.vue

@@ -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);
     }
 
     /**

web/satellite/src/components/onboardingTour/steps/cliFlow/PermissionsSelect.vue

@@ -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;
     }
 
     /**

web/satellite/src/components/project/newProjectDashboard/DashboardFunctionalHeader.vue

@@ -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);
 }
 
 /**

web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue

@@ -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;
     }
 
     /**

web/satellite/src/components/projectsList/ProjectsList.vue

@@ -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);

web/satellite/src/components/team/HeaderArea.vue

@@ -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 {

web/satellite/src/store/index.ts

@@ -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;
     }

web/satellite/src/store/modules/appState.ts

@@ -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.activeModal = null;
-            state.appState.isEditProfileModalShown = false;
-            state.appState.isChangePasswordModalShown = false;
-            state.appState.isUploadCancelPopupVisible = false;
             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 {
+        [APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN]: function ({ commit, state }: AppContext, dropdown: string): void {
-            if (!state.appState.isAccountDropdownShown) {
+            if (state.appState.activeDropdown === dropdown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
+                commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, 'none');
+                return;
             }
-
+            commit(APP_STATE_MUTATIONS.TOGGLE_ACTIVE_DROPDOWN, dropdown);
-            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);
         },
         [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);

web/satellite/src/store/modules/files.ts

@@ -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();
 

web/satellite/src/store/modules/objects.ts

@@ -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;
             },

web/satellite/src/store/mutationConstants.ts

@@ -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',
 };

web/satellite/src/utils/constants/actionNames.ts

@@ -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 = {

web/satellite/src/utils/constants/appStatePopUps.ts

@@ -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,
+};

web/satellite/src/views/DashboardArea.vue

@@ -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);
 }
 
 /**

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

@@ -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> => {