Skip to content

Update dependency @gitlab/ui to v30

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
  • ee/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_select.vue

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
before after

Invite members modal

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

Before After
before after

File template selector

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

Before After
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
before after

Package and registries settings

Before After
Screen_Shot_2021-06-23_at_9.07.42_AM Screen_Shot_2021-06-23_at_5.43.01_PM
Screen_Shot_2021-06-23_at_9.07.54_AM Screen_Shot_2021-06-23_at_5.43.17_PM

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Edited by Paul Gascou-Vaillancourt

Merge request reports