chore: 'clear' action on filter Popovers now work

studio/components/interfaces/Settings/Logs/Logs.filter.tsx

@@ -6,7 +6,13 @@ export const LogsFilter = ({ options, filtersState, dispatchFilters }: any) => {
   const [open, setOpen] = useState(false)
 
   function handleReset() {
-    dispatchFilters({ [options.key]: null })
+    // console.log('handleReset ran!')
+    const empty = {
+      [options.key]: [],
+    }
+
+    dispatchFilters({ ...empty })
+    setOpen(!open)
   }
 
   // console.log('filters', filters)
@@ -71,8 +77,9 @@ export const LogsFilter = ({ options, filtersState, dispatchFilters }: any) => {
                 })
 
                 // console.log('payload', payload)
-
+                // console.log('submit form ran')
                 dispatchFilters({ ...payload })
+                handleReset()
               }}
             >
               {({ isSubmitting }: { isSubmitting: boolean }) => (
@@ -99,7 +106,12 @@ export const LogsFilter = ({ options, filtersState, dispatchFilters }: any) => {
                 border-t border-scale-400 dark:border-scale-500
               "
                   >
-                    <Button size="tiny" type="default" onClick={() => handleReset()}>
+                    <Button
+                      size="tiny"
+                      type="default"
+                      onClick={() => handleReset()}
+                      htmlType="button"
+                    >
                       Clear
                     </Button>
                     <Button loading={isSubmitting} type="primary" htmlType="submit">

studio/components/interfaces/Settings/Logs/Logs.helpers.ts

@@ -11,7 +11,7 @@ export function filterSqlWhereBuilder(
   // console.log('raw filters', filters)
 
   // remove any filter arrays that are empty
-  const filtersSanitized: any = Object.values(filters).filter((x) => x.length > 0)
+  const filtersSanitized: any = Object.values(filters).filter((x) => x && x.length > 0)
 
   // console.log('filtersSanitized', filtersSanitized)
 
@@ -21,6 +21,8 @@ export function filterSqlWhereBuilder(
   // first item is `where` if there are any filters
   let whereArray: string[] = filtersSanitized.length > 0 ? ['where'] : []
 
+  if (filtersSanitized.length === 0) return whereArray
+
   keys.map((x: string, i) => {
     // do not parse empty key
     if (!x) {
@@ -80,5 +82,7 @@ export function filterReducer(state: FilterObject, action: any) {
 
   const newState = { ...oldState, ...action }
 
+  console.log('newState', newState)
+
   return newState
 }

studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx

@@ -22,7 +22,7 @@ import { LogSearchCallback, LogTemplate } from '.'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import { FILTER_OPTIONS, LogsTableName } from './Logs.constants'
-import { LogsFilter } from './../Logs'
+import { LogsFilter } from './Logs.filter'
 interface Props {
   defaultSearchValue?: string
   defaultToValue?: string
@@ -222,11 +222,12 @@ const PreviewFilterPanel: FC<Props> = ({
           </Button> */}
         </div>
 
-        <div className="flex items-center gap-2 items-center">
+        <div className="flex items-center gap-2">
           {Object.values(FILTER_OPTIONS[table]).map((x) => {
             // console.log('filter option', x)
             return (
               <LogsFilter
+                key={`${x.key}-filter`}
                 options={x}
                 dispatchFilters={dispatchWhereFilters}
                 filtersState={filters}

studio/pages/project/[ref]/settings/logs/[type].tsx

@@ -64,8 +64,6 @@ export const LogPage: NextPage = () => {
 
   const table = type === 'api' ? LogsTableName.EDGE : LogsTableName.POSTGRES
 
-  // const [whereClauses, setWhereClauses] = useState('')
-
   const [
     { error, logData, params, newCount, filters, isLoading, oldestTimestamp },
     { loadOlder, setFilters, refresh, setTo, setFrom },
@@ -79,11 +77,6 @@ export const LogPage: NextPage = () => {
     ${filterSqlWhereBuilder(whereFilters, table, filterObj.search_query).join('\n')}`,
   })
 
-  useEffect(() => {
-    console.log('refresh happening')
-    refresh()
-  }, [whereFilters])
-
   const title = `Logs - ${LOG_TYPE_LABEL_MAPPING[type as keyof typeof LOG_TYPE_LABEL_MAPPING]}`
 
   useEffect(() => {
@@ -102,6 +95,11 @@ export const LogPage: NextPage = () => {
     setFilters((prev) => ({ ...prev, search_query: template.searchString }))
   }
 
+  useEffect(() => {
+    // runs when any of the filters change
+    handleRefresh()
+  }, [whereFilters])
+
   const handleRefresh = () => {
     refresh()
     router.push({
@@ -148,7 +146,7 @@ export const LogPage: NextPage = () => {
         ...whereFilters,
       },
     })
-  }, [whereFilters])
+  }
 
   return (
     <SettingsLayout title={title}>