colocate Autocomplete component in catalog-react

Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>

packages/core-components/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -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 <Autocomplete {...args} />;
-};
-
-Default.args = {
-  multiple: true,
-  label: 'Default',
-  name: 'default',
-  options: ['test 1', 'test 2', 'test 3'],
-};

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';

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(
-      <Autocomplete
+      <CatalogAutocomplete
         name="test-autocomplete"
         options={mockOptions}
         label="Test Label"
@@ -36,7 +36,7 @@ describe('Autocomplete', () => {
 
   it('renders the expand icon', () => {
     render(
-      <Autocomplete
+      <CatalogAutocomplete
         name="test-autocomplete"
         options={mockOptions}
         label="Test Label"
@@ -48,7 +48,7 @@ describe('Autocomplete', () => {
 
   it('displays options when clicked', async () => {
     render(
-      <Autocomplete
+      <CatalogAutocomplete
         name="test-autocomplete"
         options={mockOptions}
         label="Test Label"
@@ -65,7 +65,7 @@ describe('Autocomplete', () => {
 
   it('supports required input', () => {
     render(
-      <Autocomplete
+      <CatalogAutocomplete
         name="test-autocomplete"
         options={mockOptions}
         label="Test Label"
@@ -79,7 +79,7 @@ describe('Autocomplete', () => {
 
   it('displays helper text when provided', () => {
     render(
-      <Autocomplete
+      <CatalogAutocomplete
         name="test-autocomplete"
         options={mockOptions}
         label="Test Label"
@@ -91,7 +91,9 @@ describe('Autocomplete', () => {
   });
 
   it('renders without label', () => {
-    render(<Autocomplete name="test-autocomplete" options={mockOptions} />);
+    render(
+      <CatalogAutocomplete name="test-autocomplete" options={mockOptions} />,
+    );
 
     const input = screen.getByRole('textbox');
     expect(input).toBeInTheDocument();
@@ -99,7 +101,7 @@ describe('Autocomplete', () => {
 
   it('displays correct option on selection', async () => {
     render(
-      <Autocomplete
+      <CatalogAutocomplete
         name="test-autocomplete"
         options={mockOptions}
         label="Test Label"

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

@@ -125,7 +125,7 @@ const PaperComponent = (props: PaperProps) => (
 );
 
 /** @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<T, Multiple, DisableClearable, FreeSolo>) {
+>(props: CatalogAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>) {
   const { label, name, LabelProps, TextFieldProps, ...rest } = props;
   const classes = useStyles();
   const renderInput = useCallback(

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';

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<T extends DefaultEntityFilters> = {
@@ -148,7 +148,7 @@ export function EntityAutocompletePicker<
 
   return (
     <Box className={classes.root} pb={1} pt={1}>
-      <Autocomplete<string, true>
+      <CatalogAutocomplete<string, true>
         multiple
         disableCloseOnSelect
         label={label}

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 (
     <Box className={classes.root} pb={1} pt={1}>
-      <Autocomplete<Entity, true>
+      <CatalogAutocomplete<Entity, true>
         label={t('entityOwnerPicker.title')}
         multiple
         disableCloseOnSelect

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 (
     <Box className={classes.root} pb={1} pt={1}>
-      <Autocomplete<string, true>
+      <CatalogAutocomplete<string, true>
         label={t('entityProcessingStatusPicker.title')}
         multiple
         disableCloseOnSelect