Add option to override description in result renderer

Signed-off-by: ivgo <ivgo@spreadgroup.com>

.changeset/afraid-shirts-train.md

@@ -0,0 +1,10 @@
+---
+'@backstage/plugin-tech-insights': patch
+---
+
+Added the possibility to customize the check description in the scorecard component.
+
+- The `CheckResultRenderer` type now exposes an optional `description` method that allows to overwrite the description with a different string or a React component for a provided check result.
+
+Until now only the `BooleanCheck` element could be overridden, but from now on it's also possible to override the description for a check.
+As an example, the description could change depending on the check result. Refer to the [README](../plugins/tech-insights/README.md#adding-custom-rendering-components) file for more details

plugins/tech-insights/README.md

@@ -127,3 +127,26 @@ export const myCustomBooleanRenderer: CheckResultRenderer = {
   ),
 };
 ```
+
+It's also possible to customize the description. Both strings and React components are accepted. As an example, you would like
+to display another information if the check has failed. In such cases, you could do something like the following:
+
+```tsx
+// packages/app/src/components/myCustomBooleanRenderer.tsx
+
+export const myCustomBooleanRenderer: CheckResultRenderer = {
+  type: 'boolean',
+  component: (checkResult: CheckResult) => (
+    <BooleanCheck checkResult={checkResult} />
+  ),
+  description: (checkResult: CheckResult) => (
+    <>
+      {
+        checkResult.result
+          ? checkResult.check.description // In case of success, return the same description
+          : `The check has failed! ${checkResult.check.description}` // Add a prefix text if the check failed
+      }
+    </>
+  ),
+};
+```

plugins/tech-insights/api-report.md

@@ -35,6 +35,7 @@ export type Check = {
 export type CheckResultRenderer = {
   type: string;
   component: (check: CheckResult) => React_2.ReactElement;
+  description?: (check: CheckResult) => string | React_2.ReactElement;
 };
 
 // @public (undocumented)

plugins/tech-insights/src/components/CheckResultRenderer.tsx

@@ -26,6 +26,7 @@ import { BooleanCheck } from './BooleanCheck';
 export type CheckResultRenderer = {
   type: string;
   component: (check: CheckResult) => React.ReactElement;
+  description?: (check: CheckResult) => string | React.ReactElement;
 };
 
 /**

plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx

@@ -38,21 +38,29 @@ export const ScorecardsList = (props: { checkResults: CheckResult[] }) => {
 
   return (
     <List>
-      {checkResults.map((result, index) => (
-        <ListItem key={result.check.id}>
-          <ListItemText
-            key={index}
-            primary={result.check.name}
-            secondary={result.check.description}
-            className={classes.listItemText}
-          />
-          {checkResultRenderers
-            .find(({ type }) => type === result.check.type)
-            ?.component(result) ?? (
-            <Alert severity="error">Unknown type.</Alert>
-          )}
-        </ListItem>
-      ))}
+      {checkResults.map((result, index) => {
+        const description = checkResultRenderers.find(
+          renderer => renderer.type === result.check.type,
+        )?.description;
+
+        return (
+          <ListItem key={result.check.id}>
+            <ListItemText
+              key={index}
+              primary={result.check.name}
+              secondary={
+                description ? description(result) : result.check.description
+              }
+              className={classes.listItemText}
+            />
+            {checkResultRenderers
+              .find(({ type }) => type === result.check.type)
+              ?.component(result) ?? (
+              <Alert severity="error">Unknown type.</Alert>
+            )}
+          </ListItem>
+        );
+      })}
     </List>
   );
 };