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