tech-insights: refactor ScorecardsBadge to use Tooltip and Tag from @backstage/ui (#7047)

* refactor: replace mui with bui

Signed-off-by: Kurt King <kurtaking@gmail.com>

* reinstall backstage/ui

Signed-off-by: Kurt King <kurtaking@gmail.com>

* deps: bump typescript to 5.7.0

Signed-off-by: Kurt King <kurtaking@gmail.com>

* rebuild reports after ugprading typescript

Signed-off-by: Kurt King <kurtaking@gmail.com>

* Release as minor

Signed-off-by: Kurt King <kurtaking@gmail.com>

---------

Signed-off-by: Kurt King <kurtaking@gmail.com>

Author: kurtaking

workspaces/tech-insights/.changeset/two-moles-swim.md

@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-tech-insights': minor
+---
+
+The `ScorecardsBadge` component has been rewritten with `@backstage/ui`.

workspaces/tech-insights/packages/app/src/App.tsx

@@ -50,6 +50,8 @@ import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
 
+import '@backstage/ui/css/styles.css';
+
 const app = createApp({
   apis,
   bindRoutes({ bind }) {

workspaces/tech-insights/plugins/tech-insights/package.json

@@ -65,6 +65,7 @@
     "@backstage/frontend-plugin-api": "backstage:^",
     "@backstage/plugin-catalog-react": "backstage:^",
     "@backstage/types": "backstage:^",
+    "@backstage/ui": "backstage:^",
     "@material-table/exporters": "^1.2.19",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",

workspaces/tech-insights/plugins/tech-insights/src/components/ScorecardsBadge/ScorecardsBadge.tsx

@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
-import { CheckResult } from '@backstage-community/plugin-tech-insights-common';
 import { Entity } from '@backstage/catalog-model';
-import Chip from '@material-ui/core/Chip';
 import { useApi } from '@backstage/core-plugin-api';
+import { Tooltip, Tag, TagGroup, TooltipTrigger } from '@backstage/ui';
+
+import { CheckResult } from '@backstage-community/plugin-tech-insights-common';
 import { techInsightsApiRef } from '@backstage-community/plugin-tech-insights-react';
-import Tooltip from '@material-ui/core/Tooltip';
+
 import { ScorecardsList } from '../ScorecardsList';
 
 export const ScorecardsBadge = (props: {
@@ -43,25 +44,34 @@ export const ScorecardsBadge = (props: {
     ({ result, renderer }) => !renderer?.isFailed?.(result),
   ).length;
 
+  const isAllPassing = succeeded === checkResults.length;
+
   return (
-    <Tooltip
-      title={
-        <ScorecardsList
-          checkResults={checkResults}
-          entity={entity}
-          dense
-          hideDescription
-        />
-      }
-    >
-      <Chip
-        label={`${succeeded}/${checkResults.length}`}
-        size="small"
-        style={{
-          backgroundColor:
-            succeeded === checkResults.length ? 'mediumseagreen' : 'orangered',
-        }}
-      />
-    </Tooltip>
+    <TooltipTrigger>
+      <TagGroup>
+        <Tag
+          size="medium"
+          style={{
+            borderRadius: 16,
+            paddingTop: 8,
+            paddingBottom: 8,
+            paddingLeft: 16,
+            paddingRight: 16,
+            backgroundColor: isAllPassing ? 'mediumseagreen' : 'orangered',
+          }}
+        >
+          {`${succeeded}/${checkResults.length}`}
+        </Tag>
+
+        <Tooltip>
+          <ScorecardsList
+            checkResults={checkResults}
+            entity={entity}
+            dense
+            hideDescription
+          />
+        </Tooltip>
+      </TagGroup>
+    </TooltipTrigger>
   );
 };

workspaces/tech-insights/yarn.lock

@@ -1603,6 +1603,7 @@ __metadata:
     "@backstage/frontend-plugin-api": "backstage:^"
     "@backstage/plugin-catalog-react": "backstage:^"
     "@backstage/types": "backstage:^"
+    "@backstage/ui": "backstage:^"
     "@material-table/exporters": "npm:^1.2.19"
     "@material-ui/core": "npm:^4.12.2"
     "@material-ui/icons": "npm:^4.9.1"
@@ -3532,9 +3533,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@backstage/ui@npm:^0.11.0":
-  version: 0.11.1
-  resolution: "@backstage/ui@npm:0.11.1"
+"@backstage/ui@backstage:^::backstage=1.47.2&npm=0.11.2, @backstage/ui@npm:^0.11.0, @backstage/ui@npm:^0.11.2":
+  version: 0.11.2
+  resolution: "@backstage/ui@npm:0.11.2"
   dependencies:
     "@backstage/version-bridge": "npm:^1.0.11"
     "@remixicon/react": "npm:^4.6.0"
@@ -3549,7 +3550,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10/7343621ebcef22ead8b4fed717afaee567a17eed01a3de3e57db210b30031a75375faa5486f275a004064f42341de4f847fbcbca03e9360e747e3efd8c95a722
+  checksum: 10/d3aea803533a276cf27f52d24e261cdf396db09f4e9321e8d199b32c6e00ffaf969d6aeabf7533e2db739b58834f315f1f0153974953400c631c8957aed74275
   languageName: node
   linkType: hard