feat(service): duplication validation for configs and secrets EE-1974 (#6266)

feat(service): check if configs or secrets are duplicated

app/docker/views/services/create/createServiceController.js

@@ -165,6 +165,7 @@ angular.module('portainer.docker').controller('CreateServiceController', [
 
     $scope.removeConfig = function (index) {
       $scope.formValues.Configs.splice(index, 1);
+      $scope.checkIfConfigDuplicated();
     };
 
     $scope.addSecret = function () {
@@ -173,6 +174,7 @@ angular.module('portainer.docker').controller('CreateServiceController', [
 
     $scope.removeSecret = function (index) {
       $scope.formValues.Secrets.splice(index, 1);
+      $scope.checkIfSecretDuplicated();
     };
 
     $scope.addPlacementConstraint = function () {
@@ -215,6 +217,36 @@ angular.module('portainer.docker').controller('CreateServiceController', [
       $scope.formValues.LogDriverOpts.splice(index, 1);
     };
 
+    $scope.checkIfSecretDuplicated = function () {
+      $scope.formValues.Secrets.$invalid = false;
+      [...$scope.formValues.Secrets]
+        .sort((a, b) => a.model.Id.localeCompare(b.model.Id))
+        .sort((a, b) => {
+          if (a.model.Id === b.model.Id) {
+            $scope.formValues.Secrets.$invalid = true;
+            $scope.formValues.Secrets.$error = 'Secret ' + a.model.Name + ' cannot be assigned multiple times.';
+          }
+        });
+      if (!$scope.formValues.Secrets.$invalid) {
+        $scope.formValues.Secrets.$error = '';
+      }
+    };
+
+    $scope.checkIfConfigDuplicated = function () {
+      $scope.formValues.Configs.$invalid = false;
+      [...$scope.formValues.Configs]
+        .sort((a, b) => a.model.Id.localeCompare(b.model.Id))
+        .sort((a, b) => {
+          if (a.model.Id === b.model.Id) {
+            $scope.formValues.Configs.$invalid = true;
+            $scope.formValues.Configs.$error = 'Config ' + a.model.Name + ' cannot be assigned multiple times.';
+          }
+        });
+      if (!$scope.formValues.Configs.$invalid) {
+        $scope.formValues.Configs.$error = '';
+      }
+    };
+
     function prepareImageConfig(config, input) {
       var imageConfig = ImageHelper.createImageConfigForContainer(input.RegistryModel);
       config.TaskTemplate.ContainerSpec.Image = imageConfig.fromImage;
@@ -511,7 +543,7 @@ angular.module('portainer.docker').controller('CreateServiceController', [
     function validateForm(accessControlData, isAdmin) {
       $scope.state.formValidationError = '';
       var error = '';
-      error = FormValidator.validateAccessControl(accessControlData, isAdmin);
+      error = FormValidator.validateAccessControl(accessControlData, isAdmin) || $scope.formValues.Secrets.$error || $scope.formValues.Configs.$error;
 
       if (error) {
         $scope.state.formValidationError = error;

app/docker/views/services/create/includes/config.html

@@ -4,11 +4,17 @@
       <label class="control-label text-left">Configs</label>
       <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addConfig()"> <i class="fa fa-plus-circle" aria-hidden="true"></i> add a config </span>
     </div>
+    <!-- info message -->
+    <div class="form-group" ng-show="formValues.Configs.$invalid" style="margin-bottom: 0px;">
+      <div class="col-sm-12 small text-warning" style="padding-left: 35px; padding-top: 20px;">
+        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ formValues.Configs.$error }}
+      </div>
+    </div>
     <div class="col-sm-12 form-inline" style="margin-top: 10px;">
       <div ng-repeat="config in formValues.Configs" style="margin-top: 2px;">
         <div class="input-group col-sm-4 input-group-sm">
           <span class="input-group-addon">config</span>
-          <select class="form-control" ng-model="config.model" ng-options="config.Name for config in availableConfigs | orderBy: 'Name'">
+          <select class="form-control" ng-model="config.model" ng-change="checkIfConfigDuplicated()" ng-options="config.Name for config in availableConfigs | orderBy: 'Name'">
             <option value="" selected="selected">Select a config</option>
           </select>
         </div>

app/docker/views/services/create/includes/secret.html

@@ -10,11 +10,17 @@
       <label class="control-label text-left">Secrets</label>
       <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addSecret()"> <i class="fa fa-plus-circle" aria-hidden="true"></i> add a secret </span>
     </div>
+    <!-- info message -->
+    <div class="form-group" ng-show="formValues.Secrets.$invalid" style="margin-bottom: 0px;">
+      <div class="col-sm-12 small text-warning" style="padding-left: 35px; padding-top: 20px;">
+        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ formValues.Secrets.$error }}
+      </div>
+    </div>
     <div class="col-sm-12 form-inline" style="margin-top: 10px;">
       <div ng-repeat="secret in formValues.Secrets track by $index" style="margin-top: 4px;">
         <div class="input-group col-sm-4 input-group-sm">
           <span class="input-group-addon">secret</span>
-          <select class="form-control" ng-model="secret.model" ng-options="secret.Name for secret in availableSecrets | orderBy: 'Name'">
+          <select class="form-control" ng-model="secret.model" ng-change="checkIfSecretDuplicated()" ng-options="secret.Name for secret in availableSecrets | orderBy: 'Name'">
             <option value="" selected="selected">Select a secret</option>
           </select>
         </div>