diff options
Diffstat (limited to 'app/assets/javascripts/behaviors/components/global_alerts.vue')
-rw-r--r-- | app/assets/javascripts/behaviors/components/global_alerts.vue | 50 |
1 files changed, 50 insertions, 0 deletions
diff --git a/app/assets/javascripts/behaviors/components/global_alerts.vue b/app/assets/javascripts/behaviors/components/global_alerts.vue new file mode 100644 index 00000000000..d7333619110 --- /dev/null +++ b/app/assets/javascripts/behaviors/components/global_alerts.vue @@ -0,0 +1,50 @@ +<script> +import { GlAlert } from '@gitlab/ui'; + +import { getGlobalAlerts, setGlobalAlerts, removeGlobalAlertById } from '~/lib/utils/global_alerts'; + +export default { + name: 'GlobalAlerts', + components: { GlAlert }, + data() { + return { + alerts: [], + }; + }, + mounted() { + const { page } = document.body.dataset; + const alerts = getGlobalAlerts(); + + const alertsToPersist = alerts.filter((alert) => alert.persistOnPages.length); + const alertsToRender = alerts.filter( + (alert) => alert.persistOnPages.length === 0 || alert.persistOnPages.includes(page), + ); + + this.alerts = alertsToRender; + + // Once we render the global alerts, we re-set the global alerts to only store persistent alerts for the next load. + setGlobalAlerts(alertsToPersist); + }, + methods: { + onDismiss(index) { + const alert = this.alerts[index]; + this.alerts.splice(index, 1); + removeGlobalAlertById(alert.id); + }, + }, +}; +</script> + +<template> + <div v-if="alerts.length"> + <gl-alert + v-for="(alert, index) in alerts" + :key="alert.id" + :variant="alert.variant" + :title="alert.title" + :dismissible="alert.dismissible" + @dismiss="onDismiss(index)" + >{{ alert.message }}</gl-alert + > + </div> +</template> |