Merge pull request #3989 from nextcloud/files-external-save-button

replace autosave with a save button for external storage configuration

apps/files_external/js/settings.js

@@ -719,6 +719,10 @@ MountConfigListView.prototype = _.extend({
 			self.deleteStorageConfig($(this).closest('tr'));
 		});
 
+		this.$el.on('click', 'td.save>img', function () {
+			self.saveStorageConfig($(this).closest('tr'));
+		});
+
 		this.$el.on('click', 'td.mountOptionsToggle>img', function() {
 			self._showMountOptionsDropdown($(this).closest('tr'));
 		});
@@ -737,13 +741,6 @@ MountConfigListView.prototype = _.extend({
 		highlightInput($target);
 		var $tr = $target.closest('tr');
 		this.updateStatus($tr, null);
-
-		var timer = $tr.data('save-timer');
-		clearTimeout(timer);
-		timer = setTimeout(function() {
-			self.saveStorageConfig($tr, null, timer);
-		}, 2000);
-		$tr.data('save-timer', timer);
 	},
 
 	_onSelectBackend: function(event) {
@@ -813,8 +810,7 @@ MountConfigListView.prototype = _.extend({
 
 		$tr.data('storageConfig', storageConfig);
 		$tr.show();
-		$tr.find('td').last().attr('class', 'remove');
+		$tr.find('td.mountOptionsToggle, td.save, td.remove').removeClass('hidden');
-		$tr.find('td.mountOptionsToggle').removeClass('hidden');
 		$tr.find('td').last().removeAttr('style');
 		$tr.removeAttr('id');
 		$tr.find('select#selectBackend');

apps/files_external/templates/settings.php

@@ -150,13 +150,19 @@
 					/>
 					<input type="hidden" class="mountOptions" value="" />
 				</td>
-				<td class="hidden">
+				<td class="remove hidden">
 					<img class="svg"
 						alt="<?php p($l->t('Delete')); ?>"
 						title="<?php p($l->t('Delete')); ?>"
 						src="<?php print_unescaped(image_path('core', 'actions/delete.svg')); ?>"
 					/>
 				</td>
+				<td class="save hidden">
+					<img alt="<?php p($l->t('Save')); ?>"
+						 title="<?php p($l->t('Save')); ?>"
+						 src="<?php print_unescaped(image_path('core', 'actions/checkmark.svg')); ?>"
+					/>
+				</td>
 			</tr>
 		</tbody>
 	</table>

apps/files_external/tests/js/settingsSpec.js

@@ -46,7 +46,8 @@ describe('OCA.External.Settings tests', function() {
 			'<input type="hidden" class="applicableUsers">' +
 			'</td>' +
 			'<td class="mountOptionsToggle"><input type="hidden" class="mountOptions"/><img class="svg action"/></td>' +
-			'<td><img alt="Delete" title="Delete" class="svg action"/></td>' +
+			'<td class="remove"><img alt="Delete" title="Delete" class="svg action"/></td>' +
+			'<td class="save"><img alt="Save" title="Save" class="svg action"/></td>' +
 			'</tr>' +
 			'</tbody>' +
 			'</table>'
@@ -195,7 +196,7 @@ describe('OCA.External.Settings tests', function() {
 				$tr = view.$el.find('tr:first');
 				selectBackend('\\OC\\TestBackend');
 			});
-			it('saves storage after editing config', function() {
+			it('saves storage after clicking the save button', function() {
 				var $field1 = $tr.find('input[data-parameter=field1]');
 				expect($field1.length).toEqual(1);
 				$field1.val('test');
@@ -205,7 +206,8 @@ describe('OCA.External.Settings tests', function() {
 				expect($mountOptionsField.length).toEqual(1);
 				$mountOptionsField.val(JSON.stringify({previews:true}));
 
-				clock.tick(4000);
+				var $saveButton = $tr.find('td.save img');
+				$saveButton.click();
 
 				expect(fakeServer.requests.length).toEqual(1);
 				var request = fakeServer.requests[0];
@@ -242,11 +244,6 @@ describe('OCA.External.Settings tests', function() {
 				// but after closing the dropdown
 				expect(fakeServer.requests.length).toEqual(1);
 			});
-			// TODO: tests with "applicableUsers" and "applicableGroups"
-			// TODO: test with missing mount point value
-			// TODO: test with personal mounts (no applicable fields)
-			// TODO: test save triggers: paste, keyup, checkbox
-			// TODO: test "custom" field with addScript
 			// TODO: status indicator
 		});
 		describe('validate storage configuration', function() {