CmkDropdown, FormDictionary: render no_elements_text

CMK-20420 Change-Id: I30c56afe2515bfc35740ff0f6803c1952a72bd36
Checkmk · Dec 2, 2024 · 653a3f6 · 653a3f6
1 parent 1516940
commit 653a3f6
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/packages/cmk-frontend-vue/src/components/CmkDropdown.vue b/packages/cmk-frontend-vue/src/components/CmkDropdown.vue
@@ -18,6 +18,7 @@ const {
   noResultsHint = '',
   disabled = false,
   componentId = '',
+  noElementsText = '',
   options,
   showFilter
 } = defineProps<{
@@ -27,6 +28,7 @@ const {
   noResultsHint?: string
   disabled?: boolean
   componentId?: string
+  noElementsText?: string
 }>()
 
 const vClickOutside = useClickOutside()
@@ -131,23 +133,25 @@ function wrap(index: number, length: number): number {
         if (suggestionsShown) suggestionsShown = false
       }
     "
-    class="cmk_dropdown__container"
+    class="cmk-dropdown"
   >
     <CmkButton
+      v-if="options.length > 0"
       :id="componentId"
       ref="comboboxButtonRef"
       role="combobox"
       :aria-label="selectedOptionTitle"
       :aria-expanded="suggestionsShown"
-      :class="{ 'drop-down': true, disabled: disabled || options.length === 0 }"
+      :class="{ 'cmk-dropdown__button': true, disabled: disabled || options.length === 0 }"
       :variant="'transparent'"
       @click.prevent="showSuggestions"
     >
       <div>{{ selectedOptionTitle }}</div>
     </CmkButton>
+    <span v-else>{{ noElementsText }}</span>
     <ul
       v-if="!!suggestionsShown"
-      class="suggestions"
+      class="cmk-dropdown__suggestions"
       @keydown.escape.prevent="hideSuggestions"
       @keydown.tab.prevent="hideSuggestions"
       @keydown.enter="keyEnter"
@@ -178,12 +182,12 @@ function wrap(index: number, length: number): number {
 </template>
 
 <style scoped>
-.cmk_dropdown__container {
+.cmk-dropdown {
   display: inline-block;
   position: relative;
 }
 
-.drop-down {
+.cmk-dropdown__button {
   cursor: pointer;
   background-color: var(--default-form-element-bg-color);
   margin: 0;
@@ -208,7 +212,7 @@ function wrap(index: number, length: number): number {
   }
 }
 
-.suggestions {
+.cmk-dropdown__suggestions {
   position: absolute;
   z-index: 1;
   color: var(--font-color);

diff --git a/packages/cmk-frontend-vue/src/form/components/forms/FormDictionary.vue b/packages/cmk-frontend-vue/src/form/components/forms/FormDictionary.vue
@@ -159,7 +159,11 @@ const { FormEditDispatcher } = useFormEditDispatcher()
 </script>
 
 <template>
-  <table class="dictionary" :class="dictionaryVariants({ variant })">
+  <table
+    v-if="props.spec.elements.length > 0"
+    class="dictionary"
+    :class="dictionaryVariants({ variant })"
+  >
     <tbody>
       <tr v-for="group in getElementsInGroupsFromProps()" :key="`${componentId}.${group.groupKey}`">
         <td class="dictleft">
@@ -213,6 +217,7 @@ const { FormEditDispatcher } = useFormEditDispatcher()
       </tr>
     </tbody>
   </table>
+  <span v-else>{{ spec.no_elements_text }}</span>
 </template>
 
 <style scoped>

diff --git a/packages/cmk-frontend-vue/src/form/components/forms/FormSingleChoice.vue b/packages/cmk-frontend-vue/src/form/components/forms/FormSingleChoice.vue
@@ -38,6 +38,7 @@ const componentId = useId()
       :disabled="spec.frozen"
       :component-id="componentId"
       :show-filter="props.spec.elements.length > 5"
+      :no-elements-text="props.spec.no_elements_text || ''"
     />
   </div>
   <FormValidation :validation="validation"></FormValidation>