From adab8b775eec561f267809de16b12e4d56c6ec93 Mon Sep 17 00:00:00 2001
From: Marco Zille <marco.zille@gmail.com>
Date: Tue, 5 Jul 2022 14:54:17 +0200
Subject: [PATCH 1/7] Added support for links to markdown file code lines

Changelog: added
---
 .../repository/components/blob_content_viewer.vue     | 11 ++++++++++-
 .../source_viewer/components/chunk_line.vue           | 11 ++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index f6d370fb45035a..3976e395f213f8 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -63,7 +63,9 @@ export default {
         };
       },
       result() {
-        this.switchViewer(this.hasRichViewer ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER);
+        if (this.$route?.query?.plain !== '1') {
+          this.switchViewer(this.hasRichViewer ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER);
+        }
       },
       error() {
         this.displayError();
@@ -222,6 +224,13 @@ export default {
       if (!this.blobViewer) {
         this.loadLegacyViewer();
       }
+
+      if (this.$router && this.$route?.path) {
+        this.$router.push({
+          path: this.$route.path,
+          query: { plain: this.activeViewerType === SIMPLE_BLOB_VIEWER ? '1' : '0' },
+        });
+      }
     },
     editBlob(target) {
       if (this.showForkSuggestion) {
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
index 7b62f0cdb7dcd3..f296bb967796c6 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
@@ -1,12 +1,9 @@
 <script>
-import { GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlSafeHtmlDirective } from '@gitlab/ui';
 import { setAttributes } from '~/lib/utils/dom_utils';
 import { BIDI_CHARS, BIDI_CHARS_CLASS_LIST, BIDI_CHAR_TOOLTIP } from '../constants';
 
 export default {
-  components: {
-    GlLink,
-  },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
   },
@@ -60,15 +57,15 @@ export default {
 <template>
   <div class="gl-display-flex">
     <div class="gl-p-0! gl-absolute gl-z-index-3 gl-border-r diff-line-num line-numbers">
-      <gl-link
+      <a
         :id="`L${number}`"
         class="gl-user-select-none gl-ml-5 gl-pr-3 gl-shadow-none! file-line-num diff-line-num"
         :class="firstLineClass"
-        :to="`#L${number}`"
+        :href="`#L${number}`"
         :data-line-number="number"
       >
         {{ number }}
-      </gl-link>
+      </a>
     </div>
 
     <pre
-- 
GitLab


From 8461e0219aa8ff2abf5ea750ba16c4f2538df44a Mon Sep 17 00:00:00 2001
From: Marco Zille <marco.zille@gmail.com>
Date: Wed, 6 Jul 2022 11:50:36 +0200
Subject: [PATCH 2/7] Fixed frontend specs errors

---
 .../components/source_viewer/components/chunk_line.vue       | 1 +
 .../components/source_viewer/components/chunk_line_spec.js   | 5 ++---
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
index f296bb967796c6..a689433b503363 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
@@ -63,6 +63,7 @@ export default {
         :class="firstLineClass"
         :href="`#L${number}`"
         :data-line-number="number"
+        data-testid="line-number-anchor"
       >
         {{ number }}
       </a>
diff --git a/spec/frontend/vue_shared/components/source_viewer/components/chunk_line_spec.js b/spec/frontend/vue_shared/components/source_viewer/components/chunk_line_spec.js
index eb2eec92534e9d..9a63f566dec1fe 100644
--- a/spec/frontend/vue_shared/components/source_viewer/components/chunk_line_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/components/chunk_line_spec.js
@@ -1,4 +1,3 @@
-import { GlLink } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ChunkLine from '~/vue_shared/components/source_viewer/components/chunk_line.vue';
 import {
@@ -20,7 +19,7 @@ describe('Chunk Line component', () => {
     wrapper = shallowMountExtended(ChunkLine, { propsData: { ...DEFAULT_PROPS, ...props } });
   };
 
-  const findLink = () => wrapper.findComponent(GlLink);
+  const findLink = () => wrapper.findByTestId('line-number-anchor');
   const findContent = () => wrapper.findByTestId('content');
   const findWrappedBidiChars = () => wrapper.findAllByTestId('bidi-wrapper');
 
@@ -50,7 +49,7 @@ describe('Chunk Line component', () => {
     it('renders a line number', () => {
       expect(findLink().attributes()).toMatchObject({
         'data-line-number': `${DEFAULT_PROPS.number}`,
-        to: `#L${DEFAULT_PROPS.number}`,
+        href: `#L${DEFAULT_PROPS.number}`,
         id: `L${DEFAULT_PROPS.number}`,
       });
 
-- 
GitLab


From dd0f6bc3bec50686271cace9da476d424687eb93 Mon Sep 17 00:00:00 2001
From: Marco Zille <marco.zille@gmail.com>
Date: Wed, 6 Jul 2022 13:22:06 +0200
Subject: [PATCH 3/7] Fix failing specs

---
 .../components/blob_content_viewer.vue        | 27 ++++++--
 .../components/blob_content_viewer_spec.js    | 66 +++++++++++++++----
 2 files changed, 78 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 3976e395f213f8..0c9459b2b8ae99 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -64,7 +64,7 @@ export default {
       },
       result() {
         if (this.$route?.query?.plain !== '1') {
-          this.switchViewer(this.hasRichViewer ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER);
+          this.switchViewer(this.hasRichViewer ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER, true);
         }
       },
       error() {
@@ -175,6 +175,18 @@ export default {
       return this.blobInfo.storedExternally && this.blobInfo.externalStorage === LFS_STORAGE;
     },
   },
+  watch: {
+    '$route.query.plain': {
+      handler(plainValue) {
+        this.switchViewer(
+          this.hasRichViewer && (plainValue === undefined || plainValue === '0')
+            ? RICH_BLOB_VIEWER
+            : SIMPLE_BLOB_VIEWER,
+          plainValue === undefined,
+        );
+      },
+    },
+  },
   methods: {
     onError() {
       this.useFallback = true;
@@ -218,17 +230,24 @@ export default {
     displayError() {
       createFlash({ message: __('An error occurred while loading the file. Please try again.') });
     },
-    switchViewer(newViewer) {
+    switchViewer(newViewer, preventPlainUpdate) {
       this.activeViewerType = newViewer || SIMPLE_BLOB_VIEWER;
 
       if (!this.blobViewer) {
         this.loadLegacyViewer();
       }
 
-      if (this.$router && this.$route?.path) {
+      const plain = this.activeViewerType === SIMPLE_BLOB_VIEWER ? '1' : '0';
+
+      if (
+        !preventPlainUpdate &&
+        this.$router &&
+        this.$route?.path &&
+        this.$route?.query?.plain !== plain
+      ) {
         this.$router.push({
           path: this.$route.path,
-          query: { plain: this.activeViewerType === SIMPLE_BLOB_VIEWER ? '1' : '0' },
+          query: { plain },
         });
       }
     },
diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
index 3f7d311060cd34..6f1d3d3c7edd65 100644
--- a/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -27,6 +27,7 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import httpStatusCodes from '~/lib/utils/http_status';
 import LineHighlighter from '~/blob/line_highlighter';
 import { LEGACY_FILE_TYPES } from '~/repository/constants';
+import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants';
 import {
   simpleViewerMock,
   richViewerMock,
@@ -53,7 +54,12 @@ const mockAxios = new MockAdapter(axios);
 const createMockStore = () =>
   new Vuex.Store({ actions: { fetchData: jest.fn, setInitialData: jest.fn() } });
 
-const createComponent = async (mockData = {}, mountFn = shallowMount) => {
+const mockRouterPush = jest.fn();
+const mockRouter = {
+  push: mockRouterPush,
+};
+
+const createComponent = async (mockData = {}, mountFn = shallowMount, mockRoute = {}) => {
   Vue.use(VueApollo);
 
   const {
@@ -106,6 +112,10 @@ const createComponent = async (mockData = {}, mountFn = shallowMount) => {
       apolloProvider: fakeApollo,
       propsData: propsMock,
       mixins: [{ data: () => ({ ref: refMock }) }],
+      mocks: {
+        $route: mockRoute,
+        $router: mockRouter,
+      },
       provide: {
         targetBranch: 'test',
         originalBranch: 'default-ref',
@@ -158,7 +168,7 @@ describe('Blob content viewer component', () => {
     it('renders a BlobHeader component', async () => {
       await createComponent();
 
-      expect(findBlobHeader().props('activeViewerType')).toEqual('simple');
+      expect(findBlobHeader().props('activeViewerType')).toEqual(SIMPLE_BLOB_VIEWER);
       expect(findBlobHeader().props('hasRenderError')).toEqual(false);
       expect(findBlobHeader().props('hideViewerSwitcher')).toEqual(true);
       expect(findBlobHeader().props('blob')).toEqual(simpleViewerMock);
@@ -179,7 +189,7 @@ describe('Blob content viewer component', () => {
       expect(findBlobContent().props('activeViewer')).toEqual({
         fileType: 'text',
         tooLarge: false,
-        type: 'simple',
+        type: SIMPLE_BLOB_VIEWER,
         renderError: null,
       });
     });
@@ -247,7 +257,7 @@ describe('Blob content viewer component', () => {
     it('renders a BlobHeader component', async () => {
       await createComponent({ blob: richViewerMock });
 
-      expect(findBlobHeader().props('activeViewerType')).toEqual('rich');
+      expect(findBlobHeader().props('activeViewerType')).toEqual(RICH_BLOB_VIEWER);
       expect(findBlobHeader().props('hasRenderError')).toEqual(false);
       expect(findBlobHeader().props('hideViewerSwitcher')).toEqual(false);
       expect(findBlobHeader().props('blob')).toEqual(richViewerMock);
@@ -260,30 +270,36 @@ describe('Blob content viewer component', () => {
       expect(findBlobContent().props('activeViewer')).toEqual({
         fileType: 'markup',
         tooLarge: false,
-        type: 'rich',
+        type: RICH_BLOB_VIEWER,
         renderError: null,
       });
     });
 
     it('updates viewer type when viewer changed is clicked', async () => {
-      await createComponent({ blob: richViewerMock });
+      await createComponent({ blob: richViewerMock }, shallowMount, { path: '/mock_path' });
 
       expect(findBlobContent().props('activeViewer')).toEqual(
         expect.objectContaining({
-          type: 'rich',
+          type: RICH_BLOB_VIEWER,
         }),
       );
-      expect(findBlobHeader().props('activeViewerType')).toEqual('rich');
+      expect(findBlobHeader().props('activeViewerType')).toEqual(RICH_BLOB_VIEWER);
 
-      findBlobHeader().vm.$emit('viewer-changed', 'simple');
+      findBlobHeader().vm.$emit('viewer-changed', SIMPLE_BLOB_VIEWER);
       await nextTick();
 
-      expect(findBlobHeader().props('activeViewerType')).toEqual('simple');
+      expect(findBlobHeader().props('activeViewerType')).toEqual(SIMPLE_BLOB_VIEWER);
       expect(findBlobContent().props('activeViewer')).toEqual(
         expect.objectContaining({
-          type: 'simple',
+          type: SIMPLE_BLOB_VIEWER,
         }),
       );
+      expect(mockRouterPush).toHaveBeenCalledWith({
+        path: '/mock_path',
+        query: {
+          plain: '1',
+        },
+      });
     });
   });
 
@@ -543,4 +559,32 @@ describe('Blob content viewer component', () => {
       },
     );
   });
+
+  describe('active viewer based on plain attribute', () => {
+    it.each`
+      hasRichViewer | plain  | activeViewerType
+      ${true}       | ${'0'} | ${RICH_BLOB_VIEWER}
+      ${true}       | ${'1'} | ${SIMPLE_BLOB_VIEWER}
+      ${false}      | ${'0'} | ${SIMPLE_BLOB_VIEWER}
+      ${false}      | ${'1'} | ${SIMPLE_BLOB_VIEWER}
+    `(
+      'activeViewerType is `$activeViewerType` when hasRichViewer is $hasRichViewer and plain is set to $plain',
+      async ({ hasRichViewer, plain, activeViewerType }) => {
+        await createComponent(
+          { blob: hasRichViewer ? richViewerMock : simpleViewerMock },
+          shallowMount,
+          { query: { plain } },
+        );
+
+        await nextTick();
+
+        expect(findBlobContent().props('activeViewer')).toEqual(
+          expect.objectContaining({
+            type: activeViewerType,
+          }),
+        );
+        expect(findBlobHeader().props('activeViewerType')).toEqual(activeViewerType);
+      },
+    );
+  });
 });
-- 
GitLab


From 0052317439d36ef00746ba5b699dfc4bdf4b8aaf Mon Sep 17 00:00:00 2001
From: Marco Zille <marco.zille@gmail.com>
Date: Thu, 21 Jul 2022 13:29:04 +0200
Subject: [PATCH 4/7] Added URL hash presence check

---
 .../components/blob_content_viewer.vue        | 31 +++++++++++--------
 .../components/blob_content_viewer_spec.js    | 14 +++++++++
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 0c9459b2b8ae99..ad526487374511 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -8,7 +8,7 @@ import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { isLoggedIn, handleLocationHash } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
-import { redirectTo } from '~/lib/utils/url_utility';
+import { redirectTo, getLocationHash } from '~/lib/utils/url_utility';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
 import CodeIntelligence from '~/code_navigation/components/app.vue';
@@ -63,8 +63,12 @@ export default {
         };
       },
       result() {
-        if (this.$route?.query?.plain !== '1') {
-          this.switchViewer(this.hasRichViewer ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER, true);
+        const hash = getLocationHash();
+
+        if (hash && hash.startsWith('L')) {
+          this.switchViewer(SIMPLE_BLOB_VIEWER, false);
+        } else if (this.$route?.query?.plain !== '1') {
+          this.switchViewer(this.hasRichViewer ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER, false);
         }
       },
       error() {
@@ -176,13 +180,16 @@ export default {
     },
   },
   watch: {
+    // Watch the URL 'plain' query value to know if the viewer needs changing.
+    // This is the case when the uses switches the viewer and then goes back
+    // through the hystory.
     '$route.query.plain': {
       handler(plainValue) {
         this.switchViewer(
           this.hasRichViewer && (plainValue === undefined || plainValue === '0')
             ? RICH_BLOB_VIEWER
             : SIMPLE_BLOB_VIEWER,
-          plainValue === undefined,
+          plainValue !== undefined,
         );
       },
     },
@@ -230,7 +237,7 @@ export default {
     displayError() {
       createFlash({ message: __('An error occurred while loading the file. Please try again.') });
     },
-    switchViewer(newViewer, preventPlainUpdate) {
+    switchViewer(newViewer, updateRouteQuery) {
       this.activeViewerType = newViewer || SIMPLE_BLOB_VIEWER;
 
       if (!this.blobViewer) {
@@ -239,18 +246,16 @@ export default {
 
       const plain = this.activeViewerType === SIMPLE_BLOB_VIEWER ? '1' : '0';
 
-      if (
-        !preventPlainUpdate &&
-        this.$router &&
-        this.$route?.path &&
-        this.$route?.query?.plain !== plain
-      ) {
+      if (updateRouteQuery && this.$route?.query?.plain !== plain) {
         this.$router.push({
           path: this.$route.path,
-          query: { plain },
+          query: { ...this.$route.query, plain },
         });
       }
     },
+    handleViewerChanged(newViewer) {
+      this.switchViewer(newViewer, true);
+    },
     editBlob(target) {
       if (this.showForkSuggestion) {
         this.setForkTarget(target);
@@ -282,7 +287,7 @@ export default {
         :has-render-error="hasRenderError"
         :show-path="false"
         :override-copy="glFeatures.highlightJs"
-        @viewer-changed="switchViewer"
+        @viewer-changed="handleViewerChanged"
         @copy="onCopy"
       >
         <template #actions>
diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
index 6f1d3d3c7edd65..b7c8db40315fa9 100644
--- a/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -21,6 +21,7 @@ import blobInfoQuery from '~/repository/queries/blob_info.query.graphql';
 import userInfoQuery from '~/repository/queries/user_info.query.graphql';
 import applicationInfoQuery from '~/repository/queries/application_info.query.graphql';
 import CodeIntelligence from '~/code_navigation/components/app.vue';
+import * as urlUtility from '~/lib/utils/url_utility';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { isLoggedIn, handleLocationHash } from '~/lib/utils/common_utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -275,6 +276,19 @@ describe('Blob content viewer component', () => {
       });
     });
 
+    it('changes to simple viewer when URL has code line hash', async () => {
+      jest.spyOn(urlUtility, 'getLocationHash').mockReturnValueOnce('L5');
+
+      await createComponent({ blob: richViewerMock });
+
+      expect(findBlobContent().props('activeViewer')).toEqual(
+        expect.objectContaining({
+          type: SIMPLE_BLOB_VIEWER,
+        }),
+      );
+      expect(findBlobHeader().props('activeViewerType')).toEqual(SIMPLE_BLOB_VIEWER);
+    });
+
     it('updates viewer type when viewer changed is clicked', async () => {
       await createComponent({ blob: richViewerMock }, shallowMount, { path: '/mock_path' });
 
-- 
GitLab


From a10ba1df8f1a97c14078141652b06a0cfa8365d3 Mon Sep 17 00:00:00 2001
From: Marco Zille <marco.zille@gmail.com>
Date: Wed, 27 Jul 2022 15:37:48 +0200
Subject: [PATCH 5/7] Fixed typo in comment

---
 .../javascripts/repository/components/blob_content_viewer.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index ad526487374511..0fef7e6c908140 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -181,7 +181,7 @@ export default {
   },
   watch: {
     // Watch the URL 'plain' query value to know if the viewer needs changing.
-    // This is the case when the uses switches the viewer and then goes back
+    // This is the case when the user switches the viewer and then goes back
     // through the hystory.
     '$route.query.plain': {
       handler(plainValue) {
-- 
GitLab


From 2922af6a8dfd269616a4a9cd70433288036966cc Mon Sep 17 00:00:00 2001
From: Marco Zille <marco.zille@gmail.com>
Date: Thu, 28 Jul 2022 22:31:24 +0200
Subject: [PATCH 6/7] Applied suggestions from review

---
 .../components/blob_content_viewer.vue        | 46 +++++++++++++------
 .../components/blob_content_viewer_spec.js    |  7 +--
 2 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 0fef7e6c908140..5620a244d49851 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -63,13 +63,29 @@ export default {
         };
       },
       result() {
-        const hash = getLocationHash();
+        const urlHash = getLocationHash();
+        const plain = this.$route?.query?.plain;
 
-        if (hash && hash.startsWith('L')) {
-          this.switchViewer(SIMPLE_BLOB_VIEWER, false);
-        } else if (this.$route?.query?.plain !== '1') {
-          this.switchViewer(this.hasRichViewer ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER, false);
+        // When the 'plain' URL param is present, its value determines which viewer to render:
+        // - when 0 and the rich viewer is available we render with it
+        // - otherwise we render the simple viewer
+        if (plain !== undefined) {
+          if (plain === '0' && this.hasRichViewer) {
+            this.switchViewer(RICH_BLOB_VIEWER);
+          } else {
+            this.switchViewer(SIMPLE_BLOB_VIEWER);
+          }
+          return;
         }
+
+        // If there is a code line hash in the URL we render witch the simple viewer
+        if (urlHash && urlHash.startsWith('L')) {
+          this.switchViewer(SIMPLE_BLOB_VIEWER);
+          return;
+        }
+
+        // By default, if present, use the rich viewer to render
+        this.switchViewer(this.hasRichViewer ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER);
       },
       error() {
         this.displayError();
@@ -237,24 +253,28 @@ export default {
     displayError() {
       createFlash({ message: __('An error occurred while loading the file. Please try again.') });
     },
-    switchViewer(newViewer, updateRouteQuery) {
+    switchViewer(newViewer) {
       this.activeViewerType = newViewer || SIMPLE_BLOB_VIEWER;
 
       if (!this.blobViewer) {
         this.loadLegacyViewer();
       }
-
+    },
+    updateRouteQuery() {
       const plain = this.activeViewerType === SIMPLE_BLOB_VIEWER ? '1' : '0';
 
-      if (updateRouteQuery && this.$route?.query?.plain !== plain) {
-        this.$router.push({
-          path: this.$route.path,
-          query: { ...this.$route.query, plain },
-        });
+      if (this.$route?.query?.plain === plain) {
+        return;
       }
+
+      this.$router.push({
+        path: this.$route.path,
+        query: { ...this.$route.query, plain },
+      });
     },
     handleViewerChanged(newViewer) {
-      this.switchViewer(newViewer, true);
+      this.switchViewer(newViewer);
+      this.updateRouteQuery();
     },
     editBlob(target) {
       if (this.showForkSuggestion) {
diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
index b7c8db40315fa9..0f7cf4e61b20fd 100644
--- a/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -22,7 +22,6 @@ import userInfoQuery from '~/repository/queries/user_info.query.graphql';
 import applicationInfoQuery from '~/repository/queries/application_info.query.graphql';
 import CodeIntelligence from '~/code_navigation/components/app.vue';
 import * as urlUtility from '~/lib/utils/url_utility';
-import { redirectTo } from '~/lib/utils/url_utility';
 import { isLoggedIn, handleLocationHash } from '~/lib/utils/common_utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import httpStatusCodes from '~/lib/utils/http_status';
@@ -173,6 +172,7 @@ describe('Blob content viewer component', () => {
       expect(findBlobHeader().props('hasRenderError')).toEqual(false);
       expect(findBlobHeader().props('hideViewerSwitcher')).toEqual(true);
       expect(findBlobHeader().props('blob')).toEqual(simpleViewerMock);
+      expect(mockRouterPush).not.toHaveBeenCalled();
     });
 
     it('copies blob text to clipboard', async () => {
@@ -262,6 +262,7 @@ describe('Blob content viewer component', () => {
       expect(findBlobHeader().props('hasRenderError')).toEqual(false);
       expect(findBlobHeader().props('hideViewerSwitcher')).toEqual(false);
       expect(findBlobHeader().props('blob')).toEqual(richViewerMock);
+      expect(mockRouterPush).not.toHaveBeenCalled();
     });
 
     it('renders a BlobContent component', async () => {
@@ -533,12 +534,12 @@ describe('Blob content viewer component', () => {
 
     it('simple edit redirects to the simple editor', () => {
       findWebIdeLink().vm.$emit('edit', 'simple');
-      expect(redirectTo).toHaveBeenCalledWith(simpleViewerMock.editBlobPath);
+      expect(urlUtility.redirectTo).toHaveBeenCalledWith(simpleViewerMock.editBlobPath);
     });
 
     it('IDE edit redirects to the IDE editor', () => {
       findWebIdeLink().vm.$emit('edit', 'ide');
-      expect(redirectTo).toHaveBeenCalledWith(simpleViewerMock.ideEditPath);
+      expect(urlUtility.redirectTo).toHaveBeenCalledWith(simpleViewerMock.ideEditPath);
     });
 
     it.each`
-- 
GitLab


From 3036b143619b63bd2646a24814d2c04a666bf391 Mon Sep 17 00:00:00 2001
From: Marco Zille <marco.zille@gmail.com>
Date: Sun, 31 Jul 2022 15:34:40 +0200
Subject: [PATCH 7/7] Applied suggestions from review

---
 .../javascripts/repository/components/blob_content_viewer.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 5620a244d49851..7999b916e0f6c4 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -78,7 +78,7 @@ export default {
           return;
         }
 
-        // If there is a code line hash in the URL we render witch the simple viewer
+        // If there is a code line hash in the URL we render with the simple viewer
         if (urlHash && urlHash.startsWith('L')) {
           this.switchViewer(SIMPLE_BLOB_VIEWER);
           return;
-- 
GitLab