MR Permissions - Group and Project dropdown issues (#3219)

* saving work * working fix * addressed all comments except entry duplicates * Updated the Tooltip * fixed test to match new behaviour * format * comments * comment2
opendatahub-io · Sep 20, 2024 · 83472f4 · 83472f4
1 parent 83730aa
commit 83472f4
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 12 deletions.
diff --git a/...tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistryPermissions.cy.ts b/...tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistryPermissions.cy.ts
@@ -294,8 +294,12 @@ describe('MR Permissions', () => {
 
       usersTab.findAddGroupButton().click();
 
-      groupTable.findNameSelect().fill('new-example-mr-group');
-      cy.findByText('Create "new-example-mr-group"').click();
+      // Type the group name into the input
+      groupTable.findNameSelect().type('new-example-mr-group');
+
+      // Wait for the dropdown to appear and select the option
+      cy.contains('new-example-mr-group', { timeout: 10000 }).should('be.visible').click();
+
       groupTable.findSaveNewButton().click();
 
       cy.wait('@addGroup').then((interception) => {

diff --git a/frontend/src/components/TypeaheadSelect.tsx b/frontend/src/components/TypeaheadSelect.tsx
@@ -70,7 +70,6 @@ export interface TypeaheadSelectProps extends Omit<SelectProps, 'toggle' | 'onSe
 
 const defaultNoOptionsFoundMessage = (filter: string) => `No results found for "${filter}"`;
 const defaultCreateOptionMessage = (newValue: string) => `Create "${newValue}"`;
-
 const defaultFilterFunction = (filterValue: string, options: TypeaheadSelectOption[]) =>
   options.filter((o) => String(o.content).toLowerCase().includes(filterValue.toLowerCase()));
 
@@ -212,12 +211,10 @@ const TypeaheadSelect: React.FunctionComponent<TypeaheadSelectProps> = ({
   const onInputClick = () => {
     if (!isOpen) {
       openMenu();
-      setTimeout(() => {
-        textInputRef.current?.focus();
-      }, 100);
-    } else if (isFiltering) {
-      closeMenu();
     }
+    setTimeout(() => {
+      textInputRef.current?.focus();
+    }, 100);
   };
 
   const selectOption = (
@@ -401,6 +398,7 @@ const TypeaheadSelect: React.FunctionComponent<TypeaheadSelectProps> = ({
       onSelect={handleSelect}
       onOpenChange={(open) => !open && closeMenu()}
       toggle={toggle}
+      shouldFocusFirstItemOnOpen={false}
       ref={innerRef}
       {...props}
     >

diff --git a/frontend/src/concepts/roleBinding/RoleBindingPermissionsNameInput.tsx b/frontend/src/concepts/roleBinding/RoleBindingPermissionsNameInput.tsx
@@ -51,11 +51,10 @@ const RoleBindingPermissionsNameInput: React.FC<RoleBindingPermissionsNameInputP
     const displayName = isProjectSubject ? namespaceToProjectDisplayName(option, projects) : option;
     return { value: displayName, content: displayName };
   });
-
-  if (value && !typeAhead.includes(value)) {
+  // If we've selected an option that doesn't exist via isCreatable, include it in the options so it remains selected
+  if (value && !selectOptions.some((option) => option.value === value)) {
     selectOptions.push({ value, content: value });
   }
-
   return (
     <TypeaheadSelect
       selectOptions={selectOptions}
@@ -68,6 +67,7 @@ const RoleBindingPermissionsNameInput: React.FC<RoleBindingPermissionsNameInputP
         }
       }}
       placeholder={placeholderText}
+      createOptionMessage={(newValue) => `Select "${newValue}"`}
     />
   );
 };

diff --git a/frontend/src/concepts/roleBinding/RoleBindingPermissionsTableRow.tsx b/frontend/src/concepts/roleBinding/RoleBindingPermissionsTableRow.tsx
@@ -92,7 +92,8 @@ const RoleBindingPermissionsTableRow: React.FC<RoleBindingPermissionsTableRowPro
                 <Tooltip
                   content={
                     <div>
-                      This group is created by default. You can add users to this group via the API.
+                      This group is created by default. You can add users to this group in OpenShift
+                      user management, or ask the cluster admin to do so.
                     </div>
                   }
                 >