Feat: query performance - add btn to hide bottom section (#22902)

* add btn to hide bottom section

* fix onResetReportClick not being optional for old UI

apps/studio/components/interfaces/QueryPerformanceV2/QueryPerformance.tsx

@@ -25,6 +25,9 @@ import { PresetHookResult } from '../Reports/Reports.utils'
 import { QUERY_PERFORMANCE_REPORT_TYPES } from './QueryPerformance.constants'
 import { QueryPerformanceFilterBar } from './QueryPerformanceFilterBar'
 import { QueryPerformanceGrid } from './QueryPerformanceGrid'
+import { useLocalStorageQuery } from 'hooks'
+import { LOCAL_STORAGE_KEYS } from 'lib/constants'
+import { X } from 'lucide-react'
 
 interface QueryPerformanceProps {
   queryHitRate: PresetHookResult
@@ -43,6 +46,11 @@ export const QueryPerformance = ({
   )
   const [showResetgPgStatStatements, setShowResetgPgStatStatements] = useState(false)
 
+  const [showBottomSection, setShowBottomSection] = useLocalStorageQuery(
+    LOCAL_STORAGE_KEYS.QUERY_PERF_SHOW_BOTTOM_SECTION,
+    true
+  )
+
   const handleRefresh = () => {
     queryPerformanceQuery.runQuery()
     queryHitRate.runQuery()
@@ -161,12 +169,31 @@ export const QueryPerformance = ({
       </Tabs_Shadcn_>
 
       <div className="px-6 py-3 bg-surface-200 border-t -mt-px">
-        <QueryPerformanceFilterBar queryPerformanceQuery={queryPerformanceQuery} />
+        <QueryPerformanceFilterBar
+          queryPerformanceQuery={queryPerformanceQuery}
+          onResetReportClick={() => {
+            setShowResetgPgStatStatements(true)
+          }}
+        />
       </div>
 
       <QueryPerformanceGrid queryPerformanceQuery={queryPerformanceQuery} />
 
-      <div className="px-6 py-6 flex gap-x-4 border-t">
+      <div
+        className={cn('px-6 py-6 flex gap-x-4 border-t relative', {
+          hidden: showBottomSection === false,
+        })}
+      >
+        <Button
+          className="absolute top-1.5 right-3 px-1.5"
+          type="text"
+          size="tiny"
+          onClick={() => {
+            setShowBottomSection(false)
+          }}
+        >
+          <X size="14" />
+        </Button>
         <div className="w-[35%] flex flex-col gap-y-1 text-sm">
           <p>Reset report</p>
           <p className="text-xs text-foreground-light">

apps/studio/components/interfaces/QueryPerformanceV2/QueryPerformanceFilterBar.tsx

@@ -1,11 +1,11 @@
-import { ArrowDown, ArrowUp, RefreshCw } from 'lucide-react'
+import { ArrowDown, ArrowUp, Info, RefreshCw } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { FilterPopover } from 'components/ui/FilterPopover'
 import { useDatabaseRolesQuery } from 'data/database-roles/database-roles-query'
-import { useFlag } from 'hooks'
+import { useFlag, useLocalStorageQuery } from 'hooks'
 import { DbQueryHook } from 'hooks/analytics/useDbQuery'
 import {
   Button,
@@ -17,15 +17,22 @@ import {
 } from 'ui'
 import { TextSearchPopover } from './TextSearchPopover'
 import { QueryPerformanceSort } from '../Reports/Reports.queries'
+import { LOCAL_STORAGE_KEYS } from 'lib/constants'
 
 export const QueryPerformanceFilterBar = ({
   queryPerformanceQuery,
+  onResetReportClick,
 }: {
   queryPerformanceQuery: DbQueryHook<any>
+  onResetReportClick?: () => void
 }) => {
   const router = useRouter()
   const { project } = useProjectContext()
   const enableQueryPerformanceV2 = useFlag('queryPerformanceV2')
+  const [showBottomSection, setShowBottomSection] = useLocalStorageQuery(
+    LOCAL_STORAGE_KEYS.QUERY_PERF_SHOW_BOTTOM_SECTION,
+    true
+  )
   const defaultSearchQueryValue = router.query.search ? String(router.query.search) : ''
   const defaultFilterRoles = router.query.roles ? (router.query.roles as string[]) : []
   const defaultSortByValue = router.query.sort
@@ -128,20 +135,32 @@ export const QueryPerformanceFilterBar = ({
         </div>
       </div>
 
-      <Button
-        type="default"
-        size="tiny"
-        onClick={() => queryPerformanceQuery.runQuery()}
-        disabled={isLoading || isRefetching}
-        icon={
-          <RefreshCw
-            size={12}
-            className={`text-foreground-light ${isLoading || isRefetching ? 'animate-spin' : ''}`}
-          />
-        }
-      >
-        Refresh
-      </Button>
+      <div className="flex gap-2 items-center">
+        {!showBottomSection && onResetReportClick && (
+          <Button
+            onClick={() => {
+              onResetReportClick()
+            }}
+            type="default"
+          >
+            Reset report
+          </Button>
+        )}
+        <Button
+          type="default"
+          size="tiny"
+          onClick={() => queryPerformanceQuery.runQuery()}
+          disabled={isLoading || isRefetching}
+          icon={
+            <RefreshCw
+              size={12}
+              className={`text-foreground-light ${isLoading || isRefetching ? 'animate-spin' : ''}`}
+            />
+          }
+        >
+          Refresh
+        </Button>
+      </div>
     </div>
   )
 }

apps/studio/lib/constants/index.ts

@@ -50,6 +50,8 @@ export const LOCAL_STORAGE_KEYS = {
   PGBOUNCER_DEPRECATION_WARNING: 'pgbouncer-deprecation-warning-dismissed',
 
   PROJECT_LINT_IGNORE_LIST: 'supabase-project-lint-ignore-list',
+
+  QUERY_PERF_SHOW_BOTTOM_SECTION: 'supabase-query-perf-show-bottom-section',
 }
 
 export const OPT_IN_TAGS = {