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,9 +194,14 @@ 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"
+            v-gl-tooltip
+            :title="action.title"
+            class="d-inline-block"
+          >
+            <gl-button
               :disabled="action.disabled"
               :variant="action.variant"
               :category="action.category"
@@ -198,6 +211,7 @@ export default {
             >
               {{ 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,7 +7,6 @@ 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',
@@ -21,12 +20,14 @@ describe('Snippet header component', () => {
     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,8 +68,10 @@ describe('Snippet header component', () => {
     wrapper = shallowMount(SnippetHeader, {
       mocks: { $apollo },
       propsData: {
+        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;