From a820f8545e62d2f293097e7ebd1a6de81a9ecfaf Mon Sep 17 00:00:00 2001 From: Priscila Moneo Date: Thu, 23 Apr 2026 17:14:20 -0300 Subject: [PATCH] feat: replace UploadInputV2 with UploadInputV3 --- src/components/forms/event-comment-form.js | 14 +-- src/components/forms/event-material-form.js | 6 +- .../mui/formik-inputs/mui-formik-upload.js | 101 ------------------ src/components/upload-dialog/index.js | 6 +- .../form-templates/sponsor-inventory-popup.js | 43 +------- .../page-template-document-download-module.js | 2 +- .../page-template-module-form.test.js | 9 -- 7 files changed, 16 insertions(+), 165 deletions(-) delete mode 100644 src/components/mui/formik-inputs/mui-formik-upload.js diff --git a/src/components/forms/event-comment-form.js b/src/components/forms/event-comment-form.js index 135536b98..e7b5b6265 100644 --- a/src/components/forms/event-comment-form.js +++ b/src/components/forms/event-comment-form.js @@ -9,17 +9,12 @@ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - **/ + * */ import React from "react"; import T from "i18n-react/dist/i18n-react"; import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"; -import { - Dropdown, - Input, - UploadInputV2, - TextEditor -} from "openstack-uicore-foundation/lib/components"; +import { Input } from "openstack-uicore-foundation/lib/components"; import { isEmpty, scrollToError, @@ -40,7 +35,7 @@ class EventCommentForm extends React.Component { this.handleSubmit = this.handleSubmit.bind(this); } - componentDidUpdate(prevProps, prevState, snapshot) { + componentDidUpdate(prevProps) { const state = {}; const name = this.props.entity.id ? this.props.entity.name @@ -80,7 +75,7 @@ class EventCommentForm extends React.Component { errors[id] = ""; entity[id] = value; - this.setState({ entity: entity, errors: errors }); + this.setState({ entity, errors }); } handleSubmit(ev) { @@ -146,7 +141,6 @@ class EventCommentForm extends React.Component { value={entity.body} onChange={this.handleChange} className="form-control" - error={hasErrors("body", errors)} /> diff --git a/src/components/forms/event-material-form.js b/src/components/forms/event-material-form.js index 3e84d974f..ae77d3741 100644 --- a/src/components/forms/event-material-form.js +++ b/src/components/forms/event-material-form.js @@ -16,7 +16,7 @@ import T from "i18n-react/dist/i18n-react"; import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"; import Dropdown from "openstack-uicore-foundation/lib/components/inputs/dropdown" import Input from "openstack-uicore-foundation/lib/components/inputs/text-input" -import UploadInputV2 from "openstack-uicore-foundation/lib/components/inputs/upload-input-v2"; +import UploadInputV3 from "openstack-uicore-foundation/lib/components/inputs/upload-input-v3"; import TextEditorV3 from "openstack-uicore-foundation/lib/components/inputs/editor-input-v3"; import { isEmpty, @@ -279,7 +279,7 @@ class EventMaterialForm extends React.Component { {" "} {T.translate("edit_event_material.slide")} (max size 500Mb) - - { - const [field, meta, helpers] = useField(name); - - const mediaType = { - max_size: MAX_INVENTORY_IMAGE_UPLOAD_SIZE, - max_uploads_qty: maxFiles, - type: { - allowed_extensions: ALLOWED_INVENTORY_IMAGE_FORMATS - } - }; - - const getInputValue = () => - field.value?.length > 0 - ? field.value.map((img) => ({ - ...img, - filename: - img.file_name ?? img.filename ?? img.file_path ?? img.file_url - })) - : []; - - const buildFileObject = (response) => { - const file = {}; - if (response.id !== undefined) file.id = response.id; - if (response.name) file.file_name = response.name; - if (response.md5) file.md5 = response.md5; - if (response.mime_type) file.mime_type = response.mime_type; - if (response.source_bucket) file.bucket = response.source_bucket; - if (response.size) file.size = response.size; - if (response.path && response.name) - file.file_path = `${response.path}${response.name}`; - return file; - }; - - const handleUploadComplete = (response) => { - if (response) { - const image = buildFileObject(response); - helpers.setValue([...(field.value || []), image]); - helpers.setTouched(true); - } - }; - - const handleRemove = (imageFile) => { - const updated = (field.value || []).filter( - (i) => i.filename !== imageFile.name - ); - helpers.setValue(updated); - if (onDelete) { - onDelete(imageFile.id); - } - }; - - const canAddMore = () => (field.value?.length || 0) < maxFiles; - - return ( - <> - {meta.touched && meta.error && ( - {meta.error} - )} - - - ); -}; - -MuiFormikUpload.propTypes = { - id: PropTypes.string, - name: PropTypes.string.isRequired, - onDelete: PropTypes.func, - maxFiles: PropTypes.number -}; - -export default MuiFormikUpload; diff --git a/src/components/upload-dialog/index.js b/src/components/upload-dialog/index.js index 19c4aca53..75eb31cfe 100644 --- a/src/components/upload-dialog/index.js +++ b/src/components/upload-dialog/index.js @@ -23,7 +23,7 @@ import { Typography } from "@mui/material"; import PropTypes from "prop-types"; -import UploadInputV2 from "openstack-uicore-foundation/lib/components/inputs/upload-input-v2"; +import { UploadInputV3 } from "openstack-uicore-foundation/lib/components"; import T from "i18n-react/dist/i18n-react"; import CloseIcon from "@mui/icons-material/Close"; import NoteAddIcon from "@mui/icons-material/NoteAdd"; @@ -138,11 +138,11 @@ const UploadDialog = ({ ) : ( - setUploadedFile(null)} postUrl={`${window.FILE_UPLOAD_API_BASE_URL}/api/v1/files/upload`} diff --git a/src/pages/sponsors-global/form-templates/sponsor-inventory-popup.js b/src/pages/sponsors-global/form-templates/sponsor-inventory-popup.js index 657d805ea..8501b4c41 100644 --- a/src/pages/sponsors-global/form-templates/sponsor-inventory-popup.js +++ b/src/pages/sponsors-global/form-templates/sponsor-inventory-popup.js @@ -19,7 +19,7 @@ import { } from "@mui/material"; import CloseIcon from "@mui/icons-material/Close"; import AdditionalInputList from "openstack-uicore-foundation/lib/components/mui/formik-inputs/additional-input-list"; -import UploadInputV2 from "openstack-uicore-foundation/lib/components/inputs/upload-input-v2"; +import { MuiFormikUpload } from "openstack-uicore-foundation/lib/components"; import { ALLOWED_INVENTORY_IMAGE_FORMATS, MAX_INVENTORY_IMAGE_UPLOAD_SIZE, @@ -37,12 +37,10 @@ import { } from "../../../utils/yup"; import ItemPriceTiers from "../../../components/mui/formik-inputs/item-price-tiers"; import MuiFormikQuantityField from "../../../components/mui/formik-inputs/mui-formik-quantity-field"; -import { getMediaInputValue } from "../../../utils/methods"; const SponsorItemDialog = ({ onClose, onSave, - onImageDeleted, onMetaFieldTypeDeleted, onMetaFieldTypeValueDeleted, entity: initialEntity @@ -81,27 +79,6 @@ const SponsorItemDialog = ({ useScrollToError(formik); - const handleImageUploadComplete = (response) => { - if (response) { - const image = { - file_path: `${response.path}${response.name}`, - filename: response.name - }; - formik.setFieldValue("images", [...formik.values.images, image]); - formik.setFieldTouched("images", true); - } - }; - - const handleRemoveImage = (imageFile) => { - const updated = formik.values.images.filter( - (i) => i.filename !== imageFile.name - ); - formik.setFieldValue("images", updated); - if (onImageDeleted && initialEntity.id && imageFile.id) { - onImageDeleted(initialEntity.id, imageFile.id); - } - }; - const handleClose = () => { formik.resetForm(); onClose(); @@ -240,22 +217,10 @@ const SponsorItemDialog = ({ {formik.touched.images && formik.errors.images && ( {formik.errors.images} )} - @@ -275,6 +240,8 @@ const SponsorItemDialog = ({ SponsorItemDialog.propTypes = { onClose: PropTypes.func.isRequired, onSave: PropTypes.func.isRequired, + onMetaFieldTypeDeleted: PropTypes.func, + onMetaFieldTypeValueDeleted: PropTypes.func, entity: PropTypes.object }; diff --git a/src/pages/sponsors-global/page-templates/page-template-popup/modules/page-template-document-download-module.js b/src/pages/sponsors-global/page-templates/page-template-popup/modules/page-template-document-download-module.js index 5241b752b..3cd675e3a 100644 --- a/src/pages/sponsors-global/page-templates/page-template-popup/modules/page-template-document-download-module.js +++ b/src/pages/sponsors-global/page-templates/page-template-popup/modules/page-template-document-download-module.js @@ -3,7 +3,7 @@ import PropTypes from "prop-types"; import T from "i18n-react/dist/i18n-react"; import { useField } from "formik"; import { Divider, Grid2, InputLabel } from "@mui/material"; -import MuiFormikUpload from "../../../../../components/mui/formik-inputs/mui-formik-upload"; +import { MuiFormikUpload } from "openstack-uicore-foundation/lib/components"; import MuiFormikTextField from "../../../../../components/mui/formik-inputs/mui-formik-textfield"; import { PAGE_MODULES_DOWNLOAD } from "../../../../../utils/constants"; import MuiFormikRadioGroup from "../../../../../components/mui/formik-inputs/mui-formik-radio-group"; diff --git a/src/pages/sponsors-global/page-templates/page-template-popup/page-template-module-form.test.js b/src/pages/sponsors-global/page-templates/page-template-popup/page-template-module-form.test.js index a5b7042e7..6d4df885b 100644 --- a/src/pages/sponsors-global/page-templates/page-template-popup/page-template-module-form.test.js +++ b/src/pages/sponsors-global/page-templates/page-template-popup/page-template-module-form.test.js @@ -29,14 +29,6 @@ jest.mock( } ); -jest.mock( - "../../../../components/mui/formik-inputs/mui-formik-upload", - () => - function MockMuiFormikUpload({ name }) { - return
Upload
; - } -); - jest.mock( "../../../../components/mui/formik-inputs/mui-formik-textfield", () => @@ -436,7 +428,6 @@ describe("PageModules", () => { expect(showConfirmDialog).toHaveBeenCalledWith( expect.objectContaining({ - title: "general.are_you_sure", type: "warning", showCancelButton: true })