Rename scorecards plugin to tech-insights plugin

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

.changeset/cold-feet-drop.md

@@ -2,4 +2,4 @@
 '@backstage/plugin-tech-insights-common': patch
 ---
 
-Added new property 'result' in CheckResult in @backstage/plugin-tech-insights-common. This property is later used in `@backstage/plugin-scorecards` package.
+Added new property 'result' in CheckResult in @backstage/plugin-tech-insights-common. This property is later used in `@backstage/plugin-tech-insights` package.

.changeset/stupid-readers-cough.md

@@ -1,5 +1,5 @@
 ---
-'@backstage/plugin-scorecards': patch
+'@backstage/plugin-tech-insights': patch
 ---
 
-New package containing scorecards, appropriate UI components for the Tech Insights plugin.
+New package containing UI components for the Tech Insights plugin.

packages/app/package.json

@@ -44,7 +44,7 @@
     "@backstage/plugin-todo": "^0.1.15",
     "@backstage/plugin-user-settings": "^0.3.11",
     "@backstage/search-common": "^0.2.0",
-    "@backstage/plugin-scorecards": "^0.0.0",
+    "@backstage/plugin-tech-insights": "^0.0.0",
     "@backstage/theme": "^0.2.11",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",

plugins/scorecards/README.md

@@ -1,42 +0,0 @@
-# Scorecards
-
-This plugin represents scorecards which are rendered as a part of the default Backstage Tech Insights feature.
-It provides UI for the scorecards as well as a check overview.
-
-## Installation
-
-### Install the plugin
-
-```bash
-# From your Backstage root directory
-cd packages/app
-yarn add @backstage/plugin-scorecards
-```
-
-### Add Scorecards overview page to the EntityPage:
-
-```tsx
-// packages/app/src/components/catalog/EntityPage.tsx
-
-import { EntityScorecardContent } from '@backstage/plugin-scorecards';
-
-const serviceEntityPage = (
-  <EntityLayoutWrapper>
-    <EntityLayout.Route path="/" title="Overview">
-      {overviewContent}
-    </EntityLayout.Route>
-    <EntityLayout.Route path="/ci-cd" title="CI/CD">
-      {cicdContent}
-    </EntityLayout.Route>
-    ...
-    <EntityLayout.Route path="/scorecards" title="Scorecards">
-      <EntityScorecardContent />
-    </EntityLayout.Route>
-    ...
-  </EntityLayoutWrapper>
-);
-```
-
-## Links
-
-- [The Backstage homepage](https://backstage.io)

plugins/tech-insights/README.md

@@ -0,0 +1,47 @@
+# Tech Insights
+
+This plugin provides the UI for the `@backstage/tech-insights-backend` plugin, in order to display results of the checks running following the rules and the logic defined in the `@backstage/tech-insights-backend` plugin itself.
+
+Main areas covered by this plugin currently are:
+
+- Providing an overview for default boolean checks in a form of Scorecards.
+
+- Providing an option to render different custom components based on type of the checks running in the backend.
+
+## Installation
+
+### Install the plugin
+
+```bash
+# From your Backstage root directory
+cd packages/app
+yarn add @backstage/plugin-tech-insights
+```
+
+### Add boolean checks overview (Scorecards) page to the EntityPage:
+
+```tsx
+// packages/app/src/components/catalog/EntityPage.tsx
+
+import { EntityTechInsightsScorecardContent } from '@backstage/plugin-tech-insights';
+
+const serviceEntityPage = (
+  <EntityLayoutWrapper>
+    <EntityLayout.Route path="/" title="Overview">
+      {overviewContent}
+    </EntityLayout.Route>
+    <EntityLayout.Route path="/ci-cd" title="CI/CD">
+      {cicdContent}
+    </EntityLayout.Route>
+    ...
+    <EntityLayout.Route path="/tech-insights" title="Scorecards">
+      <EntityTechInsightsScorecardContent />
+    </EntityLayout.Route>
+    ...
+  </EntityLayoutWrapper>
+);
+```
+
+## Links
+
+- [The Backstage homepage](https://backstage.io)

plugins/tech-insights/dev/index.tsx

@@ -15,13 +15,16 @@
  */
 import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { scorecardsPlugin, EntityScorecardContent } from '../src/plugin';
+import {
+  techInsightsPlugin,
+  EntityTechInsightsScorecardContent,
+} from '../src/plugin';
 
 createDevApp()
-  .registerPlugin(scorecardsPlugin)
+  .registerPlugin(techInsightsPlugin)
   .addPage({
-    element: <EntityScorecardContent />,
+    element: <EntityTechInsightsScorecardContent />,
     title: 'Root Page',
-    path: '/scorecards',
+    path: '/tech-insight-scorecard',
   })
   .render();

plugins/tech-insights/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@backstage/plugin-scorecards",
+  "name": "@backstage/plugin-tech-insights",
   "version": "0.0.0",
   "main": "src/index.ts",
   "types": "src/index.ts",

plugins/tech-insights/src/api/TechInsightsApi.ts

@@ -20,12 +20,12 @@ import { Check } from './types';
 import { CheckResultRenderer } from '../components/CheckResultRenderer';
 import { EntityName } from '@backstage/catalog-model';
 
-export const scorecardsApiRef = createApiRef<ScorecardsApi>({
-  id: 'plugin.scorecards.service',
-  description: 'Used by the scorecards plugin to make requests',
+export const techInsightsApiRef = createApiRef<TechInsightsApi>({
+  id: 'plugin.techinsights.service',
+  description: 'Used by the tech insights plugin to make requests',
 });
 
-export interface ScorecardsApi {
+export interface TechInsightsApi {
   getScorecardsDefinition: (
     type: string,
     value: CheckResult[],

plugins/tech-insights/src/api/TechInsightsClient.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ScorecardsApi } from './ScorecardsApi';
+import { TechInsightsApi } from './TechInsightsApi';
 import { CheckResult } from '@backstage/plugin-tech-insights-common';
 import { Check } from './types';
 import { DiscoveryApi } from '@backstage/core-plugin-api';
@@ -30,7 +30,7 @@ export type Options = {
   discoveryApi: DiscoveryApi;
 };
 
-export class ScorecardsClient implements ScorecardsApi {
+export class TechInsightsClient implements TechInsightsApi {
   private readonly discoveryApi: DiscoveryApi;
 
   constructor(options: Options) {

plugins/tech-insights/src/api/index.ts

@@ -13,4 +13,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { scorecardsPlugin, EntityScorecardContent } from './plugin';
+export * from './TechInsightsApi';
+export * from './TechInsightsClient';

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

@@ -48,9 +48,10 @@ export const BooleanCheck = ({ checkResult }: Prop) => {
 
   return (
     <List>
-      {checkResult!.map(check => (
+      {checkResult!.map((check, index) => (
         <ListItem>
           <ListItemText
+            key={index}
             primary={check.check.name}
             secondary={check.check.description}
             className={classes.listItemText}

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

@@ -33,7 +33,7 @@ export function defaultCheckResultRenderers(
       type: 'json-rules-engine',
       title: 'Boolean scorecard',
       description:
-        'This card represents an overview of default boolean checks:',
+        'This card represents an overview of default boolean Backstage checks:',
       component: <BooleanCheck checkResult={value} />,
     },
   ];

plugins/tech-insights/src/components/ScorecardsOverview/ChecksOverview.tsx

@@ -19,15 +19,17 @@ import { makeStyles, Grid, Typography } from '@material-ui/core';
 import { useApi } from '@backstage/core-plugin-api';
 import { Content, Page, InfoCard } from '@backstage/core-components';
 import { CheckResult } from '@backstage/plugin-tech-insights-common';
-import { scorecardsApiRef } from '../../api/ScorecardsApi';
+import { techInsightsApiRef } from '../../api/TechInsightsApi';
+import { BackstageTheme } from '@backstage/theme';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme: BackstageTheme) => ({
   contentScorecards: {
     paddingLeft: 0,
     paddingRight: 0,
   },
   subheader: {
     fontWeight: 'bold',
+    paddingLeft: theme.spacing(0.5),
   },
 }));
 
@@ -37,7 +39,7 @@ type Checks = {
 
 export const ChecksOverview = ({ checks }: Checks) => {
   const classes = useStyles();
-  const api = useApi(scorecardsApiRef);
+  const api = useApi(techInsightsApiRef);
   const checkRenderType = api.getScorecardsDefinition(
     checks[0].check.type,
     checks,

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

@@ -21,10 +21,10 @@ import { Progress } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 import { ChecksOverview } from './ChecksOverview';
 import Alert from '@material-ui/lab/Alert';
-import { scorecardsApiRef } from '../../api/ScorecardsApi';
+import { techInsightsApiRef } from '../../api/TechInsightsApi';
 
 export const ScorecardsOverview = () => {
-  const api = useApi(scorecardsApiRef);
+  const api = useApi(techInsightsApiRef);
   const { namespace, kind, name } = useParams();
 
   const { value, loading, error } = useAsync(

plugins/tech-insights/src/index.ts

@@ -13,5 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './ScorecardsApi';
-export * from './ScorecardsClient';
+export {
+  techInsightsPlugin,
+  EntityTechInsightsScorecardContent,
+} from './plugin';

plugins/tech-insights/src/plugin.test.ts

@@ -13,10 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { scorecardsPlugin } from './plugin';
+import { techInsightsPlugin } from './plugin';
 
-describe('scorecards', () => {
+describe('tech insights', () => {
   it('should export plugin', () => {
-    expect(scorecardsPlugin).toBeDefined();
+    expect(techInsightsPlugin).toBeDefined();
   });
 });

plugins/tech-insights/src/plugin.ts

@@ -20,19 +20,19 @@ import {
   discoveryApiRef,
 } from '@backstage/core-plugin-api';
 import { rootRouteRef } from './routes';
-import { scorecardsApiRef } from './api/ScorecardsApi';
-import { ScorecardsClient } from './api';
+import { techInsightsApiRef } from './api/TechInsightsApi';
+import { TechInsightsClient } from './api/TechInsightsClient';
 
 /**
  * @public
  */
-export const scorecardsPlugin = createPlugin({
-  id: 'scorecards',
+export const techInsightsPlugin = createPlugin({
+  id: 'tech-insights',
   apis: [
     createApiFactory({
-      api: scorecardsApiRef,
+      api: techInsightsApiRef,
       deps: { discoveryApi: discoveryApiRef },
-      factory: ({ discoveryApi }) => new ScorecardsClient({ discoveryApi }),
+      factory: ({ discoveryApi }) => new TechInsightsClient({ discoveryApi }),
     }),
   ],
   routes: {
@@ -43,9 +43,9 @@ export const scorecardsPlugin = createPlugin({
 /**
  * @public
  */
-export const EntityScorecardContent = scorecardsPlugin.provide(
+export const EntityTechInsightsScorecardContent = techInsightsPlugin.provide(
   createRoutableExtension({
-    name: 'EntityScorecardContent',
+    name: 'EntityTechInsightsScorecardContent',
     component: () =>
       import('./components/ScorecardsOverview').then(m => m.ScorecardsOverview),
     mountPoint: rootRouteRef,

plugins/tech-insights/src/routes.ts

@@ -16,5 +16,5 @@
 import { createRouteRef } from '@backstage/core-plugin-api';
 
 export const rootRouteRef = createRouteRef({
-  id: 'scorecards',
+  id: 'tech-insights',
 });