-
Andrew Fontaine authored
An alert is a message to be displayed in a GlAlert in some conditional context of the WebIDE. The first alert added, for example, conditionally shows a message suggesting users investigate the use of environments in their CI configuration. An alert has a very specific interface to publicly conform to: interface Alert { key: Symbol; show: (state: WebIdeState, file: File) => boolean; props: GlAlertProps; dismiss: (store: WebIdeStore) => void; message: VueComponent; } - The key must be a unique value, so Symobl is used to ease uniqueness (two symbols made with the same key are still unique). - The show function takes the state of the WebIDE Vue store and the currently active file to compute a boolean indicating whether or not this alert should be currently shown. In this first alert, we only wish to show it if: - we are currently on the commit tab - we are viewing the root GitLab CI file - displaying this alert is enabled for the current user - the GitLab CI file has been successfully parsed, - and the CI configuration contains no environment configuration - The props must match the props used to configure a GlAlert - The dismiss function may optionally take the WebIDE store to execute further actions or mutations. - The message must be a Vue component definition. This is so that rich HTML content may be easily used within the message. Currently, it must not take any props or attributes, although it should have access to the WebIDE store. As only one alert may be shown at a time, any future alerts with overlapping conditions must keep in mind that these should be listed by priority. This is purposely simple to not expose the user to too many alerts at once. If this is ever converted to a notification system, it may make sense to alter this.
8b33b3ad