Add callouts on suggestions for certain support issues (supabase#38998)

* Add callouts on suggestions for certain support issues

* Nit refactor

Author: joshenlim

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 (
     <>
-      <ScaffoldContainer>
+      <ScaffoldContainer id="infrastructure-activity">
         <div className="mx-auto flex flex-col gap-10 pt-6">
           <div>
             <p className="text-xl">Infrastructure Activity</p>
@@ -447,5 +447,3 @@ const InfrastructureActivity = () => {
     </>
   )
 }
-
-export default InfrastructureActivity

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 (
+      <Admonition
+        type="default"
+        className={className}
+        title="Have you checked your project's logs?"
+      >
+        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{' '}
+        <InlineLink href={`${baseUrl}/logs/edge-logs`}>here</InlineLink>.
+      </Admonition>
+    )
+  }
+
+  if (category === SupportCategories.DATABASE_UNRESPONSIVE) {
+    return (
+      <Admonition
+        type="default"
+        className={className}
+        title="Have you checked your project's infrastructure activity?"
+      >
+        High memory or low disk IO bandwidth may be slowing down your database. Verify by checking
+        the infrastructure activity of your project{' '}
+        <InlineLink href={`${baseUrl}/settings/infrastructure#infrastructure-activity`}>
+          here
+        </InlineLink>
+        .
+      </Admonition>
+    )
+  }
+
+  if (category === SupportCategories.PERFORMANCE_ISSUES) {
+    return (
+      <Admonition
+        type="default"
+        className={className}
+        title="Have you checked the Query Performance Advisor?"
+      >
+        Identify slow running queries and get actionable insights on how to optimize them with the
+        Query Performance Advisor{' '}
+        <InlineLink href={`${baseUrl}/settings/infrastructure#infrastructure-activity`}>
+          here
+        </InlineLink>
+        .
+      </Admonition>
+    )
+  }
+
+  return null
+}

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<Project>,
-  ]
   const hasResults =
     state.status === 'fullResults' ||
     state.status === 'partialResults' ||
@@ -539,6 +535,9 @@ export const SupportFormV2 = ({
               </FormItemLayout>
             )}
           />
+
+          <IssueSuggestion category={category} projectRef={projectRef} />
+
           {(severity === 'Urgent' || severity === 'High') && (
             <p className="text-sm text-foreground-light mt-2 sm:col-span-2">
               We do our best to respond to everyone as quickly as possible; however, prioritization

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'