Add a 'Reset' button the the events search form (#2732)

public/resources/en/events.json

@@ -31,5 +31,6 @@
   "attribute": "Attribute",
   "value": "Value",
   "representation": "Representation",
-  "noUserDetails": "No user details"
+  "noUserDetails": "No user details",
+  "resetBtn": "Reset"
 }

src/events/AdminEvents.tsx

@@ -147,6 +147,11 @@ export const AdminEvents = () => {
     commitFilters();
   }
 
+  function resetSearch() {
+    reset();
+    commitFilters();
+  }
+
   function removeFilter(key: keyof AdminEventSearchForm) {
     const formValues: AdminEventSearchForm = { ...getValues() };
     delete formValues[key];
@@ -437,7 +442,6 @@ export const AdminEvents = () => {
               </FormGroup>
               <ActionGroup>
                 <Button
-                  className="keycloak__user_events_search__form_btn"
                   variant={"primary"}
                   onClick={submitSearch}
                   data-testid="search-events-btn"
@@ -445,6 +449,13 @@ export const AdminEvents = () => {
                 >
                   {t("searchAdminEventsBtn")}
                 </Button>
+                <Button
+                  variant="secondary"
+                  onClick={resetSearch}
+                  isDisabled={!isDirty}
+                >
+                  {t("resetBtn")}
+                </Button>
               </ActionGroup>
             </Form>
           </Dropdown>

src/events/EventsSection.tsx

@@ -138,6 +138,11 @@ export default function EventsSection() {
     commitFilters();
   }
 
+  function resetSearch() {
+    reset();
+    commitFilters();
+  }
+
   function removeFilter(key: keyof UserEventSearchForm) {
     const formValues: UserEventSearchForm = { ...getValues() };
     delete formValues[key];
@@ -342,7 +347,6 @@ export default function EventsSection() {
               </FormGroup>
               <ActionGroup>
                 <Button
-                  className="keycloak__user_events_search__form_btn"
                   variant={"primary"}
                   onClick={submitSearch}
                   data-testid="search-events-btn"
@@ -350,6 +354,13 @@ export default function EventsSection() {
                 >
                   {t("searchUserEventsBtn")}
                 </Button>
+                <Button
+                  variant="secondary"
+                  onClick={resetSearch}
+                  isDisabled={!isDirty}
+                >
+                  {t("resetBtn")}
+                </Button>
               </ActionGroup>
             </Form>
           </Dropdown>