Add links to role principals with ability (#1545)

chore: 🤖 add links to role/principals

ui/admin/app/components/link-to-principal/index.hbs

@@ -0,0 +1,12 @@
+{{#if this.isManagedGroup}}
+  <LinkTo
+    @route={{this.link}}
+    @models={{array @model.auth_method_id @model.id}}
+  >
+    {{@model.displayName}}
+  </LinkTo>
+{{else}}
+  <LinkTo @route={{this.link}} @model={{@model.id}}>
+    {{@model.displayName}}
+  </LinkTo>
+{{/if}}

ui/admin/app/components/link-to-principal/index.js

@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+
+const principalTypeRoutes = {
+  user: 'scopes.scope.users.user',
+  group: 'scopes.scope.groups.group',
+  'managed-group':
+    'scopes.scope.auth-methods.auth-method.managed-groups.managed-group',
+};
+
+export default class LinkToPrincipalComponent extends Component {
+  /**
+   * return true if its a managed group model
+   * @type {boolean}
+   */
+  get isManagedGroup() {
+    return this.args.model.constructor.modelName === 'managed-group';
+  }
+
+ /**
+   * return route based on principal type
+   * @type {string}
+   */
+  get link() {
+    return principalTypeRoutes[this.args.model.constructor.modelName];
+  }
+}

ui/admin/app/components/principal-type-badge/index.hbs

@@ -0,0 +1,6 @@
+<Hds::Badge
+  @icon={{this.icon}}
+  @text={{t
+    (concat 'resources.role.principal.types.' @model.constructor.modelName)
+  }}
+/>

ui/admin/app/components/principal-type-badge/index.js

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+
+const principalTypes = {
+  user: 'user',
+  group: 'folder-users',
+  'managed-group': 'cloud-lock',
+};
+export default class PrincipalTypeBadgeComponent extends Component {
+  /**
+   * Display icons based on the pricipal type
+   * @type {string}
+   */
+
+  get icon() {
+    return principalTypes[this.args.model.constructor.modelName];
+  }
+}