React Manual Run Component Implementation

[stuartc]

Background

Part of the Better Manual Runs epic, this issue focuses on implementing a new React-based manual run component that will replace the existing LiveView implementation and add new functionality.

The naming of the feature is a little confusing. The manual run component does not actually run anything. It is used to configure the input for a run. The "Create New Work Order" button is used to create the run.

I'd like to propose a new name for this component: "InputForm", or "InputConfigurationForm"? Feedback welcome.

Requirements

Rewrite the existing manual run component in React.

The manual run component does the following:

The component allows a user to:

• select an existing input from a dropdown of the last 5 runs associated with the selected job
• create a new custom dataclip via a text editor
• create a new custom dataclip via a file upload

The default state is for a new custom dataclip with a value of {}.

By selecting an existing run from the dropdown will show the uuid for the selected dataclip. And then render a preview or the entire dataclip in a text editor. This editor should be read only.

If the user clicks the "X" on the box showing the dataclip id, the component reverts to the default state.

Since the "Create New Work Order" button is not present in the component, and is controlled by LiveView, the component must ensure that liveview receives the correct data.

Core Features

1. Input Modes

   • Empty state run with {}
   • Custom input run:
     • JSON editor interface
     • File upload/drop interface for JSON data
   • Historical input selection (last 5 runs)

2. Component Architecture

   • Built in React
   • Reusable between inspector and canvas contexts
   • Proper state management
   • Clear interfaces for parent component integration

3. Input Handling

   • JSON validation
   • Error handling and display
   • File upload processing

4. Inspector Integration

   • Replace existing LiveView component
   • Maintain current inspector functionality
   • Ensure smooth transition for users

Technical Considerations

Take note that by trying to syncronise the component with liveview (especially when using debounces) there is a non-zero chance of the component being out of sync with the LiveView.

We may need to replace the "Create New Work Order" button with a React controlled button that can be handle the Cmd+Enter keypress and be used to submit the data.

Perhaps we should try and keep the dataclip string/contents in memory and only submit it when the user clicks the "Create New Work Order" button.