diff --git a/.changeset/brave-days-burn.md b/.changeset/brave-days-burn.md new file mode 100644 index 0000000000..e3733ba6b5 --- /dev/null +++ b/.changeset/brave-days-burn.md @@ -0,0 +1,6 @@ +--- +'@backstage/core-app-api': patch +'@backstage/plugin-catalog-import': patch +--- + +Add system icons for the built-in entity types and use them in the entity list of the `catalog-import` plugin. diff --git a/packages/core-app-api/src/app/icons.tsx b/packages/core-app-api/src/app/icons.tsx index bf45155096..a102026b29 100644 --- a/packages/core-app-api/src/app/icons.tsx +++ b/packages/core-app-api/src/app/icons.tsx @@ -15,17 +15,22 @@ */ import { IconComponent } from '@backstage/core-plugin-api'; -import MuiMenuBookIcon from '@material-ui/icons/MenuBook'; +import MuiApartmentIcon from '@material-ui/icons/Apartment'; import MuiBrokenImageIcon from '@material-ui/icons/BrokenImage'; +import MuiCategoryIcon from '@material-ui/icons/Category'; import MuiChatIcon from '@material-ui/icons/Chat'; import MuiDashboardIcon from '@material-ui/icons/Dashboard'; +import MuiDocsIcon from '@material-ui/icons/Description'; import MuiEmailIcon from '@material-ui/icons/Email'; +import MuiExtensionIcon from '@material-ui/icons/Extension'; import MuiGitHubIcon from '@material-ui/icons/GitHub'; import MuiHelpIcon from '@material-ui/icons/Help'; +import MuiLocationOnIcon from '@material-ui/icons/LocationOn'; +import MuiMemoryIcon from '@material-ui/icons/Memory'; +import MuiMenuBookIcon from '@material-ui/icons/MenuBook'; import MuiPeopleIcon from '@material-ui/icons/People'; import MuiPersonIcon from '@material-ui/icons/Person'; import MuiWarningIcon from '@material-ui/icons/Warning'; -import MuiDocsIcon from '@material-ui/icons/Description'; type AppIconsKey = | 'brokenImage' @@ -37,6 +42,13 @@ type AppIconsKey = | 'github' | 'group' | 'help' + | 'kind:api' + | 'kind:component' + | 'kind:domain' + | 'kind:group' + | 'kind:location' + | 'kind:system' + | 'kind:user' | 'user' | 'warning'; @@ -53,6 +65,13 @@ export const defaultAppIcons: AppIcons = { github: MuiGitHubIcon, group: MuiPeopleIcon, help: MuiHelpIcon, + 'kind:api': MuiExtensionIcon, + 'kind:component': MuiMemoryIcon, + 'kind:domain': MuiApartmentIcon, + 'kind:group': MuiPeopleIcon, + 'kind:location': MuiLocationOnIcon, + 'kind:system': MuiCategoryIcon, + 'kind:user': MuiPersonIcon, user: MuiPersonIcon, warning: MuiWarningIcon, }; diff --git a/plugins/catalog-import/src/components/EntityListComponent/EntityListComponent.tsx b/plugins/catalog-import/src/components/EntityListComponent/EntityListComponent.tsx index 433f7eda5a..b8af9942f6 100644 --- a/plugins/catalog-import/src/components/EntityListComponent/EntityListComponent.tsx +++ b/plugins/catalog-import/src/components/EntityListComponent/EntityListComponent.tsx @@ -15,6 +15,7 @@ */ import { Entity, EntityName } from '@backstage/catalog-model'; +import { useApp } from '@backstage/core-plugin-api'; import { EntityRefLink, formatEntityRefTitle, @@ -29,15 +30,8 @@ import { ListItemText, } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; -import ApartmentIcon from '@material-ui/icons/Apartment'; -import CategoryIcon from '@material-ui/icons/Category'; import ExpandLessIcon from '@material-ui/icons/ExpandLess'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import ExtensionIcon from '@material-ui/icons/Extension'; -import GroupIcon from '@material-ui/icons/Group'; -import LocationOnIcon from '@material-ui/icons/LocationOn'; -import MemoryIcon from '@material-ui/icons/Memory'; -import PersonIcon from '@material-ui/icons/Person'; import WorkIcon from '@material-ui/icons/Work'; import React, { useState } from 'react'; @@ -53,34 +47,6 @@ function sortEntities(entities: Array) { ); } -function getEntityIcon(entity: { kind: string }): React.ReactElement { - switch (entity.kind.toLocaleLowerCase('en-US')) { - case 'api': - return ; - - case 'component': - return ; - - case 'domain': - return ; - - case 'group': - return ; - - case 'location': - return ; - - case 'system': - return ; - - case 'user': - return ; - - default: - return ; - } -} - type Props = { locations: Array<{ target: string; entities: (Entity | EntityName)[] }>; locationListItemIcon: (target: string) => React.ReactElement; @@ -98,6 +64,7 @@ export const EntityListComponent = ({ firstListItem, withLinks = false, }: Props) => { + const app = useApp(); const classes = useStyles(); const [expandedUrls, setExpandedUrls] = useState([]); @@ -144,22 +111,30 @@ export const EntityListComponent = ({ unmountOnExit > - {sortEntities(r.entities).map(entity => ( - - {getEntityIcon(entity)} - - - ))} + {sortEntities(r.entities).map(entity => { + const Icon = + app.getSystemIcon( + `kind:${entity.kind.toLocaleLowerCase('en-US')}`, + ) ?? WorkIcon; + return ( + + + + + + + ); + })} diff --git a/plugins/catalog-import/src/components/StepPrepareSelectLocations/StepPrepareSelectLocations.test.tsx b/plugins/catalog-import/src/components/StepPrepareSelectLocations/StepPrepareSelectLocations.test.tsx index 273b41d82d..eb1d95e14d 100644 --- a/plugins/catalog-import/src/components/StepPrepareSelectLocations/StepPrepareSelectLocations.test.tsx +++ b/plugins/catalog-import/src/components/StepPrepareSelectLocations/StepPrepareSelectLocations.test.tsx @@ -14,7 +14,8 @@ * limitations under the License. */ -import { act, render } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; +import { act } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; import { AnalyzeResult } from '../../api'; @@ -57,7 +58,7 @@ describe('', () => { }); it('renders without exploding', async () => { - const { getByRole } = render( + const { getByRole } = await renderInTestApp( undefined} @@ -69,7 +70,7 @@ describe('', () => { }); it('should select and deselect all', async () => { - const { getByRole, getAllByRole } = render( + const { getByRole, getAllByRole } = await renderInTestApp( undefined} @@ -97,7 +98,7 @@ describe('', () => { }); it('should preselect prepared locations', async () => { - const { getAllByRole } = render( + const { getAllByRole } = await renderInTestApp( ', () => { }); it('should select items', async () => { - const { getAllByRole } = render( + const { getAllByRole } = await renderInTestApp( undefined} @@ -146,7 +147,7 @@ describe('', () => { it('should go back', async () => { const onGoBack = jest.fn(); - const { getByRole } = render( + const { getByRole } = await renderInTestApp( undefined} @@ -164,7 +165,7 @@ describe('', () => { it('should submit', async () => { const onPrepare = jest.fn(); - const { getAllByRole, getByRole } = render( + const { getAllByRole, getByRole } = await renderInTestApp(