add BC

Signed-off-by: Ilya Savich <isavich@box.com>

.changeset/new-jobs-deny.md

@@ -3,4 +3,3 @@
 ---
 
 Add possibility to re-use EntityPicker for filters with multiple select.
-**BREAKING** Style name `CatalogReactEntityTagPicker` was changed to `EntityAutocompletePickerInput`

plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx

@@ -14,19 +14,19 @@
  * limitations under the License.
  */
 
-import { Box, Typography } from '@material-ui/core';
+import { Box, TextFieldProps, Typography } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { Autocomplete } from '@material-ui/lab';
 import React, { useEffect, useMemo, useState } from 'react';
-import {
-  DefaultEntityFilters,
-  useEntityList,
-} from '../../hooks/useEntityListProvider';
 import { useApi } from '@backstage/core-plugin-api';
 import useAsync from 'react-use/lib/useAsync';
 import { catalogApiRef } from '../../api';
 import { EntityAutocompletePickerOption } from './EntityAutocompletePickerOption';
 import { EntityAutocompletePickerInput } from './EntityAutocompletePickerInput';
+import {
+  DefaultEntityFilters,
+  useEntityList,
+} from '../../hooks/useEntityListProvider';
 import { EntityFilter } from '../../types';
 
 type KeysMatchingCondition<T, V, K> = T extends V ? K : never;
@@ -53,6 +53,7 @@ export type EntityAutocompletePickerProps<
   path: string;
   showCounts?: boolean;
   Filter: ConstructableFilter<NonNullable<T[Name]>>;
+  InputProps?: TextFieldProps;
 };
 
 /** @public */
@@ -60,7 +61,7 @@ export function EntityAutocompletePicker<
   T extends DefaultEntityFilters = DefaultEntityFilters,
   Name extends AllowedEntityFilters<T> = AllowedEntityFilters<T>,
 >(props: EntityAutocompletePickerProps<T, Name>) {
-  const { label, name, path, showCounts, Filter } = props;
+  const { label, name, path, showCounts, Filter, InputProps } = props;
 
   const {
     updateFilters,
@@ -141,7 +142,9 @@ export function EntityAutocompletePicker<
           popupIcon={
             <ExpandMoreIcon data-testid={`${String(name)}-picker-expand`} />
           }
-          renderInput={EntityAutocompletePickerInput}
+          renderInput={params => (
+            <EntityAutocompletePickerInput {...params} {...InputProps} />
+          )}
         />
       </Typography>
     </Box>

plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePickerInput.tsx

@@ -13,23 +13,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { makeStyles, TextField } from '@material-ui/core';
-import { AutocompleteRenderInputParams } from '@material-ui/lab';
+import { makeStyles, TextField, TextFieldProps } from '@material-ui/core';
 import React from 'react';
+import classnames from 'classnames';
 
 const useStyles = makeStyles(
   {
     input: {},
   },
   {
-    name: 'EntityAutocompletePickerInput',
+    name: 'CatalogReactEntityAutocompletePickerInput',
   },
 );
 
-export function EntityAutocompletePickerInput(
-  params: AutocompleteRenderInputParams,
-) {
+export function EntityAutocompletePickerInput(params: TextFieldProps) {
   const classes = useStyles();
 
-  return <TextField {...params} className={classes.input} variant="outlined" />;
+  return (
+    <TextField
+      variant="outlined"
+      {...params}
+      className={classnames(classes.input, params.className)}
+    />
+  );
 }

plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { makeStyles } from '@material-ui/core';
 import React from 'react';
 import { EntityTagFilter } from '../../filters';
 import { EntityAutocompletePicker } from '../EntityAutocompletePicker/EntityAutocompletePicker';
@@ -26,8 +27,15 @@ export type EntityTagPickerProps = {
   showCounts?: boolean;
 };
 
+const useStyles = makeStyles(
+  { input: {} },
+  { name: 'CatalogReactEntityTagPicker' },
+);
+
 /** @public */
 export const EntityTagPicker = (props: EntityTagPickerProps) => {
+  const classes = useStyles();
+
   return (
     <EntityAutocompletePicker
       label="Tags"
@@ -35,6 +43,7 @@ export const EntityTagPicker = (props: EntityTagPickerProps) => {
       path="metadata.tags"
       Filter={EntityTagFilter}
       showCounts={props.showCounts}
+      InputProps={{ className: classes.input }}
     />
   );
 };