Add posibility to customize description and title

Signed-off-by: irma12 <irma@roadie.io>

.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.

plugins/tech-insights/README.md

@@ -35,13 +35,24 @@ const serviceEntityPage = (
     </EntityLayout.Route>
     ...
     <EntityLayout.Route path="/tech-insights" title="Scorecards">
-      <EntityTechInsightsScorecardContent />
+      <EntityTechInsightsScorecardContent
+        title="Customized title for the scorecard"
+        description="Small description about scorecards"
+      />
     </EntityLayout.Route>
     ...
   </EntityLayoutWrapper>
 );
 ```
 
+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)
+```

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<Check[]>;
   runChecks(entityParams: EntityName, checks?: Check[]): Promise<CheckResult[]>;

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

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: <BooleanCheck checkResult={value} />,
     },

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) {

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 <Alert severity="error">{error.message}</Alert>;
   }
 
-  return <ChecksOverview checks={value || []} />;
+  return (
+    <ChecksOverview
+      title={title}
+      description={description}
+      checks={value || []}
+    />
+  );
 };