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;
- }}
- />
-
- )}
-
-
-
-
-
-
-
-
- }
- onClick={handleSearchBarSubmit}
- disableRipple
- >
- View Full Results
-
-
-
-
-
-
- {({ 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],
});