diff options
Diffstat (limited to 'app/assets/javascripts/design_management/pages/index.vue')
| -rw-r--r-- | app/assets/javascripts/design_management/pages/index.vue | 91 |
1 files changed, 69 insertions, 22 deletions
diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue index 6e71dca41e9..ea404692840 100644 --- a/app/assets/javascripts/design_management/pages/index.vue +++ b/app/assets/javascripts/design_management/pages/index.vue @@ -1,25 +1,26 @@ <script> -import { GlLoadingIcon, GlButton, GlAlert } from '@gitlab/ui'; +import { GlLoadingIcon, GlButton, GlAlert, GlLink, GlSprintf } from '@gitlab/ui'; import VueDraggable from 'vuedraggable'; -import { deprecatedCreateFlash as createFlash } from '~/flash'; -import { s__, sprintf } from '~/locale'; +import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql'; +import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql'; +import createFlash, { FLASH_TYPES } from '~/flash'; +import { __, s__, sprintf } from '~/locale'; import { getFilename } from '~/lib/utils/file_upload'; import UploadButton from '../components/upload/button.vue'; import DeleteButton from '../components/delete_button.vue'; import Design from '../components/list/item.vue'; import DesignDestroyer from '../components/design_destroyer.vue'; import DesignVersionDropdown from '../components/upload/design_version_dropdown.vue'; -import DesignDropzone from '../components/upload/design_dropzone.vue'; +import DesignDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue'; import uploadDesignMutation from '../graphql/mutations/upload_design.mutation.graphql'; import moveDesignMutation from '../graphql/mutations/move_design.mutation.graphql'; -import permissionsQuery from '../graphql/queries/design_permissions.query.graphql'; -import getDesignListQuery from '../graphql/queries/get_design_list.query.graphql'; import allDesignsMixin from '../mixins/all_designs'; import { UPLOAD_DESIGN_ERROR, EXISTING_DESIGN_DROP_MANY_FILES_MESSAGE, EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE, MOVE_DESIGN_ERROR, + UPLOAD_DESIGN_INVALID_FILETYPE_ERROR, designUploadSkippedWarning, designDeletionError, } from '../utils/error_messages'; @@ -34,6 +35,7 @@ import { } from '../utils/design_management_utils'; import { trackDesignCreate, trackDesignUpdate } from '../utils/tracking'; import { DESIGNS_ROUTE_NAME } from '../router/constants'; +import { VALID_DESIGN_FILE_MIMETYPE } from '../constants'; const MAXIMUM_FILE_UPLOAD_LIMIT = 10; @@ -42,6 +44,8 @@ export default { GlLoadingIcon, GlAlert, GlButton, + GlSprintf, + GlLink, UploadButton, Design, DesignDestroyer, @@ -50,6 +54,11 @@ export default { DesignDropzone, VueDraggable, }, + dropzoneProps: { + dropToStartMessage: __('Drop your designs to start your upload.'), + isFileValid: isValidDesignFile, + validFileMimetypes: [VALID_DESIGN_FILE_MIMETYPE.mimetype], + }, mixins: [allDesignsMixin], apollo: { permissions: { @@ -139,8 +148,8 @@ export default { if (!this.canCreateDesign) return false; if (files.length > MAXIMUM_FILE_UPLOAD_LIMIT) { - createFlash( - sprintf( + createFlash({ + message: sprintf( s__( 'DesignManagement|The maximum number of designs allowed to be uploaded is %{upload_limit}. Please try again.', ), @@ -148,7 +157,7 @@ export default { upload_limit: MAXIMUM_FILE_UPLOAD_LIMIT, }, ), - ); + }); return false; } @@ -191,7 +200,7 @@ export default { const skippedFiles = res?.data?.designManagementUpload?.skippedDesigns || []; const skippedWarningMessage = designUploadSkippedWarning(this.filesToBeSaved, skippedFiles); if (skippedWarningMessage) { - createFlash(skippedWarningMessage, 'warning'); + createFlash({ message: skippedWarningMessage, types: FLASH_TYPES.WARNING }); } // if this upload resulted in a new version being created, redirect user to the latest version @@ -214,7 +223,7 @@ export default { }, onUploadDesignError() { this.resetFilesToBeSaved(); - createFlash(UPLOAD_DESIGN_ERROR); + createFlash({ message: UPLOAD_DESIGN_ERROR }); }, changeSelectedDesigns(filename) { if (this.isDesignSelected(filename)) { @@ -245,18 +254,21 @@ export default { }, onDesignDeleteError() { const errorMessage = designDeletionError({ singular: this.selectedDesigns.length === 1 }); - createFlash(errorMessage); + createFlash({ message: errorMessage }); + }, + onDesignDropzoneError() { + createFlash({ message: UPLOAD_DESIGN_INVALID_FILETYPE_ERROR }); }, onExistingDesignDropzoneChange(files, existingDesignFilename) { const filesArr = Array.from(files); if (filesArr.length > 1) { - createFlash(EXISTING_DESIGN_DROP_MANY_FILES_MESSAGE); + createFlash({ message: EXISTING_DESIGN_DROP_MANY_FILES_MESSAGE }); return; } if (!filesArr.some(({ name }) => existingDesignFilename === name)) { - createFlash(EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE); + createFlash({ message: EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE }); return; } @@ -307,7 +319,7 @@ export default { optimisticResponse: moveDesignOptimisticResponse(this.reorderedDesigns), }) .catch(() => { - createFlash(MOVE_DESIGN_ERROR); + createFlash({ message: MOVE_DESIGN_ERROR }); }) .finally(() => { this.isReorderingInProgress = false; @@ -325,6 +337,9 @@ export default { animation: 200, ghostClass: 'gl-visibility-hidden', }, + i18n: { + dropzoneDescriptionText: __('Drop or %{linkStart}upload%{linkEnd} designs to attach'), + }, }; </script> @@ -335,7 +350,11 @@ export default { @mouseenter="toggleOnPasteListener" @mouseleave="toggleOffPasteListener" > - <header v-if="showToolbar" class="row-content-block gl-border-t-0 gl-p-3 gl-display-flex"> + <header + v-if="showToolbar" + class="row-content-block gl-border-t-0 gl-p-3 gl-display-flex" + data-testid="design-toolbar-wrapper" + > <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full"> <div> <span class="gl-font-weight-bold gl-mr-3">{{ s__('DesignManagement|Designs') }}</span> @@ -371,7 +390,12 @@ export default { {{ s__('DesignManagement|Archive selected') }} </delete-button> </design-destroyer> - <upload-button v-if="canCreateDesign" :is-saving="isSaving" @upload="onUploadDesign" /> + <upload-button + v-if="canCreateDesign" + :is-saving="isSaving" + data-testid="design-upload-button" + @upload="onUploadDesign" + /> </div> </div> </header> @@ -414,15 +438,26 @@ export default { class="col-md-6 col-lg-3 gl-mb-3 gl-bg-transparent gl-shadow-none js-design-tile" > <design-dropzone - :has-designs="hasDesigns" - :is-dragging-design="isDraggingDesign" + :display-as-card="hasDesigns" + :enable-drag-behavior="isDraggingDesign" + v-bind="$options.dropzoneProps" @change="onExistingDesignDropzoneChange($event, design.filename)" + @error="onDesignDropzoneError" > <design v-bind="design" :is-uploading="isDesignToBeSaved(design.filename)" class="gl-bg-white" /> + <template #upload-text="{ openFileUpload }"> + <gl-sprintf :message="$options.i18n.dropzoneDescriptionText"> + <template #link="{ content }"> + <gl-link @click.stop="openFileUpload"> + {{ content }} + </gl-link> + </template> + </gl-sprintf> + </template> </design-dropzone> <input @@ -438,12 +473,24 @@ export default { <template #header> <li :class="designDropzoneWrapperClass" data-testid="design-dropzone-wrapper"> <design-dropzone - :is-dragging-design="isDraggingDesign" + :enable-drag-behavior="isDraggingDesign" :class="{ 'design-list-item design-list-item-new': !isDesignListEmpty }" - :has-designs="hasDesigns" + :display-as-card="hasDesigns" + v-bind="$options.dropzoneProps" data-qa-selector="design_dropzone_content" @change="onUploadDesign" - /> + @error="onDesignDropzoneError" + > + <template #upload-text="{ openFileUpload }"> + <gl-sprintf :message="$options.i18n.dropzoneDescriptionText"> + <template #link="{ content }"> + <gl-link @click.stop="openFileUpload"> + {{ content }} + </gl-link> + </template> + </gl-sprintf> + </template> + </design-dropzone> </li> </template> </vue-draggable> |