[v17] [Web] Fix re-rendering loop in unified resources

web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.tsx

@@ -47,8 +47,6 @@ export default function DocumentNodes(props: Props) {
     params,
     setParams,
     setSort,
-    pathname,
-    replaceHistory,
     fetchStatus,
     attempt,
     createSshSession,
@@ -112,8 +110,6 @@ export default function DocumentNodes(props: Props) {
             params={params}
             setParams={setParams}
             setSort={setSort}
-            pathname={pathname}
-            replaceHistory={replaceHistory}
             onLabelClick={onLabelClick}
           />
         )}

web/packages/teleport/src/UnifiedResources/UnifiedResources.tsx

@@ -46,7 +46,6 @@ import {
 import { useNoMinWidth } from 'teleport/Main';
 import AgentButtonAdd from 'teleport/components/AgentButtonAdd';
 import { SearchResource } from 'teleport/Discover/SelectResource';
-import { encodeUrlQueryParams } from 'teleport/components/hooks/useUrlFiltering';
 import Empty, { EmptyStateInfo } from 'teleport/components/Empty';
 import { FeatureFlags } from 'teleport/types';
 import { UnifiedResource } from 'teleport/services/agents';
@@ -132,7 +131,7 @@ export function ClusterResources({
   const canCreate = teleCtx.storeUser.getTokenAccess().create;
   const [loadClusterError, setLoadClusterError] = useState('');
 
-  const { params, setParams, replaceHistory, pathname } = useUrlFiltering(
+  const { params, setParams } = useUrlFiltering(
     {
       sort: {
         fieldName: 'name',
@@ -274,22 +273,7 @@ export function ClusterResources({
             ) || <ResourceActionButton resource={resource} />,
           },
         }))}
-        setParams={newParams => {
-          setParams(newParams);
-          const isAdvancedSearch = !!newParams.query;
-          replaceHistory(
-            encodeUrlQueryParams({
-              pathname,
-              searchString: isAdvancedSearch
-                ? newParams.query
-                : newParams.search,
-              sort: newParams.sort,
-              kinds: newParams.kinds,
-              isAdvancedSearch,
-              pinnedOnly: newParams.pinnedOnly,
-            })
-          );
-        }}
+        setParams={setParams}
         Header={
           <>
             <FeatureHeader
@@ -310,12 +294,7 @@ export function ClusterResources({
               </Flex>
             </FeatureHeader>
             <Flex alignItems="center" justifyContent="space-between" mb={3}>
-              <ServersideSearchPanel
-                params={params}
-                pathname={pathname}
-                replaceHistory={replaceHistory}
-                setParams={setParams}
-              />
+              <ServersideSearchPanel params={params} setParams={setParams} />
             </Flex>
           </>
         }

web/packages/teleport/src/components/NodeList/NodeList.story.tsx

@@ -54,13 +54,11 @@ export const Default = () => {
       fetchNext={() => {}}
       fetchPrev={() => {}}
       fetchStatus={''}
-      pathname={''}
       onLabelClick={() => {}}
       onLoginMenuOpen={() => []}
       onLoginSelect={() => {}}
       pageIndicators={{ from: 1, to: 2, totalCount: 2 }}
       setSort={() => {}}
-      replaceHistory={() => {}}
     />
   );
 };

web/packages/teleport/src/components/NodeList/NodeList.tsx

@@ -42,8 +42,6 @@ export function NodeList(props: {
   params: ResourceFilter;
   setParams: (params: ResourceFilter) => void;
   setSort: (sort: SortType) => void;
-  pathname: string;
-  replaceHistory: (path: string) => void;
   onLabelClick: (label: ResourceLabel) => void;
   pageIndicators: PageIndicators;
 }) {
@@ -58,8 +56,6 @@ export function NodeList(props: {
     params,
     setParams,
     setSort,
-    pathname,
-    replaceHistory,
     onLabelClick,
     pageIndicators,
   } = props;
@@ -108,8 +104,6 @@ export function NodeList(props: {
             pageIndicators={pageIndicators}
             params={params}
             setParams={setParams}
-            pathname={pathname}
-            replaceHistory={replaceHistory}
             disabled={fetchStatus === 'loading'}
           />
         ),

web/packages/teleport/src/components/ServersideSearchPanel/useServerSideSearchPanel.ts

@@ -20,20 +20,14 @@ import { useEffect, useState } from 'react';
 
 import { ResourceFilter } from 'teleport/services/agents';
 
-import {
-  decodeUrlQueryParam,
-  encodeUrlQueryParams,
-} from 'teleport/components/hooks/useUrlFiltering';
+import { decodeUrlQueryParam } from 'teleport/components/hooks/useUrlFiltering';
 
 export default function useServersideSearchPanel({
-  pathname,
   params,
   setParams,
-  replaceHistory,
 }: HookProps) {
   const [searchString, setSearchString] = useState('');
   const [isAdvancedSearch, setIsAdvancedSearch] = useState(false);
-  const [isInitialLoad, setIsInitialLoad] = useState(true);
 
   function onSubmitSearch(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
@@ -54,16 +48,6 @@ export default function useServersideSearchPanel({
         search: searchString,
       });
     }
-    replaceHistory(
-      encodeUrlQueryParams({
-        pathname,
-        searchString,
-        sort: params.sort,
-        kinds: params.kinds,
-        isAdvancedSearch,
-        pinnedOnly: params.pinnedOnly,
-      })
-    );
   }
 
   // Populate search bar with existing query
@@ -77,13 +61,6 @@ export default function useServersideSearchPanel({
     }
   }, [params.query, params.search]);
 
-  useEffect(() => {
-    if (!isInitialLoad) {
-      submitSearch();
-    }
-    setIsInitialLoad(false);
-  }, [params.sort]);
-
   return {
     searchString,
     setSearchString,
@@ -94,8 +71,6 @@ export default function useServersideSearchPanel({
 }
 
 export type HookProps = {
-  pathname: string;
-  replaceHistory: (path: string) => void;
   params: ResourceFilter;
   setParams: (params: ResourceFilter) => void;
 };

web/packages/teleport/src/components/hooks/useUrlFiltering/useUrlFiltering.ts

@@ -85,7 +85,7 @@ export function useUrlFiltering(
         searchString: newParams.search || newParams.query,
         sort: newParams.sort,
         kinds: newParams.kinds,
-        isAdvancedSearch: !!params.query,
+        isAdvancedSearch: !!newParams.query,
         pinnedOnly: newParams.pinnedOnly,
       })
     );