feat: add support for markdown in toggle descriptions

frontend/package.json

@@ -2,7 +2,10 @@
   "name": "unleash-frontend-local",
   "version": "0.0.0",
   "private": true,
-  "files": ["index.js", "build"],
+  "files": [
+    "index.js",
+    "build"
+  ],
   "engines": {
     "node": ">=18"
   },
@@ -142,11 +145,18 @@
     }
   },
   "browserslist": {
-    "production": [">0.2%", "not dead", "not op_mini all"],
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "dependencies": {
+    "remove-markdown": "^0.5.0"
   }
 }

frontend/src/component/common/Markdown/Markdown.tsx

@@ -22,3 +22,7 @@ const LinkRenderer = ({
 export const Markdown = (props: ComponentProps<typeof ReactMarkdown>) => (
     <ReactMarkdown components={{ a: LinkRenderer }} {...props} />
 );
+
+export const SimpleMarkdown = (props: ComponentProps<typeof ReactMarkdown>) => (
+    <ReactMarkdown components={{ a: LinkRenderer }} skipHtml allowedElements={['a', 'p', 'strong', 'em']} {...props} />
+);

frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx

@@ -12,6 +12,10 @@ import {
     StyledDescription,
 } from './LinkCell.styles';
 
+//@ts-ignore
+import removeMd from 'remove-markdown';
+import { SimpleMarkdown } from 'component/common/Markdown/Markdown';
+
 interface ILinkCellProps {
     title?: string;
     to?: string;
@@ -26,23 +30,25 @@ export const LinkCell: React.FC<ILinkCellProps> = ({
     subtitle,
     children,
 }) => {
+    const subTitleClean = removeMd(subtitle);
+
     const { searchQuery } = useSearchHighlightContext();
 
     const renderSubtitle = (
         <ConditionallyRender
-            condition={Boolean(subtitle && subtitle.length > 40)}
+            condition={Boolean(subTitleClean && subTitleClean.length > 40)}
             show={
-                <HtmlTooltip title={subtitle} placement='bottom-start' arrow>
+                <HtmlTooltip title={<SimpleMarkdown>{subtitle || ''}</SimpleMarkdown>} placement='bottom-start' arrow>
                     <StyledDescription data-loading>
                         <Highlighter search={searchQuery}>
-                            {subtitle}
+                            {subTitleClean}
                         </Highlighter>
                     </StyledDescription>
                 </HtmlTooltip>
             }
             elseShow={
                 <StyledDescription data-loading>
-                    <Highlighter search={searchQuery}>{subtitle}</Highlighter>
+                    <Highlighter search={searchQuery}>{subTitleClean}</Highlighter>
                 </StyledDescription>
             }
         />
@@ -53,15 +59,15 @@ export const LinkCell: React.FC<ILinkCellProps> = ({
             <StyledTitle
                 data-loading
                 style={{
-                    WebkitLineClamp: subtitle ? 1 : 2,
-                    lineClamp: subtitle ? 1 : 2,
+                    WebkitLineClamp: subTitleClean ? 1 : 2,
+                    lineClamp: subTitleClean ? 1 : 2,
                 }}
             >
                 <Highlighter search={searchQuery}>{title}</Highlighter>
                 {children}
             </StyledTitle>
             <ConditionallyRender
-                condition={Boolean(subtitle)}
+                condition={Boolean(subTitleClean)}
                 show={renderSubtitle}
             />
         </StyledContainer>

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx

@@ -7,6 +7,8 @@ import { Edit } from '@mui/icons-material';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+import { Markdown, SimpleMarkdown } from 'component/common/Markdown/Markdown';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const StyledContainer = styled('div')(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusLarge,
@@ -63,6 +65,7 @@ const StyledDescription = styled('p')({
 const FeatureOverviewMetaData = () => {
     const projectId = useRequiredPathParam('projectId');
     const featureId = useRequiredPathParam('featureId');
+    const descriptionAsMarkdown = useUiFlag('descriptionAsMarkdown');
     const { feature } = useFeature(projectId, featureId);
     const { project, description, type } = feature;
 
@@ -93,7 +96,9 @@ const FeatureOverviewMetaData = () => {
                                 <div>Description:</div>
                                 <StyledDescriptionContainer>
                                     <StyledDescription>
-                                        {description}
+                                        <ConditionallyRender condition={descriptionAsMarkdown} 
+                                            show={<SimpleMarkdown>{description || ''}</SimpleMarkdown>} 
+                                            elseShow={description || ''} />
                                     </StyledDescription>
                                     <PermissionIconButton
                                         projectId={projectId}

frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx

@@ -4,6 +4,9 @@ import { useNavigate } from 'react-router-dom';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
+import { useUiFlag } from 'hooks/useUiFlag';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { SimpleMarkdown } from 'component/common/Markdown/Markdown';
 
 interface IFeatureSettingsInformationProps {
     projectId: string;
@@ -25,11 +28,14 @@ export const FeatureSettingsInformation = ({
 }: IFeatureSettingsInformationProps) => {
     const { feature } = useFeature(projectId, featureId);
     const navigate = useNavigate();
+    const descriptionAsMarkdown = useUiFlag('descriptionAsMarkdown');
 
     const onEdit = () => {
         navigate(`/projects/${projectId}/features/${featureId}/edit`);
     };
 
+    const description = feature.description || 'no description';
+
     return (
         <>
             <StyledContainer>
@@ -49,11 +55,10 @@ export const FeatureSettingsInformation = ({
             </Typography>
             <Typography>
                 Description:{' '}
-                <strong>
-                    {!feature.description?.length
-                        ? 'no description'
-                        : feature.description}
-                </strong>
+                <ConditionallyRender 
+                        condition={descriptionAsMarkdown} 
+                        show={<SimpleMarkdown>{description}</SimpleMarkdown>} 
+                        elseShow={description} />
             </Typography>
             <Typography>
                 Type: <strong>{feature.type}</strong>

frontend/src/interfaces/uiConfig.ts

@@ -79,6 +79,7 @@ export type UiFlags = {
     featureSearchFeedbackPosting?: boolean;
     userAccessUIEnabled?: boolean;
     sdkReporting?: boolean;
+    descriptionAsMarkdown?: boolean;
 };
 
 export interface IVersionInfo {

frontend/yarn.lock

@@ -6204,6 +6204,11 @@ remark-rehype@^10.0.0:
     mdast-util-to-hast "^12.1.0"
     unified "^10.0.0"
 
+remove-markdown@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/remove-markdown/-/remove-markdown-0.5.0.tgz#a596264bbd60b9ceab2e2ae86e5789eee91aee32"
+  integrity sha512-x917M80K97K5IN1L8lUvFehsfhR8cYjGQ/yAMRI9E7JIKivtl5Emo5iD13DhMr+VojzMCiYk8V2byNPwT/oapg==
+
 request-progress@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-3.0.0.tgz#4ca754081c7fec63f505e4faa825aa06cd669dbe"

src/lib/types/experimental.ts

@@ -5,6 +5,7 @@ import { getDefaultVariant } from 'unleash-client/lib/variant';
 export type IFlagKey =
     | 'accessLogs'
     | 'anonymiseEventLog'
+    | 'descriptionAsMarkdown'
     | 'encryptEmails'
     | 'enableLicense'
     | 'enableLicenseChecker'
@@ -59,6 +60,10 @@ export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
 const flags: IFlags = {
     anonymiseEventLog: false,
+    descriptionAsMarkdown: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_DESCRIPTION_AS_MARKDOWN,
+        false,
+    ),
     enableLicense: false,
     enableLicenseChecker: false,
     embedProxy: parseEnvVarBoolean(

src/server-dev.ts

@@ -50,6 +50,7 @@ process.nextTick(async () => {
                         executiveDashboard: true,
                         userAccessUIEnabled: true,
                         sdkReporting: true,
+                        descriptionAsMarkdown: true,
                     },
                 },
                 authentication: {