diff --git a/.changeset/wise-clocks-accept.md b/.changeset/wise-clocks-accept.md new file mode 100644 index 0000000000..7b9090937b --- /dev/null +++ b/.changeset/wise-clocks-accept.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +Support `material-ui` overrides in plugin-catalog-react components diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx index 628526e9ab..750692ed2e 100644 --- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx +++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx @@ -19,6 +19,7 @@ import { Box, Checkbox, FormControlLabel, + makeStyles, TextField, Typography, } from '@material-ui/core'; @@ -30,10 +31,20 @@ import React, { useEffect, useMemo, useState } from 'react'; import { useEntityListProvider } from '../../hooks/useEntityListProvider'; import { EntityLifecycleFilter } from '../../filters'; +const useStyles = makeStyles( + { + input: {}, + }, + { + name: 'CatalogReactEntityLifecyclePicker', + }, +); + const icon = ; const checkedIcon = ; export const EntityLifecyclePicker = () => { + const classes = useStyles(); const { updateFilters, backendEntities, filters, queryParameters } = useEntityListProvider(); @@ -91,7 +102,9 @@ export const EntityLifecyclePicker = () => { )} size="small" popupIcon={} - renderInput={params => } + renderInput={params => ( + + )} /> ); diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx index 49c950f57e..dbf6a33164 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -19,6 +19,7 @@ import { Box, Checkbox, FormControlLabel, + makeStyles, TextField, Typography, } from '@material-ui/core'; @@ -32,10 +33,20 @@ import { EntityOwnerFilter } from '../../filters'; import { getEntityRelations } from '../../utils'; import { formatEntityRefTitle } from '../EntityRefLink'; +const useStyles = makeStyles( + { + input: {}, + }, + { + name: 'CatalogReactEntityOwnerPicker', + }, +); + const icon = ; const checkedIcon = ; export const EntityOwnerPicker = () => { + const classes = useStyles(); const { updateFilters, backendEntities, filters, queryParameters } = useEntityListProvider(); @@ -95,7 +106,9 @@ export const EntityOwnerPicker = () => { )} size="small" popupIcon={} - renderInput={params => } + renderInput={params => ( + + )} /> ); diff --git a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx index 9fd30b5182..3a848591a3 100644 --- a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx +++ b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx @@ -29,15 +29,21 @@ import { useDebounce } from 'react-use'; import { useEntityListProvider } from '../../hooks/useEntityListProvider'; import { EntityTextFilter } from '../../filters'; -const useStyles = makeStyles(_theme => ({ - searchToolbar: { - paddingLeft: 0, - paddingRight: 0, +const useStyles = makeStyles( + _theme => ({ + searchToolbar: { + paddingLeft: 0, + paddingRight: 0, + }, + input: {}, + }), + { + name: 'CatalogReactEntitySearchBar', }, -})); +); export const EntitySearchBar = () => { - const styles = useStyles(); + const classes = useStyles(); const { filters, updateFilters } = useEntityListProvider(); const [search, setSearch] = useState(filters.text?.value ?? ''); @@ -53,10 +59,11 @@ export const EntitySearchBar = () => { ); return ( - + setSearch(event.target.value)} diff --git a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx index 64c80d1cde..9e00f7e7b0 100644 --- a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx +++ b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx @@ -19,6 +19,7 @@ import { Box, Checkbox, FormControlLabel, + makeStyles, TextField, Typography, } from '@material-ui/core'; @@ -30,10 +31,20 @@ import React, { useEffect, useMemo, useState } from 'react'; import { useEntityListProvider } from '../../hooks/useEntityListProvider'; import { EntityTagFilter } from '../../filters'; +const useStyles = makeStyles( + { + input: {}, + }, + { + name: 'CatalogReactEntityTagPicker', + }, +); + const icon = ; const checkedIcon = ; export const EntityTagPicker = () => { + const classes = useStyles(); const { updateFilters, backendEntities, filters, queryParameters } = useEntityListProvider(); @@ -87,7 +98,9 @@ export const EntityTagPicker = () => { )} size="small" popupIcon={} - renderInput={params => } + renderInput={params => ( + + )} /> ); diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx index bfc55142a6..f861355762 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx @@ -43,29 +43,34 @@ import { import { UserListFilterKind } from '../../types'; import { reduceEntityFilters } from '../../utils'; -const useStyles = makeStyles(theme => ({ - root: { - backgroundColor: 'rgba(0, 0, 0, .11)', - boxShadow: 'none', - margin: theme.spacing(1, 0, 1, 0), +const useStyles = makeStyles( + theme => ({ + root: { + backgroundColor: 'rgba(0, 0, 0, .11)', + boxShadow: 'none', + margin: theme.spacing(1, 0, 1, 0), + }, + title: { + margin: theme.spacing(1, 0, 0, 1), + textTransform: 'uppercase', + fontSize: 12, + fontWeight: 'bold', + }, + listIcon: { + minWidth: 30, + color: theme.palette.text.primary, + }, + menuItem: { + minHeight: theme.spacing(6), + }, + groupWrapper: { + margin: theme.spacing(1, 1, 2, 1), + }, + }), + { + name: 'CatalogReactUserListPicker', }, - title: { - margin: theme.spacing(1, 0, 0, 1), - textTransform: 'uppercase', - fontSize: 12, - fontWeight: 'bold', - }, - listIcon: { - minWidth: 30, - color: theme.palette.text.primary, - }, - menuItem: { - minHeight: theme.spacing(6), - }, - groupWrapper: { - margin: theme.spacing(1, 1, 2, 1), - }, -})); +); export type ButtonGroup = { name: string;