feat: 🎸 add scopes index page

ui/core/app/router.js

@@ -53,6 +53,7 @@ Router.map(function () {
         });
         this.route('new');
       });
+      this.route('scopes', function() {});
     });
   });
 

ui/core/app/routes/scopes/scope/index.js

@@ -10,10 +10,14 @@ export default class ScopesScopeIndexRoute extends Route {
 
   /**
    * Redirects to scopes/scope/authenticate for further processing.
+   * If already authenticated, redirects to scopes/scope/scopes to display
+   * list of sub scopes.
    */
   redirect() {
     if (!this.session.isAuthenticated) {
       this.transitionTo('scopes.scope.authenticate');
+    } else {
+      this.transitionTo('scopes.scope.scopes');
     }
   }
 }

ui/core/app/routes/scopes/scope/scopes.js

@@ -0,0 +1,39 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeScopesRoute extends Route {
+  // =services
+
+  @service session;
+
+  // =methods
+
+  /**
+   * Redirects to scopes/scope/authenticate if unauthenticated.
+   */
+  beforeModel() {
+    if (!this.session.isAuthenticated) {
+      this.transitionTo('scopes.scope.authenticate');
+    }
+  }
+
+  /**
+   * Loads sub scopes for the current scope.
+   * @param {object} params
+   * @param {string} params.scope_id
+   * @return {Promise{ScopeModel}}
+   */
+  async model() {
+    const currentScope = this.modelFor('scopes.scope');
+    const parentScope = !currentScope.isGlobal
+      ? await this.store.findRecord('scope', currentScope.scopeID)
+      : null;
+    const subScopes =
+      await this.store.query('scope', { scope_id: currentScope.id });
+    return {
+      currentScope,
+      parentScope,
+      subScopes
+    };
+  }
+}

ui/core/app/routes/scopes/scope/scopes/index.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeScopesIndexRoute extends Route {
+}

ui/core/app/templates/scopes/scope.hbs

@@ -5,7 +5,7 @@
 
       {{#if @model.isGlobal}}
         <Rose::Nav::Sidebar @title={{t "titles.general"}} as |nav|>
-          <nav.link @route="scopes.scope.index">
+          <nav.link @route="scopes.scope.scopes">
             <Rose::Icon
               @name="app-icons/org"
               @size="medium" />
@@ -17,14 +17,14 @@
       {{#if @model.isOrg}}
         <Rose::Nav::Sidebar @title={{t "titles.general"}} as |nav|>
           {{#if this.session.data.authenticated.isGlobal}}
-            <nav.link @route="scopes.scope.index" @model="global">
+            <nav.link @route="scopes.scope.scopes" @model="global">
               <Rose::Icon
                 @name="app-icons/org"
                 @size="medium" />
               {{t "resources.org.title_plural"}}
             </nav.link>
           {{/if}}
-          <nav.link @route="scopes.scope.index">
+          <nav.link @route="scopes.scope.scopes">
             <Rose::Icon
               @name="app-icons/project"
               @size="medium" />
@@ -36,14 +36,14 @@
       {{#if @model.isProject}}
         <Rose::Nav::Sidebar @title={{t "titles.general"}} as |nav|>
           {{#if this.session.data.authenticated.isGlobal}}
-            <nav.link @route="scopes.scope.index" @model="global">
+            <nav.link @route="scopes.scope.scopes" @model="global">
               <Rose::Icon
                 @name="app-icons/org"
                 @size="medium" />
               {{t "resources.org.title_plural"}}
             </nav.link>
           {{/if}}
-          <nav.link @route="scopes.scope.index" @model={{@model.scopeID}}>
+          <nav.link @route="scopes.scope.scopes" @model={{@model.scopeID}}>
             <Rose::Icon
               @name="app-icons/project"
               @size="medium" />

ui/core/app/templates/scopes/scope/scopes.hbs

@@ -0,0 +1,18 @@
+{{#if @model.currentScope.isGlobal}}
+  {{title (t "resources.org.title_plural") }}
+{{/if}}
+
+{{#if @model.currentScope.isOrg}}
+  {{title (t "resources.org.title_plural") }}
+  {{title @model.currentScope.displayName}}
+  {{title (t "resources.project.title_plural") }}
+{{/if}}
+
+{{#if @model.currentScope.isProject}}
+  {{title (t "resources.org.title_plural") }}
+  {{title @model.parentScope.displayName}}
+  {{title (t "resources.project.title_plural") }}
+  {{title @model.currentScope.displayName}}
+{{/if}}
+
+{{outlet}}

ui/core/app/templates/scopes/scope/scopes/index.hbs

@@ -0,0 +1,90 @@
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    {{#if @model.currentScope.isGlobal}}
+      <h2>
+        {{t "resources.org.title_plural"}}
+        <DocLink @doc="org" @iconSize="large" />
+      </h2>
+      {{#if @model.subScopes}}
+        <p>{{t "resources.org.description"}}</p>
+      {{/if}}
+    {{/if}}
+    {{#if @model.currentScope.isOrg}}
+      <h2>
+        {{t "resources.project.title_plural"}}
+        <DocLink @doc="project" @iconSize="large" />
+      </h2>
+      {{#if @model.subScopes}}
+        <p>{{t "resources.project.description"}}</p>
+      {{/if}}
+    {{/if}}
+  </page.header>
+
+  <page.actions>
+    {{#if @model.subScopes}}
+      <Rose::LinkButton
+        @route="scopes.scope"
+        @style="primary"
+      >
+        {{t 'titles.new'}}
+      </Rose::LinkButton>
+    {{/if}}
+  </page.actions>
+
+  <page.body>
+
+    {{#if @model.subScopes}}
+
+      <Rose::Cards as |cards|>
+        {{#each @model.subScopes as |scope|}}
+          <cards.link
+            @title={{scope.name}}
+            @description={{scope.description}}
+            @id={{scope.id}}
+            @icon={{if @model.currentScope.isGlobal "app-icons/org" "app-icons/project"}}
+            @route="scopes.scope"
+            @model={{scope.id}}
+          />
+        {{/each}}
+      </Rose::Cards>
+
+    {{else}}
+
+      {{#if @model.currentScope.isGlobal}}
+        <Rose::Layout::Centered>
+          <Rose::Message @title={{t 'resources.org.messages.welcome.title'}} as |message|>
+            <message.description>
+              {{t 'resources.org.description'}}
+            </message.description>
+            <message.link @route="scopes.scope">
+              <Rose::Icon @name="plus-circle-outline" />
+              {{t 'titles.new'}}
+            </message.link>
+          </Rose::Message>
+        </Rose::Layout::Centered>
+      {{/if}}
+
+      {{#if @model.currentScope.isOrg}}
+        <Rose::Layout::Centered>
+          <Rose::Message @title={{t 'resources.project.messages.welcome.title'}} as |message|>
+            <message.description>
+              {{t 'resources.project.description'}}
+            </message.description>
+            <message.link @route="scopes.scope">
+              <Rose::Icon @name="plus-circle-outline" />
+              {{t 'titles.new'}}
+            </message.link>
+          </Rose::Message>
+        </Rose::Layout::Centered>
+      {{/if}}
+
+    {{/if}}
+
+  </page.body>
+
+</Rose::Layout::Page>

ui/core/tests/acceptance/authentication-test.js

@@ -72,8 +72,8 @@ module('Acceptance | authentication', function (hooks) {
     authMethodGlobalAuthenticateURL = `/scopes/global/authenticate/${globalAuthMethodID}`;
     authMethodAuthenticateURL = `/scopes/${orgScopeID}/authenticate/${authMethodID}`;
     changePasswordURL = `/account/change-password`;
-    orgsURL = `/scopes/global`;
-    projectsURL = `/scopes/${orgScopeID}`;
+    orgsURL = `/scopes/global/scopes`;
+    projectsURL = `/scopes/${orgScopeID}/scopes`;
     usersURL = `/scopes/${orgScopeID}/users`;
     groupsURL = `/scopes/${orgScopeID}/groups`;
     rolesURL = `/scopes/${orgScopeID}/roles`;

ui/core/tests/acceptance/scopes-test.js

@@ -51,11 +51,11 @@ module('Acceptance | scopes', function (hooks) {
       scope: { id: instances.scopes.org.id, type: 'org' },
     });
     // Generate route URLs for resources
-    urls.globalScope = `/scopes/global`;
-    urls.orgScope = `/scopes/${instances.scopes.org.id}`;
-    urls.org2Scope = `/scopes/${instances.scopes.org2.id}`;
-    urls.projectScope = `/scopes/${instances.scopes.project.id}`;
-    urls.project2Scope = `/scopes/${instances.scopes.project2.id}`;
+    urls.globalScope = `/scopes/global/scopes`;
+    urls.orgScope = `/scopes/${instances.scopes.org.id}/scopes`;
+    urls.org2Scope = `/scopes/${instances.scopes.org2.id}/scopes`;
+    urls.projectScope = `/scopes/${instances.scopes.project.id}/scopes`;
+    urls.project2Scope = `/scopes/${instances.scopes.project2.id}/scopes`;
     authenticateSession({});
   });
 

ui/core/tests/unit/routes/scopes/scope/scopes-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/scope/scopes', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/scopes');
+    assert.ok(route);
+  });
+});

ui/core/tests/unit/routes/scopes/scope/scopes/index-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/scope/scopes/index', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/scopes/index');
+    assert.ok(route);
+  });
+});