OpenFn / OpenFn/lightning

`useWorkflowActions` shouldn't require a `LiveViewActionsProvider`

Open
#5,029 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Elixir
Stars
296
Forks
86
Avg merge
1d 13h
Merged PRs (30d)
50

Description

Depends on #4848

User story

As someone writing or testing a component that edits a job, edge or trigger, I
want to use the workflow actions without also mounting a navigation provider.

Details

useWorkflowActions returns about twenty workflow commands — updateJob,
addEdge, setEnabled, removeJob and so on. Its third line
(useWorkflow.tsx:377) is:

const { navigate } = useLiveViewActions();

which throws when no provider is mounted:

// LiveViewActionsContext.tsx:35-41
export function useLiveViewActions(): LiveViewActions {
  const context = useContext(LiveViewActionsContext);
  if (!context) {
    throw new Error('useLiveViewActions must be used within a LiveViewActionsProvider');
  }
  return context;
}

navigate is used once, at :446, rewriting the URL from /w/new to /w/:id
after a first save.

Despite the React setting, this context is not a React concern — the editor is
mounted inside a Phoenix LiveView, and the context is the bridge back to it.
CollaborativeEditor.tsx:247 fills it from four props the LiveView JS hook
injects, and navigate is a LiveView patch rather than client-side routing
(js/react/hooks/react-component.tsx:73-79):

navigate: (path, options) => {
  this.liveSocket.execJS(this.el, JSON.stringify([['patch', { replace, href: path }]]));
}

That's deliberate — the first-save URL rewrite has to go through LiveView so its
assigns and the browser URL stay in step.

So what every other consumer inherits isn't a navigation helper. It's a mount
requirement for a live handle to the host LiveView, in order to call updateEdge
or setEnabled: EdgeForm, EdgeInspector, JobForm, JobInspector,
WorkflowSettings, useTriggerDraft, useWebhookTrigger, GitHubSyncModal,
FullScreenIDE, Header, WorkflowEditor, AIAssistantPanelWrapper,
useValidation, useCreateWorkflowFlow.

No user-visible symptom. The cost is in tests.

How to see it

Render any inspector component that calls useWorkflowActionsEdgeForm, say
— inside StoreProvider but without LiveViewActionsProvider. It throws at
mount with useLiveViewActions must be used within a LiveViewActionsProvider,
which reads as unrelated to whatever the test was doing.

This already bit us: #5006 had to change
__helpers__/triggerInspectorHelpers.tsx and storeMocks.ts to keep unrelated
inspector tests mounting.

Implementation notes

Export the context and read it optionally, then guard the one call site.

// LiveViewActionsContext.tsx — currently module-private
export const LiveViewActionsContext = createContext<LiveViewActions | null>(null);

// useWorkflow.tsx:377
const liveViewActions = useContext(LiveViewActionsContext);

// useWorkflow.tsx:446
liveViewActions?.navigate(newUrl, { replace: true });

Then drop LiveViewActionsProvider from the test helpers that only added it to
satisfy this.

Don't try to move the read to the callers instead — it looks tidier and
doesn't work. navigate is called from handleSaveSuccess, which is nested
inside the saveWorkflow closure that useWorkflowActions returns. Every caller
of saveWorkflowHeader, WorkflowEditor, useCreateWorkflowFlow, the AI
apply hook — would have to supply it, which spreads the dependency rather than
confining it.

The one real downside of the optional read is that a genuinely missing provider
becomes silent instead of loud. The URL rewrite only matters under LiveView,
which always has the provider, so add a logger.warn in the else branch rather
than a throw.

Release notes

None — internal.

User acceptance criteria
  • EdgeForm renders in a test with StoreProvider and no
    LiveViewActionsProvider.
  • First save still rewrites the URL to /projects/:project_id/w/:workflow_id,
    keeping existing query params, with replace: true.
  • LiveViewActionsProvider is gone from triggerInspectorHelpers.tsx and
    storeMocks.ts.
  • A missing provider during a first save logs a warning and doesn't throw.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in LiveViewActionsContext.tsx and useWorkflow.tsx, then inspect triggerInspectorHelpers.tsx and storeMocks.ts. Make the workflow action hook tolerate a missing provider while preserving the first-save URL rewrite and warning when navigation is unavailable. Verify that EdgeForm renders with StoreProvider alone, the URL keeps its query parameters with replace enabled, and the helper providers are removed.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, testing
Issue type
Refactor
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
74/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.