Stick to current query/cursor params after token refresh

src/components/containers/EventsBrowser.tsx

@@ -52,6 +52,8 @@ export type EventBrowserProps = {
     fields?: boolean;
     metadata?: boolean;
   };
+  cursor?: string;
+  searchText?: string;
 };
 
 interface EventBrowserState {
@@ -155,41 +157,34 @@ class EventsBrowser extends React.Component<EventBrowserProps, EventBrowserState
     return this.currentPage() * this.state.resultsPerPage;
   }
 
-  componentWillMount() {
-    // Pass the audit log token and the preferred host (which will be stored in the state)
-
+  componentDidMount() {
     this.props.createSession(this.props.auditLogToken, this.props.host);
   }
 
+  componentDidUpdate(prevProps: Readonly<EventBrowserProps>) {
+    if (this.props.session.token !== prevProps.session.token) {
+      this.submitQuery(this.props.searchText ?? "crud:c,u,d", this.props.cursor ?? "");
+    }
+
+    if (this.props.auditLogToken !== prevProps.auditLogToken) {
+      this.props.createSession(this.props.auditLogToken, this.props.host);
+    }
+  }
+
   handleRefreshToken() {
     if (typeof this.props.refreshToken === "function") {
       this.props.refreshToken();
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.currentResults !== nextProps.currentResults) {
       this.onEventsChange(this.props.currentResults, nextProps.currentResults);
     }
   }
 
-  componentWillUpdate(nextProps) {
-    // If we have a new token, we need to create a new session
-
-    if (this.props.auditLogToken !== nextProps.auditLogToken) {
-      this.props.createSession(nextProps.auditLogToken, this.props.host);
-    }
-    // If we have a new session, we need to request a new event search
-
-    if (this.props.session.token !== nextProps.session.token) {
-      // use same initial query that the search button would use
-      this.submitQuery("crud:c,u,d", "");
-    }
-  }
-
   componentWillUnmount() {
     // Clearing the store
-
     this.props.clearSession();
   }
 
@@ -203,6 +198,7 @@ class EventsBrowser extends React.Component<EventBrowserProps, EventBrowserState
   }
 
   submitQuery(query, cursor) {
+    // console.log(`submitQuery called with query:${query}, cursor: ${cursor}`);
     const queryObj = {
       search_text: query,
       cursor,
@@ -622,6 +618,8 @@ export default connect(
     currentResults: state.data.eventsData.latestServerResults,
     dataLoading: state.ui.loadingData,
     tableHeaderItems: state.ui.eventsUiData.eventTableHeaderItems,
+    cursor: state.ui.eventsUiData.cursor,
+    searchText: state.ui.eventsUiData.searchText,
   }),
   (dispatch: any, ownProps: EventBrowserProps) => ({
     requestEventSearch(query, handleRefreshToken) {

src/components/modals/AccessTokensModal.jsx

@@ -27,7 +27,7 @@ class AccessTokensModal extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.fetchEitapiTokensList();
   }
 

src/components/modals/ExportEventsModal.jsx

@@ -26,7 +26,7 @@ class ExportEventsModal extends React.Component {
     }
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.fetchSavedExports();
   }
 

src/components/views/SearchForm.jsx

@@ -24,11 +24,31 @@ function getDateFormatString(lang = "default") {
     .join("");
 }
 
+const initialState = {
+  query: "",
+  receivedStartDate: null,
+  receivedEndDate: null,
+  searchQuery: "",
+  crudFiltersArray: ["c", "u", "d"],
+  crudFilters: {
+    cChecked: true,
+    rChecked: false,
+    uChecked: true,
+    dChecked: true,
+  },
+  isDefault: true,
+};
+
 export default class SearchForm extends React.Component {
   constructor(props) {
     super(props);
     autoBind(this);
     this.dateFormatString = getDateFormatString();
+    this.state = initialState;
+  }
+
+  setInitialState() {
+    this.setState(initialState);
   }
 
   onChange = (e) => {
@@ -39,7 +59,7 @@ export default class SearchForm extends React.Component {
   };
 
   handleCrudFilterChange(field, e) {
-    let newCrudFilters = this.state.crudFiltersArray;
+    let newCrudFilters = [...this.state.crudFiltersArray];
     if (!newCrudFilters.includes(field)) {
       newCrudFilters.push(field);
     } else {
@@ -72,25 +92,7 @@ export default class SearchForm extends React.Component {
     });
   }
 
-  setInitialState() {
-    this.setState({
-      query: "",
-      receivedStartDate: null,
-      receivedEndDate: null,
-      searchQuery: "",
-      crudFiltersArray: ["c", "u", "d"],
-      crudFilters: {
-        cChecked: true,
-        rChecked: false,
-        uChecked: true,
-        dChecked: true,
-      },
-      isDefault: true,
-    });
-  }
-
   componentDidMount() {
-    this.setInitialState();
     this.props.hasFilters(this.state);
   }
 
@@ -144,7 +146,7 @@ export default class SearchForm extends React.Component {
               <input
                 type="text"
                 data-testid={`search-events`}
-                defaultValue={this.props.text}
+                value={this.state.searchQuery}
                 className="Input SearchEvents"
                 onChange={this.onChange}
                 placeholder="Search events"

src/redux/data/events/thunks.js

@@ -1,6 +1,7 @@
 import _ from "lodash";
 import { receiveEventList } from "./actions";
 import { loadingData } from "../../ui/actions";
+import { storeCursor, storeSearchText } from "../../ui/events/actions";
 
 function getObjFromKeyValArray(arr) {
   return arr?.reduce((acc, cur) => ({ ...acc, [cur.key]: cur.value }), {});
@@ -113,7 +114,10 @@ export function requestEventSearch(query, refreshToken, toggleDisplay) {
       dispatch(receiveEventList(query, data.data.search.totalCount, events, cursor));
       dispatch(loadingData("eventFetch", false));
     } else {
+      // token expired store cursor and query,then refresh token
       dispatch(loadingData("eventFetch", false));
+      dispatch(storeCursor(query.cursor));
+      dispatch(storeSearchText(query.search_text));
       if (refreshToken && typeof refreshToken === "function") {
         refreshToken();
       }

src/redux/index.js

@@ -19,10 +19,13 @@ const rootReducer = (state, action) => {
 
 // Global store instance
 export function configStore() {
-  const hasExtension = window.devToolsExtension;
+  const middleware = [thunk];
+  let enhancers = [applyMiddleware(...middleware)];
 
-  return createStore(
-    rootReducer,
-    compose(applyMiddleware(thunk), hasExtension ? window.devToolsExtension() : (f) => f)
-  );
+  // Add Redux DevTools extension only if running in a browser environment
+  if (typeof window !== "undefined" && window.__REDUX_DEVTOOLS_EXTENSION__) {
+    enhancers.push(window.__REDUX_DEVTOOLS_EXTENSION__());
+  }
+
+  return createStore(rootReducer, compose(...enhancers));
 }

src/redux/ui/actions.js

@@ -1,20 +1,7 @@
 export const constants = {
-  DISPLAY_MODAL: "DISPLAY_MODAL",
   LOADING_DATA: "LOADING_DATA",
-  TIME_FILTER: "TIME_FILTER",
-  CRUD_FILTER: "CRUD_FILTER",
 };
 
-export function displayModal(key, display) {
-  return {
-    type: constants.DISPLAY_MODAL,
-    payload: {
-      key,
-      display,
-    },
-  };
-}
-
 export function loadingData(key, isLoading) {
   return {
     type: constants.LOADING_DATA,
@@ -24,21 +11,3 @@ export function loadingData(key, isLoading) {
     },
   };
 }
-
-export function timeFilter(timerange) {
-  return {
-    type: constants.TIME_FILTER,
-    payload: {
-      timerange,
-    },
-  };
-}
-
-export function crudFilter(crud) {
-  return {
-    type: constants.CRUD_FILTER,
-    payload: {
-      crud,
-    },
-  };
-}

src/redux/ui/events/actions.js

@@ -0,0 +1,22 @@
+export const constants = {
+  STORE_CURSOR: "STORE_CURSOR",
+  STORE_SEARCH_TEXT: "STORE_SEARCH_TEXT",
+};
+
+export function storeCursor(cursor) {
+  return {
+    type: constants.STORE_CURSOR,
+    payload: {
+      cursor,
+    },
+  };
+}
+
+export function storeSearchText(searchText) {
+  return {
+    type: constants.STORE_SEARCH_TEXT,
+    payload: {
+      searchText,
+    },
+  };
+}

src/redux/ui/events/reducer.js

@@ -1,3 +1,5 @@
+import { constants } from "./actions";
+
 const initialState = {
   eventTableHeaderItems: [
     {
@@ -14,10 +16,17 @@ const initialState = {
       field: "source_ip",
     },
   ],
+  // keep cursor in state to refetch the just requested page that failed due to token expiry
+  cursor: "",
+  searchText: "crud:c,u,d",
 };
 
 export default (state = initialState, action) => {
   switch (action.type) {
+    case constants.STORE_CURSOR:
+      return { ...state, cursor: action.payload.cursor };
+    case constants.STORE_SEARCH_TEXT:
+      return { ...state, searchText: action.payload.searchText };
     default:
       return state;
   }

src/redux/ui/index.js

@@ -1,10 +1,8 @@
 import { combineReducers } from "redux";
-import { modalData, loadingData, filterData } from "./reducer";
+import { loadingData } from "./reducer";
 import eventsUiData from "./events/reducer";
 
 export default combineReducers({
-  modalData,
   loadingData,
-  filterData,
   eventsUiData,
 });

src/redux/ui/reducer.js

@@ -1,15 +1,5 @@
-import dayjs from "dayjs";
 import { constants } from "./actions";
 
-const modalState = {};
-
-export function modalData(state = modalState, action = {}) {
-  switch (action.type) {
-    default:
-      return state;
-  }
-}
-
 const loadingState = {
   eventFetchLoading: false,
   exportCSVLoading: false,
@@ -27,26 +17,3 @@ export function loadingData(state = loadingState, action = {}) {
       return state;
   }
 }
-
-const filterState = {
-  timerange: {
-    start: dayjs().startOf("day").valueOf(),
-    end: dayjs().endOf("day").valueOf(),
-  },
-  crud: "cud",
-};
-
-export function filterData(state = filterState, action = {}) {
-  switch (action.type) {
-    case constants.TIME_FILTER:
-      return Object.assign({}, state, {
-        timerange: action.payload.timerange,
-      });
-    case constants.CRUD_FILTER:
-      return Object.assign({}, state, {
-        crud: action.payload.crud,
-      });
-    default:
-      return state;
-  }
-}