vue: Introduced vertical layout for DictGroups

Change-Id: I18996548a8a275a3b4ba09f0beff19d39c793a90
Checkmk · Jan 14, 2025 · 54b6412 · 54b6412
1 parent 5add534
commit 54b6412
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<typeof dictionaryVariants>
@@ -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()
         <td class="dictleft">
           <div v-if="!!group.title" class="form-dictionary__group-title">{{ group?.title }}</div>
           <FormHelp v-if="group.help" :help="group.help" />
-          <div :class="dictionaryVariants({ variant })">
+          <div :class="dictionaryVariants({ variant, group_layout: group.layout })">
             <div
               v-for="dict_element in group.elems"
               :key="`${componentId}.${dict_element.dict_config.name}`"
@@ -321,8 +329,10 @@ span.checkbox {
 }
 
 .form-dictionary--one_column {
-  display: flex;
   flex-direction: row;
   gap: 0.5em;
+  &.horizontal_groups {
+    display: flex;
+  }
 }
 </style>
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
@@ -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
@@ -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
@@ -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
@@ -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;