journey details edit modal

apps/ui/src/ui/Button.tsx

@@ -46,6 +46,7 @@ const Button = forwardRef(function Button(props: ButtonProps, ref: Ref<HTMLButto
         children,
         isLoading = false,
         disabled,
+        style,
     } = props
     return (
         <button
@@ -60,6 +61,7 @@ const Button = forwardRef(function Button(props: ButtonProps, ref: Ref<HTMLButto
             )}
             ref={ref}
             disabled={disabled ?? isLoading}
+            style={style}
         >
             {icon && (<span className="button-icon">{icon}</span>)}
             {children}

apps/ui/src/ui/Sidebar.tsx

@@ -24,15 +24,23 @@ export default function Sidebar({ children, links }: PropsWithChildren<SidebarPr
     const [preferences, setPreferences] = useContext(PreferencesContext)
     const [recents] = useResolver(useCallback(async () => {
         const recentIds = getRecentProjects().filter(p => p.id !== project.id).map(p => p.id)
+        const recents: Array<typeof project> = []
+        if (recentIds.length) {
+            const projects = await api.projects.search({
+                page: 0,
+                itemsPerPage: recentIds.length,
+                id: recentIds,
+            }).then(r => r.results ?? [])
+            for (const id of recentIds) {
+                const recent = projects.find(p => p.id === id)
+                if (recent) {
+                    recents.push(recent)
+                }
+            }
+        }
         return [
             project,
-            ...recentIds.length
+            ...recents,
-                ? await api.projects.search({
-                    page: 0,
-                    itemsPerPage: recentIds.length,
-                    id: recentIds,
-                }).then(r => r.results ?? [])
-                : [],
             {
                 id: 0,
                 name: 'View All',

apps/ui/src/views/journey/JourneyEditor.tsx

@@ -40,6 +40,7 @@ import Button from '../../ui/Button'
 import Alert from '../../ui/Alert'
 import Modal from '../../ui/Modal'
 import { toast } from 'react-hot-toast'
+import { JourneyForm } from './JourneyForm'
 
 const getStepType = (type: string) => (type ? journeySteps[type as keyof typeof journeySteps] as JourneyStepType : null) ?? null
 
@@ -315,16 +316,18 @@ export default function JourneyEditor() {
     const wrapper = useRef<HTMLDivElement>(null)
 
     const [project] = useContext(ProjectContext)
-    const [journey] = useContext(JourneyContext)
+    const [journey, setJourney] = useContext(JourneyContext)
 
     const [nodes, setNodes, onNodesChange] = useNodesState([])
     const [edges, setEdges, onEdgesChange] = useEdgesState([])
 
+    const journeyId = journey.id
+
     const loadSteps = useCallback(async () => {
 
         const [steps, stats] = await Promise.all([
-            api.journeys.steps.get(project.id, journey.id),
+            api.journeys.steps.get(project.id, journeyId),
-            api.journeys.steps.stats(project.id, journey.id),
+            api.journeys.steps.stats(project.id, journeyId),
         ])
 
         const { edges, nodes } = stepsToNodes(steps, stats)
@@ -332,7 +335,7 @@ export default function JourneyEditor() {
         setNodes(nodes)
         setEdges(edges)
 
-    }, [project, journey])
+    }, [project, journeyId])
 
     useEffect(() => {
         void loadSteps()
@@ -408,6 +411,8 @@ export default function JourneyEditor() {
 
     }, [setNodes, flowInstance, project, journey])
 
+    const [editOpen, setEditOpen] = useState(false)
+
     return (
         <Modal
             size="fullscreen"
@@ -415,13 +420,22 @@ export default function JourneyEditor() {
             open={true}
             onClose={() => navigate('../journeys')}
             actions={
-                <Button
+                <>
-                    onClick={saveSteps}
+                    <Button
-                    isLoading={saving}
+                        variant="secondary"
-                    variant="primary"
+                        style={{ marginRight: 5 }}
-                >
+                        onClick={() => setEditOpen(true)}
-                    {'Save'}
+                    >
-                </Button>
+                        {'Edit Details'}
+                    </Button>
+                    <Button
+                        onClick={saveSteps}
+                        isLoading={saving}
+                        variant="primary"
+                    >
+                        {'Save'}
+                    </Button>
+                </>
             }
         >
             <div className="journey">
@@ -470,6 +484,19 @@ export default function JourneyEditor() {
                     </ReactFlow>
                 </div>
             </div>
+            <Modal
+                open={editOpen}
+                onClose={setEditOpen}
+                title="Edit Journey Details"
+            >
+                <JourneyForm
+                    journey={journey}
+                    onSaved={async journey => {
+                        setEditOpen(false)
+                        setJourney(journey)
+                    }}
+                />
+            </Modal>
         </Modal>
     )
 }