[UI] Add "Estimate cost button" to templates form

[foot]

User can click a button to get an estimate of the monthly cost of a template after it has been filled out, if the template is not filled out show the usual render errors about missing value for CLUSTER_NAME etc.

Tasks breakdown

Displaying the feature

• [x] As we can show and hide profiles / credentials #1626 we want to add another optional section:
  • templates.weave.works/cost-estimation-enabled to show / hide this section. false by default

Interaction

• [x] Add a button "Calculate estimate" which will call RenderTemplate on the BE and show the results
• [x] Preview/render takes a second so show a spinner while requesting
• [x] Any rendering error like "CLUSTER_NAME" not defined, should still be displayed so the user can fix them up
• [x] Button should remain on the screen for user to click it again to re-estimate.

Showing estimate

• [x] Show estimate, response will include .range:
  • display .range as 76 - 90 USD

UI Polish that would be nice

• [x] Clear the estimate if a param is changed

Appendix

For the curious, here are the supported currency values https://aws.amazon.com/premiumsupport/knowledge-center/supported-aws-currencies/

{
  "AUD": "Australian Dollar",
  "BRL": "Brazilian Real",
  "CAD": "Canadian Dollar",
  "CHF": "Swiss Franc",
  "CNY": "Chinese Yuan (China UnionPay and Bank Redirect)",
  "DKK": "Danish Krone",
  "EUR": "Euro",
  "GBP": "British Pound",
  "HKD": "Hong Kong Dollar",
  "JPY": "Japanese Yen",
  "KRW": "South Korean Won",
  "NOK": "Norwegian Krone",
  "NZD": "New Zealand Dollar",
  "SEK": "Swedish Krona",
  "SGD": "Singapore Dollar",
  "USD": "United States Dollar",
  "ZAR": "South African Rand"
}

[foot]

FIGMA https://www.figma.com/file/IVHnM9iyeFWpd11evtY8ux/Weave-GitOps?node-id=12717%3A65939

[ahussein3]

@foot I'm resetting OnFormDataChange the estimate back to "$0.00USD" the default state. WDYT ?