diff --git a/.changeset/poor-months-switch.md b/.changeset/poor-months-switch.md
new file mode 100644
index 0000000000..732152a965
--- /dev/null
+++ b/.changeset/poor-months-switch.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-tech-insights': patch
+---
+
+The check description is now rendered with markdown.
diff --git a/plugins/tech-insights/dev/index.tsx b/plugins/tech-insights/dev/index.tsx
index 46337cf5fe..c5deda2ea5 100644
--- a/plugins/tech-insights/dev/index.tsx
+++ b/plugins/tech-insights/dev/index.tsx
@@ -18,12 +18,45 @@ import { createDevApp } from '@backstage/dev-utils';
import {
techInsightsPlugin,
EntityTechInsightsScorecardContent,
-} from '../src/plugin';
+ techInsightsApiRef,
+ TechInsightsApi,
+ Check,
+} from '../src';
+import { CompoundEntityRef, Entity } from '@backstage/catalog-model';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
+import { checkResultRenderers, runChecksResponse } from './mocks';
+
+const entity = {
+ apiVersion: 'backstage.io/v1alpha1',
+ kind: 'Component',
+ metadata: {
+ name: 'random-name',
+ },
+} as Entity;
createDevApp()
.registerPlugin(techInsightsPlugin)
+ .registerApi({
+ api: techInsightsApiRef,
+ deps: {},
+ factory: () =>
+ ({
+ getCheckResultRenderers: (_: string[]) => checkResultRenderers,
+ getAllChecks: async () => [],
+ runChecks: async (_: CompoundEntityRef, __?: string[]) =>
+ runChecksResponse,
+ runBulkChecks: async (_: CompoundEntityRef[], __?: Check[]) =>
+ '' as any,
+ getFacts: async (_: CompoundEntityRef, __: string[]) => '' as any,
+ getFactSchemas: async () => [],
+ } as TechInsightsApi),
+ })
.addPage({
- element: ,
+ element: (
+
+
+
+ ),
title: 'Root Page',
path: '/tech-insight-scorecard',
})
diff --git a/plugins/tech-insights/dev/mocks.tsx b/plugins/tech-insights/dev/mocks.tsx
new file mode 100644
index 0000000000..eec9b66054
--- /dev/null
+++ b/plugins/tech-insights/dev/mocks.tsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { CheckResult } from '@backstage/plugin-tech-insights-common';
+import { BooleanCheck, CheckResultRenderer } from '../src';
+
+export const runChecksResponse = [
+ {
+ facts: {
+ 'fact-id': {
+ id: '1',
+ type: 'boolean',
+ description: 'fact description',
+ value: true,
+ },
+ },
+ check: {
+ id: 'fact-id',
+ type: 'boolean',
+ name: 'The check name',
+ description: `The check description \nusing markdown **bold** and a [link](https://backstage.io)`,
+ factIds: ['1'],
+ },
+ result: true,
+ } as CheckResult,
+];
+
+export const checkResultRenderers = [
+ {
+ type: 'boolean',
+ component: (check: CheckResult) => ,
+ } as CheckResultRenderer,
+];
diff --git a/plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx b/plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx
index 9973abef71..e8e57b0afe 100644
--- a/plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx
+++ b/plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx
@@ -17,10 +17,11 @@
import React from 'react';
import { useApi } from '@backstage/core-plugin-api';
import { makeStyles, List, ListItem, ListItemText } from '@material-ui/core';
-import { techInsightsApiRef } from '../../api/TechInsightsApi';
+import { techInsightsApiRef } from '../../api';
import { CheckResult } from '@backstage/plugin-tech-insights-common';
import { BackstageTheme } from '@backstage/theme';
import { Alert } from '@material-ui/lab';
+import { MarkdownContent } from '@backstage/core-components';
const useStyles = makeStyles((theme: BackstageTheme) => ({
listItemText: {
@@ -49,7 +50,11 @@ export const ScorecardsList = (props: { checkResults: CheckResult[] }) => {
key={index}
primary={result.check.name}
secondary={
- description ? description(result) : result.check.description
+ description ? (
+ description(result)
+ ) : (
+
+ )
}
className={classes.listItemText}
/>