fix: header in ui (#105)

Signed-off-by: Mark Phelps <[email protected]>

ui/src/app/layout.tsx

@@ -2,14 +2,18 @@ import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
 import { Sidebar } from '@/components/sidebar';
 import { Outlet } from 'react-router-dom';
 import { Toaster } from '@/components/ui/sonner';
+import { Header } from '@/components/header';
 
 export default function Layout() {
   return (
     <SidebarProvider>
       <Sidebar />
       <SidebarInset>
         <main className="relative w-full flex-1">
-          <Outlet />
+          <Header className="absolute left-0 right-0 top-0 z-10" />
+          <div className="flex h-screen w-full">
+            <Outlet />
+          </div>
         </main>
         <Toaster />
       </SidebarInset>

ui/src/app/pipeline.tsx

@@ -2,23 +2,22 @@ import '@xyflow/react/dist/style.css';
 import { Pipeline as PipelineComponent } from '@/components/pipeline';
 import { ReactFlowProvider } from '@xyflow/react';
 import { useParams } from 'react-router-dom';
-import { Header } from '@/components/header';
+import { setSelectedPipeline } from '@/store/pipelinesSlice';
+import { useAppDispatch } from '@/store/hooks';
 
 export default function Pipeline() {
   const { pipelineId } = useParams();
+  const dispatch = useAppDispatch();
 
   if (!pipelineId) {
     return <div>Pipeline not found: {pipelineId}</div>;
   }
 
+  dispatch(setSelectedPipeline(pipelineId));
+
   return (
-    <>
-      <Header className="absolute left-0 right-0 top-0 z-10" pipelineId={pipelineId} />
-      <div className="flex h-screen w-full">
-        <ReactFlowProvider key={`provider-${pipelineId}`}>
-          <PipelineComponent pipelineId={pipelineId} />
-        </ReactFlowProvider>
-      </div>
-    </>
+    <ReactFlowProvider key={`provider-${pipelineId}`}>
+      <PipelineComponent pipelineId={pipelineId} />
+    </ReactFlowProvider>
   );
 }

ui/src/components/header.tsx

@@ -3,8 +3,11 @@ import { ChevronRight } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { SidebarTrigger } from './ui/sidebar';
 import { useGetSystemQuery } from '@/services/api';
+import { useAppSelector } from '@/store/hooks';
+import { getSelectedPipeline } from '@/store/pipelinesSlice';
 
-export function Header({ className, pipelineId }: { className?: string; pipelineId: string }) {
+export function Header({ className }: { className?: string }) {
+  const pipelineId = useAppSelector(getSelectedPipeline);
   const { data: system, isLoading } = useGetSystemQuery();
 
   return (

ui/src/components/sidebar.tsx

@@ -24,15 +24,19 @@ import { Link, useNavigate } from 'react-router-dom';
 import { Pipeline } from '@/types/pipeline';
 import { useListPipelinesQuery } from '@/services/api';
 import { useParams } from 'react-router-dom';
+import { setSelectedPipeline } from '@/store/pipelinesSlice';
+import { useAppDispatch } from '@/store/hooks';
 
 export function Sidebar() {
   const navigate = useNavigate();
   const { pipelineId } = useParams();
   const [open, setOpen] = useState(false);
   const { data: pipelinesData, isLoading } = useListPipelinesQuery();
+  const dispatch = useAppDispatch();
 
   const onPipelineSelect = (pipelineName: string) => {
     setOpen(false);
+    dispatch(setSelectedPipeline(pipelineName));
     navigate(`/pipelines/${pipelineName}`);
   };
 

ui/src/store/index.ts

@@ -1,9 +1,11 @@
 import { configureStore } from '@reduxjs/toolkit';
 import { api } from '@/services/api';
+import pipelinesReducer from './pipelinesSlice';
 
 export const store = configureStore({
   reducer: {
-    [api.reducerPath]: api.reducer
+    [api.reducerPath]: api.reducer,
+    pipelines: pipelinesReducer
   },
   middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(api.middleware)
 });

ui/src/store/pipelinesSlice.ts

@@ -0,0 +1,28 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { RootState } from '.';
+
+interface PipelinesState {
+  selectedPipeline: string;
+}
+
+const initialState: PipelinesState = {
+  selectedPipeline: ''
+};
+
+export const pipelinesSlice = createSlice({
+  name: 'pipelines',
+  initialState,
+  reducers: {
+    setSelectedPipeline: (state, action: PayloadAction<string>) => {
+      state.selectedPipeline = action.payload;
+    }
+  }
+});
+
+export const getSelectedPipeline = (state: RootState): string => state.pipelines.selectedPipeline;
+
+export const { setSelectedPipeline } = pipelinesSlice.actions;
+
+export default pipelinesSlice.reducer;
+
+export type { PipelinesState };