feat: add threat shield dns

[andre8244]

Add Threat shield DNS UI

Ref:

• UI for Threat Shield DNS nethsecurity#906

[Tbaile]

I'll leave some comments here due to the size of the PR, however a few things might need some discussion:

• Import styles are mixed, some import are using relative paths, some imports leverage the @/ syntax, I'd rather start choosing one of the two going forward
• (personal preference) I'd start to use the TS oriented defineProps, and use the props destructuring to ease the usage of the props. prefix for many variables
• Unless we need comparison between states of a watched elements, I'd convert watch statements with its new watchEffect`, avoids variable drilling of unknown type and lets Vue do it's magic

[andre8244]

Import styles are mixed, some import are using relative paths, some imports leverage the @/ syntax, I'd rather start choosing one of the two going forward

I usually rely on my IDE's automatic import function. Manually reviewing every import feels quite tedious if it's just for cosmetic reasons.. However, if you have a semi-automated solution in mind (like a linter), we can implement it

[andre8244]

I'd start to use the TS oriented defineProps, and use the props destructuring to ease the usage of the props. prefix for many variables

I can agree on this one, even if it's just cosmetics

[andre8244]

Unless we need comparison between states of a watched elements, I'd convert watch statements with its new watchEffect`, avoids variable drilling of unknown type and lets Vue do it's magic

I agree, but not 100%. While watchEffect is a great feature, it can make it less clear why that code block exists in the first place. Which approach is better likely depends on the specific use case.

[Tbaile]

I usually rely on my IDE's automatic import function.

Figured, but something might need some adjustments in the settings, might give a look when I have time (since VSCode parses tsconfig no issues, still a weird behaviour). I've just learned that the "Quick Fix" function is different from the "Import" one, not sure this can be even addressed properly 🙄

if you have a semi-automated solution in mind (like a linter), we can implement it

Not sure it can be done, sadly.
No hurt tho, was just a thing that I've noticed

While watchEffect is a great feature, it can make it less clear why that code block exists in the first place

Sure, but then I'd rather use the returning watched element in the function, instead of reusing the referenced element again, this sure saves us from side-effects of accidentally update the variable that is being watched

[andre8244]

Sure, but then I'd rather use the returning watched element in the function, instead of reusing the referenced element again, this sure saves us from side-effects of accidentally update the variable that is being watched

Did not understand what you mean here

[Tbaile]

For example, turning this

watch(
  () => props.isShown,
  () => {
    if (props.isShown) {
      clearErrors()
      focusElement(bypassRef)
      bypass.value = ''
    }
  }
)

Into this

watch(
  () => props.isShown,
  (shown) => {
    if (shown) {
      clearErrors()
      focusElement(bypassRef)
      bypass.value = ''
    }
  }
)