From 5fede0ce95f5e4d75c31b76bcde8d4d5b5e04bcb Mon Sep 17 00:00:00 2001
From: Wilfred Asomani <devwilfredagyei@gmail.com>
Date: Fri, 12 May 2023 15:17:09 +0000
Subject: [PATCH] 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
---
 .../components/accessGrants/AccessGrants.vue  |  7 ++++++
 .../components/account/NewSettingsArea.vue    | 22 +++++++++++++++++--
 .../account/billing/BillingArea.vue           |  9 ++++++++
 .../src/components/objects/BucketsView.vue    | 11 +++++++++-
 .../onboardingTour/OnboardingTourArea.vue     | 21 +++++++++++++++++-
 .../components/team/ProjectMembersArea.vue    | 11 +++++++++-
 6 files changed, 76 insertions(+), 5 deletions(-)

diff --git a/web/satellite/src/components/accessGrants/AccessGrants.vue b/web/satellite/src/components/accessGrants/AccessGrants.vue
index 503475a14..560bd4df1 100644
--- a/web/satellite/src/components/accessGrants/AccessGrants.vue
+++ b/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;
diff --git a/web/satellite/src/components/account/NewSettingsArea.vue b/web/satellite/src/components/account/NewSettingsArea.vue
index 34b863e0a..6e05bb058 100644
--- a/web/satellite/src/components/account/NewSettingsArea.vue
+++ b/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>
diff --git a/web/satellite/src/components/account/billing/BillingArea.vue b/web/satellite/src/components/account/billing/BillingArea.vue
index ed31111ef..c2a1efdd3 100644
--- a/web/satellite/src/components/account/billing/BillingArea.vue
+++ b/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) {
diff --git a/web/satellite/src/components/objects/BucketsView.vue b/web/satellite/src/components/objects/BucketsView.vue
index 7523002df..bd6ed6494 100644
--- a/web/satellite/src/components/objects/BucketsView.vue
+++ b/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();
 });
diff --git a/web/satellite/src/components/onboardingTour/OnboardingTourArea.vue b/web/satellite/src/components/onboardingTour/OnboardingTourArea.vue
index 105e6aa2d..5636380d7 100644
--- a/web/satellite/src/components/onboardingTour/OnboardingTourArea.vue
+++ b/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 {
diff --git a/web/satellite/src/components/team/ProjectMembersArea.vue b/web/satellite/src/components/team/ProjectMembersArea.vue
index 841346c9b..31e49d6a7 100644
--- a/web/satellite/src/components/team/ProjectMembersArea.vue
+++ b/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);