Update dependency @gitlab/ui to v30

• Integration branch for gitlab-ui!628 (merged)

• TODO: Rewrite commit history and add a changelog entry once gitlab-ui!628 (merged) is released.

What does this MR do?

In gitlab-ui!628 (merged), we are changing the library GitLab UI uses internally to show toasts. We're dropping vue-toasted in favor of BootstrapVue's built-in toasts plugin. We are also updating the styles a bit to match the design specs.

This change comes with a number of deprecations that can be found in the migration notes.

This MR applies the necessary changes to GitLab's codebase to ensure all toast use cases are migrated to the newer API.

File by file migration details

Files where toasts are shown

List gathered with the following command:

ack -l "toast.show" ./app/assets/javascripts ./ee/app/assets/javascripts

• app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
  • Simple show, no migration required.
• app/assets/javascripts/terraform/components/states_table_actions.vue
  • Simple show, no migration required.
• app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
  • Simple show, no migration required.
• app/assets/javascripts/invite_members/components/invite_members_modal.vue
  • Passes an onComplete callback, verified that it is working.
• app/assets/javascripts/clusters/components/application_row.vue
  • Simple shows, no migration required.
• app/assets/javascripts/clusters/components/knative_domain_editor.vue
  • Simple show, no migration required.
• app/assets/javascripts/pipelines/pipelines_index.js
  • Simple show, no migration required.
• app/assets/javascripts/groups/components/app.vue
  • Simple show, no migration required.
• app/assets/javascripts/issuable/components/issuable_by_email.vue
  • Uses the type option. Migrated back to the default toast as variants are not supported by the design system.
• app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue
  • Uses the type option. Migrated back to the default toast as variants are not supported by the design system.
• app/assets/javascripts/packages_and_registries/settings/project/components/settings_form.vue
  • Uses the type option. Migrated back to the default toast as variants are not supported by the design system.
• app/assets/javascripts/members/components/table/expiration_datepicker.vue
  • Simple show, no migration required.
• app/assets/javascripts/members/components/table/role_dropdown.vue
  • Simple show, no migration required.
• app/assets/javascripts/self_monitor/components/self_monitor_form.vue
  • Migrated goAway to hide.
• app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue
  • Simple show, no migration required.
• app/assets/javascripts/monitoring/components/dashboard_panel.vue
  • Simple show, no migration required.
• app/assets/javascripts/vue_shared/plugins/global_toast.js
  • This is an abstraction layer. Needed to create a Vue instance here because $toast is now attached via a mixin. See the list below for all uses cases based on this abstraction.
• app/assets/javascripts/notifications/components/notifications_dropdown.vue
  • Uses the type option. Migrated back to the default toast as variants are not supported by the design system.
• app/assets/javascripts/notifications/components/custom_notifications_modal.vue
  • Uses the type option. Migrated back to the default toast as variants are not supported by the design system.
• ee/app/assets/javascripts/requirements/components/requirements_root.vue
  • Simple show, no migration required.
• ee/app/assets/javascripts/members/components/ldap/ldap_dropdown_item.vue
  • Simple show, no migration required.
• ee/app/assets/javascripts/members/components/ldap/ldap_override_confirmation_modal.vue
  • Simple show, no migration required.
• ee/app/assets/javascripts/pages/admin/users/pipeline_minutes/reset_button.vue
  • Uses the type option. Migrated back to the default toast as variants are not supported by the design system.
• ee/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_form.vue
  • Uses a custom position (top-center). Should migrate to bottom-left based on gitlab-ui!628 (comment 603252016).
• ee/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_select.vue
  • Uses a custom position (top-center). Should migrate to bottom-left based on gitlab-ui!628 (comment 603252016).

List gathered with the following command:

ack -l "global_toast" ./app/assets/javascripts ./ee/app/assets/javascripts

• app/assets/javascripts/sidebar/sidebar_mediator.js
  • Migrated goAway to hide.
• app/assets/javascripts/emoji/awards_app/store/actions.js
  • Simple show, no migration required.
• app/assets/javascripts/integrations/integration_settings_form.js
  • Simple shows, no migration required.
• app/assets/javascripts/pages/shared/wikis/wikis.js
  • Simple show, no migration required.
• app/assets/javascripts/blob/file_template_mediator.js
  • Simple show, no migration required.
• ee/app/assets/javascripts/security_dashboard/components/shared/selection_summary.vue
  • Simple show, no migration required.
• ee/app/assets/javascripts/security_dashboard/components/shared/survey_request_banner.vue
  • Simple show, no migration required.
• ee/app/assets/javascripts/security_dashboard/store/modules/vulnerabilities/actions.js
  • Migrated goAway to hide.
• ee/app/assets/javascripts/geo_replicable/store/actions.js
  • Simple shows, no migration required.
• ee/app/assets/javascripts/approvals/components/app.vue
  • Migrated goAway to hide.
• ee/app/assets/javascripts/vue_shared/security_reports/store/actions.js
  • Simple shows, no migration required.
• ee/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
  • Simple show, no migration required.
• ee/app/assets/javascripts/pages/admin/geo/index.js
  • Simple show, no migration required.

Screenshots (strongly suggested)

Note: while not all toasts have been smoke-tested, the screenshots below show a variety of instances that cover the main changes. This should give us confidence that all options either work as they used to, or have been migrated as needed.

Vulnerability report

Before	After

Invite members modal

Note: this toast hooks into the onComplete callback. Verified to be working.

Before	After

File template selector

Note: this toast defines an undo action. Verified to be working.

Before	After

Value stream

Note: toasts in Value Stream have been moved back to the bottom-left corner. They were top-centered, which is not supported by the design system: gitlab-ui!628 (merged)

Before	After

Package and registries settings

Before	After

Does this MR meet the acceptance criteria?

Conformity

• I have included changelog trailers, or none are needed. (Does this MR need a changelog?)
• I have added/updated documentation, or it's not needed. (Is documentation required?)
• I have properly separated EE content from FOSS, or this MR is FOSS only. (Where should EE code go?)
• I have added information for database reviewers in the MR description, or it's not needed. (Does this MR have database related changes?)
• I have self-reviewed this MR per code review guidelines.
• This MR does not harm performance, or I have asked a reviewer to help assess the performance impact. (Merge request performance guidelines)
• I have followed the style guides.
• This change is backwards compatible across updates, or this does not apply.

Availability and Testing

• I have added/updated tests following the Testing Guide, or it's not needed. (Consider all test levels. See the Test Planning Process.)
• I have tested this MR in all supported browsers, or it's not needed.
• I have informed the Infrastructure department of a default or new setting change per definition of done, or it's not needed.