Append .json to ajax endpoint to prevent browser to display raw json

Add CHANGELOG entry

app/assets/javascripts/user_tabs.js

@@ -94,15 +94,17 @@ 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);
+      const endpoint = $target.data('endpoint');
+      this.setTab(action, endpoint);
+      return this.setCurrentAction(source);
     }
     activateTab(action) {
@@ -110,27 +112,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 +142,7 @@ content on the Users#show page.
       });
     }
-    loadActivities(source) {
+    loadActivities() {
       if (this.loaded['activity']) {
         return;
       }
@@ -155,7 +157,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;

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 }

changelogs/unreleased/fix-user-profile-tabs-showing-raw-json-instead.yml

+---
+title: Prevent user profile tabs to display raw json when going back and forward in
+  browser history
+merge_request:
+author: