Replace compact-input & labeled-form-element with composables

[rak-phillip]

The existing compact-input & labeled-form-element mixins were translated to composables named useCompactInput & useLabeledFormElement as a means to proof out the concept of using composables and to resolve issues with TypeScript compatibility when migrating from Vue.extend to defineComponent().

Not all mixin usages were replaced, resulting in divergence between the original mixins and their replacement composables.

Proposed solution

Update useCompactInput & useLabeledFormElement to ensure feature parity with existing mixins.

Replace the compact-input & labeled-form-element mixins with their respective composables in:

• shell/components/form/LabeledSelect.vue

Replace the labeled-form-element mixin with its respective composable in:

• shell/components/form/InputWithSelect.vue
• shell/components/form/LabeledSelect.vue
• shell/components/form/Select.vue
• shell/components/form/ServiceNameSelect.vue

Remove the compact-input & labeled-form-element mixins from Dashboard entirely.

Additional Information

Benefits of using composables over mixins:

TypeScript Support

Composables offer better TypeScript support and leverage static typing and autocompletion out of the box without requiring additional developer intervention.

Simple Unit Testing

Composables are functions that return reactive objects, making them much easier to unit test. Unit tests can be written by importing and calling the composable function without instantiating a Vue component.

Examples:

• shell/composables/useCompactInput.test.ts
• shell/composables/useLabeledFormElement.test.ts
• shell/composables/useUserRetentionValidation.test.ts