feat: 🎸 Add managed groups create CRUD operation

addons/api/mirage/config.js

@@ -523,6 +523,19 @@ export default function () {
   );
   this.get('/managed-groups/:id');
   this.del('/managed-groups/:id');
+  this.post(
+    '/managed-groups/:idMethod',
+    function ({ managedGroups }, { params: { idMethod } }) {
+      const attrs = this.normalizedRequestAttrs();
+      const id = idMethod.split(':')[0];
+      const managedGroup = managedGroups.find(id);
+      const updatedAttrs = {
+        version: attrs.version,
+        attributes: managedGroup.attributes,
+      };
+      return managedGroup.update(updatedAttrs);
+    }
+  );
 
   /* Uncomment the following line and the Response import above
    * Then change the response code to simulate error responses.

addons/core/translations/resources/en-us.yaml

@@ -357,3 +357,4 @@ managed-group:
   description: A managed group is a resource that represents a collection of accounts.
   actions:
     delete: Delete Managed Group
+    create: Create Managed Group

ui/admin/app/components/form/managed-group/index.hbs

@@ -1,4 +1,11 @@
-<Rose::Form as |form|>
+<Rose::Form
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  @error={{@model.errors.base}}
+  @showEditToggle={{if @model.isNew false true}}
+  as |form|
+>
   <form.input
     @value={{@model.type}}
     @label={{t 'form.type.label'}}
@@ -52,4 +59,10 @@
     readonly={{true}}
     @disabled={{true}}
   />
+  <form.actions
+    @disabled={{if @model.cannotSave @model.cannotSave}}
+    @enableEditText={{t 'actions.edit-form'}}
+    @submitText={{t 'actions.save'}}
+    @cancelText={{t 'actions.cancel'}}
+  />
 </Rose::Form>

ui/admin/app/router.js

@@ -61,6 +61,7 @@ Router.map(function () {
               { path: ':managed_group_id' },
               function () {}
             );
+            this.route('new');
           });
         });
         this.route('new');

ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups.js

@@ -1,8 +1,8 @@
 import Route from '@ember/routing/route';
-import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
-import { confirm } from 'core/decorators/confirm';
+import { inject as service } from '@ember/service';
 import loading from 'ember-loading/decorator';
+import { confirm } from 'core/decorators/confirm';
 import { notifySuccess, notifyError } from 'core/decorators/notify';
 
 export default class ScopesScopeAuthMethodsAuthMethodManagedGroupsRoute extends Route {
@@ -33,6 +33,21 @@ export default class ScopesScopeAuthMethodsAuthMethodManagedGroupsRoute extends
     }
   }
 
+  @action
+  @loading
+  @notifyError(({ message }) => message)
+  @notifySuccess(({ isNew }) =>
+    isNew ? 'notifications.create-success' : 'notifications.save-success'
+  )
+  async save(managedGroup) {
+    await managedGroup.save();
+    await this.transitionTo(
+      'scopes.scope.auth-methods.auth-method.managed-groups.managed-group',
+      managedGroup
+    );
+    this.refresh();
+  }
+
   /**
    * Delete a managed group in current scope and redirect to index
    * @param {ManagedGroupModel} managed group

ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups/new.js

@@ -0,0 +1,36 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeAuthMethodsAuthMethodManagedGroupsNewRoute extends Route {
+  // =methods
+  model() {
+    const { id: auth_method_id, type } = this.modelFor(
+      'scopes.scope.auth-methods.auth-method'
+    );
+    return this.store.createRecord('managed-group', {
+      type,
+      auth_method_id,
+    });
+  }
+
+  renderTemplate() {
+    super.renderTemplate(...arguments);
+
+    this.render(
+      'scopes/scope/auth-methods/auth-method/managed-groups/new/-header',
+      {
+        into: 'scopes/scope/auth-methods/auth-method',
+        outlet: 'header',
+      }
+    );
+
+    this.render('_empty', {
+      into: 'scopes/scope/auth-methods/auth-method',
+      outlet: 'actions',
+    });
+
+    this.render('_empty', {
+      into: 'scopes/scope/auth-methods/auth-method',
+      outlet: 'navigation',
+    });
+  }
+}

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/-actions.hbs

@@ -67,6 +67,18 @@
     </dropdown.link>
   {{/if}}
 
+  {{#if (feature-flag 'managed-groups')}}
+    {{! TODO: Add capabilities }}
+    {{#if @model.isOIDC}}
+      <dropdown.link
+        @route='scopes.scope.auth-methods.auth-method.managed-groups.new'
+        @model={{@model}}
+      >
+        {{t 'resources.managed-group.actions.create'}}
+      </dropdown.link>
+    {{/if}}
+  {{/if}}
+
   {{#if (can 'delete model' @model)}}
     <dropdown.separator />
     <dropdown.button

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/new.hbs

@@ -0,0 +1,5 @@
+<Form::ManagedGroup
+  @model={{@model}}
+  @submit={{route-action 'save' @model}}
+  @cancel={{route-action 'cancel' @model}}
+/>

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/new/-header.hbs

@@ -0,0 +1,5 @@
+<h2>
+  {{t 'titles.new'}}
+  {{! TODO: change the icon link }}
+  <DocLink @doc='account.new' @iconSize='large' />
+</h2>

ui/admin/tests/unit/routes/scopes/scope/auth-methods/auth-method/managed-groups/new-test.js

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