[Discover][Context] Fix selecting another surrounding document (#117567…

…) (#117997)

Co-authored-by: Matthias Wilhelm <matthias.wilhelm@elastic.co>

src/plugins/discover/public/application/apps/context/context_app.tsx

@@ -50,21 +50,29 @@ export const ContextApp = ({ indexPattern, anchorId }: ContextAppProps) => {
   /**
    * Context fetched state
    */
-  const { fetchedState, fetchContextRows, fetchAllRows, fetchSurroundingRows } = useContextAppFetch(
-    {
+  const { fetchedState, fetchContextRows, fetchAllRows, fetchSurroundingRows, resetFetchedState } =
+    useContextAppFetch({
       anchorId,
       indexPattern,
       appState,
       useNewFieldsApi,
       services,
+    });
+  /**
+   * Reset state when anchor changes
+   */
+  useEffect(() => {
+    if (prevAppState.current) {
+      prevAppState.current = undefined;
+      resetFetchedState();
     }
-  );
+  }, [anchorId, resetFetchedState]);
 
   /**
    * Fetch docs on ui changes
    */
   useEffect(() => {
-    if (!prevAppState.current || fetchedState.anchor._id !== anchorId) {
+    if (!prevAppState.current) {
       fetchAllRows();
     } else if (prevAppState.current.predecessorCount !== appState.predecessorCount) {
       fetchSurroundingRows(SurrDocType.PREDECESSORS);

src/plugins/discover/public/application/apps/context/utils/use_context_app_fetch.tsx

@@ -160,15 +160,19 @@ export function useContextAppFetch({
     [fetchSurroundingRows]
   );
 
-  const fetchAllRows = useCallback(
-    () => fetchAnchorRow().then((anchor) => anchor && fetchContextRows(anchor)),
-    [fetchAnchorRow, fetchContextRows]
-  );
+  const fetchAllRows = useCallback(() => {
+    fetchAnchorRow().then((anchor) => anchor && fetchContextRows(anchor));
+  }, [fetchAnchorRow, fetchContextRows]);
+
+  const resetFetchedState = useCallback(() => {
+    setFetchedState(getInitialContextQueryState());
+  }, []);
 
   return {
     fetchedState,
     fetchAllRows,
     fetchContextRows,
     fetchSurroundingRows,
+    resetFetchedState,
   };
 }

test/functional/apps/context/_discover_navigation.ts

@@ -55,20 +55,39 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await kibanaServer.uiSettings.replace({});
     });
 
-    it('should open the context view with the selected document as anchor', async () => {
+    it('should open the context view with the selected document as anchor and allows selecting next anchor', async () => {
+      /**
+       * Helper function to get the first timestamp of the document table
+       * @param isAnchorRow - determins if just the anchor row of context should be selected
+       */
+      const getTimestamp = async (isAnchorRow: boolean = false) => {
+        const contextFields = await docTable.getFields({ isAnchorRow });
+        return contextFields[0][0];
+      };
+      // get the timestamp of the first row
+
+      const firstDiscoverTimestamp = await getTimestamp();
+
       // check the anchor timestamp in the context view
       await retry.waitFor('selected document timestamp matches anchor timestamp ', async () => {
-        // get the timestamp of the first row
-        const discoverFields = await docTable.getFields();
-        const firstTimestamp = discoverFields[0][0];
-
         // navigate to the context view
         await docTable.clickRowToggle({ rowIndex: 0 });
         const rowActions = await docTable.getRowActions({ rowIndex: 0 });
         await rowActions[0].click();
-        const contextFields = await docTable.getFields({ isAnchorRow: true });
-        const anchorTimestamp = contextFields[0][0];
-        return anchorTimestamp === firstTimestamp;
+        await PageObjects.context.waitUntilContextLoadingHasFinished();
+        const anchorTimestamp = await getTimestamp(true);
+        return anchorTimestamp === firstDiscoverTimestamp;
+      });
+
+      await retry.waitFor('next anchor timestamp matches previous anchor timestamp', async () => {
+        // get the timestamp of the first row
+        const firstContextTimestamp = await getTimestamp(false);
+        await docTable.clickRowToggle({ rowIndex: 0 });
+        const rowActions = await docTable.getRowActions({ rowIndex: 0 });
+        await rowActions[0].click();
+        await PageObjects.context.waitUntilContextLoadingHasFinished();
+        const anchorTimestamp = await getTimestamp(true);
+        return anchorTimestamp === firstContextTimestamp;
       });
     });