diff --git a/packages/frontend-app-api/src/extensions/CoreNav.tsx b/packages/frontend-app-api/src/extensions/CoreNav.tsx index 9c829a348f..71ab71a6aa 100644 --- a/packages/frontend-app-api/src/extensions/CoreNav.tsx +++ b/packages/frontend-app-api/src/extensions/CoreNav.tsx @@ -30,7 +30,6 @@ import { sidebarConfig, SidebarDivider, SidebarItem, - SidebarGroup, } from '@backstage/core-components'; // eslint-disable-next-line @backstage/no-relative-monorepo-imports import LogoIcon from '../../../app/src/components/Root/LogoIcon'; @@ -66,15 +65,10 @@ const SidebarLogo = () => { }; const SidebarNavItem = (props: NavTarget) => { - const { icon: Icon, title, group, routeRef } = props; + const { icon: Icon, title, routeRef } = props; const to = useRouteRef(routeRef)(); - return group ? ( - } label={title}> - {group} - - ) : ( - - ); + // TODO: Support opening modal, for example, the search one + return ; }; export const CoreNav = createExtension({ diff --git a/packages/frontend-plugin-api/src/extensions/createNavItemExtension.tsx b/packages/frontend-plugin-api/src/extensions/createNavItemExtension.tsx index 723c9e9956..8c55531866 100644 --- a/packages/frontend-plugin-api/src/extensions/createNavItemExtension.tsx +++ b/packages/frontend-plugin-api/src/extensions/createNavItemExtension.tsx @@ -16,33 +16,19 @@ import { IconComponent, RouteRef } from '@backstage/core-plugin-api'; import { createSchemaFromZod } from '../schema/createSchemaFromZod'; -import { - AnyExtensionInputMap, - ExtensionInputValues, - coreExtensionData, - createExtension, -} from '../wiring'; -import { Expand } from '../wiring/createExtension'; -import { Suspense, lazy } from 'react'; -import React from 'react'; +import { coreExtensionData, createExtension } from '../wiring'; /** * Helper for creating extensions for a nav item. * @public */ -export function createNavItemExtension< - TInputs extends AnyExtensionInputMap, ->(options: { +export function createNavItemExtension(options: { id: string; routeRef: RouteRef; title: string; icon: IconComponent; - inputs?: TInputs; - group?: (options: { - inputs: Expand>; - }) => Promise; }) { - const { id, routeRef, title, icon, group } = options; + const { id, routeRef, title, icon } = options; return createExtension({ id, at: 'core.nav/items', @@ -51,28 +37,15 @@ export function createNavItemExtension< title: z.string().default(title), }), ), - inputs: options.inputs, output: { navTarget: coreExtensionData.navTarget, }, - factory: ({ bind, config, inputs }) => { - const Group = group - ? (lazy(() => - group({ inputs }).then(element => ({ - default: () => element, - })), - ) as unknown as () => JSX.Element) - : undefined; + factory: ({ bind, config }) => { bind({ navTarget: { title: config.title, icon, routeRef, - group: Group ? ( - - - - ) : undefined, }, }); }, diff --git a/packages/frontend-plugin-api/src/wiring/coreExtensionData.ts b/packages/frontend-plugin-api/src/wiring/coreExtensionData.ts index d03513677d..079d5bcb18 100644 --- a/packages/frontend-plugin-api/src/wiring/coreExtensionData.ts +++ b/packages/frontend-plugin-api/src/wiring/coreExtensionData.ts @@ -27,7 +27,6 @@ export type NavTarget = { title: string; icon: IconComponent; routeRef: RouteRef<{}>; - group?: JSX.Element; }; /** @public */ diff --git a/plugins/search/alpha-api-report.md b/plugins/search/alpha-api-report.md index dd1bce1f9f..5799ff5cd6 100644 --- a/plugins/search/alpha-api-report.md +++ b/plugins/search/alpha-api-report.md @@ -13,9 +13,6 @@ export default _default; // @alpha (undocumented) export const SearchApi: Extension<{}>; -// @alpha (undocumented) -export const SearchModal: Extension; - // @alpha (undocumented) export const SearchNavItem: Extension<{ title: string; @@ -24,6 +21,7 @@ export const SearchNavItem: Extension<{ // @alpha (undocumented) export const SearchPage: Extension<{ path: string; + noTrack: boolean; }>; // (No @packageDocumentation comment for this package) diff --git a/plugins/search/src/alpha.tsx b/plugins/search/src/alpha.tsx index 9eb9d489f4..2a9a714abd 100644 --- a/plugins/search/src/alpha.tsx +++ b/plugins/search/src/alpha.tsx @@ -14,24 +14,10 @@ * limitations under the License. */ -import React, { useCallback, useEffect, useRef } from 'react'; -import { useNavigate } from 'react-router-dom'; +import React from 'react'; -import { - makeStyles, - Theme, - Grid, - Box, - Paper, - DialogActions, - DialogContent, - DialogTitle, - Button, - IconButton, -} from '@material-ui/core'; -import CloseIcon from '@material-ui/icons/Close'; +import { makeStyles, Theme, Grid, Paper } from '@material-ui/core'; import SearchIcon from '@material-ui/icons/Search'; -import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; import { CatalogIcon, @@ -56,8 +42,6 @@ import { createPageExtension, createExtensionInput, createNavItemExtension, - createExtensionDataRef, - createExtension, createSchemaFromZod, } from '@backstage/frontend-plugin-api'; @@ -83,8 +67,6 @@ import { searchResultItemExtensionData } from '@backstage/plugin-search-react/al import { SearchClient } from './apis'; import { SearchType } from './components/SearchType'; import { UrlUpdater } from './components/SearchPage/SearchPage'; -import { SidebarSearchModal } from './components/SidebarSearchModal/SidebarSearchModal'; -import { useSearchModal } from './components/SearchModal'; /** @alpha */ export const SearchApi = createApiExtension({ @@ -248,249 +230,16 @@ export const SearchPage = createPageExtension({ }, }); -const searchModalExtensionData = createExtensionDataRef( - 'plugin.search.modal.element', -); - -const useSearchModalStyles = makeStyles(theme => ({ - dialogTitle: { - gap: theme.spacing(1), - display: 'grid', - alignItems: 'center', - gridTemplateColumns: '1fr auto', - '&> button': { - marginTop: theme.spacing(1), - }, - }, - container: { - borderRadius: 30, - display: 'flex', - height: '2.4em', - padding: theme.spacing(1), - }, - filter: { - '& + &': { - marginTop: theme.spacing(2.5), - }, - }, - filters: { - padding: theme.spacing(2), - marginTop: theme.spacing(2), - }, - input: { - flex: 1, - }, - button: { - '&:hover': { - background: 'none', - }, - }, - dialogActionsContainer: { padding: theme.spacing(1, 3) }, - viewResultsLink: { verticalAlign: '0.5em' }, -})); - -/** @alpha */ -export const SearchModal = createExtension({ - id: 'plugin.search.modal', - at: 'plugin.search.nav.index/modal', - configSchema: createSchemaFromZod(z => - z.object({ - noTrack: z.boolean().default(false), - }), - ), - inputs: { - items: createExtensionInput({ - item: searchResultItemExtensionData, - }), - }, - output: { - element: searchModalExtensionData, - }, - factory({ bind, config, inputs }) { - const getResultItemComponent = (result: SearchResult) => { - const value = inputs.items.find(({ item }) => item?.predicate?.(result)); - return value?.item.component ?? DefaultResultListItem; - }; - - const Component = () => { - const classes = useSearchModalStyles(); - const navigate = useNavigate(); - const catalogApi = useApi(catalogApiRef); - - const { types } = useSearch(); - const { toggleModal } = useSearchModal(); - const searchRootRoute = '/search'; - const searchBarRef = useRef(null); - - useEffect(() => { - searchBarRef?.current?.focus(); - }); - - // This handler is called when "enter" is pressed - const handleSearchBarSubmit = useCallback(() => { - toggleModal(); - // Using ref to get the current field value without waiting for a query debounce - const query = searchBarRef.current?.value ?? ''; - navigate(`${searchRootRoute}?query=${query}`); - }, [navigate, toggleModal, searchRootRoute]); - - return ( - <> - - - - - - - - - - - - - - - - {types.includes('techdocs') && ( - - { - // Return a list of entities which are documented. - const { items } = await catalogApi.getEntities({ - fields: ['metadata.name'], - filter: { - 'metadata.annotations.backstage.io/techdocs-ref': - CATALOG_FILTER_EXISTS, - }, - }); - - const names = items.map(entity => entity.metadata.name); - names.sort(); - return names; - }} - /> - - )} - - - - - - - - - - - - - - - {({ results }) => - results.map((result, index) => { - const SearchResultListItem = - getResultItemComponent(result); - return ( - - ); - }) - } - - - - - - - - - - - - - ); - }; - - bind({ - element: , - }); - }, -}); - /** @alpha */ export const SearchNavItem = createNavItemExtension({ id: 'plugin.search.nav.index', routeRef: searchRouteRef, title: 'Search', icon: SearchIcon, - group: async ({ inputs }) => ( - {() => inputs.modal.element} - ), - inputs: { - modal: createExtensionInput( - { - element: searchModalExtensionData, - }, - { - singleton: true, - }, - ), - }, }); /** @alpha */ export default createPlugin({ id: 'plugin.search', - extensions: [SearchApi, SearchPage, SearchModal, SearchNavItem], + extensions: [SearchApi, SearchPage, SearchNavItem], });