Fix/chart-link-cluster-mode (#474)

frontend/src/components/InstalledPackages/InstalledPackageCard.tsx

@@ -15,7 +15,6 @@ import { useGetLatestVersion } from "../../API/releases";
 import { isNewerVersion } from "../../utils";
 import { LatestChartVersion } from "../../API/interfaces";
 import useNavigateWithSearchParams from "../../hooks/useNavigateWithSearchParams";
-import { useParams } from "react-router-dom";
 
 type InstalledPackageCardProps = {
   release: Release;
@@ -26,7 +25,6 @@ export default function InstalledPackageCard({
 }: InstalledPackageCardProps) {
   const navigate = useNavigateWithSearchParams();
 
-  const { context: selectedCluster } = useParams();
   const [isMouseOver, setIsMouseOver] = useState(false);
 
   const { data: latestVersionResult } = useGetLatestVersion(release.chartName, {
@@ -34,7 +32,7 @@ export default function InstalledPackageCard({
     cacheTime: 0,
   });
 
-  const { data: statusData } = useQuery<any>({
+  const { data: statusData } = useQuery<unknown>({
     queryKey: ["resourceStatus", release],
     queryFn: () => apiService.getResourceStatus({ release }),
   });
@@ -61,10 +59,9 @@ export default function InstalledPackageCard({
 
   const handleOnClick = () => {
     const { name, namespace } = release;
-    navigate(
-      `/${selectedCluster}/${namespace}/${name}/installed/revision/${release.revision}`,
-      { state: release }
-    );
+    navigate(`/${namespace}/${name}/installed/revision/${release.revision}`, {
+      state: release,
+    });
   };
 
   const statusColor = getStatusColor(release.status as DeploymentStatus);

frontend/src/components/LinkWithSearchParams.tsx

@@ -1,4 +1,5 @@
-import { NavLink, useLocation } from "react-router-dom";
+import { NavLink, useLocation, useParams } from "react-router-dom";
+import { useAppContext } from "../context/AppContext";
 
 const LinkWithSearchParams = ({
   to,
@@ -11,14 +12,22 @@ const LinkWithSearchParams = ({
   children: React.ReactNode;
 }) => {
   const { search } = useLocation();
-  const params = new URLSearchParams(search);
+  const { context } = useParams();
+  const {clusterMode} = useAppContext();
 
+  const params = new URLSearchParams(search);
   // For state we don't want to keep while navigating
   props.exclude?.forEach((key) => {
     params.delete(key);
   });
 
-  return <NavLink to={`${to}/?${params.toString()}`} {...props} />;
+  let prefixedUrl = to;
+
+  if (!clusterMode) {
+    prefixedUrl = `/${context}${to}`;
+  }
+
+  return <NavLink to={`${prefixedUrl}/?${params.toString()}`} {...props} />;
 };
 
 export default LinkWithSearchParams;

frontend/src/components/modal/AddRepositoryModal.tsx

@@ -5,7 +5,7 @@ import useAlertError from "../../hooks/useAlertError";
 import useCustomSearchParams from "../../hooks/useCustomSearchParams";
 import { useAppContext } from "../../context/AppContext";
 import { useQueryClient } from "@tanstack/react-query";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import apiService from "../../API/apiService";
 
 interface FormKeys {
@@ -27,7 +27,6 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
   const { searchParamsObject } = useCustomSearchParams();
   const { repo_url, repo_name } = searchParamsObject;
   const { setSelectedRepo } = useAppContext();
-  const { context } = useParams();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
@@ -45,10 +44,11 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
 
     setIsLoading(true);
 
-    apiService.fetchWithDefaults<void>("/api/helm/repositories", {
-      method: "POST",
-      body,
-    })
+    apiService
+      .fetchWithDefaults<void>("/api/helm/repositories", {
+        method: "POST",
+        body,
+      })
       .then(() => {
         setIsLoading(false);
         onClose();
@@ -57,7 +57,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
           queryKey: ["helm", "repositories"],
         });
         setSelectedRepo(formData.name || "");
-        navigate(`/${context}/repository/${formData.name}`, {
+        navigate(`/repository/${formData.name}`, {
           replace: true,
         });
       })

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

@@ -1,5 +1,4 @@
 import { useParams } from "react-router-dom";
-import useAlertError from "../../../hooks/useAlertError";
 import { useMemo, useState } from "react";
 import {
   useChartReleaseValues,
@@ -19,6 +18,7 @@ import { useChartRepoValues } from "../../../API/repositories";
 import { useDiffData } from "../../../API/shared";
 import { InstallChartModalProps } from "../../../data/types";
 import { DefinedValues } from "./DefinedValues";
+import apiService from "../../../API/apiService";
 
 export const InstallReleaseChartModal = ({
   isOpen,
@@ -30,7 +30,6 @@ export const InstallReleaseChartModal = ({
   latestRevision,
 }: InstallChartModalProps) => {
   const navigate = useNavigateWithSearchParams();
-  const { setShowErrorModal } = useAlertError();
   const [userValues, setUserValues] = useState<string>();
   const [installError, setInstallError] = useState("");
 
@@ -150,35 +149,23 @@ export const InstallReleaseChartModal = ({
       formData.append("version", selectedVersion || "");
       formData.append("values", userValues || releaseValues || ""); // if userValues is empty, we use the release values
 
-      const res = await fetch(
-        // Todo: Change to BASE_URL from env
+      const data = await apiService.fetchWithDefaults(
         `/api/helm/releases/${
           namespace ? namespace : "default"
         }${`/${releaseName}`}`,
         {
           method: "post",
           body: formData,
-          headers: {
-            "X-Kubecontext": selectedCluster as string,
-          },
         }
       );
-
-      if (!res.ok) {
-        setShowErrorModal({
-          title: "Failed to upgrade the chart",
-          msg: String(await res.text()),
-        });
-      }
-
-      return res.json();
+      return data;
     },
     {
       onSuccess: async (response) => {
         onClose();
         setSelectedVersionData({ version: "", urls: [] }); //cleanup
         navigate(
-          `/${selectedCluster}/${
+          `/${
             namespace ? namespace : "default"
           }/${releaseName}/installed/revision/${response.version}`
         );

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

@@ -1,5 +1,4 @@
 import { useParams } from "react-router-dom";
-import useAlertError from "../../../hooks/useAlertError";
 import { useMemo, useState } from "react";
 import { useGetVersions, useVersionData } from "../../../API/releases";
 import Modal, { ModalButtonStyle } from "../Modal";
@@ -13,6 +12,7 @@ import { isNewerVersion, isNoneEmptyArray } from "../../../utils";
 import { useDiffData } from "../../../API/shared";
 import { InstallChartModalProps } from "../../../data/types";
 import { DefinedValues } from "./DefinedValues";
+import apiService from "../../../API/apiService";
 
 export const InstallRepoChartModal = ({
   isOpen,
@@ -22,7 +22,6 @@ export const InstallRepoChartModal = ({
   latestVersion,
 }: InstallChartModalProps) => {
   const navigate = useNavigateWithSearchParams();
-  const { setShowErrorModal } = useAlertError();
   const [userValues, setUserValues] = useState("");
   const [installError, setInstallError] = useState("");
 
@@ -130,32 +129,20 @@ export const InstallRepoChartModal = ({
       formData.append("version", selectedVersion || "");
       formData.append("values", userValues);
       formData.append("name", releaseName || "");
-      const res = await fetch(
-        // Todo: Change to BASE_URL from env
+      const data = await apiService.fetchWithDefaults(
         `/api/helm/releases/${namespace ? namespace : "default"}`,
         {
           method: "post",
           body: formData,
-          headers: {
-            "X-Kubecontext": selectedCluster as string,
-          },
         }
       );
-
-      if (!res.ok) {
-        setShowErrorModal({
-          title: "Failed to install the chart",
-          msg: String(await res.text()),
-        });
-      }
-
-      return res.json();
+      return data;
     },
     {
       onSuccess: async (response) => {
         onClose();
         navigate(
-          `/${selectedCluster}/${response.namespace}/${response.name}/installed/revision/1`
+          `/${response.namespace}/${response.name}/installed/revision/1`
         );
       },
       onError: (error) => {

frontend/src/components/repository/RepositoryViewer.tsx

@@ -6,7 +6,7 @@ import apiService from "../../API/apiService";
 import Spinner from "../Spinner";
 import { useUpdateRepo } from "../../API/repositories";
 import { useEffect, useMemo, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { useAppContext } from "../../context/AppContext";
 
 type RepositoryViewerProps = {
@@ -16,7 +16,6 @@ type RepositoryViewerProps = {
 function RepositoryViewer({ repository }: RepositoryViewerProps) {
   const [searchValue, setSearchValue] = useState("");
   const [isRemoveLoading, setIsRemove] = useState(false);
-  const { context } = useParams();
   const { setSelectedRepo, selectedRepo } = useAppContext();
   const queryClient = useQueryClient();
 
@@ -54,7 +53,7 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
             method: "DELETE",
           }
         );
-        navigate(`/${context}/repository`, { replace: true });
+        navigate("/repository", { replace: true });
         setSelectedRepo("");
         queryClient.invalidateQueries({
           queryKey: ["helm", "repositories"],

frontend/src/components/revision/RevisionDetails.tsx

@@ -23,7 +23,7 @@ import {
 import RevisionDiff from "./RevisionDiff";
 import RevisionResource from "./RevisionResource";
 import Tabs from "../Tabs";
-import { useMutation } from "@tanstack/react-query";
+import { type UseQueryResult, useMutation } from "@tanstack/react-query";
 import Modal, { ModalButtonStyle } from "../modal/Modal";
 import Spinner from "../Spinner";
 import useAlertError from "../../hooks/useAlertError";
@@ -125,10 +125,10 @@ export default function RevisionDetails({
         ns: namespace,
         name: chart,
       });
-    } catch (error: any) {
+    } catch (error: unknown) {
       setShowErrorModal({
         title: "Test failed to run",
-        msg: error.message,
+        msg: (error as Error).message,
       });
     }
     setShowTestResults(true);
@@ -207,7 +207,7 @@ export default function RevisionDetails({
               <span
                 onClick={() => {
                   navigate(
-                    `/${context}/repository?add_repo=true&repo_url=${latestVerData[0].urls[0]}&repo_name=${latestVerData[0].repository}`
+                    `/repository?add_repo=true&repo_url=${latestVerData[0].urls[0]}&repo_name=${latestVerData[0].repository}`
                   );
                 }}
                 className="underline text-sm cursor-pointer text-blue-600"
@@ -320,7 +320,7 @@ const Rollback = ({
   release: Release;
   installedRevision: ReleaseRevision;
 }) => {
-  const { chart, namespace, revision, context } = useParams();
+  const { chart, namespace, revision } = useParams();
   const navigate = useNavigateWithSearchParams();
 
   const [showRollbackDiff, setShowRollbackDiff] = useState(false);
@@ -330,9 +330,7 @@ const Rollback = ({
     useRollbackRelease({
       onSuccess: () => {
         navigate(
-          `/${context}/${namespace}/${chart}/installed/revision/${
-            revisionInt + 1
-          }`
+          `/${namespace}/${chart}/installed/revision/${revisionInt + 1}`
         );
         window.location.reload();
       },
@@ -398,7 +396,11 @@ const Rollback = ({
     );
   };
 
-  const RollbackModalContent = ({ dataResponse }: { dataResponse: any }) => {
+  const RollbackModalContent = ({
+    dataResponse,
+  }: {
+    dataResponse: UseQueryResult<string, unknown>;
+  }) => {
     const {
       data,
       isLoading,

frontend/src/components/revision/RevisionsList.tsx

@@ -18,10 +18,11 @@ export default function RevisionsList({
   selectedRevision,
 }: RevisionsListProps) {
   const navigate = useNavigateWithSearchParams();
-  const { context, namespace, chart } = useParams();
+  const { namespace, chart } = useParams();
+
   const changeRelease = (newRevision: number) => {
     navigate(
-      `/${context}/${namespace}/${chart}/installed/revision/${newRevision}`
+      `/${namespace}/${chart}/installed/revision/${newRevision}`
     );
   };