diff --git a/.changeset/calm-mugs-jog.md b/.changeset/calm-mugs-jog.md new file mode 100644 index 0000000000..6cb5c1de24 --- /dev/null +++ b/.changeset/calm-mugs-jog.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-badges': patch +--- + +Update badge dialog formatting diff --git a/.changeset/silly-crabs-press.md b/.changeset/silly-crabs-press.md new file mode 100644 index 0000000000..64895cb847 --- /dev/null +++ b/.changeset/silly-crabs-press.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Add icon for entity badge menu diff --git a/plugins/badges/src/components/EntityBadgesDialog.test.tsx b/plugins/badges/src/components/EntityBadgesDialog.test.tsx index 2491a3462c..25a6f01c1a 100644 --- a/plugins/badges/src/components/EntityBadgesDialog.test.tsx +++ b/plugins/badges/src/components/EntityBadgesDialog.test.tsx @@ -55,7 +55,7 @@ describe('EntityBadgesDialog', () => { ); await expect( - rendered.findByText('testbadge badge'), + rendered.findByText('![test: badge](http://127.0.0.1/catalog/...)'), ).resolves.toBeInTheDocument(); }); }); diff --git a/plugins/badges/src/components/EntityBadgesDialog.tsx b/plugins/badges/src/components/EntityBadgesDialog.tsx index 74a244e698..f6ba9de9fe 100644 --- a/plugins/badges/src/components/EntityBadgesDialog.tsx +++ b/plugins/badges/src/components/EntityBadgesDialog.tsx @@ -22,17 +22,16 @@ import { useApi, } from '@backstage/core'; import { + Box, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, - Typography, useMediaQuery, useTheme, } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; import { useAsync } from 'react-use'; import { badgesApiRef } from '../api'; @@ -43,19 +42,10 @@ type Props = { entity: Entity; }; -const useStyles = makeStyles({ - codeBlock: { - '& code': { - whiteSpace: 'pre-wrap', - }, - }, -}); - export const EntityBadgesDialog = ({ open, onClose, entity }: Props) => { const theme = useTheme(); const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); const badgesApi = useApi(badgesApiRef); - const classes = useStyles(); const { value: badges, loading, error } = useAsync(async () => { if (open) { @@ -67,18 +57,11 @@ export const EntityBadgesDialog = ({ open, onClose, entity }: Props) => { const content = (badges || []).map( ({ badge: { description }, id, url, markdown }) => ( -
- - {description || `${id} badge`} -
- {description -
- - Copy the following snippet of markdown code for the badge: - - -
-
+ + + {description + + ), ); @@ -87,6 +70,10 @@ export const EntityBadgesDialog = ({ open, onClose, entity }: Props) => { Entity Badges + + Embed badges in other web sites that link back to this entity. Copy + the relevant snippet of Markdown code to use the badge. + {loading && } {error && } {content} diff --git a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx index b9af9b307e..e4275181df 100644 --- a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx +++ b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx @@ -24,6 +24,7 @@ import { } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; import Cancel from '@material-ui/icons/Cancel'; +import BadgeIcon from '@material-ui/icons/CallToAction'; import MoreVert from '@material-ui/icons/MoreVert'; import React, { useState } from 'react'; @@ -81,6 +82,9 @@ export const EntityContextMenu = ({ onShowBadgesDialog(); }} > + + + Badges )}