diff --git a/.changeset/auth-migrate-to-bui.md b/.changeset/auth-migrate-to-bui.md new file mode 100644 index 0000000000..974fe5abee --- /dev/null +++ b/.changeset/auth-migrate-to-bui.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-auth': patch +--- + +Migrated the ConsentPage UI from Material-UI and `@backstage/core-components` to `@backstage/ui`. diff --git a/plugins/auth/package.json b/plugins/auth/package.json index 5b51833436..52a51d81ce 100644 --- a/plugins/auth/package.json +++ b/plugins/auth/package.json @@ -47,13 +47,10 @@ "test": "backstage-cli package test" }, "dependencies": { - "@backstage/core-components": "workspace:^", "@backstage/errors": "workspace:^", "@backstage/frontend-plugin-api": "workspace:^", - "@backstage/theme": "workspace:^", - "@material-ui/core": "^4.12.2", - "@material-ui/icons": "^4.9.1", - "@material-ui/lab": "4.0.0-alpha.61", + "@backstage/ui": "workspace:^", + "@remixicon/react": "^4.6.0", "react-use": "^17.2.4" }, "devDependencies": { diff --git a/plugins/auth/src/components/ConsentPage/ConsentPage.module.css b/plugins/auth/src/components/ConsentPage/ConsentPage.module.css new file mode 100644 index 0000000000..049c512c54 --- /dev/null +++ b/plugins/auth/src/components/ConsentPage/ConsentPage.module.css @@ -0,0 +1,44 @@ +.card { + max-width: 600px; + margin: var(--bui-space-8) auto 0; +} + +.appHeader { + display: flex; + align-items: center; + gap: var(--bui-space-4); +} + +.appIcon { + color: var(--bui-fg-secondary); +} + +.divider { + border: none; + border-top: 1px solid var(--bui-border-1); + margin: 0; +} + +.callbackUrl { + font-family: var(--bui-font-monospace); + background: var(--bui-bg-neutral-2); + padding: var(--bui-space-2); + border-radius: var(--bui-radius-2); + word-break: break-all; + font-size: var(--bui-font-size-3); + margin-top: var(--bui-space-2); +} + +.completedIcon { + margin-bottom: var(--bui-space-4); +} + +.completedIconSuccess { + composes: completedIcon; + color: var(--bui-fg-success); +} + +.completedIconDanger { + composes: completedIcon; + color: var(--bui-fg-danger); +} diff --git a/plugins/auth/src/components/ConsentPage/ConsentPage.tsx b/plugins/auth/src/components/ConsentPage/ConsentPage.tsx index 859d82fe04..59e7b512a5 100644 --- a/plugins/auth/src/components/ConsentPage/ConsentPage.tsx +++ b/plugins/auth/src/components/ConsentPage/ConsentPage.tsx @@ -16,89 +16,37 @@ import { useParams } from 'react-router-dom'; import { + Alert, Box, Button, Card, - CardActions, - CardContent, - Divider, - makeStyles, - Typography, -} from '@material-ui/core'; -import { Alert } from '@material-ui/lab'; -import CheckCircleIcon from '@material-ui/icons/CheckCircle'; -import CancelIcon from '@material-ui/icons/Cancel'; -import AppsIcon from '@material-ui/icons/Apps'; -import WarningIcon from '@material-ui/icons/Warning'; + CardBody, + CardFooter, + Container, + Flex, + FullPage, + Text, + VisuallyHidden, +} from '@backstage/ui'; import { - Content, - EmptyState, - Header, - Page, - Progress, - ResponseErrorPanel, -} from '@backstage/core-components'; + RiAppsLine, + RiCheckboxCircleLine, + RiCloseCircleLine, +} from '@remixicon/react'; import { useConsentSession } from './useConsentSession'; import { configApiRef, useApi } from '@backstage/frontend-plugin-api'; +import styles from './ConsentPage.module.css'; -const useStyles = makeStyles(theme => ({ - authCard: { - maxWidth: 600, - margin: '0 auto', - marginTop: theme.spacing(4), - }, - appHeader: { - display: 'flex', - alignItems: 'center', - marginBottom: theme.spacing(2), - }, - appIcon: { - marginRight: theme.spacing(2), - fontSize: 40, - }, - appName: { - fontSize: '1.5rem', - fontWeight: 'bold', - }, - securityWarning: { - margin: theme.spacing(2, 0), - }, - buttonContainer: { - display: 'flex', - justifyContent: 'space-between', - gap: theme.spacing(2), - padding: theme.spacing(2), - }, - callbackUrl: { - fontFamily: 'monospace', - backgroundColor: theme.palette.background.default, - padding: theme.spacing(1), - borderRadius: theme.shape.borderRadius, - wordBreak: 'break-all', - fontSize: '0.875rem', - }, - scopeList: { - backgroundColor: theme.palette.background.default, - borderRadius: theme.shape.borderRadius, - padding: theme.spacing(1), - }, -})); - -const ConsentPageLayout = ({ - title, - children, -}: { - title: string; - children: React.ReactNode; -}) => ( - -
- {children} - +const ConsentPageLayout = ({ children }: { children: React.ReactNode }) => ( + + +

Authorization

+ + {children} + ); export const ConsentPage = () => { - const classes = useStyles(); const { sessionId } = useParams<{ sessionId: string }>(); const { state, handleAction } = useConsentSession({ sessionId }); const configApi = useApi(configApiRef); @@ -106,9 +54,10 @@ export const ConsentPage = () => { if (!sessionId) { return ( - - + @@ -118,57 +67,62 @@ export const ConsentPage = () => { if (state.status === 'loading') { return ( - - - - + + ); } if (state.status === 'error') { return ( - - + + ); } if (state.status === 'completed') { return ( - - - - + + + + {state.action === 'approve' ? ( - ) : ( - )} - + {state.action === 'approve' ? 'Authorization Approved' : 'Authorization Denied'} - - + + {state.action === 'approve' ? `You have successfully authorized the application to access your ${appTitle} account.` : `You have denied the application access to your ${appTitle} account.`} - - + + Redirecting to the application... - - - + + + ); @@ -179,70 +133,67 @@ export const ConsentPage = () => { const appName = session.clientName ?? session.clientId; return ( - - - - - - - {appName} - - wants to access your {appTitle} account - + + + + + + + + + {appName} + + + wants to access your {appTitle} account + + - - +
- } - className={classes.securityWarning} - > - - Security Notice: By authorizing this application, - you are granting it access to your {appTitle} account. The - application will receive an access token that allows it to act on - your behalf. - - - - Callback URL: - - {session.redirectUri} - - + + By authorizing this application, you are granting it access to + your {appTitle} account. The application will receive an + access token that allows it to act on your behalf. +
+ {session.redirectUri} +
+ + } + /> - - + Make sure you trust this application and recognize the callback URL above. Only authorize applications you trust. - - - + + + - - - - + + + + + + ); diff --git a/yarn.lock b/yarn.lock index 0c110d2639..fbc65dcfdf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4394,16 +4394,13 @@ __metadata: resolution: "@backstage/plugin-auth@workspace:plugins/auth" dependencies: "@backstage/cli": "workspace:^" - "@backstage/core-components": "workspace:^" "@backstage/dev-utils": "workspace:^" "@backstage/errors": "workspace:^" "@backstage/frontend-defaults": "workspace:^" "@backstage/frontend-plugin-api": "workspace:^" "@backstage/test-utils": "workspace:^" - "@backstage/theme": "workspace:^" - "@material-ui/core": "npm:^4.12.2" - "@material-ui/icons": "npm:^4.9.1" - "@material-ui/lab": "npm:4.0.0-alpha.61" + "@backstage/ui": "workspace:^" + "@remixicon/react": "npm:^4.6.0" "@testing-library/jest-dom": "npm:^6.0.0" "@testing-library/react": "npm:^16.0.0" "@testing-library/user-event": "npm:^14.0.0"