ENG 2154 Add parameter information to save operator

[eunice-chan]

Describe your changes and why you are making these changes

In the UI, when I click on a save operator, there is nothing in the sidesheet that is helpful for discovering where the operator is: e.g. where in the integration it is saved (table_name, path, etc).

This PR adds parameter information. Combined with #1121, which will add the integration information, will provide all necessary information.

Related issue number (if any)

ENG 2154

Loom demo (if any)

Tested with save-to-S3; save-to-SQLite (relational DB)

UPDATE 3/27 11:27AM:
S3:

RelationalDB:

RelationalDB Tooltip:

UPDATE 3/31 8:44AM:

Checklist before requesting a review

• I have created a descriptive PR title. The PR title should complete the sentence "This PR...".
• I have performed a self-review of my code.
• I have included a small demo of the changes. For the UI, this would be a screenshot or a Loom video.
• [N/A] If this is a new feature, I have added unit tests and integration tests.
• [N/A] I have run the integration tests locally and they are passing.
• I have run the linter script locally (See python3 scripts/run_linters.py -h for usage).
• All features on the UI continue to work correctly.
• Added one of the following CI labels:
  • run_integration_test: Runs integration tests
  • skip_integration_test: Skips integration tests (Should be used when changes are ONLY documentation/UI)

[agiron123]

Left some comments but you can merge once you resolve.

[vsreekanti]

@eunice-chan, not sure if you've marked this as a draft because it's not ready for feedback yet. If so, feel free to disregard and share an update once you're ready.

Otherwise, here's a few small design tweaks:

1. Since the parameters section is pretty small, let's lay it out side by side with the inputs section.
2. Let's say "Table Name" rather than just "Table" for clarity's sake.
3. Let's add a tooltip to the update mode explaining what it is.

Good work!

[eunice-chan]

S3:

RelationalDB:

RelationalDB Tooltip:

[vsreekanti]

Hey Eunice, sorry if my first message wasn't clear. My suggestion was not to layout the parameters horizontally but instead to put the Inputs section of the view horizontally next to the Parameters section of the view. The original layout of the parameters was better.

[likawind]

Great job getting all components modularized for reusability! My main feedback is that we already have a component directory and it's not very clear what goes to pages/components and what does not. I'd suggest moving InfoTooltip to primitive and other 3 files to workflow/operator.

[vsreekanti]

@eunice-chan, I merged #1121 just now, so you should be able to reuse the ResourceItem component there.

[eunice-chan]

@likawind
Thanks for your feedback.
I added the components to src/components/pages/components since the DetailPageHeader was there. I agree workflow/operator is a better place for the LoadParamDisplay components. However, the primitives folder looks like it only contains stylings (*.styles.tsx) so I am not too sure if that is the best place for InfoTooltip

[likawind]

@eunice-chan sorry for the late reply. But yes, I agree with what you suggested by moving the two ParamsDisplay files to /operator and keep the other two in pages/components for now

[eunice-chan]

[vsreekanti]

Just a friendly reminder to add the ResourceItem to the sidesheet, so users know which system the data is being saved to.

[eunice-chan]

(Oops apparently I never commented this)

Added the resource items to the sidesheet:

[eunice-chan]