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) {
+