From 8f1ed3b4713c9ad710ed43a269a5d455e604ff77 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Fri, 26 Sep 2025 11:15:22 +0800 Subject: [PATCH] Add callouts on suggestions for certain support issues (#38998) * Add callouts on suggestions for certain support issues * Nit refactor --- .../Infrastructure/InfrastructureActivity.tsx | 8 +-- .../interfaces/Support/IssueSuggestions.tsx | 65 +++++++++++++++++++ .../interfaces/Support/SupportFormV2.tsx | 13 ++-- .../project/[ref]/settings/infrastructure.tsx | 2 +- 4 files changed, 75 insertions(+), 13 deletions(-) create mode 100644 apps/studio/components/interfaces/Support/IssueSuggestions.tsx diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx index d0cd6341ad5b7..04645c9dff219 100644 --- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx +++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx @@ -47,7 +47,7 @@ const NON_DEDICATED_IO_RESOURCES = [ 'ci_2xlarge', ] -const InfrastructureActivity = () => { +export const InfrastructureActivity = () => { const { ref: projectRef } = useParams() const { data: project } = useSelectedProjectQuery() const { data: organization } = useSelectedOrganizationQuery() @@ -65,7 +65,7 @@ const InfrastructureActivity = () => { const { data: addons } = useProjectAddonsQuery({ projectRef }) const selectedAddons = addons?.selected_addons ?? [] - const { showNewReplicaPanel, setShowNewReplicaPanel } = useShowNewReplicaPanel() + const { setShowNewReplicaPanel } = useShowNewReplicaPanel() const { computeInstance } = getAddons(selectedAddons) const hasDedicatedIOResources = @@ -202,7 +202,7 @@ const InfrastructureActivity = () => { return ( <> - +

Infrastructure Activity

@@ -447,5 +447,3 @@ const InfrastructureActivity = () => { ) } - -export default InfrastructureActivity diff --git a/apps/studio/components/interfaces/Support/IssueSuggestions.tsx b/apps/studio/components/interfaces/Support/IssueSuggestions.tsx new file mode 100644 index 0000000000000..0ca5fd69632f1 --- /dev/null +++ b/apps/studio/components/interfaces/Support/IssueSuggestions.tsx @@ -0,0 +1,65 @@ +import { SupportCategories } from '@supabase/shared-types/out/constants' +import { InlineLink } from 'components/ui/InlineLink' +import { Admonition } from 'ui-patterns' + +const className = 'col-span-2 mb-0' + +export const IssueSuggestion = ({ + category, + projectRef, +}: { + category: string + projectRef?: string +}) => { + const baseUrl = `/project/${projectRef === 'no-project' ? '_' : projectRef}` + + if (category === SupportCategories.PROBLEM) { + return ( + + Logs can help you identify errors that you might be running into when using your project's + API or client libraries. View logs for each product{' '} + here. + + ) + } + + if (category === SupportCategories.DATABASE_UNRESPONSIVE) { + return ( + + High memory or low disk IO bandwidth may be slowing down your database. Verify by checking + the infrastructure activity of your project{' '} + + here + + . + + ) + } + + if (category === SupportCategories.PERFORMANCE_ISSUES) { + return ( + + Identify slow running queries and get actionable insights on how to optimize them with the + Query Performance Advisor{' '} + + here + + . + + ) + } + + return null +} diff --git a/apps/studio/components/interfaces/Support/SupportFormV2.tsx b/apps/studio/components/interfaces/Support/SupportFormV2.tsx index 9c2fc2c6df204..2de8d272e0b47 100644 --- a/apps/studio/components/interfaces/Support/SupportFormV2.tsx +++ b/apps/studio/components/interfaces/Support/SupportFormV2.tsx @@ -24,11 +24,11 @@ import { OrganizationProjectSelector } from 'components/ui/OrganizationProjectSe import { getProjectAuthConfig } from 'data/auth/auth-config-query' import { useSendSupportTicketMutation } from 'data/feedback/support-ticket-send' import { useOrganizationsQuery } from 'data/organizations/organizations-query' -import type { Project } from 'data/projects/project-detail-query' import { useProjectsQuery } from 'data/projects/projects-query' import { useSendEventMutation } from 'data/telemetry/send-event-mutation' import { detectBrowser } from 'lib/helpers' import { useProfile } from 'lib/profile' +import { useRouter } from 'next/router' import { Badge, Button, @@ -57,6 +57,7 @@ import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' import { MultiSelectV2 } from 'ui-patterns/MultiSelectDeprecated/MultiSelectV2' import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' import { IPV4SuggestionAlert } from './IPV4SuggestionAlert' +import { IssueSuggestion } from './IssueSuggestions' import { LibrarySuggestions } from './LibrarySuggestions' import { PlanExpectationInfoBox } from './PlanExpectationInfoBox' import { @@ -66,7 +67,6 @@ import { SEVERITY_OPTIONS, } from './Support.constants' import { formatMessage, uploadAttachments } from './SupportForm.utils' -import { useRouter } from 'next/router' const MAX_ATTACHMENTS = 5 const INCLUDE_DISCUSSIONS = ['Problem', 'Database_unresponsive'] @@ -158,7 +158,7 @@ export const SupportFormV2 = ({ () => organizations?.find((org) => org.slug === organizationSlug), [organizationSlug, organizations] ) - const { data, isLoading: isLoadingProjects, isSuccess: isSuccessProjects } = useProjectsQuery() + const { data, isSuccess: isSuccessProjects } = useProjectsQuery() const allProjects = data?.projects ?? [] const { mutate: sendEvent } = useSendEventMutation() @@ -189,10 +189,6 @@ export const SupportFormV2 = ({ const respondToEmail = profile?.primary_email ?? 'your email' const subscriptionPlanId = selectedOrganization?.plan.id - const projects = [ - ...(allProjects ?? []).filter((project) => project.organization_slug === organizationSlug), - { ref: 'no-project', name: 'No specific project' } as Partial, - ] const hasResults = state.status === 'fullResults' || state.status === 'partialResults' || @@ -539,6 +535,9 @@ export const SupportFormV2 = ({ )} /> + + + {(severity === 'Urgent' || severity === 'High') && (

We do our best to respond to everyone as quickly as possible; however, prioritization diff --git a/apps/studio/pages/project/[ref]/settings/infrastructure.tsx b/apps/studio/pages/project/[ref]/settings/infrastructure.tsx index 13800cd06523a..78f09752ce9e3 100644 --- a/apps/studio/pages/project/[ref]/settings/infrastructure.tsx +++ b/apps/studio/pages/project/[ref]/settings/infrastructure.tsx @@ -1,4 +1,4 @@ -import InfrastructureActivity from 'components/interfaces/Settings/Infrastructure/InfrastructureActivity' +import { InfrastructureActivity } from 'components/interfaces/Settings/Infrastructure/InfrastructureActivity' import InfrastructureInfo from 'components/interfaces/Settings/Infrastructure/InfrastructureInfo' import DefaultLayout from 'components/layouts/DefaultLayout' import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout'