Skip to content

refactor(frontend): migrate frontend UI from Bootstrap 4/jQuery to MDB Vue (Bootstrap 5)#298

Open
drik98 wants to merge 60 commits into
aixigo:masterfrom
drik98:feature/bootstrap-migration
Open

refactor(frontend): migrate frontend UI from Bootstrap 4/jQuery to MDB Vue (Bootstrap 5)#298
drik98 wants to merge 60 commits into
aixigo:masterfrom
drik98:feature/bootstrap-migration

Conversation

@drik98

@drik98 drik98 commented Feb 25, 2026

Copy link
Copy Markdown
Contributor

This PR modernizes the frontend UI stack by replacing Bootstrap 4 + jQuery-based patterns with Vue-native mdb-vue-ui-kit components. Custom components using bootstrap classes and functionalities were replaced by the vue components. It also replaces external CDN asset loading with local npm-managed font/icon assets and updates related tests/build config to match the new component structure.

  • Replaced bootstrap-material-design + popper.js usage with mdb-vue-ui-kit (Bootstrap 5 style components).
  • Migrated major UI pieces to MDB components: navbar, app list/loading/error states, review app cards and modal views (OpenApiUI, AsyncApiUI, LogsDialog).
  • Reworked dialog foundation: removed custom Dialog.vue and moved InputDialog/ConfirmationDialog flows onto MDBModal
  • Removed custom spinner component and switched to MDBSpinner.
  • Standardized icons on MDBIcon, and moved font/icon assets from CDN to local npm imports (@fontsource/roboto, @fortawesome/fontawesome-free).
  • Updated unit/e2e tests and selectors to match the new MDB-based markup and simplified Vite config by removing old jQuery inject/plugin setup.

Comment thread frontend/src/components/DuplicateAppDialog.vue Outdated
Comment thread frontend/src/components/ShutdownAppDialog.vue
Comment thread frontend/index.html
@drik98
drik98 marked this pull request as ready for review February 25, 2026 10:27
@drik98

drik98 commented Feb 25, 2026

Copy link
Copy Markdown
Contributor Author

@schrieveslaach The PR has finally reached a state which is reviewable. Please have a look whenever you find some time (not necessarily high prio, but I would love to finish this PR (if we decide to merge it) before we do any other frontend adjustments).

@schrieveslaach schrieveslaach left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thank you very much for taking the time and effort to migrate of the deprecated framework. I really appreciate. No sure if I will get used to the new bootstrap look & feel, but the it feels already more modern.

Image

Let's finish #303 first and let's come back to this one after.

Comment thread frontend/src/components/ReviewAppCard.vue Outdated
Comment thread frontend/src/components/ReviewAppCard.vue Outdated
@drik98
drik98 force-pushed the feature/bootstrap-migration branch from d555b02 to d7c68b9 Compare March 20, 2026 08:22
@drik98

drik98 commented Mar 20, 2026

Copy link
Copy Markdown
Contributor Author

Ready for another round of review.

@schrieveslaach schrieveslaach left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I think this PR is very close to the finish line. There are two things that bother me though:

  1. Some elements are now much darker and get now a lot of attention (pause/play buttons and service type badges like APP-COMPANION). Please, make sure that the coloring screams less at me.
  2. The review app cards are now smaller and it feels much denser. I'm not sure if that is due to the darker elements but it feels to me that the more important things such as the link to the service or the API documentation is much harder to find.

Comment thread frontend/src/components/ReviewAppCard.vue
Comment thread frontend/src/components/ReviewAppCard.vue
Comment thread frontend/src/views/Apps.vue
Comment thread frontend/src/views/Apps.vue Outdated

@schrieveslaach schrieveslaach left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Some minor nitpicks left.

Comment thread frontend/src/views/Apps.vue
Comment thread frontend/src/views/Apps.vue Outdated
Comment thread frontend/src/views/Apps.vue Outdated
@drik98
drik98 force-pushed the feature/bootstrap-migration branch 6 times, most recently from 228beac to 3196c04 Compare June 12, 2026 06:49
drik98 added 29 commits June 17, 2026 08:58
@drik98
drik98 force-pushed the feature/bootstrap-migration branch from d4fd348 to c2e0e11 Compare June 17, 2026 06:58
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.

2 participants