diff --git a/.changeset/purple-trains-matter.md b/.changeset/purple-trains-matter.md new file mode 100644 index 0000000000..39531e4680 --- /dev/null +++ b/.changeset/purple-trains-matter.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +Add Override Components for Components in @backstage/plugin-catalog-react diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md index d5cf06107c..673d9256f1 100644 --- a/plugins/catalog-react/api-report.md +++ b/plugins/catalog-react/api-report.md @@ -19,12 +19,14 @@ import { IconButton } from '@material-ui/core'; import { IdentityApi } from '@backstage/core-plugin-api'; import { LinkProps } from '@backstage/core-components'; import { Observable } from '@backstage/types'; +import { Overrides } from '@material-ui/core/styles/overrides'; import { PropsWithChildren } from 'react'; import { default as React_2 } from 'react'; import { ReactNode } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; import { ScmIntegrationRegistry } from '@backstage/integration'; import { StorageApi } from '@backstage/core-plugin-api'; +import { StyleRules } from '@material-ui/core/styles/withStyles'; import { SystemEntity } from '@backstage/catalog-model'; import { TableColumn } from '@backstage/core-components'; import { UserEntity } from '@backstage/catalog-model'; @@ -52,6 +54,13 @@ export interface AsyncEntityProviderProps { refresh?: VoidFunction; } +// @public (undocumented) +export type BackstageOverrides = Overrides & { + [Name in keyof CatalogReactComponentsNameToClassKey]?: Partial< + StyleRules + >; +}; + export { CATALOG_FILTER_EXISTS }; export { CatalogApi }; @@ -61,6 +70,35 @@ export { CatalogApi }; // @public (undocumented) export const catalogApiRef: ApiRef; +// @public (undocumented) +export type CatalogReactComponentsNameToClassKey = { + CatalogReactUserListPicker: CatalogReactUserListPickerClassKey; + CatalogReactEntityLifecyclePicker: CatalogReactEntityLifecyclePickerClassKey; + CatalogReactEntitySearchBar: CatalogReactEntitySearchBarClassKey; + CatalogReactEntityTagPicker: CatalogReactEntityTagPickerClassKey; + CatalogReactEntityOwnerPicker: CatalogReactEntityOwnerPickerClassKey; +}; + +// @public (undocumented) +export type CatalogReactEntityLifecyclePickerClassKey = 'input'; + +// @public (undocumented) +export type CatalogReactEntityOwnerPickerClassKey = 'input'; + +// @public (undocumented) +export type CatalogReactEntitySearchBarClassKey = 'searchToolbar' | 'input'; + +// @public (undocumented) +export type CatalogReactEntityTagPickerClassKey = 'input'; + +// @public (undocumented) +export type CatalogReactUserListPickerClassKey = + | 'root' + | 'title' + | 'listIcon' + | 'menuItem' + | 'groupWrapper'; + // Warning: (ae-missing-release-tag) "catalogRouteRef" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx index 750692ed2e..630b1700a0 100644 --- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx +++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx @@ -31,6 +31,9 @@ import React, { useEffect, useMemo, useState } from 'react'; import { useEntityListProvider } from '../../hooks/useEntityListProvider'; import { EntityLifecycleFilter } from '../../filters'; +/** @public */ +export type CatalogReactEntityLifecyclePickerClassKey = 'input'; + const useStyles = makeStyles( { input: {}, diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/index.ts b/plugins/catalog-react/src/components/EntityLifecyclePicker/index.ts index 4b8cfb282d..def25eabf4 100644 --- a/plugins/catalog-react/src/components/EntityLifecyclePicker/index.ts +++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/index.ts @@ -15,3 +15,4 @@ */ export { EntityLifecyclePicker } from './EntityLifecyclePicker'; +export type { CatalogReactEntityLifecyclePickerClassKey } from './EntityLifecyclePicker'; diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx index dbf6a33164..ae88858666 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -33,6 +33,9 @@ import { EntityOwnerFilter } from '../../filters'; import { getEntityRelations } from '../../utils'; import { formatEntityRefTitle } from '../EntityRefLink'; +/** @public */ +export type CatalogReactEntityOwnerPickerClassKey = 'input'; + const useStyles = makeStyles( { input: {}, diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/index.ts b/plugins/catalog-react/src/components/EntityOwnerPicker/index.ts index f30928718b..c20db945f7 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/index.ts +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/index.ts @@ -15,3 +15,4 @@ */ export { EntityOwnerPicker } from './EntityOwnerPicker'; +export type { CatalogReactEntityOwnerPickerClassKey } from './EntityOwnerPicker'; diff --git a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx index 3a848591a3..57c7f58413 100644 --- a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx +++ b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx @@ -29,6 +29,9 @@ import { useDebounce } from 'react-use'; import { useEntityListProvider } from '../../hooks/useEntityListProvider'; import { EntityTextFilter } from '../../filters'; +/** @public */ +export type CatalogReactEntitySearchBarClassKey = 'searchToolbar' | 'input'; + const useStyles = makeStyles( _theme => ({ searchToolbar: { diff --git a/plugins/catalog-react/src/components/EntitySearchBar/index.ts b/plugins/catalog-react/src/components/EntitySearchBar/index.ts index 044b8ee416..e82c06d94e 100644 --- a/plugins/catalog-react/src/components/EntitySearchBar/index.ts +++ b/plugins/catalog-react/src/components/EntitySearchBar/index.ts @@ -15,3 +15,4 @@ */ export { EntitySearchBar } from './EntitySearchBar'; +export type { CatalogReactEntitySearchBarClassKey } from './EntitySearchBar'; diff --git a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx index 9e00f7e7b0..a25c50c0a9 100644 --- a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx +++ b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx @@ -31,6 +31,9 @@ import React, { useEffect, useMemo, useState } from 'react'; import { useEntityListProvider } from '../../hooks/useEntityListProvider'; import { EntityTagFilter } from '../../filters'; +/** @public */ +export type CatalogReactEntityTagPickerClassKey = 'input'; + const useStyles = makeStyles( { input: {}, diff --git a/plugins/catalog-react/src/components/EntityTagPicker/index.ts b/plugins/catalog-react/src/components/EntityTagPicker/index.ts index cb8d418a41..c982d33df0 100644 --- a/plugins/catalog-react/src/components/EntityTagPicker/index.ts +++ b/plugins/catalog-react/src/components/EntityTagPicker/index.ts @@ -15,3 +15,4 @@ */ export { EntityTagPicker } from './EntityTagPicker'; +export type { CatalogReactEntityTagPickerClassKey } from './EntityTagPicker'; diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx index 9aafdf1437..8746752b08 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx @@ -43,6 +43,14 @@ import { import { UserListFilterKind } from '../../types'; import { reduceEntityFilters } from '../../utils'; +/** @public */ +export type CatalogReactUserListPickerClassKey = + | 'root' + | 'title' + | 'listIcon' + | 'menuItem' + | 'groupWrapper'; + const useStyles = makeStyles( theme => ({ root: { diff --git a/plugins/catalog-react/src/components/UserListPicker/index.ts b/plugins/catalog-react/src/components/UserListPicker/index.ts index 0bacaee8ca..45cb471197 100644 --- a/plugins/catalog-react/src/components/UserListPicker/index.ts +++ b/plugins/catalog-react/src/components/UserListPicker/index.ts @@ -15,3 +15,4 @@ */ export { UserListPicker } from './UserListPicker'; +export type { CatalogReactUserListPickerClassKey } from './UserListPicker'; diff --git a/plugins/catalog-react/src/index.ts b/plugins/catalog-react/src/index.ts index cf7a679f7a..7bf1bd1221 100644 --- a/plugins/catalog-react/src/index.ts +++ b/plugins/catalog-react/src/index.ts @@ -37,3 +37,4 @@ export { export * from './testUtils'; export * from './types'; export * from './utils'; +export * from './overridableComponents'; diff --git a/plugins/catalog-react/src/overridableComponents.ts b/plugins/catalog-react/src/overridableComponents.ts new file mode 100644 index 0000000000..1e654988e4 --- /dev/null +++ b/plugins/catalog-react/src/overridableComponents.ts @@ -0,0 +1,41 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { Overrides } from '@material-ui/core/styles/overrides'; +import { StyleRules } from '@material-ui/core/styles/withStyles'; + +import { + CatalogReactUserListPickerClassKey, + CatalogReactEntityLifecyclePickerClassKey, + CatalogReactEntitySearchBarClassKey, + CatalogReactEntityTagPickerClassKey, + CatalogReactEntityOwnerPickerClassKey, +} from './components'; + +/** @public */ +export type CatalogReactComponentsNameToClassKey = { + CatalogReactUserListPicker: CatalogReactUserListPickerClassKey; + CatalogReactEntityLifecyclePicker: CatalogReactEntityLifecyclePickerClassKey; + CatalogReactEntitySearchBar: CatalogReactEntitySearchBarClassKey; + CatalogReactEntityTagPicker: CatalogReactEntityTagPickerClassKey; + CatalogReactEntityOwnerPicker: CatalogReactEntityOwnerPickerClassKey; +}; + +/** @public */ +export type BackstageOverrides = Overrides & { + [Name in keyof CatalogReactComponentsNameToClassKey]?: Partial< + StyleRules + >; +};