Merge branch '334785-display-correct-action-buttons' into 'master'

Blob refactor: Display correct edit buttons

See merge request gitlab-org/gitlab!66830

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

@@ -175,7 +175,7 @@ export default {
       >
         <template #actions>
           <blob-edit
-            v-if="!isBinary"
+            :show-edit-button="!isBinary"
             :edit-path="blobInfo.editBlobPath"
             :web-ide-path="blobInfo.ideEditPath"
           />

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

@@ -15,6 +15,10 @@ export default {
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
+    showEditButton: {
+      type: Boolean,
+      required: true,
+    },
     editPath: {
       type: String,
       required: true,
@@ -30,17 +34,31 @@ export default {
 <template>
   <web-ide-link
     v-if="glFeatures.consolidatedEditButton"
+    :show-edit-button="showEditButton"
     class="gl-mr-3"
     :edit-url="editPath"
     :web-ide-url="webIdePath"
     :is-blob="true"
   />
   <div v-else>
-    <gl-button class="gl-mr-2" category="primary" variant="confirm" :href="editPath">
+    <gl-button
+      v-if="showEditButton"
+      class="gl-mr-2"
+      category="primary"
+      variant="confirm"
+      :href="editPath"
+      data-testid="edit"
+    >
       {{ $options.i18n.edit }}
     </gl-button>
 
-    <gl-button class="gl-mr-3" category="primary" variant="confirm" :href="webIdePath">
+    <gl-button
+      class="gl-mr-3"
+      category="primary"
+      variant="confirm"
+      :href="webIdePath"
+      data-testid="web-ide"
+    >
       {{ $options.i18n.webIde }}
     </gl-button>
   </div>

spec/frontend/repository/components/blob_content_viewer_spec.js

@@ -309,6 +309,7 @@ describe('Blob content viewer component', () => {
       expect(findBlobEdit().props()).toMatchObject({
         editPath: editBlobPath,
         webIdePath: ideEditPath,
+        showEditButton: true,
       });
     });
 
@@ -326,10 +327,11 @@ describe('Blob content viewer component', () => {
       expect(findBlobEdit().props()).toMatchObject({
         editPath: editBlobPath,
         webIdePath: ideEditPath,
+        showEditButton: true,
       });
     });
 
-    it('does not render BlobHeaderEdit button when viewing a binary file', async () => {
+    it('renders BlobHeaderEdit button for binary files', async () => {
       fullFactory({
         mockData: { blobInfo: richMockData, isBinary: true },
         stubs: {
@@ -340,7 +342,11 @@ describe('Blob content viewer component', () => {
 
       await nextTick();
 
-      expect(findBlobEdit().exists()).toBe(false);
+      expect(findBlobEdit().props()).toMatchObject({
+        editPath: editBlobPath,
+        webIdePath: ideEditPath,
+        showEditButton: false,
+      });
     });
 
     describe('BlobButtonGroup', () => {

spec/frontend/repository/components/blob_edit_spec.js

@@ -6,6 +6,7 @@ import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
 const DEFAULT_PROPS = {
   editPath: 'some_file.js/edit',
   webIdePath: 'some_file.js/ide/edit',
+  showEditButton: true,
 };
 
 describe('BlobEdit component', () => {
@@ -31,8 +32,8 @@ describe('BlobEdit component', () => {
   });
 
   const findButtons = () => wrapper.findAll(GlButton);
-  const findEditButton = () => findButtons().at(0);
-  const findWebIdeButton = () => findButtons().at(1);
+  const findEditButton = () => wrapper.find('[data-testid="edit"]');
+  const findWebIdeButton = () => wrapper.find('[data-testid="web-ide"]');
   const findWebIdeLink = () => wrapper.find(WebIdeLink);
 
   it('renders component', () => {
@@ -77,6 +78,23 @@ describe('BlobEdit component', () => {
       editUrl,
       webIdeUrl,
       isBlob: true,
+      showEditButton: true,
+    });
+  });
+
+  describe('Without Edit button', () => {
+    const showEditButton = false;
+
+    it('renders WebIdeLink component without an edit button', () => {
+      createComponent(true, { showEditButton });
+
+      expect(findWebIdeLink().props()).toMatchObject({ showEditButton });
+    });
+
+    it('does not render an Edit button', () => {
+      createComponent(false, { showEditButton });
+
+      expect(findEditButton().exists()).toBe(false);
     });
   });
 });