Fixed queries, mutations and JSON parse (#626)

* Fixed queries ond mutations

* Fixed JSON.parse in analytics

frontend/public/analytics.js

@@ -13,8 +13,24 @@ const BASE_ANALYTIC_MSG = {
   referrerPolicy: "no-referrer"
 };
 xhr.onload = function() {
-  if (xhr.readyState === XMLHttpRequest.DONE) {
+  if (xhr.readyState !== XMLHttpRequest.DONE) {
-    const status = JSON.parse(xhr.responseText);
+    return;
+    }
+
+    const responseTxt = xhr.responseText?.trim();
+    if (!responseTxt) {
+      console.warn("Analytics response is empty");
+      return;
+    }
+
+    let status;
+    try {
+      status = JSON.parse(responseTxt);
+    } catch (e) {
+      console.error("Failed to parse JSON: ", xhr.responseText, e);
+      return;
+    }
+
     const version = status.CurVer;
     if (status.Analytics) {
       enableDD(version);
@@ -23,7 +39,6 @@ xhr.onload = function() {
     } else {
       console.log("Analytics is disabled in this session");
     }
-  }
 };
 xhr.open("GET", "/status", true);
 xhr.send(null);

frontend/src/API/k8s.ts

@@ -5,11 +5,11 @@ import apiService from "./apiService";
 
 // Get list of kubectl contexts configured locally
 function useGetKubectlContexts(options?: UseQueryOptions<KubectlContexts>) {
-  return useQuery<KubectlContexts>(
+  return useQuery<KubectlContexts>({
-    ["k8s", "contexts"],
+    queryKey:["k8s", "contexts"],
-    () => apiService.fetchWithDefaults<KubectlContexts>("/api/k8s/contexts"),
+    queryFn:() => apiService.fetchWithDefaults<KubectlContexts>("/api/k8s/contexts"),
-    options
+...(options ?? {})
-  );
+});
 }
 
 // Get resources information
@@ -19,13 +19,13 @@ function useGetK8sResource(
   namespace: string,
   options?: UseQueryOptions<K8sResource>
 ) {
-  return useQuery<K8sResource>(
+  return useQuery<K8sResource>({
-    ["k8s", kind, "get", name, namespace],
+    queryKey: ["k8s", kind, "get", name, namespace],
-    () =>
+    queryFn:() =>
       apiService.fetchWithDefaults<K8sResource>(
         `/api/k8s/${kind}/get?name=${name}&namespace=${namespace}`
       ),
-    options
+    ...(options ?? {})}
   );
 }
 
@@ -34,11 +34,11 @@ function useGetK8sResourceList(
   kind: string,
   options?: UseQueryOptions<K8sResourceList>
 ) {
-  return useQuery<K8sResourceList>(
+  return useQuery<K8sResourceList>({
-    ["k8s", kind, "list"],
+    queryKey: ["k8s", kind, "list"],
-    () =>
+    queryFn:() =>
       apiService.fetchWithDefaults<K8sResourceList>(`/api/k8s/${kind}/list`),
-    options
+    ...(options ?? {})}
   );
 }
 
@@ -49,9 +49,9 @@ function useGetK8sResourceDescribe(
   namespace: string,
   options?: UseQueryOptions<string>
 ) {
-  return useQuery<string>(
+  return useQuery<string>({
-    ["k8s", kind, "describe", name, namespace],
+    queryKey:["k8s", kind, "describe", name, namespace],
-    () =>
+    queryFn:() =>
       apiService.fetchWithDefaults<string>(
         `/api/k8s/${kind}/describe?name=${name}&namespace=${namespace}`,
         {
@@ -60,6 +60,6 @@ function useGetK8sResourceDescribe(
           },
         }
       ),
-    options
+    ...(options ?? {})}
   );
 }

frontend/src/API/other.ts

@@ -11,12 +11,12 @@ import apiService from "./apiService";
 export function useShutdownHelmDashboard(
   options?: UseMutationOptions<void, Error>
 ) {
-  return useMutation<void, Error>(
+  return useMutation<void, Error>({
-    () =>
+    mutationFn:() =>
       apiService.fetchWithDefaults("/", {
         method: "DELETE",
       }),
-    options
+...(options ?? {})}
   );
 }
 
@@ -24,11 +24,9 @@ export function useShutdownHelmDashboard(
 export function useGetApplicationStatus(
   options?: UseQueryOptions<ApplicationStatus>
 ) {
-  return useQuery<ApplicationStatus>(
+  return useQuery<ApplicationStatus>({
-    ["status"],
+    queryKey: ["status"],
-    () => apiService.fetchWithDefaults<ApplicationStatus>("/status"),
+    queryFn: () => apiService.fetchWithDefaults<ApplicationStatus>("/status"),
-    {
+      ...(options ?? {}),
-      ...options,
+  });
-    }
-  );
 }

frontend/src/API/releases.ts

@@ -14,10 +14,10 @@ export function useGetInstalledReleases(
   context: string,
   options?: UseQueryOptions<Release[]>
 ) {
-  return useQuery<Release[]>(
+  return useQuery<Release[]>({
-    ["installedReleases", context],
+    queryKey:["installedReleases", context],
-    () => apiService.fetchWithDefaults<Release[]>("/api/helm/releases"),
+    queryFn: () => apiService.fetchWithDefaults<Release[]>("/api/helm/releases"),
-    options
+    ...(options ?? {})}
   );
 }
 
@@ -62,13 +62,13 @@ export function useGetReleaseManifest({
   chartName: string;
   options?: UseQueryOptions<ReleaseManifest[]>;
 }) {
-  return useQuery<ReleaseManifest[]>(
+  return useQuery<ReleaseManifest[]>({
-    ["manifest", namespace, chartName],
+    queryKey:["manifest", namespace, chartName],
-    () =>
+    queryFn:() =>
       apiService.fetchWithDefaults<ReleaseManifest[]>(
         `/api/helm/releases/${namespace}/${chartName}/manifests`
       ),
-    options
+    ...(options ?? {})}
   );
 }
 
@@ -78,13 +78,13 @@ export function useGetResources(
   name: string,
   options?: UseQueryOptions<StructuredResources[]>
 ) {
-  const { data, ...rest } = useQuery<StructuredResources[]>(
+  const { data, ...rest } = useQuery<StructuredResources[]>({
-    ["resources", ns, name],
+    queryKey:["resources", ns, name],
-    () =>
+    queryFn:() =>
       apiService.fetchWithDefaults<StructuredResources[]>(
         `/api/helm/releases/${ns}/${name}/resources?health=true`
       ),
-    options
+    ...(options ?? {})}
   );
 
   return {
@@ -115,42 +115,42 @@ export function useGetResourceDescription(
   name: string,
   options?: UseQueryOptions<string>
 ) {
-  return useQuery<string>(
+  return useQuery<string>({
-    ["describe", type, ns, name],
+    queryKey:["describe", type, ns, name],
-    () =>
+    queryFn:() =>
       apiService.fetchWithDefaults<string>(
         `/api/k8s/${type}/describe?name=${name}&namespace=${ns}`,
         {
           headers: { "Content-Type": "text/plain; charset=utf-8" },
         }
       ),
-    options
+    ...(options ?? {})}
   );
 }
 export function useGetLatestVersion(
   chartName: string,
   options?: UseQueryOptions<ChartVersion[]>
 ) {
-  return useQuery<ChartVersion[]>(
+  return useQuery<ChartVersion[]>({
-    ["latestver", chartName],
+    queryKey:["latestver", chartName],
-    () =>
+    queryFn:() =>
       apiService.fetchWithDefaults<ChartVersion[]>(
         `/api/helm/repositories/latestver?name=${chartName}`
       ),
-    options
+...(options ?? {})}
   );
 }
 export function useGetVersions(
   chartName: string,
   options?: UseQueryOptions<LatestChartVersion[]>
 ) {
-  return useQuery<LatestChartVersion[]>(
+  return useQuery<LatestChartVersion[]>({
-    ["versions", chartName],
+    queryKey: ["versions", chartName],
-    () =>
+    queryFn: () =>
       apiService.fetchWithDefaults<LatestChartVersion[]>(
         `/api/helm/repositories/versions?name=${chartName}`
       ),
-    options
+    ...(options ?? {})}
   );
 }
 
@@ -160,16 +160,16 @@ export function useGetReleaseInfoByType(
   options?: UseQueryOptions<string>
 ) {
   const { chart, namespace, tab, revision } = params;
-  return useQuery<string>(
+  return useQuery<string>({
-    [tab, namespace, chart, revision, additionalParams],
+    queryKey:[tab, namespace, chart, revision, additionalParams],
-    () =>
+    queryFn:() =>
       apiService.fetchWithDefaults<string>(
         `/api/helm/releases/${namespace}/${chart}/${tab}?revision=${revision}${additionalParams}`,
         {
           headers: { "Content-Type": "text/plain; charset=utf-8" },
         }
       ),
-    options
+    ...(options ?? {})}
   );
 }
 
@@ -177,16 +177,16 @@ export function useGetDiff(
   formData: FormData,
   options?: UseQueryOptions<string>
 ) {
-  return useQuery<string>(
+  return useQuery<string>({
-    ["diff", formData],
+    queryKey:["diff", formData],
-    () => {
+    queryFn:() => {
       return apiService.fetchWithDefaults<string>("/diff", {
         body: formData,
 
         method: "POST",
       });
     },
-    options
+    ...(options ?? {})}
   );
 }
 
@@ -202,7 +202,7 @@ export function useRollbackRelease(
     void,
     unknown,
     { ns: string; name: string; revision: number }
-  >(({ ns, name, revision }) => {
+  >({mutationFn:({ ns, name, revision }) => {
     const formData = new FormData();
     formData.append("revision", revision.toString());
 
@@ -213,15 +213,15 @@ export function useRollbackRelease(
         body: formData,
       }
     );
-  }, options);
+  }, ...(options ?? {})});
 }
 
 // Run the tests on a release
 export function useTestRelease(
   options?: UseMutationOptions<void, unknown, { ns: string; name: string }>
 ) {
-  return useMutation<void, unknown, { ns: string; name: string }>(
+  return useMutation<void, unknown, { ns: string; name: string }>({
-    ({ ns, name }) => {
+    mutationFn:({ ns, name }) => {
       return apiService.fetchWithDefaults<void>(
         `/api/helm/releases/${ns}/${name}/test`,
         {
@@ -229,7 +229,7 @@ export function useTestRelease(
         }
       );
     },
-    options
+...(options ?? {})}
   );
 }
 
@@ -248,9 +248,9 @@ export function useChartReleaseValues({
   version?: string;
   options?: UseQueryOptions<unknown>;
 }) {
-  return useQuery<unknown>(
+  return useQuery<unknown>({
-    ["values", namespace, release, userDefinedValue, version],
+    queryKey:["values", namespace, release, userDefinedValue, version],
-    () =>
+    queryFn:() =>
       apiService.fetchWithDefaults<unknown>(
         `/api/helm/releases/${namespace}/${release}/values?${"userDefined=true"}${
           revision ? `&revision=${revision}` : ""
@@ -259,7 +259,7 @@ export function useChartReleaseValues({
           headers: { "Content-Type": "text/plain; charset=utf-8" },
         }
       ),
-    options
+    ...(options ?? {})}
   );
 }
 
@@ -282,8 +282,8 @@ export const useVersionData = ({
   isInstallRepoChart?: boolean;
   options?: UseQueryOptions;
 }) => {
-  return useQuery(
+  return useQuery({
-    [
+    queryKey: [
       version,
       userValues,
       chartAddress,
@@ -292,7 +292,7 @@ export const useVersionData = ({
       releaseName,
       isInstallRepoChart,
     ],
-    async () => {
+    queryFn: async () => {
       const formData = getVersionManifestFormData({
         version,
         userValues,
@@ -314,9 +314,9 @@ export const useVersionData = ({
 
       return data;
     },
-    // @ts-ignore
+
-    options
+    ...(options ?? {})
-  );
+  });
 };
 
 // Request objects

frontend/src/API/repositories.ts

@@ -11,12 +11,12 @@ import apiService from "./apiService";
 export function useGetRepositories(
   options?: UseQueryOptions<HelmRepositories>
 ) {
-  return useQuery<HelmRepositories>(
+  return useQuery<HelmRepositories>({
-    ["helm", "repositories"],
+    queryKey:["helm", "repositories"],
-    () =>
+    queryFn: () =>
       apiService.fetchWithDefaults<HelmRepositories>("/api/helm/repositories"),
-    options
+    ...(options ?? {})
-  );
+  });
 }
 
 // Update repository from remote
@@ -24,14 +24,14 @@ export function useUpdateRepo(
   repo: string,
   options?: UseMutationOptions<void, unknown, void>
 ) {
-  return useMutation<void, unknown, void>(() => {
+  return useMutation<void, unknown, void>({ mutationFn:() => {
     return apiService.fetchWithDefaults<void>(
       `/api/helm/repositories/${repo}`,
       {
         method: "POST",
       }
     );
-  }, options);
+  }, ...(options ?? {})});
 }
 
 // Remove repository
@@ -39,14 +39,14 @@ export function useDeleteRepo(
   repo: string,
   options?: UseMutationOptions<void, unknown, void>
 ) {
-  return useMutation<void, unknown, void>(() => {
+  return useMutation<void, unknown, void>({mutationFn:() => {
     return apiService.fetchWithDefaults<void>(
       `/api/helm/repositories/${repo}`,
       {
         method: "DELETE",
       }
     );
-  }, options);
+  }, ...(options ?? {})});
 }
 
 export function useChartRepoValues({
@@ -56,16 +56,15 @@ export function useChartRepoValues({
   version: string;
   chart: string;
 }) {
-  return useQuery<string>(
+  return useQuery<string>({
-    ["helm", "repositories", "values", chart, version],
+    queryKey:["helm", "repositories", "values", chart, version],
-    () =>
+    queryFn:() =>
       apiService.fetchWithDefaults<string>(
         `/api/helm/repositories/values?chart=${chart}&version=${version}`,
         {
           headers: { "Content-Type": "text/plain; charset=utf-8" },
         }
       ),
-    {
       enabled: Boolean(version) && Boolean(chart),
     }
   );

frontend/src/API/scanners.ts

@@ -12,10 +12,10 @@ import apiService from "./apiService";
 
 // Get list of discovered scanners
 function useGetDiscoveredScanners(options?: UseQueryOptions<ScannersList>) {
-  return useQuery<ScannersList>(
+  return useQuery<ScannersList>({
-    ["scanners"],
+    queryKey: ["scanners"],
-    () => apiService.fetchWithDefaults<ScannersList>("/api/scanners"),
+    queryFn:() => apiService.fetchWithDefaults<ScannersList>("/api/scanners"),
-    options
+    ...(options ?? {})}
   );
 }
 
@@ -26,13 +26,13 @@ function useScanManifests(
 ) {
   const formData = new FormData();
   formData.append("manifest", manifest);
-  return useMutation<ScanResults, Error, string>(
+  return useMutation<ScanResults, Error, string>({
-    () =>
+    mutationFn:() =>
       apiService.fetchWithDefaults<ScanResults>("/api/scanners/manifests", {
         method: "POST",
         body: formData,
       }),
-    options
+    ...(options ?? {})}
   );
 }
 
@@ -43,12 +43,12 @@ function useScanK8sResource(
   name: string,
   options?: UseQueryOptions<ScanResults>
 ) {
-  return useQuery<ScanResults>(
+  return useQuery<ScanResults>({queryKey:
     ["scanners", "resource", kind, namespace, name],
-    () =>
+    queryFn:() =>
       apiService.fetchWithDefaults<ScanResults>(
         `/api/scanners/resource/${kind}?namespace=${namespace}&name=${name}`
       ),
-    options
+    ...(options ?? {})}
   );
 }

frontend/src/API/shared.ts

@@ -43,9 +43,9 @@ export const useDiffData = ({
   selectedVerData: { [key: string]: string };
   chart: string;
 }) => {
-  return useQuery(
+  return useQuery({
-    [selectedRepo, versionsError, chart, currentVerManifest, selectedVerData],
+    queryKey: [selectedRepo, versionsError, chart, currentVerManifest, selectedVerData],
-    async () => {
+    queryFn: async () => {
       const formData = new FormData();
       formData.append("a", currentVerManifest);
       formData.append("b", selectedVerData.manifest);
@@ -57,8 +57,7 @@ export const useDiffData = ({
 
       return diff;
     },
-    {
+    enabled: Boolean(selectedVerData),
-      enabled: Boolean(selectedVerData),
+}
-    }
   );
 };

frontend/src/components/modal/InstallChartModal/InstallReleaseChartModal.tsx

@@ -131,7 +131,7 @@ export const InstallReleaseChartModal = ({
 
   // Confirm method (install)
   const setReleaseVersionMutation = useMutation(
-    [
+    {mutationKey:[
       "setVersion",
       namespace,
       releaseName,
@@ -140,7 +140,7 @@ export const InstallReleaseChartModal = ({
       selectedCluster,
       chartAddress,
     ],
-    async () => {
+    mutationFn:async () => {
       setInstallError("");
       const formData = new FormData();
       formData.append("preview", "false");
@@ -161,7 +161,6 @@ export const InstallReleaseChartModal = ({
       );
       return data;
     },
-    {
       onSuccess: async (response) => {
         onClose();
         setSelectedVersionData({ version: "", urls: [] }); //cleanup

frontend/src/components/modal/InstallChartModal/InstallRepoChartModal.tsx

@@ -113,7 +113,7 @@ export const InstallRepoChartModal = ({
 
   // Confirm method (install)
   const setReleaseVersionMutation = useMutation(
-    [
+    {mutationKey:[
       "setVersion",
       namespace,
       releaseName,
@@ -122,7 +122,7 @@ export const InstallRepoChartModal = ({
       selectedCluster,
       chartAddress,
     ],
-    async () => {
+    mutationFn:async () => {
       setInstallError("");
       const formData = new FormData();
       formData.append("preview", "false");
@@ -139,7 +139,7 @@ export const InstallRepoChartModal = ({
       );
       return data;
     },
-    {
+
       onSuccess: async (response) => {
         onClose();
         navigate(

frontend/src/components/revision/RevisionDetails.tsx

@@ -459,15 +459,14 @@ const Uninstall = () => {
   });
 
   const uninstallMutation = useMutation(
-    ["uninstall", namespace, chart],
+    {mutationKey:["uninstall", namespace, chart],
-    () =>
+    mutationFn:() =>
       apiService.fetchWithDefaults(
         "/api/helm/releases/" + namespace + "/" + chart,
         {
           method: "delete",
         }
       ),
-    {
       onSuccess: () => {
         window.location.href = "/";
       },