diff --git a/.changeset/flat-shirts-watch.md b/.changeset/flat-shirts-watch.md
new file mode 100644
index 0000000000..bd18d57a51
--- /dev/null
+++ b/.changeset/flat-shirts-watch.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-tech-insights': minor
+---
+
+Added possibility to pass customized title and description for the scorecards instead of using hardcoded ones.
diff --git a/plugins/tech-insights/README.md b/plugins/tech-insights/README.md
index b61cea48ec..db69808df1 100644
--- a/plugins/tech-insights/README.md
+++ b/plugins/tech-insights/README.md
@@ -35,13 +35,24 @@ const serviceEntityPage = (
...
-
+
...
);
```
+It is not obligatory to pass title and description props to `EntityTechInsightsScorecardContent`. If those are left out, default values from `defaultCheckResultRenderers` in `CheckResultRenderer` will be taken, hence `Boolean scorecard` and `This card represents an overview of default boolean Backstage checks`.
+
+### Customize scorecards overview title and description:
+
+```tsx
+// packages/app/src/components/catalog/EntityPage.tsx
+
## Links
- [The Backstage homepage](https://backstage.io)
+```
diff --git a/plugins/tech-insights/src/api/TechInsightsApi.ts b/plugins/tech-insights/src/api/TechInsightsApi.ts
index 6c5f272e7f..9f2d4f14c4 100644
--- a/plugins/tech-insights/src/api/TechInsightsApi.ts
+++ b/plugins/tech-insights/src/api/TechInsightsApi.ts
@@ -38,6 +38,8 @@ export interface TechInsightsApi {
getScorecardsDefinition: (
type: string,
value: CheckResult[],
+ title?: string,
+ description?: string,
) => CheckResultRenderer | undefined;
getAllChecks(): Promise;
runChecks(entityParams: EntityName, checks?: Check[]): Promise;
diff --git a/plugins/tech-insights/src/api/TechInsightsClient.ts b/plugins/tech-insights/src/api/TechInsightsClient.ts
index 2298f463f5..8678ec13c8 100644
--- a/plugins/tech-insights/src/api/TechInsightsClient.ts
+++ b/plugins/tech-insights/src/api/TechInsightsClient.ts
@@ -43,8 +43,14 @@ export class TechInsightsClient implements TechInsightsApi {
getScorecardsDefinition(
type: string,
value: CheckResult[],
+ title?: string,
+ description?: string,
): CheckResultRenderer | undefined {
- const resultRenderers = defaultCheckResultRenderers(value);
+ const resultRenderers = defaultCheckResultRenderers(
+ value,
+ title,
+ description,
+ );
return resultRenderers.find(d => d.type === type);
}
diff --git a/plugins/tech-insights/src/components/CheckResultRenderer.tsx b/plugins/tech-insights/src/components/CheckResultRenderer.tsx
index d57d547384..d4679a7fdf 100644
--- a/plugins/tech-insights/src/components/CheckResultRenderer.tsx
+++ b/plugins/tech-insights/src/components/CheckResultRenderer.tsx
@@ -32,12 +32,15 @@ export type CheckResultRenderer = {
export function defaultCheckResultRenderers(
value: CheckResult[],
+ title: string,
+ description: string,
): CheckResultRenderer[] {
return [
{
type: 'json-rules-engine',
- title: 'Boolean scorecard',
+ title: title || 'Boolean scorecard',
description:
+ description ||
'This card represents an overview of default boolean Backstage checks:',
component: ,
},
diff --git a/plugins/tech-insights/src/components/ScorecardsOverview/ChecksOverview.tsx b/plugins/tech-insights/src/components/ScorecardsOverview/ChecksOverview.tsx
index b07eeab339..d153c690eb 100644
--- a/plugins/tech-insights/src/components/ScorecardsOverview/ChecksOverview.tsx
+++ b/plugins/tech-insights/src/components/ScorecardsOverview/ChecksOverview.tsx
@@ -36,9 +36,11 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
type Checks = {
checks: CheckResult[];
+ title?: string;
+ description?: string;
};
-export const ChecksOverview = ({ checks }: Checks) => {
+export const ChecksOverview = ({ checks, title, description }: Checks) => {
const classes = useStyles();
const api = useApi(techInsightsApiRef);
if (!checks.length) {
@@ -47,6 +49,8 @@ export const ChecksOverview = ({ checks }: Checks) => {
const checkRenderType = api.getScorecardsDefinition(
checks[0].check.type,
checks,
+ title,
+ description,
);
if (checkRenderType) {
diff --git a/plugins/tech-insights/src/components/ScorecardsOverview/ScorecardsOverview.tsx b/plugins/tech-insights/src/components/ScorecardsOverview/ScorecardsOverview.tsx
index ecd9deffcc..73143a7ea8 100644
--- a/plugins/tech-insights/src/components/ScorecardsOverview/ScorecardsOverview.tsx
+++ b/plugins/tech-insights/src/components/ScorecardsOverview/ScorecardsOverview.tsx
@@ -23,10 +23,15 @@ import { ChecksOverview } from './ChecksOverview';
import Alert from '@material-ui/lab/Alert';
import { techInsightsApiRef } from '../../api/TechInsightsApi';
-export const ScorecardsOverview = () => {
+export const ScorecardsOverview = ({
+ title,
+ description,
+}: {
+ title?: string;
+ description?: string;
+}) => {
const api = useApi(techInsightsApiRef);
const { namespace, kind, name } = useParams();
-
const { value, loading, error } = useAsync(
async () => await api.runChecks({ namespace, kind, name }),
);
@@ -37,5 +42,11 @@ export const ScorecardsOverview = () => {
return {error.message};
}
- return ;
+ return (
+
+ );
};