Skip to content

feat: replace UploadInputV2 with UploadInputV3 #891

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
smarcet merged 1 commit into from
May 8, 2026
Merged

feat: replace UploadInputV2 with UploadInputV3 #891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 4 additions & 10 deletions src/components/forms/event-comment-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -146,7 +141,6 @@ class EventCommentForm extends React.Component {
value={entity.body}
onChange={this.handleChange}
className="form-control"
error={hasErrors("body", errors)}
/>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/forms/event-material-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -279,7 +279,7 @@ class EventMaterialForm extends React.Component {
{" "}
{T.translate("edit_event_material.slide")} (max size 500Mb)
</label>
<UploadInputV2
<UploadInputV3
id="slide"
onUploadComplete={this.onMediaUploadComplete}
value={mediaInputValue}
Expand Down Expand Up @@ -349,7 +349,7 @@ class EventMaterialForm extends React.Component {
{T.translate("edit_event_material.media_upload_file")}{" "}
{`(max size: ${entity.media_upload_type.max_size / KB}Mb )`}
</label>
<UploadInputV2
<UploadInputV3
id={`media_upload_${media_type.id}`}
onUploadComplete={this.onMediaUploadComplete}
value={mediaInputValue}
Expand Down
101 changes: 0 additions & 101 deletions src/components/mui/formik-inputs/mui-formik-upload.js
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions src/components/upload-dialog/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -138,11 +138,11 @@ const UploadDialog = ({
<CurrentFile file={value} onRemove={handleRemove} />
</>
) : (
<UploadInputV2
<UploadInputV3
id={`media_upload_${name}`}
name={name}
onUploadComplete={setUploadedFile}
value={[]} // we handle with-value view in other way
value={[]}
mediaType={mediaType}
onRemove={() => setUploadedFile(null)}
postUrl={`${window.FILE_UPLOAD_API_BASE_URL}/api/v1/files/upload`}
Expand Down
43 changes: 5 additions & 38 deletions src/pages/sponsors-global/form-templates/sponsor-inventory-popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 23, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Inconsistent with PR intent — this file uses MuiFormikUpload, not UploadInputV3.

The PR title and sibling files migrate UploadInputV2 → UploadInputV3, but here the replacement is MuiFormikUpload. If intentional (Formik-integrated variant), consider calling this out in the PR description; otherwise align on UploadInputV3 for consistency.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/pages/sponsors-global/form-templates/sponsor-inventory-popup.js` at line
21, The import in
src/pages/sponsors-global/form-templates/sponsor-inventory-popup.js currently
brings in MuiFormikUpload but the PR intends to standardize on UploadInputV3;
update the import to use UploadInputV3 (or explicitly document why
Formik-specific MuiFormikUpload is required in the PR description), and then
update any usage of MuiFormikUpload in this file (e.g., where the component is
rendered) to the UploadInputV3 component name so the file aligns with the other
migrated files (or add a clear comment in the file/PR explaining the deliberate
Formik choice if you must keep MuiFormikUpload).

Copy link
Copy Markdown

@smarcet smarcet May 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@priscila-moneo this point the same question that i did please change it to v3

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!

import {
ALLOWED_INVENTORY_IMAGE_FORMATS,
MAX_INVENTORY_IMAGE_UPLOAD_SIZE,
Expand All @@ -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
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -240,22 +217,10 @@ const SponsorItemDialog = ({
{formik.touched.images && formik.errors.images && (
<FormHelperText error>{formik.errors.images}</FormHelperText>
)}
<UploadInputV2
<MuiFormikUpload
Comment thread
smarcet marked this conversation as resolved.
id="image-upload"
name="image"
onUploadComplete={handleImageUploadComplete}
value={getMediaInputValue(initialEntity)}
mediaType={mediaType}
onRemove={handleRemoveImage}
postUrl={`${window.FILE_UPLOAD_API_BASE_URL}/api/v1/files/upload`}
djsConfig={{ withCredentials: true }}
name="images"
maxFiles={mediaType.max_uploads_qty}
canAdd={
mediaType.is_editable ||
(initialEntity.images?.length || 0) <
mediaType.max_uploads_qty
}
parallelChunkUploads
/>
</Grid2>
</Grid2>
Expand All @@ -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
};

Expand Down
2 changes: 1 addition & 1 deletion ...obal/page-templates/page-template-popup/modules/page-template-document-download-module.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
9 changes: 0 additions & 9 deletions ...ages/sponsors-global/page-templates/page-template-popup/page-template-module-form.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,6 @@ jest.mock(
}
);

jest.mock(
"../../../../components/mui/formik-inputs/mui-formik-upload",
() =>
function MockMuiFormikUpload({ name }) {
return <div data-testid={`upload-${name}`}>Upload</div>;
}
);

jest.mock(
"../../../../components/mui/formik-inputs/mui-formik-textfield",
() =>
Expand Down Expand Up @@ -436,7 +428,6 @@ describe("PageModules", () => {

expect(showConfirmDialog).toHaveBeenCalledWith(
expect.objectContaining({
title: "general.are_you_sure",
type: "warning",
showCancelButton: true
})
Expand Down
Loading