✨ Add upload YAML questionnaire form

[ibolton336]

Closes Import questionnaires

[codecov]

Codecov Report

Patch and project coverage have no change.

Comparison is base (f8e2b7e) 43.04% compared to head (de8dd04) 43.04%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1290   +/-   ##
=======================================
  Coverage   43.04%   43.04%           
=======================================
  Files         145      145           
  Lines        4330     4330           
  Branches      999      999           
=======================================
  Hits         1864     1864           
  Misses       2454     2454           
  Partials       12       12           

Flag	Coverage Δ
client	43.04% <ø> (ø)
server	∅ <ø> (∅)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[avivtur]

Hi there :)
This looks really great!
Added some suggestions

[avivtur]

I see many "yamlFile" occurences here, maybe extract it to a const?

[ibolton336]

I have moved to using the "name" provided by the controller component on subsequent occurrences. TS helps us here by inferring the types from the react hook form form values initialization.

[avivtur]

I meant maybe to add at the top of the file adding something like: const yamlID = "yamlFile" or similar const name so if the type changes in the future, you can change it in only one place and not multiple places. If it's not possible because of the type inferring than please disregard this.

[ibolton336]

The form values are defined in one place so I think that accomplishes what you are suggesting here. When we define the formValues, the internal TS support for react-hook-form allows us to infer the types from usage so that we will get a TS error if there is a spelling error or another issue.

[ibolton336]

[avivtur]

gotcha, thanks for the explanation 😄

[avivtur]

Looking real good here! 💯

[avivtur]

I meant maybe to add at the top of the file adding something like: const yamlID = "yamlFile" or similar const name so if the type changes in the future, you can change it in only one place and not multiple places. If it's not possible because of the type inferring than please disregard this.

[sjd78]

Message text typo and async handler suggestion. Only the typo is a blocker.

[sjd78]

With the async handler, probably better to use try/await/catch structure:

            onFileInputChange={async (_, file) => {
              console.log("uploading file", file);
              //TODO: handle new api here. This is just a placeholder.
              try {
                await handleFileUpload(file);
                setFocus(name);
                clearErrors(name);
                trigger(name);            
              } catch (err) {
                //Handle new api error here
              }
            }}

[mturley]

+1 to @sjd78's try/await/catch suggestion, but agreed that it's not a blocker. Otherwise LGTM

[sjd78]

Just the try/await/catch handler, but looks good otherwise.