Clear cursorPage on the Context level

Signed-off-by: Camila Belo <camilaibs@gmail.com>
Signed-off-by: Eric Peterson <ericpeterson@spotify.com>

plugins/search/src/components/SearchBarNext/SearchBarNext.tsx

@@ -37,7 +37,7 @@ type Props = {
 
 export const SearchBarNext = ({ debounceTime = 200 }: Props) => {
   const classes = useStyles();
-  const { term, setTerm, setPageCursor } = useSearch();
+  const { term, setTerm } = useSearch();
   const [value, setValue] = useState<string>(term);
 
   useDebounce(
@@ -55,7 +55,6 @@ export const SearchBarNext = ({ debounceTime = 200 }: Props) => {
 
   const handleClearSearchBar = () => {
     setTerm('');
-    setPageCursor('');
   };
 
   return (

plugins/search/src/components/SearchContext/SearchContext.tsx

@@ -19,8 +19,9 @@ import React, {
   createContext,
   useContext,
   useState,
+  useEffect,
 } from 'react';
-import { useAsync } from 'react-use';
+import { useAsync, usePrevious } from 'react-use';
 import { useApi } from '@backstage/core';
 import { SearchResultSet } from '@backstage/search-common';
 import { searchApiRef } from '../../apis';
@@ -60,6 +61,7 @@ export const SearchContextProvider = ({
   const [filters, setFilters] = useState<JsonObject>(initialState.filters);
   const [term, setTerm] = useState<string>(initialState.term);
   const [types, setTypes] = useState<string[]>(initialState.types);
+  const prevTerm = usePrevious(term);
 
   const result = useAsync(
     () =>
@@ -72,6 +74,13 @@ export const SearchContextProvider = ({
     [term, filters, types, pageCursor],
   );
 
+  useEffect(() => {
+    // Any time a term is reset, we want to start from page 0.
+    if (term && prevTerm && term !== prevTerm) {
+      setPageCursor('');
+    }
+  }, [term, prevTerm]);
+
   const value: SearchContextValue = {
     result,
     filters,

plugins/search/src/components/SearchPageNext/SearchPageNext.tsx

@@ -48,11 +48,12 @@ export const SearchPageNext = () => {
   const query = qs.parse(location.search.substring(1), { arrayLimit: 0 }) || {};
   const filters = (query.filters as JsonObject) || {};
   const queryString = (query.query as string) || '';
+  const pageCursor = (query.pageCursor as string) || '';
 
   const initialState = {
     term: queryString || '',
     types: [],
-    pageCursor: '',
+    pageCursor,
     filters,
   };