diff --git a/plugins/catalog-react/src/components/GroupListPicker/GroupListPicker.tsx b/plugins/catalog-react/src/components/GroupListPicker/GroupListPicker.tsx index ba0e2841af..f5ba1c7198 100644 --- a/plugins/catalog-react/src/components/GroupListPicker/GroupListPicker.tsx +++ b/plugins/catalog-react/src/components/GroupListPicker/GroupListPicker.tsx @@ -33,13 +33,15 @@ const useStyles = makeStyles({ border: 'none', margin: 0, padding: 0, + width: '100%', }, title: { + fontSize: '24px', fontStyle: 'normal', fontWeight: 700, - fontSize: '24px', - lineHeight: '32px', letterSpacing: '-0.25px', + lineHeight: '32px', + marginBottom: 0, }, }); @@ -51,6 +53,7 @@ type GroupListPickerProps = { export const GroupListPicker = (props: GroupListPickerProps) => { const classes = useStyles(); const catalogApi = useApi(catalogApiRef); + const { label, groupTypes, defaultGroup = '' } = props; const [anchorEl, setAnchorEl] = React.useState(null); const [inputValue, setInputValue] = React.useState(''); @@ -109,9 +112,9 @@ export const GroupListPicker = (props: GroupListPickerProps) => { } setInputValue(''); }} - style={{ width: '200px', margin: '8px' }} + style={{ width: '200px' }} renderInput={params => ( - + )} /> @@ -122,17 +125,15 @@ export const GroupListPicker = (props: GroupListPickerProps) => { className={classes.btn} data-testid="group-list-picker-button" > - - + + {group} - + diff --git a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx index 2bae104d90..c465dc7c85 100644 --- a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx @@ -35,6 +35,7 @@ import { UserListFilterKind, UserListPicker, EntityKindPicker, + GroupListPicker, } from '@backstage/plugin-catalog-react'; import React from 'react'; import { createComponentRouteRef } from '../../routes'; @@ -84,6 +85,11 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) { +