back button + popups (#2707)

* back button + popups

* remove logs

web/src/app/admin/assistants/AssistantEditor.tsx

@@ -106,6 +106,7 @@ export function AssistantEditor({
   admin?: boolean;
 }) {
   const router = useRouter();
+
   const { popup, setPopup } = usePopup();
 
   const colorOptions = [

web/src/app/admin/configuration/search/page.tsx

@@ -19,7 +19,9 @@ export interface EmbeddingDetails {
   default_model_id?: number;
   name: string;
 }
+
 import { EmbeddingIcon } from "@/components/icons/icons";
+import { usePopupFromQuery } from "@/components/popup/PopupFromQuery";
 
 import Link from "next/link";
 import { SavedSearchSettings } from "../../embeddings/interfaces";
@@ -29,6 +31,12 @@ import { SettingsContext } from "@/components/settings/SettingsProvider";
 
 function Main() {
   const settings = useContext(SettingsContext);
+  const { popup: searchSettingsPopup } = usePopupFromQuery({
+    "search-settings": {
+      message: `Changed search settings successfully`,
+      type: "success",
+    },
+  });
   const {
     data: currentEmeddingModel,
     isLoading: isLoadingCurrentModel,
@@ -74,6 +82,7 @@ function Main() {
 
   return (
     <div className="h-screen">
+      {searchSettingsPopup}
       {!futureEmbeddingModel ? (
         <>
           {settings?.settings.needs_reindexing && (

web/src/app/admin/connectors/[connector]/AddConnectorPage.tsx

@@ -41,7 +41,7 @@ import { Formik } from "formik";
 import { AccessTypeForm } from "@/components/admin/connectors/AccessTypeForm";
 import { AccessTypeGroupSelector } from "@/components/admin/connectors/AccessTypeGroupSelector";
 import NavigationRow from "./NavigationRow";
-
+import { useRouter } from "next/navigation";
 export interface AdvancedConfig {
   refreshFreq: number;
   pruneFreq: number;
@@ -111,6 +111,8 @@ export default function AddConnector({
 }: {
   connector: ConfigurableSources;
 }) {
+  const router = useRouter();
+
   // State for managing credentials and files
   const [currentCredential, setCurrentCredential] =
     useState<Credential<any> | null>(null);
@@ -201,13 +203,7 @@ export default function AddConnector({
   };
 
   const onSuccess = () => {
-    setPopup({
-      message: "Connector created! Redirecting to connector home page",
-      type: "success",
-    });
-    setTimeout(() => {
-      window.open("/admin/indexing/status", "_self");
-    }, 1000);
+    router.push("/admin/indexing/status?message=connector-created");
   };
 
   return (

web/src/app/admin/embeddings/pages/EmbeddingFormPage.tsx

@@ -25,9 +25,11 @@ import RerankingDetailsForm from "../RerankingFormPage";
 import { useEmbeddingFormContext } from "@/components/context/EmbeddingContext";
 import { Modal } from "@/components/Modal";
 
+import { useRouter } from "next/navigation";
 export default function EmbeddingForm() {
   const { formStep, nextFormStep, prevFormStep } = useEmbeddingFormContext();
   const { popup, setPopup } = usePopup();
+  const router = useRouter();
 
   const [advancedEmbeddingDetails, setAdvancedEmbeddingDetails] =
     useState<AdvancedSearchConfiguration>({
@@ -172,10 +174,6 @@ export default function EmbeddingForm() {
 
     const response = await updateSearchSettings(values);
     if (response.ok) {
-      setPopup({
-        message: "Updated search settings successfully",
-        type: "success",
-      });
       return true;
     } else {
       setPopup({ message: "Failed to update search settings", type: "error" });
@@ -184,14 +182,7 @@ export default function EmbeddingForm() {
   };
 
   const navigateToEmbeddingPage = (changedResource: string) => {
-    setPopup({
-      message: `Changed ${changedResource} successfully. Redirecting to embedding page`,
-      type: "success",
-    });
-
-    setTimeout(() => {
-      window.open("/admin/configuration/search", "_self");
-    }, 2000);
+    router.push("/admin/configuration/search?message=search-settings");
   };
 
   const onConfirm = async () => {

web/src/app/admin/indexing/status/page.tsx

@@ -11,8 +11,15 @@ import { AdminPageTitle } from "@/components/admin/Title";
 import Link from "next/link";
 import { Button, Text } from "@tremor/react";
 import { useConnectorCredentialIndexingStatus } from "@/lib/hooks";
+import { usePopupFromQuery } from "@/components/popup/PopupFromQuery";
 
 function Main() {
+  const { popup } = usePopupFromQuery({
+    "connector-created": {
+      message: "Connector created successfully",
+      type: "success",
+    },
+  });
   const {
     data: indexAttemptData,
     isLoading: indexAttemptIsLoading,
@@ -67,10 +74,13 @@ function Main() {
   });
 
   return (
-    <CCPairIndexingStatusTable
-      ccPairsIndexingStatuses={indexAttemptData}
-      editableCcPairsIndexingStatuses={editableIndexAttemptData}
-    />
+    <>
+      {popup}
+      <CCPairIndexingStatusTable
+        ccPairsIndexingStatuses={indexAttemptData}
+        editableCcPairsIndexingStatuses={editableIndexAttemptData}
+      />
+    </>
   );
 }
 

web/src/components/context/EmbeddingContext.tsx

@@ -57,9 +57,15 @@ export const EmbeddingFormProvider: React.FC<{
   useEffect(() => {
     // Update URL when formStep changes
     const updatedSearchParams = new URLSearchParams(searchParams.toString());
+    const existingStep = updatedSearchParams.get("step");
     updatedSearchParams.set("step", formStep.toString());
     const newUrl = `${pathname}?${updatedSearchParams.toString()}`;
-    router.push(newUrl);
+
+    if (!existingStep) {
+      router.replace(newUrl);
+    } else if (newUrl !== pathname) {
+      router.push(newUrl);
+    }
   }, [formStep, router, pathname, searchParams]);
 
   // Update formStep when URL changes

web/src/components/context/FormContext.tsx

@@ -57,12 +57,17 @@ export const FormProvider: React.FC<{
   useEffect(() => {
     // Update URL when formStep changes
     const updatedSearchParams = new URLSearchParams(searchParams.toString());
+    const existingStep = updatedSearchParams.get("step");
     updatedSearchParams.set("step", formStep.toString());
     const newUrl = `${pathname}?${updatedSearchParams.toString()}`;
-    router.push(newUrl);
+
+    if (!existingStep) {
+      router.replace(newUrl);
+    } else if (newUrl !== pathname) {
+      router.push(newUrl);
+    }
   }, [formStep, router, pathname, searchParams]);
 
-  // Update formStep when URL changes
   useEffect(() => {
     const stepFromUrl = parseInt(searchParams.get("step") || "0", 10);
     if (stepFromUrl !== formStep) {

web/src/components/popup/PopupFromQuery.tsx

@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+
+import { usePopup } from "../admin/connectors/Popup";
+import { PopupSpec } from "../admin/connectors/Popup";
+import { useRouter } from "next/navigation";
+
+interface PopupMessages {
+  [key: string]: PopupSpec;
+}
+
+export const usePopupFromQuery = (messages: PopupMessages) => {
+  const router = useRouter();
+  const { popup, setPopup } = usePopup();
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(window.location.search);
+    // Get the value for search param with key "message"
+    const messageValue = searchParams.get("message");
+    // Check if any key from messages object is present in search params
+    if (messageValue && messageValue in messages) {
+      const popupMessage = messages[messageValue];
+      router.replace(window.location.pathname);
+      setPopup(popupMessage);
+    }
+  }, []);
+
+  return { popup };
+};