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

Merge pull request #5786 from backstage/mob/search-fe

Browse Source 
[Search] V1 Frontend
This commit is contained in:
Eric Peterson
2021-06-04 15:08:38 +02:00
committed by GitHub
parent cfc221bb75 abd53e76a0
commit 3846822b32
42 changed files with 2167 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/cypress/integration/components/search/SearchPage.js
+121
View File
@@ -0,0 +1,121 @@
/*
* 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.
*/
const API_ENDPOINT = 'http://localhost:7000/api/search/query';
describe('SearchPage', () => {
describe('Given a search context with a term, results, and filter values', () => {
it('The results are rendered as expected', () => {
const results = [
{
type: 'software-catalog',
document: {
title: 'backstage',
text: 'Backstage system documentation',
location: '/result/location/path',
},
},
];
cy.enterAsGuest();
cy.visit('/search-next', {
onBeforeLoad(win) {
cy.stub(win, 'fetch')
.withArgs(`${API_ENDPOINT}?term=&pageCursor=`)
.resolves({
ok: true,
json: () => ({ results }),
});
},
});
cy.contains('Search');
cy.contains(results[0].document.title);
cy.contains(results[0].document.text);
cy.get(`a[href="${results[0].document.location}"]`).should('be.visible');
});
it('The filters are rendered as expected', () => {
cy.enterAsGuest();
cy.visit(
'/search-next?filters%5Bkind%5D=Component&filters%5Blifecycle%5D%5B%5D=experimental',
{
onBeforeLoad(win) {
cy.stub(win, 'fetch')
.withArgs(
`${API_ENDPOINT}?term=&filters%5Bkind%5D=Component&filters%5Blifecycle%5D%5B0%5D=experimental&pageCursor=`,
)
.resolves({
ok: true,
json: () => ({ results: [] }),
});
},
},
);
cy.contains('Search');
// lifecycle
cy.contains('lifecycle');
cy.contains('experimental');
cy.get(
'[data-testid="search-checkboxfilter-next"] input[value="experimental"]',
).should('have.attr', 'checked');
cy.contains('production');
cy.get(
'[data-testid="search-checkboxfilter-next"] input[value="production"]',
).should('not.have.attr', 'checked');
// kind
cy.contains('kind');
cy.get(
'[data-testid="search-selectfilter-next"] [role="button"][aria-haspopup="listbox"]',
).click();
cy.contains('All');
cy.contains('Template');
cy.contains('Component');
cy.get('[role="option"][data-value="Component"]').should(
'have.attr',
'aria-selected',
'true',
);
});
it('The search bar is rendered as expected', () => {
cy.enterAsGuest();
cy.visit('/search-next?query=backstage', {
onBeforeLoad(win) {
cy.stub(win, 'fetch')
.withArgs(`${API_ENDPOINT}?term=backstage&pageCursor=`)
.resolves({
ok: true,
json: () => ({ results: [] }),
});
},
});
cy.contains('Search');
cy.get('[data-testid="search-bar-next"] input').should(
'have.attr',
'value',
'backstage',
);
});
});
});
packages/app/cypress/support/commands.js
+19
View File
@@ -0,0 +1,19 @@
/*
* 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.
*/
Cypress.Commands.add('enterAsGuest', () => {
cy.visit('/');
cy.get('button').contains('Enter').click();
});
packages/app/cypress/support/index.js
+1
View File
@@ -14,3 +14,4 @@
* limitations under the License.
*/
import '@testing-library/cypress/add-commands';
import './commands';
packages/app/src/App.tsx
+4 -4
View File
@@ -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';
@@ -119,10 +120,9 @@ const routes = (
<Route path="/gcp-projects" element={<GcpProjectsPage />} />
<Route path="/newrelic" element={<NewRelicPage />} />
<Route path="/search" element={<SearchPage />} />
<Route
path="/search-next"
element={<SearchPageNext /* TODO: illustrate customization */ />}
/>
<Route path="/search-next" element={<SearchPageNext />}>
{searchPage}
</Route>
<Route path="/cost-insights" element={<CostInsightsPage />} />
<Route
path="/cost-insights/investigating-growth"
packages/app/src/components/search/SearchPage.tsx
+102
View File
@@ -0,0 +1,102 @@
/*
* 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.
*/
import React from 'react';
import { makeStyles, Theme, Grid, List, Paper } from '@material-ui/core';
import { Content, Header, Lifecycle, Page } from '@backstage/core';
import { CatalogResultListItem } from '@backstage/plugin-catalog';
import {
SearchBarNext as SearchBar,
SearchFilterNext as SearchFilter,
SearchResultNext as SearchResult,
DefaultResultListItem,
} from '@backstage/plugin-search';
const useStyles = makeStyles((theme: Theme) => ({
bar: {
padding: theme.spacing(1, 0),
},
filters: {
padding: theme.spacing(2),
},
filter: {
'& + &': {
marginTop: theme.spacing(2.5),
},
},
}));
const SearchPage = () => {
const classes = useStyles();
return (
<Page themeId="home">
<Header title="Search" subtitle={<Lifecycle alpha />} />
<Content>
<Grid container direction="row">
<Grid item xs={12}>
<Paper className={classes.bar}>
<SearchBar debounceTime={100} />
</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.filters}>
<SearchFilter.Select
className={classes.filter}
name="kind"
values={['Component', 'Template']}
/>
<SearchFilter.Checkbox
className={classes.filter}
name="lifecycle"
values={['experimental', 'production']}
/>
</Paper>
</Grid>
<Grid item xs={9}>
<SearchResult>
{({ results }) => (
<List>
{results.map(({ type, document }) => {
switch (type) {
case 'software-catalog':
return (
<CatalogResultListItem
key={document.location}
result={document}
/>
);
default:
return (
<DefaultResultListItem
key={document.location}
result={document}
/>
);
}
})}
</List>
)}
</SearchResult>
</Grid>
</Grid>
</Content>
</Page>
);
};
export const searchPage = <SearchPage />;
packages/backend/src/plugins/search.ts
-1
View File
@@ -30,7 +30,6 @@ export default async function createPlugin({
const indexBuilder = new IndexBuilder({ logger, searchEngine });
indexBuilder.addCollator({
type: 'software-catalog',
defaultRefreshIntervalSeconds: 600,
collator: new DefaultCatalogCollator({ discovery }),
});
packages/search-common/api-report.md
+4
View File
@@ -10,12 +10,14 @@ import { JsonObject } from '@backstage/config';
export interface DocumentCollator {
// (undocumented)
execute(): Promise<IndexableDocument[]>;
readonly type: string;
}
// @public
export interface DocumentDecorator {
// (undocumented)
execute(documents: IndexableDocument[]): Promise<IndexableDocument[]>;
readonly types?: string[];
}
// @public
@@ -41,6 +43,8 @@ export interface SearchQuery {
export interface SearchResult {
// (undocumented)
document: IndexableDocument;
// (undocumented)
type: string;
}
// @public (undocumented)
packages/search-common/src/types.ts
+12
View File
@@ -23,6 +23,7 @@ export interface SearchQuery {
}
export interface SearchResult {
type: string;
document: IndexableDocument;
}
@@ -57,6 +58,11 @@ export interface IndexableDocument {
* search.
*/
export interface DocumentCollator {
/**
* The type or name of the document set returned by this collator. Used as an
* index name by Search Engines.
*/
readonly type: string;
execute(): Promise<IndexableDocument[]>;
}
@@ -65,5 +71,11 @@ export interface DocumentCollator {
* additional metadata.
*/
export interface DocumentDecorator {
/**
* An optional array of document/index types on which this decorator should
* be applied. If no types are provided, this decorator will be applied to
* all document/index types.
*/
readonly types?: string[];
execute(documents: IndexableDocument[]): Promise<IndexableDocument[]>;
}