feat: [ENG-2794] more obvious clear filters UI (#4454)

* show clear filter when filters clear all requests

* clearer filter button

* glass'

* fix

Author: connortbot

web/components/shared/themed/table/themedTable.tsx

@@ -84,6 +84,8 @@ interface ThemedTableProps<T extends { id?: string; subRows?: T[] }> {
   hideHeader?: boolean;
   noDataCTA?: React.ReactNode;
   onDataSet?: () => void;
+  showClearFilters?: boolean;
+  onClearFilters?: () => void;
   savedFilters?: {
     filters?: OrganizationFilter[];
     currentFilter?: string;
@@ -127,6 +129,7 @@ export default function ThemedTable<T extends { id?: string; subRows?: T[] }>(
   props: ThemedTableProps<T>,
 ) {
   const {
+    id,
     defaultData,
     defaultColumns,
     skeletonLoading,
@@ -135,6 +138,8 @@ export default function ThemedTable<T extends { id?: string; subRows?: T[] }>(
     sortable,
     onRowSelect,
     noDataCTA,
+    showClearFilters = false,
+    onClearFilters,
     checkboxMode = "never",
     children,
     onSelectAll,
@@ -224,6 +229,15 @@ export default function ThemedTable<T extends { id?: string; subRows?: T[] }>(
             <p className="text-xl font-semibold text-slate-900 dark:text-slate-100">
               No Data Found
             </p>
+            {showClearFilters && onClearFilters && (
+              <Button
+                variant="outline"
+                onClick={onClearFilters}
+                className="text-slate-900 dark:text-slate-100"
+              >
+                Clear Filters
+              </Button>
+            )}
             {noDataCTA}
           </div>
         ) : table.getVisibleFlatColumns().length === 0 ? (

web/components/templates/requests/RequestsPage.tsx

@@ -16,6 +16,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import FilterASTButton from "@/filterAST/FilterASTButton";
+import { useFilterAST } from "@/filterAST/context/filterContext";
 import {
   HeliconeRequest,
   MappedLLMRequest,
@@ -138,6 +139,7 @@ export default function RequestsPage(props: RequestsPageV2Props) {
   const orgContext = useOrg();
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { store: filterStore, helpers: filterHelpers } = useFilterAST();
   const [drawerSize, setDrawerSize] = useLocalStorage(
     "request-drawer-size",
     initialRequestId ? 33 : 0,
@@ -360,6 +362,19 @@ export default function RequestsPage(props: RequestsPageV2Props) {
     );
   }, [requests, selectedIds]);
 
+  const hasActiveFilters = useMemo(() => {
+    return filterStore.filter !== null && filterStore.getFilterNodeCount() > 0;
+  }, [filterStore.filter, filterStore.getFilterNodeCount]);
+
+  const shouldShowClearFilters = useMemo(() => {
+    return (
+      shouldShowMockData === false &&
+      requests.length === 0 &&
+      !isDataLoading &&
+      hasActiveFilters
+    );
+  }, [shouldShowMockData, requests.length, isDataLoading, hasActiveFilters]);
+
   /* -------------------------------------------------------------------------- */
   /*                                  CALLBACKS                                 */
   /* -------------------------------------------------------------------------- */
@@ -730,6 +745,10 @@ export default function RequestsPage(props: RequestsPageV2Props) {
               selectedIds={selectedIds}
               // only for request page
               currentRow={selectedData}
+              showClearFilters={shouldShowClearFilters}
+              onClearFilters={() => {
+                filterHelpers.clearFilter();
+              }}
             >
               {selectMode && (
                 <Row className="w-full items-center justify-between gap-5 bg-white p-5 dark:bg-black">

web/filterAST/FilterASTButton.tsx

@@ -33,6 +33,8 @@ export const FilterASTButton: React.FC<FilterASTButtonProps> = ({}) => {
     );
   }
 
+  const numFilters = store.getFilterNodeCount();
+
   return (
     <Row>
       <Popover onOpenChange={setIsOpen} open={isOpen}>
@@ -60,14 +62,14 @@ export const FilterASTButton: React.FC<FilterASTButtonProps> = ({}) => {
       </Popover>
       {store.getFilterNodeCount() > 0 && (
         <Button
-          variant="ghost"
+          variant="glass"
           size="sm"
-          className="gap-2"
+          className="gap-2 ml-2"
           onClick={() => {
             store.clearActiveFilter();
           }}
         >
-          Clear
+          Clear {numFilters} filter{numFilters > 1 ? "s" : ""}
         </Button>
       )}
     </Row>