Add Vue app names for Plan related apps

Add Vue app names to make it easier to navigate Vue devtools

app/assets/javascripts/issuable/bulk_update_sidebar/index.js

@@ -23,6 +23,7 @@ export function initIssueStatusSelect() {
 
   return new Vue({
     el,
+    name: 'StatusSelectRoot',
     render: (createElement) => createElement(StatusSelect),
   });
 }

app/assets/javascripts/issuable/index.js

@@ -32,6 +32,7 @@ export function initCsvImportExportButtons() {
 
   return new Vue({
     el,
+    name: 'CsvImportExportButtonsRoot',
     provide: {
       showExportButton: parseBoolean(showExportButton),
       showImportButton: parseBoolean(showImportButton),
@@ -74,6 +75,7 @@ export function initIssuableByEmail() {
 
   return new Vue({
     el,
+    name: 'IssuableByEmailRoot',
     provide: {
       initialEmail,
       issuableType,

app/assets/javascripts/issues/list/index.js

@@ -30,6 +30,7 @@ export function mountJiraIssuesListApp() {
 
   return new Vue({
     el,
+    name: 'JiraIssuesImportStatusRoot',
     apolloProvider,
     render(createComponent) {
       return createComponent(JiraIssuesImportStatusRoot, {
@@ -119,6 +120,7 @@ export function mountIssuesListApp() {
 
   return new Vue({
     el,
+    name: 'IssuesListRoot',
     apolloProvider,
     provide: {
       autocompleteAwardEmojisPath,

app/assets/javascripts/issues/new/index.js

@@ -20,6 +20,7 @@ export function initTitleSuggestions() {
 
   return new Vue({
     el,
+    name: 'TitleSuggestionsRoot',
     apolloProvider,
     data() {
       return {
@@ -51,6 +52,7 @@ export function initTypePopover() {
 
   return new Vue({
     el,
+    name: 'TypePopoverRoot',
     render: (createElement) => createElement(TypePopover),
   });
 }

app/assets/javascripts/issues/show/index.js

@@ -160,6 +160,7 @@ export function initSentryErrorStackTrace() {
 
   return new Vue({
     el,
+    name: 'SentryErrorStackTraceRoot',
     store: errorTrackingStore,
     render: (createElement) =>
       createElement(SentryErrorStackTrace, { props: { issueStackTracePath } }),

app/assets/javascripts/labels/index.js

@@ -11,6 +11,7 @@ import ProjectLabelSubscription from './project_label_subscription';
 
 export function initDeleteLabelModal(optionalProps = {}) {
   new Vue({
+    name: 'DeleteLabelModalRoot',
     render(h) {
       return h(DeleteLabelModal, {
         props: {
@@ -65,6 +66,7 @@ export function initLabelIndex() {
 
   return new Vue({
     el: '#js-promote-label-modal',
+    name: 'PromoteLabelModal',
     data() {
       return {
         modalProps: {

app/assets/javascripts/milestones/index.js

@@ -46,6 +46,7 @@ export function initPromoteMilestoneModal() {
 
   return new Vue({
     el: promoteMilestoneModal,
+    name: 'PromoteMilestoneModalRoot',
     render(createElement) {
       return createElement(PromoteMilestoneModal);
     },
@@ -80,6 +81,7 @@ export function initDeleteMilestoneModal() {
 
   return new Vue({
     el: '#js-delete-milestone-modal',
+    name: 'DeleteMilestoneModalRoot',
     data() {
       return {
         modalProps: {

app/assets/javascripts/sidebar/mount_milestone_sidebar.js

@@ -21,6 +21,7 @@ export default class SidebarMilestone {
     // eslint-disable-next-line no-new
     new Vue({
       el,
+      name: 'SidebarMilestoneRoot',
       components: {
         timeTracker,
       },

app/assets/javascripts/vue_shared/alert_details/index.js

@@ -70,6 +70,7 @@ export default (selector) => {
   // eslint-disable-next-line no-new
   new Vue({
     el: selector,
+    name: 'AlertDetailsRoot',
     components: {
       AlertDetails,
     },

ee/app/assets/javascripts/issues/index.js

@@ -35,6 +35,7 @@ export function initUnableToLinkVulnerabilityError() {
 
   return new Vue({
     el,
+    name: 'UnableToLinkVulnerabilityErrorRoot',
     render: (createElement) =>
       createElement(UnableToLinkVulnerabilityError, { props: { vulnerabilityLink } }),
   });

ee/app/assets/javascripts/iterations/index.js

@@ -27,6 +27,7 @@ export function initIterationsList(namespaceType) {
   const el = document.querySelector('.js-iterations-list');
   return new Vue({
     el,
+    name: 'IterationsRoot',
     apolloProvider,
     render(createElement) {
       return createElement(Iterations, {
@@ -46,6 +47,7 @@ export function initIterationForm() {
 
   return new Vue({
     el,
+    name: 'IterationFormRoot',
     apolloProvider,
     render(createElement) {
       return createElement(IterationForm, {
@@ -76,6 +78,7 @@ export function initIterationReport({ namespaceType, initiallyEditing } = {}) {
 
   return new Vue({
     el,
+    name: 'IterationReportRoot',
     apolloProvider,
     provide: {
       fullPath,
@@ -107,6 +110,7 @@ function injectVueRouterIntoBreadcrumbs(router, groupPath) {
   breadCrumbEl.replaceChild(nestedBreadcrumbEl, crumbs[0]);
   return new Vue({
     el: nestedBreadcrumbEl,
+    name: 'IterationBreadcrumbRoot',
     router,
     apolloProvider,
     components: {
@@ -162,6 +166,7 @@ export function initCadenceApp({ namespaceType }) {
 
   return new Vue({
     el,
+    name: 'IterationsRoot',
     router,
     apolloProvider,
     provide: {

ee/app/assets/javascripts/sidebar/mount_sidebar.js

@@ -165,6 +165,7 @@ function mountEscalationPoliciesSelect() {
 
   return new Vue({
     el,
+    name: 'SidebarEscalationPolicyRoot',
     apolloProvider,
     components: {
       SidebarEscalationPolicy,

ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/epics_select_bundle.js

@@ -14,6 +14,7 @@ export default () => {
 
   return new Vue({
     el,
+    name: 'EpicsSelectRoot',
     components: {
       EpicsSelect,
     },

ee/app/assets/javascripts/vue_shared/components/sidebar/health_status_select/health_status_bundle.js

@@ -14,6 +14,7 @@ export default () => {
 
   return new Vue({
     el,
+    name: 'HealthStatusSelectRoot',
     components: {
       HealthStatusSelect,
     },

ee/app/assets/javascripts/vue_shared/components/sidebar/iterations_dropdown_bundle.js

@@ -22,6 +22,7 @@ export default function initIterationsDropdownBundle() {
 
   return new Vue({
     el,
+    name: 'IterationDropdownRoot',
     apolloProvider,
     methods: {
       getIdForIteration(iteration) {

ee/app/assets/javascripts/vue_shared/discover/card_security_discover_bundle.js

@@ -34,6 +34,7 @@ export default () => {
 
   return new Vue({
     el: securityTab,
+    name: 'SecurityDiscoverRoot',
     apolloProvider,
     components: {
       SecurityDiscoverApp,