HBAC Details Page

The UI framework has been extended to include a collection of widgets:
 - ipa_widget: base class
 - ipa_text_widget: text field
 - ipa_radio_widget: radio button
 - ipa_textarea_widget: textarea
 - ipa_button_widget: button
 - ipa_column_widget: column for table
 - ipa_table_widget: table

These widgets can be used to create input controls. They can also be
extended to create custom controls.

The framework has also been enhanced to support custom layouts. This
can be used to change the look of the application without changing
the code. Initially this is only available in details section.

Layout consists of a collection of HTML templates. Each template is a
complete and valid HTML file representing a portion of a page. The
template will be loaded and initialized by the code, then filled with
the data from the server. The layouts are located in
install/static/layouts/<name> folder.

By default, if no templates are used, the fields in the details page
are rendered vertically using dd/dt/dd tags. For pages that require
different layout, a custom UI needs to be developed. There are two ways
to do that:
 - write a custom widget to generate the UI dynamically
 - create an HTML template and write the initialization code

For components that are quite complex or used frequently, it's might
be better to use the first method. For simple pages that are used only
in one location or need to support customization, the second method
might be preferable. Other benefits of templates:
 - cleaner code and UI separation
 - more flexibility in customization
 - new pages can be developed quickly and require less coding
 - multiple templates can be used with the same initialization code
 - easier to maintain

The HBAC details page has been implemented using both methods. By
default it will use custom widgets to generate the page. To use a
custom layout, add the following parameter to the URL, then reload
the page:

  &layout=<name>

Currently the only available layout is 'default' which produces the
same look as the custom widgets.

The HBAC details page is usable, but it still needs additional work.
The access time is not working yet. There is no undo button, hint,
or validation yet.

The table in the association facet has also been changed to use
ipa_association_widget which is derived from ipa_table_widget.

The Makefile has been updated to include the layouts. The unit tests
have been updated as well.

7 files changed, 131 insertions, 109 deletions

diff --git a/install/static/test/all_tests.html b/install/static/test/all_tests.html
index 50c5155d..64412b01 100644
--- a/install/static/test/all_tests.html
+++ b/install/static/test/all_tests.html
@@ -8,6 +8,7 @@
     <script type="text/javascript" src="../jquery.ba-bbq.js"></script>
     <script type="text/javascript" src="../jquery-ui.js"></script>
     <script type="text/javascript" src="../ipa.js"></script>
+    <script type="text/javascript" src="../widget.js"></script>
     <script type="text/javascript" src="../details.js"></script>
     <script type="text/javascript" src="../search.js"></script>
     <script type="text/javascript" src="../add.js"></script>
diff --git a/install/static/test/association_tests.js b/install/static/test/association_tests.js
index 05e43ce4..9f49abf7 100644
--- a/install/static/test/association_tests.js
+++ b/install/static/test/association_tests.js
@@ -18,7 +18,7 @@
  * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
  */
 
-test("Testing serial_associate().", function() {
+test("Testing serial_associator().", function() {
 
     expect(10);
 
@@ -26,25 +26,25 @@ test("Testing serial_associate().", function() {
 
     var counter = 0;
 
-    var form = {
+    var params = {
         method: "add_member",
         pkey: "test",
-        oneObj: "user",
-        manyObj: "group"
+        entity_name: "user",
+        other_entity: "group"
     };
 
-    var manyObjPkeys = ['user1', 'user2', 'user3'];
+    params.values = ['user1', 'user2', 'user3'];
 
     ipa_cmd = function(name, args, options, win_callback, fail_callback, objname) {
         counter++;
 
         equals(
-            name, form.method,
+            name, params.method,
             "Checking ipa_cmd() parameter: method"
         );
 
         equals(
-            objname, form.manyObj,
+            objname, params.other_entity,
             "Checking ipa_cmd() parameter: object name"
         );
 
@@ -58,17 +58,17 @@ test("Testing serial_associate().", function() {
         return 0;
     };
 
-    var on_success = function() {
+    params.on_success = function() {
         ok(true, "on_success() is invoked.");
     };
 
-    var associator = serial_associate(form, manyObjPkeys, on_success);
-    //associator.associateNext();
+    var associator = serial_associator(params);
+    associator.execute();
 
     ipa_cmd = orig_ipa_cmd;
 });
 
-test("Testing BulkAssociator().", function() {
+test("Testing bulk_associator().", function() {
 
     expect(5);
 
@@ -76,36 +76,36 @@ test("Testing BulkAssociator().", function() {
 
     var counter = 0;
 
-    var form = {
+    var params = {
         method: "add_member",
         pkey: "test",
-        oneObj: "user",
-        manyObj: "group"
+        entity_name: "user",
+        other_entity: "group"
     };
 
-    var manyObjPkeys = ['user1', 'user2', 'user3'];
+    params.values = ['user1', 'user2', 'user3'];
 
     ipa_cmd = function(name, args, options, win_callback, fail_callback, objname) {
         counter++;
 
         equals(
-            name, form.method,
+            name, params.method,
             "Checking ipa_cmd() parameter: method"
         );
 
         equals(
-            objname, form.oneObj,
+            objname, params.entity_name,
             "Checking ipa_cmd() parameter: object name"
         );
 
         equals(
-            args[0], form.pkey,
+            args[0], params.pkey,
             "Checking ipa_cmd() parameter: primary key"
         );
 
         equals(
-            options[form.manyObj], "user1,user2,user3",
-            "Checking ipa_cmd() parameter: options[\""+form.manyObj+"\"]"
+            options[params.other_entity], "user1,user2,user3",
+            "Checking ipa_cmd() parameter: options[\""+params.other_entity+"\"]"
         );
 
         var response = {};
@@ -113,12 +113,12 @@ test("Testing BulkAssociator().", function() {
         return 0;
     };
 
-    var on_success = function() {
+    params.on_success = function() {
         ok(true, "on_success() is invoked.");
     };
 
-    var associator = bulk_associate(form, manyObjPkeys, on_success);
-    //associator.associateNext();
+    var associator = bulk_associator(params);
+    associator.execute();
 
     ipa_cmd = orig_ipa_cmd;
 });
diff --git a/install/static/test/details_tests.html b/install/static/test/details_tests.html
index e96fa4b7..3cb20c56 100644
--- a/install/static/test/details_tests.html
+++ b/install/static/test/details_tests.html
@@ -8,6 +8,7 @@
     <script type="text/javascript" src="../jquery.ba-bbq.js"></script>
     <script type="text/javascript" src="../jquery-ui.js"></script>
     <script type="text/javascript" src="../ipa.js"></script>
+    <script type="text/javascript" src="../widget.js"></script>
     <script type="text/javascript" src="../details.js"></script>
     <script type="text/javascript" src="../entity.js"></script>
 
diff --git a/install/static/test/details_tests.js b/install/static/test/details_tests.js
index 4a60216e..8482f6df 100644
--- a/install/static/test/details_tests.js
+++ b/install/static/test/details_tests.js
@@ -19,45 +19,96 @@
  */
 
 
-test("Testing ipa_details_create().", function() {
+test("Testing ipa_details_section.setup().", function() {
 
-    var name = 'NAMENAMENAME';
-    var identity = 'IDIDID';
+    IPA.ajax_options.async = false;
+
+    IPA.init(
+        "data",
+        true,
+        function(data, text_status, xhr) {
+            ok(true, "ipa_init() succeeded.");
+        },
+        function(xhr, text_status, error_thrown) {
+            ok(false, "ipa_init() failed: "+error_thrown);
+        }
+    );
+
+    var result = {};
 
-    var section = ipa_stanza({name:identity, label:name}).
+    var section = ipa_stanza({name:'IDIDID', label:'NAMENAMENAME'}).
         input({name:'cn', label:'Entity Name'}).
         input({name:'description', label:'Description'}).
         input({name:'number', label:'Entity ID'});
 
 
-    var details = section.fields;
-    var parent = $("<div/>");
-    var container  = $("<div title='entity'/>");
-    parent.append(container);
-    ipa_details_section_setup(parent,container,  section);
+    var fields = section.fields;
+    var container = $("<div/>");
+    section.setup(container, result);
 
-    ok(parent.find('hr').length);
+    var dl = container.find('dl');
 
-    var h2= parent.find('h2');
-    ok(h2.length);
-    ok(h2[0].innerHTML.indexOf(name) > 1,"find name in html");
+    same(
+        dl.length, 1,
+        'Checking dl tag'
+    );
+
+    same(
+        dl.attr('id'), section.name,
+        'Checking section name'
+    );
+
+    var dts = $('dt', dl);
+    same(
+        dts.length, fields.length, // each field generates dt & dd
+        'Checking number of children'
+    );
+
+    for (var i=0; i<fields.length; i++) {
+        var dt = dts.get(i);
+        same(
+            dt.title, fields[i].name,
+            'Checking field '+i+'\'s title'
+        );
+
+        same(
+            dt.innerHTML, fields[i].label+':',
+            'Checking field '+i+'\'s label'
+        );
+    }
+});
 
-    var dl = parent.find('dl');
-    ok(dl.length);
-    same(dl[0].children.length,3,"children tag count");
-    same(dl[0].id, identity,"identity");
-    same(details[0].name,  dl[0].children[0].title,"name");
-    var d = dl[0].children[0].innerHTML;
-    same(details[0].label+":",d);
-    same(details[2].name,dl[0].children[2].title);
-    d = dl[0].children[2].innerHTML;
-    same(details[2].label+":" ,d);
 
-});
 
+test("Testing details lifecycle: create, save ().", function(){
 
+    IPA.ajax_options.async = false;
 
-test("Testing details lifecycle:setup, load, save ().", function(){
+    IPA.init(
+        "data",
+        true,
+        function(data, text_status, xhr) {
+            ok(true, "ipa_init() succeeded.");
+        },
+        function(xhr, text_status, error_thrown) {
+            ok(false, "ipa_init() failed: "+error_thrown);
+        }
+    );
+
+    var result = {};
+
+    ipa_cmd(
+        'user_show',
+        ['kfrog'],
+        {},
+        function(data, text_status, xhr) {
+            result = data.result.result;
+            ok(true, "ipa_cmd() succeeded.");
+        },
+        function(xhr, text_status, error_thrown) {
+            ok(false, "ipa_cmd() failed: "+error_thrown);
+        }
+    );
 
     var setup_status_called = false;
     var save_password_called= false;
@@ -82,6 +133,7 @@ test("Testing details lifecycle:setup, load, save ().", function(){
 
     function setup_st(){
     }
+
     var container = $("<div/>");
     var obj_name = 'user';
     ipa_entity_set_details_definition(obj_name, [
@@ -116,46 +168,42 @@ test("Testing details lifecycle:setup, load, save ().", function(){
 
     var entity = ipa_get_entity(obj_name);
     var facet = entity.get_facet('details');
-    var sections = facet.get_sections();
-    ipa_details_create(container, sections);
+    facet.create(container, result);
 
     var contact = container.find('dl#contact.entryattrs');
-    ok(contact);
-    var identity = container.find('dl#identity.entryattrs');
-    ok(identity);
-    var dts= identity.find('dt');
-    ok(dts);
-    same(6, dts.length);
-    same('initials',dts[5].title);
 
-    //TODO extract into Fixture
-    IPA.ajax_options.async = false;
-    $.ajaxSetup(IPA.ajax_options);
-    IPA.json_url = './data';
-    IPA.use_static_files = true;
-
-    container.attr('id','user');
-
-    ok (setup_status_called , 'setup status called');
+    ok(
+        contact,
+        'dl tag for contact is created'
+    );
 
+    var identity = container.find('dl#identity.entryattrs');
 
-    ipa_details_load(container,
-                     'kfrog',
-                     function(){load_success_called = true},
-                     function(){load_failure_called = true});
+    ok(
+        identity,
+        'dl tag for identity is created'
+    );
 
-    ok (load_success_called,'load success called');
-    ok (!load_failure_called,'load failure not called');
+    var dts= identity.find('dt');
 
+    same(
+        dts.length, 6,
+        'Checking dt tags for identity'
+    );
 
-    ok (load_manager_called, 'load manager called');
+    same(
+        dts[5].title, facet.get_sections()[0].get_fields()[5].name,
+        'Checking dt title'
+    );
 
+    container.attr('id','user');
 
-    ipa_details_load(container,
-                     'kfrog',
-                     function(){load_success_called = true},
-                     function(){load_failure_called = true});
+    ok (
+        setup_status_called,
+        'Setup status called'
+    );
 
+    ok (load_manager_called, 'load manager called');
 
     ipa_details_update(container,
                      'kfrog',
@@ -183,34 +231,3 @@ test("Testing  _ipa_create_text_input().", function(){
     same(text[0].value,value );
     same(text[0].type,"text" );
 });
-
-
-test("Testing ipa_details_section_setup()",function(){
-
-    var section = ipa_stanza({name: 'IDIDID', label: 'NAMENAMENAME'}).
-        input({name:'cn', label:'Entity Name'}).
-        input({name:'description', label:'Description'}).
-        input({name:'number', label:'Entity ID'});
-    var fields = section.fields;
-    var container = $("<div title='entity'/>");
-    var details = $("<div/>");
-    container.append(details);
-
-    ipa_details_section_setup(container, details, section);
-
-    ok(container.find('hr'));
-
-    var h2= container.find('h2');
-    ok(h2);
-    ok(h2[0].innerHTML.indexOf(section.label) > 1,"find name in html");
-
-    var dl = container.find('dl');
-    ok(dl);
-    same(dl[0].children.length,3);
-    same(dl[0].id, section.name);
-    same(dl[0].children[0].title, fields[0].name);
-    same(dl[0].children[0].innerHTML, fields[0].label+":");
-    same(dl[0].children[2].title, fields[2].name);
-    same(dl[0].children[2].innerHTML, fields[2].label+":");
-
-});
diff --git a/install/static/test/entity_tests.html b/install/static/test/entity_tests.html
index 0f796295..cd6b6409 100644
--- a/install/static/test/entity_tests.html
+++ b/install/static/test/entity_tests.html
@@ -7,6 +7,7 @@
     <script type="text/javascript" src="../jquery.js"></script>
     <script type="text/javascript" src="../jquery.ba-bbq.js"></script>
     <script type="text/javascript" src="../ipa.js"></script>
+    <script type="text/javascript" src="../widget.js"></script>
     <script type="text/javascript" src="../details.js"></script>
     <script type="text/javascript" src="../search.js"></script>
     <script type="text/javascript" src="../add.js"></script>
diff --git a/install/static/test/entity_tests.js b/install/static/test/entity_tests.js
index cc43b879..08fc3111 100644
--- a/install/static/test/entity_tests.js
+++ b/install/static/test/entity_tests.js
@@ -170,7 +170,7 @@ test('Testing ipa_entity_quick_links().', function() {
 
     var container = $('<div/>', {
         title: obj_name,
-        class: 'search-container'
+        class: 'entity-container'
     });
 
     var search_table = $('<table/>', {
diff --git a/install/static/test/navigation_tests.html b/install/static/test/navigation_tests.html
index fa911d6e..16d095ac 100644
--- a/install/static/test/navigation_tests.html
+++ b/install/static/test/navigation_tests.html
@@ -7,6 +7,8 @@
     <script type="text/javascript" src="../jquery.js"></script>
     <script type="text/javascript" src="../jquery.ba-bbq.js"></script>
     <script type="text/javascript" src="../jquery-ui.js"></script>
+    <script type="text/javascript" src="../ipa.js"></script>
+    <script type="text/javascript" src="../entity.js"></script>
     <script type="text/javascript" src="../navigation.js"></script>
     <script type="text/javascript" src="navigation_tests.js"></script>
 </head>