paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 42 Packages Projects Releases Wiki Activity

feat(search): use extensions on search pages and modals

Browse Source 
Signed-off-by: Camila Belo <camilaibs@gmail.com>
This commit is contained in:
Camila Belo
2023-01-22 19:42:58 +01:00
parent 2f91e1684e
commit 5f16dddc96
4 changed files with 24 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/search/SearchModal.tsx
+12 -70
View File
@@ -21,7 +21,6 @@ import {
DialogContent,
DialogTitle,
Grid,
List,
makeStyles,
Paper,
useTheme,
@@ -44,9 +43,8 @@ import {
import { ToolSearchResultListItem } from '@backstage/plugin-explore';
import { searchPlugin, SearchType } from '@backstage/plugin-search';
import {
DefaultResultListItem,
SearchFilter,
SearchBar,
SearchFilter,
SearchResult,
SearchResultPager,
useSearch,
@@ -93,7 +91,7 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
searchBarRef?.current?.focus();
});
const handleSearchResulClick = useCallback(() => {
const handleSearchResultClick = useCallback(() => {
toggleModal();
setTimeout(focusContent, transitions.duration.leavingScreen);
}, [toggleModal, focusContent, transitions]);
@@ -101,11 +99,11 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
const handleSearchBarKeyDown = useCallback(
(e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
if (e.key === 'Enter') {
handleSearchResultClick();
navigate(searchPagePath);
toggleModal();
}
},
[navigate, toggleModal, searchPagePath],
[navigate, searchPagePath, handleSearchResultClick],
);
return (
@@ -189,7 +187,7 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
alignItems="center"
>
<Grid item>
<Link to={searchPagePath} onClick={handleSearchResulClick}>
<Link to={searchPagePath} onClick={handleSearchResultClick}>
<Typography
component="span"
className={classes.viewResultsLink}
@@ -202,69 +200,13 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
</Grid>
</Grid>
<Grid item xs>
<SearchResult>
{({ results }) => (
<List>
{results.map(({ type, document, highlight, rank }) => {
let resultItem;
switch (type) {
case 'software-catalog':
resultItem = (
<CatalogSearchResultListItem
icon={<CatalogIcon />}
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
break;
case 'techdocs':
resultItem = (
<TechDocsSearchResultListItem
icon={<DocsIcon />}
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
break;
case 'tools':
resultItem = (
<ToolSearchResultListItem
icon={<BuildIcon />}
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
break;
default:
resultItem = (
<DefaultResultListItem
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
}
return (
<div
role="button"
tabIndex={0}
key={`${document.location}-btn`}
onClick={handleSearchResulClick}
onKeyDown={handleSearchResulClick}
>
{resultItem}
</div>
);
})}
</List>
)}
<SearchResult
onClick={handleSearchResultClick}
onKeyDown={handleSearchResultClick}
>
<CatalogSearchResultListItem icon={<CatalogIcon />} />
<TechDocsSearchResultListItem icon={<DocsIcon />} />
<ToolSearchResultListItem icon={<BuildIcon />} />
</SearchResult>
</Grid>
</Grid>
packages/app/src/components/search/SearchPage.tsx
+5 -50
View File
@@ -30,16 +30,15 @@ import {
} from '@backstage/plugin-catalog-react';
import { SearchType } from '@backstage/plugin-search';
import {
DefaultResultListItem,
SearchBar,
SearchFilter,
SearchResult,
SearchPagination,
SearchResult,
SearchResultPager,
useSearch,
} from '@backstage/plugin-search-react';
import { TechDocsSearchResultListItem } from '@backstage/plugin-techdocs';
import { Grid, List, makeStyles, Paper, Theme } from '@material-ui/core';
import { Grid, makeStyles, Paper, Theme } from '@material-ui/core';
import React from 'react';
import { ToolSearchResultListItem } from '@backstage/plugin-explore';
import BuildIcon from '@material-ui/icons/Build';
@@ -133,53 +132,9 @@ const SearchPage = () => {
<Grid item xs>
<SearchPagination />
<SearchResult>
{({ results }) => (
<List>
{results.map(({ type, document, highlight, rank }) => {
switch (type) {
case 'software-catalog':
return (
<CatalogSearchResultListItem
icon={<CatalogIcon />}
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
case 'techdocs':
return (
<TechDocsSearchResultListItem
icon={<DocsIcon />}
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
case 'tools':
return (
<ToolSearchResultListItem
icon={<BuildIcon />}
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
default:
return (
<DefaultResultListItem
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
}
})}
</List>
)}
<CatalogSearchResultListItem icon={<CatalogIcon />} />
<TechDocsSearchResultListItem icon={<DocsIcon />} />
<ToolSearchResultListItem icon={<BuildIcon />} />
</SearchResult>
<SearchResultPager />
</Grid>
packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
+3 -37
View File
@@ -1,5 +1,5 @@
import React from 'react';
import { makeStyles, Theme, Grid, List, Paper } from '@material-ui/core';
import { makeStyles, Theme, Grid, Paper } from '@material-ui/core';
import { CatalogSearchResultListItem } from '@backstage/plugin-catalog';
import {
@@ -10,7 +10,6 @@ import { TechDocsSearchResultListItem } from '@backstage/plugin-techdocs';
import { SearchType } from '@backstage/plugin-search';
import {
DefaultResultListItem,
SearchBar,
SearchFilter,
SearchResult,
@@ -112,41 +111,8 @@ const SearchPage = () => {
<Grid item xs={9}>
<SearchPagination />
<SearchResult>
{({ results }) => (
<List>
{results.map(({ type, document, highlight, rank }) => {
switch (type) {
case 'software-catalog':
return (
<CatalogSearchResultListItem
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
case 'techdocs':
return (
<TechDocsSearchResultListItem
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
default:
return (
<DefaultResultListItem
key={document.location}
result={document}
highlight={highlight}
rank={rank}
/>
);
}
})}
</List>
)}
<CatalogSearchResultListItem icon={<CatalogIcon />} />
<TechDocsSearchResultListItem icon={<DocsIcon />} />
</SearchResult>
</Grid>
</Grid>
plugins/search/src/components/SearchModal/SearchModal.tsx
+4 -23
View File
@@ -23,7 +23,6 @@ import {
DialogTitle,
Divider,
Grid,
List,
Paper,
useTheme,
} from '@material-ui/core';
@@ -31,7 +30,6 @@ import Typography from '@material-ui/core/Typography';
import LaunchIcon from '@material-ui/icons/Launch';
import { makeStyles } from '@material-ui/core/styles';
import {
DefaultResultListItem,
SearchContextProvider,
SearchBar,
SearchResult,
@@ -151,27 +149,10 @@ export const Modal = ({ toggleModal }: SearchModalProps) => {
</Grid>
</Grid>
<Divider />
<SearchResult>
{({ results }) => (
<List>
{results.map(({ document, highlight }) => (
<div
role="button"
tabIndex={0}
key={`${document.location}-btn`}
onClick={handleSearchResultClick}
onKeyDown={handleSearchResultClick}
>
<DefaultResultListItem
key={document.location}
result={document}
highlight={highlight}
/>
</div>
))}
</List>
)}
</SearchResult>
<SearchResult
onClick={handleSearchResultClick}
onKeyDown={handleSearchResultClick}
/>
</DialogContent>
<DialogActions className={classes.dialogActionsContainer}>
<Grid container direction="row">