[ARVADOS-WORKBENCH2] updated: 1.2.0-1006-g81546d3
Git user
git at public.curoverse.com
Tue Nov 27 16:33:09 EST 2018
Summary of changes:
src/components/autocomplete/autocomplete.tsx | 11 +++-
.../property-key-field.tsx | 62 ++++++++++++++++++
.../property-value-field.tsx | 74 ++++++++++++++++++++++
3 files changed, 145 insertions(+), 2 deletions(-)
create mode 100644 src/views-components/resource-properties-form/property-key-field.tsx
create mode 100644 src/views-components/resource-properties-form/property-value-field.tsx
via 81546d30cd19cd98939e56e1b01b5c9684941f98 (commit)
via 511702e8333a82459900a4118b65bf1f9d9c5ff3 (commit)
via 857ac804982b4c54c995d25f413a8811da56b63c (commit)
from 028b8ca12dbf19c890c2337894b88e7f23a5e97d (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 81546d30cd19cd98939e56e1b01b5c9684941f98
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Tue Nov 27 22:32:46 2018 +0100
Create PropertyValueField
Feature #14393
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/views-components/resource-properties-form/property-value-field.tsx b/src/views-components/resource-properties-form/property-value-field.tsx
new file mode 100644
index 0000000..eed8e75
--- /dev/null
+++ b/src/views-components/resource-properties-form/property-value-field.tsx
@@ -0,0 +1,74 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { WrappedFieldProps, Field } from 'redux-form';
+import { connect } from 'react-redux';
+import { identity } from 'lodash';
+import { RootState } from '~/store/store';
+import { getVocabulary } from '~/store/vocabulary/vocabulary-selctors';
+import { Autocomplete } from '~/components/autocomplete/autocomplete';
+import { Vocabulary } from '~/models/vocabulary';
+import { require } from '~/validators/require';
+
+interface VocabularyProp {
+ vocabulary: Vocabulary;
+}
+
+interface PropertyKeyProp {
+ propertyKey: string;
+}
+
+type PropertyValueFieldProps = VocabularyProp & PropertyKeyProp;
+
+const mapStateToProps = (state: RootState): VocabularyProp => ({
+ vocabulary: getVocabulary(state.properties),
+});
+
+export const PropertyValueField = connect(mapStateToProps)(
+ (props: PropertyValueFieldProps) =>
+ <Field
+ name='value'
+ component={PropertyValueInput}
+ validate={getValidation(props)}
+ {...props} />);
+
+const PropertyValueInput = ({ input, meta, vocabulary, propertyKey }: WrappedFieldProps & PropertyValueFieldProps) =>
+ <Autocomplete
+ value={input.value}
+ onChange={input.onChange}
+ label='Value'
+ suggestions={getSuggestions(input.value, propertyKey, vocabulary)}
+ items={ITEMS_PLACEHOLDER}
+ onSelect={input.onChange}
+ renderSuggestion={identity}
+ error={meta.invalid}
+ helperText={meta.error}
+ />;
+
+const getValidation = (props: PropertyValueFieldProps) =>
+ isStrictTag(props.propertyKey, props.vocabulary)
+ ? [require, matchTagValues(props)]
+ : [require];
+
+const matchTagValues = ({ vocabulary, propertyKey }: PropertyValueFieldProps) =>
+ (value: string) =>
+ getTagValues(propertyKey, vocabulary).find(v => v.includes(value))
+ ? undefined
+ : 'Incorrect value';
+
+const getSuggestions = (value: string, tagName: string, vocabulary: Vocabulary) =>
+ getTagValues(tagName, vocabulary).filter(v => v.includes(value) && v !== value);
+
+const isStrictTag = (tagName: string, vocabulary: Vocabulary) => {
+ const tag = vocabulary.tags[tagName];
+ return tag ? tag.strict : false;
+};
+
+const getTagValues = (tagName: string, vocabulary: Vocabulary) => {
+ const tag = vocabulary.tags[tagName];
+ return tag ? tag.values : [];
+};
+
+const ITEMS_PLACEHOLDER: string[] = [];
commit 511702e8333a82459900a4118b65bf1f9d9c5ff3
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Tue Nov 27 21:10:22 2018 +0100
Create PropertyKeyField
Feature #14393
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/views-components/resource-properties-form/property-key-field.tsx b/src/views-components/resource-properties-form/property-key-field.tsx
new file mode 100644
index 0000000..fdd89d0
--- /dev/null
+++ b/src/views-components/resource-properties-form/property-key-field.tsx
@@ -0,0 +1,62 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { WrappedFieldProps, Field } from 'redux-form';
+import { connect } from 'react-redux';
+import { identity, memoize } from 'lodash';
+import { RootState } from '~/store/store';
+import { getVocabulary } from '~/store/vocabulary/vocabulary-selctors';
+import { Autocomplete } from '~/components/autocomplete/autocomplete';
+import { Vocabulary } from '~/models/vocabulary';
+import { require } from '~/validators/require';
+
+interface VocabularyProp {
+ vocabulary: Vocabulary;
+}
+
+const mapStateToProps = (state: RootState): VocabularyProp => ({
+ vocabulary: getVocabulary(state.properties),
+});
+
+export const PropertyKeyField = connect(mapStateToProps)(
+ ({ vocabulary }: VocabularyProp) =>
+ <Field
+ name='key'
+ component={PropertyKeyInput}
+ vocabulary={vocabulary}
+ validate={getValidation(vocabulary)} />);
+
+const PropertyKeyInput = ({ input, meta, vocabulary }: WrappedFieldProps & VocabularyProp) =>
+ <Autocomplete
+ value={input.value}
+ onChange={input.onChange}
+ label='Key'
+ suggestions={getSuggestions(input.value, vocabulary)}
+ items={ITEMS_PLACEHOLDER}
+ onSelect={input.onChange}
+ renderSuggestion={identity}
+ error={meta.invalid}
+ helperText={meta.error}
+ />;
+
+const getValidation = memoize(
+ (vocabulary: Vocabulary) =>
+ vocabulary.strict
+ ? [require, matchTags(vocabulary)]
+ : [require]);
+
+const matchTags = (vocabulary: Vocabulary) =>
+ (value: string) =>
+ getTagsList(vocabulary).find(tag => tag.includes(value))
+ ? undefined
+ : 'Incorrect key';
+
+const getSuggestions = (value: string, vocabulary: Vocabulary) =>
+ getTagsList(vocabulary).filter(tag => tag.includes(value) && tag !== value);
+
+const getTagsList = ({ tags }: Vocabulary) =>
+ Object.keys(tags);
+
+const ITEMS_PLACEHOLDER: string[] = [];
commit 857ac804982b4c54c995d25f413a8811da56b63c
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Tue Nov 27 20:54:22 2018 +0100
Add error support to autocomplete
Feature #14393
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 85704c3..46df8c6 100644
--- a/src/components/autocomplete/autocomplete.tsx
+++ b/src/components/autocomplete/autocomplete.tsx
@@ -3,7 +3,7 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Input as MuiInput, Chip as MuiChip, Popper as MuiPopper, Paper, FormControl, InputLabel, StyleRulesCallback, withStyles, RootRef, ListItemText, ListItem, List } from '@material-ui/core';
+import { Input as MuiInput, Chip as MuiChip, Popper as MuiPopper, Paper, FormControl, InputLabel, StyleRulesCallback, withStyles, RootRef, ListItemText, ListItem, List, FormHelperText } from '@material-ui/core';
import { PopperProps } from '@material-ui/core/Popper';
import { WithStyles } from '@material-ui/core/styles';
import { noop } from 'lodash';
@@ -13,6 +13,8 @@ export interface AutocompleteProps<Item, Suggestion> {
value: string;
items: Item[];
suggestions?: Suggestion[];
+ error?: boolean;
+ helperText?: string;
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
@@ -38,9 +40,10 @@ export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
render() {
return (
<RootRef rootRef={this.containerRef}>
- <FormControl fullWidth>
+ <FormControl fullWidth error={this.props.error}>
{this.renderLabel()}
{this.renderInput()}
+ {this.renderHelperText()}
{this.renderSuggestions()}
</FormControl>
</RootRef>
@@ -64,6 +67,10 @@ export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
/>;
}
+ renderHelperText(){
+ return <FormHelperText>{this.props.helperText}</FormHelperText>;
+ }
+
renderSuggestions() {
const { suggestions = [] } = this.props;
return (
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list