Merge pull request #896 from hashicorp/refactor-render-targets

Refactor render targets

ui/admin/app/controllers/scopes/scope/targets/target/add-credential-sources.js

@@ -0,0 +1,18 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeTargetsTargetAddCredentialSourcesController extends Controller {
+  // =services
+
+  @service intl;
+
+  // =attributes
+
+  /**
+   * Translated roles breadcrumb
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.intl.t('resources.target.actions.add-credential-sources');
+  }
+}

ui/admin/app/routes/scopes/scope/targets/target.js

@@ -12,28 +12,4 @@ export default class ScopesScopeTargetsTargetRoute extends Route {
   async model({ target_id }) {
     return this.store.findRecord('target', target_id, { reload: true });
   }
-
-  /**
-   * Renders the target-specific templates for header, navigation,
-   * and actions page sections.
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render('scopes/scope/targets/target/-header', {
-      into: 'scopes/scope/targets/target',
-      outlet: 'header',
-    });
-
-    this.render('scopes/scope/targets/target/-navigation', {
-      into: 'scopes/scope/targets/target',
-      outlet: 'navigation',
-    });
-
-    this.render('scopes/scope/targets/target/-actions', {
-      into: 'scopes/scope/targets/target',
-      outlet: 'actions',
-    });
-  }
 }

ui/admin/app/routes/scopes/scope/targets/target/add-credential-sources.js

@@ -43,29 +43,6 @@ export default class ScopesScopeTargetsTargetAddCredentialSourcesRoute extends R
     };
   }
 
-  /**
-   * Renders credential libraries specific header template.
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render('scopes/scope/targets/target/add-credential-sources/-header', {
-      into: 'scopes/scope/targets/target',
-      outlet: 'header',
-    });
-
-    this.render('-empty', {
-      into: 'scopes/scope/targets/target',
-      outlet: 'navigation',
-    });
-
-    this.render('-empty', {
-      into: 'scopes/scope/targets/target',
-      outlet: 'actions',
-    });
-  }
-
   // =actions
 
   /**

ui/admin/app/routes/scopes/scope/targets/target/add-host-sources.js

@@ -42,29 +42,6 @@ export default class ScopesScopeTargetsTargetAddHostSourcesRoute extends Route {
     };
   }
 
-  /**
-   * Renders the add-host-sources-specific header template.
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render('scopes/scope/targets/target/add-host-sources/-header', {
-      into: 'scopes/scope/targets/target',
-      outlet: 'header',
-    });
-
-    this.render('-empty', {
-      into: 'scopes/scope/targets/target',
-      outlet: 'navigation',
-    });
-
-    this.render('-empty', {
-      into: 'scopes/scope/targets/target',
-      outlet: 'actions',
-    });
-  }
-
   // =actions
 
   @action

ui/admin/app/templates/scopes/scope/targets/target.hbs

@@ -1,25 +1,3 @@
 {{page-title @model.displayName}}
 
-<Rose::Layout::Page as |page|>
-
-  <page.breadcrumbs>
-    <BreadCrumbs />
-  </page.breadcrumbs>
-
-  <page.header>
-    {{outlet 'header'}}
-  </page.header>
-
-  <page.navigation>
-    {{outlet 'navigation'}}
-  </page.navigation>
-
-  <page.actions>
-    {{outlet 'actions'}}
-  </page.actions>
-
-  <page.body>
-    {{outlet}}
-  </page.body>
-
-</Rose::Layout::Page>
+{{outlet}}

ui/admin/app/templates/scopes/scope/targets/target/add-credential-sources.hbs

@@ -1,27 +1,44 @@
 {{page-title (t 'resources.target.actions.add-credential-sources')}}
 
-{{#if @model.credentialLibraries}}
-  <Form::Target::AddCredentialLibraries
-    @model={{@model.target}}
-    @credentialLibraries={{@model.credentialLibraries}}
-    @submit={{route-action 'save' @model.target}}
-    @cancel={{route-action 'cancel'}}
-  />
-{{/if}}
+<Rose::Layout::Page as |page|>
 
-{{#unless @model.credentialLibraries}}
-  <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.target.credential-source.messages.none.title'}}
-      as |message|
-    >
-      <message.description>
-        {{t 'resources.target.credential-source.messages.none.description'}}
-      </message.description>
-      <message.link @route='scopes.scope.targets.target.credential-sources'>
-        <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
-        {{t 'actions.back'}}
-      </message.link>
-    </Rose::Message>
-  </Rose::Layout::Centered>
-{{/unless}}
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <h2>
+      {{t 'resources.target.credential-source.messages.add.title'}}
+    </h2>
+    <p>{{t 'resources.target.credential-source.messages.add.description'}}</p>
+  </page.header>
+
+  <page.body>
+    {{#if @model.credentialLibraries}}
+      <Form::Target::AddCredentialLibraries
+        @model={{@model.target}}
+        @credentialLibraries={{@model.credentialLibraries}}
+        @submit={{route-action 'save' @model.target}}
+        @cancel={{route-action 'cancel'}}
+      />
+    {{/if}}
+
+    {{#unless @model.credentialLibraries}}
+      <Rose::Layout::Centered>
+        <Rose::Message
+          @title={{t 'resources.target.credential-source.messages.none.title'}}
+          as |message|
+        >
+          <message.description>
+            {{t 'resources.target.credential-source.messages.none.description'}}
+          </message.description>
+          <message.link @route='scopes.scope.targets.target.credential-sources'>
+            <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
+            {{t 'actions.back'}}
+          </message.link>
+        </Rose::Message>
+      </Rose::Layout::Centered>
+    {{/unless}}
+  </page.body>
+
+</Rose::Layout::Page>

ui/admin/app/templates/scopes/scope/targets/target/add-credential-sources/-header.hbs

@@ -1,4 +0,0 @@
-<h2>
-  {{t 'resources.target.credential-source.messages.add.title'}}
-</h2>
-<p>{{t 'resources.target.credential-source.messages.add.description'}}</p>

ui/admin/app/templates/scopes/scope/targets/target/add-host-sources.hbs

@@ -1,28 +1,46 @@
 {{page-title (t 'resources.target.actions.add-host-sources')}}
 
-{{#if @model.hostSets}}
-  <Form::Target::AddHostSets
-    @model={{@model.target}}
-    @hostCatalogs={{@model.hostCatalogs}}
-    @hostSets={{@model.hostSets}}
-    @submit={{route-action 'save' @model.target}}
-    @cancel={{route-action 'cancel'}}
-  />
-{{/if}}
+<Rose::Layout::Page as |page|>
 
-{{#unless @model.hostSets}}
-  <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.target.host-source.messages.none.title'}}
-      as |message|
-    >
-      <message.description>
-        {{t 'resources.target.host-source.messages.none.description'}}
-      </message.description>
-      <message.link @route='scopes.scope.targets.target.host-sources'>
-        <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
-        {{t 'actions.back'}}
-      </message.link>
-    </Rose::Message>
-  </Rose::Layout::Centered>
-{{/unless}}
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <h2>
+      {{t 'resources.target.host-source.messages.add.title'}}
+      <DocLink @doc='target.add-host-sources' @iconSize='large' />
+    </h2>
+    <p>{{t 'resources.target.host-source.messages.add.description'}}</p>
+  </page.header>
+
+  <page.body>
+    {{#if @model.hostSets}}
+      <Form::Target::AddHostSets
+        @model={{@model.target}}
+        @hostCatalogs={{@model.hostCatalogs}}
+        @hostSets={{@model.hostSets}}
+        @submit={{route-action 'save' @model.target}}
+        @cancel={{route-action 'cancel'}}
+      />
+    {{/if}}
+
+    {{#unless @model.hostSets}}
+      <Rose::Layout::Centered>
+        <Rose::Message
+          @title={{t 'resources.target.host-source.messages.none.title'}}
+          as |message|
+        >
+          <message.description>
+            {{t 'resources.target.host-source.messages.none.description'}}
+          </message.description>
+          <message.link @route='scopes.scope.targets.target.host-sources'>
+            <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
+            {{t 'actions.back'}}
+          </message.link>
+        </Rose::Message>
+      </Rose::Layout::Centered>
+    {{/unless}}
+  </page.body>
+
+</Rose::Layout::Page>

ui/admin/app/templates/scopes/scope/targets/target/add-host-sources/-header.hbs

@@ -1,5 +0,0 @@
-<h2>
-  {{t 'resources.target.host-source.messages.add.title'}}
-  <DocLink @doc='target.add-host-sources' @iconSize='large' />
-</h2>
-<p>{{t 'resources.target.host-source.messages.add.description'}}</p>

ui/admin/app/templates/scopes/scope/targets/target/credential-sources.hbs

@@ -1,91 +1,120 @@
 {{page-title (t 'resources.target.credential-source.title_plural')}}
 
-{{#if @model.credentialLibraries}}
+<Rose::Layout::Page as |page|>
 
-  <Rose::Table as |table|>
-    <table.header as |header|>
-      <header.row as |row|>
-        <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-        <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
-      </header.row>
-    </table.header>
-    <table.body as |body|>
-      {{#each @model.credentialLibraries as |credentialLibrary|}}
-        <body.row as |row|>
-          <row.headerCell>
-            <LinkTo
-              @route='scopes.scope.credential-stores.credential-store.credential-libraries.credential-library'
-              @models={{array
-                credentialLibrary.credential_store_id
-                credentialLibrary.id
-              }}
-            >
-              {{credentialLibrary.displayName}}
-            </LinkTo>
-            <p>{{credentialLibrary.description}}</p>
-          </row.headerCell>
-          <row.cell>
-            <Rose::Badge>{{t
-                (concat
-                  'resources.credential-library.types.' credentialLibrary.type
-                )
-              }}</Rose::Badge>
-          </row.cell>
-          <row.cell>
-            <Copyable
-              @text={{credentialLibrary.id}}
-              @buttonText={{t 'actions.copy-to-clipboard'}}
-              @acknowledgeText={{t 'states.copied'}}
-            >
-              <code>{{credentialLibrary.id}}</code>
-            </Copyable>
-          </row.cell>
-          <row.cell>
-            {{#if (can 'removeCredentialSources target' @model)}}
-              <Rose::Dropdown
-                @icon='flight-icons/svg/more-horizontal-16'
-                @iconOnly={{true}}
-                @showCaret={{false}}
-                @dropdownRight={{true}}
-                @text={{t 'actions.manage'}}
-                as |dropdown|
-              >
-                <dropdown.button
-                  @style='danger'
-                  {{on
-                    'click'
-                    (route-action
-                      'removeCredentialSource' @model credentialLibrary
-                    )
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <Targets::Target::Header @model={{@model}} />
+  </page.header>
+
+  <page.navigation>
+    <Targets::Target::Nav @model={{@model}} />
+  </page.navigation>
+
+  <page.actions>
+    <Targets::Target::Actions @model={{@model}} />
+  </page.actions>
+
+  <page.body>
+    {{#if @model.credentialLibraries}}
+
+      <Rose::Table as |table|>
+        <table.header as |header|>
+          <header.row as |row|>
+            <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
+            <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
+          </header.row>
+        </table.header>
+        <table.body as |body|>
+          {{#each @model.credentialLibraries as |credentialLibrary|}}
+            <body.row as |row|>
+              <row.headerCell>
+                <LinkTo
+                  @route='scopes.scope.credential-stores.credential-store.credential-libraries.credential-library'
+                  @models={{array
+                    credentialLibrary.credential_store_id
+                    credentialLibrary.id
                   }}
                 >
-                  {{t 'actions.remove'}}
-                </dropdown.button>
-              </Rose::Dropdown>
-            {{/if}}
-          </row.cell>
-        </body.row>
-      {{/each}}
-    </table.body>
-  </Rose::Table>
+                  {{credentialLibrary.displayName}}
+                </LinkTo>
+                <p>{{credentialLibrary.description}}</p>
+              </row.headerCell>
+              <row.cell>
+                <Rose::Badge>{{t
+                    (concat
+                      'resources.credential-library.types.'
+                      credentialLibrary.type
+                    )
+                  }}</Rose::Badge>
+              </row.cell>
+              <row.cell>
+                <Copyable
+                  @text={{credentialLibrary.id}}
+                  @buttonText={{t 'actions.copy-to-clipboard'}}
+                  @acknowledgeText={{t 'states.copied'}}
+                >
+                  <code>{{credentialLibrary.id}}</code>
+                </Copyable>
+              </row.cell>
+              <row.cell>
+                {{#if (can 'removeCredentialSources target' @model)}}
+                  <Rose::Dropdown
+                    @icon='flight-icons/svg/more-horizontal-16'
+                    @iconOnly={{true}}
+                    @showCaret={{false}}
+                    @dropdownRight={{true}}
+                    @text={{t 'actions.manage'}}
+                    as |dropdown|
+                  >
+                    <dropdown.button
+                      @style='danger'
+                      {{on
+                        'click'
+                        (route-action
+                          'removeCredentialSource' @model credentialLibrary
+                        )
+                      }}
+                    >
+                      {{t 'actions.remove'}}
+                    </dropdown.button>
+                  </Rose::Dropdown>
+                {{/if}}
+              </row.cell>
+            </body.row>
+          {{/each}}
+        </table.body>
+      </Rose::Table>
 
-{{else}}
+    {{else}}
 
-  <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.target.credential-source.messages.welcome.title'}}
-      as |message|
-    >
-      <message.description>
-        {{t 'resources.target.credential-source.messages.welcome.description'}}
-      </message.description>
-      <message.link @route='scopes.scope.targets.target.add-credential-sources'>
-        <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-        {{t 'resources.target.actions.add-credential-sources'}}
-      </message.link>
-    </Rose::Message>
-  </Rose::Layout::Centered>
+      <Rose::Layout::Centered>
+        <Rose::Message
+          @title={{t
+            'resources.target.credential-source.messages.welcome.title'
+          }}
+          as |message|
+        >
+          <message.description>
+            {{t
+              'resources.target.credential-source.messages.welcome.description'
+            }}
+          </message.description>
+          <message.link
+            @route='scopes.scope.targets.target.add-credential-sources'
+          >
+            <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
+            {{t 'resources.target.actions.add-credential-sources'}}
+          </message.link>
+        </Rose::Message>
+      </Rose::Layout::Centered>
 
-{{/if}}
+    {{/if}}
+  </page.body>
+
+</Rose::Layout::Page>

ui/admin/app/templates/scopes/scope/targets/target/host-sources.hbs

@@ -1,79 +1,101 @@
 {{page-title (t 'resources.target.host-source.title_plural')}}
 
-{{#if @model.hostSets}}
+<Rose::Layout::Page as |page|>
 
-  <Rose::Table as |table|>
-    <table.header as |header|>
-      <header.row as |row|>
-        <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-        <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
-      </header.row>
-    </table.header>
-    <table.body as |body|>
-      {{#each @model.hostSets as |hostSet|}}
-        <body.row as |row|>
-          <row.headerCell>
-            {{hostSet.model.displayName}}
-            <p>{{hostSet.model.description}}</p>
-          </row.headerCell>
-          <row.cell>
-            <Rose::Badge>{{t
-                (concat 'resources.host-set.types.' hostSet.model.type)
-              }}</Rose::Badge>
-          </row.cell>
-          <row.cell>
-            <Copyable
-              @text={{hostSet.model.id}}
-              @buttonText={{t 'actions.copy-to-clipboard'}}
-              @acknowledgeText={{t 'states.copied'}}
-            >
-              <code>{{hostSet.model.id}}</code>
-            </Copyable>
-          </row.cell>
-          <row.cell>
-            {{#if (can 'removeHostSources target' @model)}}
-              <Rose::Dropdown
-                @icon='flight-icons/svg/more-horizontal-16'
-                @iconOnly={{true}}
-                @showCaret={{false}}
-                @dropdownRight={{true}}
-                @text='{{t 'actions.manage'}}'
-                as |dropdown|
-              >
-                <dropdown.button
-                  @style='danger'
-                  {{on
-                    'click'
-                    (route-action 'removeHostSource' @model hostSet.model)
-                  }}
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <Targets::Target::Header @model={{@model}} />
+  </page.header>
+
+  <page.navigation>
+    <Targets::Target::Nav @model={{@model}} />
+  </page.navigation>
+
+  <page.actions>
+    <Targets::Target::Actions @model={{@model}} />
+  </page.actions>
+
+  <page.body>
+    {{#if @model.hostSets}}
+
+      <Rose::Table as |table|>
+        <table.header as |header|>
+          <header.row as |row|>
+            <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
+            <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
+          </header.row>
+        </table.header>
+        <table.body as |body|>
+          {{#each @model.hostSets as |hostSet|}}
+            <body.row as |row|>
+              <row.headerCell>
+                {{hostSet.model.displayName}}
+                <p>{{hostSet.model.description}}</p>
+              </row.headerCell>
+              <row.cell>
+                <Rose::Badge>{{t
+                    (concat 'resources.host-set.types.' hostSet.model.type)
+                  }}</Rose::Badge>
+              </row.cell>
+              <row.cell>
+                <Copyable
+                  @text={{hostSet.model.id}}
+                  @buttonText={{t 'actions.copy-to-clipboard'}}
+                  @acknowledgeText={{t 'states.copied'}}
                 >
-                  {{t 'actions.remove'}}
-                </dropdown.button>
-              </Rose::Dropdown>
-            {{/if}}
-          </row.cell>
-        </body.row>
-      {{/each}}
-    </table.body>
-  </Rose::Table>
+                  <code>{{hostSet.model.id}}</code>
+                </Copyable>
+              </row.cell>
+              <row.cell>
+                {{#if (can 'removeHostSources target' @model)}}
+                  <Rose::Dropdown
+                    @icon='flight-icons/svg/more-horizontal-16'
+                    @iconOnly={{true}}
+                    @showCaret={{false}}
+                    @dropdownRight={{true}}
+                    @text='{{t 'actions.manage'}}'
+                    as |dropdown|
+                  >
+                    <dropdown.button
+                      @style='danger'
+                      {{on
+                        'click'
+                        (route-action 'removeHostSource' @model hostSet.model)
+                      }}
+                    >
+                      {{t 'actions.remove'}}
+                    </dropdown.button>
+                  </Rose::Dropdown>
+                {{/if}}
+              </row.cell>
+            </body.row>
+          {{/each}}
+        </table.body>
+      </Rose::Table>
 
-{{else}}
+    {{else}}
 
-  <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.target.host-source.messages.welcome.title'}}
-      as |message|
-    >
-      <message.description>
-        {{t 'resources.target.host-source.messages.welcome.description'}}
-      </message.description>
-      <message.link @route='scopes.scope.targets.target.add-host-sources'>
-        <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-        {{t 'resources.target.actions.add-host-sources'}}
-      </message.link>
-    </Rose::Message>
-  </Rose::Layout::Centered>
+      <Rose::Layout::Centered>
+        <Rose::Message
+          @title={{t 'resources.target.host-source.messages.welcome.title'}}
+          as |message|
+        >
+          <message.description>
+            {{t 'resources.target.host-source.messages.welcome.description'}}
+          </message.description>
+          <message.link @route='scopes.scope.targets.target.add-host-sources'>
+            <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
+            {{t 'resources.target.actions.add-host-sources'}}
+          </message.link>
+        </Rose::Message>
+      </Rose::Layout::Centered>
 
-{{/if}}
+    {{/if}}
+  </page.body>
+
+</Rose::Layout::Page>

ui/admin/app/templates/scopes/scope/targets/target/index.hbs

@@ -1,5 +1,27 @@
-<Form::Target
-  @model={{@model}}
-  @submit={{route-action 'save' @model}}
-  @cancel={{route-action 'cancel' @model}}
-/>
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <Targets::Target::Header @model={{@model}} />
+  </page.header>
+
+  <page.navigation>
+    <Targets::Target::Nav @model={{@model}} />
+  </page.navigation>
+
+  <page.actions>
+    <Targets::Target::Actions @model={{@model}} />
+  </page.actions>
+
+  <page.body>
+    <Form::Target
+      @model={{@model}}
+      @submit={{route-action 'save' @model}}
+      @cancel={{route-action 'cancel' @model}}
+    />
+  </page.body>
+
+</Rose::Layout::Page>