Add a refresh button to the Activity Log page (#3020)

* Add a refresh button to the Activity Log page

* Improve e2e tests

* Adjust refresh button width

assets/js/pages/ActivityLogPage/ActivityLogPage.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
+import { EOS_REFRESH } from 'eos-icons-react';
 
 import { map, pipe } from 'lodash/fp';
 
@@ -9,6 +10,7 @@ import { allowedActivities } from '@lib/model/activityLog';
 import { getActivityLogUsers } from '@state/selectors/activityLog';
 import { getUserProfile } from '@state/selectors/user';
 
+import Button from '@common/Button';
 import PageHeader from '@common/PageHeader';
 import ActivityLogOverview from '@common/ActivityLogOverview';
 import ComposedFilter from '@common/ComposedFilter';
@@ -127,7 +129,7 @@ function ActivityLogPage() {
       <PageHeader className="font-bold">Activity Log</PageHeader>
       <div className="bg-white rounded-lg shadow">
         <div style={{ padding: '1rem' }} />
-        <div className="flex items-center px-4 space-x-4 pb-4">
+        <div className="flex items-center px-4 space-x-2 pb-4">
           <ComposedFilter
             filters={filters}
             autoApply={false}
@@ -139,6 +141,15 @@ function ActivityLogPage() {
               setSearchParams
             )}
           />
+          <Button
+            type="primary-white"
+            className="!w-28"
+            onClick={fetchActivityLog}
+            disabled={isLoading}
+          >
+            <EOS_REFRESH className="inline-block fill-jungle-green-500" />{' '}
+            Refresh
+          </Button>
         </div>
         <ActivityLogOverview
           activityLogDetailModalOpen={activityLogDetailModalOpen}

assets/js/pages/ActivityLogPage/ActivityLogPage.test.jsx

@@ -27,6 +27,14 @@ describe('ActivityLogPage', () => {
     expect(screen.getByText('No data available')).toBeVisible();
   });
 
+  it('should render filter actions', async () => {
+    const [StatefulActivityLogPage, _] = withDefaultState(<ActivityLogPage />);
+    await act(() => renderWithRouter(StatefulActivityLogPage));
+    expect(screen.getByText('Apply')).toBeVisible();
+    expect(screen.getByText('Reset')).toBeVisible();
+    expect(screen.getByText('Refresh')).toBeVisible();
+  });
+
   it.each`
     responseStatus | responseBody
     ${200}         | ${{ dataz: [] }}

test/e2e/cypress/e2e/activity_log.cy.js

@@ -5,7 +5,7 @@ const LAST = /^>>$/;
 
 context('Activity Log page', () => {
   before(() => {
-    cy.loadScenario('healthy-27-node-SAP-cluster');
+    // cy.loadScenario('healthy-27-node-SAP-cluster');
   });
 
   describe('Navigation', () => {
@@ -129,6 +129,25 @@ context('Activity Log page', () => {
 
       cy.wait('@data').its('response.statusCode').should('eq', 200);
     });
+
+    it('should refresh content based on currently applied filters', () => {
+      const apiUrl =
+        '/api/v1/activity_log?first=20&from_date=2024-08-14T10:21:00.000Z&to_date=2024-08-13T10:21:00.000Z&type[]=login_attempt&type[]=resource_tagging';
+      const pageUrl =
+        '/activity_log?from_date=custom&from_date=2024-08-14T10%3A21%3A00.000Z&to_date=custom&to_date=2024-08-13T10%3A21%3A00.000Z&type=login_attempt&type=resource_tagging';
+
+      cy.intercept({ url: apiUrl }).as('initialDataLoad');
+
+      cy.visit(pageUrl);
+
+      cy.wait('@initialDataLoad');
+
+      cy.intercept({ url: apiUrl }).as('refreshedDataLoad');
+      cy.contains('Refresh').click();
+      cy.wait('@refreshedDataLoad');
+
+      cy.url().should('eq', `${Cypress.config().baseUrl}${pageUrl}`);
+    });
   });
 
   describe('Pagination', () => {