Merge pull request #8643 from dehamzah/overrideable-components-for-catalog-react

Overridable components for components in plugin catalog react

.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/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<CatalogReactComponentsNameToClassKey[Name]>
+  >;
+};
+
 export { CATALOG_FILTER_EXISTS };
 
 export { CatalogApi };
@@ -61,6 +70,35 @@ export { CatalogApi };
 // @public (undocumented)
 export const catalogApiRef: ApiRef<CatalogApi>;
 
+// @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)

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

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,9 @@ import { EntityOwnerFilter } from '../../filters';
 import { getEntityRelations } from '../../utils';
 import { formatEntityRefTitle } from '../EntityRefLink';
 
+/** @public */
+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,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: {

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

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,14 @@ import {
 import { UserListFilterKind } from '../../types';
 import { reduceEntityFilters } from '../../utils';
 
+/** @public */
+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,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<CatalogReactComponentsNameToClassKey[Name]>
+  >;
+};