diff --git a/cmk/gui/form_specs/private/dictionary_extended.py b/cmk/gui/form_specs/private/dictionary_extended.py index dff0a38d203..ba07d784dc9 100644 --- a/cmk/gui/form_specs/private/dictionary_extended.py +++ b/cmk/gui/form_specs/private/dictionary_extended.py @@ -7,8 +7,8 @@ from typing import Any, TypeVar from cmk.rulesets.v1 import Message -from cmk.rulesets.v1.form_specs import DefaultValue, DictElement, FormSpec -from cmk.shared_typing.vue_formspec_components import DictionaryLayout +from cmk.rulesets.v1.form_specs import DefaultValue, DictElement, DictGroup, FormSpec +from cmk.shared_typing.vue_formspec_components import DictionaryGroupLayout, DictionaryLayout T = TypeVar("T") @@ -43,3 +43,12 @@ class DictionaryExtended(FormSpec[Mapping[str, object]]): prefill: DefaultValue[Mapping[str, object]] | None = None layout: DictionaryLayout = DictionaryLayout.one_column + + +@dataclass(frozen=True, kw_only=True) +class DictGroupExtended(DictGroup): + """Specification for a group of dictionary elements that are more closely related thematically + than the other elements. A group is identified by its title and help text. + """ + + layout: DictionaryGroupLayout = DictionaryGroupLayout.horizontal diff --git a/cmk/gui/form_specs/vue/visitors/dictionary.py b/cmk/gui/form_specs/vue/visitors/dictionary.py index 440da8f1f92..17b4cd84a1c 100644 --- a/cmk/gui/form_specs/vue/visitors/dictionary.py +++ b/cmk/gui/form_specs/vue/visitors/dictionary.py @@ -5,12 +5,13 @@ import ast from collections.abc import Mapping -from cmk.gui.form_specs.private.dictionary_extended import DictionaryExtended +from cmk.gui.form_specs.private.dictionary_extended import DictGroupExtended, DictionaryExtended from cmk.gui.form_specs.vue.validators import build_vue_validators from cmk.gui.i18n import _ from cmk.rulesets.v1.form_specs._composed import NoGroup from cmk.shared_typing import vue_formspec_components as shared_type_defs +from cmk.shared_typing.vue_formspec_components import DictionaryGroupLayout from ._base import FormSpecVisitor from ._registry import get_visitor @@ -91,10 +92,16 @@ def _to_vue( group = None else: + layout = ( + dict_element.group.layout + if isinstance(dict_element.group, DictGroupExtended) + else DictionaryGroupLayout.horizontal + ) group = shared_type_defs.DictionaryGroup( title=localize(dict_element.group.title), help=localize(dict_element.group.help_text), key=repr(dict_element.group.title) + repr(dict_element.group.help_text), + layout=layout, ) if is_active: diff --git a/cmk/shared_typing/vue_formspec_components.py b/cmk/shared_typing/vue_formspec_components.py index 5c7b82a55d1..d0b169d5ed6 100644 --- a/cmk/shared_typing/vue_formspec_components.py +++ b/cmk/shared_typing/vue_formspec_components.py @@ -79,11 +79,17 @@ class I18nPassword: password_choice_invalid: str +class DictionaryGroupLayout(str, Enum): + horizontal = "horizontal" + vertical = "vertical" + + @dataclass(kw_only=True) class DictionaryGroup: key: Optional[str] title: Optional[str] help: Optional[str] + layout: DictionaryGroupLayout class DictionaryLayout(str, Enum): diff --git a/packages/cmk-frontend-vue/src/form/components/forms/FormDictionary.vue b/packages/cmk-frontend-vue/src/form/components/forms/FormDictionary.vue index 6f237c4c912..4eb1324292e 100644 --- a/packages/cmk-frontend-vue/src/form/components/forms/FormDictionary.vue +++ b/packages/cmk-frontend-vue/src/form/components/forms/FormDictionary.vue @@ -28,10 +28,16 @@ const dictionaryVariants = cva('', { variant: { one_column: 'form-dictionary--one_column', two_columns: 'form-dictionary--two_columns' + }, + group_layout: { + none: '', + horizontal: 'horizontal_groups', + vertical: 'vertical_groups' } }, defaultVariants: { - variant: 'one_column' + variant: 'one_column', + group_layout: 'none' } }) type DictionaryVariants = VariantProps @@ -45,6 +51,7 @@ interface ElementsGroup { groupKey: string title?: string help?: string + layout: FormSpec.DictionaryGroupLayout elems: ElementFromProps[] } @@ -102,6 +109,7 @@ const extractGroups = (elements: FormSpec.DictionaryElement[]): ElementsGroup[] groupKey: groupKey, title: element.group?.title || '', help: element.group?.help || '', + layout: element.group?.layout || 'horizontal', elems: [] }) } @@ -209,7 +217,7 @@ const { FormEditDispatcher } = useFormEditDispatcher()
{{ group?.title }}
-
+
diff --git a/packages/cmk-frontend-vue/tests/form/components/forms/FormDictionary.test.ts b/packages/cmk-frontend-vue/tests/form/components/forms/FormDictionary.test.ts index 9ed7be11143..1a0d52bddf3 100644 --- a/packages/cmk-frontend-vue/tests/form/components/forms/FormDictionary.test.ts +++ b/packages/cmk-frontend-vue/tests/form/components/forms/FormDictionary.test.ts @@ -33,7 +33,8 @@ const stringFormSpec: FormSpec.String = { const dictElementGroupFormSpec: FormSpec.DictionaryGroup = { key: 'titlehelp', title: 'title', - help: 'help' + help: 'help', + layout: 'horizontal' } const spec: FormSpec.Dictionary = { diff --git a/packages/cmk-frontend-vue/tests/form/components/forms/FormList.test.ts b/packages/cmk-frontend-vue/tests/form/components/forms/FormList.test.ts index 06e1d5720ba..392f317f0a8 100644 --- a/packages/cmk-frontend-vue/tests/form/components/forms/FormList.test.ts +++ b/packages/cmk-frontend-vue/tests/form/components/forms/FormList.test.ts @@ -35,7 +35,8 @@ const stringFormSpec: FormSpec.String = { const dictElementGroupFormSpec: FormSpec.DictionaryGroup = { key: 'titlehelp', title: 'title', - help: 'help' + help: 'help', + layout: 'horizontal' } const spec: FormSpec.List = { diff --git a/packages/cmk-shared-typing/source/vue_formspec/components.json b/packages/cmk-shared-typing/source/vue_formspec/components.json index 52fc7bca637..1d77dd67b34 100644 --- a/packages/cmk-shared-typing/source/vue_formspec/components.json +++ b/packages/cmk-shared-typing/source/vue_formspec/components.json @@ -348,9 +348,13 @@ }, "help": { "type": ["string", "null"] + }, + "layout": { + "title": "DictionaryGroupLayout", + "enum": ["horizontal", "vertical"] } }, - "required": ["key", "title", "help"] + "required": ["key", "title", "help", "layout"] }, "dictionary_element": { "type": "object", diff --git a/packages/cmk-shared-typing/typescript/vue_formspec_components.ts b/packages/cmk-shared-typing/typescript/vue_formspec_components.ts index 1c4179f7987..64bfab5a88f 100644 --- a/packages/cmk-shared-typing/typescript/vue_formspec_components.ts +++ b/packages/cmk-shared-typing/typescript/vue_formspec_components.ts @@ -74,6 +74,7 @@ export type Dictionary = FormSpec & { layout: DictionaryLayout; i18n_base: I18NFormSpecBase; }; +export type DictionaryGroupLayout = "horizontal" | "vertical"; export type DictionaryLayout = "one_column" | "two_columns"; export type List = FormSpec & { type: "list"; @@ -327,6 +328,7 @@ export interface DictionaryGroup { key: string | null; title: string | null; help: string | null; + layout: DictionaryGroupLayout; } export interface SingleChoiceElement { name: string;