feat: add helper text on String template edit modale (#648)

Co-authored-by: Christopher DEBOVE <[email protected]>
checkmarble · Jan 9, 2025 · 8932d97 · 8932d97
1 parent c9702e0
commit 8932d97
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 3 deletions.
diff --git a/...lderNode/Operand/OperandEditor/OperandEditModal/StringTemplateEdit/StringTemplateEdit.tsx b/...lderNode/Operand/OperandEditor/OperandEditModal/StringTemplateEdit/StringTemplateEdit.tsx
@@ -1,14 +1,17 @@
+import { Callout } from '@app-builder/components/Callout';
+import { ExternalLink } from '@app-builder/components/ExternalLink';
 import {
   type AstNode,
   NewStringTemplateAstNode,
   type StringTemplateAstNode,
 } from '@app-builder/models';
+import { stringTemplatingDocHref } from '@app-builder/services/documentation-href';
 import {
   type AstNodeErrors,
   computeLineErrors,
 } from '@app-builder/services/validation/ast-node-validation';
 import { useEffect, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import * as R from 'remeda';
 import { Button, ModalV2 } from 'ui-design-system';
 
@@ -56,6 +59,17 @@ export const StringTemplateEdit = ({
     <>
       <ModalV2.Title>{t('scenarios:edit_string_template.title')}</ModalV2.Title>
       <div className="flex flex-col gap-9 p-6">
+        <Callout variant="outlined">
+          <ModalV2.Description>
+            <Trans
+              t={t}
+              i18nKey="scenarios:edit_string_template.description"
+              components={{
+                DocLink: <ExternalLink href={stringTemplatingDocHref} />,
+              }}
+            />
+          </ModalV2.Description>
+        </Callout>
         <StringTemplateEditForm {...state} errors={initialErrors} />
         <div className="flex flex-1 flex-row gap-2">
           <ModalV2.Close

diff --git a/packages/app-builder/src/locales/ar/scenarios.json b/packages/app-builder/src/locales/ar/scenarios.json
@@ -365,5 +365,6 @@
   "edit_string_template.template_field.label": "نموذج",
   "edit_string_template.template_field.placeholder": "اكتب نصًا يحتوي على %variable% فيه",
   "edit_string_template.title": "قالب السلسلة",
-  "edit_string_template.variables.label": "المتغيرات"
+  "edit_string_template.variables.label": "المتغيرات",
+  "edit_string_template.description": "قم بإنشاء نص بقيم الحقول (<DocLink>معرفة المزيد</DocLink>)"
 }
diff --git a/packages/app-builder/src/locales/en/scenarios.json b/packages/app-builder/src/locales/en/scenarios.json
@@ -351,6 +351,7 @@
   "edit_is_multiple_of.examples.value": "Value",
   "edit_is_multiple_of.examples.result": "Result",
   "edit_string_template.title": "String template",
+  "edit_string_template.description": "Create a text with field values (<DocLink>learn more</DocLink>)",
   "edit_string_template.template_field.label": "Template",
   "edit_string_template.template_field.placeholder": "Type a text containing a %variable% in it",
   "edit_string_template.variables.label": "Variables",

diff --git a/packages/app-builder/src/locales/fr/scenarios.json b/packages/app-builder/src/locales/fr/scenarios.json
@@ -365,5 +365,6 @@
   "edit_string_template.template_field.label": "Modèle",
   "edit_string_template.template_field.placeholder": "Tapez un texte contenant une %variable%",
   "edit_string_template.title": "Modèle de texte",
-  "edit_string_template.variables.label": "Variables"
+  "edit_string_template.variables.label": "Variables",
+  "edit_string_template.description": "Créer un texte avec des valeurs de champs (<DocLink>en savoir plus</DocLink>)"
 }
diff --git a/packages/app-builder/src/services/documentation-href.ts b/packages/app-builder/src/services/documentation-href.ts
@@ -7,6 +7,9 @@ export const pivotValuesDocHref =
 export const fuzzyMatchingDocHref =
   'https://docs.checkmarble.com/docs/fuzzy-matching';
 
+export const stringTemplatingDocHref =
+  'https://docs.checkmarble.com/docs/string-templating';
+
 export const aggregationDocHref = 'https://docs.checkmarble.com/docs/average';
 
 export const dateDocHref = 'https://docs.checkmarble.com/docs/now-copy';