From 6b15aeda1d708804d4714120fbebb12e3b9bf6e9 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 5 Jun 2020 15:44:02 -0400
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Rename=20layout/page?=
 =?UTF-8?q?=20to=20layout/global=20in=20rose=20addon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/layout/{page.js => global.js}        |  2 +-
 .../components/rose/layout/global.stories.mdx | 30 ++++++++++++
 .../layout/{page/header.js => global/body.js} |  2 +-
 .../{page/sidebar.js => global/header.js}     |  2 +-
 .../{page/main.js => global/navigation.js}    |  2 +-
 .../components/rose/layout/page.stories.mdx   | 31 ------------
 .../addon/styles/rose/components/_index.scss  |  1 +
 .../styles/rose/components/layout/_index.scss | 40 +---------------
 .../rose/components/layout/global/_body.scss  |  3 ++
 .../components/layout/global/_header.scss     |  3 ++
 .../rose/components/layout/global/_index.scss | 29 ++++++++++++
 .../components/layout/global/_navigation.scss |  6 +++
 .../components/rose/layout/global.hbs         |  7 +++
 .../components/rose/layout/global/body.hbs    |  3 ++
 .../components/rose/layout/global/header.hbs  |  3 ++
 .../rose/layout/global/navigation.hbs         |  3 ++
 .../templates/components/rose/layout/page.hbs |  7 ---
 .../components/rose/layout/page/header.hbs    |  3 --
 .../components/rose/layout/page/main.hbs      |  3 --
 .../components/rose/layout/page/sidebar.hbs   |  3 --
 .../rose/app/components/rose/layout/global.js |  1 +
 .../app/components/rose/layout/global/body.js |  1 +
 .../components/rose/layout/global/header.js   |  1 +
 .../rose/layout/global/navigation.js          |  1 +
 .../rose/app/components/rose/layout/page.js   |  1 -
 .../app/components/rose/layout/page/header.js |  1 -
 .../app/components/rose/layout/page/main.js   |  1 -
 .../components/rose/layout/page/sidebar.js    |  1 -
 .../rose/tests/dummy/app/templates/index.hbs  | 16 +++----
 .../components/rose/layout/global-test.js     | 47 +++++++++++++++++++
 .../main-test.js => global/body-test.js}      | 12 ++---
 .../layout/{page => global}/header-test.js    | 12 ++---
 .../navigation-test.js}                       | 14 +++---
 .../components/rose/layout/page-test.js       | 47 -------------------
 ui/core/app/routes/orgs/org/projects/index.js | 13 ++++-
 ui/core/app/templates/application.hbs         | 20 ++++----
 .../templates/orgs/org/projects/project.hbs   | 10 ++--
 37 files changed, 195 insertions(+), 187 deletions(-)
 rename addons/rose/addon/components/rose/layout/{page.js => global.js} (59%)
 create mode 100644 addons/rose/addon/components/rose/layout/global.stories.mdx
 rename addons/rose/addon/components/rose/layout/{page/header.js => global/body.js} (91%)
 rename addons/rose/addon/components/rose/layout/{page/sidebar.js => global/header.js} (90%)
 rename addons/rose/addon/components/rose/layout/{page/main.js => global/navigation.js} (89%)
 delete mode 100644 addons/rose/addon/components/rose/layout/page.stories.mdx
 create mode 100644 addons/rose/addon/styles/rose/components/layout/global/_body.scss
 create mode 100644 addons/rose/addon/styles/rose/components/layout/global/_header.scss
 create mode 100644 addons/rose/addon/styles/rose/components/layout/global/_index.scss
 create mode 100644 addons/rose/addon/styles/rose/components/layout/global/_navigation.scss
 create mode 100644 addons/rose/addon/templates/components/rose/layout/global.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/layout/global/body.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/layout/global/header.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/layout/global/navigation.hbs
 delete mode 100644 addons/rose/addon/templates/components/rose/layout/page.hbs
 delete mode 100644 addons/rose/addon/templates/components/rose/layout/page/header.hbs
 delete mode 100644 addons/rose/addon/templates/components/rose/layout/page/main.hbs
 delete mode 100644 addons/rose/addon/templates/components/rose/layout/page/sidebar.hbs
 create mode 100644 addons/rose/app/components/rose/layout/global.js
 create mode 100644 addons/rose/app/components/rose/layout/global/body.js
 create mode 100644 addons/rose/app/components/rose/layout/global/header.js
 create mode 100644 addons/rose/app/components/rose/layout/global/navigation.js
 delete mode 100644 addons/rose/app/components/rose/layout/page.js
 delete mode 100644 addons/rose/app/components/rose/layout/page/header.js
 delete mode 100644 addons/rose/app/components/rose/layout/page/main.js
 delete mode 100644 addons/rose/app/components/rose/layout/page/sidebar.js
 create mode 100644 addons/rose/tests/integration/components/rose/layout/global-test.js
 rename addons/rose/tests/integration/components/rose/layout/{page/main-test.js => global/body-test.js} (61%)
 rename addons/rose/tests/integration/components/rose/layout/{page => global}/header-test.js (60%)
 rename addons/rose/tests/integration/components/rose/layout/{page/sidebar-test.js => global/navigation-test.js} (55%)
 delete mode 100644 addons/rose/tests/integration/components/rose/layout/page-test.js

diff --git a/addons/rose/addon/components/rose/layout/page.js b/addons/rose/addon/components/rose/layout/global.js
similarity index 59%
rename from addons/rose/addon/components/rose/layout/page.js
rename to addons/rose/addon/components/rose/layout/global.js
index 10190bcba..c9beb6f91 100644
--- a/addons/rose/addon/components/rose/layout/page.js
+++ b/addons/rose/addon/components/rose/layout/global.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../../templates/components/rose/layout/page';
+import layout from '../../../templates/components/rose/layout/global';
 
 export default Component.extend({
   layout,
diff --git a/addons/rose/addon/components/rose/layout/global.stories.mdx b/addons/rose/addon/components/rose/layout/global.stories.mdx
new file mode 100644
index 000000000..2adb2f277
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/global.stories.mdx
@@ -0,0 +1,30 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, boolean, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Layout|Global" component="Global" />
+
+# Layout|Global
+
+A top-level layout/positioning component that allows three distinct sections to be configured: header, navigation, and body.
+
+```htmlbars
+<Rose::Layout::Global as |global|>
+  <global.header />
+  <global.body />
+  <global.navigation />
+</Rose::Layout::Global>
+```
+
+<Preview>
+  <Story name="Global">{{
+    template: hbs`
+    <Rose::Layout::Global as |global|>
+      <global.header style="background: var(--brand-gray-5);">Header</global.header>
+      <global.body style="background: var(--brand-gray-7);">Body</global.body>
+      <global.navigation style="background: var(--brand-gray-6);">Navigation</global.navigation>
+    </Rose::Layout::Global>
+    `,
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/components/rose/layout/page/header.js b/addons/rose/addon/components/rose/layout/global/body.js
similarity index 91%
rename from addons/rose/addon/components/rose/layout/page/header.js
rename to addons/rose/addon/components/rose/layout/global/body.js
index 45f4c6861..a7de3a0e1 100644
--- a/addons/rose/addon/components/rose/layout/page/header.js
+++ b/addons/rose/addon/components/rose/layout/global/body.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/layout/page/header';
+import layout from '../../../../templates/components/rose/layout/global/body';
 
 export default Component.extend({
   layout,
diff --git a/addons/rose/addon/components/rose/layout/page/sidebar.js b/addons/rose/addon/components/rose/layout/global/header.js
similarity index 90%
rename from addons/rose/addon/components/rose/layout/page/sidebar.js
rename to addons/rose/addon/components/rose/layout/global/header.js
index 9df366f6d..274e81584 100644
--- a/addons/rose/addon/components/rose/layout/page/sidebar.js
+++ b/addons/rose/addon/components/rose/layout/global/header.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/layout/page/sidebar';
+import layout from '../../../../templates/components/rose/layout/global/header';
 
 export default Component.extend({
   layout,
diff --git a/addons/rose/addon/components/rose/layout/page/main.js b/addons/rose/addon/components/rose/layout/global/navigation.js
similarity index 89%
rename from addons/rose/addon/components/rose/layout/page/main.js
rename to addons/rose/addon/components/rose/layout/global/navigation.js
index 83b4d6dcb..8759a341f 100644
--- a/addons/rose/addon/components/rose/layout/page/main.js
+++ b/addons/rose/addon/components/rose/layout/global/navigation.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/layout/page/main';
+import layout from '../../../../templates/components/rose/layout/global/navigation';
 
 export default Component.extend({
   layout,
diff --git a/addons/rose/addon/components/rose/layout/page.stories.mdx b/addons/rose/addon/components/rose/layout/page.stories.mdx
deleted file mode 100644
index ae54e41f8..000000000
--- a/addons/rose/addon/components/rose/layout/page.stories.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
-
-<Meta title="Rose|Layout|Page" component="Page" />
-
-# Layout|Page
-
-A page layout/positioning component that allows three distinct sections to be configured: header, sidebar, and main.
-Sidebar's content width determines it's column width.
-
-```htmlbars
-<Rose::Layout::Page as |page|>
-  <page.header />
-  <page.sidebar />
-  <page.main />
-</Rose::Layout::Page>
-```
-
-<Preview>
-  <Story name="Basic">{{
-    template: hbs`
-    <Rose::Layout::Page as |page|>
-      <page.header style="background: var(--brand-gray-5);">Header</page.header>
-      <page.main style="background: var(--brand-gray-7);">Main</page.main>
-      <page.sidebar style="background: var(--brand-gray-6);">Sidebar</page.sidebar>
-    </Rose::Layout::Page>
-    `,
-  }}</Story>
-</Preview>
diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss
index fd25c4bf2..f8ba54fb1 100644
--- a/addons/rose/addon/styles/rose/components/_index.scss
+++ b/addons/rose/addon/styles/rose/components/_index.scss
@@ -5,3 +5,4 @@
 @import 'notification';
 @import 'card';
 @import 'page-header';
+@import 'nav';
diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss
index 9b927fb2c..8ec7ba2ab 100644
--- a/addons/rose/addon/styles/rose/components/layout/_index.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_index.scss
@@ -1,40 +1,2 @@
-@use '../../variables/sizing';
-@use '../../variables/media';
-
+@import 'global';
 @import 'page-header';
-
-.rose-layout-page {
-  display: grid;
-  grid-template-areas:
-    'header header header header'
-    'sidebar main main main';
-  // Define static grid column for sidebar
-  grid-template-columns: 16rem auto 1fr;
-  grid-template-rows: auto 1fr;
-  height: 100vh;
-}
-
-.rose-layout-header {
-  grid-area: header;
-}
-
-.rose-layout-main {
-  grid-area: main;
-}
-
-.rose-layout-sidebar {
-  grid-area: sidebar;
-  border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
-}
-
-@media (max-width: media.width(small)) {
-  .rose-layout-page {
-    grid-template-columns: 1fr;
-    grid-template-rows: 0.1fr auto 1fr;
-    grid-template-areas:
-      'header'
-      'sidebar'
-      'main';
-    padding-bottom: 0;
-  }
-}
diff --git a/addons/rose/addon/styles/rose/components/layout/global/_body.scss b/addons/rose/addon/styles/rose/components/layout/global/_body.scss
new file mode 100644
index 000000000..926856f49
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/global/_body.scss
@@ -0,0 +1,3 @@
+.rose-layout-global-body {
+  grid-area: body;
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/global/_header.scss b/addons/rose/addon/styles/rose/components/layout/global/_header.scss
new file mode 100644
index 000000000..0c784bc7e
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/global/_header.scss
@@ -0,0 +1,3 @@
+.rose-layout-global-header {
+  grid-area: header;
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/global/_index.scss b/addons/rose/addon/styles/rose/components/layout/global/_index.scss
new file mode 100644
index 000000000..6f6af52c5
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/global/_index.scss
@@ -0,0 +1,29 @@
+@use '../../../variables/sizing';
+@use '../../../variables/media';
+
+@import 'header';
+@import 'body';
+@import 'navigation';
+
+.rose-layout-global {
+  display: grid;
+  grid-template-areas:
+    'header header header header'
+    'navigation body body body';
+  // Define 16rem static grid column for navigation
+  grid-template-columns: (sizing.rems(m) * 16) auto 1fr;
+  grid-template-rows: auto 1fr;
+  height: 100vh;
+}
+
+@media (max-width: media.width(small)) {
+  .rose-layout-global {
+    grid-template-columns: 1fr;
+    grid-template-rows: 0.1fr auto 1fr;
+    grid-template-areas:
+      'header'
+      'navigation'
+      'body';
+    padding-bottom: 0;
+  }
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/global/_navigation.scss b/addons/rose/addon/styles/rose/components/layout/global/_navigation.scss
new file mode 100644
index 000000000..9482c0223
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/global/_navigation.scss
@@ -0,0 +1,6 @@
+@use '../../../variables/sizing';
+
+.rose-layout-global-navigation {
+  grid-area: navigation;
+  border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
+}
diff --git a/addons/rose/addon/templates/components/rose/layout/global.hbs b/addons/rose/addon/templates/components/rose/layout/global.hbs
new file mode 100644
index 000000000..4ed9a9033
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/global.hbs
@@ -0,0 +1,7 @@
+<div ...attributes class="rose-layout-global">
+  {{yield (hash
+    header=(component 'rose/layout/global/header')
+    body=(component 'rose/layout/global/body')
+    navigation=(component 'rose/layout/global/navigation')
+  )}}
+</div>
diff --git a/addons/rose/addon/templates/components/rose/layout/global/body.hbs b/addons/rose/addon/templates/components/rose/layout/global/body.hbs
new file mode 100644
index 000000000..b89c802f7
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/global/body.hbs
@@ -0,0 +1,3 @@
+<main ...attributes class="rose-layout-global-body">
+  {{yield}}
+</main>
diff --git a/addons/rose/addon/templates/components/rose/layout/global/header.hbs b/addons/rose/addon/templates/components/rose/layout/global/header.hbs
new file mode 100644
index 000000000..b2e966d0d
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/global/header.hbs
@@ -0,0 +1,3 @@
+<header ...attributes class="rose-layout-global-header" >
+  {{yield}}
+</header>
diff --git a/addons/rose/addon/templates/components/rose/layout/global/navigation.hbs b/addons/rose/addon/templates/components/rose/layout/global/navigation.hbs
new file mode 100644
index 000000000..b23782e92
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/global/navigation.hbs
@@ -0,0 +1,3 @@
+<aside ...attributes class="rose-layout-global-navigation">
+  {{yield}}
+</aside>
diff --git a/addons/rose/addon/templates/components/rose/layout/page.hbs b/addons/rose/addon/templates/components/rose/layout/page.hbs
deleted file mode 100644
index 73a8b205f..000000000
--- a/addons/rose/addon/templates/components/rose/layout/page.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<div ...attributes class="rose-layout-page">
-  {{yield (hash
-    header=(component 'rose/layout/page/header')
-    main=(component 'rose/layout/page/main')
-    sidebar=(component 'rose/layout/page/sidebar')
-  )}}
-</div>
diff --git a/addons/rose/addon/templates/components/rose/layout/page/header.hbs b/addons/rose/addon/templates/components/rose/layout/page/header.hbs
deleted file mode 100644
index 545ac6c22..000000000
--- a/addons/rose/addon/templates/components/rose/layout/page/header.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<header ...attributes class="rose-layout-header" >
-  {{yield}}
-</header>
diff --git a/addons/rose/addon/templates/components/rose/layout/page/main.hbs b/addons/rose/addon/templates/components/rose/layout/page/main.hbs
deleted file mode 100644
index 1752414ce..000000000
--- a/addons/rose/addon/templates/components/rose/layout/page/main.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<main ...attributes class="rose-layout-main">
-  {{yield}}
-</main>
diff --git a/addons/rose/addon/templates/components/rose/layout/page/sidebar.hbs b/addons/rose/addon/templates/components/rose/layout/page/sidebar.hbs
deleted file mode 100644
index 07f519a2b..000000000
--- a/addons/rose/addon/templates/components/rose/layout/page/sidebar.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<aside ...attributes class="rose-layout-sidebar">
-  {{yield}}
-</aside>
diff --git a/addons/rose/app/components/rose/layout/global.js b/addons/rose/app/components/rose/layout/global.js
new file mode 100644
index 000000000..d55398ff9
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/global.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/global';
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/layout/global/body.js b/addons/rose/app/components/rose/layout/global/body.js
new file mode 100644
index 000000000..3f6780e17
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/global/body.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/global/body';
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/layout/global/header.js b/addons/rose/app/components/rose/layout/global/header.js
new file mode 100644
index 000000000..6d737401b
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/global/header.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/global/header';
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/layout/global/navigation.js b/addons/rose/app/components/rose/layout/global/navigation.js
new file mode 100644
index 000000000..fa056e99e
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/global/navigation.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/global/navigation';
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/layout/page.js b/addons/rose/app/components/rose/layout/page.js
deleted file mode 100644
index a88273d71..000000000
--- a/addons/rose/app/components/rose/layout/page.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/page';
diff --git a/addons/rose/app/components/rose/layout/page/header.js b/addons/rose/app/components/rose/layout/page/header.js
deleted file mode 100644
index 77437dd12..000000000
--- a/addons/rose/app/components/rose/layout/page/header.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/page/header';
diff --git a/addons/rose/app/components/rose/layout/page/main.js b/addons/rose/app/components/rose/layout/page/main.js
deleted file mode 100644
index 3bde34d59..000000000
--- a/addons/rose/app/components/rose/layout/page/main.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/page/main';
diff --git a/addons/rose/app/components/rose/layout/page/sidebar.js b/addons/rose/app/components/rose/layout/page/sidebar.js
deleted file mode 100644
index aa6735e84..000000000
--- a/addons/rose/app/components/rose/layout/page/sidebar.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/page/sidebar';
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index ec3965039..841d80122 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,5 +1,5 @@
-<Rose::Layout::Page as |page|>
-  <page.header>
+<Rose::Layout::Global as |global|>
+  <global.header>
     <Rose::Header as |header|>
 
       <header.brand @logo="logo" @text="Product Name" />
@@ -28,18 +28,18 @@
       </header.utilities>
 
     </Rose::Header>
-  </page.header>
+  </global.header>
 
-  <page.sidebar>
+  <global.navigation>
     <Rose::Nav::Sidebar @title="Title" as |nav|>
       <nav.link @route="index">Item Name</nav.link>
       <nav.link @route="about">Item Name</nav.link>
       <nav.link @route="about">Item Name</nav.link>
       <nav.link @route="about">Item Name</nav.link>
     </Rose::Nav::Sidebar>
-  </page.sidebar>
+  </global.navigation>
 
-  <page.main>
+  <global.body>
 
     Dummy app index template
 
@@ -198,5 +198,5 @@
     <Rose::Card::Link @title="I'm a card" />
     <Rose::Card::Link @title="I'm a card" @description="I'm a description" />
     <Rose::Card::Link @title="I'm a card" @description="I'm a description" @subtitle="I'm a subtitle"/>
-  </page.main>
-</Rose::Layout::Page>
+  </global.body>
+</Rose::Layout::Global>
diff --git a/addons/rose/tests/integration/components/rose/layout/global-test.js b/addons/rose/tests/integration/components/rose/layout/global-test.js
new file mode 100644
index 000000000..7bff3a3b6
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/global-test.js
@@ -0,0 +1,47 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/layout/global', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Global />`);
+    assert.ok(find('div'));
+    assert.ok(find('.rose-layout-global'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::Global id="global"/>`);
+    assert.ok(find('#global'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::Global as |global|>
+      <button id="content" />
+    </Rose::Layout::Global>`);
+    assert.ok(find('#content'));
+  });
+
+  test('it renders with header', async function (assert) {
+    await render(hbs`<Rose::Layout::Global as |global|>
+      <global.header />
+    </Rose::Layout::Global>`);
+    assert.ok(find('.rose-layout-global-header'));
+  });
+
+  test('it renders with main', async function (assert) {
+    await render(hbs`<Rose::Layout::Global as |global|>
+      <global.body />
+    </Rose::Layout::Global>`);
+    assert.ok(find('.rose-layout-global-body'));
+  });
+
+  test('it renders with sidebar', async function (assert) {
+    await render(hbs`<Rose::Layout::Global as |global|>
+      <global.navigation />
+    </Rose::Layout::Global>`);
+    assert.ok(find('.rose-layout-global-navigation'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/layout/page/main-test.js b/addons/rose/tests/integration/components/rose/layout/global/body-test.js
similarity index 61%
rename from addons/rose/tests/integration/components/rose/layout/page/main-test.js
rename to addons/rose/tests/integration/components/rose/layout/global/body-test.js
index 9d677c85c..9cdf1224d 100644
--- a/addons/rose/tests/integration/components/rose/layout/page/main-test.js
+++ b/addons/rose/tests/integration/components/rose/layout/global/body-test.js
@@ -3,24 +3,24 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/layout/page/main', function (hooks) {
+module('Integration | Component | rose/layout/global/body', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    await render(hbs`<Rose::Layout::Page::Main />`);
+    await render(hbs`<Rose::Layout::Global::Body />`);
     assert.ok(find('main'));
-    assert.ok(find('.rose-layout-main'));
+    assert.ok(find('.rose-layout-global-body'));
   });
 
   test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::Layout::Page::Main id="main"/>`);
+    await render(hbs`<Rose::Layout::Global::Body id="main"/>`);
     assert.ok(find('#main'));
   });
 
   test('it renders with content', async function (assert) {
-    await render(hbs`<Rose::Layout::Page::Main>
+    await render(hbs`<Rose::Layout::Global::Body>
       <button id="content" />
-    </Rose::Layout::Page::Main>`);
+    </Rose::Layout::Global::Body>`);
     assert.ok(find('#content'));
   });
 });
diff --git a/addons/rose/tests/integration/components/rose/layout/page/header-test.js b/addons/rose/tests/integration/components/rose/layout/global/header-test.js
similarity index 60%
rename from addons/rose/tests/integration/components/rose/layout/page/header-test.js
rename to addons/rose/tests/integration/components/rose/layout/global/header-test.js
index 8976dd726..61dee1311 100644
--- a/addons/rose/tests/integration/components/rose/layout/page/header-test.js
+++ b/addons/rose/tests/integration/components/rose/layout/global/header-test.js
@@ -3,24 +3,24 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/layout/page/header', function (hooks) {
+module('Integration | Component | rose/layout/global/header', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    await render(hbs`<Rose::Layout::Page::Header />`);
+    await render(hbs`<Rose::Layout::Global::Header />`);
     assert.ok(find('header'));
-    assert.ok(find('.rose-layout-header'));
+    assert.ok(find('.rose-layout-global-header'));
   });
 
   test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::Layout::Page::Header id="header"/>`);
+    await render(hbs`<Rose::Layout::Global::Header id="header"/>`);
     assert.ok(find('#header'));
   });
 
   test('it renders with content', async function (assert) {
-    await render(hbs`<Rose::Layout::Page::Header>
+    await render(hbs`<Rose::Layout::Global::Header>
       <button id="content" />
-    </Rose::Layout::Page::Header>`);
+    </Rose::Layout::Global::Header>`);
     assert.ok(find('#content'));
   });
 });
diff --git a/addons/rose/tests/integration/components/rose/layout/page/sidebar-test.js b/addons/rose/tests/integration/components/rose/layout/global/navigation-test.js
similarity index 55%
rename from addons/rose/tests/integration/components/rose/layout/page/sidebar-test.js
rename to addons/rose/tests/integration/components/rose/layout/global/navigation-test.js
index e09886c0c..087a66392 100644
--- a/addons/rose/tests/integration/components/rose/layout/page/sidebar-test.js
+++ b/addons/rose/tests/integration/components/rose/layout/global/navigation-test.js
@@ -3,24 +3,24 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/layout/page/sidebar', function (hooks) {
+module('Integration | Component | rose/layout/global/navigation', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    await render(hbs`<Rose::Layout::Page::Sidebar />`);
+    await render(hbs`<Rose::Layout::Global::Navigation />`);
     assert.ok(find('aside'));
-    assert.ok(find('.rose-layout-sidebar'));
+    assert.ok(find('.rose-layout-global-navigation'));
   });
 
   test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::Layout::Page::Sidebar id="sidebar"/>`);
-    assert.ok(find('#sidebar'));
+    await render(hbs`<Rose::Layout::Global::Navigation id="navigation"/>`);
+    assert.ok(find('#navigation'));
   });
 
   test('it renders with content', async function (assert) {
-    await render(hbs`<Rose::Layout::Page::Sidebar>
+    await render(hbs`<Rose::Layout::Global::Navigation>
       <button id="content" />
-    </Rose::Layout::Page::Sidebar>`);
+    </Rose::Layout::Global::Navigation>`);
     assert.ok(find('#content'));
   });
 });
diff --git a/addons/rose/tests/integration/components/rose/layout/page-test.js b/addons/rose/tests/integration/components/rose/layout/page-test.js
deleted file mode 100644
index f1f7feb87..000000000
--- a/addons/rose/tests/integration/components/rose/layout/page-test.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module('Integration | Component | rose/layout/page', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::Layout::Page />`);
-    assert.ok(find('div'));
-    assert.ok(find('.rose-layout-page'));
-  });
-
-  test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::Layout::Page id="page"/>`);
-    assert.ok(find('#page'));
-  });
-
-  test('it renders with content', async function (assert) {
-    await render(hbs`<Rose::Layout::Page as |page|>
-      <button id="content" />
-    </Rose::Layout::Page>`);
-    assert.ok(find('#content'));
-  });
-
-  test('it renders with header', async function (assert) {
-    await render(hbs`<Rose::Layout::Page as |page|>
-      <page.header />
-    </Rose::Layout::Page>`);
-    assert.ok(find('.rose-layout-header'));
-  });
-
-  test('it renders with main', async function (assert) {
-    await render(hbs`<Rose::Layout::Page as |page|>
-      <page.main />
-    </Rose::Layout::Page>`);
-    assert.ok(find('.rose-layout-main'));
-  });
-
-  test('it renders with sidebar', async function (assert) {
-    await render(hbs`<Rose::Layout::Page as |page|>
-      <page.sidebar />
-    </Rose::Layout::Page>`);
-    assert.ok(find('.rose-layout-sidebar'));
-  });
-});
diff --git a/ui/core/app/routes/orgs/org/projects/index.js b/ui/core/app/routes/orgs/org/projects/index.js
index be2068f6d..d0ab28a1d 100644
--- a/ui/core/app/routes/orgs/org/projects/index.js
+++ b/ui/core/app/routes/orgs/org/projects/index.js
@@ -1,3 +1,14 @@
 import Route from '@ember/routing/route';
+import { action } from '@ember/object';
 
-export default class OrgsOrgProjectsIndexRoute extends Route {}
+export default class OrgsOrgProjectsIndexRoute extends Route {
+  // =methods
+
+  /**
+   * Route to new project view.
+   */
+  @action
+  new() {
+    this.transitionTo('orgs.org.projects.new');
+  }
+}
diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs
index 5d66d58f1..1746e6247 100644
--- a/ui/core/app/templates/application.hbs
+++ b/ui/core/app/templates/application.hbs
@@ -1,9 +1,5 @@
-<HeadLayout />
-
-{{title (app-name)}}
-
-<Rose::Layout::Page as |page|>
-  <page.header>
+<Rose::Layout::Global as |global|>
+  <global.header>
     <Rose::Header as |header|>
       <header.brand @logo="logo-hashi" @text={{app-name}} />
       <header.nav as |nav|>
@@ -26,20 +22,20 @@
         </utilities.dropdown>
       </header.utilities>
     </Rose::Header>
-  </page.header>
+  </global.header>
 
-  <page.main>
+  <global.body>
     {{outlet}}
-  </page.main>
+  </global.body>
 
-  <page.sidebar>
+  <global.navigation>
     <Rose::Nav::Sidebar @title={{t 'dev.title'}} as |nav|>
       <nav.link @route="orgs" class="active">{{t 'dev.item-name'}}</nav.link>
       <nav.link @route="index">{{t 'dev.item-name'}}</nav.link>
     </Rose::Nav::Sidebar>
-  </page.sidebar>
+  </global.navigation>
 
-</Rose::Layout::Page>
+</Rose::Layout::Global>
 
 <EmberNotify @closeAfter={{4000}} as |message close|>
   <Rose::Notification
diff --git a/ui/core/app/templates/orgs/org/projects/project.hbs b/ui/core/app/templates/orgs/org/projects/project.hbs
index f76c8bcaa..7cdf10d87 100644
--- a/ui/core/app/templates/orgs/org/projects/project.hbs
+++ b/ui/core/app/templates/orgs/org/projects/project.hbs
@@ -7,21 +7,19 @@
     <LinkTo @route='orgs.org.projects.project'>{{@model.name}}</LinkTo>
   </div>
 
-  <h2>{{t "resources.project.settings"}}</h2>
+  <Rose::Layout::PageHeader>
+    <Rose::PageHeader::Title @text={{t "resources.project.settings"}} />
+  </Rose::Layout::PageHeader>
 
   <Rose::Nav::Tabs as |nav|>
     <nav.link @route='orgs.org.projects.project'>
-      {{t 'dev.item-name'}}
+      {{t "nav.overview"}}
     </nav.link>
     <nav.link @route='index'>
       {{t 'dev.item-name'}}
     </nav.link>
   </Rose::Nav::Tabs>
 
-  <Rose::Layout::PageHeader>
-    <Rose::PageHeader::Title @text={{@model.name}} />
-  </Rose::Layout::PageHeader>
-
   <Form::Project
     @model={{@model}}
     @submit={{route-action "save" @model}}