From aacf33a8b1653f8448d5ac7310646af538d54b5b Mon Sep 17 00:00:00 2001
From: Michael Matloka <dev@twixes.com>
Date: Tue, 26 Sep 2023 16:38:26 +0200
Subject: [PATCH] fix: Use Markdown formatting in various places (#17606)

* fix: Use Markdown formatting in various places

* Only render string definition descriptions with markdown

* disable warning for use of style

---------

Co-authored-by: Paul D'Ambra <paul@posthog.com>
---
 .../DefinitionPopover/DefinitionPopover.tsx   | 21 ++++++++++++++++---
 frontend/src/scenes/actions/ActionsTable.tsx  | 14 ++++++++++---
 .../dashboard/dashboards/DashboardsTable.tsx  |  5 ++++-
 .../src/scenes/experiments/Experiments.tsx    |  7 ++++++-
 .../src/scenes/feature-flags/FeatureFlags.tsx |  5 +++--
 .../scenes/persons/RelatedFeatureFlags.tsx    |  7 ++++++-
 .../scenes/saved-insights/SavedInsights.tsx   |  5 ++++-
 7 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx
index 565a7dfd2589f..807c8a8a83df4 100644
--- a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx
+++ b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx
@@ -12,6 +12,7 @@ import { membersLogic } from 'scenes/organization/Settings/membersLogic'
 import { Link } from 'lib/lemon-ui/Link'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
 
 interface DefinitionPopoverProps {
     children: React.ReactNode
@@ -98,7 +99,13 @@ function Header({
 }
 
 function Description({ description }: { description: React.ReactNode }): JSX.Element {
-    return <div className="definition-popover-description">{description}</div>
+    return typeof description === 'string' ? (
+        <LemonMarkdown className="definition-popover-description" lowKeyHeadings>
+            {description}
+        </LemonMarkdown>
+    ) : (
+        <div className="definition-popover-description">{description}</div>
+    )
 }
 
 function DescriptionEmpty(): JSX.Element {
@@ -194,7 +201,11 @@ interface GridProps {
 
 function Grid({ children, cols }: GridProps): JSX.Element {
     return (
-        <div className="definition-popover-grid" style={{ gridTemplateColumns: `repeat(${cols}, auto)` }}>
+        <div
+            className="definition-popover-grid"
+            // eslint-disable-next-line react/forbid-dom-props
+            style={{ gridTemplateColumns: `repeat(${cols}, auto)` }}
+        >
             {children}
         </div>
     )
@@ -214,7 +225,11 @@ function Card({
     alignItems?: 'baseline' | 'center' | 'end'
 }): JSX.Element {
     return (
-        <div className="definition-popover-grid-card" style={{ alignItems }}>
+        <div
+            className="definition-popover-grid-card"
+            // eslint-disable-next-line react/forbid-dom-props
+            style={{ alignItems }}
+        >
             <div className="definition-popover-grid-card-title">{title}</div>
             {value && <div className="definition-popover-grid-card-content">{value}</div>}
         </div>
diff --git a/frontend/src/scenes/actions/ActionsTable.tsx b/frontend/src/scenes/actions/ActionsTable.tsx
index ed831a5056965..38259efc8719a 100644
--- a/frontend/src/scenes/actions/ActionsTable.tsx
+++ b/frontend/src/scenes/actions/ActionsTable.tsx
@@ -24,6 +24,7 @@ import { LemonInput } from '@posthog/lemon-ui'
 import { actionsLogic } from 'scenes/actions/actionsLogic'
 import { IconCheckmark, IconPlayCircle } from 'lib/lemon-ui/icons'
 import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction'
+import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
 
 export const scene: SceneExport = {
     component: ActionsTable,
@@ -50,9 +51,16 @@ export function ActionsTable(): JSX.Element {
             sorter: (a: ActionType, b: ActionType) => (a.name || '').localeCompare(b.name || ''),
             render: function RenderName(name, action: ActionType, index: number): JSX.Element {
                 return (
-                    <Link data-attr={'action-link-' + index} to={urls.action(action.id)} className="row-name">
-                        {name || <i>Unnamed action</i>}
-                    </Link>
+                    <>
+                        <Link data-attr={'action-link-' + index} to={urls.action(action.id)} className="row-name">
+                            {name || <i>Unnamed action</i>}
+                        </Link>
+                        {action.description && (
+                            <LemonMarkdown className="row-description" lowKeyHeadings>
+                                {action.description}
+                            </LemonMarkdown>
+                        )}
+                    </>
                 )
             },
         },
diff --git a/frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx b/frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx
index cf29eebf550dc..bf49e2d424bf7 100644
--- a/frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx
+++ b/frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx
@@ -23,6 +23,7 @@ import { LemonRow } from 'lib/lemon-ui/LemonRow'
 import { DASHBOARD_CANNOT_EDIT_MESSAGE } from '../DashboardHeader'
 import { LemonInput, LemonSelect } from '@posthog/lemon-ui'
 import { membersLogic } from 'scenes/organization/Settings/membersLogic'
+import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
 
 export function DashboardsTableContainer(): JSX.Element {
     const { dashboardsLoading } = useValues(dashboardsModel)
@@ -104,7 +105,9 @@ export function DashboardsTable({
                             )}
                         </div>
                         {hasAvailableFeature(AvailableFeature.DASHBOARD_COLLABORATION) && description && (
-                            <span className="row-description">{description}</span>
+                            <LemonMarkdown className="row-description max-w-100" lowKeyHeadings>
+                                {description}
+                            </LemonMarkdown>
                         )}
                     </div>
                 )
diff --git a/frontend/src/scenes/experiments/Experiments.tsx b/frontend/src/scenes/experiments/Experiments.tsx
index 4ff49b5e01fa8..c928f6a1d23aa 100644
--- a/frontend/src/scenes/experiments/Experiments.tsx
+++ b/frontend/src/scenes/experiments/Experiments.tsx
@@ -21,6 +21,7 @@ import { ExperimentsPayGate } from './ExperimentsPayGate'
 import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction'
 import { router } from 'kea-router'
 import { ExperimentsHog } from 'lib/components/hedgehogs'
+import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
 
 export const scene: SceneExport = {
     component: Experiments,
@@ -63,7 +64,11 @@ export function Experiments(): JSX.Element {
                         <Link to={experiment.id ? urls.experiment(experiment.id) : undefined}>
                             <span className="row-name">{stringWithWBR(experiment.name, 17)}</span>
                         </Link>
-                        {experiment.description && <span className="row-description">{experiment.description}</span>}
+                        {experiment.description && (
+                            <LemonMarkdown className="row-description" lowKeyHeadings>
+                                {experiment.description}
+                            </LemonMarkdown>
+                        )}
                     </>
                 )
             },
diff --git a/frontend/src/scenes/feature-flags/FeatureFlags.tsx b/frontend/src/scenes/feature-flags/FeatureFlags.tsx
index 98e128e7924b9..9904106941ac5 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlags.tsx
+++ b/frontend/src/scenes/feature-flags/FeatureFlags.tsx
@@ -29,6 +29,7 @@ import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { FeatureFlagHog } from 'lib/components/hedgehogs'
 import { Noun, groupsModel } from '~/models/groupsModel'
+import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
 
 export const scene: SceneExport = {
     component: FeatureFlags,
@@ -90,9 +91,9 @@ export function OverViewTab({
                         </div>
 
                         {featureFlag.name && (
-                            <span className="row-description" style={{ maxWidth: '24rem' }}>
+                            <LemonMarkdown className="row-description" lowKeyHeadings>
                                 {featureFlag.name}
-                            </span>
+                            </LemonMarkdown>
                         )}
                     </>
                 )
diff --git a/frontend/src/scenes/persons/RelatedFeatureFlags.tsx b/frontend/src/scenes/persons/RelatedFeatureFlags.tsx
index 49d8ab3f35a41..dad9f36c94ec5 100644
--- a/frontend/src/scenes/persons/RelatedFeatureFlags.tsx
+++ b/frontend/src/scenes/persons/RelatedFeatureFlags.tsx
@@ -7,6 +7,7 @@ import stringWithWBR from 'lib/utils/stringWithWBR'
 import { urls } from 'scenes/urls'
 import { FeatureFlagReleaseType } from '~/types'
 import { relatedFeatureFlagsLogic, RelatedFeatureFlag } from './relatedFeatureFlagsLogic'
+import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
 
 interface Props {
     distinctId: string
@@ -55,7 +56,11 @@ export function RelatedFeatureFlags({ distinctId, groups }: Props): JSX.Element
                                 {isExperiment ? 'Experiment' : 'Feature flag'}
                             </LemonTag>
                         </Link>
-                        {featureFlag.name && <span className="row-description">{featureFlag.name}</span>}
+                        {featureFlag.name && (
+                            <LemonMarkdown className="row-description" lowKeyHeadings>
+                                {featureFlag.name}
+                            </LemonMarkdown>
+                        )}
                     </>
                 )
             },
diff --git a/frontend/src/scenes/saved-insights/SavedInsights.tsx b/frontend/src/scenes/saved-insights/SavedInsights.tsx
index a59b440c4c2a2..e68039611bcd0 100644
--- a/frontend/src/scenes/saved-insights/SavedInsights.tsx
+++ b/frontend/src/scenes/saved-insights/SavedInsights.tsx
@@ -57,6 +57,7 @@ import { FEATURE_FLAGS } from 'lib/constants'
 import { isInsightVizNode } from '~/queries/utils'
 import { overlayForNewInsightMenu } from 'scenes/saved-insights/newInsightsMenu'
 import { summarizeInsight } from 'scenes/insights/summarizeInsight'
+import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
 
 interface NewInsightButtonProps {
     dataAttr: string
@@ -396,7 +397,9 @@ export function SavedInsights(): JSX.Element {
                             />
                         </span>
                         {hasDashboardCollaboration && insight.description && (
-                            <span className="row-description">{insight.description}</span>
+                            <LemonMarkdown className="row-description" lowKeyHeadings>
+                                {insight.description}
+                            </LemonMarkdown>
                         )}
                     </>
                 )