From 1b60f2921b3da76468b0dfed7a0ccf964a1c7c3c Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Mon, 10 Jul 2023 14:09:02 +0800 Subject: [PATCH] Address comments --- .../interfaces/BillingV2/Usage/Usage.tsx | 6 +-- .../Subscription/DowngradeModal.tsx | 53 ++++++++++--------- .../Infrastructure/InfrastructureInfo.tsx | 4 +- studio/data/__templates/README.md | 2 +- .../subscriptions/org-subscription-query.ts | 32 +++++------ 5 files changed, 49 insertions(+), 48 deletions(-) diff --git a/studio/components/interfaces/BillingV2/Usage/Usage.tsx b/studio/components/interfaces/BillingV2/Usage/Usage.tsx index d2e7f64723c..f53f4e1c2ce 100644 --- a/studio/components/interfaces/BillingV2/Usage/Usage.tsx +++ b/studio/components/interfaces/BillingV2/Usage/Usage.tsx @@ -17,7 +17,7 @@ import SizeAndCounts from './SizeAndCounts' import { USAGE_CATEGORIES, USAGE_STATUS } from './Usage.constants' import { getUsageStatus } from './Usage.utils' -export type usageSectionIds = 'infra' | 'bandwidth' | 'sizeCount' | 'activity' +type UsageSectionIds = 'infra' | 'bandwidth' | 'sizeCount' | 'activity' const Usage = () => { const { ref } = useParams() @@ -27,7 +27,7 @@ const Usage = () => { // [Joshen] Using a state here for now as in the future, we'd have this usage page support showing // stats for different projects. So we'll pass the selected ref as a prop into the individual components const [selectedProjectRef] = useState(ref as string) - const [activeTab, setActiveTab] = useState('infra') + const [activeTab, setActiveTab] = useState('infra') const [dateRange, setDateRange] = useState() const infrastructureRef = useRef(null) @@ -91,7 +91,7 @@ const Usage = () => { ] ?? 100 ) - const scrollTo = (id: usageSectionIds) => { + const scrollTo = (id: UsageSectionIds) => { switch (id) { case 'infra': if (infrastructureRef.current) { diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/DowngradeModal.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/DowngradeModal.tsx index 1e0a6dad94a..6ea19500782 100644 --- a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/DowngradeModal.tsx +++ b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/DowngradeModal.tsx @@ -1,5 +1,5 @@ import InformationBox from 'components/ui/InformationBox' -import { OrgSubscription } from 'data/subscriptions/org-subscription-query' +import { OrgSubscription, ProjectAddon } from 'data/subscriptions/org-subscription-query' import { PricingInformation } from 'shared-data' import { Alert, IconAlertOctagon, IconMinusCircle, IconPauseCircle, Modal } from 'ui' @@ -11,6 +11,29 @@ export interface DowngradeModalProps { onConfirm: () => void } +const ProjectDowngradeListItem = ({ projectAddon }: { projectAddon: ProjectAddon }) => { + const needsRestart = projectAddon.addons.find((addon) => addon.type === 'compute_instance') + const addons = projectAddon.addons.map((addon) => { + if (addon.type === 'compute_instance') return `${addon.variant.name} Compute Instance` + return addon.variant.name + }) + + return ( +
  • + {projectAddon.name}: {addons.join(', ')} will be removed. + {needsRestart ? ( + <> + {' '} + Project will also need to be restarted due to + change in compute instance + + ) : ( + '' + )} +
    • + ) +} + const DowngradeModal = ({ visible, selectedPlan, @@ -60,31 +83,9 @@ const DowngradeModal = ({ title={`Warning: A total of ${subscription?.project_addons.length} project(s) will be affected from the downgrade`} description={
      - {subscription?.project_addons.map((project) => { - const needsRestart = project.addons.find( - (addon) => addon.type === 'compute_instance' - ) - const addons = project.addons.map((addon) => { - if (addon.type === 'compute_instance') - return `${addon.variant.name} Compute Instance` - return addon.variant.name - }) - return ( -
    • - {project.name}: {addons.join(', ')} will be removed. - {needsRestart ? ( - <> - {' '} - Project will also{' '} - need to be restarted due to - change in compute instance - - ) : ( - '' - )} -
      • - ) - })} + {subscription?.project_addons.map((project) => ( + + ))}
    } /> diff --git a/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx b/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx index 6503048dd7a..5e81d11cadc 100644 --- a/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx +++ b/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx @@ -1,5 +1,5 @@ -import Link from 'next/link' import * as Tooltip from '@radix-ui/react-tooltip' +import Link from 'next/link' import { useParams } from 'common' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' @@ -20,8 +20,6 @@ import ProjectUpgradeAlert from '../General/Infrastructure/ProjectUpgradeAlert' const InfrastructureInfo = () => { const { ref } = useParams() const { project } = useProjectContext() - // const { data: subscription } = useProjectSubscriptionV2Query({ projectRef: ref }) - // const isFreeProject = subscription?.plan?.id === 'free' const { data, diff --git a/studio/data/__templates/README.md b/studio/data/__templates/README.md index b16309d2788..18492fa9011 100644 --- a/studio/data/__templates/README.md +++ b/studio/data/__templates/README.md @@ -74,7 +74,7 @@ const { data, error, isLoading, isError, isSuccess } = useQuery() ### Mutations -The parameter `onError` should be passed when intializing the mutation, where the appropriate UI behaviour should be triggered (usually a toast will be fine). If `onError` is not provided, we will then default to a toast message that will be called from within the mutation itself. +The parameter `onError` should be passed when intializing the mutation, where the appropriate UI behavior should be triggered (usually a toast will be fine). If `onError` is not provided, we will then default to a toast message that will be called from within the mutation itself. ```jsx const { mutateAsync } = useMutation({ diff --git a/studio/data/subscriptions/org-subscription-query.ts b/studio/data/subscriptions/org-subscription-query.ts index 27cd1319339..067bca8c60c 100644 --- a/studio/data/subscriptions/org-subscription-query.ts +++ b/studio/data/subscriptions/org-subscription-query.ts @@ -11,6 +11,22 @@ export type OrgSubscriptionVariables = { export type PlanId = 'free' | 'pro' | 'team' | 'enterprise' +export type ProjectAddon = { + addons: { + type: 'custom_domain' | 'compute_instance' | 'pitr' + variant: { + identifier: string + name: string + price: number + price_description: string + price_interval: string + price_type: string + } + }[] + name: string + ref: string +} + export type OrgSubscription = { billing_cycle_anchor: number current_period_start: number @@ -45,21 +61,7 @@ export type OrgSubscription = { expiry_month: number expiry_year: number } - project_addons: { - addons: { - type: 'custom_domain' | 'compute_instance' | 'pitr' - variant: { - identifier: string - name: string - price: number - price_description: string - price_interval: string - price_type: string - } - }[] - name: string - ref: string - }[] + project_addons: ProjectAddon[] } export async function getOrgSubscription(