diff --git a/packages/core-components/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/core-components/src/components/Autocomplete/Autocomplete.stories.tsx
deleted file mode 100644
index 7aed709125..0000000000
--- a/packages/core-components/src/components/Autocomplete/Autocomplete.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Copyright 2024 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 React from 'react';
-import { AutocompleteComponent as Autocomplete } from './Autocomplete';
-
-export default {
- title: 'Inputs/Autocomplete',
- component: Autocomplete,
-};
-
-export const Default = (args: any) => {
- return ;
-};
-
-Default.args = {
- multiple: true,
- label: 'Default',
- name: 'default',
- options: ['test 1', 'test 2', 'test 3'],
-};
diff --git a/packages/core-components/src/components/index.ts b/packages/core-components/src/components/index.ts
index 6fcbe2e9a9..828df3ec03 100644
--- a/packages/core-components/src/components/index.ts
+++ b/packages/core-components/src/components/index.ts
@@ -16,7 +16,6 @@
export * from './AlertDisplay';
export * from './AutoLogout';
-export * from './Autocomplete';
export * from './Avatar';
export * from './LinkButton';
export * from './CodeSnippet';
diff --git a/packages/core-components/src/components/Autocomplete/Autocomplete.test.tsx b/plugins/catalog-react/src/components/CatalogAutocomplete/CatalogAutocomplete.test.tsx
similarity index 89%
rename from packages/core-components/src/components/Autocomplete/Autocomplete.test.tsx
rename to plugins/catalog-react/src/components/CatalogAutocomplete/CatalogAutocomplete.test.tsx
index 12269109a4..51d272f4f1 100644
--- a/packages/core-components/src/components/Autocomplete/Autocomplete.test.tsx
+++ b/plugins/catalog-react/src/components/CatalogAutocomplete/CatalogAutocomplete.test.tsx
@@ -17,7 +17,7 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import { AutocompleteComponent as Autocomplete } from './Autocomplete';
+import { CatalogAutocomplete } from './CatalogAutocomplete';
describe('Autocomplete', () => {
const user = userEvent.setup();
@@ -25,7 +25,7 @@ describe('Autocomplete', () => {
it('renders without exploding', () => {
render(
- {
it('renders the expand icon', () => {
render(
- {
it('displays options when clicked', async () => {
render(
- {
it('supports required input', () => {
render(
- {
it('displays helper text when provided', () => {
render(
- {
});
it('renders without label', () => {
- render();
+ render(
+ ,
+ );
const input = screen.getByRole('textbox');
expect(input).toBeInTheDocument();
@@ -99,7 +101,7 @@ describe('Autocomplete', () => {
it('displays correct option on selection', async () => {
render(
- (
);
/** @public */
-export type AutocompleteComponentProps<
+export type CatalogAutocompleteProps<
T,
Multiple extends boolean | undefined = undefined,
DisableClearable extends boolean | undefined = undefined,
@@ -147,12 +147,12 @@ export type AutocompleteComponentProps<
};
/** @public */
-export function AutocompleteComponent<
+export function CatalogAutocomplete<
T,
Multiple extends boolean | undefined = undefined,
DisableClearable extends boolean | undefined = undefined,
FreeSolo extends boolean | undefined = undefined,
->(props: AutocompleteComponentProps) {
+>(props: CatalogAutocompleteProps) {
const { label, name, LabelProps, TextFieldProps, ...rest } = props;
const classes = useStyles();
const renderInput = useCallback(
diff --git a/packages/core-components/src/components/Autocomplete/index.tsx b/plugins/catalog-react/src/components/CatalogAutocomplete/index.tsx
similarity index 85%
rename from packages/core-components/src/components/Autocomplete/index.tsx
rename to plugins/catalog-react/src/components/CatalogAutocomplete/index.tsx
index 404546de1a..7f1552c5bb 100644
--- a/packages/core-components/src/components/Autocomplete/index.tsx
+++ b/plugins/catalog-react/src/components/CatalogAutocomplete/index.tsx
@@ -14,6 +14,6 @@
* limitations under the License.
*/
export {
- AutocompleteComponent as Autocomplete,
- type AutocompleteComponentProps,
-} from './Autocomplete';
+ CatalogAutocomplete,
+ type CatalogAutocompleteProps,
+} from './CatalogAutocomplete';
diff --git a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx
index 3f4ec707c6..09b5c1e908 100644
--- a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx
+++ b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx
@@ -27,8 +27,8 @@ import {
useEntityList,
} from '../../hooks/useEntityListProvider';
import { EntityFilter } from '../../types';
-import { Autocomplete } from '@backstage/core-components';
import { reduceBackendCatalogFilters } from '../../utils/filters';
+import { CatalogAutocomplete } from '../CatalogAutocomplete';
/** @public */
export type AllowedEntityFilters = {
@@ -148,7 +148,7 @@ export function EntityAutocompletePicker<
return (
-
+
multiple
disableCloseOnSelect
label={label}
diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
index e26f231ff4..b70ec0bcb5 100644
--- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
@@ -27,7 +27,6 @@ import Tooltip from '@material-ui/core/Tooltip';
import { makeStyles } from '@material-ui/core/styles';
import CheckBoxIcon from '@material-ui/icons/CheckBox';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
-import { Autocomplete } from '@backstage/core-components';
import React, { useEffect, useMemo, useState } from 'react';
import { useEntityList } from '../../hooks/useEntityListProvider';
import { EntityOwnerFilter } from '../../filters';
@@ -40,6 +39,7 @@ import { withStyles } from '@material-ui/core/styles';
import { useEntityPresentation } from '../../apis';
import { catalogReactTranslationRef } from '../../translation';
import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { CatalogAutocomplete } from '../CatalogAutocomplete';
/** @public */
export type CatalogReactEntityOwnerPickerClassKey = 'input';
@@ -177,7 +177,7 @@ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => {
return (
-
+
label={t('entityOwnerPicker.title')}
multiple
disableCloseOnSelect
diff --git a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx
index 891f6acc9e..a1b6e5b562 100644
--- a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx
@@ -23,9 +23,9 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import React, { useState } from 'react';
import { useEntityList } from '../../hooks';
-import { Autocomplete } from '@backstage/core-components';
import { catalogReactTranslationRef } from '../../translation';
import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { CatalogAutocomplete } from '../CatalogAutocomplete';
/** @public */
export type CatalogReactEntityProcessingStatusPickerClassKey = 'input';
@@ -68,7 +68,7 @@ export const EntityProcessingStatusPicker = () => {
return (
-
+
label={t('entityProcessingStatusPicker.title')}
multiple
disableCloseOnSelect