Chore/add export functionality to advisors (#33030)

* Add export functionality to security and performance advisors

* Add download results button to query performance advisor

* Add refresh buttons to security and performance advisors

* Add LoadingLine to Query performance to make UI consistent with the other advisors

* Minor change

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

@@ -13,6 +13,7 @@ import { LOCAL_STORAGE_KEYS } from 'lib/constants'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 import {
   Button,
+  LoadingLine,
   TabsList_Shadcn_,
   TabsTrigger_Shadcn_,
   Tabs_Shadcn_,
@@ -44,6 +45,8 @@ export const QueryPerformance = ({
   const { project } = useProjectContext()
   const state = useDatabaseSelectorStateSnapshot()
 
+  const { isLoading, isRefetching } = queryPerformanceQuery
+
   const [page, setPage] = useState<QUERY_PERFORMANCE_REPORT_TYPES>(
     (preset as QUERY_PERFORMANCE_REPORT_TYPES) ?? QUERY_PERFORMANCE_REPORT_TYPES.MOST_TIME_CONSUMING
   )
@@ -190,14 +193,11 @@ export const QueryPerformance = ({
         </TabsList_Shadcn_>
       </Tabs_Shadcn_>
 
-      <div className="px-6 py-3 bg-surface-200 border-t -mt-px">
-        <QueryPerformanceFilterBar
-          queryPerformanceQuery={queryPerformanceQuery}
-          onResetReportClick={() => {
-            setShowResetgPgStatStatements(true)
-          }}
-        />
-      </div>
+      <QueryPerformanceFilterBar
+        queryPerformanceQuery={queryPerformanceQuery}
+        onResetReportClick={() => setShowResetgPgStatStatements(true)}
+      />
+      <LoadingLine loading={isLoading || isRefetching} />
 
       <QueryPerformanceGrid queryPerformanceQuery={queryPerformanceQuery} />
 
@@ -210,9 +210,7 @@ export const QueryPerformance = ({
           className="absolute top-1.5 right-3 px-1.5"
           type="text"
           size="tiny"
-          onClick={() => {
-            setShowBottomSection(false)
-          }}
+          onClick={() => setShowBottomSection(false)}
         >
           <X size="14" />
         </Button>

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

@@ -2,7 +2,9 @@ import { ArrowDown, ArrowUp, RefreshCw } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 
+import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { DownloadResultsButton } from 'components/ui/DownloadResultsButton'
 import { FilterPopover } from 'components/ui/FilterPopover'
 import { useDatabaseRolesQuery } from 'data/database-roles/database-roles-query'
 import { DbQueryHook } from 'hooks/analytics/useDbQuery'
@@ -27,6 +29,7 @@ export const QueryPerformanceFilterBar = ({
   onResetReportClick?: () => void
 }) => {
   const router = useRouter()
+  const { ref } = useParams()
   const { project } = useProjectContext()
   const [showBottomSection] = useLocalStorageQuery(
     LOCAL_STORAGE_KEYS.QUERY_PERF_SHOW_BOTTOM_SECTION,
@@ -86,7 +89,7 @@ export const QueryPerformanceFilterBar = ({
   }
 
   return (
-    <div className="flex justify-between items-center">
+    <div className="px-6 py-2 bg-surface-200 border-t -mt-px flex justify-between items-center">
       <div className="flex items-center gap-x-4">
         <div className="flex items-center gap-x-2">
           <p className="text-xs prose">Filter by</p>
@@ -126,29 +129,27 @@ export const QueryPerformanceFilterBar = ({
 
       <div className="flex gap-2 items-center">
         {!showBottomSection && onResetReportClick && (
-          <Button
-            onClick={() => {
-              onResetReportClick()
-            }}
-            type="default"
-          >
+          <Button type="default" onClick={() => onResetReportClick()}>
             Reset report
           </Button>
         )}
         <Button
-          type="default"
           size="tiny"
+          type="default"
           onClick={() => queryPerformanceQuery.runQuery()}
           disabled={isLoading || isRefetching}
           icon={
             <RefreshCw
-              size={12}
               className={`text-foreground-light ${isLoading || isRefetching ? 'animate-spin' : ''}`}
             />
           }
         >
           Refresh
         </Button>
+        <DownloadResultsButton
+          results={queryPerformanceQuery.data ?? []}
+          fileName={`Supabase Query Performance (${ref})`}
+        />
       </div>
     </div>
   )