Add Override Components for Components in @backstage/plugin-catalog-react

Signed-off-by: Dede Hamzah <dehamzah@gmail.com>

.changeset/purple-trains-matter.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Add Override Components for Components in @backstage/plugin-catalog-react

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: {},

plugins/catalog-react/src/components/EntityLifecyclePicker/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { EntityLifecyclePicker } from './EntityLifecyclePicker';
+export type { CatalogReactEntityLifecyclePickerClassKey } from './EntityLifecyclePicker';

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: {},

plugins/catalog-react/src/components/EntityOwnerPicker/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { EntityOwnerPicker } from './EntityOwnerPicker';
+export type { CatalogReactEntityOwnerPickerClassKey } from './EntityOwnerPicker';

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: {

plugins/catalog-react/src/components/EntitySearchBar/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { EntitySearchBar } from './EntitySearchBar';
+export type { CatalogReactEntitySearchBarClassKey } from './EntitySearchBar';

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: {},

plugins/catalog-react/src/components/EntityTagPicker/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { EntityTagPicker } from './EntityTagPicker';
+export type { CatalogReactEntityTagPickerClassKey } from './EntityTagPicker';

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>(
   theme => ({
     root: {

plugins/catalog-react/src/components/UserListPicker/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { UserListPicker } from './UserListPicker';
+export type { CatalogReactUserListPickerClassKey } from './UserListPicker';

plugins/catalog-react/src/index.ts

@@ -37,3 +37,4 @@ export {
 export * from './testUtils';
 export * from './types';
 export * from './utils';
+export * from './overridableComponents';

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<BackstageComponentsNameToClassKey[Name]>
+  >;
+};