UI update: regex checking for Project Name/Tag inputs in edit metadata modal

[sanghoonio]

Inputs for Project Name and Tag will only allow alphanumeric characters, '_', and '-'. If a user attempts to type an invalid character or paste a string with an invalid character into these inputs, the input will not let them and some helper text will appear to let the user know which characters are supported.

Someone can work around this by going into browser inspect element or call the API endpoint itself with invalid characters, so we should still have some API level check for these strings.

[sanghoonio]

Changes addressed:

1. onKeyDown and onPaste removed for useEffect. Users can now input or paste invalid characters into the input field, which will trigger helper text to display due to change in state variable. If the invalid characters are removed from the inputs, the state variable will revert to false and helper text will clear.
2. Modal save button now tracks state variable and is deactivated if name or tag contain an invalid character.
3. Use some bootstrap classes for the helper text. Bootstrap by default goes down to fs-6 minimum which is 16px or 1em. It looked too big to me so I switched it from 12px to 0.75em, which should help it scale if needed.

Thanks for the pointers on useEffect(). It was pretty confusing at first because it tracks the input value itself and not the key down or paste event but it seems to work pretty well.

[sanghoonio]

Done, updated checks in other components