From 00a761fb5bd3e4af2668dd5f2e5c8dc5fe0837d6 Mon Sep 17 00:00:00 2001 From: Shreya Shankar Date: Tue, 10 Dec 2024 11:04:26 -0800 Subject: [PATCH] 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 --- website/src/app/playground/page.tsx | 28 ++++---- website/src/components/NamespaceDialog.tsx | 5 ++ website/src/contexts/PipelineContext.tsx | 80 +++++++++++----------- 3 files changed, 59 insertions(+), 54 deletions(-) diff --git a/website/src/app/playground/page.tsx b/website/src/app/playground/page.tsx index afdfcb0a..28d82f8f 100644 --- 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 = () => {

DocETL

- {isMounted && ( + {namespace && ( ({namespace}) )}
@@ -595,8 +595,8 @@ const CodeEditorPipelineApp: React.FC = () => { onSave={(newNamespace) => { setNamespace(newNamespace); setShowNamespaceDialog(false); - saveProgress(); }} + clearPipelineState={clearPipelineState} /> diff --git a/website/src/components/NamespaceDialog.tsx b/website/src/components/NamespaceDialog.tsx index 9461fe0e..8cbad242 100644 --- a/website/src/components/NamespaceDialog.tsx +++ b/website/src/components/NamespaceDialog.tsx @@ -20,6 +20,7 @@ interface NamespaceDialogProps { onOpenChange: (open: boolean) => void; currentNamespace: string | null; onSave: (namespace: string) => void; + clearPipelineState: () => void; } export function NamespaceDialog({ @@ -27,6 +28,7 @@ export function NamespaceDialog({ 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 index f580f3bc..5882c8f7 100644 --- 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( - ( - 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 = ( + 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) => {