Support multiline env vars

[Steve-Mcl]

closes #3972

Description

TLDR;
Permit user to input multiline env vars by using textarea instead of standard input fields. Adjusts the view/styling to ensure faithful representation (using whitespace: pre) any new lines while constraining width/hieght limits (and adding auto scroll bars where necessary). Permits import of dotenv compatible data.

DETAILS:

• Uses the FormView slot to show a textArea control
  • The text area is styled with scoped CSS primarily as MVP (though should other areas of FF require TextArea fields, we should retro this
  • The specific styling is as follows:
    • readonly/un-editable fields get the default cursor to clarify what is/isnt editable
    • long strings in the readonly views are limited in both width and height and now show scrollbars are required.
• multiline support has been added to both the view and the .env import. This is a close approximation of the node package dotenv in that multiline strings are wrapped in quotes, comments and empty lines are discarded.
• frontend unit test updated to test the new capabilities of the import

Screenshots

Before

template

non template

After

template

non template

fix empty table layout bug when editing template env vars

This commit was an opportunity to fix this layout issue:

Related Issue(s)

#3972

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production

Labels

• Includes a DB migration? -> add the area:migration label

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 78.72%. Comparing base (bfbe907) to head (f8ebcb3).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4069   +/-   ##
=======================================
  Coverage   78.72%   78.72%           
=======================================
  Files         284      284           
  Lines       13009    13009           
  Branches     2897     2897           
=======================================
  Hits        10241    10241           
  Misses       2768     2768           

Flag	Coverage Δ
backend	78.72% <ø> (ø)

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.

[Steve-Mcl]

@joepavitt, when trying out, please use a file created by a regular macos text editor (so that is creates newlines in native OS format).

Here is some sample data:

BASIC=basic

# prev line deliberately blank
AFTER_BLANK=after_blank
EMPTY=
SINGLE_QUOTES='single_line_single_line'
SINGLE_QUOTES_SPACED='    single quotes single line untrimmed    '
DOUBLE_QUOTES="double_quotes_single_line"
DOUBLE_QUOTES_SPACED="    double quotes single line untrimmed    "
NEWLINES_QUOTED="expand\nnew\nlines"
NEWLINES_SINGLED_QUOTED='expand\nnew\nlines'
DONT_EXPAND=dont\\nexpand\\nescpated\\nnewlines 
# COMMENTS=excludes comment that looks like a key-value pair
EQUAL_SIGNS=handles_equals=sign
JSON_UNQUOTED={"foo": "bar"}
JSON_QUOTED='{"foo": "bar"}'
JSON_MULTILINE='{
  "foo": "bar"
}'
TRIM_SPACE_FROM_UNQUOTED=    some spaced out string    
USERNAME=therealnerdybeast@example.tld
    SPACED_KEY = should be trimmed
MULTI_DOUBLE_QUOTED="THIS IS A
MULTILINE
STRING"
MULTI_SINGLE_QUOTED='THIS IS A
MULTILINE
STRING'
MULTI_WITH_BLANK_AND_COMMENT="SHOULD
KEEP EMPTY

AND KEEP LINE STARTING WITH #
# a line starting with a hash
WHEN IT IS QUOTED"