feat(tech-radar): migrate UI from Material UI to Backstage UI

workspaces/argocd/plugins/argocd-backend/src/router.test.ts

@@ -13,12 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { ArgoCDService } from '@backstage-community/plugin-argocd-node';
+import { AuthorizeResult } from '@backstage/plugin-permission-common';
 import express from 'express';
 import request from 'supertest';
-import { createRouter } from './router';
-import { AuthorizeResult } from '@backstage/plugin-permission-common';
 import { mockApplications, mockConfig } from './__data__/mockdata';
-import { ArgoCDService } from '@backstage-community/plugin-argocd-node';
+import { createRouter } from './router';
 
 jest.mock('@backstage-community/plugin-argocd-node');
 

workspaces/argocd/plugins/argocd/README.md

@@ -136,8 +136,8 @@ yarn workspace app add @backstage-community/plugin-argocd
 ```ts
 // packages/app/src/components/catalog/EntityPage.tsx
 import {
-  ArgocdDeploymentSummary,
   ArgocdDeploymentLifecycle,
+  ArgocdDeploymentSummary,
   isArgocdConfigured,
 } from '@backstage-community/plugin-argocd';
 

workspaces/playlist/plugins/playlist/src/alpha.tsx

@@ -17,17 +17,16 @@
 import {
   ApiBlueprint,
   createFrontendPlugin,
+  dialogApiRef,
   discoveryApiRef,
   fetchApiRef,
   PageBlueprint,
-  dialogApiRef,
   useApi,
 } from '@backstage/frontend-plugin-api';
 import { useAsyncEntity } from '@backstage/plugin-catalog-react';
 import { EntityContextMenuItemBlueprint } from '@backstage/plugin-catalog-react/alpha';
-import PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';
 import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd';
-
+import PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';
 import { playlistApiRef, PlaylistClient } from './api';
 import { EntityPlaylistDialog } from './components/EntityPlaylistDialog';
 import { useTitle } from './hooks';

workspaces/playlist/plugins/playlist/src/api/PlaylistApi.ts

@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { Entity } from '@backstage/catalog-model';
-import { createApiRef } from '@backstage/frontend-plugin-api';
 import {
   Playlist,
   PlaylistMetadata,
 } from '@backstage-community/plugin-playlist-common';
+import { Entity } from '@backstage/catalog-model';
+import { createApiRef } from '@backstage/frontend-plugin-api';
 
 /**
  * @public

workspaces/playlist/plugins/playlist/src/components/EntityPlaylistDialog/EntityPlaylistDialog.tsx

@@ -14,6 +14,11 @@
  * limitations under the License.
  */
 
+import {
+  permissions,
+  Playlist,
+  PlaylistMetadata,
+} from '@backstage-community/plugin-playlist-common';
 import {
   Entity,
   parseEntityRef,
@@ -22,15 +27,10 @@ import {
 import { ResponseErrorPanel } from '@backstage/core-components';
 import { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
 import {
-  useAsyncEntity,
   EntityDisplayName,
+  useAsyncEntity,
 } from '@backstage/plugin-catalog-react';
 import { usePermission } from '@backstage/plugin-permission-react';
-import {
-  permissions,
-  Playlist,
-  PlaylistMetadata,
-} from '@backstage-community/plugin-playlist-common';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
@@ -43,16 +43,15 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
+import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
 import ClearButton from '@material-ui/icons/Clear';
 import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd';
 import SearchIcon from '@material-ui/icons/Search';
 import { Fragment, useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import useAsyncFn from 'react-use/esm/useAsyncFn';
-
 import { playlistApiRef } from '../../api';
 import { useTitle } from '../../hooks';
 import { playlistRouteRef } from '../../routes';

workspaces/playlist/plugins/playlist/src/components/PlaylistIndexPage/DefaultPlaylistIndexPage.tsx

@@ -15,22 +15,21 @@
  */
 
 import {
-  PageWithHeader,
   Content,
   ContentHeader,
+  PageWithHeader,
   SupportButton,
 } from '@backstage/core-components';
-import { Header } from '@backstage/ui';
 import { CatalogFilterLayout } from '@backstage/plugin-catalog-react';
-
+import { Header } from '@backstage/ui';
+import { PlaylistListProvider } from '../../hooks/PlaylistListProvider';
+import { useTitle } from '../../hooks/useTitle';
 import { CreatePlaylistButton } from '../CreatePlaylistButton';
 import { PersonalListPicker } from '../PersonalListPicker';
 import { PlaylistList } from '../PlaylistList';
 import { PlaylistOwnerPicker } from '../PlaylistOwnerPicker';
 import { PlaylistSearchBar } from '../PlaylistSearchBar';
 import { PlaylistSortPicker } from '../PlaylistSortPicker';
-import { PlaylistListProvider } from '../../hooks/PlaylistListProvider';
-import { useTitle } from '../../hooks/useTitle';
 
 const DefaultPlaylistIndexPageContent = () => (
   <CatalogFilterLayout>

workspaces/playlist/plugins/playlist/src/components/PlaylistPage/PlaylistPage.tsx

@@ -14,23 +14,22 @@
  * limitations under the License.
  */
 
+import { permissions } from '@backstage-community/plugin-playlist-common';
 import { Content, ErrorPage, Page } from '@backstage/core-components';
 import { errorApiRef, useApi } from '@backstage/core-plugin-api';
 import { ResponseError } from '@backstage/errors';
 import { usePermission } from '@backstage/plugin-permission-react';
-import { permissions } from '@backstage-community/plugin-playlist-common';
 import Button from '@material-ui/core/Button';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardHeader from '@material-ui/core/CardHeader';
 import Divider from '@material-ui/core/Divider';
 import LinearProgress from '@material-ui/core/LinearProgress';
-import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import useAsyncFn from 'react-use/esm/useAsyncFn';
-
 import { playlistApiRef } from '../../api';
 import { PlaylistEntitiesTable } from './PlaylistEntitiesTable';
 import { PlaylistHeader } from './PlaylistHeader';

workspaces/rbac/plugins/rbac-backend/src/policies/permission-policy.test.ts

@@ -13,6 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { resolve } from 'path';
+import type {
+  RoleBasedPolicy,
+  RoleMetadata,
+} from '@backstage-community/plugin-rbac-common';
 import type { LoggerService } from '@backstage/backend-plugin-api';
 import { mockCredentials, mockServices } from '@backstage/backend-test-utils';
 import { Config } from '@backstage/config';
@@ -24,7 +29,6 @@ import type {
   PolicyQuery,
   PolicyQueryUser,
 } from '@backstage/plugin-permission-node';
-
 import {
   Adapter,
   Enforcer,
@@ -34,38 +38,32 @@ import {
 } from 'casbin';
 import * as Knex from 'knex';
 import { MockClient } from 'knex-mock-client';
-
-import type {
-  RoleBasedPolicy,
-  RoleMetadata,
-} from '@backstage-community/plugin-rbac-common';
-
-import { resolve } from 'path';
-
+import {
+  clearAuditorMock,
+  expectAuditorLogForPermission,
+} from '../../__fixtures__/auditor-test-utils';
+import {
+  catalogMock,
+  mockAuditorService,
+  mockAuthService,
+  mockUserInfoService,
+} from '../../__fixtures__/mock-utils';
 import { ADMIN_ROLE_NAME } from '../admin-permissions/admin-creation';
 import { CasbinDBAdapterFactory } from '../database/casbin-adapter-factory';
 import { ConditionalStorage } from '../database/conditional-storage';
 import {
   RoleMetadataDao,
   RoleMetadataStorage,
 } from '../database/role-metadata';
+import {
+  buildDefaultRoleMetadata,
+  DefaultPermissionsReader,
+} from '../default-permissions/default-permissions';
 import { BackstageRoleManager } from '../role-manager/role-manager';
-import { DefaultPermissionsReader } from '../default-permissions/default-permissions';
 import { EnforcerDelegate } from '../service/enforcer-delegate';
 import { MODEL } from '../service/permission-model';
 import { PluginPermissionMetadataCollector } from '../service/plugin-endpoints';
 import { RBACPermissionPolicy } from './permission-policy';
-import { buildDefaultRoleMetadata } from '../default-permissions/default-permissions';
-import {
-  catalogMock,
-  mockAuditorService,
-  mockAuthService,
-  mockUserInfoService,
-} from '../../__fixtures__/mock-utils';
-import {
-  clearAuditorMock,
-  expectAuditorLogForPermission,
-} from '../../__fixtures__/auditor-test-utils';
 
 type PermissionAction = 'create' | 'read' | 'update' | 'delete';
 

workspaces/rbac/plugins/rbac-backend/src/policies/permission-policy.ts

@@ -13,6 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import {
+  NonEmptyArray,
+  toPermissionAction,
+} from '@backstage-community/plugin-rbac-common';
 import type {
   AuditorService,
   AuditorServiceEvent,
@@ -37,14 +41,7 @@ import type {
   PolicyQuery,
   PolicyQueryUser,
 } from '@backstage/plugin-permission-node';
-
 import type { Knex } from 'knex';
-
-import {
-  NonEmptyArray,
-  toPermissionAction,
-} from '@backstage-community/plugin-rbac-common';
-
 import {
   setAdminPermissions,
   useAdminsFromConfig,

workspaces/tech-radar/.changeset/tech-radar-mui-to-bui.md

@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-tech-radar': major
+---
+
+**BREAKING** Migrated the Tech Radar plugin UI from Material UI to Backstage UI (`@backstage/ui`). Search, dialogs, typography, layout, and icons no longer depend on `@material-ui/core`. Adopters need `@backstage/ui` styles available in the app (included by default since Backstage `1.41.0`).

workspaces/tech-radar/packages/app-next/package.json

@@ -40,6 +40,7 @@
     "@backstage/plugin-signals": "backstage:^",
     "@backstage/plugin-user-settings": "backstage:^",
     "@backstage/theme": "backstage:^",
+    "@backstage/ui": "backstage:^",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "history": "^5.0.0",

workspaces/tech-radar/packages/app-next/src/index.tsx

@@ -16,5 +16,6 @@
 import '@backstage/cli/asset-types';
 import { createRoot } from 'react-dom/client';
 import app from './App';
+import '@backstage/ui/css/styles.css';
 
 createRoot(document.getElementById('root')!).render(app);

workspaces/tech-radar/packages/app/package.json

@@ -44,6 +44,7 @@
     "@backstage/plugin-techdocs-react": "backstage:^",
     "@backstage/plugin-user-settings": "backstage:^",
     "@backstage/theme": "backstage:^",
+    "@backstage/ui": "backstage:^",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "react": "^18.0.2",

workspaces/tech-radar/packages/app/src/index.tsx

@@ -16,5 +16,6 @@
 import '@backstage/cli/asset-types';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import '@backstage/ui/css/styles.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

workspaces/tech-radar/plugins/tech-radar/README.md

@@ -2,6 +2,8 @@
 
 <img src="docs/screenshot.png" alt="Screenshot of Tech Radar plugin" />
 
+> Backstage UI (BUI) is now required for the Tech Radar plugin to function. It has been included as part of Backstage since `1.41.0`, which means you're very likely to already have it installed. The [BUI documentation](https://ui.backstage.io/) has details on installation if needed, and the Backstage [User Interface documentation](https://backstage.io/docs/conf/user-interface/) has details on creating a custom BUI theme.
+
 The Backstage integration for the Tech Radar based on [Zalando's Tech Radar](https://opensource.zalando.com/tech-radar/) open sourced on [GitHub](https://github.com/zalando/tech-radar). This is used at [Spotify](https://spotify.github.io) for visualizing the official guidelines of different areas of software development such as languages, frameworks, infrastructure and processes.
 
 Read the [blog post on backstage.io about the Tech Radar](https://backstage.io/blog/2020/05/14/tech-radar-plugin).

workspaces/tech-radar/plugins/tech-radar/dev/index.tsx

@@ -17,6 +17,9 @@
 import { createDevApp } from '@backstage/dev-utils';
 import { techRadarPlugin, TechRadarPage } from '../src';
 
+// eslint-disable-next-line @backstage/no-ui-css-imports-in-non-frontend
+import '@backstage/ui/css/styles.css';
+
 createDevApp()
   .registerPlugin(techRadarPlugin)
   .addPage({

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

@@ -60,8 +60,9 @@
     "@backstage/core-components": "backstage:^",
     "@backstage/core-plugin-api": "backstage:^",
     "@backstage/frontend-plugin-api": "backstage:^",
-    "@material-ui/core": "^4.12.2",
+    "@backstage/ui": "backstage:^",
     "@material-ui/icons": "^4.9.1",
+    "@remixicon/react": "^4.9.0",
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "color": "^4.0.1",
     "d3-force": "^3.0.0",

workspaces/tech-radar/plugins/tech-radar/src/components/RadarBubble/RadarBubble.module.css

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2026 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.
+ */
+
+@layer components {
+  .bubble {
+    pointer-events: none;
+    user-select: none;
+    opacity: 0;
+  }
+
+  .visibleBubble {
+    pointer-events: none;
+    user-select: none;
+    opacity: 0.8;
+  }
+
+  .background {
+    fill: #333;
+  }
+
+  .text {
+    pointer-events: none;
+    user-select: none;
+    font-size: 10px;
+    fill: #fff;
+  }
+}