web/satellite: fix no project id provided error

This change fixes an error when all projects dashboard is enabled where
there will be no project selected and an error "projectid not provided"
will be thrown.
It navigates back to the all projects dashoard so the user can select
a project.

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

Change-Id: I144c4bbd3782dcdf40b2ed2be445c7f100c36b32

web/satellite/src/components/accessGrants/AccessGrants.vue

@@ -170,6 +170,7 @@ import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
 import { useProjectsStore } from '@/store/modules/projectsStore';
 import { useAppStore } from '@/store/modules/appStore';
 import { MODALS } from '@/utils/constants/appStatePopUps';
+import { useConfigStore } from '@/store/modules/configStore';
 
 import AccessGrantsItem from '@/components/accessGrants/AccessGrantsItem.vue';
 import VButton from '@/components/common/VButton.vue';
@@ -188,6 +189,7 @@ const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
 const appStore = useAppStore();
 const agStore = useAccessGrantsStore();
 const projectsStore = useProjectsStore();
+const configStore = useConfigStore();
 const notify = useNotify();
 const router = useRouter();
 
@@ -332,6 +334,11 @@ function trackPageVisit(link: string): void {
 }
 
 onMounted(async () => {
+    if (configStore.state.config.allProjectsDashboard && !projectsStore.state.selectedProject.id) {
+        await router.push(RouteConfig.AllProjectsDashboard.path);
+        return;
+    }
+
     try {
         await agStore.getAccessGrants(FIRST_PAGE, projectsStore.state.selectedProject.id);
         areGrantsFetching.value = false;

web/satellite/src/components/account/NewSettingsArea.vue

@@ -1,4 +1,4 @@
-// Copyright (C) 2019 Storj Labs, Inc.
+// Copyright (C) 2023 Storj Labs, Inc.
 // See LICENSE for copying information.
 
 <template>
@@ -104,17 +104,23 @@ import { computed, onMounted } from 'vue';
 import { User } from '@/types/users';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { MODALS } from '@/utils/constants/appStatePopUps';
-import { useNotify } from '@/utils/hooks';
+import { useNotify, useRouter } from '@/utils/hooks';
 import { useLoading } from '@/composables/useLoading';
 import { Duration } from '@/utils/time';
 import { useUsersStore } from '@/store/modules/usersStore';
 import { useAppStore } from '@/store/modules/appStore';
+import { RouteConfig } from '@/router';
+import { useConfigStore } from '@/store/modules/configStore';
+import { useProjectsStore } from '@/store/modules/projectsStore';
 
 import VButton from '@/components/common/VButton.vue';
 
 const appStore = useAppStore();
 const usersStore = useUsersStore();
+const configStore = useConfigStore();
+const projectsStore = useProjectsStore();
 const notify = useNotify();
+const router = useRouter();
 const { isLoading, withLoading } = useLoading();
 
 /**
@@ -131,6 +137,13 @@ const userDuration = computed((): Duration | null => {
     return usersStore.state.settings.sessionDuration;
 });
 
+/**
+ * Returns whether we're on the settings page on the all projects dashboard.
+ */
+const isOnAllDashboardSettings = computed((): boolean => {
+    return router.currentRoute.path.includes(RouteConfig.AccountSettings.path);
+});
+
 /**
  * Toggles enable MFA modal visibility.
  */
@@ -205,6 +218,11 @@ async function generateNewMFARecoveryCodes(): Promise<void> {
  * Lifecycle hook after initial render where user info is fetching.
  */
 onMounted(() => {
+    if (!isOnAllDashboardSettings.value && !projectsStore.state.selectedProject.id) {
+        router.push(RouteConfig.AllProjectsDashboard.path);
+        return;
+    }
+
     usersStore.getUser();
 });
 </script>

web/satellite/src/components/account/billing/BillingArea.vue

@@ -50,9 +50,13 @@ import { NavigationLink } from '@/types/navigation';
 import { useNotify, useRouter } from '@/utils/hooks';
 import { useBillingStore } from '@/store/modules/billingStore';
 import { useAppStore } from '@/store/modules/appStore';
+import { useConfigStore } from '@/store/modules/configStore';
+import { useProjectsStore } from '@/store/modules/projectsStore';
 
 const appStore = useAppStore();
 const billingStore = useBillingStore();
+const configStore = useConfigStore();
+const projectsStore = useProjectsStore();
 const notify = useNotify();
 const nativeRouter = useRouter();
 const router = reactive(nativeRouter);
@@ -140,6 +144,11 @@ function routeToCoupons(): void {
  * Fetches account balance.
  */
 onMounted(async (): Promise<void> => {
+    if (configStore.state.config.allProjectsDashboard && !projectsStore.state.selectedProject.id) {
+        await router.push(RouteConfig.AllProjectsDashboard.path);
+        return;
+    }
+
     try {
         await billingStore.getBalance();
     } catch (error) {

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

@@ -26,10 +26,12 @@ import { BucketPage } from '@/types/buckets';
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
 import { MODALS } from '@/utils/constants/appStatePopUps';
-import { useNotify } from '@/utils/hooks';
+import { useNotify, useRouter } from '@/utils/hooks';
 import { useAppStore } from '@/store/modules/appStore';
 import { useBucketsStore } from '@/store/modules/bucketsStore';
 import { useProjectsStore } from '@/store/modules/projectsStore';
+import { RouteConfig } from '@/router';
+import { useConfigStore } from '@/store/modules/configStore';
 
 import EncryptionBanner from '@/components/objects/EncryptionBanner.vue';
 import BucketsTable from '@/components/objects/BucketsTable.vue';
@@ -39,7 +41,9 @@ import WhitePlusIcon from '@/../static/images/common/plusWhite.svg';
 const bucketsStore = useBucketsStore();
 const appStore = useAppStore();
 const projectsStore = useProjectsStore();
+const configStore = useConfigStore();
 const notify = useNotify();
+const router = useRouter();
 
 const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
 
@@ -123,6 +127,11 @@ function hideBanner(): void {
  * Sets bucket view.
  */
 onMounted(async (): Promise<void> => {
+    if (configStore.state.config.allProjectsDashboard && !projectsStore.state.selectedProject.id) {
+        await router.push(RouteConfig.AllProjectsDashboard.path);
+        return;
+    }
+
     isServerSideEncryptionBannerHidden.value = LocalData.getServerSideEncryptionBannerHidden();
     await setBucketsView();
 });

web/satellite/src/components/onboardingTour/OnboardingTourArea.vue

@@ -7,7 +7,26 @@
     </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+
+import { onMounted } from 'vue';
+
+import { RouteConfig } from '@/router';
+import { useConfigStore } from '@/store/modules/configStore';
+import { useProjectsStore } from '@/store/modules/projectsStore';
+import { useRouter } from '@/utils/hooks';
+
+const configStore = useConfigStore();
+const projectsStore = useProjectsStore();
+const router = useRouter();
+
+onMounted(() => {
+    if (configStore.state.config.allProjectsDashboard && !projectsStore.state.selectedProject.id) {
+        router.push(RouteConfig.AllProjectsDashboard.path);
+    }
+});
+
+</script>
 
 <style scoped lang="scss">
 .tour-area {

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

@@ -53,9 +53,11 @@ import {
     ProjectMemberHeaderState,
 } from '@/types/projectMembers';
 import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
-import { useNotify } from '@/utils/hooks';
+import { useNotify, useRouter } from '@/utils/hooks';
 import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
 import { useProjectsStore } from '@/store/modules/projectsStore';
+import { RouteConfig } from '@/router';
+import { useConfigStore } from '@/store/modules/configStore';
 
 import VLoader from '@/components/common/VLoader.vue';
 import HeaderArea from '@/components/team/HeaderArea.vue';
@@ -66,7 +68,9 @@ import EmptySearchResultIcon from '@/../static/images/common/emptySearchResult.s
 
 const pmStore = useProjectMembersStore();
 const projectsStore = useProjectsStore();
+const configStore = useConfigStore();
 const notify = useNotify();
+const router = useRouter();
 
 const FIRST_PAGE = 1;
 
@@ -152,6 +156,11 @@ async function onPageChange(index: number, limit: number): Promise<void> {
  * Fetches first page of team members list of current project.
  */
 onMounted(async (): Promise<void> => {
+    if (configStore.state.config.allProjectsDashboard && !projectsStore.state.selectedProject.id) {
+        await router.push(RouteConfig.AllProjectsDashboard.path);
+        return;
+    }
+
     try {
         await pmStore.getProjectMembers(FIRST_PAGE, projectsStore.state.selectedProject.id);