Vue left menu v1

Vue left menu v1 (part of https://gitlab.com/gitlab-org/gitter/webapp/issues/1987)

• All of this is behind a feature toggle
• No CSS transitions
• Only works on room/chat page and userhome(/home).
  • The old left menu will show on other pages but is broken
• Search: only messages
• Mobile and NLI(not logged in) are not considered
• No favourite room drag and dropping to order
• No groups/community view

Sub-MRs

• Introducing Vue.js into the codebase, https://gitlab.com/gitlab-org/gitter/webapp/merge_requests/1396
• Move client-side context to module, https://gitlab.com/gitlab-org/gitter/webapp/merge_requests/1398
• Refactor chat-internal to use async/await, https://gitlab.com/gitlab-org/gitter/webapp/merge_requests/1401
• Update gitter-realtime-client@2.0.0 to include updates to sorts for Vue left menu, https://gitlab.com/gitlab-org/gitter/webapp/merge_requests/1403
  • https://gitlab.com/gitlab-org/gitter/realtime-client/merge_requests/23
• Add Jest for Vue testing, https://gitlab.com/gitlab-org/gitter/webapp/merge_requests/1404

Get it running locally

• Check out branch
• npm i to get new dependencies
• For proper sorting, npm link https://gitlab.com/gitlab-org/gitter/realtime-client/merge_requests/23
  • Checkout https://gitlab.com/gitlab-org/gitter/realtime-client/merge_requests/23 and npm i
  • Run npm link in the realtime-client project
  • Back in the webapp project, run npm link gitter-realtime-client
• Restart server
• Add the feature toggle, node ./scripts/utils/feature-toggle.js --name vue-left-menu --description "Left menu using Vue (alpha)"
• Enable the feature toggle
  • Enable: http://localhost:5000/api_web/features/vue-left-menu/1
  • Disable: http://localhost:5000/api_web/features/vue-left-menu/0

The Vue left menu is used on the chat and userhome view for now

Notes

• https://www.reddit.com/r/vuejs/comments/8dp1af/integrating_vue_with_existing_backbonejs_codebase/
• https://snipcart.com/blog/progressive-migration-backbone-vuejs-refactoring

---

• Turning chat into a SPA, https://github.com/troupe/gitter-webapp/pull/497
• Feature Router Chat SPA, https://github.com/troupe/gitter-webapp/pull/514

Testing notes

See https://gitlab.com/gitlab-org/gitter/webapp/merge_requests/1404#testing-notes

---

• Do we need vue-style-loader? https://www.npmjs.com/package/vue-style-loader
  • We need it for SSR to work, otherwise we get an error like this

Error: ReferenceError: window is not defined
    at server-bundle.js:309:2
    at server-bundle.js:298:46
    at module.exports../node_modules/style-loader/lib/addStyles.js.module.exports (node_modules/style-loader/lib/addStyles.js:80:0)
    at Object../node_modules/style-loader/index.js?!./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./public/js/vue/left-menu/components/index.vue?vue&type=style&index=0&id=44ebcb1a&scoped=true&lang=css& (public/js/vue/left-menu/components/index.vue?300e:16:81)
    at __webpack_require__ (webpack/bootstrap:19:0)
    at Module../public/js/vue/left-menu/components/index.vue?vue&type=style&index=0&id=44ebcb1a&scoped=true&lang=css& (public/js/vue/left-menu/components/index.vue?8f3b:1:0)
    at __webpack_require__ (webpack/bootstrap:19:0)
    at VueComponent.injectStyles (public/js/vue/left-menu/components/index.vue:6:15)
    at VueComponent.hook (node_modules/vue-loader/lib/runtime/componentNormalizer.js:53:0)
    at invokeWithErrorHandling (C:\Users\MLM\Documents\GitLab\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:1850:57)
    at callHook (C:\Users\MLM\Documents\GitLab\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:4182:7)
    at VueComponent.Vue._init (C:\Users\MLM\Documents\GitLab\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:4950:5)
    at new VueComponent (C:\Users\MLM\Documents\GitLab\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:5099:12)
    at createComponentInstanceForVnode (C:\Users\MLM\Documents\GitLab\webapp\node_modules\vue-server-renderer\build.dev.js:8140:10)
    at renderComponentInner (C:\Users\MLM\Documents\GitLab\webapp\node_modules\vue-server-renderer\build.dev.js:8364:40)
    at renderComponent (C:\Users\MLM\Documents\GitLab\webapp\node_modules\vue-server-renderer\build.dev.js:8339:5)
    at renderNode (C:\Users\MLM\Documents\GitLab\webapp\node_modules\vue-server-renderer\build.dev.js:8250:5)
    at resolve (C:\Users\MLM\Documents\GitLab\webapp\node_modules\vue-server-renderer\build.dev.js:8612:7)
    at waitForServerPrefetch (C:\Users\MLM\Documents\GitLab\webapp\node_modules\vue-server-renderer\build.dev.js:8243:3)
    at render (C:\Users\MLM\Documents\GitLab\webapp\node_modules\vue-server-renderer\build.dev.js:8614:5)
    at Object.renderToString (C:\Users\MLM\Documents\GitLab\webapp\node_modules\vue-server-renderer\build.dev.js:9139:9)
    at C:\Users\MLM\Documents\GitLab\webapp\node_modules\vue-server-renderer\build.dev.js:9505:22
    at process._tickCallback (internal/process/next_tick.js:68:7)

Todo

• Update gitter-realtime-client with sorts/filters changes
  • https://gitlab.com/gitlab-org/gitter/realtime-client/merge_requests/23
  • https://gitlab.com/gitlab-org/gitter/webapp/merge_requests/1403

---

• Add tests
• Left menu
  • Room list
  • One to one list
  • Group list
    • Opting to do this in a subsequent MR
  • Search
  • Drag and drop favoriting
    • Opting to do this in a subsequent MR
• Figure out a way to share variables from Less to scoped Vue styles
  • Using Webpack less-loader and <style lang="less" scoped> in Vue templates
• State/store
  • Hookup up existing Backbone live collections to Vuex store
• Server-side rendering (SSR)
  • https://ssr.vuejs.org/
  • https://github.com/vuejs/vue-hackernews-2.0
  • Server-side render component
  • Server-side add CSS, styles
    • https://vue-loader.vuejs.org/guide/extract-css.html#webpack-4
    • https://ssr.vuejs.org/guide/css.html#enabling-css-extraction

---

Part of https://gitlab.com/gitlab-org/gitter/webapp/issues/1987

Closes https://gitlab.com/gitlab-org/gitter/webapp/issues/2096