webui-vue icon indicating copy to clipboard operation
webui-vue copied to clipboard

Published 20 hours ago • verified publisher icon openbmc

Migrate to Vue 3

Open dixsie opened this issue 2 years ago • 21 comments

Overview

Migration docs

Requirements

  • [ ] Update Bootstrap Vue for Vue 3
  • [ ] Add emits property for custom component events
  • [ ] Import nextTick
  • [ ] Move child :key value in v-for loop into wrapper <template>
  • [ ] Remove global filter registration
  • [ ] Remove unnecessary container elements
  • [ ] Remove Vue2 transition names
  • [ ] Update "this" reference in component props
  • [ ] Update Vue i18n to support Vue 3
  • [ ] Use new createApp API to create app instance

UI Checklist

Browser Tests (Chrome, Firefox, Safari (Mac), Edge (Windows))

  • [ ] Tested responsive layout on supported viewport sizes
  • [ ] Verified functionality works as expected, e.g. success and failure use cases
  • [ ] Resolved any JavaScript errors thrown to the console

dixsie avatar Jul 20 '22 14:07 dixsie

@edtanous's proposal/discussion: https://gerrit.openbmc.org/c/openbmc/webui-vue/+/55438

dixsie avatar Jul 20 '22 14:07 dixsie

Dixsie's attempt April 4, 2021

All official libraries and tools now support Vue 3, but @vue/test-utils is still in release candidate status.

Breaking changes observed:

  • The beforeDestroy lifecycle hook is deprecated. Use beforeUnmount instead
  • Filters deprecated
  • VueCompilerError: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.
  • VueCompilerError: v-if/else branches must use unique keys.
  • Props default value factory functions no longer have access to this

dixsie avatar Jul 20 '22 14:07 dixsie

BootstrapVue currently does not support Vue3

https://bootstrap-vue.org/docs

Vue.js v2.6 is required, v2.6.12 is recommended

dixsie avatar Jul 20 '22 15:07 dixsie

It looks like bootstrap-vue-3 exists in an early state?

https://www.npmjs.com/package/bootstrap-vue-3

edtanous avatar Jul 20 '22 15:07 edtanous

The beforeDestroy lifecycle hook is deprecated. Use beforeUnmount instead

This is handled in my patch

Filters deprecated

VueCompilerError: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.

I didn't see this one in my tests; Maybe it was a regression that was fixed later?

VueCompilerError: v-if/else branches must use unique keys. Props default value factory functions no longer have access to this

There was one instance of this, and I think I resolved it by moving to the more common pattern (I think). I added a comment on my review on this line for someone with more knowledge to review.

edtanous avatar Jul 20 '22 15:07 edtanous

what about vuetify3, it's now fully vue3 ready with MIT license.

laoshaw avatar Jan 11 '23 20:01 laoshaw

Raised following WIP PR for Vue3 migration.

https://gerrit.openbmc.org/c/openbmc/webui-vue/+/67959

@gtmills @Nikhil-Ashoka @Renuka9527 @sivaprabug

kirankumarb07 avatar Dec 01 '23 13:12 kirankumarb07

Pushed one commit to the https://gerrit.openbmc.org/c/openbmc/webui-vue/+/67959 1.Added Global Mixins 2.Added Global styles and sass configuration in vite config 3. Implemented Appheader with composition Api with setup attribute Screenshot: Header image Mixins image Styles: image @gtmills @Nikhil-Ashoka @kirankumarb07 @sivaprabug

Renuka9527 avatar Jan 04 '24 08:01 Renuka9527

Pushed the below changes

  1. Removed Mixins Folder.
  2. Implemented Composables.
  3. Implemented Date filters and eventBus( We can use event Bus for emitting the global events).
  4. Added Toast implementation, can be removed when we change the styling library. @gtmills @Nikhil-Ashoka @kirankumarb07 @sivaprabug

Renuka9527 avatar Mar 27 '24 15:03 Renuka9527

Pushed below changes to the https://gerrit.openbmc.org/c/openbmc/webui-vue/+/67959

  1. Search global component.
  2. Table cell count global component.
  3. Table row action global component.
  4. Table toolbar global component.
  5. Session page.

Session Page: image

@kirankumarb07 @sivaprabug @gtmills @Renuka9527 @Nikhil-Ashoka

suryav9724 avatar May 29 '24 04:05 suryav9724

Pushed below changes. https://gerrit.openbmc.org/c/openbmc/webui-vue/+/67959

  1. Added CSP.
  2. Added build build chunksize limit, The build time is reduced from 6mins to 25 secs.Application Loads faster
  3. As we are sticking to the bootstrap-vue-next, added the functionlaity of Toast as-well. image

Renuka9527 avatar May 29 '24 07:05 Renuka9527

Pushed below changes https://gerrit.openbmc.org/c/openbmc/webui-vue/+/55438/5..6

  1. The above PR is not built in the local development, fixed that issue by configuring i18n legacy as false.
  2. The translation function t is called using the useI18n in the Login page, Overview page, App Header, App Navigation, and respective file for those pages.
  3. In the script tag, we can't use this.$t() function for translation. we should use the i18n.global.t() function from i18n. So the page title issue is fixed by this function.
  4. Fixed the event bus error that occurred during logout.

image

suryav9724 avatar Jul 02 '24 14:07 suryav9724

Pushed below changes https://gerrit.openbmc.org/c/openbmc/webui-vue/+/55438/5..6

  1. i18n for the Login page, Overview page, and app navigation.
  2. Page title.
  3. logout error.

@suryav9724 As discussed, please explain the issues/fixes in detailed manner for the latest pushed the code changes.

kirankumarb07 avatar Jul 02 '24 14:07 kirankumarb07

Pushed below changes to https://gerrit.openbmc.org/c/openbmc/webui-vue/+/72552/3..4

  1. upgrade vue-router to "4.4.0", upgrade vuex to "4.1.0".
  2. App navigation issue fixed by index configuration for router.
  3. I18n implemented in the Event log page and Global component that are used in the Event log page.

suryav9724 avatar Jul 08 '24 08:07 suryav9724

Pushed below changes to PR https://gerrit.openbmc.org/c/openbmc/webui-vue/+/72701

  1. i18n Issues fixed in all pages that occur while navigating.
  2. vuelidate $v changed to v$ to support vuelidate in vue 3 on all pages.
  3. Filter function for date and time format declared in main.js
  4. To use the filter function in Vue 3 pipe can't be used. We have to call the filter function using the $filters, that changes has been implemented in the pages that used the filters.

suryav9724 avatar Jul 12 '24 12:07 suryav9724

Cherry-pick the master commits to the vue3 branch

vue3 #PR Master commit ID
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/73124 bc49e09187cab43f8564f2adb6b8860544870641
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/73188 1ff8e89fd2397c468ab0237158e5aeeff2692413
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/73189 582e954ecff4edf58c143dc644a21b15005e8109

suryav9724 avatar Jul 30 '24 05:07 suryav9724

Add user validation in the user management page code changes push to the PR#73249 in Vue3 branch https://gerrit.openbmc.org/c/openbmc/webui-vue/+/73249

suryav9724 avatar Aug 01 '24 11:08 suryav9724

Cherry-pick the master commits to the vue3 branch

vue3 #PR Master commit ID
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74016 6de03414859a6a37d0d21bb493bd444e4a308f3b
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74023 b2acbcaa9cf7b1aa053216ca93ad2ad1f9846544

suryav9724 avatar Aug 30 '24 06:08 suryav9724

Cherry-pick the master commits to the vue3 branch

vue3 #PR Master commit ID
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74280 09a3b9e0b51c8c0a4ffff29581834c5f3b69b79e
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74281 db2940a8ea63aeaf2f31dcb45a1c17a622a726c5
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74282 0018592cd560059861ec2d01c83f1667012161d4
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74283 8876eceffa71ed8b28a856c48a8acb18167c9340

suryav9724 avatar Sep 04 '24 12:09 suryav9724

The below PR are posted for the functionality issue in vue 3 branch

74566: Firmware page vuelidate and form file error fix | https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74566 74803: Factory reset modal popup and validation issue | https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74803 74809: LDAP and server power operation page fix | https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74809 74816: Invalid feedback if condition change | https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74816 74864: Date and time page helper issue | https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74864 74733: Network page validation and i18n issue fix | https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74733 74735: Locale gets undefined in the login page | https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74735

suryav9724 avatar Sep 25 '24 15:09 suryav9724

Cherry-pick the master commits to the vue3 branch

vue3 #PR Master commit ID
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/75029 e2c716a91f3cf130427600c26ae58de0f9750f2a
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/75032 ccf5c5c83260aec703859f6e65075b3365897518
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/75035 f4e79739d360ba47587427413dcc6e5bdf4182b7
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/75036 51feb35350eee87fc5bf1d463873feb3ccf12f1e
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/75037 413039754779af2bb172b6ff84b646b814c48e31

suryav9724 avatar Oct 03 '24 15:10 suryav9724