Vue: add FormSpec MultilineExtended

Change-Id: I4e9c044bdaa6981515ed16032e55725ea81500b7

cmk/gui/form_specs/private/__init__.py

@@ -5,6 +5,7 @@
 
 from .catalog import Catalog, Topic
 from .definitions import (
+    CommentTextArea,
     LegacyValueSpec,
     SingleChoiceElementExtended,
     SingleChoiceExtended,
@@ -23,6 +24,7 @@
     "ListExtended",
     "SingleChoiceElementExtended",
     "SingleChoiceExtended",
+    "CommentTextArea",
     "OptionalChoice",
     "UnknownFormSpec",
     "not_empty",

cmk/gui/form_specs/private/definitions.py

@@ -10,7 +10,13 @@
 from cmk.gui.valuespec import ValueSpec
 
 from cmk.rulesets.v1 import Help, Label, Message, Title
-from cmk.rulesets.v1.form_specs import DefaultValue, FormSpec, InputHint, InvalidElementValidator
+from cmk.rulesets.v1.form_specs import (
+    DefaultValue,
+    FormSpec,
+    InputHint,
+    InvalidElementValidator,
+)
+from cmk.rulesets.v1.form_specs._basic import MultilineText
 
 T = TypeVar("T")
 
@@ -58,3 +64,8 @@ class SingleChoiceExtended(Generic[T], FormSpec[T]):
     type: type[T]
 
     # TODO: copy the code of the post init function?
+
+
+@dataclass(frozen=True, kw_only=True)
+class CommentTextArea(MultilineText):
+    pass

cmk/gui/form_specs/vue/form_spec_visitor.py

@@ -17,6 +17,7 @@
 from cmk.gui.form_specs.converter import SimplePassword, TransformForLegacyData, Tuple
 from cmk.gui.form_specs.private import (
     Catalog,
+    CommentTextArea,
     DictionaryExtended,
     LegacyValueSpec,
     ListExtended,
@@ -73,6 +74,7 @@
     BooleanChoiceVisitor,
     CascadingSingleChoiceVisitor,
     CatalogVisitor,
+    CommentTextAreaVisitor,
     DataSizeVisitor,
     DictionaryVisitor,
     FixedValueVisitor,
@@ -121,6 +123,7 @@ def register_form_specs():
     register_visitor_class(FixedValue, FixedValueVisitor)
     register_visitor_class(BooleanChoice, BooleanChoiceVisitor)
     register_visitor_class(MultilineText, MultilineTextVisitor)
+    register_visitor_class(CommentTextArea, CommentTextAreaVisitor)
     register_visitor_class(RegularExpression, StringVisitor, recompose_regular_expression)
     register_visitor_class(DataSize, DataSizeVisitor)
     register_visitor_class(Catalog, CatalogVisitor)
@@ -153,7 +156,9 @@ def register_validators():
 register_validators()
 
 
-def _process_validation_errors(validation_errors: list[shared_type_defs.ValidationMessage]) -> None:
+def _process_validation_errors(
+    validation_errors: list[shared_type_defs.ValidationMessage],
+) -> None:
     """This functions introduces validation errors from the vue-world into the CheckMK-GUI-world
     The CheckMK-GUI works with a global parameter user_errors.
     These user_errors include the field_id of the broken input field and the error text
@@ -165,7 +170,8 @@ def _process_validation_errors(validation_errors: list[shared_type_defs.Validati
 
     first_error = validation_errors[0]
     raise MKUserError(
-        "" if not first_error.location else first_error.location[-1], first_error.message
+        "" if not first_error.location else first_error.location[-1],
+        first_error.message,
     )
 
 

cmk/gui/form_specs/vue/shared_type_defs.py

@@ -94,6 +94,11 @@ class CascadingChoiceLayout(str, Enum):
     horizontal = "horizontal"
 
 
+@dataclass(kw_only=True)
+class CommentTextAreaI18n:
+    prefix_date_and_comment: str
+
+
 @dataclass(kw_only=True)
 class TimeSpanI18n:
     millisecond: str
@@ -300,6 +305,13 @@ class MultilineText(FormSpec):
     input_hint: Optional[str] = None
 
 
+@dataclass(kw_only=True)
+class CommentTextArea(MultilineText):
+    user_name: str
+    i18n: CommentTextAreaI18n
+    type: str = "comment_text_area"
+
+
 @dataclass(kw_only=True)
 class DataSize(FormSpec):
     displayed_magnitudes: list[str]
@@ -362,6 +374,7 @@ class SimplePassword(FormSpec):
     FixedValue,
     BooleanChoice,
     MultilineText,
+    CommentTextArea,
     Password,
     DataSize,
     Catalog,

cmk/gui/form_specs/vue/visitors/__init__.py

@@ -7,6 +7,7 @@
 from .boolean_choice import BooleanChoiceVisitor
 from .cascading_single_choice import CascadingSingleChoiceVisitor
 from .catalog import CatalogVisitor
+from .comment_text_area import CommentTextAreaVisitor
 from .data_size import DataSizeVisitor
 from .dictionary import DictionaryVisitor
 from .fixed_value import FixedValueVisitor
@@ -46,6 +47,7 @@
     "OptionalChoiceVisitor",
     "PasswordVisitor",
     "SimplePasswordVisitor",
+    "CommentTextAreaVisitor",
     "SingleChoiceVisitor",
     "StringVisitor",
     "TimeSpanVisitor",

cmk/gui/form_specs/vue/visitors/comment_text_area.py

@@ -0,0 +1,31 @@
+#!/usr/bin/env python3
+# Copyright (C) 2024 Checkmk GmbH - License: GNU General Public License v2
+# This file is part of Checkmk (https://checkmk.com). It is subject to the terms and
+# conditions defined in the file COPYING, which is part of this source code package.
+from dataclasses import asdict
+
+from cmk.gui.form_specs.vue import shared_type_defs
+from cmk.gui.form_specs.vue.visitors.multiline_text import MultilineTextVisitor
+from cmk.gui.i18n import _
+from cmk.gui.logged_in import user
+
+from ._type_defs import EmptyValue, Value
+
+
+class CommentTextAreaVisitor(MultilineTextVisitor):
+    def _to_vue(
+        self, raw_value: object, parsed_value: str | EmptyValue
+    ) -> tuple[shared_type_defs.CommentTextArea, Value]:
+        multiline_text, value = super()._to_vue(raw_value, parsed_value)
+        multiline_text_args = asdict(multiline_text)
+        multiline_text_args["type"] = "comment_text_area"
+        return (
+            shared_type_defs.CommentTextArea(
+                **multiline_text_args,
+                user_name=user.id or "",
+                i18n=shared_type_defs.CommentTextAreaI18n(
+                    prefix_date_and_comment=_("Prefix date and your name to the comment")
+                ),
+            ),
+            value,
+        )

packages/cmk-frontend-vue/src/assets/variables.css

@@ -38,6 +38,7 @@
     --icon-continue: url('themes/facelift/images/icon_continue.png');
     --icon-main-help: url('themes/facelift/images/icon_main_help.svg');
     --icon-save-to-services: url('themes/facelift/images/icon_save_to_services.svg');
+    --icon-insertdate: url('themes/facelift/images/icon_insertdate.png');
 
     /* Colors */
     --default-submit-button-border-color: var(--success-dimmed);
@@ -53,6 +54,7 @@
     --icon-continue: url('themes/modern-dark/images/icon_continue.png');
     --icon-main-help: url('themes/modern-dark/images/icon_main_help.svg');
     --icon-save-to-services: url('themes/modern-dark/images/icon_save_to_services.svg');
+    --icon-insertdate: url('themes/modern-dark/images/icon_insertdate.png');
 
     /* Colors */
     --default-submit-button-border-color: rgb(8 94 61);

packages/cmk-frontend-vue/src/form/components/FormEdit.vue

@@ -22,6 +22,7 @@ import FormPassword from './forms/FormPassword.vue'
 import FormTuple from '@/form/components/forms/FormTuple.vue'
 import FormOptionalChoice from '@/form/components/forms/FormOptionalChoice.vue'
 import FormSimplePassword from '@/form/components/forms/FormSimplePassword.vue'
+import FormCommentTextArea from './forms/FormCommentTextArea.vue'
 
 const props = defineProps<{
   spec: FormSpec
@@ -44,6 +45,7 @@ const components: Record<Components['type'], unknown> = {
   time_span: FormTimeSpan,
   boolean_choice: FormBooleanChoice,
   multiline_text: FormMultilineText,
+  comment_text_area: FormCommentTextArea,
   multiple_choice: FormMultipleChoice,
   password: FormPassword,
   data_size: FormDataSize,

packages/cmk-frontend-vue/src/form/components/FormReadonly.vue

@@ -15,7 +15,8 @@ import type {
   MultipleChoice,
   Password,
   Tuple,
-  OptionalChoice
+  OptionalChoice,
+  CommentTextArea
 } from '@/form/components/vue_formspec_components'
 import {
   groupDictionaryValidations,
@@ -68,6 +69,8 @@ function renderForm(
       return renderBooleanChoice(formSpec as BooleanChoice, value as boolean)
     case 'multiline_text':
       return renderMultilineText(formSpec as MultilineText, value as string)
+    case 'comment_text_area':
+      return renderMultilineText(formSpec as CommentTextArea, value as string)
     case 'data_size':
       return renderDataSize(value as [string, string])
     case 'catalog':
@@ -82,6 +85,8 @@ function renderForm(
       return renderOptionalChoice(formSpec as OptionalChoice, value as unknown[])
     case 'simple_password':
       return renderSimplePassword()
+    default:
+      return null
   }
 }
 

packages/cmk-frontend-vue/src/form/components/forms/FormCommentTextArea.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import '@/assets/variables.css'
+import FormMultilineText from './FormMultilineText.vue'
+import type * as FormSpec from '@/form/components/vue_formspec_components'
+import { type ValidationMessages } from '@/form/components/utils/validation'
+
+const props = defineProps<{
+  spec: FormSpec.CommentTextArea
+  backendValidation: ValidationMessages
+}>()
+
+const data = defineModel('data', { type: String, required: true })
+
+const prependDateAndUsername = (): void => {
+  const date = new Date()
+  const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+  data.value = `${formattedDate} ${props.spec.user_name || ''}:\n${data.value}`
+}
+</script>
+<template>
+  <div style="display: flex">
+    <FormMultilineText v-model:data="data" :backend-validation="backendValidation" :spec="spec" />
+    <img
+      :alt="props.spec.i18n.prefix_date_and_comment"
+      :title="props.spec.i18n.prefix_date_and_comment"
+      :style="{ content: 'var(--icon-insertdate)', cursor: 'pointer' }"
+      @click="prependDateAndUsername()"
+    />
+  </div>
+</template>
+
+<style scoped>
+img {
+  width: 20px;
+  height: 20px;
+  margin-left: 10px;
+}
+</style>

packages/cmk-frontend-vue/src/form/components/forms/FormMultilineText.vue

@@ -25,17 +25,19 @@ const style = computed(() => {
 </script>
 
 <template>
-  <div v-if="props.spec.label">
-    <label> {{ props.spec.label }}</label
-    ><br />
+  <div style="flex">
+    <div v-if="props.spec.label">
+      <label> {{ props.spec.label }}</label
+      ><br />
+    </div>
+    <textarea
+      v-model="value"
+      :style="style"
+      :placeholder="spec.input_hint || ''"
+      rows="20"
+      cols="60"
+      type="text"
+    />
+    <FormValidation :validation="validation"></FormValidation>
   </div>
-  <textarea
-    v-model="value"
-    :style="style"
-    :placeholder="spec.input_hint || ''"
-    rows="20"
-    cols="60"
-    type="text"
-  />
-  <FormValidation :validation="validation"></FormValidation>
 </template>

packages/cmk-frontend-vue/src/form/components/vue_formspec_components.ts

@@ -17,6 +17,7 @@ export type Components =
   | FixedValue
   | BooleanChoice
   | MultilineText
+  | CommentTextArea
   | Password
   | DataSize
   | Catalog
@@ -98,12 +99,17 @@ export type BooleanChoice = FormSpec & {
   text_off: string;
 };
 export type MultilineText = FormSpec & {
-  type: "multiline_text";
+  type: string;
   label?: string;
   macro_support?: boolean;
   monospaced?: boolean;
   input_hint?: string;
 };
+export type CommentTextArea = MultilineText & {
+  type: string;
+  user_name: string;
+  i18n: CommentTextAreaI18N;
+};
 export type Password = FormSpec & {
   type: "password";
   password_store_choices: {
@@ -205,6 +211,9 @@ export interface CascadingSingleChoiceElement {
   default_value: unknown;
   parameter_form: FormSpec;
 }
+export interface CommentTextAreaI18N {
+  prefix_date_and_comment: string;
+}
 export interface I18NPassword {
   explicit_password: string;
   password_store: string;