feat(studio): remove warnings dropdown in favour of index advisor toggle filter (#41873)

* feat: remove warnings dropdown in favour of index advisor toggle fitler

* fix: tests for index advisor

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

@@ -1,5 +1,5 @@
 import { useDebounce } from '@uidotdev/usehooks'
-import { Search, X } from 'lucide-react'
+import { Lightbulb, Search, X } from 'lucide-react'
 import { parseAsArrayOf, parseAsJson, parseAsString, useQueryStates } from 'nuqs'
 import { ChangeEvent, ReactNode, useEffect, useState } from 'react'
 
@@ -10,7 +10,7 @@ import {
 import { FilterPopover } from 'components/ui/FilterPopover'
 import { useDatabaseRolesQuery } from 'data/database-roles/database-roles-query'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
+import { Button, Tooltip, TooltipContent, TooltipTrigger, cn } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { useIndexAdvisorStatus } from './hooks/useIsIndexAdvisorStatus'
 import { useQueryPerformanceSort } from './hooks/useQueryPerformanceSort'
@@ -65,6 +65,10 @@ export const QueryPerformanceFilterBar = ({
     setSearchParams({ indexAdvisor: options.includes('true') ? 'true' : 'false' })
   }
 
+  const onIndexAdvisorToggle = () => {
+    setSearchParams({ indexAdvisor: indexAdvisor === 'true' ? 'false' : 'true' })
+  }
+
   useEffect(() => {
     onSearchQueryChange(searchValue)
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -123,15 +127,21 @@ export const QueryPerformanceFilterBar = ({
           )}
 
           {isIndexAdvisorEnabled && (
-            <FilterPopover
-              name="Warnings"
-              options={indexAdvisorOptions}
-              labelKey="label"
-              valueKey="value"
-              activeOptions={indexAdvisor === 'true' ? ['true'] : []}
-              onSaveFilters={onIndexAdvisorChange}
-              className="w-56"
-            />
+            <Button
+              type={indexAdvisor === 'true' ? 'default' : 'outline'}
+              size="tiny"
+              className={cn(indexAdvisor === 'true' ? 'bg-surface-300' : 'border-dashed')}
+              onClick={onIndexAdvisorToggle}
+              iconRight={indexAdvisor === 'true' ? <X size={14} /> : undefined}
+            >
+              <span className="flex items-center gap-x-2">
+                <Lightbulb
+                  size={12}
+                  className={indexAdvisor === 'true' ? 'text-warning' : 'text-foreground-lighter'}
+                />
+                <span>Index Advisor</span>
+              </span>
+            </Button>
           )}
 
           {sort && (

e2e/studio/features/index-advisor.spec.ts

@@ -348,7 +348,7 @@ test.describe.serial('Index Advisor', () => {
       expect(isIndexAdvisorEnabled, 'Both extensions should be enabled after enabling').toBe(true)
     })
 
-    test('should show Warnings filter after Index Advisor is enabled', async ({ ref }) => {
+    test('should show Index Advisor filter after Index Advisor is enabled', async ({ ref }) => {
       if (!isIndexAdvisorEnabled) {
         test.skip(true, 'Index Advisor needs to be enabled first')
       }
@@ -357,15 +357,15 @@ test.describe.serial('Index Advisor', () => {
       await page.goto(toUrl(`/project/${ref}/observability/query-performance`))
       await page.waitForLoadState('networkidle')
 
-      // Wait patiently for the Warnings button to appear
+      // Wait patiently for the Index Advisor button to appear
       // Extensions may need time to initialize, so use a generous timeout
-      const warningsButton = page.getByText('Warnings', { exact: true })
+      const indexAdvisorButton = page.getByRole('button', { name: /Index Advisor/i })
       await expect(
-        warningsButton,
-        'Warnings filter button should be visible when Index Advisor is enabled'
+        indexAdvisorButton,
+        'Index Advisor filter button should be visible when Index Advisor is enabled'
       ).toBeVisible({ timeout: 30000 })
 
-      console.log('✓ Warnings button is now visible')
+      console.log('✓ Index Advisor button is now visible')
     })
   })
 
@@ -409,36 +409,12 @@ test.describe.serial('Index Advisor', () => {
       await page.goto(toUrl(`/project/${ref}/observability/query-performance`))
       await page.waitForLoadState('networkidle')
 
-      // Wait patiently for Warnings button
-      const warningsButton = page.getByText('Warnings', { exact: true }).first()
-      await expect(warningsButton, 'Warnings filter should be visible').toBeVisible({
+      // Wait for Index Advisor button and click to enable the filter
+      const indexAdvisorButton = page.getByRole('button', { name: /Index Advisor/i })
+      await expect(indexAdvisorButton, 'Index Advisor filter should be visible').toBeVisible({
         timeout: 30000,
       })
-      await warningsButton.click()
-
-      // Wait for popover to open by checking for the Index Advisor label
-      const indexAdvisorLabel = page.getByText('Index Advisor', { exact: true }).first()
-      await expect(
-        indexAdvisorLabel,
-        'Index Advisor option should be in Warnings popover'
-      ).toBeVisible({ timeout: 5000 })
-
-      // Click the label to select Index Advisor filter
-      await indexAdvisorLabel.click()
-
-      // Find and click the "Save" button if it exists
-      const saveButton = page.getByRole('button', { name: 'Save' }).first()
-
-      try {
-        await saveButton.waitFor({ state: 'visible', timeout: 2000 })
-        await saveButton.click()
-        // Wait for the popover to close
-        await saveButton.waitFor({ state: 'hidden', timeout: 3000 })
-      } catch (e) {
-        // If no Save button, the filter might apply automatically
-        // Close the popover by pressing Escape
-        await page.keyboard.press('Escape')
-      }
+      await indexAdvisorButton.click()
 
       // Check if any rows with Index Advisor warnings appear in the results
       // Look for rows in the query performance grid (excluding header)