Skip to content

Commit

Permalink
fix: Use Markdown formatting in various places (#17606)
Browse files Browse the repository at this point in the history
* 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 <[email protected]>
  • Loading branch information
Twixes and pauldambra authored Sep 26, 2023
1 parent a47113a commit aacf33a
Show file tree
Hide file tree
Showing 7 changed files with 52 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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>
)
Expand All @@ -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>
Expand Down
14 changes: 11 additions & 3 deletions frontend/src/scenes/actions/ActionsTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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>
)}
</>
)
},
},
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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>
)
Expand Down
7 changes: 6 additions & 1 deletion frontend/src/scenes/experiments/Experiments.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
)}
</>
)
},
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/scenes/feature-flags/FeatureFlags.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
)}
</>
)
Expand Down
7 changes: 6 additions & 1 deletion frontend/src/scenes/persons/RelatedFeatureFlags.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
)}
</>
)
},
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/scenes/saved-insights/SavedInsights.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
)}
</>
)
Expand Down

0 comments on commit aacf33a

Please sign in to comment.