FormButtons component, with redux

[himdel]

This is in preparation of having React forms in ui-classic, and adds several components:

• MiqButton - a react reimplementation of our angular miqButton (1:1 except alt is implied when title is set) - shows a button with enabled/disabled, titles, and actions

• FormButtons - a react implementation of our angular generic_form_buttons partial - does not deal with finding out the form state but when it gets it, it renders the buttons

• FormButtonsRedux - a wrapper for FormButtons which uses Redux for state management (so that we can trigger actions from anywhere, including angular forms)

---

The idea is that FormButtonsRedux will live in the "paging" toolbar, and the forms will be sending redux actions to tell the buttons what to show, and those buttons will be sending back actions like saveClicked, resetClicked, cancelClicked so that the form can handle them.

Related to: https://bugzilla.redhat.com/show_bug.cgi?id=1437800

---

• reset form buttons to initial state

    ManageIQ.redux.store.dispatch({ type: 'FormButtons.init', payload: {} })
  

• change the default Add/Save label

    ManageIQ.redux.store.dispatch({ type: 'FormButtons.customLabel', payload: __('Magic') })
  

• set newRecord - if true, the Add button is shown (and addClicked called), else the Save and Reset buttons are shown (and saveClicked, resetClicked called)

    ManageIQ.redux.store.dispatch({ type: 'FormButtons.newRecord', payload: true })
  

• set pristine - pristine form can't be reset (and shouldn't be saveable)

    ManageIQ.redux.store.dispatch({ type: 'FormButtons.pristine', payload: false })
  

• set saveable - means no validation error, the submit button will be enabled based on this

    ManageIQ.redux.store.dispatch({ type: 'FormButtons.saveable', payload: false })
  

• set callbacks - an object of functions - addClicked, saveClicked, resetClicked and cancelClicked are accepted

    ManageIQ.redux.store.dispatch({ type: 'FormButtons.callbacks', payload: {
      addClicked: () => console.log('add'),
      cancelClicked: () => console.log('cancel'),
      resetClicked: () => console.log('reset'),
      saveClicked: () => console.log('save'),
    }})
  

Cc @ZitaNemeckova, @Hyperkid123 , @martinpovolny

[himdel]

TODO (separate PRs):

start using it from the problematic angular forms
start using it from the rest of angular forms
start using it from non-angular forms

[miq-bot]

This pull request is not mergeable. Please rebase and repush.

[himdel]

override cancelclicked..

    cancelClicked: () => {
      props.cancelClicked();
      props.dispatch({type: 'FormButtons.customLabel', payload: "karel"});
    },

[himdel]

init callbacks..

  ManageIQ.redux.store.dispatch({ type: 'FormButtons.callbacks', payload: {
    cancelClicked: () => console.log('cancel'),
    addClicked: () => console.log('add'),
    saveClicked: () => console.log('save'),
    resetClicked: () => console.log('reset'),
  }});

[himdel]

(Testing, on dashboard screen:

ManageIQ.component.componentFactory('FormButtonsRedux', '#main-content')

ManageIQ.redux.store.dispatch({ type: 'FormButtons.customLabel', payload: 'magic' })
...

)

[himdel]

Added an easier way to override the callbacks (callbackOverrides), used in ProviderDialogs modal to close the window once saved, added or cancelled.

[martinpovolny]

@Hyperkid123 : can you, please, test this together with your form?

[miq-bot]

Checked commits https://github.com/himdel/manageiq-ui-classic/compare/a53cc5ee2d01fbf26d9cc5f7dfc4b0659da992c9~...034ad78972f10b602ed932deac1f2fe93b7887e8 with ruby 2.3.3, rubocop 0.52.1, haml-lint 0.20.0, and yamllint 1.10.0
0 files checked, 0 offenses detected
Everything looks fine. 👍