From 840278f8b67989230b69be524e3bf296ad060414 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20St=C3=BCrmer?= <stuermer@weltenwort.de>
Date: Tue, 6 Dec 2016 16:21:51 +0100
Subject: [PATCH] Reimplement the local nav without multi-transclusion

The local navigation directive does not require the multi-transclusion
workaround anymore. Instead, it comes with a set of child directives
(`localNavigationRow` and `localNavigationRowSection`) that can be used
to compose a complete local navigation declaratively.
---
 .../kibana/public/context/app.html            | 63 ++++++++++---------
 src/core_plugins/kibana/public/context/app.js |  2 +-
 src/ui/public/local_navigation/index.js       |  3 +
 .../local_navigation/local_navigation.html    |  7 ---
 .../local_navigation/local_navigation.js      |  7 +--
 .../local_navigation/local_navigation_row.js  | 18 ++++++
 .../local_navigation_row_section.js           | 15 +++++
 7 files changed, 72 insertions(+), 43 deletions(-)
 create mode 100644 src/ui/public/local_navigation/index.js
 delete mode 100644 src/ui/public/local_navigation/local_navigation.html
 create mode 100644 src/ui/public/local_navigation/local_navigation_row.js
 create mode 100644 src/ui/public/local_navigation/local_navigation_row_section.js

diff --git a/src/core_plugins/kibana/public/context/app.html b/src/core_plugins/kibana/public/context/app.html
index 4d5ac3699c5d2..aab859ac605e1 100644
--- a/src/core_plugins/kibana/public/context/app.html
+++ b/src/core_plugins/kibana/public/context/app.html
@@ -1,39 +1,42 @@
 <div class="app-container">
   <local-navigation>
-    <!-- Transcluded elements. -->
-    <div data-transclude-slots>
+    <local-navigation-row>
       <!-- Breadcrumbs. -->
-      <div data-transclude-slot="primaryLeft" class="localBreadcrumbs">
-        <div class="localBreadcrumb">
-          <a class="localBreadcrumb__link" href="#/discover">Discover</a>
+      <local-navigation-row-section>
+        <div class="localBreadcrumbs">
+          <div class="localBreadcrumb">
+            <a class="localBreadcrumb__link" href="#/discover">Discover</a>
+          </div>
+          <div class="localBreadcrumb">
+            <span>Context of </span>
+            <span class="localBreadcrumb__emphasis" ng-bind="contextApp.anchorUid"></span>
+            <span> in </span>
+            <span class="localBreadcrumb__emphasis" ng-bind="contextApp.indexPattern.id"></span>
+          </div>
         </div>
-        <div class="localBreadcrumb">
-          <span>Context of </span>
-          <span class="localBreadcrumb__emphasis" ng-bind="contextApp.anchorUid"></span>
-          <span> in </span>
-          <span class="localBreadcrumb__emphasis" ng-bind="contextApp.indexPattern.id"></span>
-        </div>
-      </div>
+      </local-navigation-row-section>
 
-      <div data-transclude-slot="primaryRight" class="localMenu">
-        <div class="localMenuItem" ng-click="contextApp.actions.increaseSize()">
-          <div class="fa fa-plus"></div>
-        </div>
-        <div class="localMenuItem">
-          <input
-            class="localMenuItem__input--inPlace"
-            ng-change="contextApp.actions.setSize(contextApp.size)"
-            ng-model-options="{updateOn: 'change'}"
-            ng-model="contextApp.size"
-            type="number"
-          />
-          <div>surrounding entries</div>
+      <local-navigation-row-section>
+        <div class="localMenu">
+          <div class="localMenuItem" ng-click="contextApp.actions.increaseSize()">
+            <div class="fa fa-plus"></div>
+          </div>
+          <div class="localMenuItem">
+            <input
+              class="localMenuItem__input--inPlace"
+              ng-change="contextApp.actions.setSize(contextApp.size)"
+              ng-model-options="{updateOn: 'change'}"
+              ng-model="contextApp.size"
+              type="number"
+            />
+            <div>surrounding entries</div>
+          </div>
+          <div class="localMenuItem" ng-click="contextApp.actions.decreaseSize()">
+            <div class="fa fa-minus"></div>
+          </div>
         </div>
-        <div class="localMenuItem" ng-click="contextApp.actions.decreaseSize()">
-          <div class="fa fa-minus"></div>
-        </div>
-      </div>
-    </div>
+      </local-navigation-row-section>
+    </local-navigation-row>
   </local-navigation>
 
   <div class="container-fluid" role="main">
diff --git a/src/core_plugins/kibana/public/context/app.js b/src/core_plugins/kibana/public/context/app.js
index 634982999b007..795b72d09e2d3 100644
--- a/src/core_plugins/kibana/public/context/app.js
+++ b/src/core_plugins/kibana/public/context/app.js
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 
-import 'ui/local_navigation';
+import 'ui/local_navigation/index';
 import uiModules from 'ui/modules';
 import contextAppTemplate from './app.html';
 import {fetchAnchor} from './api/anchor';
diff --git a/src/ui/public/local_navigation/index.js b/src/ui/public/local_navigation/index.js
new file mode 100644
index 0000000000000..a44b7f096d1f8
--- /dev/null
+++ b/src/ui/public/local_navigation/index.js
@@ -0,0 +1,3 @@
+import './local_navigation';
+import './local_navigation_row';
+import './local_navigation_row_section';
diff --git a/src/ui/public/local_navigation/local_navigation.html b/src/ui/public/local_navigation/local_navigation.html
deleted file mode 100644
index f6fa4da02a75d..0000000000000
--- a/src/ui/public/local_navigation/local_navigation.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="localNav" multi-transclude="['primaryLeft', 'primaryRight', 'secondary']">
-  <div class="localNavRow">
-    <div class="localNavRow__section" data-transclude-slot="primaryLeft"></div>
-    <div class="localNavRow__section" data-transclude-slot="primaryRight"></div>
-  </div>
-  <div class="localNavRow localNavRow--secondary" data-transclude-slot="secondary"></div>
-</div>
diff --git a/src/ui/public/local_navigation/local_navigation.js b/src/ui/public/local_navigation/local_navigation.js
index 8d949f755b45d..e683c8f6cadfb 100644
--- a/src/ui/public/local_navigation/local_navigation.js
+++ b/src/ui/public/local_navigation/local_navigation.js
@@ -1,18 +1,15 @@
-import _ from 'lodash';
-import angular from 'angular';
 import uiModules from 'ui/modules';
 
-import 'ui/multi_transclude';
 import './local_navigation.less';
-import localNavigationTemplate from './local_navigation.html';
 
 
 const module = uiModules.get('kibana');
 
 module.directive('localNavigation', function LocalNavigation() {
   return {
+    replace: true,
     restrict: 'E',
-    template: localNavigationTemplate,
+    template: '<div class="localNav" ng-transclude></div>',
     transclude: true,
   };
 });
diff --git a/src/ui/public/local_navigation/local_navigation_row.js b/src/ui/public/local_navigation/local_navigation_row.js
new file mode 100644
index 0000000000000..4a05e15ead370
--- /dev/null
+++ b/src/ui/public/local_navigation/local_navigation_row.js
@@ -0,0 +1,18 @@
+import uiModules from 'ui/modules';
+
+import './local_navigation.less';
+
+
+const module = uiModules.get('kibana');
+
+module.directive('localNavigationRow', function LocalNavigationRow() {
+  return {
+    replace: true,
+    restrict: 'E',
+    scope: {
+      isSecondary: '=?',
+    },
+    template: `<div class="localNavRow" ng-class="{ 'localNavigationRow--secondary': isSecondary }" ng-transclude></div>`,
+    transclude: true,
+  };
+});
diff --git a/src/ui/public/local_navigation/local_navigation_row_section.js b/src/ui/public/local_navigation/local_navigation_row_section.js
new file mode 100644
index 0000000000000..dc6016ecb12e8
--- /dev/null
+++ b/src/ui/public/local_navigation/local_navigation_row_section.js
@@ -0,0 +1,15 @@
+import uiModules from 'ui/modules';
+
+import './local_navigation.less';
+
+
+const module = uiModules.get('kibana');
+
+module.directive('localNavigationRowSection', function LocalNavigationRowSection() {
+  return {
+    replace: true,
+    restrict: 'E',
+    template: '<div class="localNavRow__section" ng-transclude></div>',
+    transclude: true,
+  };
+});