abhijeets25012-tech commented on code in PR #76238: URL: https://github.com/apache/airflow/pull/76238#discussion_r4438843914
########## airflow-core/src/airflow/ui/src/pages/DagsList/useRememberedFilters.ts: ########## @@ -0,0 +1,115 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { useEffect, useRef } from "react"; + +import { useLocation, useSearchParams } from "react-router-dom"; +import { useLocalStorage } from "usehooks-ts"; + +import type { FilterConfig } from "src/components/FilterBar/types"; + +import { lastFiltersKey, presetFiltersDefaultKey } from "src/constants/localStorage"; +import { SearchParamsKeys } from "src/constants/searchParams"; + +// Every URL param the filter pills own. Composite filters enumerate the params they manage +// (mapped to undefined to clear them), so their keys are present whatever the current value is. +const getFilterParamNames = (configs: Array<FilterConfig>): Array<string> => + configs.flatMap((config) => { + if (config.toSearchParams !== undefined) { + return Object.keys(config.toSearchParams(undefined)); + } + + if (config.type === "daterange") { + return [config.key, config.startKey, config.endKey].filter( + (param): param is string => param !== undefined, + ); + } + + return config.matchModeKey === undefined ? [config.key] : [config.key, config.matchModeKey]; + }); + +const filterQuery = (search: string, names: Array<string>): string => { + const source = new URLSearchParams(search); + const query = new URLSearchParams(); + + names.forEach((name) => { + source.getAll(name).forEach((value) => { + query.append(name, value); + }); + }); + + return query.toString(); +}; + +/** + * Remembers the filters the user is working with and restores them when the list is landed on + * without a query, so returning from another page resumes the same view. An explicit query wins, + * and so does a pinned default preset, which states where the list should always start. + */ +export const useRememberedFilters = (configs: Array<FilterConfig>) => { + const { pathname } = useLocation(); + const [searchParams, setSearchParams] = useSearchParams(); + const [lastFilters, setLastFilters] = useLocalStorage<string>(lastFiltersKey(pathname), ""); + const [defaultPresetName] = useLocalStorage<string | null>(presetFiltersDefaultKey(pathname), null); + // The previous render's filters, or undefined before the landing render has been observed. + const previousQuery = useRef<string | undefined>(undefined); + const filterParams = getFilterParamNames(configs); + const filterParamsKey = filterParams.join(","); + + useEffect(() => { + const query = filterQuery(searchParams.toString(), filterParams); + const observed = previousQuery.current; + + previousQuery.current = query; + + // The landing render is not a filter change, so landing without filters must not erase what + // is remembered before the restore below has applied it. + if (observed === query || (observed === undefined && query === "")) { + return; + } + + setLastFilters(query); + // filterParams is rebuilt on every render; filterParamsKey captures when its contents change. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [filterParamsKey, searchParams, setLastFilters]); + + // Restore once per mount. DagsFilters calls this after usePausedDefault, so a bare landing + // resumes the remembered view rather than keeping only the paused seed. + useEffect(() => { + const params = new URLSearchParams(searchParams); + + params.delete(SearchParamsKeys.OFFSET); + params.delete(SearchParamsKeys.CURSOR); + + if ([...params].length > 0 || defaultPresetName !== null) { + return; + } + + const remembered = filterQuery(lastFilters, getFilterParamNames(configs)); + + if (remembered === "") { + return; + } + + // Replace rather than push: the restored query should not add a history entry that lands on + // the bare page and restores itself again. + setSearchParams(new URLSearchParams(remembered), { replace: true }); + // Mount-only on purpose: later edits and clears must not re-trigger the restore. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [pathname]); Review Comment: Good catch — the restore was mount-only, so re-clicking the sidebar link while already on the list dropped the query on the same page instance and the remember effect then stored the empty result. From another page the component remounted, which is why it only showed there. Fixed in 42d799f. The restore now runs whenever the list lands on a bare URL, whether the page was just mounted or the link for the current page was followed. To keep that from undoing a deliberate clear, `useRememberedFilters` now returns the wrapped `FilterBar` handler, so a clear that goes through the filter bar is still what forgets the filters. Added unit coverage for both paths and an integration test that clicks the nav link while already on `/dags`. ########## airflow-core/src/airflow/ui/src/pages/DagsList/useRememberedFilters.ts: ########## @@ -0,0 +1,115 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { useEffect, useRef } from "react"; + +import { useLocation, useSearchParams } from "react-router-dom"; +import { useLocalStorage } from "usehooks-ts"; + +import type { FilterConfig } from "src/components/FilterBar/types"; + +import { lastFiltersKey, presetFiltersDefaultKey } from "src/constants/localStorage"; +import { SearchParamsKeys } from "src/constants/searchParams"; + +// Every URL param the filter pills own. Composite filters enumerate the params they manage +// (mapped to undefined to clear them), so their keys are present whatever the current value is. +const getFilterParamNames = (configs: Array<FilterConfig>): Array<string> => Review Comment: Fair point. The derivation now lives next to `handleFiltersChange` as the exported `getFilterParamNames` in `useFiltersHandler.ts`, and the hook uses it, so there is one definition of which params a config owns. It relies on the contract already documented on `FilterConfig.toSearchParams`: composite filters must enumerate every param they manage (mapped to `undefined` to clear), which is the same contract `handleFiltersChange` relies on when it applies the projection. A new filter type still has to honor that contract, but the mapping no longer has to be kept in sync in two places. ########## airflow-core/src/airflow/ui/src/pages/DagsList/useRememberedFilters.ts: ########## @@ -0,0 +1,115 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { useEffect, useRef } from "react"; + +import { useLocation, useSearchParams } from "react-router-dom"; +import { useLocalStorage } from "usehooks-ts"; + +import type { FilterConfig } from "src/components/FilterBar/types"; + +import { lastFiltersKey, presetFiltersDefaultKey } from "src/constants/localStorage"; +import { SearchParamsKeys } from "src/constants/searchParams"; + +// Every URL param the filter pills own. Composite filters enumerate the params they manage +// (mapped to undefined to clear them), so their keys are present whatever the current value is. +const getFilterParamNames = (configs: Array<FilterConfig>): Array<string> => + configs.flatMap((config) => { + if (config.toSearchParams !== undefined) { + return Object.keys(config.toSearchParams(undefined)); + } + + if (config.type === "daterange") { + return [config.key, config.startKey, config.endKey].filter( + (param): param is string => param !== undefined, + ); + } + + return config.matchModeKey === undefined ? [config.key] : [config.key, config.matchModeKey]; + }); + +const filterQuery = (search: string, names: Array<string>): string => { + const source = new URLSearchParams(search); + const query = new URLSearchParams(); + + names.forEach((name) => { + source.getAll(name).forEach((value) => { + query.append(name, value); + }); + }); + + return query.toString(); +}; + +/** + * Remembers the filters the user is working with and restores them when the list is landed on + * without a query, so returning from another page resumes the same view. An explicit query wins, + * and so does a pinned default preset, which states where the list should always start. + */ +export const useRememberedFilters = (configs: Array<FilterConfig>) => { + const { pathname } = useLocation(); + const [searchParams, setSearchParams] = useSearchParams(); + const [lastFilters, setLastFilters] = useLocalStorage<string>(lastFiltersKey(pathname), ""); + const [defaultPresetName] = useLocalStorage<string | null>(presetFiltersDefaultKey(pathname), null); + // The previous render's filters, or undefined before the landing render has been observed. + const previousQuery = useRef<string | undefined>(undefined); + const filterParams = getFilterParamNames(configs); + const filterParamsKey = filterParams.join(","); + + useEffect(() => { + const query = filterQuery(searchParams.toString(), filterParams); + const observed = previousQuery.current; + + previousQuery.current = query; + + // The landing render is not a filter change, so landing without filters must not erase what + // is remembered before the restore below has applied it. + if (observed === query || (observed === undefined && query === "")) { + return; + } + + setLastFilters(query); + // filterParams is rebuilt on every render; filterParamsKey captures when its contents change. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [filterParamsKey, searchParams, setLastFilters]); + + // Restore once per mount. DagsFilters calls this after usePausedDefault, so a bare landing + // resumes the remembered view rather than keeping only the paused seed. + useEffect(() => { + const params = new URLSearchParams(searchParams); + + params.delete(SearchParamsKeys.OFFSET); + params.delete(SearchParamsKeys.CURSOR); + + if ([...params].length > 0 || defaultPresetName !== null) { + return; + } + + const remembered = filterQuery(lastFilters, getFilterParamNames(configs)); Review Comment: Done — this now reuses from above instead of calling a second time. ########## airflow-core/src/airflow/ui/src/pages/DagsList/useRememberedFilters.ts: ########## @@ -0,0 +1,115 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { useEffect, useRef } from "react"; + +import { useLocation, useSearchParams } from "react-router-dom"; +import { useLocalStorage } from "usehooks-ts"; + +import type { FilterConfig } from "src/components/FilterBar/types"; + +import { lastFiltersKey, presetFiltersDefaultKey } from "src/constants/localStorage"; +import { SearchParamsKeys } from "src/constants/searchParams"; + +// Every URL param the filter pills own. Composite filters enumerate the params they manage +// (mapped to undefined to clear them), so their keys are present whatever the current value is. +const getFilterParamNames = (configs: Array<FilterConfig>): Array<string> => + configs.flatMap((config) => { + if (config.toSearchParams !== undefined) { + return Object.keys(config.toSearchParams(undefined)); + } + + if (config.type === "daterange") { + return [config.key, config.startKey, config.endKey].filter( + (param): param is string => param !== undefined, + ); + } + + return config.matchModeKey === undefined ? [config.key] : [config.key, config.matchModeKey]; + }); + +const filterQuery = (search: string, names: Array<string>): string => { + const source = new URLSearchParams(search); + const query = new URLSearchParams(); + + names.forEach((name) => { + source.getAll(name).forEach((value) => { + query.append(name, value); + }); + }); + + return query.toString(); +}; + +/** + * Remembers the filters the user is working with and restores them when the list is landed on + * without a query, so returning from another page resumes the same view. An explicit query wins, + * and so does a pinned default preset, which states where the list should always start. + */ +export const useRememberedFilters = (configs: Array<FilterConfig>) => { + const { pathname } = useLocation(); + const [searchParams, setSearchParams] = useSearchParams(); + const [lastFilters, setLastFilters] = useLocalStorage<string>(lastFiltersKey(pathname), ""); + const [defaultPresetName] = useLocalStorage<string | null>(presetFiltersDefaultKey(pathname), null); + // The previous render's filters, or undefined before the landing render has been observed. + const previousQuery = useRef<string | undefined>(undefined); + const filterParams = getFilterParamNames(configs); + const filterParamsKey = filterParams.join(","); + + useEffect(() => { + const query = filterQuery(searchParams.toString(), filterParams); + const observed = previousQuery.current; + + previousQuery.current = query; + + // The landing render is not a filter change, so landing without filters must not erase what + // is remembered before the restore below has applied it. + if (observed === query || (observed === undefined && query === "")) { + return; + } + + setLastFilters(query); + // filterParams is rebuilt on every render; filterParamsKey captures when its contents change. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [filterParamsKey, searchParams, setLastFilters]); + + // Restore once per mount. DagsFilters calls this after usePausedDefault, so a bare landing + // resumes the remembered view rather than keeping only the paused seed. + useEffect(() => { + const params = new URLSearchParams(searchParams); + + params.delete(SearchParamsKeys.OFFSET); + params.delete(SearchParamsKeys.CURSOR); + + if ([...params].length > 0 || defaultPresetName !== null) { + return; + } + + const remembered = filterQuery(lastFilters, getFilterParamNames(configs)); Review Comment: Done — this now reuses `filterParams` from above instead of calling `getFilterParamNames` a second time. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
