From fe2a6532ffbfb72e497879c0cb5cea667f0b79e3 Mon Sep 17 00:00:00 2001 From: Dede Hamzah Date: Mon, 27 Dec 2021 17:30:10 +0700 Subject: [PATCH] Add Override Components for Components in @backstage/plugin-catalog-react Signed-off-by: Dede Hamzah --- .changeset/purple-trains-matter.md | 5 +++ .../EntityLifecyclePicker.tsx | 2 + .../components/EntityLifecyclePicker/index.ts | 1 + .../EntityOwnerPicker/EntityOwnerPicker.tsx | 2 + .../src/components/EntityOwnerPicker/index.ts | 1 + .../EntitySearchBar/EntitySearchBar.tsx | 2 + .../src/components/EntitySearchBar/index.ts | 1 + .../EntityTagPicker/EntityTagPicker.tsx | 2 + .../src/components/EntityTagPicker/index.ts | 1 + .../UserListPicker/UserListPicker.tsx | 7 ++++ .../src/components/UserListPicker/index.ts | 1 + plugins/catalog-react/src/index.ts | 1 + .../src/overridableComponents.ts | 40 +++++++++++++++++++ 13 files changed, 66 insertions(+) create mode 100644 .changeset/purple-trains-matter.md create mode 100644 plugins/catalog-react/src/overridableComponents.ts 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/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx index 750692ed2e..4bdd148d15 100644 --- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx +++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx @@ -31,6 +31,8 @@ import React, { useEffect, useMemo, useState } from 'react'; import { useEntityListProvider } from '../../hooks/useEntityListProvider'; import { EntityLifecycleFilter } from '../../filters'; +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..7db9ee6b42 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -33,6 +33,8 @@ import { EntityOwnerFilter } from '../../filters'; import { getEntityRelations } from '../../utils'; import { formatEntityRefTitle } from '../EntityRefLink'; +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..2036659cf7 100644 --- a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx +++ b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx @@ -29,6 +29,8 @@ import { useDebounce } from 'react-use'; import { useEntityListProvider } from '../../hooks/useEntityListProvider'; import { EntityTextFilter } from '../../filters'; +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..dd97fbc515 100644 --- a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx +++ b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx @@ -31,6 +31,8 @@ import React, { useEffect, useMemo, useState } from 'react'; import { useEntityListProvider } from '../../hooks/useEntityListProvider'; import { EntityTagFilter } from '../../filters'; +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 f861355762..55cee0547d 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx @@ -43,6 +43,13 @@ import { import { UserListFilterKind } from '../../types'; import { reduceEntityFilters } from '../../utils'; +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..33a6ef2481 --- /dev/null +++ b/plugins/catalog-react/src/overridableComponents.ts @@ -0,0 +1,40 @@ +/* + * 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'; + +type BackstageComponentsNameToClassKey = { + CatalogReactUserListPicker: CatalogReactUserListPickerClassKey; + CatalogReactEntityLifecyclePicker: CatalogReactEntityLifecyclePickerClassKey; + CatalogReactEntitySearchBar: CatalogReactEntitySearchBarClassKey; + CatalogReactEntityTagPicker: CatalogReactEntityTagPickerClassKey; + CatalogReactEntityOwnerPicker: CatalogReactEntityOwnerPickerClassKey; +}; + +/** @public */ +export type BackstageOverrides = Overrides & { + [Name in keyof BackstageComponentsNameToClassKey]?: Partial< + StyleRules + >; +};