fix overview page search select

ui/lib/core/addon/components/search-select.js

@@ -210,14 +210,13 @@ export default class SearchSelect extends Component {
   }
 
   shouldShowCreate(id, searchResults) {
-    if (searchResults && searchResults.length && searchResults[0].groupName) {
+    if (this.args.disallowNewItems) return false;
+
+    if (searchResults?.length && searchResults[0].groupName) {
       return !searchResults.some((group) => group.options.find((opt) => opt.id === id));
     }
     const existingOption =
-      this.dropdownOptions && this.dropdownOptions.find((opt) => opt.id === id || opt.name === id);
-    if (this.args.disallowNewItems && !existingOption) {
-      return false;
-    }
+      this.dropdownOptions && this.dropdownOptions.some((opt) => opt.id === id || opt.name === id);
     return !existingOption;
   }
 

ui/lib/ldap/addon/components/page/overview.hbs

@@ -53,19 +53,25 @@
       class="is-flex-half"
     />
     <div>
-      <OverviewCard @cardTitle="Generate credentials" @subText="Quickly generate credentials by typing the role name.">
+      <OverviewCard
+        @cardTitle="Generate credentials"
+        @subText="Quickly generate credentials by typing the role name. Only the engine's top-level roles are listed here."
+      >
         <:content>
           <div class="has-top-margin-m is-flex">
             <SearchSelect
               class="is-flex-1"
               @ariaLabel="Role"
               @placeholder="Select a role"
               @disallowNewItems={{true}}
-              @options={{@roles}}
+              @options={{this.roleOptions}}
               @selectLimit="1"
               @fallbackComponent="input-search"
               @onChange={{this.selectRole}}
               @renderInPlace={{true}}
+              @passObject={{true}}
+              @objectKeys={{array "id" "name" "type"}}
+              @shouldRenderName={{true}}
             />
             <div>
               <Hds::Button

ui/lib/ldap/addon/components/page/overview.ts

@@ -24,15 +24,34 @@ interface Args {
   breadcrumbs: Array<Breadcrumb>;
 }
 
+interface Option {
+  id: string;
+  name: string;
+  type: string;
+}
+
 export default class LdapLibrariesPageComponent extends Component<Args> {
   @service('app-router') declare readonly router: RouterService;
 
   @tracked selectedRole: LdapRoleModel | undefined;
 
+  get roleOptions() {
+    const options = this.args.roles
+      // hierarchical roles are not selectable
+      .filter((r: LdapRoleModel) => !r.name.endsWith('/'))
+      // *hack alert* - type is set as id so it renders beside name in search select
+      // this is to avoid more changes to search select and is okay because we are only selecting one item
+      .map((r: LdapRoleModel) => ({ id: r.type, name: r.name, type: r.type }));
+    return options;
+  }
+
   @action
-  selectRole([roleName]: Array<string>) {
-    const model = this.args.roles.find((role) => role.name === roleName);
-    this.selectedRole = model;
+  async selectRole([option]: Array<Option>) {
+    if (option) {
+      const { name, type } = option;
+      const model = this.args.roles.find((role) => role.name === name && role.type === type);
+      this.selectedRole = model;
+    }
   }
 
   @action