Skip to content

Feat: migrate components and delete dupes - #1012

Open
santipalenque wants to merge 3 commits into
masterfrom
fix/replace-mui-formik-for-uicore
Open

Feat: migrate components and delete dupes#1012
santipalenque wants to merge 3 commits into
masterfrom
fix/replace-mui-formik-for-uicore

Conversation

@santipalenque

@santipalenque santipalenque commented Jul 16, 2026

Copy link
Copy Markdown

https://app.clickup.com/t/9014802374/86bat8h0n

Summary by CodeRabbit

  • New Features

    • Improved event type form dropdowns with clearer placeholders and selected-option labels.
  • Refactor

    • Updated forms and dialogs to use shared UI form controls for more consistent input, selection, checkbox, and switch experiences.
    • Removed several legacy form controls and sponsorship input implementations in favor of shared equivalents.
  • Tests

    • Removed tests for retired legacy form controls and sponsorship inputs.

@santipalenque
santipalenque force-pushed the fix/replace-mui-formik-for-uicore branch from e407e8c to e47f7bd Compare July 28, 2026 18:08
@coderabbitai

coderabbitai Bot commented Jul 28, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8beeba2f-1c7e-4ce6-b2c9-5d89d1119399

📥 Commits

Reviewing files that changed from the base of the PR and between e47f7bd and 9a07e37.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (2)
  • package.json
  • src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/manage-tier-addons-popup.js
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/manage-tier-addons-popup.js

📝 Walkthrough

Walkthrough

The PR migrates Formik/MUI input consumers to openstack-uicore-foundation, removes local input components and tests, documents retained wrappers, and updates event select value rendering and addon selection.

Changes

Formik foundation migration

Layer / File(s) Summary
Foundation inputs and retained local boundaries
src/components/forms/*, src/components/mui/..., src/pages/sponsors-global/..., package.json
Core forms and shared components use foundation Formik inputs. The dependency version changes to 5.0.48-beta.0. Comments document local async-select, color-field, and datetime-picker boundaries.
Event select migration and display mapping
src/pages/events/components/event-type-dialog.js, src/pages/events/components/__tests__/event-type-dialog.test.js
EventTypeDialog uses the foundation select, maps selected values to labels, renders translated placeholders, and updates its Jest mock.
Sponsor form input rewiring
src/pages/sponsors/...
Sponsor dialogs, templates, forms, user workflows, and addon editing use foundation Formik/MUI inputs.
Local component and test removal
src/components/mui/formik-inputs/*, src/components/mui/__tests__/*
Local Formik/MUI input implementations and their tests are deleted, including select, checkbox, radio, pricing, quantity, sponsor, and sponsorship components.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

Suggested reviewers: smarcet, martinquiroga-exo

Sequence Diagram(s)

sequenceDiagram
  participant FormPage
  participant FoundationFormikInput
  participant Formik
  FormPage->>FoundationFormikInput: render migrated field
  FoundationFormikInput->>Formik: read and update field state
  Formik-->>FoundationFormikInput: return value and validation state
  FoundationFormikInput-->>FormPage: render field and validation feedback
Loading
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main changes: migrating components to UI Core and removing duplicate implementations.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/replace-mui-formik-for-uicore

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

package.json

Parsing error: Missing semicolon. (2:8)


Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🧹 Nitpick comments (1)
src/pages/events/components/__tests__/event-type-dialog.test.js (1)

37-47: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Cover the migrated select display behavior.

This mock ignores renderValue, so the new translated placeholder and selected-label mapping are not exercised. Add a focused test (or make the mock model renderValue) for empty and populated select values.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/pages/events/components/__tests__/event-type-dialog.test.js` around lines
37 - 47, Update the MockSelect in the event-type dialog tests to invoke its
renderValue behavior, or add focused coverage that models it, for both empty and
populated values. Assert that empty selections show the translated placeholder
and populated selections use the translated selected-label mapping.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/pages/sponsors-global/form-templates/form-template-popup.js`:
- Line 20: Remove the legacy formik={formik} prop from migrated foundation
fields in src/pages/sponsors-global/form-templates/form-template-popup.js (lines
20-20) and src/pages/sponsors-global/form-templates/sponsor-inventory-popup.js
(lines 23-24), including the MuiFormikTextField and quantity-field usages;
retain their existing field wiring.

---

Nitpick comments:
In `@src/pages/events/components/__tests__/event-type-dialog.test.js`:
- Around line 37-47: Update the MockSelect in the event-type dialog tests to
invoke its renderValue behavior, or add focused coverage that models it, for
both empty and populated values. Assert that empty selections show the
translated placeholder and populated selections use the translated
selected-label mapping.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a470257c-02df-4b56-a31d-22ae3d11175e

📥 Commits

Reviewing files that changed from the base of the PR and between 52e285c and e47f7bd.

📒 Files selected for processing (51)
  • src/components/forms/admin-access-form.js
  • src/components/forms/sponsor-settings-form/index.js
  • src/components/mui/__tests__/mui-formik-checkbox-group.test.js
  • src/components/mui/__tests__/mui-formik-file-size-field.test.js
  • src/components/mui/__tests__/mui-formik-quantity-field.test.js
  • src/components/mui/__tests__/mui-formik-radio-group.test.js
  • src/components/mui/__tests__/mui-sponsor-input.test.js
  • src/components/mui/formik-inputs/company-input-mui.js
  • src/components/mui/formik-inputs/item-price-tiers.js
  • src/components/mui/formik-inputs/mui-formik-async-select.js
  • src/components/mui/formik-inputs/mui-formik-checkbox-group.js
  • src/components/mui/formik-inputs/mui-formik-checkbox.js
  • src/components/mui/formik-inputs/mui-formik-color-field.js
  • src/components/mui/formik-inputs/mui-formik-datetimepicker.js
  • src/components/mui/formik-inputs/mui-formik-discountfield.js
  • src/components/mui/formik-inputs/mui-formik-dropdown-checkbox.js
  • src/components/mui/formik-inputs/mui-formik-dropdown-radio.js
  • src/components/mui/formik-inputs/mui-formik-file-size-field.js
  • src/components/mui/formik-inputs/mui-formik-pricefield.js
  • src/components/mui/formik-inputs/mui-formik-quantity-field.js
  • src/components/mui/formik-inputs/mui-formik-radio-group.js
  • src/components/mui/formik-inputs/mui-formik-select-group.js
  • src/components/mui/formik-inputs/mui-formik-select.js
  • src/components/mui/formik-inputs/mui-formik-summit-addon-select.js
  • src/components/mui/formik-inputs/mui-formik-switch.js
  • src/components/mui/formik-inputs/mui-formik-textfield.js
  • src/components/mui/formik-inputs/mui-formik-timepicker.js
  • src/components/mui/formik-inputs/mui-sponsor-input.js
  • src/components/mui/formik-inputs/sponsorship-input-mui.js
  • src/components/mui/formik-inputs/sponsorship-summit-select-mui.js
  • src/components/mui/mui-qr-badge-popup.js
  • src/components/mui/summit-addon-select.js
  • src/pages/events/components/__tests__/event-type-dialog.test.js
  • src/pages/events/components/event-type-dialog.js
  • src/pages/sponsors-global/form-templates/form-template-popup.js
  • src/pages/sponsors-global/form-templates/sponsor-inventory-popup.js
  • src/pages/sponsors/popup/add-sponsor-popup.js
  • src/pages/sponsors/popup/edit-tier-popup.js
  • src/pages/sponsors/sponsor-form-item-list-page/components/sponsor-form-item-form.js
  • src/pages/sponsors/sponsor-forms-list-page/components/form-template/form-template-form.js
  • src/pages/sponsors/sponsor-page/tabs/sponsor-badge-scans/edit-badge-scan-popup.js
  • src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/add-sponsor-form-template-popup/index.js
  • src/pages/sponsors/sponsor-page/tabs/sponsor-forms-tab/components/customized-form/customized-form.js
  • src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/add-extra-question-popup.js
  • src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/add-tier-popup.js
  • src/pages/sponsors/sponsor-page/tabs/sponsor-general-form/manage-tier-addons-popup.js
  • src/pages/sponsors/sponsor-page/tabs/sponsor-pages-tab/components/add-sponsor-page-template-popup/index.js
  • src/pages/sponsors/sponsor-page/tabs/sponsor-users-list-per-sponsor/components/sponsor-user-form.js
  • src/pages/sponsors/sponsor-users-list-page/components/edit-user-popup/sponsor-section.js
  • src/pages/sponsors/sponsor-users-list-page/components/edit-user-popup/sponsor-user-form.js
  • src/pages/sponsors/sponsor-users-list-page/components/process-request-form.js
💤 Files with no reviewable changes (25)
  • src/components/mui/formik-inputs/mui-formik-quantity-field.js
  • src/components/mui/tests/mui-formik-checkbox-group.test.js
  • src/components/mui/tests/mui-sponsor-input.test.js
  • src/components/mui/formik-inputs/mui-formik-switch.js
  • src/components/mui/formik-inputs/mui-formik-file-size-field.js
  • src/components/mui/formik-inputs/mui-formik-summit-addon-select.js
  • src/components/mui/tests/mui-formik-radio-group.test.js
  • src/components/mui/formik-inputs/mui-formik-checkbox-group.js
  • src/components/mui/formik-inputs/mui-formik-checkbox.js
  • src/components/mui/formik-inputs/mui-formik-dropdown-checkbox.js
  • src/components/mui/formik-inputs/mui-formik-select.js
  • src/components/mui/formik-inputs/mui-formik-textfield.js
  • src/components/mui/formik-inputs/company-input-mui.js
  • src/components/mui/formik-inputs/mui-formik-select-group.js
  • src/components/mui/tests/mui-formik-file-size-field.test.js
  • src/components/mui/tests/mui-formik-quantity-field.test.js
  • src/components/mui/formik-inputs/mui-formik-pricefield.js
  • src/components/mui/formik-inputs/mui-formik-discountfield.js
  • src/components/mui/formik-inputs/mui-sponsor-input.js
  • src/components/mui/formik-inputs/mui-formik-radio-group.js
  • src/components/mui/formik-inputs/sponsorship-summit-select-mui.js
  • src/components/mui/formik-inputs/mui-formik-dropdown-radio.js
  • src/components/mui/summit-addon-select.js
  • src/components/mui/formik-inputs/sponsorship-input-mui.js
  • src/components/mui/formik-inputs/mui-formik-timepicker.js

import * as yup from "yup";
import AdditionalInputList from "openstack-uicore-foundation/lib/components/mui/formik-inputs/additional-input-list";
import MuiFormikTextField from "../../../components/mui/formik-inputs/mui-formik-textfield";
import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield";

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n## Relevant call sites\n'
sed -n '120,200p' src/pages/sponsors-global/form-templates/form-template-popup.js
printf '\n---\n'
sed -n '100,220p' src/pages/sponsors-global/form-templates/sponsor-inventory-popup.js

printf '\n## Imported foundation field implementations\n'
# locate the source files in repo, if present
fd -a 'textfield' src node_modules 2>/dev/null | head -n 20
fd -a 'quantity-field' src node_modules 2>/dev/null | head -n 20

Repository: fntechgit/summit-admin

Length of output: 8723


🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n## quantity-field implementation\n'
cat -n node_modules/openstack-uicore-foundation/lib/components/mui/formik-inputs/quantity-field.js | sed -n '1,240p'

printf '\n## textfield implementation lookup\n'
fd -a 'textfield.js' node_modules/openstack-uicore-foundation/lib/components/mui/formik-inputs 2>/dev/null || true
fd -a 'text-field.js' node_modules/openstack-uicore-foundation/lib/components/mui/formik-inputs 2>/dev/null || true
fd -a 'textfield' node_modules/openstack-uicore-foundation/lib/components/mui/formik-inputs 2>/dev/null || true

Repository: fntechgit/summit-admin

Length of output: 4128


🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n## textfield implementation\n'
cat -n node_modules/openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield.js | sed -n '1,220p'

printf '\n## inventory of formik props in the two popup files\n'
rg -n 'formik=\{formik\}' src/pages/sponsors-global/form-templates/form-template-popup.js src/pages/sponsors-global/form-templates/sponsor-inventory-popup.js

Repository: fntechgit/summit-admin

Length of output: 3021


Drop the legacy formik prop from migrated foundation fields.

openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield and quantity-field use useField and forward unknown props to MUI, so formik={formik} is just an unsupported prop on these inputs.

  • src/pages/sponsors-global/form-templates/form-template-popup.js
  • src/pages/sponsors-global/form-templates/sponsor-inventory-popup.js
📍 Affects 2 files
  • src/pages/sponsors-global/form-templates/form-template-popup.js#L20-L20 (this comment)
  • src/pages/sponsors-global/form-templates/sponsor-inventory-popup.js#L23-L24
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/pages/sponsors-global/form-templates/form-template-popup.js` at line 20,
Remove the legacy formik={formik} prop from migrated foundation fields in
src/pages/sponsors-global/form-templates/form-template-popup.js (lines 20-20)
and src/pages/sponsors-global/form-templates/sponsor-inventory-popup.js (lines
23-24), including the MuiFormikTextField and quantity-field usages; retain their
existing field wiring.

@santipalenque santipalenque changed the title chore: migrate components and delete dupes Feat: migrate components and delete dupes Jul 31, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant