diff --git a/src/renderer/components/input/search-input-url.tsx b/src/renderer/components/input/search-input-url.tsx index c0e00d6e56..e602b83d1b 100644 --- a/src/renderer/components/input/search-input-url.tsx +++ b/src/renderer/components/input/search-input-url.tsx @@ -1,10 +1,11 @@ import React from "react"; import debounce from "lodash/debounce"; -import { autorun, observable } from "mobx"; +import { observable, reaction } from "mobx"; import { disposeOnUnmount, observer } from "mobx-react"; import { InputProps } from "./input"; import { SearchInput } from "./search-input"; import { createPageParam } from "../../navigation"; +import { getSearchInput, setSearchInput } from "./search-input.storage"; export const searchUrlParam = createPageParam({ name: "search", @@ -13,6 +14,7 @@ export const searchUrlParam = createPageParam({ }); interface Props extends InputProps { + isEnabled?: boolean; compact?: boolean; // show only search-icon when not focused } @@ -20,13 +22,30 @@ interface Props extends InputProps { export class SearchInputUrl extends React.Component { @observable inputVal = ""; // fix: use empty string on init to avoid react warnings - @disposeOnUnmount - updateInput = autorun(() => this.inputVal = searchUrlParam.get()); + componentDidMount() { + if (getSearchInput()) { + this.inputVal = getSearchInput(); + searchUrlParam.set(getSearchInput()); + } + else { + this.inputVal = searchUrlParam.get(); + } + + disposeOnUnmount(this, [ + reaction(() => this.props.isEnabled, () => { + if (!this.props.isEnabled) { + this.clear(); + } + }) + ]); + } + updateUrl = debounce((val: string) => searchUrlParam.set(val), 250); setValue = (value: string) => { this.inputVal = value; this.updateUrl(value); + setSearchInput(value); }; clear = () => { @@ -43,14 +62,14 @@ export class SearchInputUrl extends React.Component { }; render() { - const { inputVal } = this; + const { isEnabled, ...props } = this.props; return ( ); } diff --git a/src/renderer/components/input/search-input.storage.ts b/src/renderer/components/input/search-input.storage.ts new file mode 100644 index 0000000000..bc154d6000 --- /dev/null +++ b/src/renderer/components/input/search-input.storage.ts @@ -0,0 +1,19 @@ +import { createStorage } from "../../utils"; + +export interface SearchInputState { + searchInput: string; +} + +export const searchInputStorage = createStorage("search_input", { + searchInput: "" +}); + +export function setSearchInput(searchInput: string) { + searchInputStorage.merge(draft => { + draft.searchInput = searchInput; + }); +} + +export function getSearchInput() { + return searchInputStorage.get().searchInput; +} diff --git a/src/renderer/components/item-object-list/item-list-layout.tsx b/src/renderer/components/item-object-list/item-list-layout.tsx index 5c7db4cd41..87c35e7f8e 100644 --- a/src/renderer/components/item-object-list/item-list-layout.tsx +++ b/src/renderer/components/item-object-list/item-list-layout.tsx @@ -344,6 +344,7 @@ export class ItemListLayout extends React.Component { renderHeader() { const { showHeader, customizeHeader, renderHeaderTitle, headerClassName, isClusterScoped } = this.props; + const isSearchEnabled = Boolean(this.filters.find(filter => filter.type === FilterType.SEARCH)); if (!showHeader) return; const title = typeof renderHeaderTitle === "function" ? renderHeaderTitle(this) : renderHeaderTitle; @@ -356,7 +357,7 @@ export class ItemListLayout extends React.Component { [FilterType.NAMESPACE]: true, // namespace-select used instead }}/> , - search: , + search: , }; let header = this.renderHeaderContent(placeholders);