[ARVADOS-WORKBENCH2] updated: 1.2.0-546-gdd8c26f
Git user
git at public.curoverse.com
Fri Oct 5 10:27:45 EDT 2018
Summary of changes:
src/store/search-bar/search-bar-actions.ts | 15 ++++
src/store/search-bar/search-bar-reducer.ts | 29 +++++++
src/store/store.ts | 4 +-
.../structured-search/structured-search-actions.ts | 13 ---
.../structured-search/structured-search-reducer.ts | 25 ------
src/views-components/main-app-bar/main-app-bar.tsx | 3 +-
.../search-bar/search-bar-advanced-view.tsx | 4 +-
.../search-bar/search-bar-autocomplete-view.tsx | 4 +-
.../search-bar/search-bar-basic-view.tsx | 4 +-
.../search-bar/search-bar-view.test.tsx} | 18 ++---
.../search-bar/search-bar-view.tsx} | 92 +++++++++-------------
src/views-components/search-bar/search-bar.tsx | 24 ++++++
12 files changed, 124 insertions(+), 111 deletions(-)
create mode 100644 src/store/search-bar/search-bar-actions.ts
create mode 100644 src/store/search-bar/search-bar-reducer.ts
delete mode 100644 src/store/structured-search/structured-search-actions.ts
delete mode 100644 src/store/structured-search/structured-search-reducer.ts
rename src/{components => views-components}/search-bar/search-bar-advanced-view.tsx (84%)
rename src/{components => views-components}/search-bar/search-bar-autocomplete-view.tsx (85%)
rename src/{components => views-components}/search-bar/search-bar-basic-view.tsx (91%)
rename src/{components/search-bar/search-bar.test.tsx => views-components/search-bar/search-bar-view.test.tsx} (81%)
rename src/{components/search-bar/search-bar.tsx => views-components/search-bar/search-bar-view.tsx} (60%)
create mode 100644 src/views-components/search-bar/search-bar.tsx
via dd8c26f9525bf0a8733314d5717e99f231cc90d1 (commit)
from ecd6a0dd67715292ce1f7dfce81ba1345f3ecbd3 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit dd8c26f9525bf0a8733314d5717e99f231cc90d1
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date: Fri Oct 5 16:27:32 2018 +0200
search-basic-view
Feature #14275
Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
diff --git a/src/store/search-bar/search-bar-actions.ts b/src/store/search-bar/search-bar-actions.ts
new file mode 100644
index 0000000..1e1810e
--- /dev/null
+++ b/src/store/search-bar/search-bar-actions.ts
@@ -0,0 +1,15 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { unionize, ofType, UnionOf } from "~/common/unionize";
+
+export const searchBarActions = unionize({
+ SET_CURRENT_VIEW: ofType<string>(),
+ OPEN_SEARCH_VIEW: ofType<{}>(),
+ CLOSE_SEARCH_VIEW: ofType<{}>()
+});
+
+export type SearchBarActions = UnionOf<typeof searchBarActions>;
+
+export const goToView = (currentView: string) => searchBarActions.SET_CURRENT_VIEW(currentView);
\ No newline at end of file
diff --git a/src/store/search-bar/search-bar-reducer.ts b/src/store/search-bar/search-bar-reducer.ts
new file mode 100644
index 0000000..97e22d7
--- /dev/null
+++ b/src/store/search-bar/search-bar-reducer.ts
@@ -0,0 +1,29 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { searchBarActions, SearchBarActions } from '~/store/search-bar/search-bar-actions';
+
+interface SearchBar {
+ currentView: string;
+ open: boolean;
+}
+
+export enum SearchView {
+ BASIC = 'basic',
+ ADVANCED = 'advanced',
+ AUTOCOMPLETE = 'autocomplete'
+}
+
+const initialState: SearchBar = {
+ currentView: SearchView.BASIC,
+ open: false
+};
+
+export const searchBarReducer = (state = initialState, action: SearchBarActions): SearchBar =>
+ searchBarActions.match(action, {
+ SET_CURRENT_VIEW: currentView => ({ ...state, currentView }),
+ OPEN_SEARCH_VIEW: () => ({ ...state, open: true }),
+ CLOSE_SEARCH_VIEW: () => ({ ...state, open: false }),
+ default: () => state
+ });
\ No newline at end of file
diff --git a/src/store/store.ts b/src/store/store.ts
index 48c03db..8e75366 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -39,7 +39,7 @@ import { runProcessPanelReducer } from '~/store/run-process-panel/run-process-pa
import { WorkflowMiddlewareService } from './workflow-panel/workflow-middleware-service';
import { WORKFLOW_PANEL_ID } from './workflow-panel/workflow-panel-actions';
import { fileTreePickerReducer } from './file-tree-picker/file-tree-picker-reducer';
-import { structuredSearchReducer } from './structured-search/structured-search-reducer';
+import { searchBarReducer } from './search-bar/search-bar-reducer';
const composeEnhancers =
(process.env.NODE_ENV === 'development' &&
@@ -103,5 +103,5 @@ const createRootReducer = (services: ServiceRepository) => combineReducers({
progressIndicator: progressIndicatorReducer,
fileTreePicker: fileTreePickerReducer,
runProcessPanel: runProcessPanelReducer,
- structuredSearch: structuredSearchReducer
+ searchBar: searchBarReducer
});
diff --git a/src/store/structured-search/structured-search-actions.ts b/src/store/structured-search/structured-search-actions.ts
deleted file mode 100644
index 0f3efd9..0000000
--- a/src/store/structured-search/structured-search-actions.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import { unionize, ofType, UnionOf } from "~/common/unionize";
-
-export const structuredSearchActions = unionize({
- SET_CURRENT_VIEW: ofType<string>()
-});
-
-export type StructuredSearchActions = UnionOf<typeof structuredSearchActions>;
-
-export const goToView = (currentView: string) => structuredSearchActions.SET_CURRENT_VIEW(currentView);
\ No newline at end of file
diff --git a/src/store/structured-search/structured-search-reducer.ts b/src/store/structured-search/structured-search-reducer.ts
deleted file mode 100644
index 8633c15..0000000
--- a/src/store/structured-search/structured-search-reducer.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import { structuredSearchActions, StructuredSearchActions } from '~/store/structured-search/structured-search-actions';
-
-interface StructuredSearch {
- currentView: string;
-}
-
-export enum SearchView {
- BASIC = 'basic',
- ADVANCED = 'advanced',
- AUTOCOMPLETE = 'autocomplete'
-}
-
-const initialState: StructuredSearch = {
- currentView: SearchView.BASIC
-};
-
-export const structuredSearchReducer = (state = initialState, action: StructuredSearchActions): StructuredSearch =>
- structuredSearchActions.match(action, {
- SET_CURRENT_VIEW: currentView => ({... state, currentView}),
- default: () => state
- });
\ No newline at end of file
diff --git a/src/views-components/main-app-bar/main-app-bar.tsx b/src/views-components/main-app-bar/main-app-bar.tsx
index 1072a56..ba01f55 100644
--- a/src/views-components/main-app-bar/main-app-bar.tsx
+++ b/src/views-components/main-app-bar/main-app-bar.tsx
@@ -7,11 +7,10 @@ import { AppBar, Toolbar, Typography, Grid } from "@material-ui/core";
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
import { Link } from "react-router-dom";
import { User } from "~/models/user";
-import { SearchBar } from "~/components/search-bar/search-bar";
+import { SearchBar } from "~/views-components/search-bar/search-bar";
import { Routes } from '~/routes/routes';
import { NotificationsMenu } from "~/views-components/main-app-bar/notifications-menu";
import { AccountMenu } from "~/views-components/main-app-bar/account-menu";
-import { AnonymousMenu } from "~/views-components/main-app-bar/anonymous-menu";
import { HelpMenu } from './help-menu';
import { ReactNode } from "react";
diff --git a/src/components/search-bar/search-bar-advanced-view.tsx b/src/views-components/search-bar/search-bar-advanced-view.tsx
similarity index 84%
rename from src/components/search-bar/search-bar-advanced-view.tsx
rename to src/views-components/search-bar/search-bar-advanced-view.tsx
index e9bd743..2ed8f06 100644
--- a/src/components/search-bar/search-bar-advanced-view.tsx
+++ b/src/views-components/search-bar/search-bar-advanced-view.tsx
@@ -4,8 +4,8 @@
import * as React from 'react';
import { Paper, StyleRulesCallback, withStyles, WithStyles, List, Button } from '@material-ui/core';
-import { SearchView } from '~/store/structured-search/structured-search-reducer';
-import { renderRecentQueries } from '~/components/search-bar/search-bar';
+import { SearchView } from '~/store/search-bar/search-bar-reducer';
+import { renderRecentQueries } from '~/views-components/search-bar/search-bar-view';
type CssRules = 'list';
diff --git a/src/components/search-bar/search-bar-autocomplete-view.tsx b/src/views-components/search-bar/search-bar-autocomplete-view.tsx
similarity index 85%
rename from src/components/search-bar/search-bar-autocomplete-view.tsx
rename to src/views-components/search-bar/search-bar-autocomplete-view.tsx
index 5aadd0a..29db23a 100644
--- a/src/components/search-bar/search-bar-autocomplete-view.tsx
+++ b/src/views-components/search-bar/search-bar-autocomplete-view.tsx
@@ -3,8 +3,8 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Paper, StyleRulesCallback, withStyles, WithStyles, List, Button } from '@material-ui/core';
-import { renderRecentQueries } from '~/components/search-bar/search-bar';
+import { Paper, StyleRulesCallback, withStyles, WithStyles, List } from '@material-ui/core';
+import { renderRecentQueries } from '~/views-components/search-bar/search-bar-view';
type CssRules = 'list';
diff --git a/src/components/search-bar/search-bar-basic-view.tsx b/src/views-components/search-bar/search-bar-basic-view.tsx
similarity index 91%
rename from src/components/search-bar/search-bar-basic-view.tsx
rename to src/views-components/search-bar/search-bar-basic-view.tsx
index ac630b5..d6cff7a 100644
--- a/src/components/search-bar/search-bar-basic-view.tsx
+++ b/src/views-components/search-bar/search-bar-basic-view.tsx
@@ -4,8 +4,8 @@
import * as React from 'react';
import { Paper, StyleRulesCallback, withStyles, WithStyles, List } from '@material-ui/core';
-import { SearchView } from '~/store/structured-search/structured-search-reducer';
-import { renderRecentQueries, renderSavedQueries } from '~/components/search-bar/search-bar';
+import { SearchView } from '~/store/search-bar/search-bar-reducer';
+import { renderRecentQueries, renderSavedQueries } from '~/views-components/search-bar/search-bar-view';
type CssRules = 'advanced' | 'searchQueryList' | 'list' | 'searchView';
diff --git a/src/components/search-bar/search-bar.test.tsx b/src/views-components/search-bar/search-bar-view.test.tsx
similarity index 81%
rename from src/components/search-bar/search-bar.test.tsx
rename to src/views-components/search-bar/search-bar-view.test.tsx
index 07b5ebf..7ec90ee 100644
--- a/src/components/search-bar/search-bar.test.tsx
+++ b/src/views-components/search-bar/search-bar-view.test.tsx
@@ -4,7 +4,7 @@
import * as React from "react";
import { mount, configure } from "enzyme";
-import { SearchBar, DEFAULT_SEARCH_DEBOUNCE } from "./search-bar";
+import { SearchBarView, DEFAULT_SEARCH_DEBOUNCE } from "./search-bar-view";
import * as Adapter from 'enzyme-adapter-react-16';
@@ -22,20 +22,20 @@ describe("<SearchBar />", () => {
describe("on submit", () => {
it("calls onSearch with initial value passed via props", () => {
- const searchBar = mount(<SearchBar value="initial value" onSearch={onSearch} />);
+ const searchBar = mount(<SearchBarView value="initial value" onSearch={onSearch} />);
searchBar.find("form").simulate("submit");
expect(onSearch).toBeCalledWith("initial value");
});
it("calls onSearch with current value", () => {
- const searchBar = mount(<SearchBar value="" onSearch={onSearch} />);
+ const searchBar = mount(<SearchBarView value="" onSearch={onSearch} />);
searchBar.find("input").simulate("change", { target: { value: "current value" } });
searchBar.find("form").simulate("submit");
expect(onSearch).toBeCalledWith("current value");
});
it("calls onSearch with new value passed via props", () => {
- const searchBar = mount(<SearchBar value="" onSearch={onSearch} />);
+ const searchBar = mount(<SearchBarView value="" onSearch={onSearch} />);
searchBar.find("input").simulate("change", { target: { value: "current value" } });
searchBar.setProps({value: "new value"});
searchBar.find("form").simulate("submit");
@@ -43,7 +43,7 @@ describe("<SearchBar />", () => {
});
it("cancels timeout set on input value change", () => {
- const searchBar = mount(<SearchBar value="" onSearch={onSearch} debounce={1000} />);
+ const searchBar = mount(<SearchBarView value="" onSearch={onSearch} debounce={1000} />);
searchBar.find("input").simulate("change", { target: { value: "current value" } });
searchBar.find("form").simulate("submit");
jest.advanceTimersByTime(1000);
@@ -55,7 +55,7 @@ describe("<SearchBar />", () => {
describe("on input value change", () => {
it("calls onSearch after default timeout", () => {
- const searchBar = mount(<SearchBar value="" onSearch={onSearch} />);
+ const searchBar = mount(<SearchBarView value="" onSearch={onSearch} />);
searchBar.find("input").simulate("change", { target: { value: "current value" } });
expect(onSearch).not.toBeCalled();
jest.advanceTimersByTime(DEFAULT_SEARCH_DEBOUNCE);
@@ -63,7 +63,7 @@ describe("<SearchBar />", () => {
});
it("calls onSearch after the time specified in props has passed", () => {
- const searchBar = mount(<SearchBar value="" onSearch={onSearch} debounce={2000}/>);
+ const searchBar = mount(<SearchBarView value="" onSearch={onSearch} debounce={2000}/>);
searchBar.find("input").simulate("change", { target: { value: "current value" } });
jest.advanceTimersByTime(1000);
expect(onSearch).not.toBeCalled();
@@ -72,7 +72,7 @@ describe("<SearchBar />", () => {
});
it("calls onSearch only once after no change happened during the specified time", () => {
- const searchBar = mount(<SearchBar value="" onSearch={onSearch} debounce={1000}/>);
+ const searchBar = mount(<SearchBarView value="" onSearch={onSearch} debounce={1000}/>);
searchBar.find("input").simulate("change", { target: { value: "current value" } });
jest.advanceTimersByTime(500);
searchBar.find("input").simulate("change", { target: { value: "changed value" } });
@@ -81,7 +81,7 @@ describe("<SearchBar />", () => {
});
it("calls onSearch again after the specified time has passed since previous call", () => {
- const searchBar = mount(<SearchBar value="" onSearch={onSearch} debounce={1000}/>);
+ const searchBar = mount(<SearchBarView value="" onSearch={onSearch} debounce={1000}/>);
searchBar.find("input").simulate("change", { target: { value: "current value" } });
jest.advanceTimersByTime(500);
searchBar.find("input").simulate("change", { target: { value: "intermediate value" } });
diff --git a/src/components/search-bar/search-bar.tsx b/src/views-components/search-bar/search-bar-view.tsx
similarity index 60%
rename from src/components/search-bar/search-bar.tsx
rename to src/views-components/search-bar/search-bar-view.tsx
index faa7b53..385c4fa 100644
--- a/src/components/search-bar/search-bar.tsx
+++ b/src/views-components/search-bar/search-bar-view.tsx
@@ -11,18 +11,15 @@ import {
WithStyles,
Tooltip,
InputAdornment, Input,
- ListItem, ListItemText, ListItemSecondaryAction
+ ListItem, ListItemText, ListItemSecondaryAction,
+ ClickAwayListener
} from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
import { RemoveIcon } from '~/components/icon/icon';
-import { connect } from 'react-redux';
-import { RootState } from '~/store/store';
-import { Dispatch } from 'redux';
-import { goToView } from '~/store/structured-search/structured-search-actions';
-import { SearchView } from '~/store/structured-search/structured-search-reducer';
-import { SearchBarBasicView } from '~/components/search-bar/search-bar-basic-view';
-import { SearchBarAdvancedView } from '~/components/search-bar/search-bar-advanced-view';
-import { SearchBarAutocompleteView } from '~/components/search-bar/search-bar-autocomplete-view';
+import { SearchView } from '~/store/search-bar/search-bar-reducer';
+import { SearchBarBasicView } from '~/views-components/search-bar/search-bar-basic-view';
+import { SearchBarAdvancedView } from '~/views-components/search-bar/search-bar-advanced-view';
+import { SearchBarAutocompleteView } from '~/views-components/search-bar/search-bar-autocomplete-view';
type CssRules = 'container' | 'input' | 'searchBar';
@@ -46,19 +43,21 @@ const styles: StyleRulesCallback<CssRules> = theme => {
interface SearchBarDataProps {
value: string;
currentView: string;
+ open: boolean;
}
interface SearchBarActionProps {
onSearch: (value: string) => any;
debounce?: number;
onSetView: (currentView: string) => void;
+ openView: () => void;
+ closeView: () => void;
}
type SearchBarProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>;
interface SearchBarState {
value: string;
- isSearchViewOpen: boolean;
}
export const renderRecentQueries = (text: string) => {
@@ -81,54 +80,42 @@ export const renderSavedQueries = (text: string) => {
</ListItem>;
};
-const mapStateToProps = ({ structuredSearch }: RootState) => {
- return {
- currentView: structuredSearch.currentView
- };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
- onSetView: (currentView: string) => {
- dispatch<any>(goToView(currentView));
- }
-});
-
export const DEFAULT_SEARCH_DEBOUNCE = 1000;
-export const SearchBar = connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(
+export const SearchBarView = withStyles(styles)(
class extends React.Component<SearchBarProps> {
state: SearchBarState = {
- value: "",
- isSearchViewOpen: false
+ value: ""
};
timeout: number;
render() {
- const { classes, currentView } = this.props;
- return <Paper className={classes.container} >
- <form onSubmit={this.handleSubmit} className={classes.searchBar}>
- <Input
- autoComplete={''}
- className={classes.input}
- onChange={this.handleChange}
- placeholder="Search"
- value={this.state.value}
- fullWidth={true}
- disableUnderline={true}
- onClick={this.toggleSearchView}
- endAdornment={
- <InputAdornment position="end">
- <Tooltip title='Search'>
- <IconButton>
- <SearchIcon />
- </IconButton>
- </Tooltip>
- </InputAdornment>
- } />
- {this.state.isSearchViewOpen && this.getView(currentView)}
- </form>
- </Paper>;
+ const { classes, currentView, openView, closeView, open } = this.props;
+ return <ClickAwayListener onClickAway={() => closeView()}>
+ <Paper className={classes.container} >
+ <form onSubmit={this.handleSubmit} className={classes.searchBar}>
+ <Input
+ className={classes.input}
+ onChange={this.handleChange}
+ placeholder="Search"
+ value={this.state.value}
+ fullWidth={true}
+ disableUnderline={true}
+ onClick={() => openView()}
+ endAdornment={
+ <InputAdornment position="end">
+ <Tooltip title='Search'>
+ <IconButton>
+ <SearchIcon />
+ </IconButton>
+ </Tooltip>
+ </InputAdornment>
+ } />
+ {open && this.getView(currentView)}
+ </form>
+ </Paper >
+ </ClickAwayListener>;
}
componentDidMount() {
@@ -145,9 +132,6 @@ export const SearchBar = connect(mapStateToProps, mapDispatchToProps)(withStyles
clearTimeout(this.timeout);
}
- toggleSearchView = () =>
- this.setState({ isSearchViewOpen: !this.state.isSearchViewOpen })
-
getView = (currentView: string) => {
switch (currentView) {
case SearchView.BASIC:
@@ -157,7 +141,7 @@ export const SearchBar = connect(mapStateToProps, mapDispatchToProps)(withStyles
case SearchView.AUTOCOMPLETE:
return <SearchBarAutocompleteView />;
default:
- return '';
+ return <SearchBarBasicView setView={this.props.onSetView} />;
}
}
@@ -181,4 +165,4 @@ export const SearchBar = connect(mapStateToProps, mapDispatchToProps)(withStyles
}
}
}
-));
+);
diff --git a/src/views-components/search-bar/search-bar.tsx b/src/views-components/search-bar/search-bar.tsx
new file mode 100644
index 0000000..affd5e4
--- /dev/null
+++ b/src/views-components/search-bar/search-bar.tsx
@@ -0,0 +1,24 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { connect } from 'react-redux';
+import { RootState } from '~/store/store';
+import { Dispatch } from 'redux';
+import { goToView, searchBarActions } from '~/store/search-bar/search-bar-actions';
+import { SearchBarView } from '~/views-components/search-bar/search-bar-view';
+
+const mapStateToProps = ({ searchBar }: RootState) => {
+ return {
+ currentView: searchBar.currentView,
+ open: searchBar.open
+ };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+ onSetView: (currentView: string) => dispatch(goToView(currentView)),
+ openView: () => dispatch<any>(searchBarActions.OPEN_SEARCH_VIEW()),
+ closeView: () => dispatch<any>(searchBarActions.CLOSE_SEARCH_VIEW())
+});
+
+export const SearchBar = connect(mapStateToProps, mapDispatchToProps)(SearchBarView);
\ No newline at end of file
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list