Create Vue Alert wrapper around GlAlert
Why
Currently there isn't a very simple way to implement a Flash
alert that follows the design specs of the Alert component in parts of GitLab where a Vue instance doesn't currently exist.
An example of this was found when trying to implement: !22933 (merged) Resulted in: !22933 (diffs)
tldr; A way to fire a more robust Flash message from Ruby without an existing Vue instance isn't currently possible.
Proposal
By creating a generic Vue component
that wraps GlAlert we can add a simple way to fire an up-to-spec
alert with very few lines of code from anywhere in our HAML files.
How
-
Create a JS entry point in the scoped HAML file:
- if condition #js-vue-alert{ data: { variant: 'tip', message: '...', btn_options: { ... } } }
-
This entry point will import a small script that inits a Vue instance:
import initVueAlert from '~/vue_alert'; initVueAlert();
-
vue-alert will instantiate the Vue instance from
@gitlab/ui
import { Gl Alert } from '@gitlab/ui'; export default () => { const el = document.querySelector('.js-vue-alert'); return new Vue({ el, components: { GlAlert }, ... }) };
cc: @nfriend