Append .json to ajax endpoint to prevent browser to display raw jsonfix-user-profile-tabs-showing-raw-json-instead

Add CHANGELOG entry

3 files changed, 21 insertions, 15 deletions

diff --git a/app/assets/javascripts/user_tabs.js b/app/assets/javascripts/user_tabs.js
index 5db0d936ad8..0c67cb0c6cc 100644
--- a/app/assets/javascripts/user_tabs.js
+++ b/app/assets/javascripts/user_tabs.js
@@ -94,15 +94,16 @@ content on the Users#show page.
       e.preventDefault();
 
       $('.tab-pane.active').empty();
-      this.loadTab($(e.target).attr('href'), this.getCurrentAction());
+      const endpoint = $(e.target).attr('href');
+      this.loadTab(this.getCurrentAction(), endpoint);
     }
 
     tabShown(event) {
       const $target = $(event.target);
       const action = $target.data('action');
       const source = $target.attr('href');
-      this.setTab(source, action);
-      return this.setCurrentAction(source, action);
+      this.setTab(action, source);
+      return this.setCurrentAction(source);
     }
 
     activateTab(action) {
@@ -110,27 +111,27 @@ content on the Users#show page.
         .tab('show');
     }
 
-    setTab(source, action) {
+    setTab(action, endpoint) {
       if (this.loaded[action]) {
         return;
       }
       if (action === 'activity') {
-        this.loadActivities(source);
+        this.loadActivities();
       }
 
       const loadableActions = ['groups', 'contributed', 'projects', 'snippets'];
       if (loadableActions.indexOf(action) > -1) {
-        return this.loadTab(source, action);
+        return this.loadTab(action, endpoint);
       }
     }
 
-    loadTab(source, action) {
+    loadTab(action, endpoint) {
       return $.ajax({
         beforeSend: () => this.toggleLoading(true),
         complete: () => this.toggleLoading(false),
         dataType: 'json',
         type: 'GET',
-        url: source,
+        url: endpoint,
         success: (data) => {
           const tabSelector = `div#${action}`;
           this.$parentEl.find(tabSelector).html(data.html);
@@ -140,7 +141,7 @@ content on the Users#show page.
       });
     }
 
-    loadActivities(source) {
+    loadActivities() {
       if (this.loaded['activity']) {
         return;
       }
@@ -155,7 +156,7 @@ content on the Users#show page.
         .toggle(status);
     }
 
-    setCurrentAction(source, action) {
+    setCurrentAction(source) {
       let new_state = source;
       new_state = new_state.replace(/\/+$/, '');
       new_state += this._location.search + this._location.hash;
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 969ea7ab9e6..03e5dd97405 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -84,19 +84,19 @@
       .fade-right= icon('angle-right')
       %ul.nav-links.center.user-profile-nav.scrolling-tabs
         %li.js-activity-tab
-          = link_to user_path, data: {target: 'div#activity', action: 'activity', toggle: 'tab'} do
+          = link_to user_path, data: { target: 'div#activity', action: 'activity', toggle: 'tab' } do
             Activity
         %li.js-groups-tab
-          = link_to user_groups_path, data: {target: 'div#groups', action: 'groups', toggle: 'tab'} do
+          = link_to user_groups_path, data: { target: 'div#groups', action: 'groups', toggle: 'tab', endpoint: user_groups_path(format: :json) } do
             Groups
         %li.js-contributed-tab
-          = link_to user_contributed_projects_path, data: {target: 'div#contributed', action: 'contributed', toggle: 'tab'} do
+          = link_to user_contributed_projects_path, data: { target: 'div#contributed', action: 'contributed', toggle: 'tab', endpoint: user_contributed_projects_path(format: :json) } do
             Contributed projects
         %li.js-projects-tab
-          = link_to user_projects_path, data: {target: 'div#projects', action: 'projects', toggle: 'tab'} do
+          = link_to user_projects_path, data: { target: 'div#projects', action: 'projects', toggle: 'tab', endpoint: user_projects_path(format: :json) } do
             Personal projects
         %li.js-snippets-tab
-          = link_to user_snippets_path, data: {target: 'div#snippets', action: 'snippets', toggle: 'tab'} do
+          = link_to user_snippets_path, data: { target: 'div#snippets', action: 'snippets', toggle: 'tab', endpoint: user_snippets_path(format: :json) } do
             Snippets
 
   %div{ class: container_class }
diff --git a/changelogs/unreleased/fix-user-profile-tabs-showing-raw-json-instead.yml b/changelogs/unreleased/fix-user-profile-tabs-showing-raw-json-instead.yml
new file mode 100644
index 00000000000..410172864e3
--- /dev/null
+++ b/changelogs/unreleased/fix-user-profile-tabs-showing-raw-json-instead.yml
@@ -0,0 +1,5 @@
+---
+title: Prevent user profile tabs to display raw json when going back and forward in
+  browser history
+merge_request:
+author: