Merge branch 'fix-blob-controls' into 'master'

Blob refactor: Fix blob controls bug

See merge request gitlab-org/gitlab!77964

app/assets/javascripts/repository/components/blob_controls.vue

@@ -63,19 +63,25 @@ export default {
   },
   computed: {
     filePath() {
-      const { path } = this.$route.params;
-      updateElementsVisibility('.tree-controls', !path);
-      return path;
+      return this.$route.params.path;
+    },
+    showBlobControls() {
+      return this.filePath && this.$route.name === 'blobPathDecoded';
     },
     blobInfo() {
       return this.project?.repository?.blobs?.nodes[0] || {};
     },
   },
+  watch: {
+    showBlobControls(shouldShow) {
+      updateElementsVisibility('.tree-controls', !shouldShow);
+    },
+  },
 };
 </script>
 
 <template>
-  <div v-if="filePath">
+  <div v-if="showBlobControls">
     <gl-button data-testid="find" :href="blobInfo.findFilePath" :class="$options.buttonClassList">
       {{ $options.i18n.findFile }}
     </gl-button>

spec/frontend/repository/components/blob_controls_spec.js

@@ -7,8 +7,11 @@ import BlobControls from '~/repository/components/blob_controls.vue';
 import blobControlsQuery from '~/repository/queries/blob_controls.query.graphql';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createRouter from '~/repository/router';
+import { updateElementsVisibility } from '~/repository/utils/dom';
 import { blobControlsDataMock, refMock } from '../mock_data';
 
+jest.mock('~/repository/utils/dom');
+
 let router;
 let wrapper;
 let mockResolver;
@@ -64,14 +67,22 @@ describe('Blob controls component', () => {
     expect(findPermalinkButton().attributes('href')).toBe('permalink/file.js');
   });
 
-  it('does not render any buttons if no filePath is provided', async () => {
-    router.replace({ name: 'blobPath', params: { path: null } });
-
-    await nextTick();
-
-    expect(findFindButton().exists()).toBe(false);
-    expect(findBlameButton().exists()).toBe(false);
-    expect(findHistoryButton().exists()).toBe(false);
-    expect(findPermalinkButton().exists()).toBe(false);
-  });
+  it.each`
+    name                 | path
+    ${'blobPathDecoded'} | ${null}
+    ${'treePathDecoded'} | ${'myFile.js'}
+  `(
+    'does not render any buttons if router name is $name and router path is $path',
+    async ({ name, path }) => {
+      router.replace({ name, params: { path } });
+
+      await nextTick();
+
+      expect(findFindButton().exists()).toBe(false);
+      expect(findBlameButton().exists()).toBe(false);
+      expect(findHistoryButton().exists()).toBe(false);
+      expect(findPermalinkButton().exists()).toBe(false);
+      expect(updateElementsVisibility).toHaveBeenCalledWith('.tree-controls', true);
+    },
+  );
 });