Skip to content

[Code] narrow search scope #35062

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 17, 2019
Merged

[Code] narrow search scope #35062

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions x-pack/plugins/code/public/actions/search.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export interface RepositorySearchPayload {

export interface SearchOptions {
repoScope: Repository[];
defaultRepoScopeOn: boolean;
}

// For document search page
Expand All @@ -44,6 +45,8 @@ export const repositoryTypeaheadSearchFailed = createAction<string>('REPOSITORY

export const saveSearchOptions = createAction<SearchOptions>('SAVE SEARCH OPTIONS');

export const turnOnDefaultRepoScope = createAction('TURN ON DEFAULT REPO SCOPE');

export const searchReposForScope = createAction<RepositorySearchPayload>('SEARCH REPOS FOR SCOPE');
export const searchReposForScopeSuccess = createAction<any>('SEARCH REPOS FOR SCOPE SUCCESS');
export const searchReposForScopeFailed = createAction<any>('SEARCH REPOS FOR SCOPE FAILED');
24 changes: 19 additions & 5 deletions x-pack/plugins/code/public/components/main/content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,20 @@ import styled from 'styled-components';
import chrome from 'ui/chrome';

import { RepositoryUtils } from '../../../common/repository_utils';
import { FileTree, FileTreeItemType, SearchScope, WorkerReservedProgress } from '../../../model';
import {
FileTree,
FileTreeItemType,
SearchScope,
WorkerReservedProgress,
Repository,
} from '../../../model';
import { CommitInfo, ReferenceInfo } from '../../../model/commit';
import { changeSearchScope, FetchFileResponse, fetchMoreCommits } from '../../actions';
import {
changeSearchScope,
FetchFileResponse,
fetchMoreCommits,
SearchOptions,
} from '../../actions';
import { MainRouteParams, PathTypes } from '../../common/types';
import { RepoState, RepoStatus, RootState } from '../../reducers';
import {
Expand Down Expand Up @@ -85,8 +96,9 @@ interface Props extends RouteComponentProps<MainRouteParams> {
hasMoreCommits: boolean;
loadingCommits: boolean;
onSearchScopeChanged: (s: SearchScope) => void;
repoScope: string[];
searchOptions: SearchOptions;
fetchMoreCommits(repoUri: string): void;
currentRepository?: Repository;
Copy link
Contributor

@mw-ding mw-ding Apr 15, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we really need to introduce a new field just for this change? Can you just issue an add repository filter action and let the general repository filters management logic to handle this case?

Copy link
Contributor

@mw-ding mw-ding Apr 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

discussed offline that we still need this field explicitly particular for the case when we move out from the current repository and enter a different repository.

}
const LANG_MD = 'markdown';

Expand Down Expand Up @@ -258,10 +270,11 @@ class CodeContent extends React.PureComponent<Props> {
return (
<Root>
<TopBar
defaultSearchScope={this.props.currentRepository}
routeParams={this.props.match.params}
onSearchScopeChanged={this.props.onSearchScopeChanged}
buttons={this.renderButtons()}
repoScope={this.props.repoScope}
searchOptions={this.props.searchOptions}
branches={this.props.branches}
/>
{this.renderContent()}
Expand Down Expand Up @@ -423,7 +436,8 @@ const mapStateToProps = (state: RootState) => ({
hasMoreCommits: hasMoreCommitsSelector(state),
loadingCommits: state.file.loadingCommits,
repoStatus: statusSelector(state, repoUriSelector(state)),
repoScope: state.search.searchOptions.repoScope.map(r => r.uri),
searchOptions: state.search.searchOptions,
currentRepository: state.repository.currentRepository,
});

const mapDispatchToProps = {
Expand Down
19 changes: 15 additions & 4 deletions x-pack/plugins/code/public/components/main/search_bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import { RouteComponentProps, withRouter } from 'react-router-dom';
import styled from 'styled-components';
import url from 'url';

import { SearchScope } from '../../../model';
import { unique } from 'lodash';
import { SearchScope, Repository } from '../../../model';
import { MainRouteParams, SearchScopeText } from '../../common/types';
import {
AutocompleteSuggestion,
Expand All @@ -20,14 +21,16 @@ import {
SymbolSuggestionsProvider,
} from '../query_bar';
import { Shortcut } from '../shortcuts';
import { SearchOptions } from '../../actions';

const SearchBarContainer = styled.div`
width: 100%;
`;

interface Props extends RouteComponentProps<MainRouteParams> {
onSearchScopeChanged: (s: SearchScope) => void;
repoScope: string[];
searchOptions: SearchOptions;
defaultSearchScope?: Repository;
}

export class CodeSearchBar extends React.Component<Props> {
Expand All @@ -51,8 +54,16 @@ export class CodeSearchBar extends React.Component<Props> {
const query: ParsedUrlQuery = {
q: queryString,
};
if (this.props.repoScope) {
query.repoScope = this.props.repoScope.join(',');
if (this.props.searchOptions.repoScope) {
// search from a repo page may have a default scope of this repo
if (this.props.searchOptions.defaultRepoScopeOn && this.props.defaultSearchScope) {
query.repoScope = unique([
...this.props.searchOptions.repoScope.map(r => r.uri),
this.props.defaultSearchScope.uri,
]).join(',');
} else {
query.repoScope = this.props.searchOptions.repoScope.map(r => r.uri).join(',');
}
}
if (this.state.searchScope === SearchScope.REPOSITORY) {
query.scope = SearchScope.REPOSITORY;
Expand Down
9 changes: 6 additions & 3 deletions x-pack/plugins/code/public/components/main/top_bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,14 @@ import { EuiFlexGroup, EuiFlexItem, EuiSelect } from '@elastic/eui';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import React, { ChangeEvent } from 'react';
import styled from 'styled-components';
import { SearchScope } from '../../../model';
import { SearchScope, Repository } from '../../../model';
import { ReferenceInfo } from '../../../model/commit';
import { MainRouteParams } from '../../common/types';
import { encodeRevisionString } from '../../utils/url';
import { history } from '../../utils/url';
import { Breadcrumb } from './breadcrumb';
import { SearchBar } from './search_bar';
import { SearchOptions } from '../../actions';

const SelectContainer = styled(EuiFlexItem)`
margin-right: ${theme.euiSizeS};
Expand All @@ -24,8 +25,9 @@ interface Props {
routeParams: MainRouteParams;
onSearchScopeChanged: (s: SearchScope) => void;
buttons: React.ReactNode;
repoScope: string[];
searchOptions: SearchOptions;
branches: ReferenceInfo[];
defaultSearchScope?: Repository;
Copy link
Contributor

@mw-ding mw-ding Apr 15, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here.

}

export class TopBar extends React.Component<Props, { value: string }> {
Expand All @@ -48,8 +50,9 @@ export class TopBar extends React.Component<Props, { value: string }> {
return (
<div className="code-top-bar__container">
<SearchBar
defaultSearchScope={this.props.defaultSearchScope}
onSearchScopeChanged={this.props.onSearchScopeChanged}
repoScope={this.props.repoScope}
searchOptions={this.props.searchOptions}
/>
<EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
<EuiFlexItem>
Expand Down
46 changes: 44 additions & 2 deletions ...plugins/code/public/components/query_bar/components/__snapshots__/query_bar.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

64 changes: 56 additions & 8 deletions x-pack/plugins/code/public/components/query_bar/components/options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
EuiText,
EuiTextColor,
EuiTitle,
EuiNotificationBadge,
} from '@elastic/eui';
import { EuiIcon } from '@elastic/eui';
import { unique } from 'lodash';
Expand All @@ -40,6 +41,7 @@ interface State {
isFlyoutOpen: boolean;
repoScope: Repository[];
query: string;
defaultRepoScopeOn: boolean;
}

interface Props {
Expand All @@ -49,30 +51,61 @@ interface Props {
searchLoading: boolean;
searchOptions: ISearchOptions;
defaultRepoOptions: Repository[];
defaultSearchScope?: Repository;
}

export class SearchOptions extends Component<Props, State> {
public state: State = {
query: '',
isFlyoutOpen: false,
repoScope: this.props.searchOptions.repoScope,
defaultRepoScopeOn: this.props.searchOptions.defaultRepoScopeOn,
};

componentDidUpdate(prevProps: Props) {
if (
this.props.searchOptions.defaultRepoScopeOn &&
!prevProps.searchOptions.defaultRepoScopeOn
) {
this.setState({ defaultRepoScopeOn: this.props.searchOptions.defaultRepoScopeOn });
}
}

public applyAndClose = () => {
this.props.saveSearchOptions({ repoScope: this.state.repoScope });
if (this.state.defaultRepoScopeOn && this.props.defaultSearchScope) {
this.props.saveSearchOptions({
repoScope: unique([...this.state.repoScope, this.props.defaultSearchScope], r => r.uri),
defaultRepoScopeOn: this.state.defaultRepoScopeOn,
});
} else {
this.props.saveSearchOptions({
repoScope: this.state.repoScope,
defaultRepoScopeOn: this.state.defaultRepoScopeOn,
});
}
this.setState({ isFlyoutOpen: false });
};

public removeRepoScope = (r: string) => () => {
this.setState(prevState => ({
repoScope: prevState.repoScope.filter(rs => rs.uri !== r),
}));
this.setState(prevState => {
const nextState: any = {
repoScope: prevState.repoScope.filter(rs => rs.uri !== r),
};
if (this.props.defaultSearchScope && r === this.props.defaultSearchScope.uri) {
nextState.defaultRepoScopeOn = false;
}
return nextState;
});
};

public render() {
let optionsFlyout;
const repoScope =
this.state.defaultRepoScopeOn && this.props.defaultSearchScope
? unique([...this.state.repoScope, this.props.defaultSearchScope], r => r.uri)
: this.state.repoScope;
if (this.state.isFlyoutOpen) {
const selectedRepos = this.state.repoScope.map(r => {
const selectedRepos = repoScope.map(r => {
return (
<div key={r.uri}>
<EuiPanel paddingSize="s">
Expand Down Expand Up @@ -100,7 +133,15 @@ export class SearchOptions extends Component<Props, State> {
>
<EuiFlyoutHeader>
<EuiTitle size="s">
<h2 id="flyoutSmallTitle"> Search Settings </h2>
<h2 id="flyoutSmallTitle" className="">
<EuiNotificationBadge size="m" className="code-notification-badge">
{repoScope.length}
</EuiNotificationBadge>
<EuiTextColor color="secondary" className="code-flyout-title">
{' '}
Search Filters{' '}
</EuiTextColor>
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
Expand Down Expand Up @@ -144,7 +185,10 @@ export class SearchOptions extends Component<Props, State> {
<div>
<div className="kuiLocalSearchAssistedInput__assistance">
<EuiButtonEmpty size="xs" onClick={this.toggleOptionsFlyout}>
Options
<EuiNotificationBadge size="m" className="code-notification-badge">
{repoScope.length}
</EuiNotificationBadge>
<EuiTextColor color="secondary"> Search Filters </EuiTextColor>
</EuiButtonEmpty>
</div>
{optionsFlyout}
Expand All @@ -155,7 +199,9 @@ export class SearchOptions extends Component<Props, State> {
private onRepoSearchChange = (searchValue: string) => {
this.setState({ query: searchValue });
if (searchValue) {
this.props.repositorySearch({ query: searchValue });
this.props.repositorySearch({
query: searchValue,
});
}
};

Expand All @@ -181,6 +227,8 @@ export class SearchOptions extends Component<Props, State> {
private closeOptionsFlyout = () => {
this.setState({
isFlyoutOpen: false,
repoScope: this.props.searchOptions.repoScope,
defaultRepoScopeOn: this.props.searchOptions.defaultRepoScopeOn,
});
};
}
4 changes: 2 additions & 2 deletions x-pack/plugins/code/public/components/query_bar/components/query_bar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ test('render correctly with empty query string', () => {
saveSearchOptions={emptyFn}
repoSearchResults={[]}
searchLoading={false}
searchOptions={{ repoScope: [] }}
searchOptions={{ repoScope: [], defaultRepoScopeOn: false }}
query=""
disableAutoFocus={false}
appName="mockapp"
Expand Down Expand Up @@ -87,7 +87,7 @@ test('render correctly with input query string changed', done => {
saveSearchOptions={emptyFn}
repoSearchResults={[]}
searchLoading={false}
searchOptions={{ repoScope: [] }}
searchOptions={{ repoScope: [], defaultRepoScopeOn: false }}
query="mockquery"
disableAutoFocus={false}
appName="mockapp"
Expand Down
Loading