Merge pull request #17057 from guerler/grid_use_debounce

Use debounce instead of timeout utility

client/src/components/Grid/GridList.test.js

@@ -1,4 +1,5 @@
 import { mount } from "@vue/test-utils";
+import flushPromises from "flush-promises";
 import { getLocalVue } from "tests/jest/helpers";
 import { useRouter } from "vue-router/composables";
 
@@ -8,6 +9,7 @@ import MountTarget from "./GridList.vue";
 
 const localVue = getLocalVue();
 
+jest.useFakeTimers();
 jest.mock("vue-router/composables");
 
 useRouter.mockImplementation(() => "router");
@@ -53,7 +55,10 @@ const testGrid = {
                     title: "operation-title-3",
                     icon: "operation-icon-3",
                     condition: () => true,
-                    handler: jest.fn(),
+                    handler: () => ({
+                        status: "success",
+                        message: "Operation-3 has been executed.",
+                    }),
                 },
             ],
         },
@@ -146,6 +151,13 @@ describe("GridList", () => {
             { id: "id-1", link: "link-1", operation: "operation-1" },
             "router",
         ]);
+        await dropdownItems.at(1).trigger("click");
+        await flushPromises();
+        const alert = wrapper.find(".alert");
+        expect(alert.text()).toBe("Operation-3 has been executed.");
+        jest.runAllTimers();
+        await wrapper.vm.$nextTick();
+        expect(wrapper.find(".alert").exists()).toBeFalsy();
     });
 
     it("filter handling", async () => {
@@ -155,7 +167,8 @@ describe("GridList", () => {
         await wrapper.vm.$nextTick();
         const filterInput = wrapper.find("[data-description='filter text input']");
         await filterInput.setValue("filter query");
-        await new Promise((r) => setTimeout(r, 500));
+        jest.runAllTimers();
+        await flushPromises();
         expect(testGrid.getData).toHaveBeenCalledTimes(2);
         expect(testGrid.getData.mock.calls[1]).toEqual([0, 25, "filter query", "id", true]);
     });

client/src/components/Grid/GridList.vue

@@ -2,12 +2,11 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { useDebounceFn } from "@vueuse/core";
 import { BAlert, BButton, BLink, BPagination } from "bootstrap-vue";
 import { computed, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
-import { timeout } from "@/utils/timeout";
-
 import { Config, FieldHandler, Operation, RowData } from "./configs/types";
 
 import GridLink from "./GridElements/GridLink.vue";
@@ -25,11 +24,14 @@ const router = useRouter();
 interface Props {
     // provide a grid configuration
     config: Config;
+    // debounce delay
+    delay?: number;
     // rows per page to be shown
     limit?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
+    delay: 5000,
     limit: 25,
 });
 
@@ -60,6 +62,11 @@ const filterText = ref("");
 const searchTerm = ref("");
 const showAdvanced = ref(false);
 
+// hide message helper
+const hideMessage = useDebounceFn(() => {
+    operationMessage.value = "";
+}, props.delay);
+
 /**
  * Manually set filter value, used for tags and `SharingIndicators`
  */
@@ -156,9 +163,7 @@ watch([currentPage, searchTerm, sortDesc, sortBy], () => getGridData());
  * Operation message timeout handler
  */
 watch(operationMessage, () => {
-    timeout(() => {
-        operationMessage.value = "";
-    });
+    hideMessage();
 });
 </script>