Skip to content

Migrate GlDropdown in error_tracking_settings project_dropdown.vue

What does this MR do and why?

Migrate error tracking settings dropdown.

Slight visual change - the dropdown is not full width, as it causes some alignment issues currently. See gitlab-ui#2099 (closed)

Screenshots or screen recordings

before after
Screenshot_2022-12-23_at_12.32.40_pm Screenshot_2022-12-23_at_12.30.55_pm

How to set up and validate locally

  1. For a project, go to Settings > Monitor
  2. In Error Tracking, fill in a sentry instance and API token (instructions)
  3. Click "Connect", then open project dropdown

Alternatively, use this mock data to just display the list:

diff --git a/app/assets/javascripts/error_tracking_settings/store/state.js b/app/assets/javascripts/error_tracking_settings/store/state.js
index ee5597abeb37..d64f71752289 100644
--- a/app/assets/javascripts/error_tracking_settings/store/state.js
+++ b/app/assets/javascripts/error_tracking_settings/store/state.js
@@ -1,13 +1,28 @@
 export default () => ({
-  apiHost: '',
+  apiHost: 'https://test',
   enabled: false,
   integrated: false,
-  token: '',
-  projects: [],
+  token: '1234',
+  projects: [
+    {
+      id: '1',
+      name: 'name',
+      slug: 'slug',
+      organizationName: 'organizationName',
+      organizationSlug: 'organizationSlug',
+    },
+    {
+      id: '2',
+      name: 'name2',
+      slug: 'slug2',
+      organizationName: 'organizationName2',
+      organizationSlug: 'organizationSlug2',
+    },
+  ],
   isLoadingProjects: false,
   selectedProject: null,
   settingsLoading: false,
-  connectSuccessful: false,
+  connectSuccessful: true,
   connectError: false,

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #384272 (closed)

Edited by Simon Knox

Merge request reports