feat: support Markdown in launcher description fields

InseeFrLab · Feb 6, 2025 · f8994bf · f8994bf
1 parent 3206160
commit f8994bf
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 19 deletions.
diff --git a/web/src/ui/pages/launcher/RootFormComponent/Accordion.tsx b/web/src/ui/pages/launcher/RootFormComponent/Accordion.tsx
@@ -19,6 +19,7 @@ import { getIconUrlByName } from "lazy-icons";
 import { useSessionState } from "ui/tools/useSessionState";
 import { z } from "zod";
 import { isObjectThatThrowIfAccessed } from "clean-architecture/createObjectThatThrowsIfAccessed";
+import { Markdown } from "ui/shared/Markdown";
 
 export type Props = {
     className?: string;
@@ -149,9 +150,17 @@ export function Accordion(props: Props) {
                 <Text typo="label 1" componentProps={{ lang: "und" }}>
                     {capitalize(title)}
                 </Text>
-                <Text typo="caption" color="secondary" componentProps={{ lang: "und" }}>
-                    {description}
-                </Text>
+                {description !== undefined && (
+                    <Text
+                        typo="caption"
+                        color="secondary"
+                        componentProps={{ lang: "und" }}
+                    >
+                        <Markdown inline={true} lang="und">
+                            {description}
+                        </Markdown>
+                    </Text>
+                )}
             </MuiAccordionSummary>
             <MuiAccordionDetails id={contentId} className={classes.details}>
                 <FormFieldGroupComponent

diff --git a/...ges/launcher/RootFormComponent/FormFieldGroupComponent/FormFieldGroupComponentWrapper.tsx b/...ges/launcher/RootFormComponent/FormFieldGroupComponent/FormFieldGroupComponentWrapper.tsx
@@ -5,6 +5,7 @@ import { capitalize } from "tsafe/capitalize";
 import { useBackgroundColor } from "ui/tools/useBackgroundColor";
 import { IconButton } from "onyxia-ui/IconButton";
 import { getIconUrlByName } from "lazy-icons";
+import { Markdown } from "onyxia-ui/Markdown";
 
 export function FormFieldGroupComponentWrapper(props: {
     className?: string;
@@ -28,7 +29,9 @@ export function FormFieldGroupComponentWrapper(props: {
                     </Text>
                     {description !== undefined && (
                         <Text typo="caption" componentProps={{ lang: "und" }}>
-                            {capitalize(description)}
+                            <Markdown inline={true} lang="und">
+                                {capitalize(description)}
+                            </Markdown>
                         </Text>
                     )}
                 </div>

diff --git a/web/src/ui/pages/launcher/RootFormComponent/formFields/RangeSliderFormField.tsx b/web/src/ui/pages/launcher/RootFormComponent/formFields/RangeSliderFormField.tsx
@@ -4,6 +4,7 @@ import { useFormField } from "./shared/useFormField";
 import { RangeSlider } from "onyxia-ui/RangeSlider";
 import { capitalize } from "tsafe/capitalize";
 import { same } from "evt/tools/inDepth/same";
+import { Markdown } from "ui/shared/Markdown";
 
 export type Props = {
     className?: string;
@@ -58,14 +59,25 @@ export const RangeSliderFormField = memo((props: Props) => {
         <FormFieldWrapper
             className={className}
             title={capitalize(title)}
-            description={
-                <>
-                    {lowEndRange.description}
-                    {" /"}
-                    <br />
-                    {highEndRange.description}
-                </>
-            }
+            description={(() => {
+                const hasLowEnd = lowEndRange.description !== undefined;
+                const hasHighEnd = highEndRange.description !== undefined;
+
+                const descriptionText =
+                    hasLowEnd && hasHighEnd
+                        ? `${lowEndRange.description} /  \n${highEndRange.description}`
+                        : hasLowEnd
+                          ? `${lowEndRange.description} /`
+                          : hasHighEnd
+                            ? `/ ${highEndRange.description}`
+                            : undefined;
+
+                if (descriptionText === undefined) {
+                    return undefined;
+                }
+
+                return <Markdown inline={true}>{descriptionText}</Markdown>;
+            })()}
             error={undefined}
             onResetToDefault={resetToDefault}
             inputId={inputId}

diff --git a/web/src/ui/pages/launcher/RootFormComponent/formFields/shared/FormFieldWrapper.tsx b/web/src/ui/pages/launcher/RootFormComponent/formFields/shared/FormFieldWrapper.tsx
@@ -7,6 +7,7 @@ import ToolTip from "@mui/material/Tooltip";
 import { declareComponentKeys, useTranslation } from "ui/i18n";
 import { capitalize } from "tsafe/capitalize";
 import SettingsBackupRestoreIcon from "@mui/icons-material/SettingsBackupRestore";
+import { Markdown } from "ui/shared/Markdown";
 
 type Props = {
     className?: string;
@@ -68,13 +69,13 @@ export function FormFieldWrapper(props: Props) {
             </div>
             {description !== undefined && (
                 <Text typo="caption" className={classes.description}>
-                    {
-                        <span lang="und">
-                            {typeof description === "string"
-                                ? capitalize(description)
-                                : description}
-                        </span>
-                    }
+                    {typeof description === "string" ? (
+                        <Markdown inline={true} lang="und">
+                            {capitalize(description)}
+                        </Markdown>
+                    ) : (
+                        description
+                    )}
                 </Text>
             )}
             <div className={classes.childrenWrapper}>{children}</div>