Add Vue app names for Vue devtools

Add names for issues show page

app/assets/javascripts/design_management/index.js

@@ -24,6 +24,7 @@ export default () => {
 
   return new Vue({
     el,
+    name: 'DesignRoot',
     router,
     apolloProvider,
     provide: {

app/assets/javascripts/emoji/awards_app/index.js

@@ -12,6 +12,7 @@ export default (el) => {
 
   return new Vue({
     el,
+    name: 'AwardsListRoot',
     store: createstore(),
     computed: {
       ...mapState(['currentUserId', 'canAwardEmoji', 'awards']),

app/assets/javascripts/invite_members/init_invite_members_modal.js

@@ -28,6 +28,7 @@ export default function initInviteMembersModal() {
 
   return new Vue({
     el,
+    name: 'InviteMembersModalRoot',
     provide: {
       newProjectPath: el.dataset.newProjectPath,
     },

app/assets/javascripts/invite_members/init_invite_members_trigger.js

@@ -11,6 +11,7 @@ export default function initInviteMembersTrigger() {
   return triggers.forEach((el) => {
     return new Vue({
       el,
+      name: 'InviteMembersTriggerRoot',
       render: (createElement) =>
         createElement(InviteMembersTrigger, {
           props: {

app/assets/javascripts/issuable/index.js

@@ -97,6 +97,7 @@ export function initIssuableHeaderWarnings(store) {
 
   return new Vue({
     el,
+    name: 'IssuableHeaderWarningsRoot',
     store,
     provide: { hidden: parseBoolean(hidden) },
     render: (createElement) => createElement(IssuableHeaderWarnings),

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

@@ -13,6 +13,7 @@ export function initRelatedMergeRequests() {
 
   return new Vue({
     el,
+    name: 'RelatedMergeRequestsRoot',
     store: createStore(),
     render: (createElement) =>
       createElement(RelatedMergeRequests, {

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

@@ -44,6 +44,7 @@ export function initIncidentApp(issueData = {}) {
 
   return new Vue({
     el,
+    name: 'DescriptionRoot',
     apolloProvider,
     provide: {
       issueType: INCIDENT_TYPE,
@@ -86,6 +87,7 @@ export function initIssueApp(issueData, store) {
 
   return new Vue({
     el,
+    name: 'DescriptionRoot',
     apolloProvider,
     store,
     provide: {
@@ -123,6 +125,7 @@ export function initHeaderActions(store, type = '') {
 
   return new Vue({
     el,
+    name: 'HeaderActionsRoot',
     apolloProvider,
     store,
     provide: {

app/assets/javascripts/nav/mount.js

@@ -12,6 +12,7 @@ const mount = (el, Component) => {
 
   return new Vue({
     el,
+    name: 'TopNavRoot',
     store,
     render(h) {
       return h(Component, {

app/assets/javascripts/notes/discussion_filters.js

@@ -19,7 +19,7 @@ export default (store) => {
 
     return new Vue({
       el: discussionFilterEl,
-      name: 'DiscussionFilter',
+      name: 'DiscussionFilterRoot',
       components: {
         DiscussionFilter,
       },

app/assets/javascripts/notes/index.js

@@ -14,6 +14,7 @@ export default () => {
   // eslint-disable-next-line no-new
   new Vue({
     el,
+    name: 'NotesRoot',
     components: {
       notesApp,
     },

app/assets/javascripts/notes/sort_discussions.js

@@ -8,6 +8,7 @@ export default (store) => {
 
   return new Vue({
     el,
+    name: 'SortDiscussionRoot',
     store,
     render(createElement) {
       return createElement(SortDiscussion);

app/assets/javascripts/performance_bar/index.js

@@ -20,6 +20,7 @@ const initPerformanceBar = (el) => {
 
   return new Vue({
     el,
+    name: 'PerformanceBarRoot',
     components: {
       PerformanceBarApp: () => import('./components/performance_bar_app.vue'),
     },

app/assets/javascripts/popovers/index.js

@@ -13,7 +13,7 @@ const getPopoversApp = () => {
     document.body.appendChild(container);
 
     const Popovers = Vue.extend(PopoversComponent);
-    app = new Popovers();
+    app = new Popovers({ name: 'PopoversRoot' });
     app.$mount(`#${APP_ELEMENT_ID}`);
   }
 

app/assets/javascripts/related_issues/index.js

@@ -8,7 +8,7 @@ export default function initRelatedIssues() {
     // eslint-disable-next-line no-new
     new Vue({
       el: relatedIssuesRootElement,
-      name: 'RelatedIssuesApp',
+      name: 'RelatedIssuesRoot',
       components: {
         relatedIssuesRoot: RelatedIssuesRoot,
       },

app/assets/javascripts/sidebar/mount_sidebar.js

@@ -57,6 +57,7 @@ function mountSidebarToDoWidget() {
 
   return new Vue({
     el,
+    name: 'SidebarTodoRoot',
     apolloProvider,
     components: {
       SidebarTodoWidget,
@@ -103,6 +104,7 @@ function mountAssigneesComponentDeprecated(mediator) {
   // eslint-disable-next-line no-new
   new Vue({
     el,
+    name: 'SidebarAssigneesRoot',
     apolloProvider,
     components: {
       SidebarAssignees,
@@ -135,6 +137,7 @@ function mountAssigneesComponent() {
   // eslint-disable-next-line no-new
   new Vue({
     el,
+    name: 'SidebarAssigneesRoot',
     apolloProvider,
     components: {
       SidebarAssigneesWidget,
@@ -185,6 +188,7 @@ function mountReviewersComponent(mediator) {
   // eslint-disable-next-line no-new
   new Vue({
     el,
+    name: 'SidebarReviewersRoot',
     apolloProvider,
     components: {
       SidebarReviewers,
@@ -218,6 +222,7 @@ function mountCrmContactsComponent() {
   // eslint-disable-next-line no-new
   new Vue({
     el,
+    name: 'SidebarCrmContactsRoot',
     apolloProvider,
     components: {
       CrmContacts,
@@ -242,6 +247,7 @@ function mountMilestoneSelect() {
 
   return new Vue({
     el,
+    name: 'SidebarMilestoneRoot',
     apolloProvider,
     components: {
       SidebarDropdownWidget,
@@ -274,6 +280,7 @@ export function mountSidebarLabels() {
 
   return new Vue({
     el,
+    name: 'SidebarLabelsRoot',
     apolloProvider,
 
     components: {
@@ -328,6 +335,7 @@ function mountConfidentialComponent() {
   // eslint-disable-next-line no-new
   new Vue({
     el,
+    name: 'SidebarConfidentialRoot',
     apolloProvider,
     components: {
       SidebarConfidentialityWidget,
@@ -362,6 +370,7 @@ function mountDueDateComponent() {
   // eslint-disable-next-line no-new
   new Vue({
     el,
+    name: 'SidebarDueDateRoot',
     apolloProvider,
     components: {
       SidebarDueDateWidget,
@@ -392,6 +401,7 @@ function mountReferenceComponent() {
   // eslint-disable-next-line no-new
   new Vue({
     el,
+    name: 'SidebarReferenceRoot',
     apolloProvider,
     components: {
       SidebarReferenceWidget,
@@ -428,6 +438,7 @@ function mountLockComponent(store) {
   // eslint-disable-next-line no-new
   new Vue({
     el,
+    name: 'SidebarLockRoot',
     store,
     provide: {
       fullPath,
@@ -451,6 +462,7 @@ function mountParticipantsComponent() {
   // eslint-disable-next-line no-new
   new Vue({
     el,
+    name: 'SidebarParticipantsRoot',
     apolloProvider,
     components: {
       SidebarParticipantsWidget,
@@ -479,6 +491,7 @@ function mountSubscriptionsComponent() {
   // eslint-disable-next-line no-new
   new Vue({
     el,
+    name: 'SidebarSubscriptionsRoot',
     apolloProvider,
     components: {
       SidebarSubscriptionsWidget,
@@ -509,6 +522,7 @@ function mountTimeTrackingComponent() {
   // eslint-disable-next-line no-new
   new Vue({
     el,
+    name: 'SidebarTimeTrackingRoot',
     apolloProvider,
     provide: { issuableType },
     render: (createElement) =>
@@ -534,6 +548,7 @@ function mountSeverityComponent() {
 
   return new Vue({
     el: severityContainerEl,
+    name: 'SidebarSeverityRoot',
     apolloProvider,
     components: {
       SidebarSeverity,
@@ -562,6 +577,7 @@ function mountCopyEmailComponent() {
   // eslint-disable-next-line no-new
   new Vue({
     el,
+    name: 'SidebarCopyEmailRoot',
     render: (createElement) =>
       createElement(CopyEmailToClipboard, { props: { issueEmailAddress: createNoteEmail } }),
   });

app/assets/javascripts/tooltips/index.js

@@ -21,6 +21,7 @@ const tooltipsApp = () => {
     document.body.appendChild(container);
 
     app = new Vue({
+      name: 'TooltipsRoot',
       render(h) {
         return h(Tooltips, {
           props: {

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

@@ -18,6 +18,7 @@ export function initRelatedFeatureFlags() {
 
   return new Vue({
     el,
+    name: 'RelatedFeatureFlagsRoot',
     provide: { endpoint: el.dataset.endpoint },
     render: (createElement) => createElement(RelatedFeatureFlags),
   });

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

@@ -23,6 +23,7 @@ const mountWeightComponent = () => {
 
   return new Vue({
     el,
+    name: 'SidebarWeightRoot',
     apolloProvider,
     components: {
       SidebarWeightWidget,
@@ -53,6 +54,7 @@ const mountStatusComponent = (store) => {
 
   return new Vue({
     el,
+    name: 'SidebarHealthStatusRoot',
     apolloProvider,
     store,
     components: {
@@ -82,6 +84,7 @@ function mountCveIdRequestComponent(store) {
   return new Vue({
     store,
     el,
+    name: 'SidebarCveIdRequestRoot',
     provide: {
       iid: String(iid),
       fullPath,
@@ -99,6 +102,7 @@ function mountEpicsSelect() {
 
   return new Vue({
     el,
+    name: 'SidebarEpicRoot',
     apolloProvider,
     components: {
       SidebarDropdownWidget,
@@ -131,6 +135,7 @@ function mountIterationSelect() {
 
   return new Vue({
     el,
+    name: 'SidebarIterationRoot',
     apolloProvider,
     provide: {
       canUpdate: parseBoolean(canEdit),