feat: 🎸 add scope edit route and persistence actions

ui/core/app/components/form/scope/index.hbs

@@ -0,0 +1,53 @@
+<Rose::Form
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  @error={{@model.errors.base}}
+  @showEditToggle={{if @model.isNew false true}}
+  as |form|
+>
+
+  <form.input
+    @name="name"
+    @type="name"
+    @value={{@model.name}}
+    @label={{t "form.name.label"}}
+    @helperText={{t "form.name.help"}}
+    @error={{@model.errors.name}}
+    readonly={{false}}
+  as |field|>
+    {{#if @model.errors.name}}
+      <field.errors as |errors|>
+        {{#each @model.errors.name as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.input>
+
+  <form.textarea
+    @name="description"
+    @type="description"
+    @value={{@model.description}}
+    @label={{t "form.description.label"}}
+    @helperText={{t "form.description.help"}}
+    @error={{@model.errors.description}}
+    disabled={{@model.isSaving}}
+    readonly={{false}}
+  as |field|>
+    {{#if @model.errors.description}}
+      <field.errors as |errors|>
+        {{#each @model.errors.description as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.textarea>
+
+  <form.actions
+    @disabled={{if @model.cannotSave @model.cannotSave}}
+    @enableEditText={{t "actions.edit-form"}}
+    @submitText={{t "actions.save"}}
+    @cancelText={{t "actions.cancel"}} />
+
+</Rose::Form>

ui/core/app/router.js

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

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

@@ -1,6 +1,10 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import { A } from '@ember/array';
+import { action } from '@ember/object';
+import loading from 'ember-loading/decorator';
+import { confirm } from '../../decorators/confirm';
+import { notifySuccess, notifyError } from '../../decorators/notify';
 
 export default class ScopesScopeRoute extends Route {
   // =services
@@ -83,4 +87,49 @@ export default class ScopesScopeRoute extends Route {
       outlet: 'header-nav',
     });
   }
+
+  // =actions
+
+  /**
+   * Rollback changes on scope.
+   * @param {Model} scope
+   */
+  @action
+  cancel(scope) {
+    const { isNew } = scope;
+    scope.rollbackAttributes();
+    if (isNew) this.transitionTo('scopes.scope');
+  }
+
+  /**
+   * Handle save scope.
+   * @param {Model} scope
+   * @param {Event} e
+   */
+  @action
+  @loading
+  @notifyError(({ message }) => message)
+  @notifySuccess(({ isNew }) => isNew ? 'notifications.create-success' : 'notifications.save-success')
+  async save(scope) {
+    const { isNew } = scope;
+    await scope.save();
+    await this.transitionTo('scopes.scope.edit', scope);
+    if (isNew) this.refresh();
+  }
+
+  /**
+   * Deletes the scope and redirects to index.
+   * @param {Model} scope
+   */
+  @action
+  @loading
+  @confirm('questions.delete-confirm')
+  @notifyError(({ message }) => message, { catch: true })
+  @notifySuccess('notifications.delete-success')
+  async delete(scope) {
+    const { scopeID } = scope;
+    await scope.destroyRecord();
+    await this.replaceWith('scopes.scope.scopes', scopeID);
+    //this.refresh();
+  }
 }

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

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

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

@@ -13,9 +13,11 @@ export default class ScopesScopeIndexRoute extends Route {
    * If already authenticated, redirects to scopes/scope/scopes to display
    * list of sub scopes.
    */
-  redirect() {
+  redirect(model) {
     if (!this.session.isAuthenticated) {
       this.transitionTo('scopes.scope.authenticate');
+    } else if (model.isProject) {
+      this.transitionTo('scopes.scope.edit');
     } else {
       this.transitionTo('scopes.scope.scopes');
     }

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

@@ -0,0 +1,59 @@
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    {{#if @model.isOrg}}
+      <h2>
+        {{t "resources.org.title"}}
+        <DocLink @doc="org" @iconSize="large" />
+      </h2>
+      <p>{{t "resources.org.description"}}</p>
+    {{/if}}
+    {{#if @model.isProject}}
+      <h2>
+        {{t "resources.project.title"}}
+        <DocLink @doc="project" @iconSize="large" />
+      </h2>
+      <p>{{t "resources.project.description"}}</p>
+    {{/if}}
+    <Copyable
+      @text={{@model.id}}
+      @buttonText={{t "actions.copy-to-clipboard"}}
+      @acknowledgeText={{t "states.copied"}}
+    >
+      <code>{{@model.id}}</code>
+    </Copyable>
+  </page.header>
+
+  <page.navigation>
+    <Rose::Nav::Tabs as |nav|>
+      <nav.link @route='scopes.scope'>
+        {{t 'titles.details'}}
+      </nav.link>
+    </Rose::Nav::Tabs>
+  </page.navigation>
+
+  <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 'resources.project.actions.delete'}}
+      </dropdown.button>
+    </Rose::Dropdown>
+  </page.actions>
+
+  <page.body>
+    <Form::Scope
+      @model={{@model}}
+      @submit={{route-action "save" @model}}
+      @cancel={{route-action "cancel" @model}}
+    />
+  </page.body>
+
+</Rose::Layout::Page>

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

@@ -46,7 +46,7 @@
             @title={{scope.name}}
             @description={{scope.description}}
             @id={{scope.id}}
-            @icon={{if @model.currentScope.isGlobal "app-icons/org" "app-icons/project"}}
+            @icon={{if scope.isOrg "app-icons/org" "app-icons/project"}}
             @route="scopes.scope"
             @model={{scope.id}}
           />

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

@@ -30,6 +30,8 @@ module('Acceptance | scopes', function (hooks) {
     org2Scope: null,
     projectScope: null,
     project2Scope: null,
+    projectScopeEdit: null,
+    project2ScopeEdit: null,
   };
 
   hooks.beforeEach(function () {
@@ -54,8 +56,10 @@ module('Acceptance | scopes', function (hooks) {
     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`;
+    urls.projectScope = `/scopes/${instances.scopes.project.id}`;
+    urls.project2Scope = `/scopes/${instances.scopes.project2.id}`;
+    urls.projectScopeEdit = `/scopes/${instances.scopes.project.id}/edit`;
+    urls.project2ScopeEdit = `/scopes/${instances.scopes.project2.id}/edit`;
     authenticateSession({});
   });
 
@@ -110,9 +114,9 @@ module('Acceptance | scopes', function (hooks) {
     assert.expect(2);
     await visit(urls.projectScope);
     await a11yAudit();
-    assert.equal(currentURL(), urls.projectScope);
+    assert.equal(currentURL(), urls.projectScopeEdit);
     await click('.rose-header-nav .rose-dropdown + .rose-dropdown a:nth-child(2)');
-    assert.equal(currentURL(), urls.project2Scope);
+    assert.equal(currentURL(), urls.project2ScopeEdit);
   });
 
 });

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

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