set activePage to 1 when query is changed

packages/app/src/components/Admin/AuditLog/SelectQueryDropdown.tsx

@@ -6,23 +6,23 @@ import { useTranslation } from 'react-i18next';
 type Props = {
   dropdownLabel: string
   dropdownItemList: string[]
-  setQueryHandler: (query: string | undefined) => void
+  onSetQuery: (query: string | undefined) => void
 }
 
 export const SelectQueryDropdown: FC<Props> = (props: Props) => {
   const { t } = useTranslation();
 
-  const { dropdownLabel, dropdownItemList, setQueryHandler } = props;
+  const { dropdownLabel, dropdownItemList, onSetQuery } = props;
 
   const [selectedItem, setSelectedItem] = useState<string | undefined>(undefined);
 
   const onClickItemButton = useCallback((item) => {
-    if (setQueryHandler == null) {
+    if (onSetQuery == null) {
       return;
     }
-    setQueryHandler(item);
+    onSetQuery(item);
     setSelectedItem(item);
-  }, [setQueryHandler, setSelectedItem]);
+  }, [onSetQuery, setSelectedItem]);
 
   return (
     <div className="btn-group mr-2 mb-3">

packages/app/src/components/Admin/AuditLogManagement.tsx

@@ -33,6 +33,11 @@ export const AuditLogManagement: FC = () => {
     setActivePage(selectedPageNum);
   }, []);
 
+  const setActionQueryHandler = useCallback((query) => {
+    setActionQuery(query);
+    setActivePage(1);
+  }, []);
+
   return (
     <div data-testid="admin-auditlog">
       <h2>{t('AuditLog')}</h2>
@@ -40,7 +45,7 @@ export const AuditLogManagement: FC = () => {
       <SelectQueryDropdown
         dropdownLabel="select_action"
         dropdownItemList={AllSupportedActionType}
-        setQueryHandler={setActionQuery}
+        onSetQuery={setActionQueryHandler}
       />
 
       { isLoading