fix: the check description is now rendered with markdown

Signed-off-by: David Weber <david.weber@w3tec.ch>

.changeset/poor-months-switch.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-tech-insights': patch
+---
+
+The check description is now rendered with markdown.

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: <EntityTechInsightsScorecardContent title="Test scorecard" />,
+    element: (
+      <EntityProvider entity={entity}>
+        <EntityTechInsightsScorecardContent title="Test scorecard" />
+      </EntityProvider>
+    ),
     title: 'Root Page',
     path: '/tech-insight-scorecard',
   })

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) => <BooleanCheck checkResult={check} />,
+  } as CheckResultRenderer,
+];

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)
+                ) : (
+                  <MarkdownContent content={result.check.description} />
+                )
               }
               className={classes.listItemText}
             />