From 24aa9df4cc2b822e56a4fca40c307c7f22aba25b Mon Sep 17 00:00:00 2001
From: Lin Wang <wonglam@amazon.com>
Date: Wed, 2 Aug 2023 18:01:05 +0800
Subject: [PATCH] Fix no model show up when search a model (#238)

* fix: reset to page 1 after name or state search

Signed-off-by: Lin Wang <wonglam@amazon.com>

* refactor: remove unnecessary act call

Signed-off-by: Lin Wang <wonglam@amazon.com>

---------

Signed-off-by: Lin Wang <wonglam@amazon.com>
---
 .../monitoring/tests/use_monitoring.test.ts   | 91 +++++++++++++------
 .../components/monitoring/use_monitoring.ts   |  2 +
 2 files changed, 66 insertions(+), 27 deletions(-)

diff --git a/public/components/monitoring/tests/use_monitoring.test.ts b/public/components/monitoring/tests/use_monitoring.test.ts
index 99168b35..8c3e1760 100644
--- a/public/components/monitoring/tests/use_monitoring.test.ts
+++ b/public/components/monitoring/tests/use_monitoring.test.ts
@@ -18,7 +18,7 @@ const mockEmptyRecords = () =>
 
 describe('useMonitoring', () => {
   beforeEach(() => {
-    jest.spyOn(Model.prototype, 'search').mockResolvedValueOnce({
+    jest.spyOn(Model.prototype, 'search').mockResolvedValue({
       data: [
         {
           id: 'model-1-id',
@@ -44,9 +44,7 @@ describe('useMonitoring', () => {
 
     await waitFor(() => result.current.pageStatus === 'normal');
 
-    act(() => {
-      result.current.searchByNameOrId('foo');
-    });
+    result.current.searchByNameOrId('foo');
     await waitFor(() =>
       expect(Model.prototype.search).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -56,9 +54,7 @@ describe('useMonitoring', () => {
       )
     );
 
-    act(() => {
-      result.current.searchByStatus(['responding']);
-    });
+    result.current.searchByStatus(['responding']);
     await waitFor(() =>
       expect(Model.prototype.search).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -68,13 +64,10 @@ describe('useMonitoring', () => {
       )
     );
 
-    act(() => {
-      result.current.resetSearch();
-    });
+    result.current.resetSearch();
     await waitFor(() => result.current.pageStatus === 'normal');
-    act(() => {
-      result.current.searchByStatus(['partial-responding']);
-    });
+
+    result.current.searchByStatus(['partial-responding']);
     await waitFor(() =>
       expect(Model.prototype.search).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -97,11 +90,9 @@ describe('useMonitoring', () => {
       )
     );
 
-    act(() => {
-      result.current.handleTableChange({
-        sort: { field: 'name', direction: 'desc' },
-        pagination: { currentPage: 2, pageSize: 10 },
-      });
+    result.current.handleTableChange({
+      sort: { field: 'name', direction: 'desc' },
+      pagination: { currentPage: 2, pageSize: 10 },
     });
     await waitFor(() =>
       expect(Model.prototype.search).toHaveBeenCalledWith(
@@ -119,9 +110,7 @@ describe('useMonitoring', () => {
 
     await waitFor(() => expect(Model.prototype.search).toHaveBeenCalledTimes(1));
 
-    act(() => {
-      result.current.reload();
-    });
+    result.current.reload();
     await waitFor(() => expect(Model.prototype.search).toHaveBeenCalledTimes(2));
   });
 
@@ -172,6 +161,58 @@ describe('useMonitoring', () => {
 
     searchMock.mockRestore();
   });
+
+  it('should call searchByNameOrId with from 0 after page changed', async () => {
+    const { result, waitFor } = renderHook(() => useMonitoring());
+
+    result.current.handleTableChange({
+      pagination: {
+        currentPage: 2,
+        pageSize: 15,
+      },
+    });
+
+    await waitFor(() => {
+      expect(result.current.pagination?.currentPage).toBe(2);
+    });
+
+    result.current.searchByNameOrId('foo');
+
+    await waitFor(() => {
+      expect(Model.prototype.search).toHaveBeenCalledTimes(3);
+      expect(Model.prototype.search).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          from: 0,
+        })
+      );
+    });
+  });
+
+  it('should call searchByStatus with from 0 after page changed', async () => {
+    const { result, waitFor } = renderHook(() => useMonitoring());
+
+    result.current.handleTableChange({
+      pagination: {
+        currentPage: 2,
+        pageSize: 15,
+      },
+    });
+
+    await waitFor(() => {
+      expect(result.current.pagination?.currentPage).toBe(2);
+    });
+
+    result.current.searchByStatus(['responding']);
+
+    await waitFor(() => {
+      expect(Model.prototype.search).toHaveBeenCalledTimes(3);
+      expect(Model.prototype.search).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          from: 0,
+        })
+      );
+    });
+  });
 });
 
 describe('useMonitoring.pageStatus', () => {
@@ -217,9 +258,7 @@ describe('useMonitoring.pageStatus', () => {
 
     // Mock search function to return empty result
     mockEmptyRecords();
-    act(() => {
-      result.current.searchByNameOrId('foo');
-    });
+    result.current.searchByNameOrId('foo');
     await waitFor(() => expect(result.current.pageStatus).toBe('reset-filter'));
   });
 
@@ -231,9 +270,7 @@ describe('useMonitoring.pageStatus', () => {
 
     // assume result is empty
     mockEmptyRecords();
-    act(() => {
-      result.current.searchByStatus(['responding']);
-    });
+    result.current.searchByStatus(['responding']);
     await waitFor(() => expect(result.current.pageStatus).toBe('reset-filter'));
   });
 
diff --git a/public/components/monitoring/use_monitoring.ts b/public/components/monitoring/use_monitoring.ts
index 3ed509d1..027f86a4 100644
--- a/public/components/monitoring/use_monitoring.ts
+++ b/public/components/monitoring/use_monitoring.ts
@@ -122,6 +122,7 @@ export const useMonitoring = () => {
     setParams((previousValue) => ({
       ...previousValue,
       nameOrId,
+      currentPage: 1,
     }));
   }, []);
 
@@ -129,6 +130,7 @@ export const useMonitoring = () => {
     setParams((previousValue) => ({
       ...previousValue,
       status,
+      currentPage: 1,
     }));
   }, []);