SELF-168: Add InputNumber Component

[NateWaldschmidt]

JIRA

• SELF-168

Description

• The existing CurrencyInput had a bug with input, instead of fixing we are opting to utilize the PrimeVue InputNumber component instead

Screenshots

Reviewer Checklist

This section is to be filled out by reviewers

Testing

• This code was tested by somebody other than the developer. Do not merge until this has been done.

[guardrails]

⚠️ We detected 7 security issues in this pull request:

Vulnerable Libraries (7)

Severity	Details
High	pkg:npm/[email protected] (t) upgrade to: > 3.1.6
Critical	pkg:npm/[email protected] (t) upgrade to: > 10.3.1
Medium	pkg:npm/[email protected] (t) upgrade to: > 8.19.0
Critical	pkg:npm/[email protected] (t) upgrade to: > 8.2.5
Medium	pkg:npm/[email protected] (t) upgrade to: 8.4.31
Medium	pkg:npm/[email protected] (t) upgrade to: > 8.7.1
Critical	pkg:npm/[email protected] (t) upgrade to: > 16.8.3

More info on how to fix Vulnerable Libraries in JavaScript.

---

👉 Go to the dashboard for detailed results.

📥 Happy? Share your feedback with us.

[aws-amplify-us-west-2]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-446.d11k469e311m4w.amplifyapp.com

[juanfriss]

did we evaluate making this change on dashboard-vue itself? meaning, replacing all instances of CurrencyInput with InputNumber in the dashboard, and in this repo just removing CurrencyInput

[NateWaldschmidt]

did we evaluate making this change on dashboard-vue itself? meaning, replacing all instances of CurrencyInput with InputNumber in the dashboard, and in this repo just removing CurrencyInput

Yeah there are only 2 places where the CurrencyInput is currently being used within dashboard-vue should be a small PR to get these tested and updated

Thats a good point of removing the CurrencyInput now, Ill update this to remove it

[juanfriss]

so why do we have to "Add the InputNumber component" here?

[NateWaldschmidt]

so why do we have to "Add the InputNumber component" here?

I think understand what you're saying. This input is going to function as both a CurrencyInput and a number input thus the renaming of the component

[kencrim]

This is a nitpick, but if we have TextInput, I'd personally prefer "NumberInput" over "InputNumber" for consistency. Approving pending the resolution of the above convo.

re: the above, my two cents is that we should probably have all of our inputs in the same place, so as long as we use ui-components for our other inputs, it's probably the place for this one, as well. I don't have strong feelings one way or the other, though!

[juanfriss]

ok, I thought we were using PrimeVue InputNumber straight away, that's why I was suggesting just using that in dashboard-vue. If we are creating a new personalized component, then it makes sense to have it here

[NateWaldschmidt]

This is a nitpick, but if we have TextInput, I'd personally prefer "NumberInput" over "InputNumber" for consistency. Approving pending the resolution of the above convo.

re: the above, my two cents is that we should probably have all of our inputs in the same place, so as long as we use ui-components for our other inputs, it's probably the place for this one, as well. I don't have strong feelings one way or the other, though!

@kencrim

Fair point on the naming convention. My thought is that TextInput is also going to need to be updated to PrimeVue in the future and I think the InputNumber is a better convention since it makes it easier to find the Input.... With that refactor we could create a InputText and then deprecate the TextInput component while we refactor over to InputText

Do you think that is a good idea or should we update this to be NumberInput? I don't feel strongly either way