Auto populate key from name should strip extra dashes

[markphelps]

Describe the bug

Using the wonderful auto-population of key fields for flags/segments that was added in #155, I noticed that any extra spaces before/after/between words in the name field correspond to extra -'s in the key field.

It would be great if we could strip these extra -s from the key field.

This will allow us to add stricter validation around the key field on the backend

Version Info
0.10.0

To Reproduce
See gif below ⬇️

Expected behavior

• Extra whitespace in the name field should be trimmed before/after the name which means the key field will not contain extra -s
  • Ex: name: foo should become name: foo, key: --foo-- will become key: foo
• Extra spaces in the name field between words should ideally only result in a single - in the key:
  • Ex: name: foo bar should result in key: foo-bar, not foo---bar

Screenshots

/cc @aaronraff

[aaronraff]

Nice catch! I can certainly fix this up since my PR introduces this. I am thinking that I can also begin to add some UI tests to catch these sorts of things.

Thoughts? I am new to unit testing Vue code.

[markphelps]

That would be awesome!

I've actually never written unit tests for Vue.js either.. but I know that Jest is a popular library that I think works well with Vue: https://vuejs.org/v2/guide/unit-testing.html

JS unit tests were def something on my radar for the future, so any help there would be greatly appreciated! But don't feel like you have to write them either, you've already helped so much as it is!