Disabled Edit button for binary snippets

app/assets/javascripts/snippets/components/snippet_header.vue

@@ -10,6 +10,7 @@ import {
   GlDropdown,
   GlDropdownItem,
   GlButton,
+  GlTooltipDirective,
 } from '@gitlab/ui';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
@@ -30,6 +31,9 @@ export default {
     TimeAgoTooltip,
     GlButton,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   apollo: {
     canCreateSnippet: {
       query() {
@@ -67,6 +71,10 @@ export default {
           condition: this.snippet.userPermissions.updateSnippet,
           text: __('Edit'),
           href: this.editLink,
+          disabled: this.snippet.blob.binary,
+          title: this.snippet.blob.binary
+            ? __('Snippets with non-text files can only be edited via Git.')
+            : undefined,
         },
         {
           condition: this.snippet.userPermissions.adminSnippet,
@@ -186,18 +194,24 @@ export default {
     <div class="detail-page-header-actions">
       <div class="d-none d-sm-flex">
         <template v-for="(action, index) in personalSnippetActions">
-          <gl-button
+          <div
             v-if="action.condition"
             :key="index"
-            :disabled="action.disabled"
-            :variant="action.variant"
-            :category="action.category"
-            :class="action.cssClass"
-            :href="action.href"
-            @click="action.click ? action.click() : undefined"
+            v-gl-tooltip
+            :title="action.title"
+            class="d-inline-block"
           >
-            {{ action.text }}
-          </gl-button>
+            <gl-button
+              :disabled="action.disabled"
+              :variant="action.variant"
+              :category="action.category"
+              :class="action.cssClass"
+              :href="action.href"
+              @click="action.click ? action.click() : undefined"
+            >
+              {{ action.text }}
+            </gl-button>
+          </div>
         </template>
       </div>
       <div class="d-block d-sm-none dropdown">
@@ -205,6 +219,8 @@ export default {
           <gl-dropdown-item
             v-for="(action, index) in personalSnippetActions"
             :key="index"
+            :disabled="action.disabled"
+            :title="action.title"
             :href="action.href"
             @click="action.click ? action.click() : undefined"
             >{{ action.text }}</gl-dropdown-item

changelogs/unreleased/212592-disable-binary-edit.yml

+---
+title: Disabled Edit button for binary snippets
+merge_request: 30904
+author:
+type: added

locale/gitlab.pot

@@ -19178,6 +19178,9 @@ msgstr ""
 msgid "Snippets"
 msgstr ""
 
+msgid "Snippets with non-text files can only be edited via Git."
+msgstr ""
+
 msgid "SnippetsEmptyState|Code snippets"
 msgstr ""
 

spec/frontend/snippets/components/snippet_header_spec.js

@@ -7,26 +7,27 @@ import { shallowMount } from '@vue/test-utils';
 describe('Snippet header component', () => {
   let wrapper;
   const snippet = {
-    snippet: {
-      id: 'gid://gitlab/PersonalSnippet/50',
-      title: 'The property of Thor',
-      visibilityLevel: 'private',
-      webUrl: 'http://personal.dev.null/42',
-      userPermissions: {
-        adminSnippet: true,
-        updateSnippet: true,
-        reportSnippet: false,
-      },
-      project: null,
-      author: {
-        name: 'Thor Odinson',
-      },
+    id: 'gid://gitlab/PersonalSnippet/50',
+    title: 'The property of Thor',
+    visibilityLevel: 'private',
+    webUrl: 'http://personal.dev.null/42',
+    userPermissions: {
+      adminSnippet: true,
+      updateSnippet: true,
+      reportSnippet: false,
+    },
+    project: null,
+    author: {
+      name: 'Thor Odinson',
+    },
+    blob: {
+      binary: false,
     },
   };
   const mutationVariables = {
     mutation: DeleteSnippetMutation,
     variables: {
-      id: snippet.snippet.id,
+      id: snippet.id,
     },
   };
   const errorMsg = 'Foo bar';
@@ -46,10 +47,12 @@ describe('Snippet header component', () => {
     loading = false,
     permissions = {},
     mutationRes = mutationTypes.RESOLVE,
+    snippetProps = {},
   } = {}) {
-    const defaultProps = Object.assign({}, snippet);
+    // const defaultProps = Object.assign({}, snippet, snippetProps);
+    const defaultProps = Object.assign(snippet, snippetProps);
     if (permissions) {
-      Object.assign(defaultProps.snippet.userPermissions, {
+      Object.assign(defaultProps.userPermissions, {
         ...permissions,
       });
     }
@@ -65,7 +68,9 @@ describe('Snippet header component', () => {
     wrapper = shallowMount(SnippetHeader, {
       mocks: { $apollo },
       propsData: {
-        ...defaultProps,
+        snippet: {
+          ...defaultProps,
+        },
       },
       stubs: {
         ApolloMutation,
@@ -126,6 +131,17 @@ describe('Snippet header component', () => {
     expect(wrapper.find(GlModal).exists()).toBe(true);
   });
 
+  it('renders Edit button as disabled for binary snippets', () => {
+    createComponent({
+      snippetProps: {
+        blob: {
+          binary: true,
+        },
+      },
+    });
+    expect(wrapper.find('[href*="edit"]').props('disabled')).toBe(true);
+  });
+
   describe('Delete mutation', () => {
     const { location } = window;