diff --git a/frontend/package.json b/frontend/package.json index 596f9c1a77d2..2673e6a80677 100644 --- a/frontend/package.json +++ b/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" } } diff --git a/frontend/src/component/common/Markdown/Markdown.tsx b/frontend/src/component/common/Markdown/Markdown.tsx index e2e4d964150e..46ea0fc141b7 100644 --- a/frontend/src/component/common/Markdown/Markdown.tsx +++ b/frontend/src/component/common/Markdown/Markdown.tsx @@ -22,3 +22,7 @@ const LinkRenderer = ({ export const Markdown = (props: ComponentProps) => ( ); + +export const SimpleMarkdown = (props: ComponentProps) => ( + +); \ No newline at end of file diff --git a/frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx b/frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx index 867d0d9ebf35..6dfecc397f6f 100644 --- a/frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx +++ b/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 = ({ subtitle, children, }) => { + const subTitleClean = removeMd(subtitle); + const { searchQuery } = useSearchHighlightContext(); const renderSubtitle = ( 40)} + condition={Boolean(subTitleClean && subTitleClean.length > 40)} show={ - + {subtitle || ''}} placement='bottom-start' arrow> - {subtitle} + {subTitleClean} } elseShow={ - {subtitle} + {subTitleClean} } /> @@ -53,15 +59,15 @@ export const LinkCell: React.FC = ({ {title} {children} diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx index be604ab9d789..a54810219c55 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx +++ b/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 = () => {
Description:
- {description} + {description || ''}} + elseShow={description || ''} /> { 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 ( <> @@ -49,11 +55,10 @@ export const FeatureSettingsInformation = ({ Description:{' '} - - {!feature.description?.length - ? 'no description' - : feature.description} - + {description}} + elseShow={description} /> Type: {feature.type} diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts index 34c8f6bdd0ae..5bd73ee41b10 100644 --- a/frontend/src/interfaces/uiConfig.ts +++ b/frontend/src/interfaces/uiConfig.ts @@ -79,6 +79,7 @@ export type UiFlags = { featureSearchFeedbackPosting?: boolean; userAccessUIEnabled?: boolean; sdkReporting?: boolean; + descriptionAsMarkdown?: boolean; }; export interface IVersionInfo { diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 7fb6318a2ef3..998434b0bf49 100644 --- a/frontend/yarn.lock +++ b/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" diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts index 1c46175c7cad..66f58c9aecee 100644 --- a/src/lib/types/experimental.ts +++ b/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( diff --git a/src/server-dev.ts b/src/server-dev.ts index addfab74fae4..187ccce780eb 100644 --- a/src/server-dev.ts +++ b/src/server-dev.ts @@ -50,6 +50,7 @@ process.nextTick(async () => { executiveDashboard: true, userAccessUIEnabled: true, sdkReporting: true, + descriptionAsMarkdown: true, }, }, authentication: {