gui: Fix and align folder editing states (fixes #8145) (#8147)

gui/default/syncthing/core/syncthingController.js

@@ -754,7 +754,7 @@ angular.module('syncthing.core')
         }
 
         function shouldSetDefaultFolderPath() {
-            return $scope.config.defaults.folder.path && $scope.folderEditor.folderPath.$pristine && $scope.currentFolder._editing == "add";
+            return $scope.config.defaults.folder.path && $scope.folderEditor.folderPath.$pristine && $scope.editingFolderNew();
         }
 
         function resetRemoteNeed() {
@@ -1977,7 +1977,7 @@ angular.module('syncthing.core')
             }).one('hidden.bs.modal', function () {
                 var p = $q.when();
                 // If the modal was closed default patterns should still apply
-                if ($scope.currentFolder._editing == "add-ignores" && !$scope.ignores.saved && $scope.ignores.defaultLines) {
+                if ($scope.currentFolder._editing == "new-ignores" && !$scope.ignores.saved && $scope.ignores.defaultLines) {
                     p = saveFolderAddIgnores($scope.currentFolder.id, true);
                 }
                 p.then(function () {
@@ -1997,10 +1997,11 @@ angular.module('syncthing.core')
             case "existing":
                 title = $translate.instant("Edit Folder");
                 break;
-            case "add":
+            case "new":
+            case "new-pending":
                 title = $translate.instant("Add Folder");
                 break;
-            case "add-ignores":
+            case "new-ignores":
                 title = $translate.instant("Set Ignores on Added Folder");
                 break;
             }
@@ -2025,6 +2026,10 @@ angular.module('syncthing.core')
             return $scope.currentFolder._editing == 'existing';
         }
 
+        $scope.editingFolderNew = function() {
+            return $scope.has(['new', 'new-pending'], currentFolder._editing);
+        }
+
         function editFolder(initialTab) {
             if ($scope.currentFolder.path.length > 1 && $scope.currentFolder.path.slice(-1) === $scope.system.pathSeparator) {
                 $scope.currentFolder.path = $scope.currentFolder.path.slice(0, -1);
@@ -2153,6 +2158,7 @@ angular.module('syncthing.core')
                 var folderID = (data.random.substr(0, 5) + '-' + data.random.substr(5, 5)).toLowerCase();
                 addFolderInit(folderID).then(function() {
                     // Triggers the watch that sets the path
+                    $scope.currentFolder._editing = "new";
                     $scope.currentFolder.label = $scope.currentFolder.label;
                     editFolderModal();
                 });
@@ -2170,6 +2176,7 @@ angular.module('syncthing.core')
                         break;
                     }
                 }
+                $scope.currentFolder._editing = "new-pending";
                 editFolderModal();
             });
         };
@@ -2177,7 +2184,6 @@ angular.module('syncthing.core')
         function addFolderInit(folderID) {
             return $http.get(urlbase + '/config/defaults/folder').then(function (response) {
                 $scope.currentFolder = response.data;
-                $scope.currentFolder._editing = "add";
                 $scope.currentFolder.id = folderID;
                 initShareEditing('folder');
                 $scope.currentSharing.unrelated = $scope.currentSharing.unrelated.concat($scope.currentSharing.shared);
@@ -2204,7 +2210,7 @@ angular.module('syncthing.core')
         };
 
         $scope.saveFolder = function () {
-            if ($scope.currentFolder._editing == "add-ignores") {
+            if ($scope.currentFolder._editing == "new-ignores") {
                 // On modal being hidden without clicking save, the defaults will be saved.
                 $scope.ignores.saved = true;
                 saveFolderAddIgnores($scope.currentFolder.id);
@@ -2293,7 +2299,7 @@ angular.module('syncthing.core')
             // load default ignores, then let the user edit them.
             $scope.saveConfig().then(function() {
                 editFolderLoadingIgnores();
-                $scope.currentFolder._editing = "add-ignores";
+                $scope.currentFolder._editing = "new-ignores";
                 $('.nav-tabs a[href="#folder-ignores"]').tab('show');
                 return editFolderGetIgnores();
             }).then(function(data) {

gui/default/syncthing/core/uniqueFolderDirective.js

@@ -4,7 +4,7 @@ angular.module('syncthing.core')
             require: 'ngModel',
             link: function (scope, elm, attrs, ctrl) {
                 ctrl.$parsers.unshift(function (viewValue) {
-                    if (scope.currentFolder._editing != "add") {
+                    if (scope.currentFolder._editing != "new") {
                         // we shouldn't validate
                         ctrl.$setValidity('uniqueFolder', true);
                     } else if (scope.folders.hasOwnProperty(viewValue)) {

gui/default/syncthing/folder/editFolderModalView.html

@@ -2,11 +2,11 @@
   <div class="modal-body">
     <form role="form" name="folderEditor">
       <ul class="nav nav-tabs" ng-init="loadFormIntoScope(folderEditor)">
-        <li ng-class="{'disabled': currentFolder._editing == 'add-ignores'}" class="active"><a data-toggle="tab" href="{{currentFolder._editing == 'add-ignores' ? '' : '#folder-general'}}"><span class="fas fa-cog"></span> <span translate>General</span></a></li>
+        <li ng-class="{'disabled': currentFolder._editing == 'new-ignores'}" class="active"><a data-toggle="tab" href="{{currentFolder._editing == 'new-ignores' ? '' : '#folder-general'}}"><span class="fas fa-cog"></span> <span translate>General</span></a></li>
-        <li ng-class="{'disabled': currentFolder._editing == 'add-ignores'}"><a data-toggle="tab" href="{{currentFolder._editing == 'add-ignores' ? '' : '#folder-sharing'}}"><span class="fas fa-share-alt"></span> <span translate>Sharing</span></a></li>
+        <li ng-class="{'disabled': currentFolder._editing == 'new-ignores'}"><a data-toggle="tab" href="{{currentFolder._editing == 'new-ignores' ? '' : '#folder-sharing'}}"><span class="fas fa-share-alt"></span> <span translate>Sharing</span></a></li>
-        <li ng-class="{'disabled': currentFolder._editing == 'add-ignores'}"><a data-toggle="tab" href="{{currentFolder._editing == 'add-ignores' ? '' : '#folder-versioning'}}"><span class="fas fa-copy"></span> <span translate>File Versioning</span></a></li>
+        <li ng-class="{'disabled': currentFolder._editing == 'new-ignores'}"><a data-toggle="tab" href="{{currentFolder._editing == 'new-ignores' ? '' : '#folder-versioning'}}"><span class="fas fa-copy"></span> <span translate>File Versioning</span></a></li>
         <li ng-class="{'disabled': currentFolder._recvEnc}"><a data-toggle="tab" href="{{currentFolder._recvEnc ? '' : '#folder-ignores'}}"><span class="fas fa-filter"></span> <span translate>Ignore Patterns</span></a></li>
-        <li ng-class="{'disabled': currentFolder._editing == 'add-ignores'}"><a data-toggle="tab" href="{{currentFolder._editing == 'add-ignores' ? '' : '#folder-advanced'}}"><span class="fas fa-cogs"></span> <span translate>Advanced</span></a></li>
+        <li ng-class="{'disabled': currentFolder._editing == 'new-ignores'}"><a data-toggle="tab" href="{{currentFolder._editing == 'new-ignores' ? '' : '#folder-advanced'}}"><span class="fas fa-cogs"></span> <span translate>Advanced</span></a></li>
       </ul>
       <div class="tab-content">
 
@@ -20,7 +20,7 @@
           </div>
           <div ng-if="!editingFolderDefaults()" class="form-group" ng-class="{'has-error': folderEditor.folderID.$invalid && folderEditor.folderID.$dirty}">
             <label for="folderID"><span translate>Folder ID</span></label>
-            <input name="folderID" ng-readonly="has(['existing', 'add'], currentFolder._editing)" id="folderID" class="form-control" type="text" ng-model="currentFolder.id" required="" aria-required="true" unique-folder value="{{currentFolder.id}}" />
+            <input name="folderID" ng-readonly="has(['existing', 'new-pending'], currentFolder._editing)" id="folderID" class="form-control" type="text" ng-model="currentFolder.id" required="" aria-required="true" unique-folder value="{{currentFolder.id}}" />
             <p class="help-block">
               <span translate ng-if="folderEditor.folderID.$valid || folderEditor.folderID.$pristine">Required identifier for the folder. Must be the same on all cluster devices.</span>
               <span translate ng-if="folderEditor.folderID.$error.uniqueFolder">The folder ID must be unique.</span>
@@ -148,8 +148,8 @@
           </div>
         </div>
 
-        <div id="folder-ignores" class="tab-pane" ng-switch="currentFolder._editing">
+        <div id="folder-ignores" class="tab-pane" ng-switch="editingFolderNew()">
-          <div ng-switch-when="add">
+          <div ng-switch-when="true">
             <label>
               <input type="checkbox" ng-model="currentFolder._addIgnores" >&nbsp;<span translate>Add ignore patterns</span>
             </label>