Adds `.json` to the end of pipelines endpoint

When the job page is rendered we fetch the pipeline
endpoint to render the stages in the sidebar.
Without `.json` the response is cached, and when the
user goes back to the pipeline's page it renders the
json output instead of the Vue app

app/assets/javascripts/jobs/store/actions.js

@@ -139,7 +139,7 @@ export const fetchStages = ({ state, dispatch }) => {
   dispatch('requestStages');
 
   axios
-    .get(state.job.pipeline.path)
+    .get(`${state.job.pipeline.path}.json`)
     .then(({ data }) => {
       dispatch('receiveStagesSuccess', data.details.stages);
       dispatch('fetchJobsForStage', data.details.stages[0]);

changelogs/unreleased/52472-pipeline-endpoint-json.yml

+---
+title: Fix caching issue with pipelines URL
+merge_request:
+author:
+type: fixed

spec/javascripts/jobs/store/actions_spec.js

@@ -422,7 +422,7 @@ describe('Job State actions', () => {
 
     beforeEach(() => {
       mockedState.job.pipeline = {
-        path: `${TEST_HOST}/endpoint.json/stages`,
+        path: `${TEST_HOST}/endpoint`,
       };
       mock = new MockAdapter(axios);
     });
@@ -434,7 +434,7 @@ describe('Job State actions', () => {
     describe('success', () => {
       it('dispatches requestStages and receiveStagesSuccess, fetchJobsForStage ', done => {
         mock
-          .onGet(`${TEST_HOST}/endpoint.json/stages`)
+          .onGet(`${TEST_HOST}/endpoint.json`)
           .replyOnce(200, { details: { stages: [{ id: 121212, name: 'build' }] } });
 
         testAction(