fix 2 frontend bugs

* UI flash and lose search field focus when updating search or platform filter * Query action buttons (manage, add query) hidden when no filtered queries but still non-filtered queries
fleetdm · Nov 1, 2024 · bdd901f · bdd901f
1 parent 8bb1180
commit bdd901f
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 44 deletions.
diff --git a/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx b/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx
@@ -454,7 +454,7 @@ const ManagePolicyPage = ({
         queryParams: { ...queryParams, ...newQueryParams },
       });
 
-      router?.replace(locationPath);
+      router?.push(locationPath);
     },
     [
       isRouteOk,

diff --git a/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx b/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx
@@ -79,7 +79,6 @@ const ManageQueriesPage = ({
   router,
   location,
 }: IManageQueriesPageProps): JSX.Element => {
-  const queryParams = location.query;
   const {
     isGlobalAdmin,
     isGlobalMaintainer,
@@ -132,6 +131,7 @@ const ManageQueriesPage = ({
     data: queriesResponse,
     error: queriesError,
     isFetching: isFetchingQueries,
+    isLoading: isLoadingQueries,
     refetch: refetchQueries,
   } = useQuery<
     IQueriesResponse,
@@ -273,7 +273,7 @@ const ManageQueriesPage = ({
   };
 
   const renderQueriesTable = () => {
-    if (isFetchingQueries) {
+    if (isLoadingQueries) {
       return <Spinner />;
     }
     if (queriesError) {
@@ -292,7 +292,7 @@ const ManageQueriesPage = ({
         isAnyTeamObserverPlus={isAnyTeamObserverPlus || false}
         // changes in table state are propagated to the API call on this page via this router pushing to the URL
         router={router}
-        queryParams={queryParams}
+        queryParams={location.query}
         currentTeamId={teamIdForApi}
         // on PoliciesTable, this is passed down and set as TableContainer.defaultPageIndex - TBD if necessary?
         // page={page}
@@ -386,6 +386,13 @@ const ManageQueriesPage = ({
     isTeamMaintainer ||
     isObserverPlus; // isObserverPlus checks global and selected team
 
+  const hideQueryActions =
+    // there are no filters and no returned queries, indicating there are no global/team queries at all
+    !(!!location.query.query || !!location.query.compatible_platform) &&
+    !queriesResponse?.count &&
+    // the user has permission
+    (!isOnlyObserver || isObserverPlus || isAnyTeamObserverPlus);
+
   return (
     <MainContent className={baseClass}>
       <div className={`${baseClass}__wrapper`}>
@@ -395,7 +402,8 @@ const ManageQueriesPage = ({
               <div className={`${baseClass}__title`}>{renderHeader()}</div>
             </div>
           </div>
-          {!!enhancedQueries?.length && (
+
+          {!hideQueryActions && (
             <div className={`${baseClass}__action-button-container`}>
               {(isGlobalAdmin || isTeamAdmin) && !onlyInheritedQueries && (
                 <Button

diff --git a/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx b/frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx
@@ -16,6 +16,7 @@ import CustomLink from "components/CustomLink";
 import EmptyTable from "components/EmptyTable";
 // @ts-ignore
 import Dropdown from "components/forms/fields/Dropdown";
+
 import generateColumnConfigs from "./QueriesTableConfig";
 
 const baseClass = "queries-table";
@@ -314,45 +315,44 @@ const QueriesTable = ({
   //     ( as IActionButtonProps),
   //   [onDeleteQueryClick]
   // );
-
-  return columnConfigs && !isLoading ? (
-    <div className={`${baseClass}`}>
-      <TableContainer
-        resultsTitle="queries"
-        columnConfigs={columnConfigs}
-        data={queries}
-        // won't ever actually be loading, see render condition above
-        isLoading={isLoading}
-        defaultSortHeader={sortHeader || DEFAULT_SORT_HEADER}
-        defaultSortDirection={sortDirection || DEFAULT_SORT_DIRECTION}
-        defaultSearchQuery={trimmedSearchQuery}
-        defaultPageIndex={page}
-        showMarkAllPages={false}
-        isAllPagesSelected={false}
-        primarySelectAction={{
-          name: "delete query",
-          buttonText: "Delete",
-          iconSvg: "trash",
-          variant: "text-icon",
-          onActionButtonClick: onDeleteQueryClick,
-        }}
-        emptyComponent={emptyComponent}
-        renderCount={() => (
-          // TODO - is more logic necessary here? Can we omit this?
-          <TableCount name="queries" count={totalQueriesCount} />
-        )}
-        inputPlaceHolder="Search by name"
-        onQueryChange={onQueryChange}
-        searchable={searchable}
-        // TODO - will likely need to implement this somehow. Looks messy for policies, so avoid if
-        // not necessary.
-        // resetPageIndex=
-        customControl={searchable ? renderPlatformDropdown : undefined}
-        selectedDropdownFilter={curCompatiblePlatformFilter}
-      />
-    </div>
-  ) : (
-    <></>
+  return (
+    columnConfigs && (
+      <div className={`${baseClass}`}>
+        <TableContainer
+          resultsTitle="queries"
+          columnConfigs={columnConfigs}
+          data={queries}
+          // won't ever actually be loading, see render condition above
+          isLoading={isLoading}
+          defaultSortHeader={sortHeader || DEFAULT_SORT_HEADER}
+          defaultSortDirection={sortDirection || DEFAULT_SORT_DIRECTION}
+          defaultSearchQuery={trimmedSearchQuery}
+          defaultPageIndex={page}
+          showMarkAllPages={false}
+          isAllPagesSelected={false}
+          primarySelectAction={{
+            name: "delete query",
+            buttonText: "Delete",
+            iconSvg: "trash",
+            variant: "text-icon",
+            onActionButtonClick: onDeleteQueryClick,
+          }}
+          emptyComponent={emptyComponent}
+          renderCount={() => (
+            // TODO - is more logic necessary here? Can we omit this?
+            <TableCount name="queries" count={totalQueriesCount} />
+          )}
+          inputPlaceHolder="Search by name"
+          onQueryChange={onQueryChange}
+          searchable={searchable}
+          // TODO - will likely need to implement this somehow. Looks messy for policies, so avoid if
+          // not necessary.
+          // resetPageIndex=
+          customControl={searchable ? renderPlatformDropdown : undefined}
+          selectedDropdownFilter={curCompatiblePlatformFilter}
+        />
+      </div>
+    )
   );
 };