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 ( + + ); };