From 899a1b0673042f52271b0b567be76a97ace1c851 Mon Sep 17 00:00:00 2001
From: Kenneth Okoh <kenneth.okoh@checkmk.com>
Date: Tue, 3 Dec 2024 11:47:54 +0100
Subject: [PATCH] Vue CascadingSingleChoice: reposition help text

... to be rendered behind the choice dropdown instead of in front of the
cascading element. This is only relevant for the vertical layout of
CascadingSingleChoice instances
also sort the messy imports

CMK-19761

Change-Id: Idba37e3f91aba02f7e291b0ad3f23884b468c346
---
 .../forms/FormCascadingSingleChoice.vue       | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/cmk-frontend-vue/src/form/components/forms/FormCascadingSingleChoice.vue b/packages/cmk-frontend-vue/src/form/components/forms/FormCascadingSingleChoice.vue
index 180cc017f2f..dc81d29304b 100644
--- a/packages/cmk-frontend-vue/src/form/components/forms/FormCascadingSingleChoice.vue
+++ b/packages/cmk-frontend-vue/src/form/components/forms/FormCascadingSingleChoice.vue
@@ -5,19 +5,21 @@ conditions defined in the file COPYING, which is part of this source code packag
 -->
 <script setup lang="ts">
 import { computed, ref, watch, toRaw } from 'vue'
-import { immediateWatch } from '@/lib/watch'
+
+import CmkDropdown from '@/components/CmkDropdown.vue'
+import CmkSpace from '@/components/CmkSpace.vue'
+import HelpText from '@/components/HelpText.vue'
+import ToggleButtonGroup from '@/components/ToggleButtonGroup.vue'
+import FormValidation from '@/form/components/FormValidation.vue'
+import { validateValue, type ValidationMessages } from '@/form/components/utils/validation'
 import type {
   CascadingSingleChoice,
   CascadingSingleChoiceElement,
   FormSpec
 } from '@/form/components/vue_formspec_components'
-import { useId } from '@/form/utils'
-import FormValidation from '@/form/components/FormValidation.vue'
-import { validateValue, type ValidationMessages } from '@/form/components/utils/validation'
-import HelpText from '@/components/HelpText.vue'
-import ToggleButtonGroup from '@/components/ToggleButtonGroup.vue'
-import CmkDropdown from '@/components/CmkDropdown.vue'
 import { useFormEditDispatcher } from '@/form/private'
+import { useId } from '@/form/utils'
+import { immediateWatch } from '@/lib/watch'
 
 const props = defineProps<{
   spec: CascadingSingleChoice
@@ -145,10 +147,13 @@ const { FormEditDispatcher } = useFormEditDispatcher()
     <template v-else>
       <ToggleButtonGroup v-model="selectedOption" :options="buttonGroupButtons" />
     </template>
+    <template v-if="activeElement !== null">
+      <CmkSpace size="small" />
+      <HelpText :help="activeElement.spec.help" />
+    </template>
   </span>
   <span class="form-cascading-single-choice__cascade">
     <template v-if="activeElement !== null">
-      <HelpText :help="activeElement.spec.help" />
       <FormEditDispatcher
         :key="data[0]"
         v-model:data="data[1]"