webui: custom attr in attributes widget

Web UI doesn't always know what are the possible attributes
for target object. This will allow to add custom attributes
if necessary.

https://fedorahosted.org/freeipa/ticket/4253

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>

install/ui/src/freeipa/aci.js

@@ -548,6 +548,12 @@ aci.attributes_widget = function(spec) {
 
     var that = IPA.checkboxes_widget(spec);
 
+    /**
+     * Additional options which are not defined in metadata
+     * @property {string[]}
+     */
+    that.custom_options = spec.custom_options || [];
+
     that.object_type = spec.object_type;
     that.skip_unmatched = spec.skip_unmatched === undefined ? false : spec.skip_unmatched;
 
@@ -555,15 +561,20 @@ aci.attributes_widget = function(spec) {
 
     that.create = function(container) {
         that.container = container;
-
         that.widget_create(container);
-        that.create_search_filter(container);
-        that.owb_create(container);
 
+        that.controls = $('<div/>', {
+            'class': 'form-inline controls'
+        });
+        that.controls.appendTo(container);
+        that.create_search_filter(that.controls);
+        that.create_add_control(that.controls);
         if (that.undo) {
-            that.create_undo(container);
+            that.create_undo(that.controls);
         }
 
+        that.owb_create(container);
+
         that.create_error_link(container);
     };
 
@@ -595,6 +606,39 @@ aci.attributes_widget = function(spec) {
         filter_container.appendTo(container);
     };
 
+    that.create_add_control = function(container) {
+
+        that.add_button = IPA.button({
+            label: '@i18n:buttons.add',
+            click: that.show_add_dialog
+        });
+        container.append(' ');
+        that.add_button.appendTo(container);
+    };
+
+    that.show_add_dialog = function() {
+
+        var dialog = IPA.form_dialog({
+            name: "add_option",
+            title: "@i18n:objects.permission.add_custom_attr",
+            fields: [
+                {
+                    name: 'attr',
+                    label: '@i18n:objects.permission.attribute',
+                    required: true
+                }
+            ]
+        });
+        dialog.on_confirm = function() {
+            if (!dialog.validate()) return;
+            var attr = dialog.get_field('attr');
+            var value = attr.get_value()[0];
+            that.add_custom_option(value, false, true, true);
+            dialog.close();
+        };
+        dialog.open();
+    };
+
     that.filter_options = function() {
         $("li", that.$node).each(function() {
             var item = $(this);
@@ -641,21 +685,31 @@ aci.attributes_widget = function(spec) {
 
     that.append = function() {
 
-        if (!that.values) return;
-
         var unmatched = [];
 
-        for (var i=0; i<that.values.length; i++) {
-            if (!that.has_option(that.values[i])) {
-                unmatched.push(that.values[i]);
+        function add_unmatched(source) {
+            for (var i=0, l=source.length; i<l; i++) {
+                if (!that.has_option(source[i])) {
+                    that.add_option(source[i], true /* suppress update */);
+                }
             }
         }
 
-        if (unmatched.length > 0 && !that.skip_unmatched) {
-            that.options.push.apply(that.options, that.prepare_options(unmatched));
+        add_unmatched(that.custom_options);
+
+        if (that.values && !that.skip_unmatched) {
+            add_unmatched(that.values);
         }
     };
 
+    that.add_custom_option = function(name, to_custom, check, update) {
+
+        var value = (name || '').toLowerCase();
+        if (to_custom) that.custom_options.push(value);
+        if (check) that.values.push(value);
+        if (update) that.update(that.values);
+    };
+
     that.has_option = function(value) {
         var o = that.options;
         for (var i=0, l=o.length; i<l; i++) {

install/ui/src/freeipa/dialog.js

@@ -1395,8 +1395,7 @@ IPA.confirm_dialog = function(spec) {
             name: 'ok',
             label: that.ok_label,
             click: function() {
-                that.confirmed = true;
-                that.close();
+                that.on_confirm();
             }
         });
 
@@ -1418,6 +1417,18 @@ IPA.confirm_dialog = function(spec) {
     return that;
 };
 
+/**
+ * General form dialog with confirmation feature
+ * @class  dialog.form_dialog
+ * @extends {IPA.confirm_dialog}
+ */
+IPA.form_dialog = function(spec) {
+
+    var that = IPA.confirm_dialog(spec);
+    that.create_content = that.dialog_create_content;
+    return that;
+};
+
 /**
  * Confirm mixin
  *

install/ui/test/data/ipa_init.json

@@ -374,6 +374,8 @@
                             "enable": "Enable token"
                         },
                         "permission": {
+                            "add_custom_attr": "Add custom attribute",
+                            "attribute": "Attribute",
                             "filter": "Filter",
                             "identity": "Permission settings",
                             "managed": "Attribute breakdown",

ipalib/plugins/internal.py

@@ -518,6 +518,8 @@ class i18n_messages(Command):
                 "enable": "Enable token",
             },
             "permission": {
+                "add_custom_attr": _("Add custom attribute"),
+                "attribute": _("Attribute"),
                 "filter": _("Filter"),
                 "identity": _("Permission settings"),
                 "managed": _("Attribute breakdown"),