add mandatory label property to CmkDropdown

CMK-20419 Change-Id: I593419d3f081104962b3c4026f4f063b901051b3
Checkmk · Jan 30, 2025 · a957615 · a957615
1 parent b53bb44
commit a957615
Show file tree

Hide file tree

Showing 23 changed files with 132 additions and 32 deletions.
diff --git a/cmk/gui/form_specs/vue/visitors/condition_choices.py b/cmk/gui/form_specs/vue/visitors/condition_choices.py
@@ -165,6 +165,8 @@ def _to_vue(
                 condition_groups=conditions,
                 validators=build_vue_validators(self.form_spec.custom_validate or []),
                 i18n=shared_type_defs.ConditionChoicesI18n(
+                    choose_condition=_("Choose condition"),
+                    choose_operator=_("Choose operator"),
                     add_condition_label=localize(self.form_spec.add_condition_group_label),
                     select_condition_group_to_add=localize(
                         self.form_spec.select_condition_group_to_add

diff --git a/cmk/gui/form_specs/vue/visitors/data_size.py b/cmk/gui/form_specs/vue/visitors/data_size.py
@@ -122,6 +122,7 @@ def _to_vue(
         input_hint = str(compute_input_hint(self.form_spec.prefill))
         return (
             shared_type_defs.DataSize(
+                i18n=shared_type_defs.DataSizeI18n(choose_unit=_("Choose unit")),
                 title=title,
                 help=help_text,
                 label=localize(self.form_spec.label),

diff --git a/cmk/gui/form_specs/vue/visitors/password.py b/cmk/gui/form_specs/vue/visitors/password.py
@@ -112,6 +112,8 @@ def _to_vue(
                     if pw_id is not None
                 ],
                 i18n=VueComponents.I18nPassword(
+                    choose_password_type=_("Choose password type"),
+                    choose_password_from_store=_("Choose password from store"),
                     explicit_password=_("Explicit"),
                     password_store=_("From password store"),
                     no_password_store_choices=_(

diff --git a/cmk/shared_typing/vue_formspec_components.py b/cmk/shared_typing/vue_formspec_components.py
@@ -77,6 +77,8 @@ class I18nPassword:
     password_store: str
     no_password_store_choices: str
     password_choice_invalid: str
+    choose_password_from_store: str
+    choose_password_type: str
 
 
 class DictionaryGroupLayout(str, Enum):
@@ -148,6 +150,11 @@ class MetricI18n:
     service_filter: str
 
 
+@dataclass(kw_only=True)
+class DataSizeI18n:
+    choose_unit: str
+
+
 @dataclass(kw_only=True)
 class TimeSpanI18n:
     millisecond: str
@@ -236,6 +243,8 @@ class ConditionGroup:
 
 @dataclass(kw_only=True)
 class ConditionChoicesI18n:
+    choose_operator: str
+    choose_condition: str
     add_condition_label: str
     select_condition_group_to_add: str
     no_more_condition_groups_to_add: str
@@ -478,6 +487,7 @@ class DataSize(FormSpec):
     label: Optional[str]
     displayed_magnitudes: list[str]
     input_hint: Optional[str]
+    i18n: DataSizeI18n
     type: str = "data_size"
 
 

diff --git a/packages/cmk-frontend-vue/src/components/CmkDropdown.vue b/packages/cmk-frontend-vue/src/components/CmkDropdown.vue
@@ -24,7 +24,8 @@ const {
   noElementsText = '',
   requiredText = '',
   options,
-  showFilter
+  showFilter,
+  label
 } = defineProps<{
   options: DropdownOption[]
   showFilter: boolean
@@ -34,6 +35,7 @@ const {
   componentId?: string | null
   noElementsText?: string
   requiredText?: string
+  label: string
 }>()
 
 const vClickOutside = useClickOutside()
@@ -113,7 +115,7 @@ function selectOption(option: DropdownOption): void {
       :id="componentId"
       ref="comboboxButtonRef"
       role="combobox"
-      :aria-label="selectedOptionTitle"
+      :aria-label="label"
       :aria-expanded="suggestionsShown"
       class="cmk-dropdown__button"
       :class="{

diff --git a/packages/cmk-frontend-vue/src/components/_demo/DemoCmkDropdown.vue b/packages/cmk-frontend-vue/src/components/_demo/DemoCmkDropdown.vue
@@ -26,6 +26,7 @@ const defaultEmpty3 = ref<string | null>(null)
     no-results-hint="no results hint"
     component-id="some component id"
     required-text="required"
+    label="some label"
   />
   <CmkSpace />
   <CmkDropdown
@@ -39,6 +40,7 @@ const defaultEmpty3 = ref<string | null>(null)
     no-results-hint="no results hint"
     component-id="some component id"
     required-text="required"
+    label="some label"
   />
   <CmkSpace />
   <CmkDropdown
@@ -51,6 +53,7 @@ const defaultEmpty3 = ref<string | null>(null)
     input-hint="some input hint"
     no-results-hint="no results hint"
     component-id="some component id"
+    label="some label"
   />
   <CmkSpace />
   <CmkDropdown
@@ -61,6 +64,7 @@ const defaultEmpty3 = ref<string | null>(null)
     no-results-hint="no results hint"
     component-id="some component id"
     required-text="required"
+    label="some label"
   />
   <CmkSpace />
   <CmkDropdown
@@ -75,5 +79,6 @@ const defaultEmpty3 = ref<string | null>(null)
     no-results-hint="no results hint"
     component-id="some component id"
     required-text="required"
+    label="some label"
   />
 </template>
diff --git a/packages/cmk-frontend-vue/src/components/_demo/DemoFormAll.vue b/packages/cmk-frontend-vue/src/components/_demo/DemoFormAll.vue
@@ -306,6 +306,8 @@ function getPassword(name: string, options?: Partial<Omit<Password, 'type'>>): P
     ],
     i18n_base: { required: 'i18n required' },
     i18n: {
+      choose_password_type: 'i18n choose_password_type',
+      choose_password_from_store: 'i18n choose_password_from_store',
       explicit_password: 'i18n explicit_password',
       password_store: 'i18n password_store',
       no_password_store_choices: 'i18n no_password_store_choices',
@@ -323,6 +325,9 @@ function getDataSize(name: string, options?: Partial<Omit<DataSize, 'type'>>): D
     input_hint: getInputHint(name),
     displayed_magnitudes: ['one', 'two'],
     validators: [],
+    i18n: {
+      choose_unit: 'i18n choose_unit'
+    },
     ...options
   }
 }
@@ -512,6 +517,8 @@ function getConditionChoices(
       }
     }, // TODO?
     i18n: {
+      choose_operator: 'i18n choose_operator',
+      choose_condition: 'i18n choose_condition',
       add_condition_label: 'i18n add_condition_label',
       select_condition_group_to_add: 'i18n select_condition_group_to_add',
       no_more_condition_groups_to_add: 'i18n no_more_condition_groups_to_add',

diff --git a/packages/cmk-frontend-vue/src/form/components/forms/FormCascadingSingleChoice.vue b/packages/cmk-frontend-vue/src/form/components/forms/FormCascadingSingleChoice.vue
@@ -145,6 +145,7 @@ const { FormEditDispatcher } = useFormEditDispatcher()
         :show-filter="spec.elements.length > FILTER_SHOW_THRESHOLD"
         :required-text="props.spec.i18n_base.required"
         :input-hint="props.spec.input_hint || ''"
+        :label="props.spec.label || props.spec.title || ''"
       />
     </template>
     <template v-else>

diff --git a/packages/cmk-frontend-vue/src/form/components/forms/FormConditionChoices/ConditionChoice.vue b/packages/cmk-frontend-vue/src/form/components/forms/FormConditionChoices/ConditionChoice.vue
@@ -125,6 +125,7 @@ watch(selectedOperator, (operator) => {
     v-model:selected-option="selectedOperator"
     :options="operatorChoices"
     :show-filter="false"
+    :label="props.i18n.choose_operator"
   />
   <CmkSpace :size="'small'" />
   <template v-if="allValueChoices.length === 1">
@@ -157,6 +158,7 @@ watch(selectedOperator, (operator) => {
             }))
           ]"
           :show-filter="remainingConditions.length > FILTER_SHOW_THRESHOLD - 1"
+          :label="props.i18n.choose_condition"
           @update:selected-option="(value) => updateMultiValue(index, value!)"
         />
       </template>
@@ -167,6 +169,7 @@ watch(selectedOperator, (operator) => {
       :selected-option="selectedSingleValue"
       :options="allValueChoices"
       :show-filter="allValueChoices.length > FILTER_SHOW_THRESHOLD"
+      :label="props.i18n.choose_condition"
       @update:selected-option="(value) => updateValue(selectedOperator, value)"
     />
   </template>

diff --git a/.../cmk-frontend-vue/src/form/components/forms/FormConditionChoices/FormConditionChoices.vue b/.../cmk-frontend-vue/src/form/components/forms/FormConditionChoices/FormConditionChoices.vue
@@ -91,7 +91,9 @@ const elementRequired = computed(() => {
           ne_operator: props.spec.i18n.ne_operator,
           or_operator: props.spec.i18n.or_operator,
           nor_operator: props.spec.i18n.nor_operator,
-          add_condition_label: props.spec.i18n.add_condition_label
+          add_condition_label: props.spec.i18n.add_condition_label,
+          choose_condition: props.spec.i18n.choose_condition,
+          choose_operator: props.spec.i18n.choose_operator
         }"
         @update="(new_value: typing.ConditionChoicesValue) => updateElementData(new_value, index)"
       />
@@ -104,6 +106,7 @@ const elementRequired = computed(() => {
     :show-filter="remainingGroups.length > FILTER_SHOW_THRESHOLD"
     :required-text="elementRequired ? spec.i18n_base.required : ''"
     :no-elements-text="spec.i18n.no_more_condition_groups_to_add"
+    :label="spec.i18n.select_condition_group_to_add"
     @update:selected-option="addElement"
   />
   <FormValidation :validation="validation"></FormValidation>

diff --git a/packages/cmk-frontend-vue/src/form/components/forms/FormConditionChoices/utils.ts b/packages/cmk-frontend-vue/src/form/components/forms/FormConditionChoices/utils.ts
@@ -9,6 +9,8 @@ type KeysOfUnion<T> = T extends T ? keyof T : never
 export type Operator = KeysOfUnion<ConditionChoicesValue['value']>
 
 export type OperatorI18n = {
+  choose_operator: string
+  choose_condition: string
   eq_operator: string
   ne_operator: string
   or_operator: string

diff --git a/packages/cmk-frontend-vue/src/form/components/forms/FormDataSize.vue b/packages/cmk-frontend-vue/src/form/components/forms/FormDataSize.vue
@@ -52,6 +52,7 @@ const magnitudeOptions = computed(() => {
     v-model:selected-option="value[1]"
     :options="magnitudeOptions"
     :show-filter="false"
+    :label="spec.i18n.choose_unit"
   />
   <FormValidation :validation="validation"></FormValidation>
 </template>

diff --git a/packages/cmk-frontend-vue/src/form/components/forms/FormPassword.vue b/packages/cmk-frontend-vue/src/form/components/forms/FormPassword.vue
@@ -93,6 +93,7 @@ const passwordStoreOptions = computed(() => {
     v-model:selected-option="passwordType"
     :options="passwordTypeOptions"
     :show-filter="false"
+    :label="props.spec.i18n.choose_password_type"
   />
   {{ ' ' }}
   <template v-if="data[0] === 'explicit_password'">
@@ -113,6 +114,7 @@ const passwordStoreOptions = computed(() => {
       :options="passwordStoreOptions"
       :show-filter="false"
       :required-text="props.spec.i18n_base.required"
+      :label="props.spec.i18n.choose_password_from_store"
     />
   </template>
   <FormValidation :validation="validation"></FormValidation>

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

diff --git a/packages/cmk-frontend-vue/src/form/components/forms/FormSingleChoiceEditable.vue b/packages/cmk-frontend-vue/src/form/components/forms/FormSingleChoiceEditable.vue
@@ -115,6 +115,7 @@ const { ErrorBoundary, error } = useErrorBoundary()
       :input-hint="choices.length === 0 ? spec.i18n.no_objects : spec.i18n.no_selection"
       :show-filter="props.spec.elements.length > 5"
       :required-text="spec.i18n_base.required"
+      :label="spec.title"
       class="fsce__dropdown"
     />
     <CmkButton