FE-1850 API Report Filter Tweaks (#39012)

fixes

apps/studio/components/interfaces/Reports/ReportFilterBar.tsx

@@ -23,6 +23,7 @@ import { DatePickerValue, LogsDatePicker } from '../Settings/Logs/Logs.DatePicke
 import { REPORTS_DATEPICKER_HELPERS } from './Reports.constants'
 import type { ReportFilterItem } from './Reports.types'
 import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui/popover'
+import { Network } from 'lucide-react'
 
 interface ReportFilterBarProps {
   filters: ReportFilterItem[]
@@ -46,8 +47,7 @@ const PRODUCT_FILTERS = [
     key: 'rest',
     filterKey: 'request.path',
     filterValue: '/rest',
-    label: 'REST',
-    description: 'Requests made to PostgREST',
+    label: 'Data API (PostgREST)',
     icon: Database,
   },
   {
@@ -55,7 +55,6 @@ const PRODUCT_FILTERS = [
     filterKey: 'request.path',
     filterValue: '/auth',
     label: 'Auth',
-    description: 'Auth and authorization requests',
     icon: Auth,
   },
   {
@@ -63,7 +62,6 @@ const PRODUCT_FILTERS = [
     filterKey: 'request.path',
     filterValue: '/storage',
     label: 'Storage',
-    description: 'Storage asset requests',
     icon: Storage,
   },
   {
@@ -71,15 +69,13 @@ const PRODUCT_FILTERS = [
     filterKey: 'request.path',
     filterValue: '/realtime',
     label: 'Realtime',
-    description: 'Realtime connection requests',
     icon: Realtime,
   },
   {
     key: 'graphql',
     filterKey: 'request.path',
     filterValue: '/graphql',
-    label: 'GraphQL',
-    description: 'Requests made to pg_graphql',
+    label: 'GraphQL (pg_graphql)',
     icon: null,
   },
 ]
@@ -210,7 +206,8 @@ const ReportFilterBar = ({
             </DropdownMenuTrigger>
             <DropdownMenuContent side="bottom" align="start">
               <DropdownMenuItem onClick={() => handleProductFilterChange(null)}>
-                <p>All Requests</p>
+                <Network size={14} strokeWidth={1.5} className="mr-2" />
+                All Requests
               </DropdownMenuItem>
               <DropdownMenuSeparator />
               {PRODUCT_FILTERS.map((productFilter) => {
@@ -226,13 +223,13 @@ const ReportFilterBar = ({
                     {productFilter.key === 'graphql' ? (
                       <SVG
                         src={`${BASE_PATH}/img/graphql.svg`}
-                        className="w-[20px] h-[20px] mr-2"
+                        className="w-[14px] h-[14px] mr-2"
                         preProcessor={(code) =>
                           code.replace(/svg/, 'svg class="m-auto text-color-inherit"')
                         }
                       />
                     ) : Icon !== null ? (
-                      <Icon size={20} strokeWidth={1.5} className="mr-2" />
+                      <Icon size={14} strokeWidth={1.5} className="mr-2" />
                     ) : null}
                     <div className="flex flex-col">
                       <p
@@ -243,9 +240,6 @@ const ReportFilterBar = ({
                       >
                         {productFilter.label}
                       </p>
-                      <p className=" text-left text-foreground-light inline-block w-[180px]">
-                        {productFilter.description}
-                      </p>
                     </div>
                   </DropdownMenuItem>
                 )