Mocked File upload modal - UI implementation - Part 1 Base State

Part Issue
-> Part 1 - Base State #280592 (closed)
Part 2 - File Attachment States #326361 (closed)
Part 3 - File Uploaded State #326362 (closed)

Implementation plan

  • Create upload modal vue component
  • Add base state UI markup and styling
  • Add unit tests

Why are we doing this work

We are adding a download modal to allow for uploading of corpuses

https://www.figma.com/proto/eSIeuIPKFwEDs4X9ky2O5E/Corpus-Registry?node-id=775%3A8&scaling=scale-down

Version 1: (Native browser file upload)

Backup-upload-UI

Version 2: (Drag and drop to be done in #281291)

Screen_Shot_2020-12-17_at_6.24.09_PM

Relevant links

Non-functional requirements

  • Documentation:

  • Feature flag:

  • Performance:

  • Testing:

  • Make sure to mark as a query param as internal (New functionality added in !50040 (closed))

Old Implementation plan

Endpoint to Post to:

Publish a new package (or version) https://docs.gitlab.com/ee/user/packages/generic_packages/#publish-a-package-file

It depends if we try to implement the UI portion in gitlab-ui, and then consume it in the gitlab codebase. I think that will add significant development/approval time since it needs to be robust enough to work in different contexts.

I hate to add additional tech debt, but since we are trying to move fast on corpus management, I suggest for version 1 we try to make it as generic as possible in the EE codebase with a Vuex module, and a presentational component.

  • Create VueX module to contain actions, getters, mutations, mutation types, store for the download modal component
  • Create presentational component for the modal file upload area/content.
  • Actions, mutations for uploading the artifact.
  • Actions, mutations for displaying validation errors.
  • Post to endpoint with the internal query param to mark 'package' as internal only.
  • Link "Add new corpus" button to trigger corpus upload modal

The following page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.

Edited by 🤖 GitLab Bot 🤖