@durablex/react-ui 0.1.0-beta.3 → 0.1.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@durablex/react-ui",
-  "version": "0.1.0-beta.3",
+  "version": "0.1.0-beta.4",
   "description": "Styled, themeable React components for durablex - the shell, run tables, and status views built on @durablex/react.",
   "license": "Apache-2.0",
   "type": "module",

package/src/components/RunsView.tsx

@@ -1,11 +1,12 @@
 import { X } from "lucide-react";
+import { useCallback, useState } from "react";
 import { toast } from "sonner";
 import { type TriggerKind, useReplayRun, useRuns, useRunStats } from "@durablex/react";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../ui/resizable";
 import { useKeysetPager } from "../hooks/use-keyset-pager";
 import { ALL_FILTER, type RunTypeFilter, type StatusFilter } from "../lib/run-filters";
-import { type RunSort, type RunSortKey, toggleRunSort } from "../lib/run-sort";
-import { timeLabel, windowSince } from "../lib/time-range";
+import { DEFAULT_RUN_SORT, type RunSort, type RunSortKey, toggleRunSort } from "../lib/run-sort";
+import { DEFAULT_TIME_RANGE, timeLabel, windowSince } from "../lib/time-range";
 import { BulkReplayButton } from "./BulkReplayButton";
 import { CursorPager } from "./CursorPager";
 import { RetryFromStepButton } from "./RetryFromStepButton";
@@ -37,14 +38,57 @@ export interface RunsViewState {
   replayOf: string | null;
 }
 
-export interface RunsViewProps {
+export const DEFAULT_RUNS_VIEW_STATE: RunsViewState = {
+  status: ALL_FILTER,
+  app: ALL_FILTER,
+  runType: ALL_FILTER,
+  time: DEFAULT_TIME_RANGE,
+  q: "",
+  deep: false,
+  sort: DEFAULT_RUN_SORT,
+  run: null,
+  event: null,
+  replayOf: null,
+};
+
+// Local-state backing for consumers that do not wire RunsView to their own store
+// (the OSS dashboard backs it with the URL instead). `initial` seeds deep-links.
+export function useRunsViewState(initial?: Partial<RunsViewState>): {
   state: RunsViewState;
-  onChange: (patch: Partial<RunsViewState>, opts?: { push?: boolean }) => void;
+  onChange: (patch: Partial<RunsViewState>) => void;
+} {
+  const [state, setState] = useState<RunsViewState>(() => ({
+    ...DEFAULT_RUNS_VIEW_STATE,
+    ...initial,
+  }));
+  const onChange = useCallback(
+    (patch: Partial<RunsViewState>) => setState((s) => ({ ...s, ...patch })),
+    [],
+  );
+  return { state, onChange };
+}
+
+export interface RunsViewProps {
+  // Controlled: pass both to back the view with your own store. Omit both to run
+  // uncontrolled with internal state seeded by initialState.
+  state?: RunsViewState;
+  onChange?: (patch: Partial<RunsViewState>, opts?: { push?: boolean }) => void;
+  initialState?: Partial<RunsViewState>;
   // Omit the write surface (run controls, replay, bulk replay) for a read-only embed.
   readOnly?: boolean;
 }
 
-export function RunsView({ state, onChange, readOnly = false }: RunsViewProps) {
+export function RunsView({
+  state: controlledState,
+  onChange: controlledOnChange,
+  initialState,
+  readOnly = false,
+}: RunsViewProps) {
+  // Uncontrolled by default (own local state); a consumer that wants to back the
+  // view with its own store (the OSS dashboard uses the URL) passes state + onChange.
+  const local = useRunsViewState(initialState);
+  const state = controlledState ?? local.state;
+  const onChange = controlledOnChange ?? local.onChange;
   const {
     app,
     runType,

package/src/components/WorkflowsView.tsx

@@ -19,7 +19,7 @@ export function WorkflowsView({
   onOpenRun,
   renderRunAction,
 }: {
-  onOpenRun(runId: string): void;
+  onOpenRun?: (runId: string) => void;
   renderRunAction?: (workflow: WorkflowDef) => ReactNode;
 }) {
   const { data, isLoading, isError, error } = useWorkflows();
@@ -91,7 +91,7 @@ export function WorkflowsView({
               key={selectedKey ?? ""}
               workflow={selected}
               onClose={() => setSelectedKey(null)}
-              onOpenRun={onOpenRun}
+              onOpenRun={onOpenRun ?? (() => {})}
               renderRunAction={renderRunAction}
             />
           </ResizablePanel>

package/src/index.ts

@@ -6,7 +6,11 @@ export { Topbar } from "./shell/Topbar";
 export { RunInspector } from "./components/RunInspector";
 export type { RunInspectorProps } from "./components/RunInspector";
 export { RunInspectorActions } from "./components/RunInspectorActions";
-export { RunsView } from "./components/RunsView";
+export {
+  DEFAULT_RUNS_VIEW_STATE,
+  RunsView,
+  useRunsViewState,
+} from "./components/RunsView";
 export type { RunsViewProps, RunsViewState } from "./components/RunsView";
 export { Meta } from "./components/Meta";
 export { JsonBlock } from "./components/JsonBlock";