From 22963209d239c8bae544fcbf926c43be377fc4fb Mon Sep 17 00:00:00 2001
From: ivgo <ivgo@spreadgroup.com>
Date: Thu, 13 Apr 2023 14:50:52 +0200
Subject: [PATCH] Add option to override description in result renderer

Signed-off-by: ivgo <ivgo@spreadgroup.com>
---
 .changeset/afraid-shirts-train.md             | 10 +++++
 plugins/tech-insights/README.md               | 23 +++++++++++
 plugins/tech-insights/api-report.md           |  1 +
 .../src/components/CheckResultRenderer.tsx    |  1 +
 .../ScorecardsList/ScorecardsList.tsx         | 38 +++++++++++--------
 5 files changed, 58 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/afraid-shirts-train.md

diff --git a/.changeset/afraid-shirts-train.md b/.changeset/afraid-shirts-train.md
new file mode 100644
index 0000000000..b52836db43
--- /dev/null
+++ b/.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
diff --git a/plugins/tech-insights/README.md b/plugins/tech-insights/README.md
index 98d4777ba2..3185d40441 100644
--- a/plugins/tech-insights/README.md
+++ b/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
+      }
+    </>
+  ),
+};
+```
diff --git a/plugins/tech-insights/api-report.md b/plugins/tech-insights/api-report.md
index 47aa8bbbea..f535a69120 100644
--- a/plugins/tech-insights/api-report.md
+++ b/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)
diff --git a/plugins/tech-insights/src/components/CheckResultRenderer.tsx b/plugins/tech-insights/src/components/CheckResultRenderer.tsx
index 452715ddeb..7db3c72c02 100644
--- a/plugins/tech-insights/src/components/CheckResultRenderer.tsx
+++ b/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;
 };
 
 /**
diff --git a/plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx b/plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx
index 03dfa06abf..9973abef71 100644
--- a/plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx
+++ b/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>
   );
 };