From 5e3fc9ac69170913e0dcbb8317d47edfbff6ac8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1s=20Castillo?= Date: Thu, 9 Apr 2026 01:48:04 -0300 Subject: [PATCH 1/8] fix: update uicore, replace and implement mui search input from uicore MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Tomás Castillo --- package.json | 4 +- src/components/mui/search-input.js | 58 ------------------- .../select-page-template-dialog/index.js | 2 +- .../add-form-template-item-popup.js | 30 ++-------- .../form-template-from-duplicate-popup.js | 26 ++------- .../form-templates/form-template-list-page.js | 46 +++++---------- .../inventory/inventory-list-page.js | 41 ++++--------- .../page-templates/page-template-list-page.js | 2 +- ...nsor-form-add-item-from-inventory-popup.js | 2 +- .../select-templates-dialog.js | 2 +- .../sponsors/sponsor-forms-list-page/index.js | 2 +- src/pages/sponsors/sponsor-list-page.js | 51 ++++------------ .../tabs/sponsor-badge-scans/index.js | 53 ++++++----------- .../sponsor-cart-tab/components/cart-view.js | 2 +- .../components/select-form-dialog/index.js | 2 +- .../add-sponsor-form-template-popup/index.js | 43 +++++--------- .../sponsor-form-item-from-inventory.js | 2 +- .../sponsor-forms-manage-items.js | 2 +- .../tabs/sponsor-forms-tab/index.js | 2 +- .../add-sponsor-page-template-popup/index.js | 46 +++++---------- .../tabs/sponsor-pages-tab/index.js | 2 +- .../tabs/sponsor-purchases-tab/index.js | 2 +- .../sponsor-users-list-per-sponsor/index.js | 2 +- .../sponsors/sponsor-users-list-page/index.js | 2 +- yarn.lock | 29 ++++++---- 25 files changed, 126 insertions(+), 329 deletions(-) delete mode 100644 src/components/mui/search-input.js diff --git a/package.json b/package.json index 2449b9b27..be4b04261 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,7 @@ "process": "^0.11.10", "prop-types": "^15.8.1", "qr-scanner": "^1.4.2", - "react": "^16.13.1", + "react": "^17.0.0", "react-accessible-treeview": "^2.6.2", "react-beautiful-dnd": "^13.1.1", "react-bootstrap": "^0.31.5", @@ -110,7 +110,7 @@ "react-device-detect": "^2.2.2", "react-dnd": "^16.0.0", "react-dnd-html5-backend": "^16.0.0", - "react-dom": "^16.13.1", + "react-dom": "^17.0.0", "react-dropzone": "^4.2.13", "react-final-form": "^6.5.9", "react-google-maps": "^9.4.5", diff --git a/src/components/mui/search-input.js b/src/components/mui/search-input.js deleted file mode 100644 index a58b180c6..000000000 --- a/src/components/mui/search-input.js +++ /dev/null @@ -1,58 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { TextField, IconButton } from "@mui/material"; -import SearchIcon from "@mui/icons-material/Search"; -import ClearIcon from "@mui/icons-material/Clear"; - -const SearchInput = ({ term, onSearch, placeholder = "Search..." }) => { - const [searchTerm, setSearchTerm] = useState(term); - - useEffect(() => { - setSearchTerm(term || ""); - }, [term]); - - const handleSearch = (ev) => { - if (ev.key === "Enter") { - onSearch(searchTerm); - } - }; - - const handleClear = () => { - setSearchTerm(""); - onSearch(""); - }; - - return ( - - - - ) : ( - - ) - } - }} - onChange={(event) => setSearchTerm(event.target.value)} - onKeyDown={handleSearch} - fullWidth - sx={{ - "& .MuiOutlinedInput-root": { - height: "36px" - } - }} - /> - ); -}; - -export default SearchInput; diff --git a/src/components/select-page-template-dialog/index.js b/src/components/select-page-template-dialog/index.js index 1b3da99cd..3779ab5a5 100644 --- a/src/components/select-page-template-dialog/index.js +++ b/src/components/select-page-template-dialog/index.js @@ -17,7 +17,7 @@ import { Typography } from "@mui/material"; import CloseIcon from "@mui/icons-material/Close"; -import SearchInput from "../mui/search-input"; +import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input"; import { getPageTemplates } from "../../actions/page-template-actions"; import { DEFAULT_PER_PAGE } from "../../utils/constants"; import MuiInfiniteTable from "../mui/infinite-table"; diff --git a/src/pages/sponsors-global/form-templates/add-form-template-item-popup.js b/src/pages/sponsors-global/form-templates/add-form-template-item-popup.js index 9bb4df590..78e92cf53 100644 --- a/src/pages/sponsors-global/form-templates/add-form-template-item-popup.js +++ b/src/pages/sponsors-global/form-templates/add-form-template-item-popup.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect } from "react"; import T from "i18n-react/dist/i18n-react"; import { connect } from "react-redux"; import PropTypes from "prop-types"; @@ -14,14 +14,13 @@ import { FormControlLabel, Grid2, IconButton, - TextField, Typography } from "@mui/material"; import SwapVertIcon from "@mui/icons-material/SwapVert"; -import SearchIcon from "@mui/icons-material/Search"; import CloseIcon from "@mui/icons-material/Close"; import ImageIcon from "@mui/icons-material/Image"; import MuiTable from "openstack-uicore-foundation/lib/components/mui/table"; +import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input"; import MenuButton from "../../../components/mui/menu-button"; import { clearAllSelectedInventoryItems, @@ -50,8 +49,6 @@ const AddFormTemplateItemDialog = ({ selectedIds, term = "" }) => { - const [searchTerm, setSearchTerm] = useState(""); - useEffect(() => { getInventoryItems(term, currentPage, perPage, order, orderDir); }, []); @@ -68,9 +65,8 @@ const AddFormTemplateItemDialog = ({ getInventoryItems(term, currentPage, perPage, key, dir); }; - const handleOnSearch = (ev) => { - if (ev.key === "Enter") - getInventoryItems(searchTerm, currentPage, perPage, order, orderDir); + const handleOnSearch = (searchTerm) => { + getInventoryItems(searchTerm, currentPage, perPage, order, orderDir); }; const handleSelected = (id, isSelected) => { @@ -222,25 +218,11 @@ const AddFormTemplateItemDialog = ({ - - } - }} - onChange={(event) => setSearchTerm(event.target.value)} - onKeyDown={handleOnSearch} - fullWidth - sx={{ - "& .MuiOutlinedInput-root": { - height: "36px" - } - }} /> diff --git a/src/pages/sponsors-global/form-templates/form-template-from-duplicate-popup.js b/src/pages/sponsors-global/form-templates/form-template-from-duplicate-popup.js index a0382ddfb..f76fc6528 100644 --- a/src/pages/sponsors-global/form-templates/form-template-from-duplicate-popup.js +++ b/src/pages/sponsors-global/form-templates/form-template-from-duplicate-popup.js @@ -13,13 +13,12 @@ import { FormControlLabel, Grid2, IconButton, - TextField, Typography } from "@mui/material"; import SwapVertIcon from "@mui/icons-material/SwapVert"; -import SearchIcon from "@mui/icons-material/Search"; import CloseIcon from "@mui/icons-material/Close"; import MuiTable from "openstack-uicore-foundation/lib/components/mui/table"; +import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input"; import MenuButton from "../../../components/mui/menu-button"; const FormTemplateFromDuplicateDialog = ({ @@ -36,7 +35,6 @@ const FormTemplateFromDuplicateDialog = ({ onPageChange, onPerPageChange }) => { - const [searchTerm, setSearchTerm] = useState(""); const [selectedRow, setSelectedRow] = useState(null); const handleSort = (key, dir) => { @@ -57,8 +55,8 @@ const FormTemplateFromDuplicateDialog = ({ onDuplicate(selectedRow); }; - const handleOnSearch = (ev) => { - if (ev.key === "Enter") onSearch(searchTerm); + const handleOnSearch = (searchTerm) => { + onSearch(searchTerm); }; const columns = [ @@ -134,25 +132,11 @@ const FormTemplateFromDuplicateDialog = ({ - - } - }} - onChange={(event) => setSearchTerm(event.target.value)} - onKeyDown={handleOnSearch} - fullWidth - sx={{ - "& .MuiOutlinedInput-root": { - height: "36px" - } - }} /> diff --git a/src/pages/sponsors-global/form-templates/form-template-list-page.js b/src/pages/sponsors-global/form-templates/form-template-list-page.js index 048b14594..a4cabecb1 100644 --- a/src/pages/sponsors-global/form-templates/form-template-list-page.js +++ b/src/pages/sponsors-global/form-templates/form-template-list-page.js @@ -18,12 +18,11 @@ import { Checkbox, FormControlLabel, FormGroup, - Grid2, - TextField + Grid2 } from "@mui/material"; import Box from "@mui/material/Box"; import AddIcon from "@mui/icons-material/Add"; -import SearchIcon from "@mui/icons-material/Search"; +import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input"; import { connect } from "react-redux"; import T from "i18n-react/dist/i18n-react"; import MuiTable from "openstack-uicore-foundation/lib/components/mui/table"; @@ -71,7 +70,6 @@ const FormTemplateListPage = ({ formTemplateFromDuplicatePopupOpen, setFormTemplateFromDuplicatePopupOpen ] = useState(false); - const [searchTerm, setSearchTerm] = useState(""); useEffect(() => { getFormTemplates( @@ -104,20 +102,15 @@ const FormTemplateListPage = ({ getFormTemplates(term, currentPage, perPage, key, dir, showArchived); }; - const handleSearch = (ev) => { - if (ev.key === "Enter") { - getFormTemplates( - searchTerm, - currentPage, - perPage, - order, - orderDir, - showArchived - ); - } - // search on duplicate popup - if (typeof ev === "string") - getFormTemplates(ev, currentPage, perPage, order, orderDir, showArchived); + const handleSearch = (searchTerm) => { + getFormTemplates( + searchTerm, + currentPage, + perPage, + order, + orderDir, + showArchived + ); }; const handleRowEdit = (row) => { @@ -267,24 +260,11 @@ const FormTemplateListPage = ({ /> - - } - }} - onChange={(event) => setSearchTerm(event.target.value)} - onKeyDown={handleSearch} - sx={{ - "& .MuiOutlinedInput-root": { - height: "36px" - } - }} />