[ARVADOS-WORKBENCH2] updated: 1.2.0-1022-g2cb16ce

Git user git at public.curoverse.com
Wed Nov 28 06:35:23 EST 2018


Summary of changes:
 src/components/autocomplete/autocomplete.tsx       |  2 +-
 src/components/progress-button/progress-button.tsx | 36 +++++++++++++++++
 .../property-field-common.tsx                      | 45 ++++++++++++++++++++++
 .../property-key-field.tsx                         | 30 +++------------
 .../property-value-field.tsx                       | 29 +++-----------
 .../resource-properties-form.tsx                   | 20 ++++++++--
 6 files changed, 109 insertions(+), 53 deletions(-)
 create mode 100644 src/components/progress-button/progress-button.tsx
 create mode 100644 src/views-components/resource-properties-form/property-field-common.tsx

       via  2cb16ce08bd7f09fdff84c572429485384455d7a (commit)
       via  768d715efc5ecf3f0108a70f695e3c32e187c900 (commit)
       via  6578e959652ed10a51424d1b66f80280164824dd (commit)
       via  cf3a9e014c504405624cc704dda509f38b38ef7b (commit)
       via  e9fdba2e2c5f99623438cc7bfd6f7e1731b8c93b (commit)
       via  e8bda1ab1d0d5c7c4a051814cb6de39ca6189260 (commit)
       via  0b43ddb091143c3afbd2760b06a27a99050e5326 (commit)
      from  01d6c5fbcba3e51ffddf36aa0c5a0be7dc4127bc (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 2cb16ce08bd7f09fdff84c572429485384455d7a
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date:   Wed Nov 28 12:35:01 2018 +0100

    Clean up imports
    
    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
index 18be627..a8584c1 100644
--- a/src/views-components/resource-properties-form/property-key-field.tsx
+++ b/src/views-components/resource-properties-form/property-key-field.tsx
@@ -4,11 +4,11 @@
 
 import * as React from 'react';
 import { WrappedFieldProps, Field } from 'redux-form';
-import { identity, memoize } from 'lodash';
+import { memoize } from 'lodash';
 import { Autocomplete } from '~/components/autocomplete/autocomplete';
 import { Vocabulary } from '~/models/vocabulary';
 import { require } from '~/validators/require';
-import { ITEMS_PLACEHOLDER, connectVocabulary, VocabularyProp, hasError, getErrorMsg, handleBlur, buildProps } from '~/views-components/resource-properties-form/property-field-common';
+import { connectVocabulary, VocabularyProp, buildProps } from '~/views-components/resource-properties-form/property-field-common';
 
 export const PROPERTY_KEY_FIELD_NAME = 'key';
 
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 ff0959d..56eaf6d 100644
--- a/src/views-components/resource-properties-form/property-value-field.tsx
+++ b/src/views-components/resource-properties-form/property-value-field.tsx
@@ -4,13 +4,12 @@
 
 import * as React from 'react';
 import { WrappedFieldProps, Field, formValues } from 'redux-form';
-import { identity } from 'lodash';
 import { compose } from 'redux';
 import { Autocomplete } from '~/components/autocomplete/autocomplete';
 import { Vocabulary } from '~/models/vocabulary';
 import { require } from '~/validators/require';
 import { PROPERTY_KEY_FIELD_NAME } from '~/views-components/resource-properties-form/property-key-field';
-import { ITEMS_PLACEHOLDER, VocabularyProp, connectVocabulary, hasError, getErrorMsg, handleBlur, buildProps } from '~/views-components/resource-properties-form/property-field-common';
+import { VocabularyProp, connectVocabulary, buildProps } from '~/views-components/resource-properties-form/property-field-common';
 
 interface PropertyKeyProp {
     propertyKey: string;
diff --git a/src/views-components/resource-properties-form/resource-properties-form.tsx b/src/views-components/resource-properties-form/resource-properties-form.tsx
index c881928..eeddf12 100644
--- a/src/views-components/resource-properties-form/resource-properties-form.tsx
+++ b/src/views-components/resource-properties-form/resource-properties-form.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { InjectedFormProps, reduxForm } from 'redux-form';
+import { InjectedFormProps } from 'redux-form';
 import { Grid, withStyles } from '@material-ui/core';
 import { PropertyKeyField, PROPERTY_KEY_FIELD_NAME } from './property-key-field';
 import { PropertyValueField, PROPERTY_VALUE_FIELD_NAME } from './property-value-field';

commit 768d715efc5ecf3f0108a70f695e3c32e187c900
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date:   Wed Nov 28 12:33:30 2018 +0100

    Extract property field props builder
    
    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-field-common.tsx b/src/views-components/resource-properties-form/property-field-common.tsx
index 395be19..028c46b 100644
--- a/src/views-components/resource-properties-form/property-field-common.tsx
+++ b/src/views-components/resource-properties-form/property-field-common.tsx
@@ -3,10 +3,11 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { connect } from 'react-redux';
+import { WrappedFieldMetaProps, WrappedFieldInputProps, WrappedFieldProps } from 'redux-form';
+import { identity } from 'lodash';
 import { Vocabulary } from '~/models/vocabulary';
 import { RootState } from '~/store/store';
 import { getVocabulary } from '~/store/vocabulary/vocabulary-selctors';
-import { WrappedFieldMetaProps, WrappedFieldInputProps } from 'redux-form';
 
 export interface VocabularyProp {
     vocabulary: Vocabulary;
@@ -31,3 +32,14 @@ export const getErrorMsg = (meta: WrappedFieldMetaProps) =>
 export const handleBlur = ({ onBlur, value }: WrappedFieldInputProps) =>
     () =>
         onBlur(value);
+
+export const buildProps = ({ input, meta }: WrappedFieldProps) => ({
+    value: input.value,
+    onChange: input.onChange,
+    onBlur: handleBlur(input),
+    items: ITEMS_PLACEHOLDER,
+    onSelect: input.onChange,
+    renderSuggestion: identity,
+    error: hasError(meta),
+    helperText: getErrorMsg(meta),
+});
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 85cc07f..18be627 100644
--- a/src/views-components/resource-properties-form/property-key-field.tsx
+++ b/src/views-components/resource-properties-form/property-key-field.tsx
@@ -8,7 +8,7 @@ import { identity, memoize } from 'lodash';
 import { Autocomplete } from '~/components/autocomplete/autocomplete';
 import { Vocabulary } from '~/models/vocabulary';
 import { require } from '~/validators/require';
-import { ITEMS_PLACEHOLDER, connectVocabulary, VocabularyProp, hasError, getErrorMsg, handleBlur } from '~/views-components/resource-properties-form/property-field-common';
+import { ITEMS_PLACEHOLDER, connectVocabulary, VocabularyProp, hasError, getErrorMsg, handleBlur, buildProps } from '~/views-components/resource-properties-form/property-field-common';
 
 export const PROPERTY_KEY_FIELD_NAME = 'key';
 
@@ -20,18 +20,11 @@ export const PropertyKeyField = connectVocabulary(
             vocabulary={vocabulary}
             validate={getValidation(vocabulary)} />);
 
-const PropertyKeyInput = ({ input, meta, vocabulary }: WrappedFieldProps & VocabularyProp) =>
+const PropertyKeyInput = ({ vocabulary, ...props }: WrappedFieldProps & VocabularyProp) =>
     <Autocomplete
-        value={input.value}
-        onChange={input.onChange}
-        onBlur={handleBlur(input)}
         label='Key'
-        suggestions={getSuggestions(input.value, vocabulary)}
-        items={ITEMS_PLACEHOLDER}
-        onSelect={input.onChange}
-        renderSuggestion={identity}
-        error={hasError(meta)}
-        helperText={getErrorMsg(meta)}
+        suggestions={getSuggestions(props.input.value, vocabulary)}
+        {...buildProps(props)}
     />;
 
 const getValidation = memoize(
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 0713b06..ff0959d 100644
--- a/src/views-components/resource-properties-form/property-value-field.tsx
+++ b/src/views-components/resource-properties-form/property-value-field.tsx
@@ -10,7 +10,7 @@ import { Autocomplete } from '~/components/autocomplete/autocomplete';
 import { Vocabulary } from '~/models/vocabulary';
 import { require } from '~/validators/require';
 import { PROPERTY_KEY_FIELD_NAME } from '~/views-components/resource-properties-form/property-key-field';
-import { ITEMS_PLACEHOLDER, VocabularyProp, connectVocabulary, hasError, getErrorMsg, handleBlur } from '~/views-components/resource-properties-form/property-field-common';
+import { ITEMS_PLACEHOLDER, VocabularyProp, connectVocabulary, hasError, getErrorMsg, handleBlur, buildProps } from '~/views-components/resource-properties-form/property-field-common';
 
 interface PropertyKeyProp {
     propertyKey: string;
@@ -31,18 +31,11 @@ export const PropertyValueField = compose(
             validate={getValidation(props)}
             {...props} />);
 
-const PropertyValueInput = ({ input, meta, vocabulary, propertyKey }: WrappedFieldProps & PropertyValueFieldProps) =>
+const PropertyValueInput = ({ vocabulary, propertyKey, ...props }: WrappedFieldProps & PropertyValueFieldProps) =>
     <Autocomplete
-        value={input.value}
-        onChange={input.onChange}
-        onBlur={handleBlur(input)}
         label='Value'
-        suggestions={getSuggestions(input.value, propertyKey, vocabulary)}
-        items={ITEMS_PLACEHOLDER}
-        onSelect={input.onChange}
-        renderSuggestion={identity}
-        error={hasError(meta)}
-        helperText={getErrorMsg(meta)}
+        suggestions={getSuggestions(props.input.value, propertyKey, vocabulary)}
+        {...buildProps(props)}
     />;
 
 const getValidation = (props: PropertyValueFieldProps) =>

commit 6578e959652ed10a51424d1b66f80280164824dd
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date:   Wed Nov 28 12:24:10 2018 +0100

    Extract common utils for controlling property field error visibility
    
    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-field-common.tsx b/src/views-components/resource-properties-form/property-field-common.tsx
index b8dfa6f..395be19 100644
--- a/src/views-components/resource-properties-form/property-field-common.tsx
+++ b/src/views-components/resource-properties-form/property-field-common.tsx
@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 import { Vocabulary } from '~/models/vocabulary';
 import { RootState } from '~/store/store';
 import { getVocabulary } from '~/store/vocabulary/vocabulary-selctors';
+import { WrappedFieldMetaProps, WrappedFieldInputProps } from 'redux-form';
 
 export interface VocabularyProp {
     vocabulary: Vocabulary;
@@ -18,3 +19,15 @@ export const mapStateToProps = (state: RootState): VocabularyProp => ({
 export const connectVocabulary = connect(mapStateToProps);
 
 export const ITEMS_PLACEHOLDER: string[] = [];
+
+export const hasError = ({ touched, invalid }: WrappedFieldMetaProps) =>
+    touched && invalid;
+
+export const getErrorMsg = (meta: WrappedFieldMetaProps) =>
+    hasError(meta)
+        ? meta.error
+        : '';
+
+export const handleBlur = ({ onBlur, value }: WrappedFieldInputProps) =>
+    () =>
+        onBlur(value);
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 2a11cae..85cc07f 100644
--- a/src/views-components/resource-properties-form/property-key-field.tsx
+++ b/src/views-components/resource-properties-form/property-key-field.tsx
@@ -8,7 +8,7 @@ import { identity, memoize } from 'lodash';
 import { Autocomplete } from '~/components/autocomplete/autocomplete';
 import { Vocabulary } from '~/models/vocabulary';
 import { require } from '~/validators/require';
-import { ITEMS_PLACEHOLDER, connectVocabulary, VocabularyProp } from '~/views-components/resource-properties-form/property-field-common';
+import { ITEMS_PLACEHOLDER, connectVocabulary, VocabularyProp, hasError, getErrorMsg, handleBlur } from '~/views-components/resource-properties-form/property-field-common';
 
 export const PROPERTY_KEY_FIELD_NAME = 'key';
 
@@ -24,13 +24,14 @@ const PropertyKeyInput = ({ input, meta, vocabulary }: WrappedFieldProps & Vocab
     <Autocomplete
         value={input.value}
         onChange={input.onChange}
+        onBlur={handleBlur(input)}
         label='Key'
         suggestions={getSuggestions(input.value, vocabulary)}
         items={ITEMS_PLACEHOLDER}
         onSelect={input.onChange}
         renderSuggestion={identity}
-        error={meta.invalid}
-        helperText={meta.error}
+        error={hasError(meta)}
+        helperText={getErrorMsg(meta)}
     />;
 
 const getValidation = memoize(
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 dd94c83..0713b06 100644
--- a/src/views-components/resource-properties-form/property-value-field.tsx
+++ b/src/views-components/resource-properties-form/property-value-field.tsx
@@ -10,7 +10,7 @@ import { Autocomplete } from '~/components/autocomplete/autocomplete';
 import { Vocabulary } from '~/models/vocabulary';
 import { require } from '~/validators/require';
 import { PROPERTY_KEY_FIELD_NAME } from '~/views-components/resource-properties-form/property-key-field';
-import { ITEMS_PLACEHOLDER, VocabularyProp, connectVocabulary } from '~/views-components/resource-properties-form/property-field-common';
+import { ITEMS_PLACEHOLDER, VocabularyProp, connectVocabulary, hasError, getErrorMsg, handleBlur } from '~/views-components/resource-properties-form/property-field-common';
 
 interface PropertyKeyProp {
     propertyKey: string;
@@ -35,13 +35,14 @@ const PropertyValueInput = ({ input, meta, vocabulary, propertyKey }: WrappedFie
     <Autocomplete
         value={input.value}
         onChange={input.onChange}
+        onBlur={handleBlur(input)}
         label='Value'
         suggestions={getSuggestions(input.value, propertyKey, vocabulary)}
         items={ITEMS_PLACEHOLDER}
         onSelect={input.onChange}
         renderSuggestion={identity}
-        error={meta.invalid}
-        helperText={meta.error}
+        error={hasError(meta)}
+        helperText={getErrorMsg(meta)}
     />;
 
 const getValidation = (props: PropertyValueFieldProps) =>

commit cf3a9e014c504405624cc704dda509f38b38ef7b
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date:   Wed Nov 28 12:09:09 2018 +0100

    Use ProgressButton in ResourcePropertiesForm
    
    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/resource-properties-form.tsx b/src/views-components/resource-properties-form/resource-properties-form.tsx
index df9ff84..c881928 100644
--- a/src/views-components/resource-properties-form/resource-properties-form.tsx
+++ b/src/views-components/resource-properties-form/resource-properties-form.tsx
@@ -4,16 +4,17 @@
 
 import * as React from 'react';
 import { InjectedFormProps, reduxForm } from 'redux-form';
-import { Grid, Button } from '@material-ui/core';
+import { Grid, withStyles } from '@material-ui/core';
 import { PropertyKeyField, PROPERTY_KEY_FIELD_NAME } from './property-key-field';
 import { PropertyValueField, PROPERTY_VALUE_FIELD_NAME } from './property-value-field';
+import { ProgressButton } from '~/components/progress-button/progress-button';
 
 export interface ResourcePropertiesFormData {
     [PROPERTY_KEY_FIELD_NAME]: string;
     [PROPERTY_VALUE_FIELD_NAME]: string;
 }
 
-export const ResourcePropertiesForm = ({ handleSubmit }: InjectedFormProps<ResourcePropertiesFormData>) =>
+export const ResourcePropertiesForm = ({ handleSubmit, submitting, invalid }: InjectedFormProps<ResourcePropertiesFormData>) =>
     <form onSubmit={handleSubmit}>
         <Grid container spacing={16}>
             <Grid item xs>
@@ -23,7 +24,18 @@ export const ResourcePropertiesForm = ({ handleSubmit }: InjectedFormProps<Resou
                 <PropertyValueField />
             </Grid>
             <Grid item xs>
-                <Button variant='contained' type='submit'>Add</Button>
+                <Button
+                    disabled={invalid}
+                    loading={submitting}
+                    color='primary'
+                    variant='contained'
+                    type='submit'>
+                    Add
+                </Button>
             </Grid>
         </Grid>
     </form>;
+
+const Button = withStyles(theme => ({
+    root: { marginTop: theme.spacing.unit }
+}))(ProgressButton);

commit e9fdba2e2c5f99623438cc7bfd6f7e1731b8c93b
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date:   Wed Nov 28 12:08:39 2018 +0100

    Extract property-field-common module
    
    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-field-common.tsx b/src/views-components/resource-properties-form/property-field-common.tsx
new file mode 100644
index 0000000..b8dfa6f
--- /dev/null
+++ b/src/views-components/resource-properties-form/property-field-common.tsx
@@ -0,0 +1,20 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { connect } from 'react-redux';
+import { Vocabulary } from '~/models/vocabulary';
+import { RootState } from '~/store/store';
+import { getVocabulary } from '~/store/vocabulary/vocabulary-selctors';
+
+export interface VocabularyProp {
+    vocabulary: Vocabulary;
+}
+
+export const mapStateToProps = (state: RootState): VocabularyProp => ({
+    vocabulary: getVocabulary(state.properties),
+});
+
+export const connectVocabulary = connect(mapStateToProps);
+
+export const ITEMS_PLACEHOLDER: string[] = [];
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 c5e1398..2a11cae 100644
--- a/src/views-components/resource-properties-form/property-key-field.tsx
+++ b/src/views-components/resource-properties-form/property-key-field.tsx
@@ -4,25 +4,15 @@
 
 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),
-});
+import { ITEMS_PLACEHOLDER, connectVocabulary, VocabularyProp } from '~/views-components/resource-properties-form/property-field-common';
 
 export const PROPERTY_KEY_FIELD_NAME = 'key';
 
-export const PropertyKeyField = connect(mapStateToProps)(
+export const PropertyKeyField = connectVocabulary(
     ({ vocabulary }: VocabularyProp) =>
         <Field
             name={PROPERTY_KEY_FIELD_NAME}
@@ -60,5 +50,3 @@ const getSuggestions = (value: string, vocabulary: Vocabulary) =>
 
 const getTagsList = ({ tags }: Vocabulary) =>
     Object.keys(tags);
-
-const ITEMS_PLACEHOLDER: string[] = [];
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 9df29bd..dd94c83 100644
--- a/src/views-components/resource-properties-form/property-value-field.tsx
+++ b/src/views-components/resource-properties-form/property-value-field.tsx
@@ -4,19 +4,13 @@
 
 import * as React from 'react';
 import { WrappedFieldProps, Field, formValues } from 'redux-form';
-import { connect } from 'react-redux';
 import { identity } from 'lodash';
 import { compose } from 'redux';
-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';
 import { PROPERTY_KEY_FIELD_NAME } from '~/views-components/resource-properties-form/property-key-field';
-
-interface VocabularyProp {
-    vocabulary: Vocabulary;
-}
+import { ITEMS_PLACEHOLDER, VocabularyProp, connectVocabulary } from '~/views-components/resource-properties-form/property-field-common';
 
 interface PropertyKeyProp {
     propertyKey: string;
@@ -24,14 +18,10 @@ interface PropertyKeyProp {
 
 type PropertyValueFieldProps = VocabularyProp & PropertyKeyProp;
 
-const mapStateToProps = (state: RootState): VocabularyProp => ({
-    vocabulary: getVocabulary(state.properties),
-});
-
 export const PROPERTY_VALUE_FIELD_NAME = 'value';
 
 export const PropertyValueField = compose(
-    connect(mapStateToProps),
+    connectVocabulary,
     formValues({ propertyKey: PROPERTY_KEY_FIELD_NAME })
 )(
     (props: PropertyValueFieldProps) =>
@@ -77,5 +67,3 @@ const getTagValues = (tagName: string, vocabulary: Vocabulary) => {
     const tag = vocabulary.tags[tagName];
     return tag && tag.values ? tag.values : [];
 };
-
-const ITEMS_PLACEHOLDER: string[] = [];

commit e8bda1ab1d0d5c7c4a051814cb6de39ca6189260
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date:   Wed Nov 28 11:50:48 2018 +0100

    Change Autocomplete's popover anchor
    
    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 46df8c6..7da4ba4 100644
--- a/src/components/autocomplete/autocomplete.tsx
+++ b/src/components/autocomplete/autocomplete.tsx
@@ -76,7 +76,7 @@ export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
         return (
             <Popper
                 open={this.state.suggestionsOpen && suggestions.length > 0}
-                anchorEl={this.containerRef.current}>
+                anchorEl={this.inputRef.current}>
                 <Paper onMouseDown={this.preventBlur}>
                     <List dense style={{ width: this.getSuggestionsWidth() }}>
                         {suggestions.map(

commit 0b43ddb091143c3afbd2760b06a27a99050e5326
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date:   Wed Nov 28 11:29:18 2018 +0100

    Create ProgressButton
    
    Feature #14393
    
    Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>

diff --git a/src/components/progress-button/progress-button.tsx b/src/components/progress-button/progress-button.tsx
new file mode 100644
index 0000000..14286dd
--- /dev/null
+++ b/src/components/progress-button/progress-button.tsx
@@ -0,0 +1,36 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import Button, { ButtonProps } from '@material-ui/core/Button';
+import { CircularProgress, withStyles } from '@material-ui/core';
+import { CircularProgressProps } from '@material-ui/core/CircularProgress';
+
+interface ProgressButtonProps extends ButtonProps {
+    loading?: boolean;
+    progressProps?: CircularProgressProps;
+}
+
+export const ProgressButton = ({ loading, progressProps, children, disabled, ...props }: ProgressButtonProps) =>
+    <Button {...props} disabled={disabled || loading}>
+        {children}
+        {loading && <Progress {...progressProps} size={getProgressSize(props.size)} />}
+    </Button>;
+
+const Progress = withStyles({
+    root: {
+        position: 'absolute',
+    },
+})(CircularProgress);
+
+const getProgressSize = (size?: 'small' | 'medium' | 'large') => {
+    switch (size) {
+        case 'small':
+            return 16;
+        case 'large':
+            return 24;
+        default:
+            return 20;
+    }
+};

-----------------------------------------------------------------------


hooks/post-receive
-- 




More information about the arvados-commits mailing list