From f71133256e36b7e9e990b50144285d03b62be5d5 Mon Sep 17 00:00:00 2001 From: alazik Date: Wed, 19 Nov 2025 15:33:48 +0100 Subject: [PATCH] Fixes #38916 - Update EditorHostSelect to pf5 --- config/webpack.vendor.js | 1 - package.json | 1 - .../react_app/common/scss/vendor-core.scss | 1 - .../components/Editor/EditorActions.js | 7 +- .../components/Editor/EditorReducer.js | 9 +- .../Editor/components/EditorHostSelect.js | 177 ++++++++++++++++-- .../Editor/components/EditorNavbar.js | 17 +- .../EditorHostSelect.test.js.snap | 123 ++++++------ .../__snapshots__/EditorNavbar.test.js.snap | 1 - 9 files changed, 230 insertions(+), 107 deletions(-) diff --git a/config/webpack.vendor.js b/config/webpack.vendor.js index c5704d47720..ec35a32edfe 100644 --- a/config/webpack.vendor.js +++ b/config/webpack.vendor.js @@ -40,7 +40,6 @@ module.exports = [ * Patternfly related */ 'patternfly-react', - 'patternfly-react-extensions', '@patternfly/react-core', '@patternfly/react-icons', '@patternfly/react-table', diff --git a/package.json b/package.json index 874f3c4ff8b..40a2ced9f36 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,6 @@ "multiselect": "~0.9.12", "number_helpers": "^0.1.1", "os-browserify": "^0.3.0", - "patternfly-react-extensions": "^3.0.15", "patternfly-react": "^2.40.0", "patternfly": "^3.59.5", "prop-types": "^15.6.0", diff --git a/webpack/assets/javascripts/react_app/common/scss/vendor-core.scss b/webpack/assets/javascripts/react_app/common/scss/vendor-core.scss index f186e631fd3..61db3af090b 100644 --- a/webpack/assets/javascripts/react_app/common/scss/vendor-core.scss +++ b/webpack/assets/javascripts/react_app/common/scss/vendor-core.scss @@ -12,7 +12,6 @@ // patternfly v3 @import '~patternfly-react/dist/sass/_patternfly-react.scss'; -@import '~patternfly-react-extensions/dist/sass/_select.scss'; @import '~patternfly/dist/sass/patternfly/_loading-state'; // patternfly v5 diff --git a/webpack/assets/javascripts/react_app/components/Editor/EditorActions.js b/webpack/assets/javascripts/react_app/components/Editor/EditorActions.js index 6eee129e6c9..a174c67734b 100644 --- a/webpack/assets/javascripts/react_app/components/Editor/EditorActions.js +++ b/webpack/assets/javascripts/react_app/components/Editor/EditorActions.js @@ -34,7 +34,6 @@ import { selectValue, selectShowError, selectIsSelectOpen, - selectHosts, } from './EditorSelectors'; import { parseDocs } from './EditorHelpers'; @@ -230,11 +229,7 @@ export const fetchAndPreview = ( } await dispatch(fetchHosts()); - const hosts = selectHosts(getState()); - - if (hosts.length > 0) - dispatch(previewTemplate({ host: hosts[0], renderPath, templateKindId })); - else dispatch({ type: EDITOR_HIDE_LOADING }); + dispatch({ type: EDITOR_HIDE_LOADING }); }; export const toggleModal = () => ({ diff --git a/webpack/assets/javascripts/react_app/components/Editor/EditorReducer.js b/webpack/assets/javascripts/react_app/components/Editor/EditorReducer.js index ac59416fee7..121fb31a2a4 100644 --- a/webpack/assets/javascripts/react_app/components/Editor/EditorReducer.js +++ b/webpack/assets/javascripts/react_app/components/Editor/EditorReducer.js @@ -81,7 +81,10 @@ export default (state = initialState, action) => { } case EDITOR_HOST_SELECT_CLEAR: { - return state.set('searchQuery', '').set('isSearchingHosts', false); + return state + .set('searchQuery', '') + .set('isSearchingHosts', false) + .set('selectedHost', { id: '', name: '' }); } case EDITOR_MODAL_TOGGLE: { @@ -141,9 +144,7 @@ export default (state = initialState, action) => { } case EDITOR_HOST_SELECT_TOGGLE: { - return state - .set('isSelectOpen', !state.isSelectOpen) - .set('searchQuery', ''); + return state.set('isSelectOpen', !state.isSelectOpen); } case EDITOR_HOST_SELECT_RESET: { diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorHostSelect.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorHostSelect.js index bea7ae583c0..c413ad72b44 100644 --- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorHostSelect.js +++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorHostSelect.js @@ -1,6 +1,18 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { Select } from 'patternfly-react-extensions'; +import { + Select, + SelectList, + SelectOption, + MenuToggle, + TextInputGroup, + TextInputGroupMain, + TextInputGroupUtilities, + Button, + Spinner, + Icon, +} from '@patternfly/react-core'; +import { TimesIcon } from '@patternfly/react-icons'; import { translate as __ } from '../../../common/I18n'; import './editorhostselect.scss'; @@ -20,7 +32,9 @@ class EditorHostSelect extends Component { handleClickOutside = event => { if (this.selectRef && !this.selectRef.contains(event.target)) { const { open, onToggle } = this.props; - if (open) onToggle(); + if (open) { + onToggle(); + } } }; @@ -31,19 +45,140 @@ class EditorHostSelect extends Component { } }; - render() { + handleInputChange = (_event, value) => { + const { onSearchChange, selectedItem, onChange } = this.props; + + onSearchChange({ target: { value } }); + + if (selectedItem && selectedItem.name && value !== selectedItem.name) { + onChange({ id: '', name: '' }); + } + }; + + onInputClick = () => { + const { open, onToggle } = this.props; + + if (!open) { + onToggle(); + } + }; + + toggle = toggleRef => { const { - show, - isLoading, + open, + searchQuery, + selectedItem, + onToggle, + onSearchClear, + } = this.props; + + const inputValue = searchQuery || (selectedItem && selectedItem.name) || ''; + + return ( + + + + + + + + + + ); + }; + + handleSelect = (_event, selection) => { + const { + options, onChange, + onToggle, onSearchChange, onSearchClear, - onToggle, + } = this.props; + const normalizedSelection = + selection === undefined || selection === null + ? undefined + : String(selection); + const selectedHost = + options.find(option => String(option.id) === normalizedSelection) || + options.find(option => option.name === normalizedSelection); + + if (selectedHost) { + onSearchChange({ target: { value: selectedHost.name } }); + onChange(selectedHost); + + onToggle(); + onSearchClear(); + } + }; + + render() { + const { + show, + isLoading, open, options, - searchQuery, + onToggle, selectedItem, } = this.props; + + const selectedValue = + selectedItem && + selectedItem.id !== undefined && + selectedItem.id !== null && + selectedItem.id !== '' + ? String(selectedItem.id) + : undefined; + + let selectOptions; + if (isLoading) { + selectOptions = ( + + + {__('Loading...')} + + ); + } else if (!options || options.length === 0) { + selectOptions = ( + + {__('No Results')} + + ); + } else { + selectOptions = options.map(option => ( + + {option.name || option.id} + + )); + } + return (
); } diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js index 207a2737b81..31509ee98fc 100644 --- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js +++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js @@ -117,15 +117,16 @@ const EditorNavbar = ({ show={selectedView === 'preview'} open={isSelectOpen} selectedItem={selectedHost} - placeholder={__('Select Host...')} isLoading={isFetchingHosts} - onChange={host => - previewTemplate({ - host, - renderPath: selectedRenderPath, - templateKindId, - }) - } + onChange={host => { + if (host && host.id && host.id !== '' && host.name) { + previewTemplate({ + host, + renderPath: selectedRenderPath, + templateKindId, + }); + } + }} searchQuery={searchQuery} onToggle={onHostSelectToggle} onSearchChange={onHostSearch} diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorHostSelect.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorHostSelect.test.js.snap index a1496b4187f..0d433f2a136 100644 --- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorHostSelect.test.js.snap +++ b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorHostSelect.test.js.snap @@ -6,39 +6,33 @@ exports[`EditorHostSelect should render renders EditorHostSelect 1`] = ` id="editor-select-container" > `; @@ -48,38 +42,35 @@ exports[`EditorHostSelect should render renders EditorHostSelect loading 1`] = ` id="editor-select-container" > `; diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorNavbar.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorNavbar.test.js.snap index 8aecab83ca1..e8d322dda43 100644 --- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorNavbar.test.js.snap +++ b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorNavbar.test.js.snap @@ -56,7 +56,6 @@ exports[`EditorNavbar rendring renders EditorNavbar 1`] = ` }, ] } - placeholder="Select Host..." searchQuery="" selectedItem={ Object {