Merge branch 'release-1.0.14-beta'

CHANGELOG.md

@@ -4,6 +4,57 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [1.0.14-beta] (2018-11-05)
+
+### Added
+
+#### "Linkable" fields
+
+Linkable fields allow you to use the value of a field to create links to external resources in the Publish interface.
+An example use case for this is a Twitter username. By specifying a `display.link` property, Publish creates a full
+link for display, using the value of the field in place of the `{value}` placeholder.
+
+**Example API schema**
+```json
+"twitter": {
+  "type": "String",
+  "label": "Twitter",
+  "publish": {
+    "section": "Details",
+    "display": {
+      "edit": true,
+      "list": true,
+      "link": "https://twitter.com/{value}"
+    }
+  }
+}
+```
+
+If the value of your field is already a fully formed URL, set the `link` property to `true` to have Publish create a clickable link:
+
+```json
+"twitter": {
+  "type": "String",
+  "label": "Twitter",
+  "publish": {
+    "section": "Details",
+    "display": {
+      "edit": true,
+      "list": true,
+      "link": true
+    }
+  }
+}
+```
+
+### Changed
+
+* [#559](https://github.com/dadi/publish/pull/559): This PR addresses a small issue if you set a Reference field or Media field as the first displayed field in your API schema you are unable to click through from the list view (both those fields override the link).
+* [#562](https://github.com/dadi/publish/pull/562): adds a basic fullscreen mode for the rich editor
+* [#565](https://github.com/dadi/publish/issues/565): use field name as label in columns when no label specified
+* [#568](https://github.com/dadi/publish/pull/568): disable autocomplete in input elements
+
+
 ## [1.0.13-beta] (2018-10-25)
 
 In this release, Publish gets a UI refresh. Additional changes linked below.

app/config-schema.js

@@ -142,6 +142,7 @@ module.exports = {
     }
   },
   server: {
+    requireAuthentication: false,
     host: {
       doc: 'The IP address or interface to bind to',
       format: 'ipaddress',

docs/components/Checkbox.md

@@ -13,6 +13,13 @@ The ID of the input element.
 - type: `string`
 
 
+### `name`
+
+The name of the input element.
+
+- type: `string`
+
+
 ### `onChange`
 
 A callback function to be fired whenever the value changes.

docs/components/FieldMediaItem.md

@@ -13,9 +13,16 @@ A subset of the app config containing data specific to this field type.
 - type: `object`
 
 
+### `isList`
+
+A value indicating whether or not it is a list view being rendered.
+
+- type: `bool`
+
+
 ### `value`
 
 The field value.
 
-- type: `bool`
+- type: `object`
 

docs/components/TextInput.md

@@ -47,6 +47,13 @@ Whether the field is part of a `<Label/>` component. This makes it inherit certa
 - default value: `false`
 
 
+### `name`
+
+DOM name for the input field.
+
+- type: `string`
+
+
 ### `onBlur`
 
 Callback to be executed when the text loses focus (onBlur event).

frontend/components/Checkbox/Checkbox.jsx

@@ -16,6 +16,11 @@ export default class Checkbox extends Component {
      */
     id: proptypes.string,
 
+    /**
+     * The name of the input element.
+     */
+    name: proptypes.string,
+
     /**
      * A callback function to be fired whenever the value changes.
      */
@@ -37,6 +42,7 @@ export default class Checkbox extends Component {
   render() {
     const {
       id,
+      name,
       onChange,
       readonly,
       value
@@ -48,6 +54,7 @@ export default class Checkbox extends Component {
         class={styles.checkbox}
         disabled={readonly}
         id={id}
+        name={name}
         onChange={onChange}
         type="checkbox"
       />

frontend/components/FieldBoolean/FieldBooleanEdit.jsx

@@ -99,7 +99,13 @@ export default class FieldBooleanEdit extends Component {
   }
 
   render() {
-    const {displayName, onChange, value, schema} = this.props
+    const {
+      displayName,
+      name,
+      onChange,
+      schema,
+      value
+    } = this.props
 
     const publishBlock = schema.publish || {}
     const readOnly = publishBlock.readonly === true
@@ -110,6 +116,7 @@ export default class FieldBooleanEdit extends Component {
         label={displayName}
       >
         <Checkbox
+          name={name}
           onChange={this.handleOnChange.bind(this)}
           value={value}
           readonly={readOnly}

frontend/components/FieldDateTime/FieldDateTimeEdit.jsx

@@ -123,14 +123,14 @@ export default class FieldDateTimeEdit extends Component {
       config,
       displayName,
       error, 
+      name,
       required,
       schema, 
       value
     } = this.props
     const {hasFocus} = this.state
     const {pickerVisible} = this.state
     const publishBlock = schema.publish || {}
-    comment = comment || (required && 'Required')
 
     let dateObj = null
 
@@ -148,9 +148,10 @@ export default class FieldDateTimeEdit extends Component {
         errorMessage={typeof error === 'string' ? error : null}
         hasFocus={hasFocus}
         label={displayName}
-        comment={comment}
+        comment={comment || (required && 'Required') || (publishBlock.readonly && 'Read only')}
       >
         <TextInput
+          name={name}
           onBlur={this.handleFocus.bind(this, false)}
           onChange={this.handleChange.bind(this)}
           onFocus={this.handleFocus.bind(this, true)}

frontend/components/FieldMedia/FieldMediaItem.jsx

@@ -33,7 +33,7 @@ export default class FieldMediaItem extends Component {
 
     if (!value) return null
 
-    // File location on disk
+    // File location url
     let src = value._previewData ? value._previewData : value.url || value.path
 
     // Filename without extension
@@ -47,14 +47,17 @@ export default class FieldMediaItem extends Component {
     )
 
     // Render an image document.
+    let cdnThumb = false
+
     if (value.mimetype && value.mimetype.indexOf('image') > -1) {
       if (value.path && cdn && cdn.publicUrl) {
-        src = `${cdn.publicUrl}/${value.path}?width=80`
+        src = `${cdn.publicUrl}/${value.path}`
+        cdnThumb = src + '?width=80'
       }
 
       icon = (
         <div class={styles.image}>
-          <img src={src} />
+          <img src={cdnThumb || src} />
         </div>
       )
     }

frontend/components/FieldNumber/FieldNumberEdit.jsx

@@ -132,6 +132,7 @@ export default class FieldNumberEdit extends Component {
       comment,
       displayName,
       error,
+      name,
       required,
       schema,
       value
@@ -149,6 +150,7 @@ export default class FieldNumberEdit extends Component {
         comment={comment}
       >
         <TextInput
+          name={name}
           onBlur={this.handleFocusChange.bind(this, false)}
           onChange={this.handleOnChange.bind(this)}
           onFocus={this.handleFocusChange.bind(this, true)}

frontend/components/FieldPassword/FieldPasswordEdit.jsx

@@ -135,6 +135,7 @@ export default class FieldPasswordEdit extends Component {
     const {
       displayName,
       error,
+      name,
       schema
     } = this.props
     const {
@@ -157,6 +158,7 @@ export default class FieldPasswordEdit extends Component {
           label={`Current ${(displayName || '').toLowerCase()}`}
         >
           <TextInput
+            name={name}
             onChange={this.handleOnChange.bind(this, 'currentPassword')}
             onKeyUp={this.handleKeyUp.bind(this, 'currentPassword')}
             placeholder={schema.placeholder}
@@ -171,6 +173,7 @@ export default class FieldPasswordEdit extends Component {
           label={`New ${(displayName || '').toLowerCase()}`}
         >
           <TextInput
+            name={`${name}-new`}
             onChange={this.handleOnChange.bind(this, 'newPassword')}
             onKeyUp={this.handleKeyUp.bind(this, 'newPassword')}
             placeholder={schema.placeholder}
@@ -187,6 +190,7 @@ export default class FieldPasswordEdit extends Component {
           label={`New ${(displayName || '').toLowerCase()} (confirm)`}
         >
           <TextInput
+            name={`${name}-confirm`}
             onChange={this.handleOnChange.bind(this, 'newPasswordConfirm')}
             onKeyUp={this.handleKeyUp.bind(this, 'newPasswordConfirm')}
             placeholder={schema.placeholder}

frontend/components/FieldReference/FieldReferenceEdit.jsx

@@ -151,6 +151,7 @@ export default class FieldReferenceEdit extends Component {
     return (
       <Label
         label={displayName}
+        comment={isReadOnly && 'Read only'}
       >
         {value && (
           <div class={styles['value-container']}>
@@ -199,7 +200,11 @@ export default class FieldReferenceEdit extends Component {
         )}
 
         {!value && isReadOnly && (
-          <span>None</span>
+          <div class={styles['value-container']}>
+            <span class={styles.value}>
+              None
+            </span>
+          </div>
         )}
       </Label>
     )

frontend/components/FieldString/FieldString.css

@@ -26,4 +26,10 @@
 
 .dropdown-option:first-of-type {
   padding-top: 6px;
+}
+
+.link-preview {
+  width: 100%;
+  margin-top: 5px;
+  margin-bottom: 5px;
 }

frontend/components/FieldString/FieldStringEdit.jsx

@@ -6,6 +6,7 @@ import proptypes from 'proptypes'
 import Style from 'lib/Style'
 import styles from './FieldString.css'
 
+import Button from 'components/Button/Button'
 import Label from 'components/Label/Label'
 import RichEditor from 'components/RichEditor/RichEditor'
 import TextInput from 'components/TextInput/TextInput'
@@ -249,20 +250,20 @@ export default class FieldStringEdit extends Component {
     const dropdownStyle = new Style(styles, 'dropdown')
       .addIf('dropdown-error', error)
       .addIf('dropdown-multiple', multiple)
-    comment = comment || (required && 'Required')
 
     return (
       <Label
         error={error}
         errorMessage={typeof error === 'string' ? error : null}
         label={displayName}
-        comment={comment}
+        comment={comment || (required && 'Required') || (readOnly && 'Read only')}
       >
         <select
           class={dropdownStyle.getClasses()}
+          disabled={readOnly}
           onChange={el => this.handleOnChange(this.getValueOfDropdown(el.target))}
           multiple={multiple}
-          disabled={readOnly}
+          name={name}
           ref={multiple && this.selectDropdownOptions.bind(this)}
           value={selectedValue}
         >
@@ -293,6 +294,7 @@ export default class FieldStringEdit extends Component {
       comment,
       displayName,
       error,
+      name,
       placeholder,
       required,
       schema,
@@ -304,16 +306,24 @@ export default class FieldStringEdit extends Component {
     const type = publishBlock.multiline ? 'multiline' : 'text'
     const readOnly = publishBlock.readonly === true
 
+    let link = publishBlock.display && publishBlock.display.link
+    let linkFormatted = false
+
+    if (link && typeof link === 'string') {
+      linkFormatted = link.replace(/{value}/, value)
+    }
+
     return (
       <Label
         error={error}
         errorMessage={typeof error === 'string' ? error : null}
         hasFocus={hasFocus}
         label={displayName}
-        comment={comment || (required && 'Required')}
+        comment={comment || (required && 'Required') || (readOnly && 'Read only')}
       >
         <TextInput
           heightType={heightType}
+          name={name}
           onBlur={this.handleFocusChange.bind(this, false)}
           onChange={el => this.handleOnChange(el.target.value)}
           onFocus={this.handleFocusChange.bind(this, true)}
@@ -325,6 +335,14 @@ export default class FieldStringEdit extends Component {
           type={type}
           value={value}
         />
+        {link && (
+          <Button
+            accent="neutral"
+            size="small"
+            href={linkFormatted || value} 
+            className={styles['link-preview']}
+          >Open in new window</Button>
+        )}
       </Label>
     )
   }