fix: render new namespace in header (#240)

* fix: add strict jinja templating * fix: tests had an error * fix: force a non-null namespace * fix: more helpful error message * fix: in prod we should reload the namespace indicator
ucbepic · Dec 10, 2024 · 00a761f · 00a761f
1 parent ebbdc4d
commit 00a761f
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 54 deletions.
diff --git a/website/src/app/playground/page.tsx b/website/src/app/playground/page.tsx
@@ -166,18 +166,6 @@ const RightPanelIcon: React.FC<{ isActive: boolean }> = ({ isActive }) => (
 );
 
 const CodeEditorPipelineApp: React.FC = () => {
-  const [isMounted, setIsMounted] = useState(false);
-  const [showFileExplorer, setShowFileExplorer] = useState(true);
-  const [showOutput, setShowOutput] = useState(true);
-  const [showDatasetView, setShowDatasetView] = useState(false);
-  const [showChat, setShowChat] = useState(false);
-  const [showNamespaceDialog, setShowNamespaceDialog] = useState(false);
-  const { theme, setTheme } = useTheme();
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
   const {
     currentFile,
     setCurrentFile,
@@ -191,6 +179,18 @@ const CodeEditorPipelineApp: React.FC = () => {
     setNamespace,
   } = usePipelineContext();
 
+  const [isMounted, setIsMounted] = useState(false);
+  const [showFileExplorer, setShowFileExplorer] = useState(true);
+  const [showOutput, setShowOutput] = useState(true);
+  const [showDatasetView, setShowDatasetView] = useState(false);
+  const [showChat, setShowChat] = useState(false);
+  const [showNamespaceDialog, setShowNamespaceDialog] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, [namespace]);
+
   useEffect(() => {
     const savedNamespace = localStorage.getItem(localStorageKeys.NAMESPACE_KEY);
     if (!savedNamespace) {
@@ -445,7 +445,7 @@ const CodeEditorPipelineApp: React.FC = () => {
           <div className="flex items-center gap-2">
             <Scroll className="text-primary" size={20} />
             <h1 className="text-lg font-bold text-primary">DocETL</h1>
-            {isMounted && (
+            {namespace && (
               <span className="text-sm text-gray-600">({namespace})</span>
             )}
           </div>
@@ -595,8 +595,8 @@ const CodeEditorPipelineApp: React.FC = () => {
           onSave={(newNamespace) => {
             setNamespace(newNamespace);
             setShowNamespaceDialog(false);
-            saveProgress();
           }}
+          clearPipelineState={clearPipelineState}
         />
       </div>
     </BookmarkProvider>

diff --git a/website/src/components/NamespaceDialog.tsx b/website/src/components/NamespaceDialog.tsx
@@ -20,13 +20,15 @@ interface NamespaceDialogProps {
   onOpenChange: (open: boolean) => void;
   currentNamespace: string | null;
   onSave: (namespace: string) => void;
+  clearPipelineState: () => void;
 }
 
 export function NamespaceDialog({
   open,
   onOpenChange,
   currentNamespace,
   onSave,
+  clearPipelineState,
 }: NamespaceDialogProps) {
   const [namespace, setNamespace] = useState(currentNamespace || "");
   const [isChecking, setIsChecking] = useState(false);
@@ -72,8 +74,11 @@ export function NamespaceDialog({
         setTimeout(() => setShake(false), 500);
       } else {
         onSave(trimmedNamespace);
+        console.log(localStorage);
         setShowWarning(false);
         setShake(false);
+        clearPipelineState();
+        window.location.reload();
       }
     } catch (error) {
       console.error("Error checking namespace:", error);

diff --git a/website/src/contexts/PipelineContext.tsx b/website/src/contexts/PipelineContext.tsx
@@ -325,7 +325,7 @@ export const PipelineProvider: React.FC<{ children: React.ReactNode }> = ({
     stateRef.current = state;
   }, [state]);
 
-  const saveProgress = useCallback(() => {
+  const saveProgress = () => {
     localStorage.setItem(
       localStorageKeys.OPERATIONS_KEY,
       JSON.stringify(stateRef.current.operations)
@@ -391,12 +391,16 @@ export const PipelineProvider: React.FC<{ children: React.ReactNode }> = ({
       JSON.stringify(stateRef.current.namespace)
     );
     setUnsavedChanges(false);
-  }, []);
+  };
 
-  const clearPipelineState = useCallback(() => {
+  const clearPipelineState = () => {
+    // Clear all localStorage items
     Object.values(localStorageKeys).forEach((key) => {
-      localStorage.removeItem(key);
+      if (key !== localStorageKeys.NAMESPACE_KEY) {
+        localStorage.removeItem(key);
+      }
     });
+
     setState({
       operations: initialOperations,
       currentFile: null,
@@ -414,45 +418,41 @@ export const PipelineProvider: React.FC<{ children: React.ReactNode }> = ({
       autoOptimizeCheck: false,
       highLevelGoal: "",
       systemPrompt: { datasetDescription: null, persona: null },
-      namespace: null,
+      namespace: state.namespace || null,
     });
     setUnsavedChanges(false);
-    console.log("Pipeline state cleared!");
-  }, []);
-
-  const setStateAndUpdate = useCallback(
-    <K extends keyof PipelineState>(
-      key: K,
-      value:
-        | PipelineState[K]
-        | ((prevState: PipelineState[K]) => PipelineState[K])
-    ) => {
-      setState((prevState) => {
-        const newValue =
-          typeof value === "function"
-            ? (value as (prev: PipelineState[K]) => PipelineState[K])(
-                prevState[key]
-              )
-            : value;
-        if (newValue !== prevState[key]) {
-          if (key === "namespace") {
-            clearPipelineState();
-            localStorage.setItem(
-              localStorageKeys.NAMESPACE_KEY,
-              JSON.stringify(newValue)
-            );
-            window.location.reload();
-            return prevState;
-          } else {
-            setUnsavedChanges(true);
-            return { ...prevState, [key]: newValue };
-          }
+  };
+
+  const setStateAndUpdate = <K extends keyof PipelineState>(
+    key: K,
+    value:
+      | PipelineState[K]
+      | ((prevState: PipelineState[K]) => PipelineState[K])
+  ) => {
+    setState((prevState) => {
+      const newValue =
+        typeof value === "function"
+          ? (value as (prev: PipelineState[K]) => PipelineState[K])(
+              prevState[key]
+            )
+          : value;
+      if (newValue !== prevState[key]) {
+        if (key === "namespace") {
+          localStorage.setItem(
+            localStorageKeys.NAMESPACE_KEY,
+            JSON.stringify(newValue)
+          );
+          const newVal = localStorage.getItem(localStorageKeys.NAMESPACE_KEY);
+          console.log(`Namespace changed to ${newVal}`);
+          return { ...prevState, [key]: newValue };
+        } else {
+          setUnsavedChanges(true);
+          return { ...prevState, [key]: newValue };
         }
-        return prevState;
-      });
-    },
-    [clearPipelineState]
-  );
+      }
+      return prevState;
+    });
+  };
 
   useEffect(() => {
     const handleBeforeUnload = (event: BeforeUnloadEvent) => {