Design for Plan upload/download in GUI

[dandelany]

Checked for duplicates

Yes - I've already checked

Alternatives considered

Yes - and alternatives don't suffice

Related problems

#1154
NASA-AMMOS/aerie#1318

Describe the feature request

UI Design ticket for #1154 - we need to design a workflow for allowing users to download and upload Plan json files via the web UI. This is currently only possible using the API + aerie-cli tool, but we've gotten feedback from users that they'd like to use the UI for this too. @Mythicaeda described it well in the implementation ticket (#1154) so i'll copy her notes here:

• Allow users to download a json representation of a plan, its activities with arguments, and tags. This download functionality should be exposed within the plan page and in the table of plans.
• Allow users to upload a plan json file. This will involve adding an upload button to the plans page and allowing a user to specify a model and give the plan an alternative name if the plan name is already taken.

Sending to @lklyne to take a look - let me know if any further explanation is needed.

Sidenote: we also talked about supporting general file upload/download, but I think the UI design for that will be pretty different & therefore deserves a separate issue.

Design Direction

• Add import button to right side of header in plan creation panel. Clicking this opens the browser's file picker.
• If a file is added, populate available fields. Show a new item at the top with the file name and option to clear. Update the button text to show Create plan from .json
• If errors occur, surface these with a banner at the top of the plan when opened. This will use the same treatment as our activity / model mismatch banner.
• Show option to export form plan page using export icon at the right of the row on hover.
• Show export option in plan dropdown when a plan is open.
• Show export option in the plan metadata panel in the header.
• Show progress spinner while plan is being exported.

https://www.figma.com/design/VR3isVdXGbUC5YQ114jB0z/Aerie-%231344-Plan-upload%2Fdownload?node-id=93-1051&t=bF6Q1y7CuqvFwnjx-1

[ewferg]

If we provide a json format for download, what are our plans for documenting that specification/schema? Do we consider a similar download for a sim data set?

[cartermak]

Sharing some input: it would be nice if the logic to map between the standalone plan JSON and the Hasura-structured data were provided by a back-end service instead of the UI. This would reduce the code duplication between Aerie-CLI and Aerie-UI, and dedicated Hasura actions for upload/download would allow users who interact via the API outside of Aerie-CLI to leverage the feature, too.

[cartermak]

Another consideration: should the plan come with the simulation configuration? I was pondering adding sim config to the Aerie-CLI JSON plan format already. (See NASA-AMMOS/aerie-cli#128)

[lklyne]

Figjam for initial notes: https://www.figma.com/board/T64ZNy7gyUL6gmmodGyOFi/Aerie-%231344-Plan-upload%2Fdownload?node-id=0-1&t=QrrMxMiQQPIh1fAI-1

[lklyne]

Goals

• Add ui for exporting/downloading and importing/uploading a plans json.
• Show progress and potential errors during upload and download process

Interface

• Upload button in plan creation panel (built)
• Download button in plan metadata (built)
• How do we show validation? Need to get details on what errors could come up
• Clicking a plan in the plan table shows the details