From dc3edfb3c787a02fafca970c8b16069c02aa1a4b Mon Sep 17 00:00:00 2001 From: Scott Gress Date: Wed, 16 Apr 2025 08:10:21 -0700 Subject: [PATCH] Fx query page clearing selection after load (#28228) # Checklist for submitter - [X] Changes file added for user-visible changes in `changes/`, `orbit/changes/` or `ee/fleetd-chrome/changes`. See [Changes files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/Committing-Changes.md#changes-files) for more information. # Details This PR fixes an issue where any selection made in the table on the Manage Queries page would be cleared a few seconds after the page loaded. The issue was due to a re-render happening after the `staleTime` period elapsed, coupled with an array that was being re-created on every render. --- changes/27475-fix-query-page-selection-clear | 1 + .../queries/ManageQueriesPage/ManageQueriesPage.tsx | 13 +++++++++++-- 2 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 changes/27475-fix-query-page-selection-clear diff --git a/changes/27475-fix-query-page-selection-clear b/changes/27475-fix-query-page-selection-clear new file mode 100644 index 0000000000..a950b929c1 --- /dev/null +++ b/changes/27475-fix-query-page-selection-clear @@ -0,0 +1 @@ +- Fixed an issue where selections made on the Queries page were cleared a few seconds after page load. \ No newline at end of file diff --git a/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx b/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx index a407596d87..2c261ded04 100644 --- a/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx +++ b/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx @@ -1,4 +1,10 @@ -import React, { useContext, useCallback, useEffect, useState } from "react"; +import React, { + useContext, + useCallback, + useEffect, + useMemo, + useState, +} from "react"; import { InjectedRouter } from "react-router"; import { useQuery } from "react-query"; import { pick } from "lodash"; @@ -162,7 +168,10 @@ const ManageQueriesPage = ({ } ); - const enhancedQueries = queriesResponse?.queries.map(enhanceQuery); + // Enhance the queries from the response when they are changed. + const enhancedQueries = useMemo(() => { + return queriesResponse?.queries.map(enhanceQuery) || []; + }, [queriesResponse]); const queriesAvailableToAutomate = (teamIdForApi !== API_ALL_TEAMS_ID