cherry-pick fix storjscan migration (#6866)

* satellite/satellitedb/migrate: fix migration of storjscan primary key Change-Id: Ifc27f01267954525391d2a2dea1d9f6a8802d4b2 * web/satellite: theme and style updates (#6860) Updating color theme and styles, plus few copy updates. * web/satellite: fixed NaN issue for edit project limit dialog Added check for undefined value before setting active value dimension. Issue: #6848 Change-Id: I989c647e431ba8ace699be7d5969b617ef1c9034 * web/satellite: trigger upgrade flow on add CC or tokens Updated logic to trigger upgrade account flow on add CC or tokens clicks. Change-Id: I95d6661248091c541d0c7b33af4d62a957b9f658 * web/satellite: Fix project limit UI bug On the "all projects" dashboard, projects that a user was invited to, but did not own, were included in the "total projects" count when determining whether to allow the user to create a project, or prompt them to upgrade or request a limit increase. This change fixes the problem by only counting a user's owned projects when deciding whether to allow the user to make a "create project" request. #6864 Change-Id: I6c86f659d400079e0bafdfa49c4a7f052970b04f --------- Co-authored-by: dlamarmorgan <damein@storj.io> Co-authored-by: Tome Boshevski <tome@storj.io> Co-authored-by: Vitalii <takur12345@gmail.com> Co-authored-by: Moby von Briesen <mobyvb@gmail.com>
storj · Mar 15, 2024 · 53b57d9 · 53b57d9
1 parent 29594a1
commit 53b57d9
Show file tree

Hide file tree

Showing 19 changed files with 112 additions and 52 deletions.
diff --git a/satellite/satellitedb/migrate.go b/satellite/satellitedb/migrate.go
@@ -2652,7 +2652,8 @@ func (db *satelliteDB) ProductionMigration() *migrate.Migration {
 				Description: "update storjscan payments table to use chain_id in primary key",
 				Version:     261,
 				Action: migrate.SQL{
-					`ALTER TABLE storjscan_payments DROP CONSTRAINT storjscan_payments_pkey;`,
+					`ALTER TABLE storjscan_payments DROP CONSTRAINT IF EXISTS "primary";`,
+					`ALTER TABLE storjscan_payments DROP CONSTRAINT IF EXISTS storjscan_payments_pkey;`,
 					`ALTER TABLE storjscan_payments ADD CONSTRAINT storjscan_payments_pkey PRIMARY KEY ( chain_id, block_hash, log_index );`,
 				},
 			},

diff --git a/web/satellite/src/components/AddCreditCardComponent.vue b/web/satellite/src/components/AddCreditCardComponent.vue
@@ -2,9 +2,9 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card title="Add Card" variant="flat" :border="true" rounded="xlg">
+    <v-card title="Add Card" variant="flat" border rounded="xlg">
         <v-card-text>
-            <v-btn v-if="!isCardInputShown" variant="outlined" color="default" size="small" class="mr-2" @click="isCardInputShown = true">+ Add New Card</v-btn>
+            <v-btn v-if="!isCardInputShown" variant="outlined" color="default" size="small" class="mr-2" @click="onShowCardInput">+ Add New Card</v-btn>
 
             <template v-else>
                 <StripeCardElement
@@ -78,6 +78,7 @@ import { useBillingStore } from '@/store/modules/billingStore';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { useConfigStore } from '@/store/modules/configStore';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
+import { useAppStore } from '@/store/modules/appStore';
 
 import StripeCardElement from '@/components/StripeCardElement.vue';
 import StripeCardInput from '@/components/StripeCardInput.vue';
@@ -90,8 +91,10 @@ interface StripeForm {
 const analyticsStore = useAnalyticsStore();
 const configStore = useConfigStore();
 const usersStore = useUsersStore();
-const notify = useNotify();
 const billingStore = useBillingStore();
+const appStore = useAppStore();
+
+const notify = useNotify();
 const { withLoading, isLoading } = useLoading();
 
 const stripeCardInput = ref<StripeForm | null>(null);
@@ -105,6 +108,19 @@ const isUpgradeSuccessShown = ref(false);
 const paymentElementEnabled = computed(() => {
     return configStore.state.config.stripePaymentElementEnabled;
 });
+
+/**
+ * Triggers enter card info inputs to be shown.
+ */
+function onShowCardInput(): void {
+    if (!usersStore.state.user.paidTier) {
+        appStore.toggleUpgradeFlow(true);
+        return;
+    }
+
+    isCardInputShown.value = true;
+}
+
 /**
  * Provides card information to Stripe.
  */

diff --git a/web/satellite/src/components/BucketsDataTable.vue b/web/satellite/src/components/BucketsDataTable.vue
@@ -75,15 +75,15 @@
                 </span>
             </template>
             <template #item.location="{ item }">
-                <v-icon size="28" class="mr-1 pa-1 rounded border">
+                <v-icon size="28" class="mr-1 pa-1 rounded-lg border">
                     <icon-location />
                 </v-icon>
-                <v-chip variant="tonal" color="default" size="small" rounded>
+                <v-chip variant="tonal" color="default" size="small" class="text-capitalize" rounded>
                     {{ item.location || `unknown(${item.defaultPlacement})` }}
                 </v-chip>
             </template>
             <template #item.versioning="{ item }">
-                <v-icon size="28" class="mr-1 pa-1 rounded border text-cursor-pointer">
+                <v-icon size="28" class="mr-1 pa-1 rounded-lg border text-cursor-pointer">
                     <v-tooltip activator="parent" location="top">{{ getVersioningInfo(item.versioning) }}</v-tooltip>
                     <icon-versioning />
                 </v-icon>

diff --git a/web/satellite/src/components/CardStatsComponent.vue b/web/satellite/src/components/CardStatsComponent.vue
@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<{
     color?: string;
     to?: string;
 }>(), {
-    color: 'info',
+    color: 'default',
     to: undefined,
 });
 </script>
diff --git a/web/satellite/src/components/LimitWarningBanners.vue b/web/satellite/src/components/LimitWarningBanners.vue
@@ -17,7 +17,7 @@
             You can increase your limits
             <a class="text-decoration-underline text-cursor-pointer" @click="openLimitDialog(bannerText[threshold].limitType)">here</a>
             or in the
-            <a class="text-decoration-underline text-cursor-pointer" @click="goToProjectSettings">Project Settings page</a>.
+            <a class="text-decoration-underline text-cursor-pointer" @click="goToProjectSettings">project settings page</a>.
         </template>
         <template v-else-if="!isPaidTier && bannerText[threshold].hundred" #text>
             <a class="text-decoration-underline text-cursor-pointer" @click="appStore.toggleUpgradeFlow(true)">Upgrade</a> to avoid any service interruptions.

diff --git a/web/satellite/src/components/StorjTokenCardComponent.vue b/web/satellite/src/components/StorjTokenCardComponent.vue
@@ -43,7 +43,7 @@
             </v-row>
             <v-divider class="my-4" />
             <p>Total Balance</p>
-            <v-chip rounded color="green" variant="outlined" class="font-weight-bold mt-2">{{ balance || '------' }}</v-chip>
+            <v-chip rounded color="success" variant="outlined" class="font-weight-bold mt-2">{{ balance || '------' }}</v-chip>
             <v-divider class="mt-4 mb-2" />
             <v-btn v-if="wallet.address" variant="flat" color="success" size="small" :loading="isLoading" class="mt-2 mr-2" @click="onAddTokens">+ Add STORJ Tokens</v-btn>
             <v-btn v-else variant="flat" color="success" size="small" :loading="isLoading" class="mt-2" @click="claimWalletClick">Create New Wallet</v-btn>
@@ -66,13 +66,16 @@ import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/ana
 import { useNotify } from '@/utils/hooks';
 import { useAppStore } from '@/store/modules/appStore';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
+import { useUsersStore } from '@/store/modules/usersStore';
 
 import AddTokensDialog from '@/components/dialogs/AddTokensDialog.vue';
 import InputCopyButton from '@/components/InputCopyButton.vue';
 
 const analyticsStore = useAnalyticsStore();
 const appStore = useAppStore();
+const usersStore = useUsersStore();
 const billingStore = useBillingStore();
+
 const notify = useNotify();
 const { isLoading, withLoading } = useLoading();
 
@@ -145,6 +148,11 @@ async function claimWallet(): Promise<void> {
  * Called when "Create New Wallet" button is clicked.
  */
 function claimWalletClick(): void {
+    if (!usersStore.state.user.paidTier) {
+        appStore.toggleUpgradeFlow(true);
+        return;
+    }
+
     withLoading(async () => {
         try {
             await claimWallet();
@@ -162,6 +170,11 @@ function claimWalletClick(): void {
 function onAddTokens(): void {
     analyticsStore.eventTriggered(AnalyticsEvent.ADD_FUNDS_CLICKED);
 
+    if (!usersStore.state.user.paidTier) {
+        appStore.toggleUpgradeFlow(true);
+        return;
+    }
+
     withLoading(async () => {
         if (!wallet.value.address) {
             // not possible from this component

diff --git a/web/satellite/src/components/TokenTransactionsTableComponent.vue b/web/satellite/src/components/TokenTransactionsTableComponent.vue
@@ -41,7 +41,7 @@
                 </p>
             </template>
             <template #item.amount="{ item }">
-                <p class="font-weight-bold text-green">
+                <p class="font-weight-bold text-success">
                     {{ item.amount }}
                 </p>
             </template>

diff --git a/web/satellite/src/components/dialogs/CreateProjectDialog.vue b/web/satellite/src/components/dialogs/CreateProjectDialog.vue
@@ -322,7 +322,8 @@ const cardTitle = computed((): string => {
 
 watch(innerContent, comp => {
     if (comp) {
-        isProjectLimitReached.value = projectsStore.state.projects.length >= usersStore.state.user.projectLimit;
+        const ownedProjects = projectsStore.projects.filter((p) => p.ownerId === usersStore.state.user.id);
+        isProjectLimitReached.value = ownedProjects.length >= usersStore.state.user.projectLimit;
         isDescriptionShown.value = false;
         name.value = '';
         description.value = '';

diff --git a/web/satellite/src/components/dialogs/EditProjectLimitDialog.vue b/web/satellite/src/components/dialogs/EditProjectLimitDialog.vue
@@ -197,7 +197,9 @@ const input = ref<number>(0);
 
 const dropdownModel = computed<(Dimensions.GB | Dimensions.TB)[]>({
     get: () => [ activeMeasurement.value ],
-    set: value => activeMeasurement.value = value[0],
+    set: value => {
+        if (value[0]) activeMeasurement.value = value[0];
+    },
 });
 
 /**

diff --git a/web/satellite/src/components/dialogs/EmissionsDialog.vue b/web/satellite/src/components/dialogs/EmissionsDialog.vue
@@ -48,14 +48,14 @@
                 </v-card>
                 <v-card class="pa-4 mb-4">
                     <p class="text-body-2 font-weight-bold mb-2">Total Carbon Avoided</p>
-                    <v-chip variant="tonal" color="green" class="font-weight-bold">
+                    <v-chip variant="tonal" color="success" class="font-weight-bold">
                         {{ co2Savings }} kg CO₂e
                     </v-chip>
                     <p class="text-body-2 mt-2">Estimated by using Storj. <a href="https://www.storj.io/documents/storj-sustainability-whitepaper.pdf" target="_blank" rel="noopener noreferrer" class="link font-weight-bold">Learn more</a></p>
                 </v-card>
                 <v-card class="pa-4 mb-2">
                     <p class="text-body-2 font-weight-bold mb-2">Carbon Avoided Equals To</p>
-                    <v-chip variant="tonal" color="green" class="font-weight-bold">
+                    <v-chip variant="tonal" color="success" class="font-weight-bold">
                         {{ emission.savedTrees.toLocaleString() }} tree{{ emission.savedTrees !== 1 ? 's' : '' }} grown for 10 years
                     </v-chip>
                     <p class="text-body-2 mt-2">Estimated equivalencies. <a href="https://www.epa.gov/energy/greenhouse-gases-equivalencies-calculator-calculations-and-references#seedlings" target="_blank" rel="noopener noreferrer" class="link font-weight-bold">Learn more</a></p>

diff --git a/web/satellite/src/components/dialogs/EnterProjectPassphraseDialog.vue b/web/satellite/src/components/dialogs/EnterProjectPassphraseDialog.vue
@@ -37,11 +37,10 @@
                     <v-row>
                         <v-col cols="12">
                             <p v-if="isSkipping" class="pb-3">
-                                Do you want to remember this choice and always skip the passphrase when opening a project?
+                                Do you want to remember this choice and skip the passphrase when opening a project?
                             </p>
                             <p v-else>
-                                Enter your encryption passphrase to view and manage your data in the browser.
-                                This passphrase will be used to unlock all buckets in this project.
+                                Enter your encryption passphrase to view and manage the data in this project.
                             </p>
                         </v-col>
 
@@ -81,7 +80,7 @@
                         :disabled="isLoading"
                         @click="() => isSkipping ? model = false : onSkip()"
                     >
-                        {{ isSkipping ? 'No' : 'Skip' }}
+                        {{ isSkipping ? 'No, skip just now' : 'Skip' }}
                     </v-btn>
                 </v-col>
                 <v-col>
@@ -93,7 +92,7 @@
                         :disabled="!formValid"
                         @click="() => isSkipping ? onSkip(true) : onContinue()"
                     >
-                        {{ isSkipping ? 'Yes' : 'Continue ->' }}
+                        {{ isSkipping ? 'Yes, always skip' : 'Continue ->' }}
                     </v-btn>
                 </v-col>
             </v-card-actions>

diff --git a/web/satellite/src/components/dialogs/upgradeAccountFlow/PricingPlanSelectionStep.vue b/web/satellite/src/components/dialogs/upgradeAccountFlow/PricingPlanSelectionStep.vue
@@ -55,11 +55,11 @@ const plans = ref<PricingPlanInfo[]>([
         PricingPlanType.PRO,
         'Pro Account',
         '25 GB Free',
-        'Only pay for what you need. $4/TB stored per month* $7/TB for egress bandwidth.',
+        'Only pay for what you need. $4/TB stored per month* $7/TB for download bandwidth.',
         '*Additional per-segment fee of $0.0000088 applies.',
         null,
         null,
-        'Add a credit card to activate your Pro Account.<br><br>Get 25GB free storage and egress. Only pay for what you use beyond that.',
+        'Add a credit card to activate your Pro Account.<br><br>Get 25GB free storage and download. Only pay for what you use beyond that.',
         'No charge today',
         '25GB Free',
     ),

diff --git a/web/satellite/src/layouts/default/ProjectNav.vue b/web/satellite/src/layouts/default/ProjectNav.vue
@@ -57,7 +57,7 @@
                                 <IconProject />
                             </template>
                             <v-list-item-title class="ml-3">
-                                <v-chip color="green" variant="tonal" size="small" rounded="xl" class="font-weight-bold" link @click="() => registerLinkClick(ROUTES.Projects.path)">
+                                <v-chip color="success" variant="tonal" size="small" rounded="xl" class="font-weight-bold" link @click="() => registerLinkClick(ROUTES.Projects.path)">
                                     Shared Projects
                                 </v-chip>
                             </v-list-item-title>

diff --git a/web/satellite/src/plugins/theme.ts b/web/satellite/src/plugins/theme.ts
@@ -9,8 +9,8 @@ export const THEME_OPTIONS: ThemeOptions = {
     themes: {
         light: {
             colors: {
-                primary: '#0149FF',
-                secondary: '#0218A7',
+                primary: '#0052FF',
+                secondary: '#091C45',
                 background: '#FFF',
                 surface: '#FFF',
                 info: '#0059D0',
@@ -19,39 +19,41 @@ export const THEME_OPTIONS: ThemeOptions = {
                 warning: '#FF7F00',
                 error: '#FF0149',
                 purple: '#7B61FF',
+                purple2: '#502EFF',
                 blue7: '#090920',
                 blue6:  '#091c45',
                 blue5: '#0218A7',
                 blue4: '#0059D0',
                 blue2: '#003ACD',
                 yellow: '#FFC600',
-                yellow2: '#FFB701',
+                yellow2: '#FFB018',
                 orange: '#FFA800',
-                green: '#00B150',
-                purple2: '#502EFF',
+                green: '#00E366',
+                paragraph: '#283968',
+
             },
         },
         dark: {
             colors: {
-                primary: '#0149FF',
+                primary: '#0052FF',
                 secondary: '#537CFF',
-                background: '#090920',
+                background: '#090927',
                 success: '#00AC26',
                 help: '#FFC600',
                 error: '#FF0149',
-                surface: '#090920',
+                surface: '#090927',
                 purple: '#A18EFF',
+                purple2: '#A18EFF',
                 blue7: '#090920',
                 blue6:  '#091c45',
                 blue5: '#2196f3',
                 blue4: '#0059D0',
                 blue2: '#003ACD',
                 yellow: '#FFC600',
-                yellow2: '#FFB701',
+                yellow2: '#FFB018',
                 orange: '#FFA800',
                 warning: '#FF8A00',
-                green: '#00e366',
-                purple2: '#A18EFF',
+                green: '#00E366',
             },
         },
     },

diff --git a/web/satellite/src/styles/styles.scss b/web/satellite/src/styles/styles.scss
@@ -1,4 +1,4 @@
-// Copyright (C) 2023 Storj Labs, Inc.
+// Copyright (C) 2024 Storj Labs, Inc.
 // See LICENSE for copying information.
 
 @import './variables';
@@ -22,9 +22,9 @@ body {
   --v-border-color: 0, 0, 0;
   --v-theme-overlay-multiplier: 0.75 !important;
   --v-border-opacity: 0.09 !important;
-  // --v-theme-on-background: var(--v-theme-blue6) !important;
-  --v-theme-on-background: var(--v-theme-blue7) !important;
-  --v-theme-on-surface: var(--v-theme-blue7) !important;
+  --v-theme-on-background: var(--v-theme-secondary) !important;
+  --v-theme-on-surface: var(--v-theme-secondary) !important;
+  --v-theme-surface-variant: var(--v-theme-secondary) !important;
 }
 
 // Dark Theme
@@ -34,6 +34,18 @@ body {
   --v-theme-on-surface-variant: 70,70,70 !important;
 }
 
+h1,h2,h3,h4,h5,h6 {
+  font-weight: 800 !important;
+}
+
+.v-theme--light p {
+  color: var(--v-theme-paragraph) !important;
+}
+
+.font-weight-bold {
+  font-weight: 800 !important;
+}
+
 // Nav
 .v-app-bar.v-toolbar {
   border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
@@ -119,7 +131,10 @@ body {
 
 // Menu list item
 .v-list-item--active .v-list-item-title {
-  font-weight: 700 !important;
+  font-weight: 800 !important;
+}
+.v-list-item-subtitle {
+  opacity: 1 !important;
 }
 
 // Select Input Menu
@@ -161,11 +176,15 @@ body {
 
 // Cards Title
 .v-card-item .v-card-title {
-  font-weight: 700;
+  font-weight: 800;
   font-size: 1.1rem;
   letter-spacing: 0;
 }
 
+.v-card-subtitle {
+  opacity: 1;
+}
+
 // Cards Hover
 .v-card--hover:hover {
   box-shadow: 0 5px 5px -3px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, .1)), 0 8px 10px 1px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, .07)), 0 3px 14px 2px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, .05));
@@ -306,7 +325,7 @@ table {
   color: rgb(var(--v-theme-secondary));
 }
 .v-theme--dark .link:hover {
-  color: rgb(var(--v-theme-info));
+  color: rgb(var(--v-theme-on-background));
 }
 
 
@@ -347,7 +366,7 @@ table {
 
 // Alerts
 .v-alert-title {
-  font-weight: bold !important;
+  font-weight: 800 !important;
   letter-spacing: 0 !important;
 }
 .v-alert__prepend {