refactor(supernova): fix all typescript migration leftovers for Filters (#774)

* refactor(supernova): return types over the storeProvider

* refactor(supernova): closes #764

* refactor(supernova): ignore casting problems in ref

* chore(supernova): changeset

* fix(supernova): remove unused prop

Author: TilmanHaupt

.changeset/tricky-lizards-approve.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-app-supernova": patch
+---
+
+reducing unnecessary @ts-ignore directives, improving type safety and code clarity in filter components

apps/supernova/src/components/StoreProvider.tsx

@@ -4,38 +4,47 @@
  */
 
 import React, { createContext, useContext } from "react"
-import { createStore, useStore } from "zustand"
+import { createStore, useStore, StoreApi } from "zustand"
 import { devtools } from "zustand/middleware"
 
 import createSilencesSlice from "../lib/createSilencesSlice"
 import createAlertsSlice from "../lib/createAlertsSlice"
-import createFiltersSlice from "../lib/createFiltersSlice"
+import createFiltersSlice, { FilterSlice, FilterActions } from "../lib/createFiltersSlice"
 import createGlobalsSlice from "../lib/createGlobalsSlice"
 import createUserActivitySlice from "../lib/createUserActivitySlice"
 
-// @ts-expect-error TS(2554) FIXME: Expected 1 arguments, but got 0.
-const StoreContext = createContext()
+const StoreContext = createContext<StoreApi<AppState> | null>(null)
 
-export const StoreProvider = ({ options, children }: any) => {
+type AppState = FilterSlice & Record<string, any>
+
+interface StoreProviderProps {
+  options?: Record<string, any> // should be defined later on for the props
+  children: React.ReactNode
+}
+
+export const StoreProvider = ({ options, children }: StoreProviderProps) => {
   return (
     <StoreContext.Provider
-      value={createStore(
-        devtools((set, get) => ({
-          ...createGlobalsSlice(set, get, options),
-          // @ts-expect-error TS(2554) FIXME: Expected 1 arguments, but got 0.
-          ...createUserActivitySlice(set, get),
-          ...createAlertsSlice(set, get),
-          ...createFiltersSlice(set, get, options),
-          ...createSilencesSlice(set, get, options),
-        }))
-      )}
+      value={createStore<AppState>((set, get) => ({
+        ...createGlobalsSlice(set, get, options),
+        ...createUserActivitySlice(set),
+        ...createAlertsSlice(set, get),
+        ...createFiltersSlice(set, get, options),
+        ...createSilencesSlice(set, get, options),
+      }))}
     >
       {children}
     </StoreContext.Provider>
   )
 }
-// @ts-expect-error TS(2554) FIXME: Expected 1 arguments, but got 0.
-const useAppStore = (selector: any) => useStore(useContext(StoreContext), selector)
+
+const useAppStore = <T,>(selector: (state: AppState) => T): T => {
+  const store = useContext(StoreContext)
+  if (!store) {
+    throw new Error("useAppStore must be used within a StoreProvider")
+  }
+  return useStore(store, selector)
+}
 
 // atomic exports only instead of exporting whole store
 // See reasoning here: https://tkdodo.eu/blog/working-with-zustand
@@ -67,16 +76,14 @@ export const useAlertEnrichedLabels = () => useAppStore((state: any) => state.al
 export const useAlertsActions = () => useAppStore((state: any) => state.alerts.actions)
 
 // Filter exports
-export const useFilterLabels = () => useAppStore((state: any) => state.filters.labels)
-export const useActiveFilters = () => useAppStore((state: any) => state.filters.activeFilters)
-export const usePausedFilters = () => useAppStore((state: any) => state.filters.pausedFilters)
-export const useSearchTerm = () => useAppStore((state: any) => state.filters.searchTerm)
-export const useFilterLabelValues = () => useAppStore((state: any) => state.filters.filterLabelValues)
-export const usePredefinedFilters = () => useAppStore((state: any) => state.filters.predefinedFilters)
-export const useActivePredefinedFilter = () => useAppStore((state: any) => state.filters.activePredefinedFilter)
-export const useFilterPills = () => useAppStore((state: any) => state.filters.filterPills)
-
-export const useFilterActions = () => useAppStore((state: any) => state.filters.actions)
+export const useFilterLabels = () => useAppStore((state: AppState) => state.filters.labels)
+export const useActiveFilters = () => useAppStore((state: AppState) => state.filters.activeFilters)
+export const usePausedFilters = () => useAppStore((state: AppState) => state.filters.pausedFilters)
+export const useSearchTerm = () => useAppStore((state: AppState) => state.filters.searchTerm)
+export const useFilterLabelValues = () => useAppStore((state: AppState) => state.filters.filterLabelValues)
+export const usePredefinedFilters = () => useAppStore((state: AppState) => state.filters.predefinedFilters)
+export const useActivePredefinedFilter = () => useAppStore((state: AppState) => state.filters.activePredefinedFilter)
+export const useFilterActions = () => useAppStore((state: AppState) => state.filters.actions)
 
 // Silences exports
 export const useSilencesItems = () => useAppStore((state: any) => state.silences.items)

apps/supernova/src/components/alerts/AlertsList.tsx

@@ -32,6 +32,7 @@ const AlertsList = () => {
         </DataGridCell>
       </DataGridRow>
     ),
+    // @ts-ignore
     refFunction: (ref: any) => (
       <DataGridRow>
         <DataGridCell colSpan={3} className="border-b-0 py-0">

apps/supernova/src/components/filters/FilterPills.tsx

@@ -11,30 +11,26 @@ import { useActiveFilters, usePausedFilters, useFilterActions } from "../StorePr
 const FilterPills = () => {
   const activeFilters = useActiveFilters()
   const pausedFilters = usePausedFilters()
-  // @ts-ignore
   const { removeActiveFilter, addActiveFilter, addPausedFilter, removePausedFilter } = useFilterActions()
 
-  const pauseFilter = (key: any, value: any) => {
+  const pauseFilter = (key: string, value: string) => {
     addPausedFilter(key, value)
   }
 
-  const deleteFilter = (key: any, value: any) => {
+  const deleteFilter = (key: string, value: string) => {
     removeActiveFilter(key, value)
     removePausedFilter(key, value)
   }
 
-  const activateFilter = (key: any, value: any) => {
+  const activateFilter = (key: string, value: string) => {
     addActiveFilter(key, value)
     removePausedFilter(key, value)
   }
 
   return (
     <Stack gap="2" wrap={true}>
-      {/* @ts-expect-error TS(2550): Property 'entries' does not exist on type 'ObjectC... Remove this comment to see the */}
       {Object.entries(activeFilters).map(([key, filterItems]) => {
-        // @ts-ignore
         return filterItems?.map((item: any) =>
-          // @ts-ignore
           pausedFilters[key]?.includes(item) ? (
             <Pill
               className="bg-theme-background-lvl-4 opacity-70"

apps/supernova/src/components/filters/FilterSelect.tsx

@@ -19,14 +19,13 @@ const FilterSelect = () => {
   const [filterLabel, setFilterLabel] = useState("")
   const [filterValue, setFilterValue] = useState("")
   const [resetKey] = useState(Date.now())
-  // @ts-ignore
   const { addActiveFilter, loadFilterLabelValues, clearFilters, setSearchTerm } = useFilterActions()
   const filterLabels = useFilterLabels()
   const filterLabelValues = useFilterLabelValues()
   const activeFilters = useActiveFilters()
   const searchTerm = useSearchTerm()
 
-  const handleFilterAdd = (value: any) => {
+  const handleFilterAdd = (value?: any) => {
     if (filterLabel && (filterValue || value)) {
       // add active filter to store
       addActiveFilter(filterLabel, filterValue || value)
@@ -41,7 +40,6 @@ const FilterSelect = () => {
   const handleFilterLabelChange = (value: any) => {
     setFilterLabel(value)
     // lazy loading of all possible values for this label (only load them if we haven't already)
-    // @ts-ignore
     if (!filterLabelValues[value]?.values) {
       loadFilterLabelValues(value)
     }
@@ -62,12 +60,6 @@ const FilterSelect = () => {
     return () => clearTimeout(debouncedSearchTerm)
   }
 
-  // const handleKeyDown = (event) => {
-  //   if (event.key === "Enter") {
-  //     handleFilterValueChange()
-  //   }
-  // }
-
   return (
     <Stack alignment="center" gap="8">
       <InputGroup>
@@ -78,58 +70,46 @@ const FilterSelect = () => {
           value={filterLabel}
           onChange={(val: any) => handleFilterLabelChange(val)}
         >
-          {// @ts-ignore
-          filterLabels?.map((filter: any) => (
+          {filterLabels?.map((filter: any) => (
             <SelectOption value={filter} label={humanizeString(filter)} key={filter} />
           ))}
         </Select>
         <Select
           name="filterValue"
           value={filterValue}
           onChange={(value: any) => handleFilterValueChange(value)}
-          // @ts-ignore
           disabled={filterLabelValues[filterLabel] ? false : true}
-          // @ts-ignore
           loading={filterLabelValues[filterLabel]?.isLoading}
           className="filter-value-select w-96 bg-theme-background-lvl-0"
           key={resetKey}
         >
-          {/* @ts-ignore */}
           {filterLabelValues[filterLabel]?.values
             ?.filter(
               (
                 value: any // filter out already active values for this label
-                // @ts-ignore
               ) => !activeFilters[filterLabel]?.includes(value)
             )
             .slice(0, 100) // take only the first 100 values. This isn't a good solution TODO: fix this properly with combo box, typeahead search, lazy loading, etc.
             .map((value: any) => <SelectOption value={value} key={value} />)}
         </Select>
-        {/* @ts-expect-error TS(2554): Expected 1 arguments, but got 0. // @ts-expect-error TS(2554): Expected 1 */}
         <Button onClick={() => handleFilterAdd()} icon="filterAlt" className="py-[0.3rem]" />
       </InputGroup>
-      {
-        // @ts-ignore
-        renderClearButton()
-      }
+      {renderClearButton()}
       <SearchInput
         placeholder="search term or regular expression"
         className="w-96 ml-auto"
-        // @ts-ignore
         value={searchTerm || ""}
         onSearch={(value: any) => setSearchTerm(value)}
-        onClear={() => setSearchTerm(null)}
+        onClear={() => setSearchTerm("")}
         onChange={(value: any) => handleSearchChange(value)}
       />
     </Stack>
   )
 
   function renderClearButton(): React.ReactNode {
-    // @ts-ignore
     return (
       activeFilters &&
       Object.keys(activeFilters).length > 0 && (
-        // @ts-ignore
         <Button label="Clear all" onClick={() => clearFilters()} variant="subdued" />
       )
     )

apps/supernova/src/components/filters/PredefinedFilters.tsx

@@ -10,7 +10,6 @@ import { useActivePredefinedFilter, useFilterActions, usePredefinedFilters } fro
 import SilenceScheduled from "../silences/SilenceScheduled"
 
 const PredefinedFilters = () => {
-  // @ts-ignore
   const { setActivePredefinedFilter } = useFilterActions()
   const predefinedFilters = usePredefinedFilters()
   const activePredefinedFilter = useActivePredefinedFilter()
@@ -24,18 +23,14 @@ const PredefinedFilters = () => {
 
   return (
     <Stack>
-      {
-        // @ts-ignore
-        renderPredefinedFilterTabs()
-      }
+      {renderPredefinedFilterTabs()}
       <div className="ml-auto">
         <SilenceScheduled />
       </div>
     </Stack>
   )
 
   function renderPredefinedFilterTabs(): React.ReactNode {
-    // @ts-ignore
     return (
       predefinedFilters &&
       selectedItem && (

apps/supernova/src/components/silences/SilencesList.tsx

@@ -70,7 +70,6 @@ const SilencesList = () => {
     } catch (e) {
       console.warn("search term is not a valid regex. " + e)
 
-      // @ts-expect-error TS(2550) FIXME: Property 'includes' does not exist on type 'string... Remove this comment to see the full error message
       filtered = filtered.filter((silence: any) => JSON.stringify(silence).toLowerCase().includes(regEx.toLowerCase))
     }
 
@@ -98,6 +97,7 @@ const SilencesList = () => {
         </DataGridCell>
       </DataGridRow>
     ),
+    // @ts-ignore
     refFunction: (ref: any) => (
       <DataGridRow>
         <DataGridCell colSpan={3} className="border-b-0 py-0">