feat(wheel-of-names): initial migration from mui to bui (#7869)

Signed-off-by: Patrick Wyler <patrick_wyler@hotmail.com>

Author: patrickwyler

workspaces/wheel-of-names/.changeset/real-chicken-take.md

@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-wheel-of-names': minor
+---
+
+Migrated from Material-UI to Backstage UI (BUI).

workspaces/wheel-of-names/plugins/wheel-of-names/dev/index.tsx

@@ -18,7 +18,9 @@ import { wheelOfNamesPlugin, WheelOfNamesPage } from '../src/plugin';
 import { TestApiProvider } from '@backstage/test-utils';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Entity } from '@backstage/catalog-model';
-import { Content, Header, Page } from '@backstage/core-components';
+// This is a dev Backstage instance and not part of the plugin
+// eslint-disable-next-line @backstage/no-ui-css-imports-in-non-frontend
+import '@backstage/ui/css/styles.css';
 
 // Sample mock data
 const mockUsers: Entity[] = [
@@ -201,14 +203,9 @@ app.registerPlugin(wheelOfNamesPlugin);
 // Wrap the page with API providers
 app.addPage({
   element: (
-    <Page themeId="home">
-      <Header title="Wheel of Names" />
-      <Content>
-        <TestApiProvider apis={[[catalogApiRef, mockCatalogApi]]}>
-          <WheelOfNamesPage />
-        </TestApiProvider>
-      </Content>
-    </Page>
+    <TestApiProvider apis={[[catalogApiRef, mockCatalogApi]]}>
+      <WheelOfNamesPage />
+    </TestApiProvider>
   ),
   title: 'Wheel of Names',
   path: '/wheel-of-names',

workspaces/wheel-of-names/plugins/wheel-of-names/package.json

@@ -55,11 +55,11 @@
     "@backstage/frontend-plugin-api": "backstage:^",
     "@backstage/plugin-catalog-react": "backstage:^",
     "@backstage/theme": "backstage:^",
-    "@material-ui/core": "^4.9.13",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.61",
+    "@backstage/ui": "backstage:^",
+    "@remixicon/react": "^4.2.0",
     "canvas-confetti": "^1.9.3",
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
+    "react-aria-components": "^1.6.2",
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-router-dom": "^6.3.0",
     "react-use": "^17.2.4"

workspaces/wheel-of-names/plugins/wheel-of-names/src/components/Participants/EntityPicker.tsx

@@ -14,22 +14,9 @@
  * limitations under the License.
  */
 import { Fragment } from 'react';
-import {
-  Typography,
-  Button,
-  Paper,
-  List,
-  ListItem,
-  ListItemText,
-  ListItemSecondaryAction,
-  IconButton,
-  Divider,
-  Avatar,
-} from '@material-ui/core';
-import PersonIcon from '@material-ui/icons/Person';
-import DeleteIcon from '@material-ui/icons/Delete';
-import { useParticipantsStyles } from './Styles';
-import { Entity } from '@backstage/catalog-model';
+import { Text, Button } from '@backstage/ui';
+import { RiDeleteBin6Line } from '@remixicon/react';
+import classes from './Participants.module.css';
 
 interface Participant {
   id: string;
@@ -45,17 +32,12 @@ interface ParticipantsListProps {
   isProcessing: boolean;
 }
 
-export const ParticipantsList = (
-  {
-    participants,
-    onRemoveParticipant,
-    onClearAll,
-    isProcessing,
-  }: ParticipantsListProps,
-  entity: Entity,
-) => {
-  const classes = useParticipantsStyles();
-
+export const ParticipantsList = ({
+  participants,
+  onRemoveParticipant,
+  onClearAll,
+  isProcessing,
+}: ParticipantsListProps) => {
   const getParticipantClassName = (participant: Participant) => {
     return participant.fromGroup
       ? classes.groupMemberItem
@@ -69,60 +51,50 @@ export const ParticipantsList = (
   return (
     <div className={classes.selectedParticipantsContainer}>
       <div className={classes.participantsHeader}>
-        <Typography variant="subtitle1">
-          Selected Participants ({participants.length})
-        </Typography>
+        <Text weight="bold">Selected Participants ({participants.length})</Text>
 
-        <Button
-          variant="outlined"
-          color="secondary"
-          size="small"
-          onClick={onClearAll}
-          disabled={isProcessing}
-          startIcon={<DeleteIcon />}
-        >
+        <Button onClick={onClearAll} isDisabled={isProcessing}>
           Clear All
         </Button>
       </div>
 
-      <Paper className={classes.selectedParticipantsList}>
-        <List dense>
+      <div className={classes.selectedParticipantsList}>
+        <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
           {participants.map(participant => (
             <Fragment key={participant.id}>
-              <ListItem className={getParticipantClassName(participant)}>
-                <Avatar
-                  className={
-                    entity.kind === 'Group'
-                      ? classes.groupAvatar
-                      : classes.userAvatar
-                  }
+              <li
+                className={getParticipantClassName(participant)}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  padding: '12px 16px',
+                  borderBottom: '1px solid var(--bui-border)',
+                }}
+              >
+                <div style={{ flex: 1 }}>
+                  <Text>{participant.displayName || participant.name}</Text>
+                  {participant.fromGroup && (
+                    <Text
+                      variant="body-small"
+                      className={classes.groupInfoText}
+                    >
+                      From group: {participant.fromGroup}
+                    </Text>
+                  )}
+                </div>
+                <Button
+                  variant="secondary"
+                  aria-label="Remove participant"
+                  onClick={() => onRemoveParticipant(participant.id)}
+                  isDisabled={isProcessing}
                 >
-                  <PersonIcon />
-                </Avatar>
-                <ListItemText
-                  primary={participant.displayName || participant.name}
-                  secondary={
-                    participant.fromGroup
-                      ? `From group: ${participant.fromGroup}`
-                      : undefined
-                  }
-                />
-                <ListItemSecondaryAction>
-                  <IconButton
-                    edge="end"
-                    aria-label="delete"
-                    onClick={() => onRemoveParticipant(participant.id)}
-                    disabled={isProcessing}
-                  >
-                    <DeleteIcon fontSize="small" />
-                  </IconButton>
-                </ListItemSecondaryAction>
-              </ListItem>
-              <Divider component="li" />
+                  <RiDeleteBin6Line size={18} />
+                </Button>
+              </li>
             </Fragment>
           ))}
-        </List>
-      </Paper>
+        </ul>
+      </div>
     </div>
   );
 };