diff --git a/src/renderer/components/+workloads-pods/pods.tsx b/src/renderer/components/+workloads-pods/pods.tsx index ee54ab41bf..1386e9cfa9 100644 --- a/src/renderer/components/+workloads-pods/pods.tsx +++ b/src/renderer/components/+workloads-pods/pods.tsx @@ -242,7 +242,7 @@ class NonInjectedPods extends React.Component { data={podStore.contextItems} title="Pods" filters={[ - // pod => pod.getSearchFields(), + pod => pod.getSearchFields(), pod => pod.getStatusMessage(), pod => pod.status?.podIP || "", pod => pod.getNodeName() || "", diff --git a/src/renderer/components/list/list.tsx b/src/renderer/components/list/list.tsx index 60a134125f..7132004366 100644 --- a/src/renderer/components/list/list.tsx +++ b/src/renderer/components/list/list.tsx @@ -6,12 +6,16 @@ import styles from "./list.module.scss"; import themeStyles from "./table-theme.module.scss"; -import React, { useState } from "react"; -import { SearchInput, SearchInputUrl } from "../input"; +import React, { useEffect, useState } from "react"; +import { SearchInputUrl } from "../input"; import type { TableOptions } from '@tanstack/react-table' import { TableList } from "../table-list/table-list"; import { NamespaceSelectFilter } from "../+namespaces/namespace-select-filter"; +import { withInjectables } from "@ogre-tools/injectable-react"; +import { FilterType, PageFiltersStore } from "../item-object-list/page-filters/store"; +import pageFiltersStoreInjectable from "../item-object-list/page-filters/store.injectable"; +import { observer } from "mobx-react"; export type SearchFilter = (item: T) => string; @@ -20,12 +24,22 @@ export interface ListProps extends TableOptions { title?: React.ReactNode; } -export function List({ columns, data, title, filters }: ListProps) { +interface Dependencies { + pageFiltersStore: PageFiltersStore; +} + +export function NonInjectedList({ columns, data, title, filters, pageFiltersStore }: ListProps & Dependencies) { const [search, setSearch] = useState(""); - const query = search.toLowerCase(); + + useEffect(() => { + const searchFilter = pageFiltersStore.activeFilters.find(({ type }) => type === FilterType.SEARCH); + const searchValue = searchFilter?.value ?? ""; + + setSearch(searchValue); + }, [pageFiltersStore.activeFilters]); const filteredData = data.filter((item, index) => ( - filters.some(getText => String(getText(data[index])).toLowerCase().includes(query)) + filters.some(getText => String(getText(data[index])).toLowerCase().includes(search.toLowerCase())) )); return ( @@ -40,13 +54,6 @@ export function List({ columns, data, title, filters }: ListProps) {
-{/* - */}
({ columns, data, title, filters }: ListProps) { ); } + +export const List = withInjectables>( + observer(NonInjectedList), { + getProps: (di, props) => ({ + ...props, + pageFiltersStore: di.inject(pageFiltersStoreInjectable), + }), +}) \ No newline at end of file