From cb892997d9aa7dab4742581eafc04111e65fcdf0 Mon Sep 17 00:00:00 2001 From: Yulia Krimerman Date: Mon, 16 Sep 2024 08:29:02 -0400 Subject: [PATCH 1/8] saving work --- frontend/src/components/TypeaheadSelect.tsx | 23 ++++++++++++--------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/TypeaheadSelect.tsx b/frontend/src/components/TypeaheadSelect.tsx index 28932e5436..9d9c846c6f 100644 --- a/frontend/src/components/TypeaheadSelect.tsx +++ b/frontend/src/components/TypeaheadSelect.tsx @@ -69,7 +69,7 @@ export interface TypeaheadSelectProps extends Omit `No results found for "${filter}"`; -const defaultCreateOptionMessage = (newValue: string) => `Create "${newValue}"`; +const defaultSelectOptionMessage = (newValue: string) => `Select "${newValue}"`; const defaultFilterFunction = (filterValue: string, options: TypeaheadSelectOption[]) => options.filter((o) => String(o.content).toLowerCase().includes(filterValue.toLowerCase())); @@ -88,7 +88,7 @@ const TypeaheadSelect: React.FunctionComponent = ({ noOptionsFoundMessage = defaultNoOptionsFoundMessage, isCreatable = false, isCreateOptionOnTop = false, - createOptionMessage = defaultCreateOptionMessage, + createOptionMessage = defaultSelectOptionMessage, isDisabled, toggleWidth, toggleProps, @@ -212,12 +212,10 @@ const TypeaheadSelect: React.FunctionComponent = ({ const onInputClick = () => { if (!isOpen) { openMenu(); - setTimeout(() => { - textInputRef.current?.focus(); - }, 100); - } else if (isFiltering) { - closeMenu(); } + setTimeout(() => { + textInputRef.current?.focus(); + }, 100); }; const selectOption = ( @@ -248,12 +246,17 @@ const TypeaheadSelect: React.FunctionComponent = ({ }; const onTextInputChange = (_event: React.FormEvent, value: string) => { - setFilterValue(value || ''); + setFilterValue(value); setIsFiltering(true); if (onInputChange) { onInputChange(value); } - + if (selected && value !== selected.content) { + // Clear the selection when the input value changes + if (onSelect) { + onSelect(undefined, ''); + } + } resetActiveAndFocusedItem(); }; @@ -371,7 +374,7 @@ const TypeaheadSelect: React.FunctionComponent = ({ > Date: Wed, 18 Sep 2024 10:36:36 -0400 Subject: [PATCH 2/8] working fix --- .../mocked/modelRegistrySettings/modelRegistryPermissions.cy.ts | 2 +- frontend/src/components/TypeaheadSelect.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistryPermissions.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistryPermissions.cy.ts index ddabf8aaff..5670b27efc 100644 --- a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistryPermissions.cy.ts +++ b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistryPermissions.cy.ts @@ -295,7 +295,7 @@ describe('MR Permissions', () => { usersTab.findAddGroupButton().click(); groupTable.findNameSelect().fill('new-example-mr-group'); - cy.findByText('Create "new-example-mr-group"').click(); + cy.findByText('Select "new-example-mr-group"').click(); groupTable.findSaveNewButton().click(); cy.wait('@addGroup').then((interception) => { diff --git a/frontend/src/components/TypeaheadSelect.tsx b/frontend/src/components/TypeaheadSelect.tsx index 9d9c846c6f..4b10521975 100644 --- a/frontend/src/components/TypeaheadSelect.tsx +++ b/frontend/src/components/TypeaheadSelect.tsx @@ -374,7 +374,7 @@ const TypeaheadSelect: React.FunctionComponent = ({ > Date: Thu, 19 Sep 2024 14:21:23 -0400 Subject: [PATCH 3/8] addressed all comments except entry duplicates --- .../modelRegistryPermissions.cy.ts | 2 +- frontend/src/components/TypeaheadSelect.tsx | 8 ++++---- .../RoleBindingPermissionsNameInput.tsx | 16 ++++++++++++---- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistryPermissions.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistryPermissions.cy.ts index 5670b27efc..ddabf8aaff 100644 --- a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistryPermissions.cy.ts +++ b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistryPermissions.cy.ts @@ -295,7 +295,7 @@ describe('MR Permissions', () => { usersTab.findAddGroupButton().click(); groupTable.findNameSelect().fill('new-example-mr-group'); - cy.findByText('Select "new-example-mr-group"').click(); + cy.findByText('Create "new-example-mr-group"').click(); groupTable.findSaveNewButton().click(); cy.wait('@addGroup').then((interception) => { diff --git a/frontend/src/components/TypeaheadSelect.tsx b/frontend/src/components/TypeaheadSelect.tsx index 4b10521975..bdcffbe04b 100644 --- a/frontend/src/components/TypeaheadSelect.tsx +++ b/frontend/src/components/TypeaheadSelect.tsx @@ -69,8 +69,7 @@ export interface TypeaheadSelectProps extends Omit `No results found for "${filter}"`; -const defaultSelectOptionMessage = (newValue: string) => `Select "${newValue}"`; - +const defaultCreateOptionMessage = (newValue: string) => `Create "${newValue}"`; const defaultFilterFunction = (filterValue: string, options: TypeaheadSelectOption[]) => options.filter((o) => String(o.content).toLowerCase().includes(filterValue.toLowerCase())); @@ -88,7 +87,7 @@ const TypeaheadSelect: React.FunctionComponent = ({ noOptionsFoundMessage = defaultNoOptionsFoundMessage, isCreatable = false, isCreateOptionOnTop = false, - createOptionMessage = defaultSelectOptionMessage, + createOptionMessage = defaultCreateOptionMessage, isDisabled, toggleWidth, toggleProps, @@ -246,7 +245,7 @@ const TypeaheadSelect: React.FunctionComponent = ({ }; const onTextInputChange = (_event: React.FormEvent, value: string) => { - setFilterValue(value); + setFilterValue(value || ''); setIsFiltering(true); if (onInputChange) { onInputChange(value); @@ -404,6 +403,7 @@ const TypeaheadSelect: React.FunctionComponent = ({ 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 index 029d82f39f..758734b7a9 100644 --- a/frontend/src/concepts/roleBinding/RoleBindingPermissionsNameInput.tsx +++ b/frontend/src/concepts/roleBinding/RoleBindingPermissionsNameInput.tsx @@ -52,10 +52,6 @@ const RoleBindingPermissionsNameInput: React.FC `Select "${newValue}"`} + filterFunction={(filterValue, options) => { + const filteredOptions = options.filter((option) => + String(option.content).toLowerCase().includes(filterValue.toLowerCase()), + ); + + if (filteredOptions.length === 0 && filterValue.trim() !== '') { + return [{ value: filterValue, content: filterValue }]; + } + + return filteredOptions; + }} /> ); }; From 257acc682c31ae865c8ac0baafb724ade3e974e6 Mon Sep 17 00:00:00 2001 From: Yulia Krimerman Date: Thu, 19 Sep 2024 14:36:43 -0400 Subject: [PATCH 4/8] Updated the Tooltip --- .../concepts/roleBinding/RoleBindingPermissionsTableRow.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/concepts/roleBinding/RoleBindingPermissionsTableRow.tsx b/frontend/src/concepts/roleBinding/RoleBindingPermissionsTableRow.tsx index 01aad076bc..c58e6dea53 100644 --- a/frontend/src/concepts/roleBinding/RoleBindingPermissionsTableRow.tsx +++ b/frontend/src/concepts/roleBinding/RoleBindingPermissionsTableRow.tsx @@ -92,7 +92,8 @@ const RoleBindingPermissionsTableRow: React.FC - 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. } > From 6058971d1cb20a91e2ac81424038c02a7820dd7b Mon Sep 17 00:00:00 2001 From: Yulia Krimerman Date: Thu, 19 Sep 2024 15:36:29 -0400 Subject: [PATCH 5/8] fixed test to match new behaviour --- .../modelRegistrySettings/modelRegistryPermissions.cy.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistryPermissions.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistryPermissions.cy.ts index ddabf8aaff..1dcb6066f2 100644 --- a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistryPermissions.cy.ts +++ b/frontend/src/__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) => { From 645d361dba74e1fb63b4b2638c2fd7735aa34637 Mon Sep 17 00:00:00 2001 From: Yulia Krimerman Date: Thu, 19 Sep 2024 16:07:11 -0400 Subject: [PATCH 6/8] format --- .../modelRegistrySettings/modelRegistryPermissions.cy.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistryPermissions.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistryPermissions.cy.ts index 1dcb6066f2..98bdd9ce41 100644 --- a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistryPermissions.cy.ts +++ b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistrySettings/modelRegistryPermissions.cy.ts @@ -296,10 +296,10 @@ describe('MR Permissions', () => { // 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) => { From 016f48147b92d0d3e3b35522d9cc5676c03c2279 Mon Sep 17 00:00:00 2001 From: Yulia Krimerman Date: Fri, 20 Sep 2024 09:08:38 -0400 Subject: [PATCH 7/8] comments --- frontend/src/components/TypeaheadSelect.tsx | 7 +------ .../roleBinding/RoleBindingPermissionsNameInput.tsx | 11 ----------- 2 files changed, 1 insertion(+), 17 deletions(-) diff --git a/frontend/src/components/TypeaheadSelect.tsx b/frontend/src/components/TypeaheadSelect.tsx index bdcffbe04b..1d9aab25c3 100644 --- a/frontend/src/components/TypeaheadSelect.tsx +++ b/frontend/src/components/TypeaheadSelect.tsx @@ -250,12 +250,7 @@ const TypeaheadSelect: React.FunctionComponent = ({ if (onInputChange) { onInputChange(value); } - if (selected && value !== selected.content) { - // Clear the selection when the input value changes - if (onSelect) { - onSelect(undefined, ''); - } - } + resetActiveAndFocusedItem(); }; diff --git a/frontend/src/concepts/roleBinding/RoleBindingPermissionsNameInput.tsx b/frontend/src/concepts/roleBinding/RoleBindingPermissionsNameInput.tsx index 758734b7a9..ce0b8f7247 100644 --- a/frontend/src/concepts/roleBinding/RoleBindingPermissionsNameInput.tsx +++ b/frontend/src/concepts/roleBinding/RoleBindingPermissionsNameInput.tsx @@ -65,17 +65,6 @@ const RoleBindingPermissionsNameInput: React.FC `Select "${newValue}"`} - filterFunction={(filterValue, options) => { - const filteredOptions = options.filter((option) => - String(option.content).toLowerCase().includes(filterValue.toLowerCase()), - ); - - if (filteredOptions.length === 0 && filterValue.trim() !== '') { - return [{ value: filterValue, content: filterValue }]; - } - - return filteredOptions; - }} /> ); }; From 186b5dfed38bf468a67147fd078c97f690472e2e Mon Sep 17 00:00:00 2001 From: Yulia Krimerman Date: Fri, 20 Sep 2024 13:11:09 -0400 Subject: [PATCH 8/8] comment2 --- .../concepts/roleBinding/RoleBindingPermissionsNameInput.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/concepts/roleBinding/RoleBindingPermissionsNameInput.tsx b/frontend/src/concepts/roleBinding/RoleBindingPermissionsNameInput.tsx index ce0b8f7247..0bc24d036c 100644 --- a/frontend/src/concepts/roleBinding/RoleBindingPermissionsNameInput.tsx +++ b/frontend/src/concepts/roleBinding/RoleBindingPermissionsNameInput.tsx @@ -51,7 +51,10 @@ const RoleBindingPermissionsNameInput: React.FC option.value === value)) { + selectOptions.push({ value, content: value }); + } return (