Skip to content

G
gitlab-ce
Commit 9f0b64d3 authored by Natalia Tepluhina's avatar Natalia Tepluhina
Browse files
Options

Merge branch... 

Merge branch '223194-refactor-design-management-application-to-match-new-visual-styles' into 'master'

Refactor Design management application to match new visual styles

Closes #223194

See merge request gitlab-org/gitlab!35746
parents 9fdd6aa4 dcdbe435
Show whitespace changes
Inline Side-by-side
Showing with 447 additions and 223 deletions
app/assets/javascripts/design_management_new/components/delete_button.vue
View file @ 9f0b64d3
<script>
import { GlDeprecatedButton, GlModal, GlModalDirective } from '@gitlab/ui';
import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
import { uniqueId } from 'lodash';
import { s__ } from '~/locale';
export default {
name: 'DeleteButton',
components: {
GlDeprecatedButton,
GlButton,
GlModal,
},
directives: {
......@@ -25,7 +26,12 @@ export default {
buttonVariant: {
type: String,
required: false,
default: '',
default: 'info',
},
buttonSize: {
type: String,
required: false,
default: 'medium',
},
hasSelectedDesigns: {
type: Boolean,
......@@ -38,27 +44,38 @@ export default {
modalId: uniqueId('design-deletion-confirmation-'),
};
},
modal: {
title: s__('DesignManagement|Delete designs confirmation'),
actionPrimary: {
text: s__('Delete'),
attributes: { variant: 'danger' },
},
actionCancel: {
text: s__('Cancel'),
},
},
};
</script>
<template>
<div>
<div class="gl-display-flex gl-align-items-center gl-h-full">
<gl-modal
:modal-id="modalId"
:title="s__('DesignManagement|Delete designs confirmation')"
:ok-title="s__('DesignManagement|Delete')"
ok-variant="danger"
:title="$options.modal.title"
:action-primary="$options.modal.actionPrimary"
:action-cancel="$options.modal.actionCancel"
@ok="$emit('deleteSelectedDesigns')"
>
<p>{{ s__('DesignManagement|Are you sure you want to delete the selected designs?') }}</p>
</gl-modal>
<gl-deprecated-button
<gl-button
v-gl-modal-directive="modalId"
:variant="buttonVariant"
:disabled="isDeleting || !hasSelectedDesigns"
:size="buttonSize"
:class="buttonClass"
:disabled="isDeleting || !hasSelectedDesigns"
>
<slot></slot>
</gl-deprecated-button>
</gl-button>
</div>
</template>
app/assets/javascripts/design_management_new/components/list/item.vue
View file @ 9f0b64d3
......@@ -127,7 +127,7 @@ export default {
params: { id: filename },
query: $route.query,
}"
class="card cursor-pointer text-plain js-design-list-item design-list-item"
class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
>
<div class="card-body p-0 d-flex-center overflow-hidden position-relative">
<div v-if="icon.name" class="design-event position-absolute">
......
app/assets/javascripts/design_management_new/components/upload/button.vue
View file @ 9f0b64d3
<script>
import { GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
import { GlButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
import { VALID_DESIGN_FILE_MIMETYPE } from '../../constants';
export default {
components: {
GlDeprecatedButton,
GlButton,
GlLoadingIcon,
},
directives: {
......@@ -30,7 +30,7 @@ export default {
<template>
<div>
<gl-deprecated-button
<gl-button
v-gl-tooltip.hover
:title="
s__(
......@@ -39,11 +39,12 @@ export default {
"
:disabled="isSaving"
variant="success"
size="small"
@click="openFileUpload"
>
{{ s__('DesignManagement|Upload designs') }}
<gl-loading-icon v-if="isSaving" inline class="ml-1" />
</gl-deprecated-button>
</gl-button>
<input
ref="fileUpload"
......
app/assets/javascripts/design_management_new/components/upload/design_dropzone.vue
View file @ 9f0b64d3
......@@ -12,6 +12,12 @@ export default {
GlLink,
GlSprintf,
},
props: {
hasDesigns: {
type: Boolean,
required: true,
},
},
data() {
return {
dragCounter: 0,
......@@ -76,28 +82,29 @@ export default {
>
<slot>
<button
class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
@click="openFileUpload"
>
<div class="d-flex-center flex-column text-center">
<gl-icon name="doc-new" :size="48" class="mb-4" />
<p>
<div
:class="{ 'gl-flex-direction-column': hasDesigns }"
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center"
data-testid="dropzone-area"
>
<gl-icon name="upload" :size="24" :class="hasDesigns ? 'gl-mb-2' : 'gl-mr-4'" />
<gl-sprintf
:message="
__(
'%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}.',
'%{contentStart}Drop files to attach, or %{contentEnd}%{linkStart}browse%{linkEnd}',
)
"
>
<template #lineOne="{ content }"
><span class="d-block">{{ content }}</span>
<template #content="{ content }">
<span class="gl-font-weight-bold">{{ content }}&nbsp;</span>
</template>
<template #link="{ content }">
<gl-link class="h-100 w-100" @click.stop="openFileUpload">{{ content }}</gl-link>
<gl-link @click.stop="openFileUpload">{{ content }}</gl-link>
</template>
</gl-sprintf>
</p>
</div>
</button>
......@@ -117,7 +124,7 @@ export default {
class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white"
>
<div v-show="!isDragDataValid" class="mw-50 text-center">
<h3>{{ __('Oh no!') }}</h3>
<h3 :class="{ 'gl-font-base gl-display-inline': !hasDesigns }">{{ __('Oh no!') }}</h3>
<span>{{
__(
'You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico.',
......@@ -125,7 +132,7 @@ export default {
}}</span>
</div>
<div v-show="isDragDataValid" class="mw-50 text-center">
<h3>{{ __('Incoming!') }}</h3>
<h3 :class="{ 'gl-font-base gl-display-inline': !hasDesigns }">{{ __('Incoming!') }}</h3>
<span>{{ __('Drop your designs to start your upload.') }}</span>
</div>
</div>
......
app/assets/javascripts/design_management_new/components/upload/design_version_dropdown.vue
View file @ 9f0b64d3
<script>
import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { GlNewDropdown, GlNewDropdownItem } from '@gitlab/ui';
import { __, sprintf } from '~/locale';
import allVersionsMixin from '../../mixins/all_versions';
import { findVersionId } from '../../utils/design_management_utils';
export default {
components: {
GlDropdown,
GlDropdownItem,
GlNewDropdown,
GlNewDropdownItem,
},
mixins: [allVersionsMixin],
computed: {
......@@ -50,8 +50,8 @@ export default {
</script>
<template>
<gl-dropdown :text="dropdownText" variant="link" class="design-version-dropdown">
<gl-dropdown-item v-for="(version, index) in allVersions" :key="version.node.id">
<gl-new-dropdown :text="dropdownText" size="small" class="design-version-dropdown">
<gl-new-dropdown-item v-for="(version, index) in allVersions" :key="version.node.id">
<router-link
class="d-flex js-version-link"
:to="{ path: $route.path, query: { version: findVersionId(version.node.id) } }"
......@@ -71,6 +71,6 @@ export default {
class="fa fa-check pull-right"
></i>
</router-link>
</gl-dropdown-item>
</gl-dropdown>
</gl-new-dropdown-item>
</gl-new-dropdown>
</template>
app/assets/javascripts/design_management_new/pages/index.vue
View file @ 9f0b64d3
<script>
import { GlLoadingIcon, GlDeprecatedButton, GlAlert } from '@gitlab/ui';
import { GlLoadingIcon, GlButton, GlAlert } from '@gitlab/ui';
import createFlash from '~/flash';
import { s__, sprintf } from '~/locale';
import UploadButton from '../components/upload/button.vue';
......@@ -33,7 +33,7 @@ export default {
components: {
GlLoadingIcon,
GlAlert,
GlDeprecatedButton,
GlButton,
UploadButton,
Design,
DesignDestroyer,
......@@ -96,6 +96,14 @@ export default {
? s__('DesignManagement|Deselect all')
: s__('DesignManagement|Select all');
},
isDesignListEmpty() {
return !this.isSaving && !this.hasDesigns;
},
designDropzoneWrapperClass() {
return this.isDesignListEmpty
? 'col-12'
: 'gl-flex-direction-column col-md-6 col-lg-3 gl-mb-3';
},
},
mounted() {
this.toggleOnPasteListener(this.$route.name);
......@@ -259,18 +267,22 @@ export default {
</script>
<template>
<div data-testid="designs-root">
<div data-testid="designs-root" class="gl-mt-2">
<header v-if="showToolbar" class="row-content-block border-top-0 p-2 d-flex">
<div class="d-flex justify-content-between align-items-center w-100">
<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>
<design-version-dropdown />
<div :class="['qa-selector-toolbar', { 'd-flex': hasDesigns, 'd-none': !hasDesigns }]">
<gl-deprecated-button
</div>
<div v-show="hasDesigns" class="qa-selector-toolbar gl-display-flex">
<gl-button
v-if="isLatestVersion"
variant="link"
class="mr-2 js-select-all"
size="small"
class="gl-mr-2 js-select-all"
@click="toggleDesignsSelection"
>{{ selectAllButtonText }}</gl-deprecated-button
>
>{{ selectAllButtonText }}
</gl-button>
<design-destroyer
#default="{ mutate, loading }"
:filenames="selectedDesigns"
......@@ -280,7 +292,9 @@ export default {
<delete-button
v-if="isLatestVersion"
:is-deleting="loading"
button-class="btn-danger btn-inverted mr-2"
button-variant="danger"
button-class="gl-mr-4"
button-size="small"
:has-selected-designs="hasSelectedDesigns"
@deleteSelectedDesigns="mutate()"
>
......@@ -298,11 +312,22 @@ export default {
{{ __('An error occurred while loading designs. Please try again.') }}
</gl-alert>
<ol v-else class="list-unstyled row">
<li class="col-md-6 col-lg-4 mb-3">
<design-dropzone class="design-list-item" @change="onUploadDesign" />
<span
v-if="isDesignListEmpty && !allVersions.length"
class="gl-font-weight-bold gl-font-weight-bold gl-ml-5 gl-mb-4"
>{{ s__('DesignManagement|Designs') }}</span
>
<li :class="designDropzoneWrapperClass" data-testid="design-dropzone-wrapper">
<design-dropzone
:class="{ 'design-list-item design-list-item-new': !isDesignListEmpty }"
:has-designs="hasDesigns"
@change="onUploadDesign"
/>
</li>
<li v-for="design in designs" :key="design.id" class="col-md-6 col-lg-4 mb-3">
<design-dropzone @change="onExistingDesignDropzoneChange($event, design.filename)"
<li v-for="design in designs" :key="design.id" class="col-md-6 col-lg-3 gl-mb-3">
<design-dropzone
:has-designs="hasDesigns"
@change="onExistingDesignDropzoneChange($event, design.filename)"
><design v-bind="design" :is-uploading="isDesignToBeSaved(design.filename)"
/></design-dropzone>
......
app/assets/stylesheets/components/design_management/design_list_item.scss
View file @ 9f0b64d3
......@@ -17,3 +17,8 @@
height: 230px;
}
}
// This is temporary class to be removed after feature flag removal: https://gitlab.com/gitlab-org/gitlab/-/issues/223197
.design-list-item-new {
height: 210px;
}
app/views/projects/issues/_design_management.html.haml
View file @ 9f0b64d3
......@@ -4,6 +4,15 @@
- else
.js-design-management{ data: { project_path: @project.full_path, issue_iid: @issue.iid, issue_path: project_issue_path(@project, @issue) } }
- else
- if Feature.enabled?(:design_management_moved, @project)
.row.empty-state.design-dropzone-border.gl-mt-5
.text-content.center.gl-font-weight-bold
- requirements_link_url = help_page_path('user/project/issues/design_management', anchor: 'requirements')
- requirements_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: requirements_link_url }
- support_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: support_url }
- link_end = '</a>'.html_safe
= s_("DesignManagement|To enable design management, you'll need to %{requirements_link_start}meet the requirements%{requirements_link_end}. If you need help, reach out to our %{support_link_start}support team%{support_link_end} for assistance.").html_safe % { requirements_link_start: requirements_link_start, requirements_link_end: link_end, support_link_start: support_link_start, support_link_end: link_end }
- else
.mt-4
.row.empty-state
.col-12
......
locale/gitlab.pot
View file @ 9f0b64d3
......@@ -299,6 +299,9 @@ msgstr ""
msgid "%{containerScanningLinkStart}Container Scanning%{containerScanningLinkEnd} and/or %{dependencyScanningLinkStart}Dependency Scanning%{dependencyScanningLinkEnd} must be enabled. %{securityBotLinkStart}GitLab-Security-Bot%{securityBotLinkEnd} will be the author of the auto-created merge request. %{moreInfoLinkStart}More information%{moreInfoLinkEnd}."
msgstr ""
msgid "%{contentStart}Drop files to attach, or %{contentEnd}%{linkStart}browse%{linkEnd}"
msgstr ""
msgid "%{cores} cores"
msgstr ""
......@@ -7958,6 +7961,9 @@ msgstr ""
msgid "DesignManagement|Deselect all"
msgstr ""
msgid "DesignManagement|Designs"
msgstr ""
msgid "DesignManagement|Discard comment"
msgstr ""
......
spec/frontend/design_management_new/components/delete_button_spec.js
View file @ 9f0b64d3
import { shallowMount } from '@vue/test-utils';
import { GlDeprecatedButton, GlModal, GlModalDirective } from '@gitlab/ui';
import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
import BatchDeleteButton from '~/design_management_new/components/delete_button.vue';
describe('Batch delete button component', () => {
let wrapper;
const findButton = () => wrapper.find(GlDeprecatedButton);
const findButton = () => wrapper.find(GlButton);
const findModal = () => wrapper.find(GlModal);
function createComponent(isDeleting = false) {
......
spec/frontend/design_management_new/components/list/__snapshots__/item_spec.js.snap
View file @ 9f0b64d3
......@@ -10,7 +10,7 @@ exports[`Design management list item component when item appears in view after i
exports[`Design management list item component with no notes renders item with correct status icon for creation event 1`] = `
<router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item"
class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
to="[object Object]"
>
<div
......@@ -78,7 +78,7 @@ exports[`Design management list item component with no notes renders item with c
exports[`Design management list item component with no notes renders item with correct status icon for deletion event 1`] = `
<router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item"
class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
to="[object Object]"
>
<div
......@@ -146,7 +146,7 @@ exports[`Design management list item component with no notes renders item with c
exports[`Design management list item component with no notes renders item with correct status icon for modification event 1`] = `
<router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item"
class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
to="[object Object]"
>
<div
......@@ -214,7 +214,7 @@ exports[`Design management list item component with no notes renders item with c
exports[`Design management list item component with no notes renders item with no status icon for none event 1`] = `
<router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item"
class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
to="[object Object]"
>
<div
......@@ -269,7 +269,7 @@ exports[`Design management list item component with no notes renders item with n
exports[`Design management list item component with no notes renders loading spinner when isUploading is true 1`] = `
<router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item"
class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
to="[object Object]"
>
<div
......@@ -329,7 +329,7 @@ exports[`Design management list item component with no notes renders loading spi
exports[`Design management list item component with notes renders item with multiple comments 1`] = `
<router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item"
class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
to="[object Object]"
>
<div
......@@ -401,7 +401,7 @@ exports[`Design management list item component with notes renders item with mult
exports[`Design management list item component with notes renders item with single comment 1`] = `
<router-link-stub
class="card cursor-pointer text-plain js-design-list-item design-list-item"
class="card cursor-pointer text-plain js-design-list-item design-list-item design-list-item-new"
to="[object Object]"
>
<div
......
spec/frontend/design_management_new/components/toolbar/__snapshots__/index_spec.js.snap
View file @ 9f0b64d3
......@@ -50,6 +50,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
<delete-button-stub
buttonclass=""
buttonsize="medium"
buttonvariant="danger"
hasselecteddesigns="true"
>
......
spec/frontend/design_management_new/components/upload/__snapshots__/button_spec.js.snap
View file @ 9f0b64d3
......@@ -4,8 +4,10 @@ exports[`Design management upload button component renders inverted upload desig
<div
isinverted="true"
>
<gl-deprecated-button-stub
size="md"
<gl-button-stub
category="tertiary"
icon=""
size="small"
title="Adding a design with the same filename replaces the file in a new version."
variant="success"
>
......@@ -13,7 +15,7 @@ exports[`Design management upload button component renders inverted upload desig
Upload designs
<!---->
</gl-deprecated-button-stub>
</gl-button-stub>
<input
accept="image/*"
......@@ -27,9 +29,11 @@ exports[`Design management upload button component renders inverted upload desig
exports[`Design management upload button component renders loading icon 1`] = `
<div>
<gl-deprecated-button-stub
<gl-button-stub
category="tertiary"
disabled="true"
size="md"
icon=""
size="small"
title="Adding a design with the same filename replaces the file in a new version."
variant="success"
>
......@@ -43,7 +47,7 @@ exports[`Design management upload button component renders loading icon 1`] = `
label="Loading"
size="sm"
/>
</gl-deprecated-button-stub>
</gl-button-stub>
<input
accept="image/*"
......@@ -57,8 +61,10 @@ exports[`Design management upload button component renders loading icon 1`] = `
exports[`Design management upload button component renders upload design button 1`] = `
<div>
<gl-deprecated-button-stub
size="md"
<gl-button-stub
category="tertiary"
icon=""
size="small"
title="Adding a design with the same filename replaces the file in a new version."
variant="success"
>
......@@ -66,7 +72,7 @@ exports[`Design management upload button component renders upload design button
Upload designs
<!---->
</gl-deprecated-button-stub>
</gl-button-stub>
<input
accept="image/*"
......
spec/frontend/design_management_new/components/upload/__snapshots__/design_dropzone_spec.js.snap
View file @ 9f0b64d3
......@@ -5,22 +5,21 @@ exports[`Design management dropzone component when dragging renders correct temp
class="w-100 position-relative"
>
<button
class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
>
<div
class="d-flex-center flex-column text-center"
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
data-testid="dropzone-area"
>
<gl-icon-stub
class="mb-4"
name="doc-new"
size="48"
class="gl-mb-2"
name="upload"
size="24"
/>
<p>
<gl-sprintf-stub
message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
message="%{contentStart}Drop files to attach, or %{contentEnd}%{linkStart}browse%{linkEnd}"
/>
</p>
</div>
</button>
......@@ -43,7 +42,9 @@ exports[`Design management dropzone component when dragging renders correct temp
class="mw-50 text-center"
style="display: none;"
>
<h3>
<h3
class=""
>
Oh no!
</h3>
......@@ -56,7 +57,9 @@ exports[`Design management dropzone component when dragging renders correct temp
class="mw-50 text-center"
style=""
>
<h3>
<h3
class=""
>
Incoming!
</h3>
......@@ -74,22 +77,21 @@ exports[`Design management dropzone component when dragging renders correct temp
class="w-100 position-relative"
>
<button
class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
>
<div
class="d-flex-center flex-column text-center"
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
data-testid="dropzone-area"
>
<gl-icon-stub
class="mb-4"
name="doc-new"
size="48"
class="gl-mb-2"
name="upload"
size="24"
/>
<p>
<gl-sprintf-stub
message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
message="%{contentStart}Drop files to attach, or %{contentEnd}%{linkStart}browse%{linkEnd}"
/>
</p>
</div>
</button>
......@@ -112,7 +114,9 @@ exports[`Design management dropzone component when dragging renders correct temp
class="mw-50 text-center"
style="display: none;"
>
<h3>
<h3
class=""
>
Oh no!
</h3>
......@@ -125,7 +129,9 @@ exports[`Design management dropzone component when dragging renders correct temp
class="mw-50 text-center"
style=""
>
<h3>
<h3
class=""
>
Incoming!
</h3>
......@@ -143,22 +149,21 @@ exports[`Design management dropzone component when dragging renders correct temp
class="w-100 position-relative"
>
<button
class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
>
<div
class="d-flex-center flex-column text-center"
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
data-testid="dropzone-area"
>
<gl-icon-stub
class="mb-4"
name="doc-new"
size="48"
class="gl-mb-2"
name="upload"
size="24"
/>
<p>
<gl-sprintf-stub
message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
message="%{contentStart}Drop files to attach, or %{contentEnd}%{linkStart}browse%{linkEnd}"
/>
</p>
</div>
</button>
......@@ -180,7 +185,9 @@ exports[`Design management dropzone component when dragging renders correct temp
<div
class="mw-50 text-center"
>
<h3>
<h3
class=""
>
Oh no!
</h3>
......@@ -193,7 +200,9 @@ exports[`Design management dropzone component when dragging renders correct temp
class="mw-50 text-center"
style="display: none;"
>
<h3>
<h3
class=""
>
Incoming!
</h3>
......@@ -211,22 +220,21 @@ exports[`Design management dropzone component when dragging renders correct temp
class="w-100 position-relative"
>
<button
class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
>
<div
class="d-flex-center flex-column text-center"
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
data-testid="dropzone-area"
>
<gl-icon-stub
class="mb-4"
name="doc-new"
size="48"
class="gl-mb-2"
name="upload"
size="24"
/>
<p>
<gl-sprintf-stub
message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
message="%{contentStart}Drop files to attach, or %{contentEnd}%{linkStart}browse%{linkEnd}"
/>
</p>
</div>
</button>
......@@ -248,7 +256,9 @@ exports[`Design management dropzone component when dragging renders correct temp
<div
class="mw-50 text-center"
>
<h3>
<h3
class=""
>
Oh no!
</h3>
......@@ -261,7 +271,9 @@ exports[`Design management dropzone component when dragging renders correct temp
class="mw-50 text-center"
style="display: none;"
>
<h3>
<h3
class=""
>
Incoming!
</h3>
......@@ -279,22 +291,21 @@ exports[`Design management dropzone component when dragging renders correct temp
class="w-100 position-relative"
>
<button
class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
>
<div
class="d-flex-center flex-column text-center"
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
data-testid="dropzone-area"
>
<gl-icon-stub
class="mb-4"
name="doc-new"
size="48"
class="gl-mb-2"
name="upload"
size="24"
/>
<p>
<gl-sprintf-stub
message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
message="%{contentStart}Drop files to attach, or %{contentEnd}%{linkStart}browse%{linkEnd}"
/>
</p>
</div>
</button>
......@@ -316,7 +327,9 @@ exports[`Design management dropzone component when dragging renders correct temp
<div
class="mw-50 text-center"
>
<h3>
<h3
class=""
>
Oh no!
</h3>
......@@ -329,7 +342,9 @@ exports[`Design management dropzone component when dragging renders correct temp
class="mw-50 text-center"
style="display: none;"
>
<h3>
<h3
class=""
>
Incoming!
</h3>
......@@ -347,22 +362,21 @@ exports[`Design management dropzone component when no slot provided renders defa
class="w-100 position-relative"
>
<button
class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
>
<div
class="d-flex-center flex-column text-center"
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
data-testid="dropzone-area"
>
<gl-icon-stub
class="mb-4"
name="doc-new"
size="48"
class="gl-mb-2"
name="upload"
size="24"
/>
<p>
<gl-sprintf-stub
message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
message="%{contentStart}Drop files to attach, or %{contentEnd}%{linkStart}browse%{linkEnd}"
/>
</p>
</div>
</button>
......@@ -384,7 +398,9 @@ exports[`Design management dropzone component when no slot provided renders defa
<div
class="mw-50 text-center"
>
<h3>
<h3
class=""
>
Oh no!
</h3>
......@@ -397,7 +413,9 @@ exports[`Design management dropzone component when no slot provided renders defa
class="mw-50 text-center"
style="display: none;"
>
<h3>
<h3
class=""
>
Incoming!
</h3>
......@@ -428,7 +446,9 @@ exports[`Design management dropzone component when slot provided renders dropzon
<div
class="mw-50 text-center"
>
<h3>
<h3
class=""
>
Oh no!
</h3>
......@@ -441,7 +461,9 @@ exports[`Design management dropzone component when slot provided renders dropzon
class="mw-50 text-center"
style="display: none;"
>
<h3>
<h3
class=""
>
Incoming!
</h3>
......
spec/frontend/design_management_new/components/upload/__snapshots__/design_version_dropdown_spec.js.snap
View file @ 9f0b64d3
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Design management design version dropdown component renders design version dropdown button 1`] = `
<gl-dropdown-stub
<gl-new-dropdown-stub
category="tertiary"
class="design-version-dropdown"
headertext=""
issueiid=""
projectpath=""
size="small"
text="Showing Latest Version"
variant="link"
variant="default"
>
<gl-dropdown-item-stub>
<gl-new-dropdown-item-stub
avatarurl=""
iconcolor=""
iconname=""
iconrightname=""
secondarytext=""
>
<router-link-stub
class="d-flex js-version-link"
to="[object Object]"
......@@ -31,8 +40,14 @@ exports[`Design management design version dropdown component renders design vers
class="fa fa-check pull-right"
/>
</router-link-stub>
</gl-dropdown-item-stub>
<gl-dropdown-item-stub>
</gl-new-dropdown-item-stub>
<gl-new-dropdown-item-stub
avatarurl=""
iconcolor=""
iconname=""
iconrightname=""
secondarytext=""
>
<router-link-stub
class="d-flex js-version-link"
to="[object Object]"
......@@ -51,19 +66,28 @@ exports[`Design management design version dropdown component renders design vers
<!---->
</router-link-stub>
</gl-dropdown-item-stub>
</gl-dropdown-stub>
</gl-new-dropdown-item-stub>
</gl-new-dropdown-stub>
`;
exports[`Design management design version dropdown component renders design version list 1`] = `
<gl-dropdown-stub
<gl-new-dropdown-stub
category="tertiary"
class="design-version-dropdown"
headertext=""
issueiid=""
projectpath=""
size="small"
text="Showing Latest Version"
variant="link"
variant="default"
>
<gl-dropdown-item-stub>
<gl-new-dropdown-item-stub
avatarurl=""
iconcolor=""
iconname=""
iconrightname=""
secondarytext=""
>
<router-link-stub
class="d-flex js-version-link"
to="[object Object]"
......@@ -86,8 +110,14 @@ exports[`Design management design version dropdown component renders design vers
class="fa fa-check pull-right"
/>
</router-link-stub>
</gl-dropdown-item-stub>
<gl-dropdown-item-stub>
</gl-new-dropdown-item-stub>
<gl-new-dropdown-item-stub
avatarurl=""
iconcolor=""
iconname=""
iconrightname=""
secondarytext=""
>
<router-link-stub
class="d-flex js-version-link"
to="[object Object]"
......@@ -106,6 +136,6 @@ exports[`Design management design version dropdown component renders design vers
<!---->
</router-link-stub>
</gl-dropdown-item-stub>
</gl-dropdown-stub>
</gl-new-dropdown-item-stub>
</gl-new-dropdown-stub>
`;
spec/frontend/design_management_new/components/upload/design_dropzone_spec.js
View file @ 9f0b64d3
import { shallowMount } from '@vue/test-utils';
import DesignDropzone from '~/design_management_new/components/upload/design_dropzone.vue';
import createFlash from '~/flash';
import { GlIcon } from '@gitlab/ui';
jest.mock('~/flash');
......@@ -12,10 +13,16 @@ describe('Design management dropzone component', () => {
};
const findDropzoneCard = () => wrapper.find('.design-dropzone-card');
const findDropzoneArea = () => wrapper.find('[data-testid="dropzone-area"]');
const findIcon = () => wrapper.find(GlIcon);
function createComponent({ slots = {}, data = {} } = {}) {
function createComponent({ slots = {}, data = {}, props = {} } = {}) {
wrapper = shallowMount(DesignDropzone, {
slots,
propsData: {
hasDesigns: true,
...props,
},
data() {
return data;
},
......@@ -129,4 +136,16 @@ describe('Design management dropzone component', () => {
});
});
});
it('applies correct classes when there are no designs or no design saving loader', () => {
createComponent({ props: { hasDesigns: false } });
expect(findDropzoneArea().classes()).not.toContain('gl-flex-direction-column');
expect(findIcon().classes()).toEqual(['gl-mr-4']);
});
it('applies correct classes when there are designs or design saving loader', () => {
createComponent({ props: { hasDesigns: true } });
expect(findDropzoneArea().classes()).toContain('gl-flex-direction-column');
expect(findIcon().classes()).toEqual(['gl-mb-2']);
});
});
spec/frontend/design_management_new/components/upload/design_version_dropdown_spec.js
View file @ 9f0b64d3
import { shallowMount } from '@vue/test-utils';
import DesignVersionDropdown from '~/design_management_new/components/upload/design_version_dropdown.vue';
import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { GlNewDropdown, GlNewDropdownItem } from '@gitlab/ui';
import mockAllVersions from './mock_data/all_versions';
const LATEST_VERSION_ID = 3;
......@@ -75,7 +75,7 @@ describe('Design management design version dropdown component', () => {
createComponent();
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version');
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing Latest Version');
});
});
......@@ -83,7 +83,7 @@ describe('Design management design version dropdown component', () => {
createComponent({ maxVersions: 1 });
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version');
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing Latest Version');
});
});
......@@ -91,7 +91,7 @@ describe('Design management design version dropdown component', () => {
createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) });
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlDropdown).attributes('text')).toBe(`Showing Version #1`);
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe(`Showing Version #1`);
});
});
......@@ -99,7 +99,7 @@ describe('Design management design version dropdown component', () => {
createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) });
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version');
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing Latest Version');
});
});
......@@ -107,7 +107,7 @@ describe('Design management design version dropdown component', () => {
createComponent();
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.findAll(GlDropdownItem)).toHaveLength(wrapper.vm.allVersions.length);
expect(wrapper.findAll(GlNewDropdownItem)).toHaveLength(wrapper.vm.allVersions.length);
});
});
});
......
spec/frontend/design_management_new/pages/__snapshots__/index_spec.js.snap
View file @ 9f0b64d3
......@@ -2,6 +2,7 @@
exports[`Design management index page designs does not render toolbar when there is no permission 1`] = `
<div
class="gl-mt-2"
data-testid="designs-root"
>
<!---->
......@@ -12,18 +13,24 @@ exports[`Design management index page designs does not render toolbar when there
<ol
class="list-unstyled row"
>
<!---->
<li
class="col-md-6 col-lg-4 mb-3"
class="gl-flex-direction-column col-md-6 col-lg-3 gl-mb-3"
data-testid="design-dropzone-wrapper"
>
<design-dropzone-stub
class="design-list-item"
class="design-list-item design-list-item-new"
hasdesigns="true"
/>
</li>
<li
class="col-md-6 col-lg-4 mb-3"
class="col-md-6 col-lg-3 gl-mb-3"
>
<design-dropzone-stub
hasdesigns="true"
>
<design-dropzone-stub>
<design-stub
event="NONE"
filename="design-1-name"
......@@ -36,9 +43,11 @@ exports[`Design management index page designs does not render toolbar when there
<!---->
</li>
<li
class="col-md-6 col-lg-4 mb-3"
class="col-md-6 col-lg-3 gl-mb-3"
>
<design-dropzone-stub
hasdesigns="true"
>
<design-dropzone-stub>
<design-stub
event="NONE"
filename="design-2-name"
......@@ -51,9 +60,11 @@ exports[`Design management index page designs does not render toolbar when there
<!---->
</li>
<li
class="col-md-6 col-lg-4 mb-3"
class="col-md-6 col-lg-3 gl-mb-3"
>
<design-dropzone-stub
hasdesigns="true"
>
<design-dropzone-stub>
<design-stub
event="NONE"
filename="design-3-name"
......@@ -76,31 +87,44 @@ exports[`Design management index page designs does not render toolbar when there
exports[`Design management index page designs renders designs list and header with upload button 1`] = `
<div
class="gl-mt-2"
data-testid="designs-root"
>
<header
class="row-content-block border-top-0 p-2 d-flex"
>
<div
class="d-flex justify-content-between align-items-center w-100"
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"
>
Designs
</span>
<design-version-dropdown-stub />
</div>
<div
class="qa-selector-toolbar d-flex"
class="qa-selector-toolbar gl-display-flex"
>
<gl-deprecated-button-stub
class="mr-2 js-select-all"
size="md"
<gl-button-stub
category="tertiary"
class="gl-mr-2 js-select-all"
icon=""
size="small"
variant="link"
>
Select all
</gl-deprecated-button-stub>
</gl-button-stub>
<div>
<delete-button-stub
buttonclass="btn-danger btn-inverted mr-2"
buttonvariant=""
buttonclass="gl-mr-4"
buttonsize="small"
buttonvariant="danger"
>
Delete selected
......@@ -120,18 +144,24 @@ exports[`Design management index page designs renders designs list and header wi
<ol
class="list-unstyled row"
>
<!---->
<li
class="col-md-6 col-lg-4 mb-3"
class="gl-flex-direction-column col-md-6 col-lg-3 gl-mb-3"
data-testid="design-dropzone-wrapper"
>
<design-dropzone-stub
class="design-list-item"
class="design-list-item design-list-item-new"
hasdesigns="true"
/>
</li>
<li
class="col-md-6 col-lg-4 mb-3"
class="col-md-6 col-lg-3 gl-mb-3"
>
<design-dropzone-stub
hasdesigns="true"
>
<design-dropzone-stub>
<design-stub
event="NONE"
filename="design-1-name"
......@@ -147,9 +177,11 @@ exports[`Design management index page designs renders designs list and header wi
/>
</li>
<li
class="col-md-6 col-lg-4 mb-3"
class="col-md-6 col-lg-3 gl-mb-3"
>
<design-dropzone-stub
hasdesigns="true"
>
<design-dropzone-stub>
<design-stub
event="NONE"
filename="design-2-name"
......@@ -165,9 +197,11 @@ exports[`Design management index page designs renders designs list and header wi
/>
</li>
<li
class="col-md-6 col-lg-4 mb-3"
class="col-md-6 col-lg-3 gl-mb-3"
>
<design-dropzone-stub
hasdesigns="true"
>
<design-dropzone-stub>
<design-stub
event="NONE"
filename="design-3-name"
......@@ -193,6 +227,7 @@ exports[`Design management index page designs renders designs list and header wi
exports[`Design management index page designs renders error 1`] = `
<div
class="gl-mt-2"
data-testid="designs-root"
>
<!---->
......@@ -223,6 +258,7 @@ exports[`Design management index page designs renders error 1`] = `
exports[`Design management index page designs renders loading icon 1`] = `
<div
class="gl-mt-2"
data-testid="designs-root"
>
<!---->
......@@ -243,8 +279,9 @@ exports[`Design management index page designs renders loading icon 1`] = `
</div>
`;
exports[`Design management index page when has no designs renders empty text 1`] = `
exports[`Design management index page when has no designs renders design dropzone 1`] = `
<div
class="gl-mt-2"
data-testid="designs-root"
>
<!---->
......@@ -255,11 +292,18 @@ exports[`Design management index page when has no designs renders empty text 1`]
<ol
class="list-unstyled row"
>
<span
class="gl-font-weight-bold gl-font-weight-bold gl-ml-5 gl-mb-4"
>
Designs
</span>
<li
class="col-md-6 col-lg-4 mb-3"
class="col-12"
data-testid="design-dropzone-wrapper"
>
<design-dropzone-stub
class="design-list-item"
class=""
/>
</li>
......
spec/frontend/design_management_new/pages/index_spec.js
View file @ 9f0b64d3
......@@ -68,6 +68,8 @@ describe('Design management index page', () => {
const findToolbar = () => wrapper.find('.qa-selector-toolbar');
const findDeleteButton = () => wrapper.find(DeleteButton);
const findDropzone = () => wrapper.findAll(DesignDropzone).at(0);
const dropzoneClasses = () => findDropzone().classes();
const findDropzoneWrapper = () => wrapper.find('[data-testid="design-dropzone-wrapper"]');
const findFirstDropzoneWithDesign = () => wrapper.findAll(DesignDropzone).at(1);
function createComponent({
......@@ -151,6 +153,22 @@ describe('Design management index page', () => {
expect(wrapper.element).toMatchSnapshot();
});
it('has correct classes applied to design dropzone', () => {
createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
expect(dropzoneClasses()).toContain('design-list-item');
expect(dropzoneClasses()).toContain('design-list-item-new');
});
it('has correct classes applied to dropzone wrapper', () => {
createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
expect(findDropzoneWrapper().classes()).toEqual([
'gl-flex-direction-column',
'col-md-6',
'col-lg-3',
'gl-mb-3',
]);
});
});
describe('when has no designs', () => {
......@@ -158,11 +176,20 @@ describe('Design management index page', () => {
createComponent();
});
it('renders empty text', () =>
it('renders design dropzone', () =>
wrapper.vm.$nextTick().then(() => {
expect(wrapper.element).toMatchSnapshot();
}));
it('has correct classes applied to design dropzone', () => {
expect(dropzoneClasses()).not.toContain('design-list-item');
expect(dropzoneClasses()).not.toContain('design-list-item-new');
});
it('has correct classes applied to dropzone wrapper', () => {
expect(findDropzoneWrapper().classes()).toEqual(['col-12']);
});
it('does not render a toolbar with buttons', () =>
wrapper.vm.$nextTick().then(() => {
expect(findToolbar().exists()).toBe(false);
......@@ -227,11 +254,17 @@ describe('Design management index page', () => {
},
};
return wrapper.vm.$nextTick().then(() => {
return wrapper.vm
.$nextTick()
.then(() => {
findDropzone().vm.$emit('change', [{ name: 'test' }]);
expect(mutate).toHaveBeenCalledWith(mutationVariables);
expect(wrapper.vm.filesToBeSaved).toEqual([{ name: 'test' }]);
expect(wrapper.vm.isSaving).toBeTruthy();
})
.then(() => {
expect(dropzoneClasses()).toContain('design-list-item');
expect(dropzoneClasses()).toContain('design-list-item-new');
});
});
......@@ -380,8 +413,7 @@ describe('Design management index page', () => {
it('renders toolbar buttons', () => {
expect(findToolbar().exists()).toBe(true);
expect(findToolbar().classes()).toContain('d-flex');
expect(findToolbar().classes()).not.toContain('d-none');
expect(findToolbar().isVisible()).toBe(true);
});
it('adds two designs to selected designs when their checkboxes are checked', () => {
......@@ -440,7 +472,7 @@ describe('Design management index page', () => {
it('on latest version when has no designs toolbar buttons are invisible', () => {
createComponent({ designs: [], allVersions: [mockVersion] });
expect(findToolbar().classes()).toContain('d-none');
expect(findToolbar().isVisible()).toBe(false);
});
describe('on non-latest version', () => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7