[ARVADOS-WORKBENCH2] created: 1.3.0-214-g79e636fa
Git user
git at public.curoverse.com
Tue Dec 18 05:06:48 EST 2018
at 79e636fa713d11b4b7188985e78c8ff1c094d9a0 (commit)
commit 79e636fa713d11b4b7188985e78c8ff1c094d9a0
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Tue Dec 18 10:43:12 2018 +0100
Split search bar view into smaller components
Feature #14603
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/views-components/search-bar/search-bar-view.tsx b/src/views-components/search-bar/search-bar-view.tsx
index ff4b6442..09b75bbf 100644
--- a/src/views-components/search-bar/search-bar-view.tsx
+++ b/src/views-components/search-bar/search-bar-view.tsx
@@ -156,56 +156,17 @@ export const SearchBarView = withStyles(styles)(
className={isPopoverOpen ? classes.containerSearchViewOpened : classes.container}>
<div ref={this.viewAnchorRef}>
<form onSubmit={props.onSubmit}>
- <Input
- className={classes.input}
- onChange={props.onChange}
- placeholder="Search"
- value={props.searchValue}
- fullWidth={true}
- disableUnderline={true}
- onClick={e => handleInputClick(e, props)}
- onKeyDown={e => handleKeyDown(e, props)}
- startAdornment={
- <InputAdornment position="start">
- <Tooltip title='Search'>
- <IconButton type="submit">
- <SearchIcon />
- </IconButton>
- </Tooltip>
- </InputAdornment>
- }
- endAdornment={
- <InputAdornment position="end">
- <Tooltip title='Advanced search'>
- <IconButton onClick={e => handleDropdownClick(e, props)}>
- <ArrowDropDownIcon />
- </IconButton>
- </Tooltip>
- </InputAdornment>
- } />
+ <SearchInput {...props} />
</form>
</div>
- <Popover
- PaperProps={{
- style: {
- width: this.getViewWidth(),
- borderRadius: '0 0 4px 4px',
- }
- }}
- anchorEl={this.viewAnchorRef.current}
- anchorOrigin={{
- vertical: 'bottom',
- horizontal: 'center',
- }}
- transformOrigin={{
- vertical: 'top',
- horizontal: 'center',
- }}
- disableAutoFocus
- open={isPopoverOpen}
- onClose={props.closeView}>
- {getView({ ...props })}
- </Popover>
+ <SearchViewContainer
+ {...props}
+ width={this.getViewWidth()}
+ anchorEl={this.viewAnchorRef.current}>
+ {
+ getView({ ...props })
+ }
+ </SearchViewContainer>
</Paper >
);
}
@@ -218,6 +179,63 @@ export const SearchBarView = withStyles(styles)(
);
+const SearchInput = (props: SearchBarViewProps) => {
+ const { classes } = props;
+ return <Input
+ className={classes.input}
+ onChange={props.onChange}
+ placeholder="Search"
+ value={props.searchValue}
+ fullWidth={true}
+ disableUnderline={true}
+ onClick={e => handleInputClick(e, props)}
+ onKeyDown={e => handleKeyDown(e, props)}
+ startAdornment={
+ <InputAdornment position="start">
+ <Tooltip title='Search'>
+ <IconButton type="submit">
+ <SearchIcon />
+ </IconButton>
+ </Tooltip>
+ </InputAdornment>
+ }
+ endAdornment={
+ <InputAdornment position="end">
+ <Tooltip title='Advanced search'>
+ <IconButton onClick={e => handleDropdownClick(e, props)}>
+ <ArrowDropDownIcon />
+ </IconButton>
+ </Tooltip>
+ </InputAdornment>
+ } />;
+};
+
+const SearchViewContainer = (props: SearchBarViewProps & { width: number, anchorEl: HTMLElement | null, children: React.ReactNode }) =>
+ <Popover
+ PaperProps={{
+ style: {
+ width: props.width,
+ borderRadius: '0 0 4px 4px',
+ }
+ }}
+ anchorEl={props.anchorEl}
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'center',
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'center',
+ }}
+ disableAutoFocus
+ open={props.isPopoverOpen}
+ onClose={props.closeView}>
+ {
+ props.children
+ }
+ </Popover>;
+
+
const getView = (props: SearchBarViewProps) => {
switch (props.currentView) {
case SearchView.AUTOCOMPLETE:
commit cfd501bed1fb431e74816069f0ae8f83aacf29c7
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Tue Dec 18 10:21:20 2018 +0100
Set transform origin to improve popovers animation
Feature #14603
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/views-components/search-bar/search-bar-view.tsx b/src/views-components/search-bar/search-bar-view.tsx
index 8aa8ffa7..ff4b6442 100644
--- a/src/views-components/search-bar/search-bar-view.tsx
+++ b/src/views-components/search-bar/search-bar-view.tsx
@@ -11,7 +11,7 @@ import {
WithStyles,
Tooltip,
InputAdornment, Input,
- Popover
+ Popover,
} from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
@@ -195,7 +195,11 @@ export const SearchBarView = withStyles(styles)(
anchorEl={this.viewAnchorRef.current}
anchorOrigin={{
vertical: 'bottom',
- horizontal: 'left',
+ horizontal: 'center',
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'center',
}}
disableAutoFocus
open={isPopoverOpen}
commit 721322dd1f2af54d1aaa831a96dcf78ed0065085
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Tue Dec 18 10:08:15 2018 +0100
Replace ClickAwayListener with Popover
Feature #14603
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/views-components/search-bar/search-bar-view.tsx b/src/views-components/search-bar/search-bar-view.tsx
index 51ea3fa1..8aa8ffa7 100644
--- a/src/views-components/search-bar/search-bar-view.tsx
+++ b/src/views-components/search-bar/search-bar-view.tsx
@@ -11,7 +11,7 @@ import {
WithStyles,
Tooltip,
InputAdornment, Input,
- ClickAwayListener
+ Popover
} from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
@@ -144,47 +144,74 @@ const handleDropdownClick = (e: React.MouseEvent, props: SearchBarViewProps) =>
};
export const SearchBarView = withStyles(styles)(
- (props : SearchBarViewProps) => {
- const { classes, isPopoverOpen } = props;
- return (
- <ClickAwayListener onClickAway={props.closeView}>
- <Paper className={isPopoverOpen ? classes.containerSearchViewOpened : classes.container} >
- <form onSubmit={props.onSubmit}>
- <Input
- className={classes.input}
- onChange={props.onChange}
- placeholder="Search"
- value={props.searchValue}
- fullWidth={true}
- disableUnderline={true}
- onClick={e => handleInputClick(e, props)}
- onKeyDown={e => handleKeyDown(e, props)}
- startAdornment={
- <InputAdornment position="start">
- <Tooltip title='Search'>
- <IconButton type="submit">
- <SearchIcon />
- </IconButton>
- </Tooltip>
- </InputAdornment>
- }
- endAdornment={
- <InputAdornment position="end">
- <Tooltip title='Advanced search'>
- <IconButton onClick={e => handleDropdownClick(e, props)}>
- <ArrowDropDownIcon />
- </IconButton>
- </Tooltip>
- </InputAdornment>
- } />
- </form>
- <div className={classes.view}>
- {isPopoverOpen && getView({...props})}
+ class SearchBarView extends React.Component<SearchBarViewProps> {
+
+ viewAnchorRef = React.createRef<HTMLDivElement>();
+
+ render() {
+ const { children, ...props } = this.props;
+ const { classes, isPopoverOpen } = props;
+ return (
+ <Paper
+ className={isPopoverOpen ? classes.containerSearchViewOpened : classes.container}>
+ <div ref={this.viewAnchorRef}>
+ <form onSubmit={props.onSubmit}>
+ <Input
+ className={classes.input}
+ onChange={props.onChange}
+ placeholder="Search"
+ value={props.searchValue}
+ fullWidth={true}
+ disableUnderline={true}
+ onClick={e => handleInputClick(e, props)}
+ onKeyDown={e => handleKeyDown(e, props)}
+ startAdornment={
+ <InputAdornment position="start">
+ <Tooltip title='Search'>
+ <IconButton type="submit">
+ <SearchIcon />
+ </IconButton>
+ </Tooltip>
+ </InputAdornment>
+ }
+ endAdornment={
+ <InputAdornment position="end">
+ <Tooltip title='Advanced search'>
+ <IconButton onClick={e => handleDropdownClick(e, props)}>
+ <ArrowDropDownIcon />
+ </IconButton>
+ </Tooltip>
+ </InputAdornment>
+ } />
+ </form>
</div>
+ <Popover
+ PaperProps={{
+ style: {
+ width: this.getViewWidth(),
+ borderRadius: '0 0 4px 4px',
+ }
+ }}
+ anchorEl={this.viewAnchorRef.current}
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'left',
+ }}
+ disableAutoFocus
+ open={isPopoverOpen}
+ onClose={props.closeView}>
+ {getView({ ...props })}
+ </Popover>
</Paper >
- </ClickAwayListener>
- );
+ );
+ }
+
+ getViewWidth() {
+ const { current } = this.viewAnchorRef;
+ return current ? current.offsetWidth : 0;
+ }
}
+
);
const getView = (props: SearchBarViewProps) => {
commit 3ddd45b007768a39591cd116b4a213cd39019e0c
Merge: f4e410a5 b6f9b49e
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Mon Dec 17 17:56:55 2018 +0100
Merge branch 'master' into 14603-add-controlled-vocabulary-to-advanced-search
refs #14603
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
commit f4e410a5984226818301332c25ac178403c2e0e9
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Mon Dec 17 11:02:23 2018 +0100
Replace advanced search properties fields with ones supporting vocablary
Feature #14603
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/views-components/form-fields/search-bar-form-fields.tsx b/src/views-components/form-fields/search-bar-form-fields.tsx
index da0b12b5..85abbe19 100644
--- a/src/views-components/form-fields/search-bar-form-fields.tsx
+++ b/src/views-components/form-fields/search-bar-form-fields.tsx
@@ -3,7 +3,7 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from "react";
-import { Field, WrappedFieldProps, FieldArray } from 'redux-form';
+import { Field, WrappedFieldProps, FieldArray, formValues } from 'redux-form';
import { TextField, DateTextField } from "~/components/text-field/text-field";
import { CheckboxField } from '~/components/checkbox-field/checkbox-field';
import { NativeSelectField } from '~/components/select-field/select-field';
@@ -14,6 +14,10 @@ import { SEARCH_BAR_ADVANCE_FORM_PICKER_ID } from '~/store/search-bar/search-bar
import { SearchBarAdvancedPropertiesView } from '~/views-components/search-bar/search-bar-advanced-properties-view';
import { TreeItem } from "~/components/tree/tree";
import { ProjectsTreePickerItem } from "~/views-components/projects-tree-picker/generic-projects-tree-picker";
+import { PropertyKeyInput } from '~/views-components/resource-properties-form/property-key-field';
+import { PropertyValueInput, PropertyValueFieldProps } from '~/views-components/resource-properties-form/property-value-field';
+import { VocabularyProp, connectVocabulary } from '~/views-components/resource-properties-form/property-field-common';
+import { compose } from 'redux';
export const SearchBarTypeField = () =>
<Field
@@ -50,7 +54,7 @@ const ProjectsPicker = (props: WrappedFieldProps) =>
(_: any, { id }: TreeItem<ProjectsTreePickerItem>) => {
props.input.onChange(id);
}
- }/>
+ } />
</div>;
export const SearchBarTrashField = () =>
@@ -74,17 +78,22 @@ export const SearchBarPropertiesField = () =>
name="properties"
component={SearchBarAdvancedPropertiesView} />;
-export const SearchBarKeyField = () =>
- <Field
- name='key'
- component={TextField}
- label="Key" />;
+export const SearchBarKeyField = connectVocabulary(
+ ({ vocabulary }: VocabularyProp) =>
+ <Field
+ name='key'
+ component={PropertyKeyInput}
+ vocabulary={vocabulary} />);
-export const SearchBarValueField = () =>
- <Field
- name='value'
- component={TextField}
- label="Value" />;
+export const SearchBarValueField = compose(
+ connectVocabulary,
+ formValues({ propertyKey: 'key' })
+)(
+ (props: PropertyValueFieldProps) =>
+ <Field
+ name='value'
+ component={PropertyValueInput}
+ {...props} />);
export const SearchBarSaveSearchField = () =>
<Field
diff --git a/src/views-components/resource-properties-form/property-key-field.tsx b/src/views-components/resource-properties-form/property-key-field.tsx
index e6708a39..3fb2d377 100644
--- a/src/views-components/resource-properties-form/property-key-field.tsx
+++ b/src/views-components/resource-properties-form/property-key-field.tsx
@@ -20,7 +20,7 @@ export const PropertyKeyField = connectVocabulary(
vocabulary={vocabulary}
validate={getValidation(vocabulary)} />);
-const PropertyKeyInput = ({ vocabulary, ...props }: WrappedFieldProps & VocabularyProp) =>
+export const PropertyKeyInput = ({ vocabulary, ...props }: WrappedFieldProps & VocabularyProp) =>
<Autocomplete
label='Key'
suggestions={getSuggestions(props.input.value, vocabulary)}
diff --git a/src/views-components/resource-properties-form/property-value-field.tsx b/src/views-components/resource-properties-form/property-value-field.tsx
index db2db3f7..13dcfeb5 100644
--- a/src/views-components/resource-properties-form/property-value-field.tsx
+++ b/src/views-components/resource-properties-form/property-value-field.tsx
@@ -15,7 +15,7 @@ interface PropertyKeyProp {
propertyKey: string;
}
-type PropertyValueFieldProps = VocabularyProp & PropertyKeyProp;
+export type PropertyValueFieldProps = VocabularyProp & PropertyKeyProp;
export const PROPERTY_VALUE_FIELD_NAME = 'value';
@@ -30,7 +30,7 @@ export const PropertyValueField = compose(
validate={getValidation(props)}
{...props} />);
-const PropertyValueInput = ({ vocabulary, propertyKey, ...props }: WrappedFieldProps & PropertyValueFieldProps) =>
+export const PropertyValueInput = ({ vocabulary, propertyKey, ...props }: WrappedFieldProps & PropertyValueFieldProps) =>
<Autocomplete
label='Value'
suggestions={getSuggestions(props.input.value, propertyKey, vocabulary)}
commit 87dd6bf1172ad733a40602de9b01585c1295a6b3
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Mon Dec 17 10:58:46 2018 +0100
Fix autocomplete's label positioning when there is no items
Feature #14603
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/autocomplete/autocomplete.tsx b/src/components/autocomplete/autocomplete.tsx
index c5811bb6..57881f1a 100644
--- a/src/components/autocomplete/autocomplete.tsx
+++ b/src/components/autocomplete/autocomplete.tsx
@@ -124,7 +124,7 @@ export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
if (event.key === 'Enter') {
if (this.isSuggestionBoxOpen() && selectedSuggestionIndex < suggestions.length) {
// prevent form submissions when selecting a suggestion
- event.preventDefault();
+ event.preventDefault();
onSelect(suggestions[selectedSuggestionIndex]);
} else if (this.props.value.length > 0) {
onCreate();
@@ -149,6 +149,15 @@ export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
renderChips() {
const { items, onDelete } = this.props;
+
+ /**
+ * If input startAdornment prop is not undefined, input's label will stay above the input.
+ * If there is not items, we want the label to go back to placeholder position.
+ */
+ if (items.length === 0) {
+ return;
+ }
+
return items.map(
(item, index) =>
<Chip
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list