Fix chevron highlight and introduce no sort state

src/components/shared/Table.tsx

@@ -187,6 +187,8 @@ const TableHeadRows = ({ forceDeselectAll }: { forceDeselectAll: () => unknown }
 		let direction: ReverseOptions = "ASC";
 		if (reverse && reverse === "ASC") {
 			direction = "DESC";
+		} else if (reverse && reverse === "DESC") {
+			direction = "NONE";
 		}
 		dispatch(reverseTable(direction));
 		dispatch(updatePages());
@@ -199,7 +201,7 @@ const TableHeadRows = ({ forceDeselectAll }: { forceDeselectAll: () => unknown }
 					<th
 						key={key}
 						className={cn({
-							"col-sort": !!sortBy && column.name === sortBy,
+							"col-sort": reverse !== "NONE" && !!sortBy && column.name === sortBy,
 							sortable: true,
 						})}
 						onClick={() => sortByColumn(column.name)}
@@ -211,7 +213,7 @@ const TableHeadRows = ({ forceDeselectAll }: { forceDeselectAll: () => unknown }
 									className={cn("chevron-up", { active: reverse === "ASC" && column.name === sortBy })}
 								/>
 								<LuChevronDown
-									className={cn("chevron-down", { active: reverse === "ASC" && column.name === sortBy })}
+									className={cn("chevron-down", { active: reverse === "DESC" && column.name === sortBy })}
 								/>
 							</div>
 						</span>

src/components/shared/TableFilters.tsx

@@ -140,6 +140,7 @@ const TableFilters = ({
 	// simply by going to first page and then load resources.
 	// This helps increase performance by reducing the number of calls to load resources.
 	const applyFilterChangesDebounced = async () => {
+		console.log("Applying filter changes with value: " + itemValue);
 		// No matter what, we go to page one.
 		dispatch(goToPage(0));
 		// Reload of resource
@@ -149,8 +150,8 @@ const TableFilters = ({
 
 	useEffect(() => {
 		if (itemValue) {
-			// Call to apply filter changes with 500MS debounce!
-			const applyFilterChangesDebouncedTimeoutId = setTimeout(applyFilterChangesDebounced, 500);
+			// Call to apply filter changes with 600MS debounce!
+			const applyFilterChangesDebouncedTimeoutId = setTimeout(applyFilterChangesDebounced, 600);
 
 			return () => clearTimeout(applyFilterChangesDebouncedTimeoutId);
 		}

src/slices/eventSlice.ts

@@ -253,13 +253,6 @@ export const fetchEvents = createAppAsyncThunk("events/fetchEvents", async (_, {
 	const state = getState();
 	let params: ReturnType<typeof getURLParams> & { getComments?: boolean } = getURLParams(state, "events");
 
-	// Add a secondary filter to enforce order of events
-	// (Elasticsearch does not guarantee ordering)
-	params = {
-		...params,
-		sort: params.sort ? params.sort + ",uid:asc" : "uid:asc",
-	};
-
 	// Only if the notes column is enabled, fetch comment information for events
 	if (state.events.columns.find(column => column.label === "EVENTS.EVENTS.TABLE.ADMINUI_NOTES" && !column.deactivated)) {
 		params = {

src/slices/tableSlice.ts

@@ -89,7 +89,7 @@ export type SubmitRow = {
 
 export type Resource = "events" | "series" | "recordings" | "jobs" | "servers" | "services" | "users" | "groups" | "acls" | "themes"
 
-export type ReverseOptions = "ASC" | "DESC"
+export type ReverseOptions = "ASC" | "DESC" | "NONE"
 
 export type TableState = {
 	status: "uninitialized" | "loading" | "succeeded" | "failed",

src/utils/resourceUtils.ts

@@ -71,7 +71,7 @@ export const getURLParams = (
 		};
 	}
 
-	if (getTableSortingForResource(state, resource)) {
+	if (getTableDirectionForResource(state, resource) !== "NONE") {
 		params = {
 			...params,
 			sort: getTableSortingForResource(state, resource)