feat: add new component EntityTechInsightsScorecardCard

The `EntityTechInsightsScorecardCard` can be used in the overview of the `EntityPage` page or display multiple individual `EntityTechInsightsScorecardCard` in `EntityLayout.Route`.

Signed-off-by: David Weber <david.weber@w3tec.ch>

plugins/tech-insights/README.md

@@ -38,10 +38,6 @@ const serviceEntityPage = (
         title="Customized title for the scorecard"
         description="Small description about scorecards"
       />
-      <EntityTechInsightsScorecardContent
-        title="Show only simpleTestCheck in this card"
-        checksId={['simpleTestCheck']}
-      />
     </EntityLayout.Route>
     ...
   </EntityLayoutWrapper>
@@ -50,8 +46,45 @@ 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`.
 
+If you like to display multiple cards in a `EntityLayout.Route` use `EntityTechInsightsScorecardCard`.
+
 You can pass an array `checksId` as a prop with the [Fact Retrievers ids](../tech-insights-backend#creating-fact-retrievers) to limit which checks you want to show in this card, If you don't pass, the default value is show all checks.
 
+```tsx
+<EntityTechInsightsScorecardContent
+  title="Show only simpleTestCheck in this card"
+  checksId={['simpleTestCheck']}
+/>
+```
+
+If you want to show checks in the overview of an entity use `EntityTechInsightsScorecardCard`.
+
+```tsx
+// packages/app/src/components/catalog/EntityPage.tsx
+
+import { EntityTechInsightsScorecardCard } from '@backstage/plugin-tech-insights';
+
+const overviewContent = (
+  <Grid container spacing={3} alignItems="stretch">
+    {entityWarningContent}
+    <Grid item md={6} xs={12}>
+      <EntityAboutCard variant="gridItem" />
+    </Grid>
+    <Grid item md={6} xs={12}>
+      <EntityCatalogGraphCard variant="gridItem" height={400} />
+    </Grid>
+    ...
+    <Grid item md={8} xs={12}>
+      <EntityTechInsightsScorecardCard
+        title="Customized title for the scorecard"
+        description="Small description about scorecards"
+        checksId={['simpleTestCheck']}
+      />
+    </Grid>
+  </Grid>
+);
+```
+
 ## Boolean Scorecard Example
 
 If you follow the [Backend Example](https://github.com/backstage/backstage/tree/master/plugins/tech-insights-backend#backend-example), once the needed facts have been generated the boolean scorecard will look like this:

plugins/tech-insights/api-report.md

@@ -30,6 +30,17 @@ export type CheckResultRenderer = {
   component: React_2.ReactElement;
 };
 
+// @public (undocumented)
+export const EntityTechInsightsScorecardCard: ({
+  title,
+  description,
+  checksId,
+}: {
+  title?: string | undefined;
+  description?: string | undefined;
+  checksId?: string[] | undefined;
+}) => JSX.Element;
+
 // @public (undocumented)
 export const EntityTechInsightsScorecardContent: ({
   title,

plugins/tech-insights/src/components/ScorecardsCard/ScorecardsCard.tsx

@@ -19,11 +19,11 @@ import { useParams } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
 import { Progress } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
-import { ChecksOverview } from './ChecksOverview';
+import { ScorecardInfo } from '../ScorecardsInfo';
 import Alert from '@material-ui/lab/Alert';
 import { techInsightsApiRef } from '../../api/TechInsightsApi';
 
-export const ScorecardsOverview = ({
+export const ScorecardsCard = ({
   title,
   description,
   checksId,
@@ -45,7 +45,7 @@ export const ScorecardsOverview = ({
   }
 
   return (
-    <ChecksOverview
+    <ScorecardInfo
       title={title}
       description={description}
       checks={value || []}

plugins/tech-insights/src/components/ScorecardsCard/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { ScorecardsOverview } from './ScorecardsOverview';
+export { ScorecardsCard } from './ScorecardsCard';

plugins/tech-insights/src/components/ScorecardsContent/ScorecardContent.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import useAsync from 'react-use/lib/useAsync';
+import { Content, Page, Progress } from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
+import { ScorecardInfo } from '../ScorecardsInfo';
+import Alert from '@material-ui/lab/Alert';
+import { techInsightsApiRef } from '../../api/TechInsightsApi';
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles(() => ({
+  contentScorecards: {
+    paddingLeft: 0,
+    paddingRight: 0,
+  },
+}));
+
+export const ScorecardsContent = ({
+  title,
+  description,
+  checksId,
+}: {
+  title?: string;
+  description?: string;
+  checksId?: string[];
+}) => {
+  const classes = useStyles();
+  const api = useApi(techInsightsApiRef);
+  const { namespace, kind, name } = useParams();
+  const { value, loading, error } = useAsync(
+    async () => await api.runChecks({ namespace, kind, name }, checksId),
+  );
+
+  if (loading) {
+    return <Progress />;
+  } else if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  return (
+    <Page themeId="home">
+      <Content className={classes.contentScorecards}>
+        <ScorecardInfo
+          title={title}
+          description={description}
+          checks={value || []}
+        />
+      </Content>
+    </Page>
+  );
+};

plugins/tech-insights/src/components/ScorecardsContent/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { ScorecardsContent } from './ScorecardContent';

plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx

@@ -17,17 +17,13 @@
 import React from 'react';
 import { makeStyles, Grid, Typography } from '@material-ui/core';
 import { useApi } from '@backstage/core-plugin-api';
-import { Content, Page, InfoCard } from '@backstage/core-components';
+import { InfoCard } from '@backstage/core-components';
 import { CheckResult } from '@backstage/plugin-tech-insights-common';
 import { techInsightsApiRef } from '../../api/TechInsightsApi';
 import { BackstageTheme } from '@backstage/theme';
 import { Alert } from '@material-ui/lab';
 
 const useStyles = makeStyles((theme: BackstageTheme) => ({
-  contentScorecards: {
-    paddingLeft: 0,
-    paddingRight: 0,
-  },
   subheader: {
     fontWeight: 'bold',
     paddingLeft: theme.spacing(0.5),
@@ -40,12 +36,37 @@ type Checks = {
   description?: string;
 };
 
-export const ChecksOverview = ({ checks, title, description }: Checks) => {
+const infoCard = (
+  title: Checks['title'],
+  description: Checks['description'],
+  className: string,
+  element: JSX.Element,
+) => (
+  <Grid item xs={12}>
+    <InfoCard title={title}>
+      <Typography className={className} variant="body1" gutterBottom>
+        {description}
+      </Typography>
+      <Grid item xs={12}>
+        {element}
+      </Grid>
+    </InfoCard>
+  </Grid>
+);
+
+export const ScorecardInfo = ({ checks, title, description }: Checks) => {
   const classes = useStyles();
   const api = useApi(techInsightsApiRef);
+
   if (!checks.length) {
-    return <Alert severity="warning">No checks have any data yet.</Alert>;
+    return infoCard(
+      title,
+      description,
+      classes.subheader,
+      <Alert severity="warning">No checks have any data yet.</Alert>,
+    );
   }
+
   const checkRenderType = api.getScorecardsDefinition(
     checks[0].check.type,
     checks,
@@ -54,21 +75,11 @@ export const ChecksOverview = ({ checks, title, description }: Checks) => {
   );
 
   if (checkRenderType) {
-    return (
-      <Page themeId="home">
-        <Content className={classes.contentScorecards}>
-          <Grid item xs={12}>
-            <InfoCard title={checkRenderType.title}>
-              <Typography className={classes.subheader} variant="body1">
-                {checkRenderType.description}
-              </Typography>
-              <Grid item xs={11}>
-                {checkRenderType.component}
-              </Grid>
-            </InfoCard>
-          </Grid>
-        </Content>
-      </Page>
+    return infoCard(
+      checkRenderType.title,
+      checkRenderType.description,
+      classes.subheader,
+      checkRenderType.component,
     );
   }
 

plugins/tech-insights/src/components/ScorecardsInfo/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { ScorecardInfo } from './ScorecardInfo';

plugins/tech-insights/src/index.ts

@@ -16,6 +16,7 @@
 export {
   techInsightsPlugin,
   EntityTechInsightsScorecardContent,
+  EntityTechInsightsScorecardCard,
 } from './plugin';
 
 export { techInsightsApiRef } from './api/TechInsightsApi';

plugins/tech-insights/src/plugin.ts

@@ -49,7 +49,19 @@ export const EntityTechInsightsScorecardContent = techInsightsPlugin.provide(
   createRoutableExtension({
     name: 'EntityTechInsightsScorecardContent',
     component: () =>
-      import('./components/ScorecardsOverview').then(m => m.ScorecardsOverview),
+      import('./components/ScorecardsContent').then(m => m.ScorecardsContent),
+    mountPoint: rootRouteRef,
+  }),
+);
+
+/**
+ * @public
+ */
+export const EntityTechInsightsScorecardCard = techInsightsPlugin.provide(
+  createRoutableExtension({
+    name: 'EntityTechInsightsScorecardCard',
+    component: () =>
+      import('./components/ScorecardsCard').then(m => m.ScorecardsCard),
     mountPoint: rootRouteRef,
   }),
 );