From 86b2de8de63bb35ac387f92f810012c706dbfc06 Mon Sep 17 00:00:00 2001
From: Moritz Kirschner <moritz.kirschner@checkmk.com>
Date: Wed, 28 Aug 2024 11:11:52 +0200
Subject: [PATCH] vue: Fix component props typing when re-exporting

We encountered a bug with vue/ts in our configuration:
If we re-export a vue component, it will be typed to any
if used inside Vue's <template>.
Disabling this typescript rule restores the expected typing.

Github issue link:
https://github.com/vuejs/core/issues/11732

This also uncovered that radix didn't adhere to our typing rules,
we silenced those errors.

CMK-18584

Change-Id: Ieeef6f3d7cadcbfbc0366ee67972e8b7dd9e16c9
---
 .../cmk-frontend-vue/src/quick-setup/ui/button/UiButton.vue  | 1 +
 .../src/quick-setup/ui/collapsible/CollapsibleContent.vue    | 1 +
 .../src/quick-setup/ui/collapsible/CollapsibleTrigger.vue    | 1 +
 .../src/quick-setup/ui/collapsible/UiCollapsible.vue         | 1 +
 .../cmk-frontend-vue/src/quick-setup/ui/label/UiLabel.vue    | 1 +
 .../src/quick-setup/ui/tooltip/TooltipContent.vue            | 1 +
 .../src/quick-setup/ui/tooltip/TooltipProvider.vue           | 1 +
 .../src/quick-setup/ui/tooltip/TooltipTrigger.vue            | 1 +
 .../src/quick-setup/ui/tooltip/UiTooltip.vue                 | 1 +
 packages/cmk-frontend-vue/tsconfig.app.json                  | 5 ++++-
 10 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/cmk-frontend-vue/src/quick-setup/ui/button/UiButton.vue b/packages/cmk-frontend-vue/src/quick-setup/ui/button/UiButton.vue
index de8b9c0ee3c..ace681fd804 100644
--- a/packages/cmk-frontend-vue/src/quick-setup/ui/button/UiButton.vue
+++ b/packages/cmk-frontend-vue/src/quick-setup/ui/button/UiButton.vue
@@ -15,6 +15,7 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
+  <!-- @vue-expect-error Radix-vue props doesn't follow our exactOptionalPropertyTypes rule -->
   <Primitive :as="as" :as-child="asChild" :class="props.class">
     <slot />
   </Primitive>
diff --git a/packages/cmk-frontend-vue/src/quick-setup/ui/collapsible/CollapsibleContent.vue b/packages/cmk-frontend-vue/src/quick-setup/ui/collapsible/CollapsibleContent.vue
index a3d22267404..40693122e12 100644
--- a/packages/cmk-frontend-vue/src/quick-setup/ui/collapsible/CollapsibleContent.vue
+++ b/packages/cmk-frontend-vue/src/quick-setup/ui/collapsible/CollapsibleContent.vue
@@ -5,6 +5,7 @@ const props = defineProps<CollapsibleContentProps>()
 </script>
 
 <template>
+  <!-- @vue-expect-error Radix-vue props doesn't follow our exactOptionalPropertyTypes rule -->
   <CollapsibleContent v-bind="props" class="ui-collapsible-content">
     <slot />
   </CollapsibleContent>
diff --git a/packages/cmk-frontend-vue/src/quick-setup/ui/collapsible/CollapsibleTrigger.vue b/packages/cmk-frontend-vue/src/quick-setup/ui/collapsible/CollapsibleTrigger.vue
index 4a434639494..d480d320e54 100644
--- a/packages/cmk-frontend-vue/src/quick-setup/ui/collapsible/CollapsibleTrigger.vue
+++ b/packages/cmk-frontend-vue/src/quick-setup/ui/collapsible/CollapsibleTrigger.vue
@@ -5,6 +5,7 @@ const props = defineProps<CollapsibleTriggerProps>()
 </script>
 
 <template>
+  <!-- @vue-expect-error Radix-vue props doesn't follow our exactOptionalPropertyTypes rule -->
   <CollapsibleTrigger v-bind="props">
     <slot />
   </CollapsibleTrigger>
diff --git a/packages/cmk-frontend-vue/src/quick-setup/ui/collapsible/UiCollapsible.vue b/packages/cmk-frontend-vue/src/quick-setup/ui/collapsible/UiCollapsible.vue
index 23425f082ad..482f1218fcd 100644
--- a/packages/cmk-frontend-vue/src/quick-setup/ui/collapsible/UiCollapsible.vue
+++ b/packages/cmk-frontend-vue/src/quick-setup/ui/collapsible/UiCollapsible.vue
@@ -9,6 +9,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
+  <!-- @vue-expect-error Radix-vue props doesn't follow our exactOptionalPropertyTypes rule -->
   <CollapsibleRoot v-slot="{ open: openSlot }" v-bind="forwarded" class="ui-collapsible">
     <slot :open="openSlot" />
   </CollapsibleRoot>
diff --git a/packages/cmk-frontend-vue/src/quick-setup/ui/label/UiLabel.vue b/packages/cmk-frontend-vue/src/quick-setup/ui/label/UiLabel.vue
index 8ab075c665c..9508f6a3b26 100644
--- a/packages/cmk-frontend-vue/src/quick-setup/ui/label/UiLabel.vue
+++ b/packages/cmk-frontend-vue/src/quick-setup/ui/label/UiLabel.vue
@@ -32,6 +32,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
+  <!-- @vue-expect-error Radix-vue props doesn't follow our exactOptionalPropertyTypes rule -->
   <Label v-bind="delegatedProps" :class="labelVariants({ variant })">
     <slot />
   </Label>
diff --git a/packages/cmk-frontend-vue/src/quick-setup/ui/tooltip/TooltipContent.vue b/packages/cmk-frontend-vue/src/quick-setup/ui/tooltip/TooltipContent.vue
index 6f9899c41a7..1aefe8d58f7 100644
--- a/packages/cmk-frontend-vue/src/quick-setup/ui/tooltip/TooltipContent.vue
+++ b/packages/cmk-frontend-vue/src/quick-setup/ui/tooltip/TooltipContent.vue
@@ -35,6 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
 <template>
   <TooltipPortal>
+    <!-- @vue-expect-error Radix-vue props doesn't follow our exactOptionalPropertyTypes rule -->
     <TooltipContent
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
diff --git a/packages/cmk-frontend-vue/src/quick-setup/ui/tooltip/TooltipProvider.vue b/packages/cmk-frontend-vue/src/quick-setup/ui/tooltip/TooltipProvider.vue
index 816505d69ac..641e20a103b 100644
--- a/packages/cmk-frontend-vue/src/quick-setup/ui/tooltip/TooltipProvider.vue
+++ b/packages/cmk-frontend-vue/src/quick-setup/ui/tooltip/TooltipProvider.vue
@@ -5,6 +5,7 @@ const props = defineProps<TooltipProviderProps>()
 </script>
 
 <template>
+  <!-- @vue-expect-error Radix-vue props doesn't follow our exactOptionalPropertyTypes rule -->
   <TooltipProvider v-bind="props">
     <slot />
   </TooltipProvider>
diff --git a/packages/cmk-frontend-vue/src/quick-setup/ui/tooltip/TooltipTrigger.vue b/packages/cmk-frontend-vue/src/quick-setup/ui/tooltip/TooltipTrigger.vue
index f5b0e57f345..2f7150ef081 100644
--- a/packages/cmk-frontend-vue/src/quick-setup/ui/tooltip/TooltipTrigger.vue
+++ b/packages/cmk-frontend-vue/src/quick-setup/ui/tooltip/TooltipTrigger.vue
@@ -5,6 +5,7 @@ const props = defineProps<TooltipTriggerProps>()
 </script>
 
 <template>
+  <!-- @vue-expect-error Radix-vue props doesn't follow our exactOptionalPropertyTypes rule -->
   <TooltipTrigger v-bind="props">
     <slot />
   </TooltipTrigger>
diff --git a/packages/cmk-frontend-vue/src/quick-setup/ui/tooltip/UiTooltip.vue b/packages/cmk-frontend-vue/src/quick-setup/ui/tooltip/UiTooltip.vue
index 3581ace429b..189c69dca4a 100644
--- a/packages/cmk-frontend-vue/src/quick-setup/ui/tooltip/UiTooltip.vue
+++ b/packages/cmk-frontend-vue/src/quick-setup/ui/tooltip/UiTooltip.vue
@@ -13,6 +13,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
+  <!-- @vue-expect-error Radix-vue props doesn't follow our exactOptionalPropertyTypes rule -->
   <TooltipRoot v-bind="forwarded">
     <slot />
   </TooltipRoot>
diff --git a/packages/cmk-frontend-vue/tsconfig.app.json b/packages/cmk-frontend-vue/tsconfig.app.json
index faadd8adfe6..afac238482a 100644
--- a/packages/cmk-frontend-vue/tsconfig.app.json
+++ b/packages/cmk-frontend-vue/tsconfig.app.json
@@ -17,7 +17,10 @@
     "noFallthroughCasesInSwitch": true,
     "noImplicitOverride": true,
     "noImplicitReturns": true,
-    "noPropertyAccessFromIndexSignature": true,
+    // Enabling this option doesn't play nice with vue:
+    // Properties of components exported via index.ts will be typed as Any
+    // Issue link: https://github.com/vuejs/core/issues/11732
+    "noPropertyAccessFromIndexSignature": false,
     "noUncheckedIndexedAccess": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true