Allow user to edit file information directly in the modal

.travis.yml

@@ -59,7 +59,7 @@ before_script:
 # Install composer
   - composer validate
   - if [[ $DB == PGSQL ]]; then composer require --no-update silverstripe/postgresql:2.x-dev --prefer-dist; fi
-  - composer require silverstripe/recipe-testing:^1 silverstripe/recipe-cms 4.x-dev --no-update --prefer-dist
+  - composer require silverstripe/recipe-testing:^1 silverstripe/recipe-cms:4.x-dev silverstripe/frameworktest:0.1.0 --no-update --prefer-dist
   - composer update
 
 # Remove preinstalled Chrome (google-chrome)

client/lang/src/en.json

@@ -1,7 +1,9 @@
 {
+    "AssetAdmin.ADD_FILES": "Add from files",
     "AssetAdmin.ADD_FOLDER_BUTTON": "Add folder",
     "AssetAdmin.BACK": "Back",
     "AssetAdmin.BACK_DESCRIPTION": "Navigate up a level",
+    "AssetAdmin.BROWSE": "Browse",
     "AssetAdmin.BULK_ACTIONS_CONFIRM": "Are you sure you want to %s these files?",
     "AssetAdmin.BULK_ACTIONS_DELETE": "Delete",
     "AssetAdmin.BULK_ACTIONS_DELETE_SINGLE_ITEM_CONFIRM": "Are you sure you want to delete this file/folder?",
@@ -18,7 +20,10 @@
     "AssetAdmin.CANCEL": "Cancel",
     "AssetAdmin.CONFIRMDELETE": "Are you sure you want to delete this record?",
     "AssetAdmin.CREATED": "First uploaded",
+    "AssetAdmin.CreateTitle": "Insert new media from the web",
     "AssetAdmin.DELETE": "Delete",
+    "AssetAdmin.DETAILS": "Details",
+    "AssetAdmin.DISMISS": "Dismiss",
     "AssetAdmin.DIM": "Dimensions",
     "AssetAdmin.DROPZONE_CANCEL_UPLOAD": "Cancel upload",
     "AssetAdmin.DROPZONE_CANCEL_UPLOAD_CONFIRMATION": "Are you sure you want to cancel this upload?",
@@ -34,6 +39,9 @@
     "AssetAdmin.DROPZONE_SUCCESS_UPLOAD": "File uploaded",
     "AssetAdmin.DROPZONE_UPLOAD": "Upload",
     "AssetAdmin.EDIT": "Edit",
+    "AssetAdmin.EditTitle": "Media from the web",
+    "AssetAdmin.EMPTY": "No files",
+    "AssetAdmin.ERROR_OEMBED_REMOTE": "Embed is only compatible with remote files",
     "AssetAdmin.FILENAME": "Filename",
     "AssetAdmin.FILES": "Files",
     "AssetAdmin.FILE_MISSING": "File cannot be found",
@@ -45,7 +53,10 @@
     "AssetAdmin.JOINLAST": "and",
     "AssetAdmin.LASTEDIT": "Last changed",
     "AssetAdmin.LOADMORE": "Load more",
+    "AssetAdmin.NEXT": "Next",
     "AssetAdmin.NOITEMSFOUND": "No items found",
+    "AssetAdmin.OR": "or",
+    "AssetAdmin.PREVIOUS": "Previous",
     "AssetAdmin.PROMPTFOLDERNAME": "Please enter a folder name (or blank to cancel)",
     "AssetAdmin.REPlACE_FILE_SUCCESS": "Upload successful, the file will be replaced when you Save.",
     "AssetAdmin.SAVE": "Save",
@@ -63,13 +74,5 @@
     "AssetAdmin.TITLE": "Title",
     "AssetAdmin.TYPE": "File type",
     "AssetAdmin.URL": "URL",
-    "AssetAdmin.ADD_FILES": "Add from files",
-    "AssetAdmin.BROWSE": "Browse",
-    "AssetAdmin.EMPTY": "No files",
-    "AssetAdmin.OR": "or",
-    "AssetAdmin.ERROR_OEMBED_REMOTE": "Embed is only compatible with remote files",
-    "AssetAdmin.CreateTitle": "Insert new media from the web",
-    "AssetAdmin.EditTitle": "Media from the web",
-    "AssetAdmin.NEXT": "Next",
-    "AssetAdmin.PREVIOUS": "Previous"
+    "AssetAdmin.VIEW": "View",
 }

client/src/components/GalleryItem/GalleryItem.js

@@ -424,8 +424,8 @@ class GalleryItem extends Component {
       action = this.handleCancelUpload;
       actionIcon = 'font-icon-cancel';
     } else if (this.exists()) {
-      const label = i18n._t('AssetAdmin.DETAILS', 'Details');
-      overlay = <div className="gallery-item--overlay font-icon-edit">{label}</div>;
+      const label = i18n._t('AssetAdmin.VIEW', 'View');
+      overlay = <div className="gallery-item--overlay font-icon-eye">{label}</div>;
     }
 
     const badge = this.props.badge;

client/src/components/GalleryItem/GalleryItem.scss

@@ -252,7 +252,9 @@ $gallery-item-label-height: 40px;
   text-align: center;
 
   &::before {
-    margin-right: 5px;
+    margin-right: .385rem;
+    position: relative;
+    top: .2rem;
   }
 }
 

client/src/components/UploadField/UploadField.js

@@ -7,6 +7,7 @@ import CONSTANTS from 'constants/index';
 import fieldHolder from 'components/FieldHolder/FieldHolder';
 import fileShape from 'lib/fileShape';
 import * as uploadFieldActions from 'state/uploadField/UploadFieldActions';
+import * as modalActions from 'state/modal/ModalActions';
 import PropTypes from 'prop-types';
 
 /**
@@ -233,6 +234,7 @@ class UploadField extends Component {
    * @param {Object} selectingItem
    */
   handleReplaceShow(event, selectingItem) {
+    this.props.actions.modal.initFormStack('select', 'admin');
     this.setState({
       selecting: true,
       selectingItem,
@@ -272,6 +274,7 @@ class UploadField extends Component {
    */
   handleAddShow(event) {
     event.preventDefault();
+    this.props.actions.modal.initFormStack('select', 'admin');
     this.setState({
       selecting: true,
       selectingItem: null,
@@ -282,6 +285,7 @@ class UploadField extends Component {
    * Close 'add from files' dialog
    */
   handleHide() {
+    this.props.actions.modal.reset();
     this.setState({
       selecting: false,
       selectingItem: null,
@@ -587,6 +591,7 @@ function mapDispatchToProps(dispatch) {
   return {
     actions: {
       uploadField: bindActionCreators(uploadFieldActions, dispatch),
+      modal: bindActionCreators(modalActions, dispatch)
     },
   };
 }

client/src/components/UploadField/tests/UploadField-test.js

@@ -52,6 +52,10 @@ describe('UploadField', () => {
           setFiles: jest.fn(),
           removeFile: jest.fn(),
         },
+        modal: {
+          initFormStack: jest.fn(),
+          reset: jest.fn(),
+        }
       },
       data: {
         multi: true,