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) => (
+
+ ),
+ 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 (
- {checkResults.map((result, index) => (
-
-
- {checkResultRenderers
- .find(({ type }) => type === result.check.type)
- ?.component(result) ?? (
- Unknown type.
- )}
-
- ))}
+ {checkResults.map((result, index) => {
+ const description = checkResultRenderers.find(
+ renderer => renderer.type === result.check.type,
+ )?.description;
+
+ return (
+
+
+ {checkResultRenderers
+ .find(({ type }) => type === result.check.type)
+ ?.component(result) ?? (
+ Unknown type.
+ )}
+
+ );
+ })}
);
};