From 3ee10b229289960d7e8bad457b7a21f9012e9795 Mon Sep 17 00:00:00 2001
From: Nelson Kopliku <nelson.kopliku@suse.com>
Date: Fri, 26 Jul 2024 14:31:16 +0200
Subject: [PATCH] Make fronted more resilient on unexpected successful api
 response

---
 assets/js/pages/ActivityLogPage/ActivityLogPage.jsx |  2 +-
 .../pages/ActivityLogPage/ActivityLogPage.test.jsx  | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/assets/js/pages/ActivityLogPage/ActivityLogPage.jsx b/assets/js/pages/ActivityLogPage/ActivityLogPage.jsx
index ddacabdf84..9129c4dd3c 100644
--- a/assets/js/pages/ActivityLogPage/ActivityLogPage.jsx
+++ b/assets/js/pages/ActivityLogPage/ActivityLogPage.jsx
@@ -14,7 +14,7 @@ function ActivityLogPage() {
   useEffect(() => {
     getActivityLog()
       .then((response) => {
-        setActivityLog(response.data);
+        setActivityLog(response.data?.data ?? []);
       })
       .catch(() => setActivityLog([]))
       .finally(() => {
diff --git a/assets/js/pages/ActivityLogPage/ActivityLogPage.test.jsx b/assets/js/pages/ActivityLogPage/ActivityLogPage.test.jsx
index 28930cdcb0..136db3d95c 100644
--- a/assets/js/pages/ActivityLogPage/ActivityLogPage.test.jsx
+++ b/assets/js/pages/ActivityLogPage/ActivityLogPage.test.jsx
@@ -14,19 +14,26 @@ const axiosMock = new MockAdapter(networkClient);
 
 describe('ActivityLogPage', () => {
   it('should render table without data', async () => {
-    axiosMock.onGet('/api/v1/activity_log').reply(200, []);
+    axiosMock.onGet('/api/v1/activity_log').reply(200, { data: [] });
     await act(async () => renderWithRouter(<ActivityLogPage />));
     expect(screen.getByText('No data available')).toBeVisible();
   });
 
   it.each`
     responseStatus | responseBody
+    ${200}         | ${{ dataz: [] }}
+    ${200}         | ${[]}
+    ${200}         | ${{}}
+    ${200}         | ${{ foo: [] }}
+    ${200}         | ${''}
+    ${200}         | ${null}
     ${404}         | ${[]}
+    ${404}         | ${{ data: [] }}
     ${500}         | ${{ error: 'Internal Server Error' }}
     ${503}         | ${null}
     ${504}         | ${''}
   `(
-    'should render empty activity log on error `$responseStatus`',
+    'should render empty activity log on responseStatus: `$responseStatus` and responseBody: `$responseBody`',
     async ({ responseStatus, responseBody }) => {
       axiosMock
         .onGet('/api/v1/activity_log')
@@ -41,7 +48,7 @@ describe('ActivityLogPage', () => {
   it('should render tracked activity log', async () => {
     axiosMock
       .onGet('/api/v1/activity_log')
-      .reply(200, activityLogEntryFactory.buildList(5));
+      .reply(200, { data: activityLogEntryFactory.buildList(5) });
 
     const { container } = await act(() =>
       renderWithRouter(<ActivityLogPage />)