Consistent_forms_in_Conductor_UI

Consistent forms in Conductor UI

Summary

This feature consists of multiple tasks but all leads to one result: unified and consistent forms all over Conductor. All forms should look the same, work the same and give same feedback.

Owner

Jaromír Coufal, [email protected] (jcoufal on IRC)

Current status

Currently there are various layouts for forms, not unified order of buttons, missing buttons, not visualized error fields, etc.

Screencast Demo

All forms look very similar, work same way, throw consistent errors.

Implementation tasks

• #3642 Define a layout for input forms, so that, for example, the “new pool” the “new image” forms are consistent (into Converge-UI)

• #3632 Design new pattern of highlighting invalid items, with HTML+SASS (into Converge-UI)

• #3641 Ensure that all required fields are always appropriately marked

• #3640 Ensure that buttons are coloured consistently (Save/Apply/… = Blue background, Cancel = Gray background, “Destructive” = red, “Non-Destructive” = gray)

• #3639 Ensure that all forms have their “Save” button to the left of their “Cancel” button

• #3638 Ensure that all forms have a “Cancel” button

• #3643 Apply sane character limits to input fields

• #3634 Ensure that all error messages (i.e. flash messages on the top of the page) are user understandable and provides information what happened / how to correct the input

• #3633 Apply invalid item highlighting pattern across all forms in Conductor UI

Discussion - tools

Simple Form (for HTML layout)

• https://github.com/plataformatec/simple_form/

• It’s a project specific thing (no need for Katello to use it)

• Advantages

  • Easy to use
  • Pretty customizable
  • Provides all needed features
  • Maintained by third party - less work for us
  • Easy to implement future new forms

• Disadvantages

  • Need to redo current forms (in fact we need to go through all of them anyway, so this is great opportunity to implement it)

• Opinion

  • In my opinion it worths

Bootstrap (for CSS rules)

• http://twitter.github.com/bootstrap/

• More Converge-UI business

• Advantages

  • pre-defined look and behavior of form inputs, buttons

• Disadvantages

  • Quite robust
  • Need to follow special structure given by bootstrap
  • Need to rewrite rules if you want your own look anyway

• Opinion

  • I don’t think we need it that much, maybe just some parts could help us

High-level implementation details

\1) Converge UI Library
* In the first place we need to design patterns for form elements and its behavior into Converge-UI Library
* Provide example structure of HTML
* Provide SCSS stylesheets

\2) Implementation into current Conductor UI
* Go through all forms cross over Conductor UI and ensure that they meet rules specified in the Library
* ? During redoing forms, use Simple Form

Future plan

By adding any new form, there should be clear specified patterns of what and how to use (should prevent from doing things twice).