diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 7acde03953..99a6f8096f 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -17,6 +17,7 @@ import { AlertDisplay, createApp, + LocalStorageFeatureFlags, FlatRoutes, OAuthRequestDialog, SignInPage, @@ -50,6 +51,7 @@ import { Navigate, Route } from 'react-router'; import { apis } from './apis'; import { EntityPage } from './components/catalog/EntityPage'; import Root from './components/Root'; +import { SearchPage } from './components/search/SearchPage'; import { providers } from './identityProviders'; import * as plugins from './plugins'; @@ -87,6 +89,7 @@ const app = createApp({ const AppProvider = app.getProvider(); const AppRouter = app.getRouter(); +const featureFlags = new LocalStorageFeatureFlags(); const routes = ( @@ -100,6 +103,9 @@ const routes = ( } /> } /> + {featureFlags.isActive('use-search-platform') && ( + } /> + )} } /> } /> { + const [queryString, setQueryString] = useQueryParamState('query'); + const [searchQuery, setSearchQuery] = useState(queryString ?? ''); + + const handleSearch = (event: React.ChangeEvent) => { + event.preventDefault(); + setSearchQuery(event.target.value); + }; + + useEffect(() => setSearchQuery(queryString ?? ''), [queryString]); + + useDebounce( + () => { + setQueryString(searchQuery); + }, + 200, + [searchQuery], + ); + + const handleClearSearchBar = () => { + setSearchQuery(''); + }; + + return ( + +
+ + + + + + + + + + + + ); +}; diff --git a/plugins/search/src/plugin.ts b/plugins/search/src/plugin.ts index 37503b7751..81d4489655 100644 --- a/plugins/search/src/plugin.ts +++ b/plugins/search/src/plugin.ts @@ -27,8 +27,9 @@ export const rootRouteRef = createRouteRef({ export const searchPlugin = createPlugin({ id: 'search', - register({ router }) { + register({ router, featureFlags }) { router.addRoute(rootRouteRef, SearchPageComponent); + featureFlags.register('use-search-platform'); }, routes: { root: rootRouteRef,