diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index c5e5033973..04f618c583 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -54,6 +54,7 @@ import { Navigate, Route } from 'react-router'; import { apis } from './apis'; import { Root } from './components/Root'; import { entityPage } from './components/catalog/EntityPage'; +import { searchPage } from './components/search/SearchPage'; import { providers } from './identityProviders'; import * as plugins from './plugins'; @@ -121,8 +122,10 @@ const routes = ( } /> } - /> + element={} + > + {searchPage} + } /> +
} /> + + + + + + + + + + + {({results}) => ( + + {results.map(result => { + switch (result.type) { + case 'software-catalog': + return ( + + ); + default: + return ( + + ); + } + })} + + )} + + + + + +); diff --git a/plugins/catalog/src/components/CatalogResultListItem/CatalogResultListItem.tsx b/plugins/catalog/src/components/CatalogResultListItem/CatalogResultListItem.tsx new file mode 100644 index 0000000000..88a1f9f1d6 --- /dev/null +++ b/plugins/catalog/src/components/CatalogResultListItem/CatalogResultListItem.tsx @@ -0,0 +1,51 @@ +/* + * Copyright 2021 Spotify AB + * + * 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 + * l +imitations under the License. + */ + +import React from 'react'; +import { Link } from '@backstage/core'; +import { Box, Chip, Divider, ListItem, ListItemText, makeStyles } from '@material-ui/core'; + +const useStyles = makeStyles({ + flexContainer: { + flexWrap: 'wrap', + }, + itemText: { + width: '100%', + marginBottom: '1rem', + }, +}); + +export const CatalogResultListItem = ({ result }: any) => { + const classes = useStyles(); + return ( + + + + + {result.kind && ()} + {result.lifecycle && ()} + + + + + ); +}; diff --git a/plugins/catalog/src/components/CatalogResultListItem/index.ts b/plugins/catalog/src/components/CatalogResultListItem/index.ts new file mode 100644 index 0000000000..8f418c1dc7 --- /dev/null +++ b/plugins/catalog/src/components/CatalogResultListItem/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021 Spotify AB + * + * 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. + */ + +export { CatalogResultListItem } from './CatalogResultListItem'; diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts index f7506b534a..052f055dc0 100644 --- a/plugins/catalog/src/index.ts +++ b/plugins/catalog/src/index.ts @@ -15,6 +15,7 @@ */ export { AboutCard } from './components/AboutCard'; +export { CatalogResultListItem } from './components/CatalogResultListItem'; export { EntityLayout } from './components/EntityLayout'; export { EntityPageLayout } from './components/EntityPageLayout'; export { CatalogTable } from './components/CatalogTable'; diff --git a/plugins/search/package.json b/plugins/search/package.json index cc42bb05ed..c767c923db 100644 --- a/plugins/search/package.json +++ b/plugins/search/package.json @@ -41,6 +41,7 @@ "qs": "^6.9.4", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-router": "6.0.0-beta.0", "react-router-dom": "6.0.0-beta.0", "react-use": "^17.2.4" }, diff --git a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx new file mode 100644 index 0000000000..09ef325f85 --- /dev/null +++ b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx @@ -0,0 +1,35 @@ +/* + * Copyright 2021 Spotify AB + * + * 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 + * l +imitations under the License. + */ + +import React from 'react'; +import { Link } from '@backstage/core'; +import { ListItem, ListItemText, Divider } from '@material-ui/core'; + +export const DefaultResultListItem = ({ result }: any) => { + return ( + + + + + + + ); +}; diff --git a/plugins/search/src/components/DefaultResultListItem/index.ts b/plugins/search/src/components/DefaultResultListItem/index.ts new file mode 100644 index 0000000000..f195f62929 --- /dev/null +++ b/plugins/search/src/components/DefaultResultListItem/index.ts @@ -0,0 +1,18 @@ +/* + * Copyright 2021 Spotify AB + * + * 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 + * l +imitations under the License. + */ + +export { DefaultResultListItem } from './DefaultResultListItem'; diff --git a/plugins/search/src/components/SearchPageNext/SearchPageNext.tsx b/plugins/search/src/components/SearchPageNext/SearchPageNext.tsx index 691f01b2cb..e86c887f59 100644 --- a/plugins/search/src/components/SearchPageNext/SearchPageNext.tsx +++ b/plugins/search/src/components/SearchPageNext/SearchPageNext.tsx @@ -15,45 +15,13 @@ */ import React from 'react'; -import { Content, Header, Lifecycle, Page } from '@backstage/core'; -import { Grid } from '@material-ui/core'; -import { SearchBarNext } from '../SearchBarNext'; -import { SearchResultNext } from '../SearchResultNext'; +import { Outlet } from 'react-router'; import { SearchContextProvider } from '../SearchContext'; -import { SearchFiltersNext, FilterType } from '../SearchFiltersNext'; - -const defaultFilterDefinitions = [ - { - field: 'kind', - type: FilterType.SELECT, - values: ['Component', 'Template'], - }, - { - field: 'lifecycle', - type: FilterType.CHECKBOX, - values: ['experimental', 'production'], - }, -]; export const SearchPageNext = () => { return ( - -
} /> - - - - - - - - - - - - - - + ); }; diff --git a/plugins/search/src/components/SearchResultNext/SearchResultNext.tsx b/plugins/search/src/components/SearchResultNext/SearchResultNext.tsx index 53fc4ff17b..ec738e839c 100644 --- a/plugins/search/src/components/SearchResultNext/SearchResultNext.tsx +++ b/plugins/search/src/components/SearchResultNext/SearchResultNext.tsx @@ -13,44 +13,18 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { EmptyState, Link, Progress } from '@backstage/core'; -import { Divider, List, ListItem, ListItemText } from '@material-ui/core'; +import { EmptyState, Progress } from '@backstage/core'; +import { SearchResult } from '@backstage/search-common'; import { Alert } from '@material-ui/lab'; import React from 'react'; import { useSearch } from '../SearchContext'; -const DefaultResultListItem = ({ result }: any) => { - return ( - - - - - - - ); -}; +type ChildrenArguments = { + results: SearchResult[]; +} -const TechDocsResultListItem = ({ result }: any) => { - return ( - - - - - - - ); -}; - -export const SearchResultNext = () => { +export const SearchResultNext = ({ children }: { children: (results: ChildrenArguments) => JSX.Element}) => { const { result: { loading, error, value }, } = useSearch(); @@ -67,37 +41,8 @@ export const SearchResultNext = () => { } if (!value) { - return ; + return ; } - return ( - - {value.results.map(result => { - // Render different result items based on document type - switch (result.type) { - case 'software-catalog': - return ( - - ); - case 'techdocs': - return ( - - ); - default: - return ( - - ); - } - })} - - ); + return children({ results: value.results }); }; diff --git a/plugins/search/src/components/index.tsx b/plugins/search/src/components/index.tsx index aa9a443f21..597bfabfb1 100644 --- a/plugins/search/src/components/index.tsx +++ b/plugins/search/src/components/index.tsx @@ -22,5 +22,6 @@ export * from './SearchPage'; export * from './SearchPageNext'; export * from './SearchResult'; export * from './SearchResultNext'; +export * from './DefaultResultListItem'; export * from './SidebarSearch'; export * from './SearchContext'; diff --git a/plugins/search/src/index.ts b/plugins/search/src/index.ts index 367b195f9d..e5894aced4 100644 --- a/plugins/search/src/index.ts +++ b/plugins/search/src/index.ts @@ -23,11 +23,15 @@ export { SearchBarNext, SearchResultNext, SearchFiltersNext, + DefaultResultListItem, } from './plugin'; export { Filters, FiltersButton, + FilterType, SearchBar, + SearchContextProvider, + useSearch, SearchPage as Router, SearchResult, SidebarSearch, diff --git a/plugins/search/src/plugin.ts b/plugins/search/src/plugin.ts index 03322b33aa..3de59fe1d0 100644 --- a/plugins/search/src/plugin.ts +++ b/plugins/search/src/plugin.ts @@ -90,6 +90,15 @@ export const SearchResultNext = searchPlugin.provide( }), ); +export const DefaultResultListItem= searchPlugin.provide( + createComponentExtension({ + component: { + lazy: () => + import('./components/DefaultResultListItem').then(m => m.DefaultResultListItem), + }, + }), +); + export const SearchFiltersNext = searchPlugin.provide( createComponentExtension({ component: {