@motiadev/workbench 0.12.1-beta.159 → 0.13.0-beta.161

package/dist/src/components/flow/flow-page.d.ts

@@ -1 +1 @@
-export declare const FlowPage: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const FlowPage: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element | null>;

package/dist/src/components/flow/flow-page.js

@@ -1,17 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useStreamItem } from '@motiadev/stream-client-react';
+import { Button, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@motiadev/ui';
 import { ReactFlowProvider } from '@xyflow/react';
+import { ExternalLink, Workflow } from 'lucide-react';
 import { memo, useMemo } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { motiaAnalytics } from '@/lib/motia-analytics';
 import { useFlowStore } from '@/stores/use-flow-store';
 import { FlowView } from './flow-view';
 export const FlowPage = memo(() => {
     const selectedFlowId = useFlowStore((state) => state.selectedFlowId);
+    const flows = useFlowStore(useShallow((state) => Object.values(state.flows)));
     const streamItemArgs = useMemo(() => ({ streamName: '__motia.flows', groupId: 'default', id: selectedFlowId ?? '' }), [selectedFlowId]);
     const { data: flow } = useStreamItem(streamItemArgs);
     const streamItemArgsConfig = useMemo(() => ({ streamName: '__motia.flowsConfig', groupId: 'default', id: selectedFlowId ?? '' }), [selectedFlowId]);
     const { data: flowConfig } = useStreamItem(streamItemArgsConfig);
-    if (!flow || flow.error)
-        return (_jsx("div", { className: "w-full h-full bg-background flex flex-col items-center justify-center", children: _jsx("p", { children: flow?.error }) }));
+    if (flows.length === 0 || flow?.error) {
+        return (_jsx("div", { className: "flex w-full h-full bg-background", children: _jsxs(Empty, { children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(Workflow, {}) }), flow?.error ? (_jsxs(_Fragment, { children: [_jsx(EmptyTitle, { children: "Error loading flow" }), _jsx(EmptyDescription, { children: flow.error })] })) : (_jsxs(_Fragment, { children: [_jsx(EmptyTitle, { children: "No flows registered" }), _jsx(EmptyDescription, { children: "You haven't registered any flows yet. Get started by registering your first flow." })] }))] }), _jsx(EmptyContent, { children: _jsx(Button, { variant: "link", asChild: true, size: "sm", children: _jsxs("a", { href: "https://www.motia.dev/docs/development-guide/flows", target: "_blank", rel: "noopener noreferrer", onClick: () => motiaAnalytics.track('flows_docs_link_clicked'), children: ["Learn more ", _jsx(ExternalLink, {})] }) }) })] }) }));
+    }
+    if (!flow)
+        return null;
     return (_jsx(ReactFlowProvider, { children: _jsx(FlowView, { flow: flow, flowConfig: flowConfig }) }));
 });
 FlowPage.displayName = 'FlowPage';

package/dist/src/components/flow/flow-tab-menu-item.d.ts

@@ -1 +1 @@
-export declare const FlowTabMenuItem: () => import("react/jsx-runtime").JSX.Element | null;
+export declare const FlowTabMenuItem: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/flow/flow-tab-menu-item.js

@@ -10,12 +10,9 @@ export const FlowTabMenuItem = () => {
     const selectFlowId = useFlowStore((state) => state.selectFlowId);
     const flows = useFlowStore(useShallow((state) => Object.values(state.flows)));
     const selectedFlowId = useFlowStore((state) => state.selectedFlowId);
-    if (flows.length === 0) {
-        return null;
-    }
     const handleFlowSelect = (flowId) => {
         selectFlowId(flowId);
         motiaAnalytics.track('flow_selected', { flow: flowId });
     };
-    return (_jsxs("div", { className: "flex flex-row justify-center items-center gap-2 cursor-pointer", children: [_jsx(Workflow, {}), selectedFlowId ?? 'No flow selected', _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("div", { className: "flex flex-row justify-center items-center gap-2 cursor-pointer", "data-testid": "flows-dropdown-trigger", children: _jsx(ChevronsUpDown, { className: "size-4" }) }) }), _jsx(DropdownMenuContent, { className: "bg-background text-foreground flows-dropdown", children: flows.map((item) => (_jsx(DropdownMenuItem, { "data-testid": `dropdown-${item}`, className: "cursor-pointer gap-2 flow-link", onClick: () => handleFlowSelect(item), children: item }, `dropdown-${item}`))) })] })] }));
+    return (_jsxs("div", { className: "flex flex-row justify-center items-center gap-2 cursor-pointer", children: [_jsx(Workflow, {}), flows.length > 0 && selectedFlowId ? selectedFlowId : 'Flows', flows.length > 0 && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("div", { className: "flex flex-row justify-center items-center gap-2 cursor-pointer", "data-testid": "flows-dropdown-trigger", children: _jsx(ChevronsUpDown, { className: "size-4" }) }) }), _jsx(DropdownMenuContent, { className: "bg-background text-foreground flows-dropdown", children: flows.map((item) => (_jsx(DropdownMenuItem, { "data-testid": `dropdown-${item}`, className: "cursor-pointer gap-2 flow-link", onClick: () => handleFlowSelect(item), children: item }, `dropdown-${item}`))) })] }))] }));
 };

package/dist/src/hooks/use-fetch-flows.js

@@ -5,6 +5,7 @@ const streamGroupArgs = { streamName: '__motia.flows', groupId: 'default' };
 export const useFetchFlows = () => {
     const setFlows = useFlowStore((state) => state.setFlows);
     const selectFlowId = useFlowStore((state) => state.selectFlowId);
+    const clearSelectedFlowId = useFlowStore((state) => state.clearSelectedFlowId);
     const selectedFlowId = useFlowStore((state) => state.selectedFlowId);
     const { data: flows } = useStreamGroup(streamGroupArgs);
     useEffect(() => {
@@ -12,9 +13,14 @@ export const useFetchFlows = () => {
             setFlows(flows.map((flow) => flow.id));
     }, [flows, setFlows]);
     useEffect(() => {
-        if ((!selectedFlowId && flows.length > 0) ||
-            (selectedFlowId && flows.length > 0 && !flows.find((flow) => flow.id === selectedFlowId))) {
+        const hasFlows = flows.length > 0;
+        const isSelectedFlowValid = selectedFlowId && flows.some((flow) => flow.id === selectedFlowId);
+        if (!hasFlows && selectedFlowId) {
+            clearSelectedFlowId();
+            return;
+        }
+        if (hasFlows && (!selectedFlowId || !isSelectedFlowValid)) {
             selectFlowId(flows[0].id);
         }
-    }, [flows, selectedFlowId, selectFlowId]);
+    }, [flows, selectedFlowId, selectFlowId, clearSelectedFlowId]);
 };

package/dist/src/stores/use-flow-store.d.ts

@@ -1,6 +1,7 @@
 type UseFlowStore = {
     selectedFlowId?: string;
     selectFlowId: (flowId: string) => void;
+    clearSelectedFlowId: () => void;
     flows: string[];
     setFlows: (flows: string[]) => void;
 };

package/dist/src/stores/use-flow-store.js

@@ -9,6 +9,7 @@ export const useFlowStore = create(persist((set) => ({
         }
         return { selectedFlowId: flowId };
     }),
+    clearSelectedFlowId: () => set({ selectedFlowId: undefined }),
 }), {
     name: 'motia-flow-storage',
     storage: createJSONStorage(() => localStorage),