From 444a621bcfd0b6b4922976c207815fef263dd764 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Mon, 31 Aug 2020 14:42:08 -0400
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20role=20route=20shoul?=
 =?UTF-8?q?d=20have=20multiple=20outlets?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/core/app/routes/scopes/scope/roles/role.js | 31 ++++++++++++++++++-
 .../app/templates/scopes/scope/roles/role.hbs | 24 ++------------
 .../scopes/scope/roles/role/-actions.hbs      |  9 ++++++
 .../scopes/scope/roles/role/-header.hbs       |  1 +
 .../scopes/scope/roles/role/-navigation.hbs   | 11 +++++++
 5 files changed, 54 insertions(+), 22 deletions(-)
 create mode 100644 ui/core/app/templates/scopes/scope/roles/role/-actions.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/roles/role/-header.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/roles/role/-navigation.hbs

diff --git a/ui/core/app/routes/scopes/scope/roles/role.js b/ui/core/app/routes/scopes/scope/roles/role.js
index 7fb8d3db7..6269e7748 100644
--- a/ui/core/app/routes/scopes/scope/roles/role.js
+++ b/ui/core/app/routes/scopes/scope/roles/role.js
@@ -9,10 +9,39 @@ export default class ScopesScopeRolesRoleRoute extends Route {
    * @param {string} params.role_id
    * @return {RoleModel}
    */
-  async model({ role_id }) {
+  model({ role_id }) {
     const { id: scopeID } = this.modelFor('scopes.scope');
     return this.store.findRecord('role', role_id, {
       adapterOptions: { scopeID },
     });
   }
+
+  /**
+   * Renders the route-specific templates for header, navigation,
+   * and actions page sections.
+   * @override
+   * @param {object} controller
+   * @param {object} model
+   */
+  renderTemplate(controller, model) {
+    super.renderTemplate(...arguments);
+
+    this.render('scopes/scope/roles/role/-header', {
+      into: 'scopes/scope/roles/role',
+      outlet: 'header',
+      model
+    });
+
+    this.render('scopes/scope/roles/role/-actions', {
+      into: 'scopes/scope/roles/role',
+      outlet: 'actions',
+      model
+    });
+
+    this.render('scopes/scope/roles/role/-navigation', {
+      into: 'scopes/scope/roles/role',
+      outlet: 'navigation',
+      model
+    });
+  }
 }
diff --git a/ui/core/app/templates/scopes/scope/roles/role.hbs b/ui/core/app/templates/scopes/scope/roles/role.hbs
index 3794941ce..271a98d73 100644
--- a/ui/core/app/templates/scopes/scope/roles/role.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role.hbs
@@ -7,33 +7,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>{{t "resources.role"}}</h2>
+    {{outlet "header"}}
   </page.header>
 
   <page.actions>
-    <Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
-      <dropdown.button
-        @style="danger"
-        @disabled={{@model.canSave}}
-        {{on "click" (route-action "delete" @model)}}
-      >
-        {{t 'actions.delete-role'}}
-      </dropdown.button>
-    </Rose::Dropdown>
+    {{outlet "actions"}}
   </page.actions>
 
   <page.navigation>
-    <Rose::Nav::Tabs as |nav|>
-      <nav.link @route='scopes.scope.roles.role.index'>
-        {{t 'titles.settings'}}
-      </nav.link>
-      <nav.link @route='scopes.scope.roles.role.principals'>
-        {{t 'titles.principals'}}
-      </nav.link>
-      <nav.link @route='scopes.scope.roles.role.grants'>
-        {{t 'titles.grants'}}
-      </nav.link>
-    </Rose::Nav::Tabs>
+    {{outlet "navigation"}}
   </page.navigation>
 
   <page.body>
diff --git a/ui/core/app/templates/scopes/scope/roles/role/-actions.hbs b/ui/core/app/templates/scopes/scope/roles/role/-actions.hbs
new file mode 100644
index 000000000..6cdf1f9e9
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/roles/role/-actions.hbs
@@ -0,0 +1,9 @@
+<Rose::Dropdown @text="{{t 'actions.manage'}}" @dropdownRight={{true}} as |dropdown|>
+  <dropdown.button
+    @style="danger"
+    @disabled={{@model.canSave}}
+    {{on "click" (route-action "delete" @model)}}
+  >
+    {{t 'actions.delete-role'}}
+  </dropdown.button>
+</Rose::Dropdown>
diff --git a/ui/core/app/templates/scopes/scope/roles/role/-header.hbs b/ui/core/app/templates/scopes/scope/roles/role/-header.hbs
new file mode 100644
index 000000000..d7985c901
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/roles/role/-header.hbs
@@ -0,0 +1 @@
+<h2>{{t "resources.role"}}</h2>
diff --git a/ui/core/app/templates/scopes/scope/roles/role/-navigation.hbs b/ui/core/app/templates/scopes/scope/roles/role/-navigation.hbs
new file mode 100644
index 000000000..5498f5733
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/roles/role/-navigation.hbs
@@ -0,0 +1,11 @@
+<Rose::Nav::Tabs as |nav|>
+  <nav.link @route='scopes.scope.roles.role.index'>
+    {{t 'titles.settings'}}
+  </nav.link>
+  <nav.link @route='scopes.scope.roles.role.principals'>
+    {{t 'titles.principals'}}
+  </nav.link>
+  <nav.link @route='scopes.scope.roles.role.grants'>
+    {{t 'titles.grants'}}
+  </nav.link>
+</Rose::Nav::Tabs>