GDB-8754 Implemented ACL rule creation functionality

## What Implemented the ACL rule creation functionality. ## Why By requirement. ## How * Implemented the add rule and cancel operations in the controller. * Extended the ACL management table component implementing an editable form with fields for each rule property. * Implemented tests. Fix preview cell content splitting. Fix field type and description
Ontotext-AD · Sep 18, 2023 · c9da37d · c9da37d
1 parent c5b8213
commit c9da37d
Show file tree

Hide file tree

Showing 9 changed files with 515 additions and 86 deletions.
diff --git a/src/css/aclmanagement.css b/src/css/aclmanagement.css
@@ -1,4 +1,9 @@
+.acl-management-view .acl-rules {
+    table-layout: fixed;
+}
+
 .acl-management-view .acl-rules .toolbar {
+    height: 35px;
     padding: 0;
     position: relative;
 }
@@ -8,20 +13,82 @@
     background-color: var(--color-info-light);
 }
 
-.acl-management-view .acl-rules .actions-column {
-    min-width: 107px;
+.acl-management-view .acl-rules .preview-rule-row td.data {
+    overflow-wrap: break-word;
+}
+
+.acl-management-view .acl-rules .index-column {
+    width: 2%;
+}
+
+.acl-management-view .acl-rules .reorder-column {
+    width: 25px;
 }
 
 .acl-management-view .acl-rules .reorder-cell button {
     padding: 0;
     cursor: pointer;
 }
 
+.acl-management-view .acl-rules .data input {
+    width: 95%;
+    display: inline-block;
+}
+
+.acl-management-view .acl-rules .data input.ng-invalid ~ em:after {
+    content: "*";
+    color: red;
+    display: inline;
+    position: absolute;
+    margin: 4px 0 0 3px;
+}
+
+.acl-management-view .acl-rules .subject-column {
+    width: 18%;
+}
+
+.acl-management-view .acl-rules .predicate-column {
+    width: 18%;
+}
+
+.acl-management-view .acl-rules .object-column {
+    width: 18%;
+}
+
+.acl-management-view .acl-rules .context-column {
+    width: 18%;
+}
+
+.acl-management-view .acl-rules .role-column {
+    width: 18%;
+}
+
+.acl-management-view .acl-rules .policy-column {
+    width: 100px;
+}
+
+.acl-management-view .acl-rules .actions-column {
+    width: 107px;
+}
+
+.acl-management-view .acl-rules .actions-cell {
+    text-align: right;
+}
+
 .acl-management-view .acl-rules .actions-cell button {
     padding: 0;
     cursor: pointer;
 }
 
 .acl-management-view .acl-rules .selected {
-    outline: 1px solid var(--secondary-color);
+    animation: highlight 2s 1;
+}
+
+@keyframes highlight {
+    0% {
+        background-color: rgba(255, 255, 153, .8);
+    }
+    100% {
+        background-color: rgba(255, 255, 255, 0);
+    }
 }
diff --git a/src/i18n/locale-en.json b/src/i18n/locale-en.json
@@ -138,15 +138,28 @@
                 "role": "Role",
                 "policy": "Policy"
             },
+            "field_placeholders": {
+                "subject": "Subject",
+                "predicate": "Predicate",
+                "object": "Object",
+                "context": "Context",
+                "role": "Role"
+            },
             "actions": {
                 "move_up": "Move the rule up",
                 "move_down": "Move the rule down",
                 "delete_rule": "Delete rule",
                 "add_rule": "Add new rule",
-                "edit_rule": "Edit rule"
+                "edit_rule": "Edit rule",
+                "save_rule": "Save rule",
+                "cancel_rule_editing": "Cancel rule editing",
+                "save_acl": "Save ACL",
+                "cancel_acl_saving": "Cancel"
+
             },
             "messages": {
-                "no_data": "There are no rules defined in current repository"
+                "no_data": "There are no rules defined in current repository",
+                "invalid_form": "Fill in valid data in all fields before saving rule"
             }
         },
         "errors": {

diff --git a/src/i18n/locale-fr.json b/src/i18n/locale-fr.json
@@ -138,15 +138,27 @@
                 "role": "Rôle",
                 "policy": "Politique"
             },
+            "field_placeholders": {
+                "subject": "Sujet",
+                "predicate": "Prédicat",
+                "object": "Objet",
+                "context": "Contexte",
+                "role": "Politique"
+            },
             "actions": {
                 "move_up": "Déplacer la règle vers le haut",
                 "move_down": "Déplacer la règle vers le bas",
                 "delete_rule": "Supprimer la règle",
                 "add_rule": "Ajouter une nouvelle règle",
-                "edit_rule": "Modifier la règle"
+                "edit_rule": "Modifier la règle",
+                "save_rule": "Enregistrer la règle",
+                "cancel_rule_editing": "Annuler la modification des règles",
+                "save_acl": "Enregistrer la liste de contrôle d'accès",
+                "cancel_acl_saving": "Annuler"
             },
             "messages": {
-                "no_data": "Aucune règle n'est définie dans le référentiel actuel"
+                "no_data": "Aucune règle n'est définie dans le référentiel actuel",
+                "invalid_form": "Remplissez des données valides dans tous les champs avant d'enregistrer la règle"
             }
         },
         "errors": {

diff --git a/src/js/angular/aclmanagement/controllers.js b/src/js/angular/aclmanagement/controllers.js
@@ -20,6 +20,12 @@ function AclManagementCtrl($scope, toastr, AclManagementRestService, $repositori
     // Public fields
     //
 
+    /**
+     * The model for the rule editing form.
+     * @type {Object} The edited rule form model.
+     */
+    $scope.ruleData = {};
+
     /**
      * Flag controlling the loading indicator while some http operation is in progress.
      * @type {boolean}
@@ -31,6 +37,7 @@ function AclManagementCtrl($scope, toastr, AclManagementRestService, $repositori
      * @type {undefined|ACListModel}
      */
     $scope.rulesModel = undefined;
+
     /**
      * A copy of the list with ACL rules that will be managed in this view. This is needed for restoring functionality.
      * @type {undefined|ACListModel}
@@ -43,16 +50,23 @@ function AclManagementCtrl($scope, toastr, AclManagementRestService, $repositori
      */
     $scope.selectedRule = undefined;
 
+    /**
+     * The index of a rule which is opened for edit or create.
+     * @type {undefined|number}
+     */
+    $scope.editedRuleIndex = undefined;
+
     //
     // Public functions
     //
 
     /**
-     * Adds a new rule at a given index.
+     * Adds a new rule at a given index in the rulesModel.
      * @param {number} index
      */
     $scope.addRule= (index) => {
-        // TODO: implement
+        $scope.rulesModel.addRule(index);
+        $scope.editedRuleIndex = index;
     };
 
     /**
@@ -71,6 +85,22 @@ function AclManagementCtrl($scope, toastr, AclManagementRestService, $repositori
         // TODO: implement
     };
 
+    /**
+     * Saves a rule at a given index in the rulesModel.
+     */
+    $scope.saveRule= () => {
+        $scope.editedRuleIndex = undefined;
+    };
+
+    /**
+     * Cancels the editing operation of a rule at a given index.
+     * @param {number} index
+     */
+    $scope.cancelEditing = (index) => {
+        $scope.rulesModel.removeRule(index);
+        $scope.editedRuleIndex = undefined;
+    };
+
     /**
      * Moves a rule on the given index in the rulesModel one position up by swapping it with the rule above.
      * @param {number} index
@@ -89,6 +119,14 @@ function AclManagementCtrl($scope, toastr, AclManagementRestService, $repositori
         $scope.selectedRule = index + 1;
     };
 
+    $scope.saveAcl = () => {
+        // TODO: implement
+    };
+
+    $scope.cancelAclSave = () => {
+        // TODO: implement
+    };
+
     //
     // Private functions
     //
@@ -115,7 +153,6 @@ function AclManagementCtrl($scope, toastr, AclManagementRestService, $repositori
 
     /**
      * Watching for repository changes and reload the rules, because they are stored per repository.
-     * TODO: later when we have the create/edit operations we would need a confirmation before repo change in order to prevent data loss for the user.
      */
     $scope.$watch(function () {
         return $repositories.getActiveRepository();

diff --git a/src/js/angular/aclmanagement/model.js b/src/js/angular/aclmanagement/model.js
@@ -11,6 +11,14 @@ export class ACListModel {
         return this.aclRules.length;
     }
 
+    addRule(index) {
+        this.aclRules.splice(index, 0, new ACRuleModel());
+    }
+
+    removeRule(index) {
+        this.aclRules.splice(index, 1);
+    }
+
     moveUp(index) {
         const previousRule = this.aclRules[index - 1];
         this.aclRules[index - 1] = this.aclRules[index];
@@ -42,7 +50,7 @@ export class ACRuleModel {
      * @param {string} role
      * @param {string} policy
      */
-    constructor(subject, predicate, object, context, role, policy) {
+    constructor(subject = '', predicate = '', object= '', context= '', role= '', policy= ACL_POLICY.ALLOW) {
         this._subject = subject;
         this._predicate = predicate;
         this._object = object;