fix: maintain cluster context after adding repo (#616) (#641)

* fix: maintain cluster context after adding repo (#616)

* chore: rollback lock file changes as requested

frontend/src/components/LinkWithSearchParams.tsx

@@ -23,8 +23,10 @@ const LinkWithSearchParams = ({
 
   let prefixedUrl = to;
 
-  if (!clusterMode) {
+  if (!clusterMode && context) {
     prefixedUrl = `/${encodeURIComponent(context)}${to}`;
+  } else {
+    prefixedUrl = to;
   }
 
   const url = `${prefixedUrl}/?${params.toString()}`;

frontend/src/components/Tabs.tsx

@@ -18,7 +18,6 @@ export default function Tabs({ tabs, selectedTab }: TabsProps) {
   const moveTab = (tab: Tab) => {
     upsertSearchParams("tab", tab.value);
   };
-
   return (
     <div className="flex flex-col">
       <div className="flex pb-2">

frontend/src/components/modal/AddRepositoryModal.tsx

@@ -5,8 +5,8 @@ import useAlertError from "../../hooks/useAlertError";
 import useCustomSearchParams from "../../hooks/useCustomSearchParams";
 import { useAppContext } from "../../context/AppContext";
 import { useQueryClient } from "@tanstack/react-query";
-import { useNavigate } from "react-router";
 import apiService from "../../API/apiService";
+import useNavigateWithSearchParams from "../../hooks/useNavigateWithSearchParams";
 
 interface FormKeys {
   name: string;
@@ -33,7 +33,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
   const [isLoading, setIsLoading] = useState(false);
   const alertError = useAlertError();
   const { setSelectedRepo } = useAppContext();
-  const navigate = useNavigate();
+  const navigate = useNavigateWithSearchParams();
   const queryClient = useQueryClient();
 
   const addRepository = async () => {
@@ -58,7 +58,8 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
         queryKey: ["helm", "repositories"],
       });
       setSelectedRepo(formData.name || "");
-      await navigate(`/repository/${formData.name}`, {
+      const path = `/repository/${formData.name}`;
+      await navigate(path, {
         replace: true,
       });
     } catch (err) {
@@ -68,6 +69,13 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
       });
     } finally {
       setIsLoading(false);
+      setFormData({
+        name: "",
+        url: "",
+        username: "",
+        password: "",
+      });
+      onClose();
     }
   };
 

frontend/src/layout/Header.tsx

@@ -76,7 +76,7 @@ export default function Header() {
           <ul className="flex w-full items-center md:mt-0 md:flex-row md:justify-between md:border-0 md:text-sm md:font-normal">
             <li>
               <LinkWithSearchParams
-                to={"installed"}
+                to={"/installed"}
                 exclude={["tab"]}
                 className={getBtnStyle("installed")}
               >
@@ -85,7 +85,7 @@ export default function Header() {
             </li>
             <li>
               <LinkWithSearchParams
-                to={"repository"}
+                to={"/repository"}
                 exclude={["tab"]}
                 end={false}
                 className={getBtnStyle("repository")}

frontend/src/pages/Repository.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useEffectEvent, useCallback } from "react";
+import { useMemo, useEffect, useCallback } from "react";
 
 import RepositoriesList from "../components/repository/RepositoriesList";
 import RepositoryViewer from "../components/repository/RepositoryViewer";
@@ -11,7 +11,7 @@ import useNavigateWithSearchParams from "../hooks/useNavigateWithSearchParams";
 function RepositoryPage() {
   const { selectedRepo: repoFromParams, context } = useParams();
   const navigate = useNavigateWithSearchParams();
-  const { setSelectedRepo, selectedRepo } = useAppContext();
+  const { setSelectedRepo } = useAppContext();
 
   const navigateTo = useCallback(
     async (url: string, ...restArgs: NavigateOptions[]) => {
@@ -21,12 +21,9 @@ function RepositoryPage() {
   );
 
   const handleRepositoryChanged = (selectedRepository: Repository) => {
-    void navigateTo(
+    void navigateTo(`/repository/${selectedRepository.name}`, {
-      context
+      replace: true,
-        ? `/${encodeURIComponent(context)}/repository/${selectedRepository.name}`
+    });
-        : `/repository/${selectedRepository.name}`,
-      { replace: true }
-    );
   };
 
   useEffect(() => {
@@ -34,31 +31,14 @@ function RepositoryPage() {
       setSelectedRepo(repoFromParams);
     }
   }, [setSelectedRepo, repoFromParams]);
-
-  useEffect(() => {
-    if (selectedRepo && !repoFromParams) {
-      void navigateTo(
-        context
-          ? `/${encodeURIComponent(context)}/repository/${selectedRepo}`
-          : `/repository/${selectedRepo}`,
-        { replace: true }
-      );
-    }
-  }, [selectedRepo, repoFromParams, context, navigateTo]);
-
   const { data: repositories = [], isSuccess } = useGetRepositories();
 
-  const onSuccess = useEffectEvent(() => {
-    if (repositories && repositories.length && !repoFromParams) {
-      handleRepositoryChanged(repositories[0]);
-    }
-  });
-
   useEffect(() => {
-    if (repositories.length && isSuccess) {
+    if (repositories.length && isSuccess && !repoFromParams) {
-      onSuccess();
+      const firstRepo = repositories[0];
+      void navigateTo(`/repository/${firstRepo.name}`, { replace: true });
     }
-  }, [repositories, isSuccess]);
+  }, [repositories, isSuccess, repoFromParams, context, navigateTo]);
 
   const selectedRepository = useMemo(() => {
     if (repoFromParams) {