React version of UserEdit

.circleci/config.yml

@@ -73,8 +73,6 @@ jobs:
           command: |
             npm run cypress start
             docker-compose run cypress node ./cypress/cypress.js db-seed
-            # Make sure the API key is the same so Percy snapshots are consistent
-            docker-compose -p cypress run postgres psql -U postgres -h postgres -c "update users set api_key = 'secret' where email ='[email protected]';"
       - run:
           name: Execute Cypress tests
           command: npm run cypress run-ci

client/app/assets/less/ant.less

@@ -1,5 +1,6 @@
 @import '~antd/lib/style/core/iconfont';
 @import '~antd/lib/style/core/motion';
+@import '~antd/lib/alert/style/index';
 @import '~antd/lib/input/style/index';
 @import '~antd/lib/input-number/style/index';
 @import '~antd/lib/date-picker/style/index';

client/app/components/InputWithCopy.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import Input from 'antd/lib/input';
+import Icon from 'antd/lib/icon';
+import Tooltip from 'antd/lib/tooltip';
+
+export default class InputWithCopy extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { copied: null };
+    this.ref = React.createRef();
+    this.copyFeatureSupported = document.queryCommandSupported('copy');
+    this.resetCopyState = null;
+  }
+
+  componentWillUnmount() {
+    if (this.resetCopyState) {
+      clearTimeout(this.resetCopyState);
+    }
+  }
+
+  copy = () => {
+    // select text
+    this.ref.current.select();
+
+    // copy
+    try {
+      const success = document.execCommand('copy');
+      if (!success) {
+        throw new Error();
+      }
+      this.setState({ copied: 'Copied!' });
+    } catch (err) {
+      this.setState({
+        copied: 'Copy failed',
+      });
+    }
+
+    // reset tooltip
+    this.resetCopyState = setTimeout(() => this.setState({ copied: null }), 2000);
+  };
+
+  render() {
+    const copyButton = (
+      <Tooltip title={this.state.copied || 'Copy'}>
+        <Icon
+          type="copy"
+          style={{ cursor: 'pointer' }}
+          onClick={this.copy}
+        />
+      </Tooltip>
+    );
+
+    return (
+      <Input {...this.props} ref={this.ref} addonAfter={this.copyFeatureSupported && copyButton} />
+    );
+  }
+}

client/app/components/dynamic-form/DynamicForm.jsx

@@ -7,16 +7,29 @@ import Checkbox from 'antd/lib/checkbox';
 import Button from 'antd/lib/button';
 import Upload from 'antd/lib/upload';
 import Icon from 'antd/lib/icon';
+import { includes } from 'lodash';
 import { react2angular } from 'react2angular';
 import { toastr } from '@/services/ng';
 import { Field, Action, AntdForm } from '../proptypes';
 import helper from './dynamicFormHelper';
 
-export class DynamicForm extends React.Component {
+const fieldRules = ({ type, required, minLength }) => {
+  const requiredRule = required;
+  const minLengthRule = minLength && includes(['text', 'email', 'password'], type);
+
+  return [
+    requiredRule && { required, message: 'This field is required.' },
+    minLengthRule && { min: minLength, message: 'This field is too short.' },
+  ].filter(rule => rule);
+};
+
+export const DynamicForm = Form.create()(class DynamicForm extends React.Component {
   static propTypes = {
     fields: PropTypes.arrayOf(Field),
     actions: PropTypes.arrayOf(Action),
     feedbackIcons: PropTypes.bool,
+    readOnly: PropTypes.bool,
+    saveText: PropTypes.string,
     onSubmit: PropTypes.func,
     form: AntdForm.isRequired,
   };
@@ -25,6 +38,8 @@ export class DynamicForm extends React.Component {
     fields: [],
     actions: [],
     feedbackIcons: false,
+    readOnly: false,
+    saveText: 'Save',
     onSubmit: () => {},
   };
 
@@ -96,11 +111,10 @@ export class DynamicForm extends React.Component {
 
   renderUpload(field, props) {
     const { getFieldDecorator, getFieldValue } = this.props.form;
-    const { name, initialValue, required } = field;
-    const fieldLabel = field.title || helper.toHuman(name);
+    const { name, initialValue } = field;
 
     const fileOptions = {
-      rules: [{ required, message: `${fieldLabel} is required.` }],
+      rules: fieldRules(field),
       initialValue,
       getValueFromEvent: this.base64File.bind(this, name),
     };
@@ -122,7 +136,7 @@ export class DynamicForm extends React.Component {
     const fieldLabel = field.title || helper.toHuman(name);
 
     const options = {
-      rules: [{ required: field.required, message: `${fieldLabel} is required.` }],
+      rules: fieldRules(field),
       valuePropName: type === 'checkbox' ? 'checked' : 'value',
       initialValue,
     };
@@ -139,23 +153,25 @@ export class DynamicForm extends React.Component {
 
   renderFields() {
     return this.props.fields.map((field) => {
-      const [firstItem] = this.props.fields;
+      const [firstField] = this.props.fields;
       const FormItem = Form.Item;
       const { name, title, type } = field;
       const fieldLabel = title || helper.toHuman(name);
+      const { feedbackIcons, readOnly } = this.props;
 
       const formItemProps = {
         key: name,
         className: 'm-b-10',
-        hasFeedback: type !== 'checkbox' && type !== 'file' && this.props.feedbackIcons,
+        hasFeedback: type !== 'checkbox' && type !== 'file' && feedbackIcons,
         label: type === 'checkbox' ? '' : fieldLabel,
       };
 
       const fieldProps = {
-        autoFocus: (firstItem === field),
+        autoFocus: (firstField === field),
         className: 'w-100',
         name,
         type,
+        readOnly,
         placeholder: field.placeholder,
         'data-test': fieldLabel,
       };
@@ -174,7 +190,7 @@ export class DynamicForm extends React.Component {
         htmlType: 'button',
         className: action.pullRight ? 'pull-right m-t-10' : 'm-t-10',
         type: action.type,
-        disabled: inProgress || (isFieldsTouched() && action.disableWhenDirty),
+        disabled: (isFieldsTouched() && action.disableWhenDirty),
         loading: inProgress,
         onClick: this.handleAction,
       };
@@ -191,22 +207,21 @@ export class DynamicForm extends React.Component {
       disabled: this.state.isSubmitting,
       loading: this.state.isSubmitting,
     };
+    const { readOnly, saveText } = this.props;
+    const saveButton = !readOnly;
 
     return (
       <Form layout="vertical" onSubmit={this.handleSubmit}>
         {this.renderFields()}
-        <Button {...submitProps}>
-          Save
-        </Button>
+        {saveButton && <Button {...submitProps}>{saveText}</Button>}
         {this.renderActions()}
       </Form>
     );
   }
-}
+});
 
 export default function init(ngModule) {
   ngModule.component('dynamicForm', react2angular((props) => {
-    const UpdatedDynamicForm = Form.create()(DynamicForm);
     const fields = helper.getFields(props.type.configuration_schema, props.target);
 
     const onSubmit = (values, onSuccess, onError) => {
@@ -231,7 +246,7 @@ export default function init(ngModule) {
       feedbackIcons: true,
       onSubmit,
     };
-    return (<UpdatedDynamicForm {...updatedProps} />);
+    return (<DynamicForm {...updatedProps} />);
   }, ['target', 'type', 'actions']));
 }
 

client/app/components/proptypes.js

@@ -37,6 +37,7 @@ export const Field = PropTypes.shape({
   type: PropTypes.oneOf(['text', 'email', 'password', 'number', 'checkbox', 'file']).isRequired,
   initialValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   required: PropTypes.bool,
+  minLength: PropTypes.number,
   placeholder: PropTypes.string,
 });
 
@@ -52,6 +53,15 @@ export const AntdForm = PropTypes.shape({
   validateFieldsAndScroll: PropTypes.func,
 });
 
+export const UserProfile = PropTypes.shape({
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  email: PropTypes.string.isRequired,
+  profileImageUrl: PropTypes.string,
+  apiKey: PropTypes.string,
+  isDisabled: PropTypes.bool,
+});
+
 function checkMoment(isRequired, props, propName, componentName) {
   const value = props[propName];
   const isRequiredValid = isRequired && (value !== null);