web/satellite: migrated MobileNavigation component to use SFC composition api

Migrated component to use SFC composition api.
Fixed some router code usage in DashboardArea.
Fixed billing Detailed history router usage.
Fixed VBanner console error.

Change-Id: I372f870185a00334895c62d504e2aed44f8f5b9d

web/satellite/src/components/account/billing/depositAndBillingHistory/DetailedHistory.vue

@@ -32,7 +32,7 @@ import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { PaymentsHistoryItem, PaymentsHistoryItemType } from '@/types/payments';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
-import { useNotify, useRoute, useRouter, useStore } from '@/utils/hooks';
+import { useNotify, useRouter, useStore } from '@/utils/hooks';
 
 import PaymentsItem from '@/components/account/billing/depositAndBillingHistory/PaymentsItem.vue';
 import SortingHeader from '@/components/account/billing/depositAndBillingHistory/SortingHeader.vue';
@@ -44,18 +44,16 @@ const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
 
 const store = useStore();
 const notify = useNotify();
-const router = useRouter();
+const nativeRouter = useRouter();
-const nativeRoute = useRoute();
+const router = reactive(nativeRouter);
 
 const isDataFetching = ref<boolean>(true);
 
-const route = reactive(nativeRoute);
-
 /**
  * Indicates if current route is billing history page.
  */
 const isBillingHistory = computed((): boolean => {
-    return route.name === RouteConfig.BillingHistory.name;
+    return router.currentRoute.name === RouteConfig.BillingHistory.name;
 });
 
 /**

web/satellite/src/components/common/VBanner.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import InfoIcon from '@/../static/images/notifications/info.svg';
 import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
@@ -35,7 +35,7 @@ const props = withDefaults(defineProps<{
 
 const isShown = ref<boolean>(true);
 const bannerWidth = ref<number>(0);
-let resizeObserver = reactive<ResizeObserver>();
+const resizeObserver = ref<ResizeObserver>();
 
 function closeClicked(): void {
     isShown.value = false;
@@ -49,11 +49,11 @@ function onBannerResize(): void {
 }
 
 function setResizable(): void {
-    resizeObserver?.observe(props.dashboardRef);
+    resizeObserver.value?.observe(props.dashboardRef);
 }
 
 onMounted((): void => {
-    resizeObserver = new ResizeObserver(onBannerResize);
+    resizeObserver.value = new ResizeObserver(onBannerResize);
 
     if (props.dashboardRef) {
         setResizable();
@@ -62,7 +62,7 @@ onMounted((): void => {
 });
 
 onUnmounted((): void => {
-    resizeObserver?.unobserve(props.dashboardRef);
+    resizeObserver.value?.unobserve(props.dashboardRef);
 });
 
 watch(() => props.dashboardRef, () => {

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

@@ -158,9 +158,8 @@
     </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-
+import { computed, ref } from 'vue';
-import { Component, Vue } from 'vue-property-decorator';
 
 import { AuthHttpApi } from '@/api/auth';
 import { AnalyticsHttpApi } from '@/api/analytics';
@@ -181,11 +180,10 @@ 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 { useNotify, useRouter, useStore } from '@/utils/hooks';
 
 import ResourcesLinks from '@/components/navigation/ResourcesLinks.vue';
 import QuickStartLinks from '@/components/navigation/QuickStartLinks.vue';
-import ProjectSelection from '@/components/navigation/ProjectSelection.vue';
-import AccountArea from '@/components/navigation/AccountArea.vue';
 import VLoader from '@/components/common/VLoader.vue';
 
 import CrossIcon from '@/../static/images/common/closeCross.svg';
@@ -212,304 +210,271 @@ import TierBadgeFree from '@/../static/images/navigation/tierBadgeFree.svg';
 import TierBadgePro from '@/../static/images/navigation/tierBadgePro.svg';
 import UsersIcon from '@/../static/images/navigation/users.svg';
 
-// @vue/component
+const FIRST_PAGE = 1;
-@Component({
+const navigation: NavigationLink[] = [
-    components: {
+    RouteConfig.ProjectDashboard.withIcon(DashboardIcon),
-        ResourcesLinks,
+    RouteConfig.Buckets.withIcon(BucketsIcon),
-        QuickStartLinks,
+    RouteConfig.AccessGrants.withIcon(AccessGrantsIcon),
-        ProjectSelection,
+    RouteConfig.Users.withIcon(UsersIcon),
-        AccountArea,
+];
-        LogoIcon,
-        DashboardIcon,
-        AccessGrantsIcon,
-        UsersIcon,
-        BillingIcon,
-        BucketsIcon,
-        ResourcesIcon,
-        QuickStartIcon,
-        ArrowIcon,
-        CheckmarkIcon,
-        ProjectIcon,
-        ManageIcon,
-        PassphraseIcon,
-        CreateProjectIcon,
-        VLoader,
-        CrossIcon,
-        MenuIcon,
-        InfoIcon,
-        SatelliteIcon,
-        AccountIcon,
-        SettingsIcon,
-        LogoutIcon,
-        TierBadgeFree,
-        TierBadgePro,
-    },
-})
-export default class MobileNavigation extends Vue {
-    private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
-    private readonly auth: AuthHttpApi = new AuthHttpApi();
 
-    private FIRST_PAGE = 1;
+const store = useStore();
-    public isResourcesDropdownShown = false;
+const router = useRouter();
-    public isQuickStartDropdownShown = false;
+const notify = useNotify();
-    public isProjectDropdownShown = false;
+const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
-    public isAccountDropdownShown = false;
+const auth: AuthHttpApi = new AuthHttpApi();
-    public isOpened = false;
-    public isLoading = false;
 
-    public navigation: NavigationLink[] = [
+const isResourcesDropdownShown = ref<boolean>(false);
-        RouteConfig.ProjectDashboard.withIcon(DashboardIcon),
+const isQuickStartDropdownShown = ref<boolean>(false);
-        RouteConfig.Buckets.withIcon(BucketsIcon),
+const isProjectDropdownShown = ref<boolean>(false);
-        RouteConfig.AccessGrants.withIcon(AccessGrantsIcon),
+const isAccountDropdownShown = ref<boolean>(false);
-        RouteConfig.Users.withIcon(UsersIcon),
+const isOpened = ref<boolean>(false);
-    ];
+const isLoading = ref<boolean>(false);
 
-    /**
+/**
-     * Redirects to project dashboard.
+ * Indicates if all projects dashboard should be used.
-     */
+ */
-    public onLogoClick(): void {
+const isAllProjectsDashboard = computed((): boolean => {
-        if (this.isAllProjectsDashboard) {
+    return store.state.appStateModule.isAllProjectsDashboard;
-            this.$router.push(RouteConfig.AllProjectsDashboard.path);
+});
-            return;
-        }
 
-        if (this.$route.name === RouteConfig.ProjectDashboard.name) {
+/**
-            return;
+ * Returns projects list from store.
-        }
+ */
+const projects = computed((): Project[] => {
+    return store.getters.projectsWithoutSelected;
+});
 
-        this.$router.push(RouteConfig.ProjectDashboard.path);
+/**
+ * Indicates if current route is objects view.
+ */
+const isBucketsView = computed((): boolean => {
+    return router.currentRoute.path.includes(RouteConfig.BucketsManagement.path);
+});
+
+/**
+ * Returns selected project from store.
+ */
+const selectedProject = computed((): Project => {
+    return store.getters.selectedProject;
+});
+
+/**
+ * Returns satellite name from store.
+ */
+const satellite = computed((): boolean => {
+    return store.state.appStateModule.satelliteName;
+});
+
+/**
+ * Returns user entity from store.
+ */
+const user = computed((): User => {
+    return store.getters.user;
+});
+
+/**
+ * Redirects to project dashboard.
+ */
+function onLogoClick(): void {
+    if (isAllProjectsDashboard.value) {
+        router.push(RouteConfig.AllProjectsDashboard.path);
+        return;
     }
 
-    public onNavClick(path: string): void {
+    if (router.currentRoute.name === RouteConfig.ProjectDashboard.name) {
-        this.trackClickEvent(path);
+        return;
-        this.isOpened = false;
     }
 
-    /**
+    router.push(RouteConfig.ProjectDashboard.path);
-     * Toggles navigation content visibility.
+}
-     */
+
-    public toggleNavigation(): void {
+function onNavClick(path: string): void {
-        this.isOpened = !this.isOpened;
+    trackClickEvent(path);
+    isOpened.value = false;
+}
+
+/**
+ * Toggles navigation content visibility.
+ */
+function toggleNavigation(): void {
+    isOpened.value = !isOpened.value;
+}
+
+/**
+ * Toggles resources dropdown visibility.
+ */
+function toggleResourcesDropdown(): void {
+    isResourcesDropdownShown.value = !isResourcesDropdownShown.value;
+}
+
+/**
+ * Toggles quick start dropdown visibility.
+ */
+function toggleQuickStartDropdown(): void {
+    isQuickStartDropdownShown.value = !isQuickStartDropdownShown.value;
+}
+
+/**
+ * Toggles projects dropdown visibility.
+ */
+function toggleProjectDropdown(): void {
+    isProjectDropdownShown.value = !isProjectDropdownShown.value;
+}
+
+/**
+ * Toggles account dropdown visibility.
+ */
+function toggleAccountDropdown(): void {
+    isAccountDropdownShown.value = !isAccountDropdownShown.value;
+    window.scrollTo(0, document.querySelector('.navigation-area__container__wrap')?.scrollHeight || 0);
+}
+
+/**
+ * Sends new path click event to segment.
+ */
+function trackClickEvent(path: string): void {
+    analytics.pageVisit(path);
+}
+
+/**
+ * Toggles manage passphrase modal shown.
+ */
+function onManagePassphraseClick(): void {
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
+}
+
+async function onProjectClick(): Promise<void> {
+    toggleProjectDropdown();
+
+    if (isLoading.value || !isProjectDropdownShown.value) return;
+
+    isLoading.value = true;
+
+    try {
+        await store.dispatch(PROJECTS_ACTIONS.FETCH);
+        await store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, store.getters.selectedProject.id);
+    } catch (error) {
+        await notify.error(error.message, AnalyticsErrorEventSource.MOBILE_NAVIGATION);
+    } finally {
+        isLoading.value = false;
+    }
+}
+
+/**
+ * Fetches all project related information.
+ * @param projectID
+ */
+async function onProjectSelected(projectID: string): Promise<void> {
+    await analytics.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
+    await store.dispatch(PROJECTS_ACTIONS.SELECT, projectID);
+    LocalData.setSelectedProjectId(projectID);
+    await store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, '');
+
+    isProjectDropdownShown.value = false;
+
+    if (isBucketsView.value) {
+        await store.dispatch(OBJECTS_ACTIONS.CLEAR);
+        analytics.pageVisit(RouteConfig.Buckets.path);
+        await router.push(RouteConfig.Buckets.path).catch(() => {return; });
     }
 
-    /**
+    try {
-     * Toggles resources dropdown visibility.
+        await store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
-     */
+        await store.dispatch(PM_ACTIONS.FETCH, FIRST_PAGE);
-    public toggleResourcesDropdown(): void {
+        await store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, FIRST_PAGE);
-        this.isResourcesDropdownShown = !this.isResourcesDropdownShown;
+        await store.dispatch(BUCKET_ACTIONS.FETCH, FIRST_PAGE);
+        await store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, store.getters.selectedProject.id);
+    } catch (error) {
+        await notify.error(`Unable to select project. ${error.message}`, AnalyticsErrorEventSource.MOBILE_NAVIGATION);
+    }
+}
+
+/**
+ * Route to projects list page.
+ */
+function onProjectsLinkClick(): void {
+    if (router.currentRoute.name !== RouteConfig.ProjectsList.name) {
+        analytics.pageVisit(RouteConfig.ProjectsList.path);
+        analytics.eventTriggered(AnalyticsEvent.MANAGE_PROJECTS_CLICKED);
+        router.push(RouteConfig.ProjectsList.path);
     }
 
-    /**
+    isProjectDropdownShown.value = false;
-     * Toggles quick start dropdown visibility.
+}
-     */
-    public toggleQuickStartDropdown(): void {
-        this.isQuickStartDropdownShown = !this.isQuickStartDropdownShown;
-    }
 
-    /**
+/**
-     * Toggles projects dropdown visibility.
+ * Route to create project page.
-     */
+ */
-    public toggleProjectDropdown(): void {
+function onCreateLinkClick(): void {
-        this.isProjectDropdownShown = !this.isProjectDropdownShown;
+    if (router.currentRoute.name !== RouteConfig.CreateProject.name) {
-    }
+        analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED);
 
-    /**
+        const user: User = store.getters.user;
-     * Toggles account dropdown visibility.
+        const ownProjectsCount: number = store.getters.projectsCount;
-     */
-    public toggleAccountDropdown(): void {
-        this.isAccountDropdownShown = !this.isAccountDropdownShown;
-        window.scrollTo(0, document.querySelector('.navigation-area__container__wrap')?.scrollHeight || 0);
-    }
 
-    /**
+        if (!user.paidTier && user.projectLimit === ownProjectsCount) {
-     * Indicates if all projects dashboard should be used.
+            store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
-     */
+        } else {
-    public get isAllProjectsDashboard(): boolean {
+            analytics.pageVisit(RouteConfig.CreateProject.path);
-        return this.$store.state.appStateModule.isAllProjectsDashboard;
+            store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
-    }
-
-    /**
-     * Returns projects list from store.
-     */
-    public get projects(): Project[] {
-        return this.$store.getters.projectsWithoutSelected;
-    }
-
-    /**
-     * Sends new path click event to segment.
-     */
-    public trackClickEvent(path: string): void {
-        this.analytics.pageVisit(path);
-    }
-
-    /**
-     * Toggles manage passphrase modal shown.
-     */
-    public onManagePassphraseClick(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.manageProjectPassphrase);
-    }
-
-    /**
-     * Indicates if current route is objects view.
-     */
-    private get isBucketsView(): boolean {
-        const currentRoute = this.$route.path;
-
-        return currentRoute.includes(RouteConfig.BucketsManagement.path);
-    }
-
-    /**
-     * Returns selected project from store.
-     */
-    public get selectedProject(): Project {
-        return this.$store.getters.selectedProject;
-    }
-
-    public async onProjectClick(): Promise<void> {
-        this.toggleProjectDropdown();
-
-        if (this.isLoading || !this.isProjectDropdownShown) return;
-
-        this.isLoading = true;
-
-        try {
-            await this.$store.dispatch(PROJECTS_ACTIONS.FETCH);
-            await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, this.$store.getters.selectedProject.id);
-        } catch (error) {
-            await this.$notify.error(error.message, AnalyticsErrorEventSource.MOBILE_NAVIGATION);
-        } finally {
-            this.isLoading = false;
         }
     }
 
-    /**
+    isProjectDropdownShown.value = false;
-     * Fetches all project related information.
+}
-     * @param projectID
-     */
-    public async onProjectSelected(projectID: string): Promise<void> {
-        await this.analytics.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
-        await this.$store.dispatch(PROJECTS_ACTIONS.SELECT, projectID);
-        LocalData.setSelectedProjectId(projectID);
-        await this.$store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, '');
-        this.isProjectDropdownShown = false;
 
-        if (this.isBucketsView) {
+/**
-            await this.$store.dispatch(OBJECTS_ACTIONS.CLEAR);
+ * Navigates user to billing page.
-            this.analytics.pageVisit(RouteConfig.Buckets.path);
+ */
-            await this.$router.push(RouteConfig.Buckets.path).catch(() => {return; });
+function navigateToBilling(): void {
-        }
+    isOpened.value = false;
+    if (router.currentRoute.path.includes(RouteConfig.Billing.path)) return;
 
-        try {
+    let link = RouteConfig.Account.with(RouteConfig.Billing);
-            await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
+    if (MetaUtils.getMetaContent('new-billing-screen') === 'true') {
-            await this.$store.dispatch(PM_ACTIONS.FETCH, this.FIRST_PAGE);
+        link = link.with(RouteConfig.BillingOverview);
-            await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, this.FIRST_PAGE);
-            await this.$store.dispatch(BUCKET_ACTIONS.FETCH, this.FIRST_PAGE);
-            await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, this.$store.getters.selectedProject.id);
-        } catch (error) {
-            await this.$notify.error(`Unable to select project. ${error.message}`, AnalyticsErrorEventSource.MOBILE_NAVIGATION);
-        }
     }
+    router.push(link.path);
+    analytics.pageVisit(link.path);
+}
 
-    /**
+/**
-     * Route to projects list page.
+ * Navigates user to account settings page.
-     */
+ */
-    public onProjectsLinkClick(): void {
+function navigateToSettings(): void {
-        if (this.$route.name !== RouteConfig.ProjectsList.name) {
+    isOpened.value = false;
-            this.analytics.pageVisit(RouteConfig.ProjectsList.path);
+    analytics.pageVisit(RouteConfig.Account.with(RouteConfig.Settings).path);
-            this.analytics.eventTriggered(AnalyticsEvent.MANAGE_PROJECTS_CLICKED);
+    router.push(RouteConfig.Account.with(RouteConfig.Settings).path).catch(() => {return;});
-            this.$router.push(RouteConfig.ProjectsList.path);
+}
-        }
 
-        this.isProjectDropdownShown = false;
+/**
-    }
+ * Logouts user and navigates to login page.
+ */
+async function onLogout(): Promise<void> {
+    analytics.pageVisit(RouteConfig.Login.path);
+    await router.push(RouteConfig.Login.path);
 
-    /**
+    await Promise.all([
-     * Route to create project page.
+        store.dispatch(PM_ACTIONS.CLEAR),
-     */
+        store.dispatch(PROJECTS_ACTIONS.CLEAR),
-    public onCreateLinkClick(): void {
+        store.dispatch(USER_ACTIONS.CLEAR),
-        if (this.$route.name !== RouteConfig.CreateProject.name) {
+        store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER),
-            this.analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED);
+        store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR),
+        store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
+        store.dispatch(BUCKET_ACTIONS.CLEAR),
+        store.dispatch(OBJECTS_ACTIONS.CLEAR),
+        store.dispatch(APP_STATE_ACTIONS.CLEAR),
+        store.dispatch(PAYMENTS_ACTIONS.CLEAR_PAYMENT_INFO),
+        store.dispatch(AB_TESTING_ACTIONS.RESET),
+        store.dispatch('files/clear'),
+    ]);
 
-            const user: User = this.$store.getters.user;
+    try {
-            const ownProjectsCount: number = this.$store.getters.projectsCount;
+        analytics.eventTriggered(AnalyticsEvent.LOGOUT_CLICKED);
-
+        await auth.logout();
-            if (!user.paidTier && user.projectLimit === ownProjectsCount) {
+    } catch (error) {
-                this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPrompt);
+        await notify.error(error.message, AnalyticsErrorEventSource.MOBILE_NAVIGATION);
-            } else {
-                this.analytics.pageVisit(RouteConfig.CreateProject.path);
-                this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
-            }
-        }
-
-        this.isProjectDropdownShown = false;
-    }
-
-    /**
-     * Navigates user to billing page.
-     */
-    public navigateToBilling(): void {
-        this.isOpened = false;
-        if (this.$route.path.includes(RouteConfig.Billing.path)) return;
-
-        let link = RouteConfig.Account.with(RouteConfig.Billing);
-        if (MetaUtils.getMetaContent('new-billing-screen') === 'true') {
-            link = link.with(RouteConfig.BillingOverview);
-        }
-        this.$router.push(link.path);
-        this.analytics.pageVisit(link.path);
-    }
-
-    /**
-     * Navigates user to account settings page.
-     */
-    public navigateToSettings(): void {
-        this.isOpened = false;
-        this.analytics.pageVisit(RouteConfig.Account.with(RouteConfig.Settings).path);
-        this.$router.push(RouteConfig.Account.with(RouteConfig.Settings).path).catch(() => {return;});
-    }
-
-    /**
-     * Logouts user and navigates to login page.
-     */
-    public async onLogout(): Promise<void> {
-        this.analytics.pageVisit(RouteConfig.Login.path);
-        await this.$router.push(RouteConfig.Login.path);
-
-        await Promise.all([
-            this.$store.dispatch(PM_ACTIONS.CLEAR),
-            this.$store.dispatch(PROJECTS_ACTIONS.CLEAR),
-            this.$store.dispatch(USER_ACTIONS.CLEAR),
-            this.$store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER),
-            this.$store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR),
-            this.$store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
-            this.$store.dispatch(BUCKET_ACTIONS.CLEAR),
-            this.$store.dispatch(OBJECTS_ACTIONS.CLEAR),
-            this.$store.dispatch(APP_STATE_ACTIONS.CLEAR),
-            this.$store.dispatch(PAYMENTS_ACTIONS.CLEAR_PAYMENT_INFO),
-            this.$store.dispatch(AB_TESTING_ACTIONS.RESET),
-            this.$store.dispatch('files/clear'),
-        ]);
-
-        try {
-            this.analytics.eventTriggered(AnalyticsEvent.LOGOUT_CLICKED);
-            await this.auth.logout();
-        } catch (error) {
-            await this.$notify.error(error.message, AnalyticsErrorEventSource.MOBILE_NAVIGATION);
-        }
-    }
-
-    /**
-     * Returns satellite name from store.
-     */
-    public get satellite(): boolean {
-        return this.$store.state.appStateModule.satelliteName;
-    }
-
-    /**
-     * Returns user entity from store.
-     */
-    public get user(): User {
-        return this.$store.getters.user;
     }
 }
 </script>

web/satellite/src/views/DashboardArea.vue

@@ -296,14 +296,14 @@ const joinedWhileAgo = computed((): boolean => {
  * Indicates if current route is projects list page.
  */
 const isProjectListPage = computed((): boolean => {
-    return router.history.current?.name === RouteConfig.ProjectsList.name;
+    return router.currentRoute.name === RouteConfig.ProjectsList.name;
 });
 
 /**
  * Indicates if current route is onboarding tour.
  */
 const isOnboardingTour = computed((): boolean => {
-    return router.history.current?.path.includes(RouteConfig.OnboardingTour.path);
+    return router.currentRoute.path.includes(RouteConfig.OnboardingTour.path);
 });
 
 /**
@@ -339,14 +339,14 @@ const isBillingNotificationShown = computed((): boolean => {
  * Indicates if current route is create project page.
  */
 const isCreateProjectPage = computed((): boolean => {
-    return router.history.current?.name === RouteConfig.CreateProject.name;
+    return router.currentRoute.name === RouteConfig.CreateProject.name;
 });
 
 /**
  * Indicates if current route is the dashboard page.
  */
 const isDashboardPage = computed((): boolean => {
-    return router.history.current?.name === RouteConfig.ProjectDashboard.name;
+    return router.currentRoute.name === RouteConfig.ProjectDashboard.name;
 });
 
 /**