Make textFilter persist across tabs

Arnei · Arnei · commit e6f617f35e4e · 2025-05-19T16:09:04.000+02:00
Same as #980, but for the textfilter, aka the search field. When typing something into the search bar, then switching to a different tab, then switching back to the original tab, the search bar is empty. With this patch, the search bar will instead remember what was originally written in it.
diff --git a/src/components/configuration/Themes.tsx b/src/components/configuration/Themes.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import TableFilters from "../shared/TableFilters";
 import Table from "../shared/Table";
-import { fetchFilters, editTextFilter } from "../../slices/tableFilterSlice";
+import { fetchFilters } from "../../slices/tableFilterSlice";
 import { themesTemplateMap } from "../../configs/tableConfigs/themesTableMap";
 import { getTotalThemes } from "../../selectors/themeSelectors";
 import { loadThemesIntoTable } from "../../thunks/tableThunks";
@@ -35,9 +35,6 @@ const Themes = () => {
 
 		dispatch(fetchFilters("themes"));
 
-		// Reset text filter
-		dispatch(editTextFilter(""));
-
 		// Load themes on mount
 		const loadThemes = async () => {
 			// Fetching themes from server
diff --git a/src/components/events/Events.tsx b/src/components/events/Events.tsx
@@ -13,7 +13,7 @@ import { eventsTemplateMap } from "../../configs/tableConfigs/eventsTableMap";
 import {
 	loadEventsIntoTable,
 } from "../../thunks/tableThunks";
-import { fetchFilters, editTextFilter } from "../../slices/tableFilterSlice";
+import { fetchFilters } from "../../slices/tableFilterSlice";
 import {
 	getTotalEvents,
 	isFetchingAssetUploadOptions as getIsFetchingAssetUploadOptions,
@@ -70,10 +70,7 @@ const Events = () => {
 		// Clear redux of previous table data
 		dispatch(resetTableProperties());
 
-		dispatch(fetchFilters("events"))
-
-		// Reset text filter
-		dispatch(editTextFilter(""));
+		dispatch(fetchFilters("events"));
 
 		// disable actions button
 		dispatch(setShowActions(false));
diff --git a/src/components/events/Series.tsx b/src/components/events/Series.tsx
@@ -9,7 +9,7 @@ import { seriesTemplateMap } from "../../configs/tableConfigs/seriesTableMap";
 import {
 	loadSeriesIntoTable,
 } from "../../thunks/tableThunks";
-import { fetchFilters, editTextFilter } from "../../slices/tableFilterSlice";
+import { fetchFilters } from "../../slices/tableFilterSlice";
 import { getTotalSeries, isShowActions } from "../../selectors/seriesSeletctor";
 import Header from "../Header";
 import NavBar from "../NavBar";
@@ -51,10 +51,7 @@ const Series = () => {
 		// Clear table of previous data
 		dispatch(resetTableProperties());
 
-		dispatch(fetchFilters("series"))
-
-		// Reset text filer
-		dispatch(editTextFilter(""));
+		dispatch(fetchFilters("series"));
 
 		// disable actions button
 		dispatch(showActionsSeries(false));
diff --git a/src/components/recordings/Recordings.tsx b/src/components/recordings/Recordings.tsx
@@ -6,7 +6,7 @@ import Notifications from "../shared/Notifications";
 import { recordingsTemplateMap } from "../../configs/tableConfigs/recordingsTableMap";
 import { getTotalRecordings } from "../../selectors/recordingSelectors";
 import { loadRecordingsIntoTable } from "../../thunks/tableThunks";
-import { fetchFilters, editTextFilter } from "../../slices/tableFilterSlice";
+import { fetchFilters } from "../../slices/tableFilterSlice";
 import Header from "../Header";
 import NavBar from "../NavBar";
 import MainView from "../MainView";
@@ -35,9 +35,6 @@ const Recordings = () => {
 
 		dispatch(fetchFilters("recordings"));
 
-		// Reset text filter
-		dispatch(editTextFilter(""));
-
 		// Load recordings on mount
 		const loadRecordings = async () => {
 			// Fetching recordings from server
diff --git a/src/components/shared/Stats.tsx b/src/components/shared/Stats.tsx
@@ -30,10 +30,10 @@ const Stats = () => {
 		let filterValue;
 		await stats.filters.forEach((f) => {
 			if (f.name.toLowerCase() === "textfilter") {
-				dispatch(editTextFilter(f.value));
+				dispatch(editTextFilter({text: f.value, resource: "events"}));
 				return;
 			} else {
-				dispatch(removeTextFilter());
+				dispatch(removeTextFilter("events"));
 			}
 			let filter = filterMap.find(({ name }) => name === f.name);
 			filterValue = f.value;
diff --git a/src/components/shared/TableFilters.tsx b/src/components/shared/TableFilters.tsx
@@ -50,7 +50,7 @@ const TableFilters = ({
 	const filterMap = useAppSelector(state => getFilters(state, resource));
 	const secondFilter = useAppSelector(state => getSecondFilter(state));
 	const selectedFilter = useAppSelector(state => getSelectedFilter(state));
-	const textFilter = useAppSelector(state => getTextFilter(state));
+	const textFilter = useAppSelector(state => getTextFilter(state, resource));
 
 	// Variables for showing different dialogs depending on what was clicked
 	const [showFilterSelector, setFilterSelector] = useState(false);
@@ -71,7 +71,7 @@ const TableFilters = ({
 		setEndDate(undefined);
 		setFilterSelector(false);
 
-		dispatch(removeTextFilter());
+		dispatch(removeTextFilter(resource));
 		dispatch(removeSelectedFilter());
 		dispatch(removeSelectedFilter());
 
@@ -102,7 +102,7 @@ const TableFilters = ({
 	const handleChange = (name: string, value: string) => {
 		let mustApplyChanges = false;
 		if (name === "textFilter") {
-			dispatch(editTextFilter(value));
+			dispatch(editTextFilter({text: value, resource: resource}));
 			mustApplyChanges = true;
 		}
 
diff --git a/src/components/systems/Jobs.tsx b/src/components/systems/Jobs.tsx
@@ -5,7 +5,7 @@ import Table from "../shared/Table";
 import Notifications from "../shared/Notifications";
 import { jobsTemplateMap } from "../../configs/tableConfigs/jobsTableConfig";
 import { getTotalJobs } from "../../selectors/jobSelectors";
-import { fetchFilters, editTextFilter } from "../../slices/tableFilterSlice";
+import { fetchFilters } from "../../slices/tableFilterSlice";
 import {
 	loadJobsIntoTable,
 } from "../../thunks/tableThunks";
@@ -37,9 +37,6 @@ const Jobs = () => {
 
 		dispatch(fetchFilters("jobs"));
 
-		// Reset text filter
-		dispatch(editTextFilter(""));
-
 		// Load jobs on mount
 		const loadJobs = async () => {
 			// Fetching jobs from server
diff --git a/src/components/systems/Servers.tsx b/src/components/systems/Servers.tsx
@@ -5,7 +5,7 @@ import Table from "../shared/Table";
 import Notifications from "../shared/Notifications";
 import { serversTemplateMap } from "../../configs/tableConfigs/serversTableMap";
 import { getTotalServers } from "../../selectors/serverSelectors";
-import { fetchFilters, editTextFilter } from "../../slices/tableFilterSlice";
+import { fetchFilters } from "../../slices/tableFilterSlice";
 import {
 	loadServersIntoTable,
 } from "../../thunks/tableThunks";
@@ -37,9 +37,6 @@ const Servers = () => {
 
 		dispatch(fetchFilters("servers"));
 
-		// Reset text filter
-		dispatch(editTextFilter(""));
-
 		// Load servers on mount
 		const loadServers = async () => {
 			// Fetching servers from server
diff --git a/src/components/systems/Services.tsx b/src/components/systems/Services.tsx
@@ -4,7 +4,7 @@ import TableFilters from "../shared/TableFilters";
 import Table from "../shared/Table";
 import Notifications from "../shared/Notifications";
 import { servicesTemplateMap } from "../../configs/tableConfigs/servicesTableMap";
-import { fetchFilters, editTextFilter } from "../../slices/tableFilterSlice";
+import { fetchFilters } from "../../slices/tableFilterSlice";
 import {
 	loadServicesIntoTable,
 } from "../../thunks/tableThunks";
@@ -37,9 +37,6 @@ const Services = () => {
 
 		dispatch(fetchFilters("services"));
 
-		// Reset text filter
-		dispatch(editTextFilter(""));
-
 		// Load services on mount
 		const loadServices = async () => {
 			// Fetching services from server
diff --git a/src/components/users/Acls.tsx b/src/components/users/Acls.tsx
@@ -4,7 +4,7 @@ import TableFilters from "../shared/TableFilters";
 import Table from "../shared/Table";
 import Notifications from "../shared/Notifications";
 import { aclsTemplateMap } from "../../configs/tableConfigs/aclsTableMap";
-import { fetchFilters, editTextFilter } from "../../slices/tableFilterSlice";
+import { fetchFilters } from "../../slices/tableFilterSlice";
 import {
 	loadAclsIntoTable,
 } from "../../thunks/tableThunks";
@@ -37,9 +37,6 @@ const Acls = () => {
 
 		dispatch(fetchFilters("acls"));
 
-		// Reset text filter
-		dispatch(editTextFilter(""));
-
 		// Load acls on mount
 		const loadAcls = async () => {
 			// Fetching acls from server
diff --git a/src/components/users/Groups.tsx b/src/components/users/Groups.tsx
@@ -5,7 +5,7 @@ import Table from "../shared/Table";
 import Notifications from "../shared/Notifications";
 import { getTotalGroups } from "../../selectors/groupSelectors";
 import { groupsTemplateMap } from "../../configs/tableConfigs/groupsTableMap";
-import { fetchFilters, editTextFilter } from "../../slices/tableFilterSlice";
+import { fetchFilters } from "../../slices/tableFilterSlice";
 import {
 	loadGroupsIntoTable,
 } from "../../thunks/tableThunks";
@@ -37,9 +37,6 @@ const Groups = () => {
 
 		dispatch(fetchFilters("groups"));
 
-		// Reset text filter
-		dispatch(editTextFilter(""));
-
 		// Load groups on mount
 		 const loadGroups = async () => {
 			// Fetching groups from server
diff --git a/src/components/users/Users.tsx b/src/components/users/Users.tsx
@@ -8,7 +8,7 @@ import { getTotalUsers } from "../../selectors/userSelectors";
 import {
 	loadUsersIntoTable,
 } from "../../thunks/tableThunks";
-import { fetchFilters, editTextFilter } from "../../slices/tableFilterSlice";
+import { fetchFilters } from "../../slices/tableFilterSlice";
 import Header from "../Header";
 import NavBar from "../NavBar";
 import MainView from "../MainView";
@@ -37,9 +37,6 @@ const Users = () => {
 
 		dispatch(fetchFilters("users"));
 
-		// Reset text filter
-		dispatch(editTextFilter(""));
-
 		// Load users on mount
 		const loadUsers = async () => {
 			// Fetching users from server
diff --git a/src/selectors/tableFilterSelectors.ts b/src/selectors/tableFilterSelectors.ts
@@ -6,9 +6,13 @@ import { RootState } from "../store";
 
 export const getAllFilters = (state: RootState) => state.tableFilters.data;
 export const getStats = (state: RootState) => state.tableFilters.stats;
-export const getTextFilter = (state: RootState) => state.tableFilters.textFilter;
+export const getAllTextFilter = (state: RootState) => state.tableFilters.textFilter;
 export const getSelectedFilter = (state: RootState) => state.tableFilters.selectedFilter;
 export const getSecondFilter = (state: RootState) => state.tableFilters.secondFilter;
 export const getCurrentFilterResource = (state: RootState) => state.tableFilters.currentResource;
 export const getFilters = (state: RootState, resource: string) =>
 	state.tableFilters.data.filter(obj => obj.resource === resource);
+export const getTextFilter = (state: RootState, resource: string) => {
+	const textFilter = state.tableFilters.textFilter.find(obj => obj.resource === resource);
+	return textFilter?.text ?? "";
+}
diff --git a/src/slices/tableFilterSlice.ts b/src/slices/tableFilterSlice.ts
@@ -22,6 +22,11 @@ export type FilterData = {
 	value: string,
 }
 
+export type TextFilter = {
+	text: string,
+	resource: string // Not from the backend. We set this to keep track of which table this filter belongs to
+}
+
 export type Stats = {
 	count: number,
 	description: string,
@@ -42,7 +47,7 @@ type TableFilterState = {
 	currentResource: string,
 	data: FilterData[],
 	filterProfiles: FilterProfile[],
-	textFilter: string,
+	textFilter: TextFilter[],
 	selectedFilter: string,
 	secondFilter: string,
 	stats: Stats[],
@@ -57,7 +62,7 @@ const initialState: TableFilterState = {
 	currentResource: "",
 	data: [],
 	filterProfiles: [],
-	textFilter: "",
+	textFilter: [],
 	selectedFilter: "",
 	secondFilter: "",
 	stats: [],
@@ -304,13 +309,27 @@ const tableFilterSlice = createSlice({
 			})
 		},
 		editTextFilter(state, action: PayloadAction<
-			TableFilterState["textFilter"]
+			TableFilterState["textFilter"][0]
 		>) {
 			const textFilter = action.payload;
-			state.textFilter = textFilter;
+
+			const existingIndex = state.textFilter.findIndex(obj => obj.resource === textFilter.resource);
+
+			let updatedItems;
+			if (existingIndex !== -1) {
+				updatedItems = state.textFilter.map((filter, index) =>
+					index === existingIndex ? { ...filter, ...textFilter } : filter
+				);
+			} else {
+				updatedItems = [...state.textFilter, textFilter];
+			}
+
+			state.textFilter = updatedItems;
 		},
-		removeTextFilter(state) {
-			state.textFilter = "";
+		removeTextFilter(state, action: PayloadAction<
+			TableFilterState["textFilter"][0]["resource"]
+		>) {
+			state.textFilter = state.textFilter.filter(fil => fil.resource !== action.payload)
 		},
 		loadFilterProfile(state, action: PayloadAction<
 			TableFilterState["data"]
diff --git a/src/utils/resourceUtils.ts b/src/utils/resourceUtils.ts
@@ -39,7 +39,7 @@ export const getURLParams = (
 	// get filter map from state
 	let filters = [];
 	let filterMap = getFilters(state, resource);
-	let textFilter = getTextFilter(state);
+	let textFilter = getTextFilter(state, resource);
 
 	// check if textFilter has value and transform for use as URL param
 	if (textFilter !== "") {
