From 0bd3d0728b90b9d216eaa82c8106b600b8357628 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9lien=20Bompard?= <aurelien@bompard.org>
Date: Wed, 8 Nov 2023 15:23:53 +0100
Subject: [PATCH] Adjust to changes in vue-query 5
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Aurélien Bompard <aurelien@bompard.org>
---
 frontend/src/api/artifacts.ts                 |  24 +-
 frontend/src/api/index.ts                     |  11 +-
 frontend/src/api/rules.ts                     | 249 +++++++++++-------
 .../src/components/AdminRuleEnableForm.vue    |  14 +-
 .../src/components/AdminUserRulesSelector.vue |   1 -
 .../generation-rule/DestinationList.vue       |   1 -
 .../generation-rule/FilterApplication.vue     |   1 -
 .../tracking-rule/ArtifactsFollowedParams.vue |   1 -
 .../ArtifactsGroupOwnedParams.vue             |   1 -
 .../tracking-rule/UserMultiSelect.vue         |   1 -
 10 files changed, 179 insertions(+), 125 deletions(-)

diff --git a/frontend/src/api/artifacts.ts b/frontend/src/api/artifacts.ts
index ea406c80e..a09a4c7df 100644
--- a/frontend/src/api/artifacts.ts
+++ b/frontend/src/api/artifacts.ts
@@ -2,29 +2,29 @@
 //
 // SPDX-License-Identifier: MIT
 
-import { useQuery } from "@tanstack/vue-query";
+import { useQuery, type UseQueryReturnType } from "@tanstack/vue-query";
 import type { Ref } from "vue";
 import type { operations } from "./generated";
 import { apiGet } from "./index";
 
 // Get all rules
+type ArtifactsOpType = operations["get_artifacts_api_v1_artifacts_get"];
+type ArtifactsOutputType =
+  ArtifactsOpType["responses"][200]["content"]["application/json"];
+type ArtifactsErrorType =
+  ArtifactsOpType["responses"][422]["content"]["application/json"];
 export const useArtifactsQuery = (
   users: Ref<string[] | undefined> | undefined,
   groups: Ref<string[] | undefined> | undefined,
-) => {
+): UseQueryReturnType<ArtifactsOutputType, ArtifactsErrorType> => {
   const url = "/api/v1/artifacts";
-
-  type OpType = operations["get_artifacts_api_v1_artifacts_get"];
-  type OutputType = OpType["responses"][200]["content"]["application/json"];
-  type ErrorType = OpType["responses"][422]["content"]["application/json"];
-
   const queryParams = { users, groups };
   const visible =
     (groups && groups.value && groups.value.length > 0) ||
     (users && users.value && users.value.length > 0);
-  return useQuery<OutputType, ErrorType>(
-    [url, queryParams],
-    apiGet<OutputType>,
-    { enabled: visible },
-  );
+  return useQuery({
+    queryKey: [url, queryParams],
+    queryFn: apiGet<ArtifactsOutputType>,
+    enabled: visible,
+  });
 };
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 76b22e774..72ea1736a 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -53,10 +53,19 @@ export async function getApiClient() {
   });
 }
 
-export const apiGet = async <Data>({ queryKey }: QueryFunctionContext) => {
+interface QueryFunctionContextOrDirect
+  extends Omit<QueryFunctionContext, "signal" | "meta"> {
+  signal?: QueryFunctionContext["signal"];
+  meta?: QueryFunctionContext["meta"];
+}
+export const apiGet = async <Data>({
+  queryKey,
+  signal,
+}: QueryFunctionContextOrDirect) => {
   const axiosConfig = await getAxiosConfig();
   const url = queryKey[0] as string;
   axiosConfig["params"] = queryKey[1];
+  axiosConfig["signal"] = signal;
   const response = await http.get<Data>(url, axiosConfig);
   return response.data;
 };
diff --git a/frontend/src/api/rules.ts b/frontend/src/api/rules.ts
index b75565433..4a61f74d7 100644
--- a/frontend/src/api/rules.ts
+++ b/frontend/src/api/rules.ts
@@ -3,103 +3,136 @@
 // SPDX-License-Identifier: MIT
 
 import { useUserStore } from "@/stores/user";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  type UseMutationReturnType,
+  type UseQueryReturnType,
+} from "@tanstack/vue-query";
 import type { Ref } from "vue";
 import type { paths } from "./generated";
 import { apiDelete, apiGet, apiPatch, apiPost, apiPut } from "./index";
 
 // Get all rules
-export const useRulesQuery = () => {
+type RulesOpType = paths["/api/v1/users/{username}/rules"]["get"];
+type RulesOutputType =
+  RulesOpType["responses"][200]["content"]["application/json"];
+type RulesErrorType =
+  RulesOpType["responses"][422]["content"]["application/json"];
+export const useRulesQuery = (): UseQueryReturnType<
+  RulesOutputType,
+  RulesErrorType
+> => {
   const userStore = useUserStore();
   const url = `/api/v1/users/${userStore.username}/rules`;
-
-  type OpType = paths["/api/v1/users/{username}/rules"]["get"];
-  type OutputType = OpType["responses"][200]["content"]["application/json"];
-  type ErrorType = OpType["responses"][422]["content"]["application/json"];
-
-  return useQuery<OutputType, ErrorType>([url], apiGet<OutputType>, {
+  return useQuery({
+    queryKey: [url],
+    queryFn: apiGet<RulesOutputType>,
     enabled: userStore.loggedIn,
   });
 };
 
 // Get a rule
-export const useRuleQuery = (id: number) => {
+type RuleOpType = paths["/api/v1/users/{username}/rules/{id}"]["get"];
+type RuleOutputType =
+  RuleOpType["responses"][200]["content"]["application/json"];
+type RuleErrorType =
+  RuleOpType["responses"][422]["content"]["application/json"];
+export const useRuleQuery = (
+  id: number,
+): UseQueryReturnType<RuleOutputType, RuleErrorType> => {
   const userStore = useUserStore();
   const url = `/api/v1/users/${userStore.username}/rules/${id}`;
-
-  type OpType = paths["/api/v1/users/{username}/rules/{id}"]["get"];
-  type OutputType = OpType["responses"][200]["content"]["application/json"];
-  type ErrorType = OpType["responses"][422]["content"]["application/json"];
-
-  return useQuery<OutputType, ErrorType>([url], apiGet<OutputType>);
+  return useQuery({ queryKey: [url], queryFn: apiGet<RuleOutputType> });
 };
 
 // Add a new rule
-export const useAddRuleMutation = () => {
+type AddRuleOpType = paths["/api/v1/users/{username}/rules"]["post"];
+type AddRuleBodyType =
+  AddRuleOpType["requestBody"]["content"]["application/json"];
+type AddRuleOutputType =
+  AddRuleOpType["responses"][200]["content"]["application/json"];
+type AddRuleErrorType =
+  AddRuleOpType["responses"][422]["content"]["application/json"];
+export const useAddRuleMutation = (): UseMutationReturnType<
+  AddRuleOutputType,
+  AddRuleErrorType,
+  AddRuleBodyType,
+  unknown
+> => {
   const userStore = useUserStore();
   const client = useQueryClient();
-
-  type OpType = paths["/api/v1/users/{username}/rules"]["post"];
-  type BodyType = OpType["requestBody"]["content"]["application/json"];
-  type OutputType = OpType["responses"][200]["content"]["application/json"];
-  type ErrorType = OpType["responses"][422]["content"]["application/json"];
-
-  return useMutation<OutputType, ErrorType, BodyType>(
-    (data) =>
-      apiPost<OutputType, BodyType>(
+  return useMutation({
+    mutationFn: (data) =>
+      apiPost<AddRuleOutputType, AddRuleBodyType>(
         `/api/v1/users/${userStore.username}/rules`,
         data,
       ),
-    {
-      onSuccess: async () => {
-        await client.invalidateQueries([
-          `/api/v1/users/${userStore.username}/rules`,
-        ]);
-      },
+
+    onSuccess: async () => {
+      await client.invalidateQueries({
+        queryKey: [`/api/v1/users/${userStore.username}/rules`],
+      });
     },
-  );
+  });
 };
 
 // Edit a rule
-export const useEditRuleMutation = (id: number) => {
+type EditRuleOpType = paths["/api/v1/users/{username}/rules/{id}"]["put"];
+type EditRuleOutputType =
+  EditRuleOpType["responses"][200]["content"]["application/json"];
+type EditRuleErrorType =
+  EditRuleOpType["responses"][422]["content"]["application/json"];
+export const useEditRuleMutation = (
+  id: number,
+): UseMutationReturnType<
+  EditRuleOutputType,
+  EditRuleErrorType,
+  EditRuleOutputType,
+  unknown
+> => {
   const userStore = useUserStore();
   const client = useQueryClient();
   const url = `/api/v1/users/${userStore.username}/rules/${id}`;
-
-  type OpType = paths["/api/v1/users/{username}/rules/{id}"]["put"];
-  type OutputType = OpType["responses"][200]["content"]["application/json"];
-  type ErrorType = OpType["responses"][422]["content"]["application/json"];
-
-  return useMutation<OutputType, ErrorType, OutputType>(
-    (data: OutputType) => apiPut<OutputType>(url, data),
-    {
-      onSuccess: async () => {
-        await client.invalidateQueries([url]);
-        await client.invalidateQueries([
-          `/api/v1/users/${userStore.username}/rules`,
-        ]);
-      },
+  return useMutation({
+    mutationFn: (data: EditRuleOutputType) =>
+      apiPut<EditRuleOutputType>(url, data),
+
+    onSuccess: async () => {
+      await client.invalidateQueries({ queryKey: [url] });
+      await client.invalidateQueries({
+        queryKey: [`/api/v1/users/${userStore.username}/rules`],
+      });
     },
-  );
+  });
 };
 
 // Delete a rule
-export const useDeleteRuleMutation = () => {
+type DeleteRuleOpType = paths["/api/v1/users/{username}/rules/{id}"]["delete"];
+type DeleteRuleOutputType = DeleteRuleOpType["parameters"]["path"]["id"];
+type DeleteRuleErrorType =
+  DeleteRuleOpType["responses"][422]["content"]["application/json"];
+export const useDeleteRuleMutation = (): UseMutationReturnType<
+  void,
+  DeleteRuleErrorType,
+  DeleteRuleOutputType,
+  unknown
+> => {
   const userStore = useUserStore();
   const client = useQueryClient();
-
-  type OpType = paths["/api/v1/users/{username}/rules/{id}"]["delete"];
-  type ErrorType = OpType["responses"][422]["content"]["application/json"];
-
-  return useMutation<void, ErrorType, OpType["parameters"]["path"]["id"]>(
-    (id) => apiDelete(`/api/v1/users/${userStore.username}/rules/${id}`),
-    {
-      onSuccess: async () => {
-        const url = `/api/v1/users/${userStore.username}/rules`;
-        await client.invalidateQueries([url], { refetchType: "active" });
-      },
+  return useMutation({
+    mutationFn: (id) =>
+      apiDelete(`/api/v1/users/${userStore.username}/rules/${id}`),
+
+    onSuccess: async () => {
+      const url = `/api/v1/users/${userStore.username}/rules`;
+      await client.invalidateQueries({
+        queryKey: [url],
+        refetchType: "active",
+      });
     },
-  );
+  });
 };
 
 /*
@@ -107,58 +140,74 @@ export const useDeleteRuleMutation = () => {
  */
 
 // Get all rules
-export const useAdminRulesQuery = (username: Ref<string>) => {
+type AdminRulesOpType = paths["/api/v1/admin/rules"]["get"];
+type AdminRulesOutputType =
+  AdminRulesOpType["responses"][200]["content"]["application/json"];
+type AdminRulesErrorType =
+  AdminRulesOpType["responses"][422]["content"]["application/json"];
+export const useAdminRulesQuery = (
+  username: Ref<string>,
+): UseQueryReturnType<AdminRulesOutputType, AdminRulesErrorType> => {
   const url = `/api/v1/admin/rules`;
-
-  type OpType = paths["/api/v1/admin/rules"]["get"];
-  type OutputType = OpType["responses"][200]["content"]["application/json"];
-  type ErrorType = OpType["responses"][422]["content"]["application/json"];
-
-  return useQuery<OutputType, ErrorType>(
-    [url, { username }],
-    apiGet<OutputType>,
-  );
+  return useQuery({
+    queryKey: [url, { username }],
+    queryFn: apiGet<AdminRulesOutputType>,
+  });
 };
 
 // Get disabled rules
-export const useDisabledRulesQuery = () => {
+type DisabledRulesOpType = paths["/api/v1/admin/rules"]["get"];
+type DisabledRulesOutputType =
+  DisabledRulesOpType["responses"][200]["content"]["application/json"];
+type DisabledRulesErrorType =
+  DisabledRulesOpType["responses"][422]["content"]["application/json"];
+export const useDisabledRulesQuery = (): UseQueryReturnType<
+  DisabledRulesOutputType,
+  DisabledRulesErrorType
+> => {
   const url = "/api/v1/admin/rules";
-
-  type OpType = paths["/api/v1/admin/rules"]["get"];
-  type OutputType = OpType["responses"][200]["content"]["application/json"];
-  type ErrorType = OpType["responses"][422]["content"]["application/json"];
-  return useQuery<OutputType, ErrorType>(
-    [url, { disabled: true }],
-    apiGet<OutputType>,
-  );
+  return useQuery({
+    queryKey: [url, { disabled: true }],
+    queryFn: apiGet<DisabledRulesOutputType>,
+  });
 };
 
 // Patch an existing rule
-export const usePatchRuleMutation = () => {
+type PatchRuleOpType = paths["/api/v1/admin/rules/{id}"]["patch"];
+type PatchRuleBodyType =
+  PatchRuleOpType["requestBody"]["content"]["application/json"];
+type PatchRuleOutputType =
+  PatchRuleOpType["responses"][200]["content"]["application/json"];
+type PatchRuleFnOutputType = {
+  id: PatchRuleOpType["parameters"]["path"]["id"];
+  rule: PatchRuleBodyType;
+};
+type PatchRuleErrorType =
+  PatchRuleOpType["responses"][422]["content"]["application/json"];
+export const usePatchRuleMutation = (): UseMutationReturnType<
+  PatchRuleOutputType,
+  PatchRuleErrorType,
+  PatchRuleFnOutputType,
+  unknown
+> => {
   const client = useQueryClient();
-
-  type OpType = paths["/api/v1/admin/rules/{id}"]["patch"];
-  type BodyType = OpType["requestBody"]["content"]["application/json"];
-  type OutputType = OpType["responses"][200]["content"]["application/json"];
-  type ErrorType = OpType["responses"][422]["content"]["application/json"];
-
-  return useMutation<
-    OutputType,
-    ErrorType,
-    { id: OpType["parameters"]["path"]["id"]; rule: BodyType }
-  >(
-    ({ id, rule }) => {
-      return apiPatch<OutputType, BodyType>(`/api/v1/admin/rules/${id}`, rule);
+  return useMutation({
+    mutationFn: ({ id, rule }) => {
+      return apiPatch<PatchRuleOutputType, PatchRuleBodyType>(
+        `/api/v1/admin/rules/${id}`,
+        rule,
+      );
     },
-    {
-      onSuccess: async () => {
-        await client.invalidateQueries([
+
+    onSuccess: async () => {
+      await client.invalidateQueries({
+        queryKey: [
           "/api/v1/admin/rules",
           {
             disabled: true,
           },
-        ]);
-      },
+        ],
+      });
     },
-  );
+  });
 };
diff --git a/frontend/src/components/AdminRuleEnableForm.vue b/frontend/src/components/AdminRuleEnableForm.vue
index 5579ee72b..9706150f5 100644
--- a/frontend/src/components/AdminRuleEnableForm.vue
+++ b/frontend/src/components/AdminRuleEnableForm.vue
@@ -36,12 +36,14 @@ const handleSubmit = async (
   try {
     const response = await editMutation(formDataToRuleMutation(data));
     // Success!
-    await queryClient.invalidateQueries([
-      "/api/v1/admin/rules",
-      {
-        username: props.rule.user.name,
-      },
-    ]);
+    await queryClient.invalidateQueries({
+      queryKey: [
+        "/api/v1/admin/rules",
+        {
+          username: props.rule.user.name,
+        },
+      ],
+    });
     toastStore.addToast({
       color: "success",
       title: "Rule enabled",
diff --git a/frontend/src/components/AdminUserRulesSelector.vue b/frontend/src/components/AdminUserRulesSelector.vue
index 53edb1643..1cb392b97 100644
--- a/frontend/src/components/AdminUserRulesSelector.vue
+++ b/frontend/src/components/AdminUserRulesSelector.vue
@@ -20,7 +20,6 @@ const getUsers = async (query: string) => {
   // const results = await apiGetUsers({
   const results = await apiGet<User[]>({
     queryKey: ["/api/v1/admin/users", { search: query }],
-    meta: undefined,
   });
   const options = results.map((item) => item.name);
   return options;
diff --git a/frontend/src/components/rule-edit/generation-rule/DestinationList.vue b/frontend/src/components/rule-edit/generation-rule/DestinationList.vue
index bdf2755be..2f3734ff6 100644
--- a/frontend/src/components/rule-edit/generation-rule/DestinationList.vue
+++ b/frontend/src/components/rule-edit/generation-rule/DestinationList.vue
@@ -27,7 +27,6 @@ const getDestinations = async () => {
   try {
     data = await apiGet<Destination[]>({
       queryKey: [url],
-      meta: undefined,
     });
   } catch (e) {
     const error = e as AxiosError;
diff --git a/frontend/src/components/rule-edit/generation-rule/FilterApplication.vue b/frontend/src/components/rule-edit/generation-rule/FilterApplication.vue
index a7b102050..469c3e765 100644
--- a/frontend/src/components/rule-edit/generation-rule/FilterApplication.vue
+++ b/frontend/src/components/rule-edit/generation-rule/FilterApplication.vue
@@ -14,7 +14,6 @@ const url = "/api/v1/applications";
 const getApplications = async () => {
   const results = await apiGet<string[]>({
     queryKey: [url],
-    meta: undefined,
   });
   return results;
 };
diff --git a/frontend/src/components/rule-edit/tracking-rule/ArtifactsFollowedParams.vue b/frontend/src/components/rule-edit/tracking-rule/ArtifactsFollowedParams.vue
index cb978a9be..08f355753 100644
--- a/frontend/src/components/rule-edit/tracking-rule/ArtifactsFollowedParams.vue
+++ b/frontend/src/components/rule-edit/tracking-rule/ArtifactsFollowedParams.vue
@@ -38,7 +38,6 @@ const route = "/api/v1/artifacts";
 const getArtifacts = async (query: string) => {
   const results = await apiGet<Artifact[]>({
     queryKey: [route, { names: `*${query}*` }],
-    meta: undefined,
   });
   return results;
 };
diff --git a/frontend/src/components/rule-edit/tracking-rule/ArtifactsGroupOwnedParams.vue b/frontend/src/components/rule-edit/tracking-rule/ArtifactsGroupOwnedParams.vue
index 7cb784a3b..da14b1b26 100644
--- a/frontend/src/components/rule-edit/tracking-rule/ArtifactsGroupOwnedParams.vue
+++ b/frontend/src/components/rule-edit/tracking-rule/ArtifactsGroupOwnedParams.vue
@@ -17,7 +17,6 @@ const url = `/api/v1/users/${userStore.username}/groups`;
 const getUserGroups = async () => {
   const results = await apiGet<string[]>({
     queryKey: [url],
-    meta: undefined,
   });
   return results;
 };
diff --git a/frontend/src/components/rule-edit/tracking-rule/UserMultiSelect.vue b/frontend/src/components/rule-edit/tracking-rule/UserMultiSelect.vue
index 556657747..acae22aa8 100644
--- a/frontend/src/components/rule-edit/tracking-rule/UserMultiSelect.vue
+++ b/frontend/src/components/rule-edit/tracking-rule/UserMultiSelect.vue
@@ -35,7 +35,6 @@ const getUsers = async (query: string) => {
   }
   const results = await apiGet<User[]>({
     queryKey: [url, { search: query }],
-    meta: undefined,
   });
   return results;
 };