Merge branch 'add-upload-file-component' into 'master'

Add UploadButton component for project details

See merge request gitlab-org/gitlab!56071

app/assets/javascripts/projects/details/upload_button.vue

+<script>
+import { GlButton, GlModalDirective } from '@gitlab/ui';
+import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
+
+const UPLOAD_BLOB_MODAL_ID = 'details-modal-upload-blob';
+
+export default {
+  components: {
+    GlButton,
+    UploadBlobModal,
+  },
+  directives: {
+    GlModal: GlModalDirective,
+  },
+  inject: {
+    targetBranch: {
+      default: '',
+    },
+    origionalBranch: {
+      default: '',
+    },
+    canPushCode: {
+      default: false,
+    },
+    path: {
+      default: '',
+    },
+    projectPath: {
+      default: '',
+    },
+  },
+  uploadBlobModalId: UPLOAD_BLOB_MODAL_ID,
+};
+</script>
+<template>
+  <span>
+    <gl-button v-gl-modal="$options.uploadBlobModalId" icon="upload">{{
+      __('Upload File')
+    }}</gl-button>
+    <upload-blob-modal
+      :modal-id="$options.uploadBlobModalId"
+      :commit-message="__('Upload New File')"
+      :target-branch="targetBranch"
+      :origional-branch="origionalBranch"
+      :can-push-code="canPushCode"
+      :path="path"
+    />
+  </span>
+</template>

locale/gitlab.pot

@@ -32227,6 +32227,9 @@ msgstr ""
 msgid "Upload CSV file"
 msgstr ""
 
+msgid "Upload File"
+msgstr ""
+
 msgid "Upload License"
 msgstr ""
 

spec/frontend/projects/details/upload_button_spec.js

+import { GlButton } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import UploadButton from '~/projects/details/upload_button.vue';
+import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
+
+const MODAL_ID = 'details-modal-upload-blob';
+
+describe('UploadButton', () => {
+  let wrapper;
+  let glModalDirective;
+
+  const createComponent = () => {
+    glModalDirective = jest.fn();
+
+    return shallowMount(UploadButton, {
+      directives: {
+        glModal: {
+          bind(_, { value }) {
+            glModalDirective(value);
+          },
+        },
+      },
+    });
+  };
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('displays an upload button', () => {
+    expect(wrapper.find(GlButton).exists()).toBe(true);
+  });
+
+  it('contains a modal', () => {
+    const modal = wrapper.find(UploadBlobModal);
+
+    expect(modal.exists()).toBe(true);
+    expect(modal.props('modalId')).toBe(MODAL_ID);
+  });
+
+  describe('when clickinig the upload file button', () => {
+    beforeEach(() => {
+      wrapper.find(GlButton).vm.$emit('click');
+    });
+
+    it('opens the modal', () => {
+      expect(glModalDirective).toHaveBeenCalledWith(MODAL_ID);
+    });
+  });
+});