Merge branch 'revert-141da19f' into 'master'

Revert migrating bootstrap modal for file uploads

See merge request gitlab-org/gitlab!55548

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

@@ -5,7 +5,6 @@ import {
   GlDropdownSectionHeader,
   GlDropdownItem,
   GlIcon,
-  GlModalDirective,
 } from '@gitlab/ui';
 import permissionsQuery from 'shared_queries/repository/permissions.query.graphql';
 import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility';
@@ -13,15 +12,12 @@ import { __ } from '../../locale';
 import getRefMixin from '../mixins/get_ref';
 import projectPathQuery from '../queries/project_path.query.graphql';
 import projectShortPathQuery from '../queries/project_short_path.query.graphql';
-import UploadBlobModal from './upload_blob_modal.vue';
 
 const ROW_TYPES = {
   header: 'header',
   divider: 'divider',
 };
 
-const UPLOAD_BLOB_MODAL_ID = 'modal-upload-blob';
-
 export default {
   components: {
     GlDropdown,
@@ -29,7 +25,6 @@ export default {
     GlDropdownSectionHeader,
     GlDropdownItem,
     GlIcon,
-    UploadBlobModal,
   },
   apollo: {
     projectShortPath: {
@@ -51,9 +46,6 @@ export default {
       },
     },
   },
-  directives: {
-    GlModal: GlModalDirective,
-  },
   mixins: [getRefMixin],
   props: {
     currentPath: {
@@ -71,21 +63,6 @@ export default {
       required: false,
       default: false,
     },
-    canPushCode: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    selectedBranch: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    origionalBranch: {
-      type: String,
-      required: false,
-      default: '',
-    },
     newBranchPath: {
       type: String,
       required: false,
@@ -116,13 +93,7 @@ export default {
       required: false,
       default: null,
     },
-    uploadPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
-  uploadBlobModalId: UPLOAD_BLOB_MODAL_ID,
   data() {
     return {
       projectShortPath: '',
@@ -155,10 +126,7 @@ export default {
         );
     },
     canCreateMrFromFork() {
-      return this.userPermissions?.forkProject && this.userPermissions?.createMergeRequestIn;
-    },
-    showUploadModal() {
-      return this.canEditTree && !this.$apollo.queries.userPermissions.loading;
+      return this.userPermissions.forkProject && this.userPermissions.createMergeRequestIn;
     },
     dropdownItems() {
       const items = [];
@@ -181,9 +149,10 @@ export default {
           {
             attrs: {
               href: '#modal-upload-blob',
+              'data-target': '#modal-upload-blob',
+              'data-toggle': 'modal',
             },
             text: __('Upload file'),
-            modalId: UPLOAD_BLOB_MODAL_ID,
           },
           {
             attrs: {
@@ -284,26 +253,12 @@ export default {
             <gl-icon name="chevron-down" :size="16" class="float-left" />
           </template>
           <template v-for="(item, i) in dropdownItems">
-            <component
-              :is="getComponent(item.type)"
-              :key="i"
-              v-bind="item.attrs"
-              v-gl-modal="item.modalId || null"
-            >
+            <component :is="getComponent(item.type)" :key="i" v-bind="item.attrs">
               {{ item.text }}
             </component>
           </template>
         </gl-dropdown>
       </li>
     </ol>
-    <upload-blob-modal
-      v-if="showUploadModal"
-      :modal-id="$options.uploadBlobModalId"
-      :commit-message="__('Upload New File')"
-      :target-branch="selectedBranch"
-      :origional-branch="origionalBranch"
-      :can-push-code="canPushCode"
-      :path="uploadPath"
-    />
   </nav>
 </template>

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

-<script>
-import {
-  GlModal,
-  GlForm,
-  GlFormGroup,
-  GlFormInput,
-  GlFormTextarea,
-  GlToggle,
-  GlButton,
-  GlAlert,
-} from '@gitlab/ui';
-import createFlash from '~/flash';
-import axios from '~/lib/utils/axios_utils';
-import { ContentTypeMultipartFormData } from '~/lib/utils/headers';
-import { numberToHumanSize } from '~/lib/utils/number_utils';
-import { visitUrl, joinPaths } from '~/lib/utils/url_utility';
-import { __ } from '~/locale';
-import UploadDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
-
-const PRIMARY_OPTIONS_TEXT = __('Upload file');
-const SECONDARY_OPTIONS_TEXT = __('Cancel');
-const MODAL_TITLE = __('Upload New File');
-const COMMIT_LABEL = __('Commit message');
-const TARGET_BRANCH_LABEL = __('Target branch');
-const TOGGLE_CREATE_MR_LABEL = __('Start a new merge request with these changes');
-const REMOVE_FILE_TEXT = __('Remove file');
-const NEW_BRANCH_IN_FORK = __(
-  'A new branch will be created in your fork and a new merge request will be started.',
-);
-const ERROR_MESSAGE = __('Error uploading file. Please try again.');
-
-export default {
-  components: {
-    GlModal,
-    GlForm,
-    GlFormGroup,
-    GlFormInput,
-    GlFormTextarea,
-    GlToggle,
-    GlButton,
-    UploadDropzone,
-    GlAlert,
-  },
-  i18n: {
-    MODAL_TITLE,
-    COMMIT_LABEL,
-    TARGET_BRANCH_LABEL,
-    TOGGLE_CREATE_MR_LABEL,
-    REMOVE_FILE_TEXT,
-    NEW_BRANCH_IN_FORK,
-  },
-  props: {
-    modalId: {
-      type: String,
-      required: true,
-    },
-    commitMessage: {
-      type: String,
-      required: true,
-    },
-    targetBranch: {
-      type: String,
-      required: true,
-    },
-    origionalBranch: {
-      type: String,
-      required: true,
-    },
-    canPushCode: {
-      type: Boolean,
-      required: true,
-    },
-    path: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      commit: this.commitMessage,
-      target: this.targetBranch,
-      createNewMr: true,
-      file: null,
-      filePreviewURL: null,
-      fileBinary: null,
-      loading: false,
-    };
-  },
-  computed: {
-    primaryOptions() {
-      return {
-        text: PRIMARY_OPTIONS_TEXT,
-        attributes: [
-          {
-            variant: 'success',
-            loading: this.loading,
-            disabled: !this.formCompleted || this.loading,
-          },
-        ],
-      };
-    },
-    cancelOptions() {
-      return {
-        text: SECONDARY_OPTIONS_TEXT,
-        attributes: [
-          {
-            disabled: this.loading,
-          },
-        ],
-      };
-    },
-    formattedFileSize() {
-      return numberToHumanSize(this.file.size);
-    },
-    showCreateNewMrToggle() {
-      return this.canPushCode && this.target !== this.origionalBranch;
-    },
-    formCompleted() {
-      return this.file && this.commit && this.target;
-    },
-  },
-  methods: {
-    setFile(file) {
-      this.file = file;
-
-      const fileUurlReader = new FileReader();
-
-      fileUurlReader.readAsDataURL(this.file);
-
-      fileUurlReader.onload = (e) => {
-        this.filePreviewURL = e.target?.result;
-      };
-    },
-    removeFile() {
-      this.file = null;
-      this.filePreviewURL = null;
-    },
-    uploadFile() {
-      this.loading = true;
-
-      const {
-        $route: {
-          params: { path },
-        },
-      } = this;
-      const uploadPath = joinPaths(this.path, path);
-
-      const formData = new FormData();
-      formData.append('branch_name', this.target);
-      formData.append('create_merge_request', this.createNewMr);
-      formData.append('commit_message', this.commit);
-      formData.append('file', this.file);
-
-      return axios
-        .post(uploadPath, formData, {
-          headers: {
-            ...ContentTypeMultipartFormData,
-          },
-        })
-        .then((response) => {
-          visitUrl(response.data.filePath);
-        })
-        .catch(() => {
-          this.loading = false;
-          createFlash(ERROR_MESSAGE);
-        });
-    },
-  },
-};
-</script>
-<template>
-  <gl-form>
-    <gl-modal
-      :modal-id="modalId"
-      :title="$options.i18n.MODAL_TITLE"
-      :action-primary="primaryOptions"
-      :action-cancel="cancelOptions"
-      @primary.prevent="uploadFile"
-    >
-      <upload-dropzone class="gl-h-200! gl-mb-4" single-file-selection @change="setFile">
-        <div
-          v-if="file"
-          class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3"
-        >
-          <img v-if="filePreviewURL" :src="filePreviewURL" class="gl-h-11" />
-          <div>{{ formattedFileSize }}</div>
-          <div>{{ file.name }}</div>
-          <gl-button
-            category="tertiary"
-            variant="confirm"
-            :disabled="loading"
-            @click="removeFile"
-            >{{ $options.i18n.REMOVE_FILE_TEXT }}</gl-button
-          >
-        </div>
-      </upload-dropzone>
-      <gl-form-group :label="$options.i18n.COMMIT_LABEL" label-for="commit_message">
-        <gl-form-textarea v-model="commit" name="commit_message" :disabled="loading" />
-      </gl-form-group>
-      <gl-form-group
-        v-if="canPushCode"
-        :label="$options.i18n.TARGET_BRANCH_LABEL"
-        label-for="branch_name"
-      >
-        <gl-form-input v-model="target" :disabled="loading" name="branch_name" />
-      </gl-form-group>
-      <gl-toggle
-        v-if="showCreateNewMrToggle"
-        v-model="createNewMr"
-        :disabled="loading"
-        :label="$options.i18n.TOGGLE_CREATE_MR_LABEL"
-      />
-      <gl-alert v-if="!canPushCode" variant="info" :dismissible="false" class="gl-mt-3">
-        {{ $options.i18n.NEW_BRANCH_IN_FORK }}
-      </gl-alert>
-    </gl-modal>
-  </gl-form>
-</template>

app/assets/javascripts/repository/index.js

 import Vue from 'vue';
-import { parseBoolean } from '~/lib/utils/common_utils';
-import { escapeFileUrl } from '~/lib/utils/url_utility';
-import { __ } from '~/locale';
 import initWebIdeLink from '~/pages/projects/shared/web_ide_link';
+import { parseBoolean } from '../lib/utils/common_utils';
+import { escapeFileUrl } from '../lib/utils/url_utility';
+import { __ } from '../locale';
 import App from './components/app.vue';
 import Breadcrumbs from './components/breadcrumbs.vue';
 import DirectoryDownloadLinks from './components/directory_download_links.vue';
@@ -55,8 +55,6 @@ export default function setupVueRepositoryList() {
     const {
       canCollaborate,
       canEditTree,
-      canPushCode,
-      selectedBranch,
       newBranchPath,
       newTagPath,
       newBlobPath,
@@ -67,7 +65,8 @@ export default function setupVueRepositoryList() {
       newDirPath,
     } = breadcrumbEl.dataset;
 
-    router.afterEach(({ params: { path } }) => {
+    router.afterEach(({ params: { path = '/' } }) => {
+      updateFormAction('.js-upload-blob-form', uploadPath, path);
       updateFormAction('.js-create-dir-form', newDirPath, path);
     });
 
@@ -82,16 +81,12 @@ export default function setupVueRepositoryList() {
             currentPath: this.$route.params.path,
             canCollaborate: parseBoolean(canCollaborate),
             canEditTree: parseBoolean(canEditTree),
-            canPushCode: parseBoolean(canPushCode),
-            origionalBranch: ref,
-            selectedBranch,
             newBranchPath,
             newTagPath,
             newBlobPath,
             forkNewBlobPath,
             forkNewDirectoryPath,
             forkUploadBlobPath,
-            uploadPath,
           },
         });
       },

app/helpers/tree_helper.rb

@@ -131,8 +131,6 @@ module TreeHelper
 
   def breadcrumb_data_attributes
     attrs = {
-      selected_branch: selected_branch,
-      can_push_code: can?(current_user, :push_code, @project).to_s,
       can_collaborate: can_collaborate_with_project?(@project).to_s,
       new_blob_path: project_new_blob_path(@project, @ref),
       upload_path: project_create_blob_path(@project, @ref),

app/views/projects/_files.html.haml

@@ -21,4 +21,5 @@
 
   #js-tree-list{ data: vue_file_list_data(project, ref) }
   - if can_edit_tree?
+    = render 'projects/blob/upload', title: _('Upload New File'), placeholder: _('Upload New File'), button_title: _('Upload file'), form_path: project_create_blob_path(@project, @id), method: :post
     = render 'projects/blob/new_dir'

changelogs/unreleased/254280-replace-bootstrap-modal-trigger-in-app-assets-javascripts-blob-blo.yml

----
-title: Migrate bootstrap modal to GlModal for repo single file uploads
-merge_request: 53623
-author:
-type: changed

locale/gitlab.pot

@@ -12036,9 +12036,6 @@ msgstr ""
 msgid "Error uploading file"
 msgstr ""
 
-msgid "Error uploading file. Please try again."
-msgstr ""
-
 msgid "Error uploading file: %{stripped}"
 msgstr ""
 
@@ -25003,9 +25000,6 @@ msgstr ""
 msgid "Remove due date"
 msgstr ""
 
-msgid "Remove file"
-msgstr ""
-
 msgid "Remove fork relationship"
 msgstr ""
 
@@ -28369,9 +28363,6 @@ msgstr ""
 msgid "Start a new merge request"
 msgstr ""
 
-msgid "Start a new merge request with these changes"
-msgstr ""
-
 msgid "Start a review"
 msgstr ""
 

spec/features/projects/files/user_uploads_files_spec.rb

@@ -3,6 +3,8 @@
 require 'spec_helper'
 
 RSpec.describe 'Projects > Files > User uploads files' do
+  include DropzoneHelper
+
   let(:user) { create(:user) }
   let(:project) { create(:project, :repository, name: 'Shop', creator: user) }
   let(:project2) { create(:project, :repository, name: 'Another Project', path: 'another-project') }
@@ -15,15 +17,36 @@ RSpec.describe 'Projects > Files > User uploads files' do
   context 'when a user has write access' do
     before do
       visit(project_tree_path(project))
-
-      wait_for_requests
     end
 
     include_examples 'it uploads and commit a new text file'
 
     include_examples 'it uploads and commit a new image file'
 
-    include_examples 'it uploads a file to a sub-directory'
+    it 'uploads a file to a sub-directory', :js do
+      click_link 'files'
+
+      page.within('.repo-breadcrumb') do
+        expect(page).to have_content('files')
+      end
+
+      find('.add-to-tree').click
+      click_link('Upload file')
+      drop_in_dropzone(File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'))
+
+      page.within('#modal-upload-blob') do
+        fill_in(:commit_message, with: 'New commit message')
+      end
+
+      click_button('Upload file')
+
+      expect(page).to have_content('New commit message')
+
+      page.within('.repo-breadcrumb') do
+        expect(page).to have_content('files')
+        expect(page).to have_content('doc_sample.txt')
+      end
+    end
   end
 
   context 'when a user does not have write access' do

spec/features/projects/show/user_uploads_files_spec.rb

@@ -17,15 +17,11 @@ RSpec.describe 'Projects > Show > User uploads files' do
   context 'when a user has write access' do
     before do
       visit(project_path(project))
-
-      wait_for_requests
     end
 
     include_examples 'it uploads and commit a new text file'
 
     include_examples 'it uploads and commit a new image file'
-
-    include_examples 'it uploads a file to a sub-directory'
   end
 
   context 'when a user does not have write access' do

spec/frontend/repository/components/breadcrumbs_spec.js

 import { GlDropdown } from '@gitlab/ui';
 import { shallowMount, RouterLinkStub } from '@vue/test-utils';
 import Breadcrumbs from '~/repository/components/breadcrumbs.vue';
-import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
 
-describe('Repository breadcrumbs component', () => {
-  let wrapper;
+let vm;
 
-  const factory = (currentPath, extraProps = {}) => {
-    const $apollo = {
-      queries: {
-        userPermissions: {
-          loading: true,
-        },
-      },
-    };
-
-    wrapper = shallowMount(Breadcrumbs, {
+function factory(currentPath, extraProps = {}) {
+  vm = shallowMount(Breadcrumbs, {
     propsData: {
       currentPath,
       ...extraProps,
@@ -23,14 +13,12 @@ describe('Repository breadcrumbs component', () => {
     stubs: {
       RouterLink: RouterLinkStub,
     },
-      mocks: { $apollo },
   });
-  };
-
-  const findUploadBlobModal = () => wrapper.find(UploadBlobModal);
+}
 
+describe('Repository breadcrumbs component', () => {
   afterEach(() => {
-    wrapper.destroy();
+    vm.destroy();
   });
 
   it.each`
@@ -42,13 +30,13 @@ describe('Repository breadcrumbs component', () => {
   `('renders $linkCount links for path $path', ({ path, linkCount }) => {
     factory(path);
 
-    expect(wrapper.findAll(RouterLinkStub).length).toEqual(linkCount);
+    expect(vm.findAll(RouterLinkStub).length).toEqual(linkCount);
   });
 
   it('escapes hash in directory path', () => {
     factory('app/assets/javascripts#');
 
-    expect(wrapper.findAll(RouterLinkStub).at(3).props('to')).toEqual(
+    expect(vm.findAll(RouterLinkStub).at(3).props('to')).toEqual(
       '/-/tree/app/assets/javascripts%23',
     );
   });
@@ -56,44 +44,26 @@ describe('Repository breadcrumbs component', () => {
   it('renders last link as active', () => {
     factory('app/assets');
 
-    expect(wrapper.findAll(RouterLinkStub).at(2).attributes('aria-current')).toEqual('page');
+    expect(vm.findAll(RouterLinkStub).at(2).attributes('aria-current')).toEqual('page');
   });
 
-  it('does not render add to tree dropdown when permissions are false', async () => {
+  it('does not render add to tree dropdown when permissions are false', () => {
     factory('/', { canCollaborate: false });
 
-    wrapper.setData({ userPermissions: { forkProject: false, createMergeRequestIn: false } });
-
-    await wrapper.vm.$nextTick();
+    vm.setData({ userPermissions: { forkProject: false, createMergeRequestIn: false } });
 
-    expect(wrapper.find(GlDropdown).exists()).toBe(false);
+    return vm.vm.$nextTick(() => {
+      expect(vm.find(GlDropdown).exists()).toBe(false);
     });
-
-  it('renders add to tree dropdown when permissions are true', async () => {
-    factory('/', { canCollaborate: true });
-
-    wrapper.setData({ userPermissions: { forkProject: true, createMergeRequestIn: true } });
-
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.find(GlDropdown).exists()).toBe(true);
-  });
-
-  describe('renders the upload blob modal', () => {
-    beforeEach(() => {
-      factory('/', { canEditTree: true });
-    });
-
-    it('does not render the modal while loading', () => {
-      expect(findUploadBlobModal().exists()).toBe(false);
   });
 
-    it('renders the modal once loaded', async () => {
-      wrapper.setData({ $apollo: { queries: { userPermissions: { loading: false } } } });
+  it('renders add to tree dropdown when permissions are true', () => {
+    factory('/', { canCollaborate: true });
 
-      await wrapper.vm.$nextTick();
+    vm.setData({ userPermissions: { forkProject: true, createMergeRequestIn: true } });
 
-      expect(findUploadBlobModal().exists()).toBe(true);
+    return vm.vm.$nextTick(() => {
+      expect(vm.find(GlDropdown).exists()).toBe(true);
     });
   });
 });

spec/frontend/repository/components/upload_blob_modal_spec.js

-import { GlModal, GlFormInput, GlFormTextarea, GlToggle, GlAlert } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import axios from 'axios';
-import MockAdapter from 'axios-mock-adapter';
-import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
-import httpStatusCodes from '~/lib/utils/http_status';
-import { visitUrl } from '~/lib/utils/url_utility';
-import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
-import UploadDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
-
-jest.mock('~/flash');
-jest.mock('~/lib/utils/url_utility', () => ({
-  visitUrl: jest.fn(),
-  joinPaths: () => '/new_upload',
-}));
-
-const initialProps = {
-  modalId: 'upload-blob',
-  commitMessage: 'Upload New File',
-  targetBranch: 'master',
-  origionalBranch: 'master',
-  canPushCode: true,
-  path: 'new_upload',
-};
-
-describe('UploadBlobModal', () => {
-  let wrapper;
-  let mock;
-
-  const mockEvent = { preventDefault: jest.fn() };
-
-  const createComponent = (props) => {
-    wrapper = shallowMount(UploadBlobModal, {
-      propsData: {
-        ...initialProps,
-        ...props,
-      },
-      mocks: {
-        $route: {
-          params: {
-            path: '',
-          },
-        },
-      },
-    });
-  };
-
-  const findModal = () => wrapper.find(GlModal);
-  const findAlert = () => wrapper.find(GlAlert);
-  const findCommitMessage = () => wrapper.find(GlFormTextarea);
-  const findBranchName = () => wrapper.find(GlFormInput);
-  const findMrToggle = () => wrapper.find(GlToggle);
-  const findUploadDropzone = () => wrapper.find(UploadDropzone);
-  const actionButtonDisabledState = () => findModal().props('actionPrimary').attributes[0].disabled;
-  const cancelButtonDisabledState = () => findModal().props('actionCancel').attributes[0].disabled;
-  const actionButtonLoadingState = () => findModal().props('actionPrimary').attributes[0].loading;
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  describe.each`
-    canPushCode | displayBranchName | displayForkedBranchMessage
-    ${true}     | ${true}           | ${false}
-    ${false}    | ${false}          | ${true}
-  `(
-    'canPushCode = $canPushCode',
-    ({ canPushCode, displayBranchName, displayForkedBranchMessage }) => {
-      beforeEach(() => {
-        createComponent({ canPushCode });
-      });
-
-      it('displays the modal', () => {
-        expect(findModal().exists()).toBe(true);
-      });
-
-      it('includes the upload dropzone', () => {
-        expect(findUploadDropzone().exists()).toBe(true);
-      });
-
-      it('includes the commit message', () => {
-        expect(findCommitMessage().exists()).toBe(true);
-      });
-
-      it('displays the disabled upload button', () => {
-        expect(actionButtonDisabledState()).toBe(true);
-      });
-
-      it('displays the enabled cancel button', () => {
-        expect(cancelButtonDisabledState()).toBe(false);
-      });
-
-      it('does not display the MR toggle', () => {
-        expect(findMrToggle().exists()).toBe(false);
-      });
-
-      it(`${
-        displayForkedBranchMessage ? 'displays' : 'does not display'
-      } the forked branch message`, () => {
-        expect(findAlert().exists()).toBe(displayForkedBranchMessage);
-      });
-
-      it(`${displayBranchName ? 'displays' : 'does not display'} the branch name`, () => {
-        expect(findBranchName().exists()).toBe(displayBranchName);
-      });
-
-      if (canPushCode) {
-        describe('when changing the branch name', () => {
-          it('displays the MR toggle', async () => {
-            wrapper.setData({ target: 'Not master' });
-
-            await wrapper.vm.$nextTick();
-
-            expect(findMrToggle().exists()).toBe(true);
-          });
-        });
-      }
-
-      describe('completed form', () => {
-        beforeEach(() => {
-          wrapper.setData({
-            file: { type: 'jpg' },
-            filePreviewURL: 'http://file.com?format=jpg',
-          });
-        });
-
-        it('enables the upload button when the form is completed', () => {
-          expect(actionButtonDisabledState()).toBe(false);
-        });
-
-        describe('form submission', () => {
-          beforeEach(() => {
-            mock = new MockAdapter(axios);
-
-            findModal().vm.$emit('primary', mockEvent);
-          });
-
-          afterEach(() => {
-            mock.restore();
-          });
-
-          it('disables the upload button', () => {
-            expect(actionButtonDisabledState()).toBe(true);
-          });
-
-          it('sets the upload button to loading', () => {
-            expect(actionButtonLoadingState()).toBe(true);
-          });
-        });
-
-        describe('successful response', () => {
-          beforeEach(async () => {
-            mock = new MockAdapter(axios);
-            mock.onPost(initialProps.path).reply(httpStatusCodes.OK, { filePath: 'blah' });
-
-            findModal().vm.$emit('primary', mockEvent);
-
-            await waitForPromises();
-          });
-
-          it('redirects to the uploaded file', () => {
-            expect(visitUrl).toHaveBeenCalled();
-          });
-
-          afterEach(() => {
-            mock.restore();
-          });
-        });
-
-        describe('error response', () => {
-          beforeEach(async () => {
-            mock = new MockAdapter(axios);
-            mock.onPost(initialProps.path).timeout();
-
-            findModal().vm.$emit('primary', mockEvent);
-
-            await waitForPromises();
-          });
-
-          it('creates a flash error', () => {
-            expect(createFlash).toHaveBeenCalledWith('Error uploading file. Please try again.');
-          });
-
-          afterEach(() => {
-            mock.restore();
-          });
-        });
-      });
-    },
-  );
-});

spec/support/shared_examples/features/project_upload_files_shared_examples.rb

@@ -10,7 +10,7 @@ RSpec.shared_examples 'it uploads and commit a new text file' do
       wait_for_requests
     end
 
-    attach_file('upload_file', File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'), make_visible: true)
+    drop_in_dropzone(File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'))
 
     page.within('#modal-upload-blob') do
       fill_in(:commit_message, with: 'New commit message')
@@ -42,7 +42,7 @@ RSpec.shared_examples 'it uploads and commit a new image file' do
       wait_for_requests
     end
 
-    attach_file('upload_file', File.join(Rails.root, 'spec', 'fixtures', 'logo_sample.svg'), make_visible: true)
+    drop_in_dropzone(File.join(Rails.root, 'spec', 'fixtures', 'logo_sample.svg'))
 
     page.within('#modal-upload-blob') do
       fill_in(:commit_message, with: 'New commit message')
@@ -70,11 +70,9 @@ RSpec.shared_examples 'it uploads and commit a new file to a forked project' do
 
     expect(page).to have_content(fork_message)
 
-    wait_for_all_requests
-
     find('.add-to-tree').click
     click_link('Upload file')
-    attach_file('upload_file', File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'), make_visible: true)
+    drop_in_dropzone(File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'))
 
     page.within('#modal-upload-blob') do
       fill_in(:commit_message, with: 'New commit message')
@@ -96,30 +94,3 @@ RSpec.shared_examples 'it uploads and commit a new file to a forked project' do
     expect(page).to have_content('Sed ut perspiciatis unde omnis')
   end
 end
-
-RSpec.shared_examples 'it uploads a file to a sub-directory' do
-  it 'uploads a file to a sub-directory', :js do
-    click_link 'files'
-
-    page.within('.repo-breadcrumb') do
-      expect(page).to have_content('files')
-    end
-
-    find('.add-to-tree').click
-    click_link('Upload file')
-    attach_file('upload_file', File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'), make_visible: true)
-
-    page.within('#modal-upload-blob') do
-      fill_in(:commit_message, with: 'New commit message')
-    end
-
-    click_button('Upload file')
-
-    expect(page).to have_content('New commit message')
-
-    page.within('.repo-breadcrumb') do
-      expect(page).to have_content('files')
-      expect(page).to have_content('doc_sample.txt')
-    end
-  end
-end