diff --git a/package.json b/package.json index 2449b9b27..3deb1134f 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,7 @@ "moment": "^2.29.1", "moment-duration-format": "^2.3.2", "moment-timezone": "^0.5.33", - "openstack-uicore-foundation": "5.0.15", + "openstack-uicore-foundation": "5.0.16", "p-limit": "^6.1.0", "path-browserify": "^1.0.1", "postcss-loader": "^6.2.1", 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..2a6f6cb06 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,14 @@ 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, + DEFAULT_CURRENT_PAGE, + perPage, + order, + orderDir + ); }; const handleSelected = (id, isSelected) => { @@ -222,25 +224,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..f5a379013 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, + DEFAULT_CURRENT_PAGE, + perPage, + order, + orderDir, + showArchived + ); }; const handleRowEdit = (row) => { @@ -267,25 +260,14 @@ const FormTemplateListPage = ({ /> - - } - }} - onChange={(event) => setSearchTerm(event.target.value)} - onKeyDown={handleSearch} - sx={{ - "& .MuiOutlinedInput-root": { - height: "36px" - } - }} - /> + + +