Remove blob edit wrapper

Remove blob edit wrapper
Vue component from
the repo folder as
technical debt reduction

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

@@ -10,11 +10,11 @@ import { isLoggedIn } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import { redirectTo } 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 getRefMixin from '../mixins/get_ref';
 import blobInfoQuery from '../queries/blob_info.query.graphql';
 import { DEFAULT_BLOB_INFO, TEXT_FILE_TYPE, LFS_STORAGE } from '../constants';
 import BlobButtonGroup from './blob_button_group.vue';
-import BlobEdit from './blob_edit.vue';
 import ForkSuggestion from './fork_suggestion.vue';
 import { loadViewer } from './blob_viewers';
 
@@ -24,12 +24,12 @@ export default {
   },
   components: {
     BlobHeader,
-    BlobEdit,
     BlobButtonGroup,
     BlobContent,
     GlLoadingIcon,
     GlButton,
     ForkSuggestion,
+    WebIdeLink,
   },
   mixins: [getRefMixin, glFeatureFlagMixin()],
   inject: {
@@ -213,12 +213,15 @@ export default {
         @viewer-changed="switchViewer"
       >
         <template #actions>
-          <blob-edit
+          <web-ide-link
             v-if="!blobInfo.archived"
             :show-edit-button="!isBinaryFileType"
-            :edit-path="blobInfo.editBlobPath"
-            :web-ide-path="blobInfo.ideEditPath"
+            class="gl-mr-3"
+            :edit-url="blobInfo.editBlobPath"
+            :web-ide-url="blobInfo.ideEditPath"
             :needs-to-fork="showForkSuggestion"
+            is-blob
+            disable-fork-modal
             @edit="editBlob"
           />
 

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

-<script>
-import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
-
-export default {
-  components: {
-    WebIdeLink,
-  },
-  props: {
-    showEditButton: {
-      type: Boolean,
-      required: true,
-    },
-    editPath: {
-      type: String,
-      required: true,
-    },
-    webIdePath: {
-      type: String,
-      required: true,
-    },
-    needsToFork: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  methods: {
-    onEdit(target) {
-      this.$emit('edit', target);
-    },
-  },
-};
-</script>
-
-<template>
-  <web-ide-link
-    :show-edit-button="showEditButton"
-    class="gl-mr-3"
-    :edit-url="editPath"
-    :web-ide-url="webIdePath"
-    :needs-to-fork="needsToFork"
-    :is-blob="true"
-    disable-fork-modal
-    @edit="onEdit"
-  />
-</template>

spec/frontend/repository/components/blob_content_viewer_spec.js

@@ -10,7 +10,7 @@ import BlobContent from '~/blob/components/blob_content.vue';
 import BlobHeader from '~/blob/components/blob_header.vue';
 import BlobButtonGroup from '~/repository/components/blob_button_group.vue';
 import BlobContentViewer from '~/repository/components/blob_content_viewer.vue';
-import BlobEdit from '~/repository/components/blob_edit.vue';
+import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
 import ForkSuggestion from '~/repository/components/fork_suggestion.vue';
 import { loadViewer } from '~/repository/components/blob_viewers';
 import DownloadViewer from '~/repository/components/blob_viewers/download_viewer.vue';
@@ -99,7 +99,7 @@ const createComponent = async (mockData = {}, mountFn = shallowMount) => {
 describe('Blob content viewer component', () => {
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findBlobHeader = () => wrapper.findComponent(BlobHeader);
-  const findBlobEdit = () => wrapper.findComponent(BlobEdit);
+  const findWebIdeLink = () => wrapper.findComponent(WebIdeLink);
   const findPipelineEditor = () => wrapper.findByTestId('pipeline-editor');
   const findBlobContent = () => wrapper.findComponent(BlobContent);
   const findBlobButtonGroup = () => wrapper.findComponent(BlobButtonGroup);
@@ -255,32 +255,32 @@ describe('Blob content viewer component', () => {
   describe('BlobHeader action slot', () => {
     const { ideEditPath, editBlobPath } = simpleViewerMock;
 
-    it('renders BlobHeaderEdit buttons in simple viewer', async () => {
+    it('renders WebIdeLink button in simple viewer', async () => {
       await createComponent({ inject: { BlobContent: true, BlobReplace: true } }, mount);
 
-      expect(findBlobEdit().props()).toMatchObject({
-        editPath: editBlobPath,
-        webIdePath: ideEditPath,
+      expect(findWebIdeLink().props()).toMatchObject({
+        editUrl: editBlobPath,
+        webIdeUrl: ideEditPath,
         showEditButton: true,
       });
     });
 
-    it('renders BlobHeaderEdit button in rich viewer', async () => {
+    it('renders WebIdeLink button in rich viewer', async () => {
       await createComponent({ blob: richViewerMock }, mount);
 
-      expect(findBlobEdit().props()).toMatchObject({
-        editPath: editBlobPath,
-        webIdePath: ideEditPath,
+      expect(findWebIdeLink().props()).toMatchObject({
+        editUrl: editBlobPath,
+        webIdeUrl: ideEditPath,
         showEditButton: true,
       });
     });
 
-    it('renders BlobHeaderEdit button for binary files', async () => {
+    it('renders WebIdeLink button for binary files', async () => {
       await createComponent({ blob: richViewerMock, isBinary: true }, mount);
 
-      expect(findBlobEdit().props()).toMatchObject({
-        editPath: editBlobPath,
-        webIdePath: ideEditPath,
+      expect(findWebIdeLink().props()).toMatchObject({
+        editUrl: editBlobPath,
+        webIdeUrl: ideEditPath,
         showEditButton: false,
       });
     });
@@ -318,7 +318,7 @@ describe('Blob content viewer component', () => {
 
         expect(findBlobHeader().props('hideViewerSwitcher')).toBe(true);
         expect(findBlobHeader().props('isBinary')).toBe(true);
-        expect(findBlobEdit().props('showEditButton')).toBe(false);
+        expect(findWebIdeLink().props('showEditButton')).toBe(false);
       });
     });
 
@@ -401,12 +401,12 @@ describe('Blob content viewer component', () => {
     beforeEach(() => createComponent({}, mount));
 
     it('simple edit redirects to the simple editor', () => {
-      findBlobEdit().vm.$emit('edit', 'simple');
+      findWebIdeLink().vm.$emit('edit', 'simple');
       expect(redirectTo).toHaveBeenCalledWith(simpleViewerMock.editBlobPath);
     });
 
     it('IDE edit redirects to the IDE editor', () => {
-      findBlobEdit().vm.$emit('edit', 'ide');
+      findWebIdeLink().vm.$emit('edit', 'ide');
       expect(redirectTo).toHaveBeenCalledWith(simpleViewerMock.ideEditPath);
     });
 
@@ -435,7 +435,7 @@ describe('Blob content viewer component', () => {
           mount,
         );
 
-        findBlobEdit().vm.$emit('edit', 'simple');
+        findWebIdeLink().vm.$emit('edit', 'simple');
         await nextTick();
 
         expect(findForkSuggestion().exists()).toBe(showForkSuggestion);

spec/frontend/repository/components/blob_edit_spec.js

-import { shallowMount } from '@vue/test-utils';
-import BlobEdit from '~/repository/components/blob_edit.vue';
-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,
-  needsToFork: false,
-};
-
-describe('BlobEdit component', () => {
-  let wrapper;
-
-  const createComponent = (props = {}) => {
-    wrapper = shallowMount(BlobEdit, {
-      propsData: {
-        ...DEFAULT_PROPS,
-        ...props,
-      },
-    });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  const findEditButton = () => wrapper.find('[data-testid="edit"]');
-  const findWebIdeLink = () => wrapper.find(WebIdeLink);
-
-  it('renders component', () => {
-    createComponent();
-
-    const { editPath, webIdePath } = DEFAULT_PROPS;
-
-    expect(wrapper.props()).toMatchObject({
-      editPath,
-      webIdePath,
-    });
-  });
-
-  it('renders WebIdeLink component', () => {
-    createComponent();
-
-    const { editPath: editUrl, webIdePath: webIdeUrl, needsToFork } = DEFAULT_PROPS;
-
-    expect(findWebIdeLink().props()).toMatchObject({
-      editUrl,
-      webIdeUrl,
-      isBlob: true,
-      showEditButton: true,
-      needsToFork,
-    });
-  });
-
-  describe('Without Edit button', () => {
-    const showEditButton = false;
-
-    it('renders WebIdeLink component without an edit button', () => {
-      createComponent({ showEditButton });
-
-      expect(findWebIdeLink().props()).toMatchObject({ showEditButton });
-    });
-
-    it('does not render an Edit button', () => {
-      createComponent({ showEditButton });
-
-      expect(findEditButton().exists()).toBe(false);
-    });
-  });
-});