Moved entity contents outside navigation.

Previously the entities and navigation are entangled inside a common
DOM structure which limits code reuse. Now they have been moved
into separate structures.

9 files changed, 98 insertions, 125 deletions

diff --git a/install/ui/associate.js b/install/ui/associate.js
index 632fcc52d..68009b571 100644
--- a/install/ui/associate.js
+++ b/install/ui/associate.js
@@ -799,25 +799,6 @@ IPA.association_facet = function (spec) {
         return pkey != that.pkey;
     };
 
-    that.create_action_panel = function(container) {
-
-        that.facet_create_action_panel(container);
-
-        var buttons = $('.action-controls', container);
-
-        $('<input/>', {
-            'type': 'button',
-            'name': 'remove',
-            'value': IPA.messages.buttons.remove
-        }).appendTo(buttons);
-
-        $('<input/>', {
-            'type': 'button',
-            'name': 'add',
-            'value': IPA.messages.buttons.enroll
-        }).appendTo(buttons);
-    };
-
     that.create_content = function(container) {
 
         that.pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
diff --git a/install/ui/details.js b/install/ui/details.js
index 1d653c237..433f682f0 100644
--- a/install/ui/details.js
+++ b/install/ui/details.js
@@ -264,13 +264,9 @@ IPA.details_facet = function(spec) {
 
     var that = IPA.facet(spec);
 
-    that.label =  ( IPA.messages && IPA.messages.facets &&  IPA.messages.facets.details)  || spec.label;
-    that.is_dirty = spec.is_dirty || is_dirty;
-    that.create_content = spec.create_content || create_content;
-    that.setup = spec.setup || setup;
-    that.load = spec.load || load;
+    that.label = (IPA.messages && IPA.messages.facets && IPA.messages.facets.details) || spec.label;
+
     that.update = spec.update || IPA.details_update;
-    that.reset = spec.reset || reset;
     that.refresh = spec.refresh || IPA.details_refresh;
 
     that.sections = [];
@@ -323,24 +319,7 @@ IPA.details_facet = function(spec) {
         }
     };
 
-    that.create_action_panel = function(container) {
-
-        that.facet_create_action_panel(container);
-
-        var buttons = $('.action-controls', container);
-
-        $('<input/>', {
-            'type': 'text',
-            'name': 'reset'
-        }).appendTo(buttons);
-
-        $('<input/>', {
-            'type': 'text',
-            'name': 'update'
-        }).appendTo(buttons);
-    };
-
-    function create_content(container) {
+    that.create_content = function(container) {
 
         var label = IPA.metadata.objects[that.entity_name].label;
 
@@ -399,9 +378,9 @@ IPA.details_facet = function(spec) {
 
             details.append('<hr/>');
         }
-    }
+    };
 
-    function setup(container) {
+    that.setup = function(container) {
 
         that.facet_setup(container);
 
@@ -468,7 +447,7 @@ IPA.details_facet = function(spec) {
 
             section.setup(div);
         }
-    }
+    };
 
     function toggle(section, visible) {
         var header = $('h2[name='+section.name+']', that.container);
@@ -491,7 +470,7 @@ IPA.details_facet = function(spec) {
     that.new_key = new_key;
 
 
-    function is_dirty() {
+    that.is_dirty = function() {
 
         var i;
         for ( i =0; i <   that.sections.length; i +=1 ){
@@ -501,9 +480,9 @@ IPA.details_facet = function(spec) {
         }
 
         return false;
-    }
+    };
 
-    function load(record) {
+    that.load = function (record) {
         that.record = record;
         for (var i=0; i<that.sections.length; i++) {
             var section = that.sections[i];
@@ -512,15 +491,15 @@ IPA.details_facet = function(spec) {
         if (that.pkey){
             that.entity_header.set_pkey(that.pkey);
         }
-    }
+    };
 
-    function reset() {
+    that.reset = function() {
 
         for (var i=0; i<that.sections.length; i++) {
             var section = that.sections[i];
             section.reset();
         }
-    }
+    };
 
     that.details_facet_init = that.init;
     that.details_facet_create_content = that.create_content;
diff --git a/install/ui/dns.js b/install/ui/dns.js
index 5cb49e55f..5af6e7a32 100644
--- a/install/ui/dns.js
+++ b/install/ui/dns.js
@@ -304,25 +304,6 @@ IPA.records_facet = function (spec){
         return pkey != that.pkey || record != that.record;
     };
 
-    that.create_action_panel = function(container) {
-
-        that.facet_create_action_panel(container);
-
-        var buttons = $('.action-controls', container);
-
-        $('<input/>', {
-            'type': 'button',
-            'name': 'remove',
-            'value': IPA.messages.buttons.remove
-        }).appendTo(buttons);
-
-        $('<input/>', {
-            'type': 'button',
-            'name': 'add',
-            'value': IPA.messages.buttons.add
-        }).appendTo(buttons);
-    };
-
     function create_content(container) {
 
         $('<h1/>',{
@@ -537,7 +518,7 @@ IPA.records_facet = function (spec){
 
     //TODO this is cut and pasted from search, we need to unify
     function display(obj_name, data){
-        var selector = '.entity-container[title=' + obj_name + ']';
+        var selector = '.entity-container[name=' + obj_name + ']';
         var thead = $(selector + ' thead');
         var tbody = $(selector + ' tbody');
         var tfoot = $(selector + ' tfoot');
diff --git a/install/ui/entity.js b/install/ui/entity.js
index a4488756e..161f34e6c 100644
--- a/install/ui/entity.js
+++ b/install/ui/entity.js
@@ -282,8 +282,7 @@ IPA.current_facet =  function (entity){
     return facet_name;
 };
 
-
-IPA.entity_setup = function (container) {
+IPA.entity_setup = function(container) {
 
     var entity = this;
 
@@ -303,7 +302,6 @@ IPA.entity_setup = function (container) {
         IPA.entity_name = entity.name;
     }
 
-    container.attr('title', entity.name);
     if (!entity.header){
         entity.header = IPA.entity_header({entity:entity,container:container});
     }
@@ -316,7 +314,6 @@ IPA.entity_setup = function (container) {
     facet.refresh();
 };
 
-
 IPA.nested_tab_labels = {};
 
 IPA.get_nested_tab_label = function(entity_name){
@@ -538,10 +535,7 @@ IPA.entity_header = function(spec){
 
     function entity_container() {
         that.entity_container =
-            $("<div/>",{
-                "class":'entity-container',
-                id: 'entity-container-' + entity.name
-            }).
+            $('<div/>').
             append(facet_tabs()).
             append(content());
         return that.entity_container;
diff --git a/install/ui/index.html b/install/ui/index.html
index 48cc40d87..6b17c7e30 100644
--- a/install/ui/index.html
+++ b/install/ui/index.html
@@ -59,6 +59,7 @@
       </span>
     </div>
     <div id="navigation" class="tabs"></div>
+    <div id="content"></div>
   </div>
 </body>
 
diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index f7e3d2241..9e5625488 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -30,6 +30,7 @@ body{
         margin-left: auto;
         margin-right: auto;
         width: 960px;
+    background: url("centered-bg.png") no-repeat scroll 0 12.2em transparent;
 }
 
 .ui-widget {
@@ -117,13 +118,15 @@ div.header span.header-loggedinas {
 
 /* ---- Navigation ---- */
 div.tabs {
-    overflow: auto;
     width: 100%;
     height: 100%;
-    min-height: 40em;
-        background: url("centered-bg.png") no-repeat scroll 0 8.4em transparent;
+    min-height: 4em;
+    background: transparent;
 }
 
+#content {
+    min-height: 35em;
+}
 
 
 ul#viewtype {
@@ -370,7 +373,7 @@ span.attrhint {
         background-color: transparent !important;
 }
 
-.ui-widget-content .ui-icon {
+.ui-icon {
   //background-image: url("ui-icons_222222_256x240.png");
     background-color: #e2e2e2;
 }
@@ -383,7 +386,7 @@ span.attrhint {
         position: relative;
 }
 
-.ui-widget-content a {
+a {
     text-decoration: none;
     color: #1d85d5;
     font-weight: normal;
@@ -421,7 +424,7 @@ span.attrhint {
     margin-right: .1em;
 }
 
-.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, #content .ui-state-default {
     -moz-border-radius: .3em;
         -webkit-border-radius: .3em;
      background: -moz-linear-gradient(top,  #959595,  #5e5e5e);
@@ -509,6 +512,11 @@ span.ui-icon-search {
     background-image: url("Subnav-background.png");
 }
 
+.tabs3 .ui-tabs-nav {
+    padding:  1em 2em 0.1em 2em;
+    background: transparent;
+}
+
 .tabs2 .ui-tabs-nav li {
     width:auto;
     margin: 0;
@@ -811,9 +819,7 @@ table.scrollable tbody {
 }
 
 div.entity-header {
-    width:100%px;
-    padding:10px;
-    margin:10px;
+    padding: 0px 20px 10px;
 }
 
 
diff --git a/install/ui/navigation.js b/install/ui/navigation.js
index 9b8f649df..de42ef2ab 100644
--- a/install/ui/navigation.js
+++ b/install/ui/navigation.js
@@ -28,6 +28,7 @@ IPA.navigation = function(spec) {
     var that = {};
 
     that.container = spec.container;
+    that.content = spec.content;
     that.tab_class = spec.tab_class || 'tabs';
 
     that.tabs = [];
@@ -116,7 +117,7 @@ IPA.navigation = function(spec) {
         tabs.tabs({
             select: function(event, ui) {
                 var panel = $(ui.panel);
-                var name = panel.attr('id');
+                var name = panel.attr('name');
 
                 return that.show_page(name);
             }
@@ -128,11 +129,13 @@ IPA.navigation = function(spec) {
         container.addClass(that.tab_class);
         container.addClass('tabs'+depth);
 
+        var parent_id = container.attr('id');
+
         var ul = $('<ul/>').appendTo(container);
 
         for (var i=0; i<tabs.length; i++) {
             var tab = tabs[i];
-
+            var tab_id = parent_id+'-'+i;
             var label = tab.name;
             if (tab.entity) {
                 var entity = IPA.get_entity(tab.entity);
@@ -149,32 +152,37 @@ IPA.navigation = function(spec) {
             }
 
             $('<li/>').append($('<a/>', {
-                href: '#'+tab.name,
-                title: tab.name,
+                href: '#'+tab_id,
+                title: label,
                 html: label
             })).appendTo(ul);
 
-            tab.content = $('<div/>', {
-                id: tab.name
+            tab.container = $('<div/>', {
+                id: tab_id,
+                name: tab.name
             }).appendTo(container);
 
-            if (tab.entity) {
-                tab.content.addClass('entity-container');
-            }
-
             if (tab.children && tab.children.length) {
-                that._create(tab.children, tab.content, depth+1);
+                that._create(tab.children, tab.container, depth+1);
+
+            } else if (tab.entity) {
+                tab.content = $('<div/>', {
+                    name: tab.name,
+                    title: label,
+                    'class': 'entity-container'
+                }).appendTo(that.content);
             }
         }
     };
 
     that.update = function() {
+        $('.entity-container', that.content).css('display', 'none');
         that._update(that.tabs, that.container, 1);
     };
 
     that._update = function(tabs, container, depth) {
 
-        var parent_name = container.attr('id');
+        var parent_name = container.attr('name') || container.attr('id');
         var tab_name = that.get_state(parent_name);
 
         var index = 0;
@@ -186,9 +194,10 @@ IPA.navigation = function(spec) {
         var tab = tabs[index];
 
         if (tab.children && tab.children.length) {
-            that._update(tab.children, tab.content, depth+1);
+            that._update(tab.children, tab.container, depth+1);
 
         } else if (tab.entity) {
+            $('.entity-container[name="'+tab.entity.name+'"]', that.content).css('display', 'inline');
             tab.entity.setup(tab.content);
         }
     };
diff --git a/install/ui/test/navigation_tests.js b/install/ui/test/navigation_tests.js
index e88c99d94..0f8f1be4a 100644
--- a/install/ui/test/navigation_tests.js
+++ b/install/ui/test/navigation_tests.js
@@ -43,8 +43,8 @@ test("Testing IPA.navigation.create().", function() {
                                metadata:IPA.metadata.objects.user});
         that.setup = function(container){
             user_mock_called = true;
-            same(container[0].id,'user','user id');
-            same(container[0].nodeName,'DIV','user div');
+            same(container.attr('name'), 'user', 'user container name');
+            same(container[0].nodeName, 'DIV', 'user container element');
         };
         return that;
     };
@@ -53,8 +53,8 @@ test("Testing IPA.navigation.create().", function() {
                                metadata:IPA.metadata.objects.group});
         that.setup = function(container){
             group_mock_called = true;
-            same(container[0].id,'group','group id');
-            same(container[0].nodeName,'DIV','group Div');
+            same(container.attr('name'), 'group','user container name');
+            same(container[0].nodeName, 'DIV', 'user container element');
         };
         return that;
     };
@@ -62,12 +62,14 @@ test("Testing IPA.navigation.create().", function() {
     IPA.start_entities();
 
     IPA.metadata = {};
-    var container = $('<div id="navigation"/>').appendTo(document.body);
+    var navigation_container = $('<div id="navigation"/>').appendTo(document.body);
+    var entity_container = $('<div id="content"/>').appendTo(document.body);
     var user_mock_called = false;
     var group_mock_called = false;
 
     var navigation = IPA.navigation({
-        container: container,
+        container: navigation_container,
+        content: entity_container,
         tabs: [
             { name:'identity', label:'IDENTITY', children: [
                 {name:'user', entity:'user'},
@@ -81,19 +83,34 @@ test("Testing IPA.navigation.create().", function() {
 
     ok(user_mock_called, "mock user setup was called");
     ok(!group_mock_called, "mock group setup was not called because the tab is inactive");
-    same( container[0].children.length, 2, "Two Child tabs");
-    same( container[0].children[1].id, 'identity', "Identity Tab");
-    same( container[0].children[1].children[1].id, 'user', "User Tab");
-    same( container[0].children[1].children[2].id, 'group', "User Tab");
-    container.remove();
+
+    var level1_tabs = navigation_container.children('div');
+    same(level1_tabs.length, 1, "One level 1 tab");
+
+    var identity_tab = level1_tabs.first();
+    same(identity_tab.attr('name'), 'identity', "Identity Tab");
+
+    var level2_tabs = identity_tab.children('div');
+    same(level2_tabs.length, 2, "Two level 2 tabs");
+
+    var user_tab = level2_tabs.first();
+    same(user_tab.attr('name'), 'user', "User Tab");
+
+    var group_tab = user_tab.next();
+    same(group_tab.attr('name'), 'group', "Group Tab");
+
+    entity_container.remove();
+    navigation_container.remove();
 });
 
 test("Testing IPA.navigation.update() with valid index.", function() {
 
-    var container = $('<div id="navigation"/>').appendTo(document.body);
+    var navigation_container = $('<div id="navigation"/>').appendTo(document.body);
+    var entity_container = $('<div id="content"/>').appendTo(document.body);
 
     var navigation = IPA.navigation({
-        container: container,
+        container: navigation_container,
+        content: entity_container,
         tabs: [
             { name:'identity', label:'IDENTITY', children: [
                 {name:'one', label:'One', setup: function (){}},
@@ -121,26 +138,29 @@ test("Testing IPA.navigation.update() with valid index.", function() {
     navigation.update();
 
     same(
-        container.tabs('option', 'selected'), 0,
+        navigation_container.tabs('option', 'selected'), 0,
         "Active tab at level 1"
     );
 
     same(
-        $('#identity').tabs('option', 'selected'), 1,
+        $('.tabs[name=identity]', navigation_container).tabs('option', 'selected'), 1,
         "Active tab at level 2"
     );
 
     navigation.remove_state("identity");
 
-    container.remove();
+    entity_container.remove();
+    navigation_container.remove();
 });
 
 test("Testing IPA.navigation.update() with out-of-range index.", function() {
 
-    var container = $('<div id="navigation"/>').appendTo(document.body);
+    var navigation_container = $('<div id="navigation"/>').appendTo(document.body);
+    var entity_container = $('<div id="content"/>').appendTo(document.body);
 
     var navigation = IPA.navigation({
-        container: container,
+        container: navigation_container,
+        content: entity_container,
         tabs: [
             { name:'identity', label:'IDENTITY', children: [
                 {name:'one', label:'One', setup: function (){}},
@@ -168,16 +188,17 @@ test("Testing IPA.navigation.update() with out-of-range index.", function() {
     navigation.update();
 
     same(
-        container.tabs('option', 'selected'), 0,
+        navigation_container.tabs('option', 'selected'), 0,
         "Active tab at level 1"
     );
 
     same(
-        $('#identity').tabs('option', 'selected'), 0,
+        $('.tabs[name=identity]', navigation_container).tabs('option', 'selected'), 0,
         "Active tab at level 2"
     );
 
     navigation.remove_state("identity");
 
-    container.remove();
+    entity_container.remove();
+    navigation_container.remove();
 });
diff --git a/install/ui/webui.js b/install/ui/webui.js
index eac07db23..a44b9f0e6 100644
--- a/install/ui/webui.js
+++ b/install/ui/webui.js
@@ -128,7 +128,8 @@ $(function() {
         }
 
         return factory({
-            container: $('#navigation')
+            container: $('#navigation'),
+            content: $('#content')
         });
     }
 
@@ -153,7 +154,7 @@ $(function() {
 
 
     function init_on_error(xhr, text_status, error_thrown) {
-        var container = $('#navigation').empty();
+        var container = $('#content').empty();
         container.append('<p>Error: '+error_thrown.name+'</p>');
         container.append('<p>'+error_thrown.title+'</p>');
         container.append('<p>'+error_thrown.message+'</p>');