Clarify why server create button is disabled

Fixes #585 (closed)

Done

• Indicate required fields by including a red asterisk in the label, and remove (Optional) in labels for other fields
• Display a red alert icon inside the input field, on the far right
  • Workflow input fields
  • Server name field
• Display a red line under an invalid input field
  • Workflow input fields
  • Server name field
• For fields which must be validated (e.g. server name):
  • Show a green checkmark icon in the input field, on the far right
  • Show a green underline under the input field
• Set bottom margin of input separately?
  • Instead of creating an element around it, ending up with two bottom margins
  • Figured out how to do it using an element in front of the input
• Add 24px of spacing underneath each form input (below helper text if any)
  • See: https://www.patternfly.org/v4/components/form/design-guidelines/#general-spacing
• Show a 'field level' error message below an invalid input field, including red alert icon:
  • Workflow input fields
  • Server name field
  • Ensure that the font sizes are the same (currently 17px, should be 16px)

  font-size: 14px
  font-weight: 400
  height: 24px
  line-height: 21px

  • Use a column to group the inputs and their helper text
• Include field level error in input field
  • Instead of as a separate row
• Function which encapsulates field level error message
• Ensure padding of form is correct
  • There should be 24px between a form and anything else
  • See: https://www.patternfly.org/v4/components/form/design-guidelines#general-spacing
  • And: https://www.patternfly.org/v4/components/form/design-guidelines#forms-on-a-page
  • Validate workflow repo input field on loss of focus
• Don't disable the 'Create' button, instead add a handler which shows a hint explaining what the problem is
  • See: https://www.patternfly.org/v4/components/form/design-guidelines#buttons

    • For long scrolling forms, don’t disable the submit button since the missing field and submit button may not be visible on the screen at the same time.

• Fix problem of browser window jumping around when typing into server name
  • Removed the inline alert for now
• "Address form errors to proceed" and "Please correct problems with the form" is superfluous, when you could just say "Provide an instance name", "Select a network", etc.
• Try using 3px height for validation status indicator line at bottom of text input element
• Problem: Adding a workflow (toggling the radio button), then pressing 'Create' button without entering anything creates a server
• Debug state handling issues
• Don't abuse the toggle tip for showing a message when pressing on the 'disabled' Create button
• Don't let content of input field go behind alert icon
  • See how PatternFly does it: https://www.patternfly.org/v4/components/form/react/invalid/
  • I think it's a combination of:

    background-position: calc(100% - 8px) 50%;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-right: 32px;

• Remove inline alert

How to Test

• Try setting the server name to empty, or an invalid format
• Make sure that the field level message makes clear what the problem is
• Try adding a workflow while creating a server, but with an empty DOI or Git repository URL
• Make sure that the field level message makes clear that the field is required
• In both cases above, make sure the create button is not disabled, and when pressed shows a hint about the problem with the server input form

Screenshots

QA Checklist

• Any changes to 'widgets' in src/Style/Widgets/? If so:
  • Update src/Style/StyleGuide.elm showing example usage of that widget
• Were any app flags created, modified, or removed? If so:
  • Update config.js and all files in environment-configs/, including docker-config.js
  • Update "Runtime configuration options" documentation in README.md

Post-Merge Checklist

• Create follow-up issues for anything left over for another merge request
  • If any technical debt is introduced, assign these follow-up issues to the MR submitter