Skip to content

G
gitlab-ce
Commit 4598b27b authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera
Browse files
Options

Merge branch... 

Merge branch '231436-rename-old-design-management-application-to-design_management_legacy-to-prevent-confusion' into 'master'

Rename old design management application to 'legacy'

Closes #231436

See merge request gitlab-org/gitlab!37798
parents 5e2323d5 acc4599b
Show whitespace changes
Inline Side-by-side
Showing with 997 additions and 972 deletions
app/assets/javascripts/design_management/components/delete_button.vue
View file @ 4598b27b
<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/components/design_destroyer.vue
View file @ 4598b27b
......@@ -13,13 +13,14 @@ export default {
type: Array,
required: true,
},
},
inject: {
projectPath: {
type: String,
required: true,
default: '',
},
iid: {
type: String,
required: true,
from: 'issueIid',
defaut: '',
},
},
computed: {
......
app/assets/javascripts/design_management/components/design_notes/design_note.vue
View file @ 4598b27b
......@@ -60,7 +60,7 @@ export default {
},
mounted() {
if (this.isNoteLinked) {
this.$refs.anchor.$el.scrollIntoView({ behavior: 'smooth', inline: 'start' });
this.$el.scrollIntoView({ behavior: 'smooth', inline: 'start' });
}
},
methods: {
......@@ -80,7 +80,7 @@ export default {
</script>
<template>
<timeline-entry-item :id="`note_${noteAnchorId}`" ref="anchor" class="design-note note-form">
<timeline-entry-item :id="`note_${noteAnchorId}`" class="design-note note-form">
<user-avatar-link
:link-href="author.webUrl"
:img-src="author.avatarUrl"
......
app/assets/javascripts/design_management/components/list/item.vue
View file @ 4598b27b
......@@ -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/components/toolbar/index.vue
View file @ 4598b27b
......@@ -6,7 +6,6 @@ import timeagoMixin from '~/vue_shared/mixins/timeago';
import Pagination from './pagination.vue';
import DeleteButton from '../delete_button.vue';
import permissionsQuery from '../../graphql/queries/design_permissions.query.graphql';
import appDataQuery from '../../graphql/queries/app_data.query.graphql';
import { DESIGNS_ROUTE_NAME } from '../../router/constants';
export default {
......@@ -55,19 +54,17 @@ export default {
permissions: {
createDesign: false,
},
projectPath: '',
issueIid: null,
};
},
apollo: {
appData: {
query: appDataQuery,
manual: true,
result({ data: { projectPath, issueIid } }) {
this.projectPath = projectPath;
this.issueIid = issueIid;
inject: {
projectPath: {
default: '',
},
issueIid: {
default: '',
},
},
apollo: {
permissions: {
query: permissionsQuery,
variables() {
......@@ -102,6 +99,7 @@ export default {
query: $route.query,
}"
:aria-label="s__('DesignManagement|Go back to designs')"
data-testid="close-design"
class="mr-3 text-plain d-flex justify-content-center align-items-center"
>
<icon :size="18" name="close" />
......
app/assets/javascripts/design_management/components/upload/button.vue
View file @ 4598b27b
<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__(
......@@ -38,12 +38,13 @@ export default {
)
"
:disabled="isSaving"
variant="success"
variant="default"
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/components/upload/design_dropzone.vue
View file @ 4598b27b
......@@ -12,6 +12,12 @@ export default {
GlLink,
GlSprintf,
},
props: {
hasDesigns: {
type: Boolean,
required: true,
},
},
data() {
return {
dragCounter: 0,
......@@ -22,6 +28,12 @@ export default {
dragging() {
return this.dragCounter !== 0;
},
iconStyles() {
return {
size: this.hasDesigns ? 24 : 16,
class: this.hasDesigns ? 'gl-mb-2' : 'gl-mr-3 gl-text-gray-700',
};
},
},
methods: {
isValidUpload(files) {
......@@ -76,25 +88,21 @@ 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>
<gl-sprintf
:message="
__(
'%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}.',
)
"
<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"
>
<template #lineOne="{ content }"
><span class="d-block">{{ content }}</span>
</template>
<gl-icon name="upload" :size="iconStyles.size" :class="iconStyles.class" />
<p class="gl-mb-0">
<gl-sprintf :message="__('Drop or %{linkStart}upload%{linkEnd} designs to attach')">
<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>
......@@ -117,7 +125,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 +133,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/components/upload/design_version_dropdown.vue
View file @ 4598b27b
<script>
import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } 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: {
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlNewDropdown,
GlNewDropdownItem,
},
mixins: [allVersionsMixin],
computed: {
......@@ -50,8 +50,8 @@ export default {
</script>
<template>
<gl-deprecated-dropdown :text="dropdownText" variant="link" class="design-version-dropdown">
<gl-deprecated-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-deprecated-dropdown-item>
</gl-deprecated-dropdown>
</gl-new-dropdown-item>
</gl-new-dropdown>
</template>
app/assets/javascripts/design_management/index.js
View file @ 4598b27b
// This application is being moved, please do not touch this files
// Please see https://gitlab.com/gitlab-org/gitlab/-/issues/14744#note_364468096 for details
import $ from 'jquery';
import Vue from 'vue';
import createRouter from './router';
import App from './components/app.vue';
import apolloProvider from './graphql';
import getDesignListQuery from './graphql/queries/get_design_list.query.graphql';
import { DESIGNS_ROUTE_NAME, ROOT_ROUTE_NAME } from './router/constants';
export default () => {
const el = document.querySelector('.js-design-management');
const badge = document.querySelector('.js-designs-count');
const el = document.querySelector('.js-design-management-new');
const { issueIid, projectPath, issuePath } = el.dataset;
const router = createRouter(issuePath);
$('.js-issue-tabs').on('shown.bs.tab', ({ target: { id } }) => {
if (id === 'designs' && router.currentRoute.name === ROOT_ROUTE_NAME) {
router.push({ name: DESIGNS_ROUTE_NAME });
} else if (id === 'discussion') {
router.push({ name: ROOT_ROUTE_NAME });
}
});
apolloProvider.clients.defaultClient.cache.writeData({
data: {
projectPath,
issueIid,
activeDiscussion: {
__typename: 'ActiveDiscussion',
id: null,
......@@ -35,25 +18,14 @@ export default () => {
},
});
apolloProvider.clients.defaultClient
.watchQuery({
query: getDesignListQuery,
variables: {
fullPath: projectPath,
iid: issueIid,
atVersion: null,
},
})
.subscribe(({ data }) => {
if (badge) {
badge.textContent = data.project.issue.designCollection.designs.edges.length;
}
});
return new Vue({
el,
router,
apolloProvider,
provide: {
projectPath,
issueIid,
},
render(createElement) {
return createElement(App);
},
......
app/assets/javascripts/design_management/mixins/all_versions.js
View file @ 4598b27b
import getDesignListQuery from '../graphql/queries/get_design_list.query.graphql';
import appDataQuery from '../graphql/queries/app_data.query.graphql';
import { findVersionId } from '../utils/design_management_utils';
export default {
apollo: {
appData: {
query: appDataQuery,
manual: true,
result({ data: { projectPath, issueIid } }) {
this.projectPath = projectPath;
this.issueIid = issueIid;
},
},
allVersions: {
query: getDesignListQuery,
variables() {
......@@ -24,6 +15,14 @@ export default {
update: data => data.project.issue.designCollection.versions.edges,
},
},
inject: {
projectPath: {
default: '',
},
issueIid: {
default: '',
},
},
computed: {
hasValidVersion() {
return (
......@@ -55,8 +54,6 @@ export default {
data() {
return {
allVersions: [],
projectPath: '',
issueIid: null,
};
},
};
app/assets/javascripts/design_management/pages/design/index.vue
View file @ 4598b27b
......@@ -12,7 +12,6 @@ import DesignPresentation from '../../components/design_presentation.vue';
import DesignReplyForm from '../../components/design_notes/design_reply_form.vue';
import DesignSidebar from '../../components/design_sidebar.vue';
import getDesignQuery from '../../graphql/queries/get_design.query.graphql';
import appDataQuery from '../../graphql/queries/app_data.query.graphql';
import createImageDiffNoteMutation from '../../graphql/mutations/create_image_diff_note.mutation.graphql';
import updateImageDiffNoteMutation from '../../graphql/mutations/update_image_diff_note.mutation.graphql';
import updateActiveDiscussionMutation from '../../graphql/mutations/update_active_discussion.mutation.graphql';
......@@ -62,22 +61,12 @@ export default {
design: {},
comment: '',
annotationCoordinates: null,
projectPath: '',
errorMessage: '',
issueIid: '',
scale: 1,
resolvedDiscussionsExpanded: false,
};
},
apollo: {
appData: {
query: appDataQuery,
manual: true,
result({ data: { projectPath, issueIid } }) {
this.projectPath = projectPath;
this.issueIid = issueIid;
},
},
design: {
query: getDesignQuery,
// We want to see cached design version if we have one, and fetch newer version on the background to update discussions
......
app/assets/javascripts/design_management/pages/index.vue
View file @ 4598b27b
<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,9 +96,20 @@ 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);
if (this.$route.path === '/designs') {
this.$el.scrollIntoView();
}
},
methods: {
resetFilesToBeSaved() {
......@@ -238,51 +249,54 @@ export default {
this.onUploadDesign([newFile]);
}
},
toggleOnPasteListener(route) {
if (route === DESIGNS_ROUTE_NAME) {
toggleOnPasteListener() {
document.addEventListener('paste', this.onDesignPaste);
} else {
},
toggleOffPasteListener() {
document.removeEventListener('paste', this.onDesignPaste);
}
},
},
beforeRouteUpdate(to, from, next) {
this.toggleOnPasteListener(to.name);
this.selectedDesigns = [];
next();
},
beforeRouteLeave(to, from, next) {
this.toggleOnPasteListener(to.name);
next();
},
};
</script>
<template>
<div>
<div
data-testid="designs-root"
class="gl-mt-5"
@mouseenter="toggleOnPasteListener"
@mouseleave="toggleOffPasteListener"
>
<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-align-items-center">
<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"
:project-path="projectPath"
:iid="issueIid"
@done="onDesignDelete"
@error="onDesignDeleteError"
>
<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()"
>
......@@ -300,11 +314,17 @@ 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" />
<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/javascripts/design_management/router/constants.js
View file @ 4598b27b
export const ROOT_ROUTE_NAME = 'root';
export const DESIGNS_ROUTE_NAME = 'designs';
export const DESIGN_ROUTE_NAME = 'design';
app/assets/javascripts/design_management/router/index.js
View file @ 4598b27b
import $ from 'jquery';
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';
......@@ -16,9 +15,7 @@ export default function createRouter(base) {
});
const pageEl = getPageLayoutElement();
router.beforeEach(({ meta: { el }, name }, _, next) => {
$(`#${el}`).tab('show');
router.beforeEach(({ name }, _, next) => {
// apply a fullscreen layout style in Design View (a.k.a design detail)
if (pageEl) {
if (name === DESIGN_ROUTE_NAME) {
......
app/assets/javascripts/design_management/router/routes.js
View file @ 4598b27b
import Home from '../pages/index.vue';
import DesignDetail from '../pages/design/index.vue';
import { ROOT_ROUTE_NAME, DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from './constants';
import { DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from './constants';
export default [
{
name: ROOT_ROUTE_NAME,
path: '/',
component: Home,
meta: {
el: 'discussion',
},
},
{
name: DESIGNS_ROUTE_NAME,
path: '/designs',
path: '/',
component: Home,
meta: {
el: 'designs',
alias: '/designs',
},
children: [
{
name: DESIGN_ROUTE_NAME,
path: ':id',
path: '/designs/:id',
component: DesignDetail,
meta: {
el: 'designs',
},
beforeEnter(
{
params: { id },
},
from,
_,
next,
) {
if (typeof id === 'string') {
......@@ -39,6 +26,4 @@ export default [
},
props: ({ params: { id } }) => ({ id }),
},
],
},
];
app/assets/javascripts/design_management_new/components/delete_button.vue → app/assets/javascripts/design_management_legacy/components/delete_button.vue
View file @ 4598b27b
<script>
import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
import { GlDeprecatedButton, GlModal, GlModalDirective } from '@gitlab/ui';
import { uniqueId } from 'lodash';
import { s__ } from '~/locale';
export default {
name: 'DeleteButton',
components: {
GlButton,
GlDeprecatedButton,
GlModal,
},
directives: {
......@@ -26,12 +25,7 @@ export default {
buttonVariant: {
type: String,
required: false,
default: 'info',
},
buttonSize: {
type: String,
required: false,
default: 'medium',
default: '',
},
hasSelectedDesigns: {
type: Boolean,
......@@ -44,38 +38,27 @@ 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 class="gl-display-flex gl-align-items-center gl-h-full">
<div>
<gl-modal
:modal-id="modalId"
:title="$options.modal.title"
:action-primary="$options.modal.actionPrimary"
:action-cancel="$options.modal.actionCancel"
:title="s__('DesignManagement|Delete designs confirmation')"
:ok-title="s__('DesignManagement|Delete')"
ok-variant="danger"
@ok="$emit('deleteSelectedDesigns')"
>
<p>{{ s__('DesignManagement|Are you sure you want to delete the selected designs?') }}</p>
</gl-modal>
<gl-button
<gl-deprecated-button
v-gl-modal-directive="modalId"
:variant="buttonVariant"
:size="buttonSize"
:class="buttonClass"
:disabled="isDeleting || !hasSelectedDesigns"
:class="buttonClass"
>
<slot></slot>
</gl-button>
</gl-deprecated-button>
</div>
</template>
app/assets/javascripts/design_management_new/components/design_destroyer.vue → app/assets/javascripts/design_management_legacy/components/design_destroyer.vue
View file @ 4598b27b
......@@ -13,14 +13,13 @@ export default {
type: Array,
required: true,
},
},
inject: {
projectPath: {
default: '',
type: String,
required: true,
},
iid: {
from: 'issueIid',
defaut: '',
type: String,
required: true,
},
},
computed: {
......
app/assets/javascripts/design_management_new/components/design_notes/design_note.vue → app/assets/javascripts/design_management_legacy/components/design_notes/design_note.vue
View file @ 4598b27b
......@@ -60,7 +60,7 @@ export default {
},
mounted() {
if (this.isNoteLinked) {
this.$el.scrollIntoView({ behavior: 'smooth', inline: 'start' });
this.$refs.anchor.$el.scrollIntoView({ behavior: 'smooth', inline: 'start' });
}
},
methods: {
......@@ -80,7 +80,7 @@ export default {
</script>
<template>
<timeline-entry-item :id="`note_${noteAnchorId}`" class="design-note note-form">
<timeline-entry-item :id="`note_${noteAnchorId}`" ref="anchor" class="design-note note-form">
<user-avatar-link
:link-href="author.webUrl"
:img-src="author.avatarUrl"
......
app/assets/javascripts/design_management_new/components/list/item.vue → app/assets/javascripts/design_management_legacy/components/list/item.vue
View file @ 4598b27b
......@@ -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 design-list-item-new"
class="card cursor-pointer text-plain js-design-list-item design-list-item"
>
<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/toolbar/index.vue → app/assets/javascripts/design_management_legacy/components/toolbar/index.vue
View file @ 4598b27b
......@@ -6,6 +6,7 @@ import timeagoMixin from '~/vue_shared/mixins/timeago';
import Pagination from './pagination.vue';
import DeleteButton from '../delete_button.vue';
import permissionsQuery from '../../graphql/queries/design_permissions.query.graphql';
import appDataQuery from '../../graphql/queries/app_data.query.graphql';
import { DESIGNS_ROUTE_NAME } from '../../router/constants';
export default {
......@@ -54,17 +55,19 @@ export default {
permissions: {
createDesign: false,
},
projectPath: '',
issueIid: null,
};
},
inject: {
projectPath: {
default: '',
},
issueIid: {
default: '',
apollo: {
appData: {
query: appDataQuery,
manual: true,
result({ data: { projectPath, issueIid } }) {
this.projectPath = projectPath;
this.issueIid = issueIid;
},
},
apollo: {
permissions: {
query: permissionsQuery,
variables() {
......@@ -99,7 +102,6 @@ export default {
query: $route.query,
}"
:aria-label="s__('DesignManagement|Go back to designs')"
data-testid="close-design"
class="mr-3 text-plain d-flex justify-content-center align-items-center"
>
<icon :size="18" name="close" />
......
app/assets/javascripts/design_management_new/components/upload/button.vue → app/assets/javascripts/design_management_legacy/components/upload/button.vue
View file @ 4598b27b
<script>
import { GlButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
import { GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
import { VALID_DESIGN_FILE_MIMETYPE } from '../../constants';
export default {
components: {
GlButton,
GlDeprecatedButton,
GlLoadingIcon,
},
directives: {
......@@ -30,7 +30,7 @@ export default {
<template>
<div>
<gl-button
<gl-deprecated-button
v-gl-tooltip.hover
:title="
s__(
......@@ -38,13 +38,12 @@ export default {
)
"
:disabled="isSaving"
variant="default"
size="small"
variant="success"
@click="openFileUpload"
>
{{ s__('DesignManagement|Upload designs') }}
<gl-loading-icon v-if="isSaving" inline class="ml-1" />
</gl-button>
</gl-deprecated-button>
<input
ref="fileUpload"
......
app/assets/javascripts/design_management_new/components/upload/design_dropzone.vue → app/assets/javascripts/design_management_legacy/components/upload/design_dropzone.vue
View file @ 4598b27b
......@@ -12,12 +12,6 @@ export default {
GlLink,
GlSprintf,
},
props: {
hasDesigns: {
type: Boolean,
required: true,
},
},
data() {
return {
dragCounter: 0,
......@@ -28,12 +22,6 @@ export default {
dragging() {
return this.dragCounter !== 0;
},
iconStyles() {
return {
size: this.hasDesigns ? 24 : 16,
class: this.hasDesigns ? 'gl-mb-2' : 'gl-mr-3 gl-text-gray-700',
};
},
},
methods: {
isValidUpload(files) {
......@@ -88,21 +76,25 @@ export default {
>
<slot>
<button
class="card design-dropzone-card design-dropzone-border w-100 h-100 gl-align-items-center gl-justify-content-center gl-p-3"
class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
@click="openFileUpload"
>
<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"
<div class="d-flex-center flex-column text-center">
<gl-icon name="doc-new" :size="48" class="mb-4" />
<p>
<gl-sprintf
:message="
__(
'%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}.',
)
"
>
<gl-icon name="upload" :size="iconStyles.size" :class="iconStyles.class" />
<p class="gl-mb-0">
<gl-sprintf :message="__('Drop or %{linkStart}upload%{linkEnd} designs to attach')">
<template #lineOne="{ content }"
><span class="d-block">{{ content }}</span>
</template>
<template #link="{ content }">
<gl-link @click.stop="openFileUpload">
{{ content }}
</gl-link>
<gl-link class="h-100 w-100" @click.stop="openFileUpload">{{ content }}</gl-link>
</template>
</gl-sprintf>
</p>
......@@ -125,7 +117,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 :class="{ 'gl-font-base gl-display-inline': !hasDesigns }">{{ __('Oh no!') }}</h3>
<h3>{{ __('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.',
......@@ -133,7 +125,7 @@ export default {
}}</span>
</div>
<div v-show="isDragDataValid" class="mw-50 text-center">
<h3 :class="{ 'gl-font-base gl-display-inline': !hasDesigns }">{{ __('Incoming!') }}</h3>
<h3>{{ __('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 → app/assets/javascripts/design_management_legacy/components/upload/design_version_dropdown.vue
View file @ 4598b27b
<script>
import { GlNewDropdown, GlNewDropdownItem } from '@gitlab/ui';
import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { __, sprintf } from '~/locale';
import allVersionsMixin from '../../mixins/all_versions';
import { findVersionId } from '../../utils/design_management_utils';
export default {
components: {
GlNewDropdown,
GlNewDropdownItem,
GlDropdown,
GlDropdownItem,
},
mixins: [allVersionsMixin],
computed: {
......@@ -50,8 +50,8 @@ export default {
</script>
<template>
<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">
<gl-dropdown :text="dropdownText" variant="link" class="design-version-dropdown">
<gl-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-new-dropdown-item>
</gl-new-dropdown>
</gl-dropdown-item>
</gl-dropdown>
</template>
app/assets/javascripts/design_management_new/index.js → app/assets/javascripts/design_management_legacy/index.js
View file @ 4598b27b
// This application is being moved, please do not touch this files
// Please see https://gitlab.com/gitlab-org/gitlab/-/issues/14744#note_364468096 for details
import $ from 'jquery';
import Vue from 'vue';
import createRouter from './router';
import App from './components/app.vue';
import apolloProvider from './graphql';
import getDesignListQuery from './graphql/queries/get_design_list.query.graphql';
import { DESIGNS_ROUTE_NAME, ROOT_ROUTE_NAME } from './router/constants';
export default () => {
const el = document.querySelector('.js-design-management-new');
const el = document.querySelector('.js-design-management');
const badge = document.querySelector('.js-designs-count');
const { issueIid, projectPath, issuePath } = el.dataset;
const router = createRouter(issuePath);
$('.js-issue-tabs').on('shown.bs.tab', ({ target: { id } }) => {
if (id === 'designs' && router.currentRoute.name === ROOT_ROUTE_NAME) {
router.push({ name: DESIGNS_ROUTE_NAME });
} else if (id === 'discussion') {
router.push({ name: ROOT_ROUTE_NAME });
}
});
apolloProvider.clients.defaultClient.cache.writeData({
data: {
projectPath,
issueIid,
activeDiscussion: {
__typename: 'ActiveDiscussion',
id: null,
......@@ -18,14 +35,25 @@ export default () => {
},
});
apolloProvider.clients.defaultClient
.watchQuery({
query: getDesignListQuery,
variables: {
fullPath: projectPath,
iid: issueIid,
atVersion: null,
},
})
.subscribe(({ data }) => {
if (badge) {
badge.textContent = data.project.issue.designCollection.designs.edges.length;
}
});
return new Vue({
el,
router,
apolloProvider,
provide: {
projectPath,
issueIid,
},
render(createElement) {
return createElement(App);
},
......
app/assets/javascripts/design_management_new/mixins/all_versions.js → app/assets/javascripts/design_management_legacy/mixins/all_versions.js
View file @ 4598b27b
import getDesignListQuery from '../graphql/queries/get_design_list.query.graphql';
import appDataQuery from '../graphql/queries/app_data.query.graphql';
import { findVersionId } from '../utils/design_management_utils';
export default {
apollo: {
appData: {
query: appDataQuery,
manual: true,
result({ data: { projectPath, issueIid } }) {
this.projectPath = projectPath;
this.issueIid = issueIid;
},
},
allVersions: {
query: getDesignListQuery,
variables() {
......@@ -15,14 +24,6 @@ export default {
update: data => data.project.issue.designCollection.versions.edges,
},
},
inject: {
projectPath: {
default: '',
},
issueIid: {
default: '',
},
},
computed: {
hasValidVersion() {
return (
......@@ -54,6 +55,8 @@ export default {
data() {
return {
allVersions: [],
projectPath: '',
issueIid: null,
};
},
};
app/assets/javascripts/design_management_new/pages/design/index.vue → app/assets/javascripts/design_management_legacy/pages/design/index.vue
View file @ 4598b27b
......@@ -12,6 +12,7 @@ import DesignPresentation from '../../components/design_presentation.vue';
import DesignReplyForm from '../../components/design_notes/design_reply_form.vue';
import DesignSidebar from '../../components/design_sidebar.vue';
import getDesignQuery from '../../graphql/queries/get_design.query.graphql';
import appDataQuery from '../../graphql/queries/app_data.query.graphql';
import createImageDiffNoteMutation from '../../graphql/mutations/create_image_diff_note.mutation.graphql';
import updateImageDiffNoteMutation from '../../graphql/mutations/update_image_diff_note.mutation.graphql';
import updateActiveDiscussionMutation from '../../graphql/mutations/update_active_discussion.mutation.graphql';
......@@ -61,12 +62,22 @@ export default {
design: {},
comment: '',
annotationCoordinates: null,
projectPath: '',
errorMessage: '',
issueIid: '',
scale: 1,
resolvedDiscussionsExpanded: false,
};
},
apollo: {
appData: {
query: appDataQuery,
manual: true,
result({ data: { projectPath, issueIid } }) {
this.projectPath = projectPath;
this.issueIid = issueIid;
},
},
design: {
query: getDesignQuery,
// We want to see cached design version if we have one, and fetch newer version on the background to update discussions
......
app/assets/javascripts/design_management_new/pages/index.vue → app/assets/javascripts/design_management_legacy/pages/index.vue
View file @ 4598b27b
<script>
import { GlLoadingIcon, GlButton, GlAlert } from '@gitlab/ui';
import { GlLoadingIcon, GlDeprecatedButton, 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,
GlButton,
GlDeprecatedButton,
UploadButton,
Design,
DesignDestroyer,
......@@ -96,20 +96,9 @@ 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);
if (this.$route.path === '/designs') {
this.$el.scrollIntoView();
}
},
methods: {
resetFilesToBeSaved() {
......@@ -249,54 +238,51 @@ export default {
this.onUploadDesign([newFile]);
}
},
toggleOnPasteListener() {
toggleOnPasteListener(route) {
if (route === DESIGNS_ROUTE_NAME) {
document.addEventListener('paste', this.onDesignPaste);
},
toggleOffPasteListener() {
} else {
document.removeEventListener('paste', this.onDesignPaste);
}
},
},
beforeRouteUpdate(to, from, next) {
this.toggleOnPasteListener(to.name);
this.selectedDesigns = [];
next();
},
beforeRouteLeave(to, from, next) {
this.toggleOnPasteListener(to.name);
next();
},
};
</script>
<template>
<div
data-testid="designs-root"
class="gl-mt-5"
@mouseenter="toggleOnPasteListener"
@mouseleave="toggleOffPasteListener"
>
<header v-if="showToolbar" class="row-content-block border-top-0 p-2 d-flex">
<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>
<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">
<design-version-dropdown />
</div>
<div v-show="hasDesigns" class="qa-selector-toolbar gl-display-flex gl-align-items-center">
<gl-button
<div :class="['qa-selector-toolbar', { 'd-flex': hasDesigns, 'd-none': !hasDesigns }]">
<gl-deprecated-button
v-if="isLatestVersion"
variant="link"
size="small"
class="gl-mr-2 js-select-all"
class="mr-2 js-select-all"
@click="toggleDesignsSelection"
>{{ selectAllButtonText }}
</gl-button>
>{{ selectAllButtonText }}</gl-deprecated-button
>
<design-destroyer
#default="{ mutate, loading }"
:filenames="selectedDesigns"
:project-path="projectPath"
:iid="issueIid"
@done="onDesignDelete"
@error="onDesignDeleteError"
>
<delete-button
v-if="isLatestVersion"
:is-deleting="loading"
button-variant="danger"
button-class="gl-mr-4"
button-size="small"
button-class="btn-danger btn-inverted mr-2"
:has-selected-designs="hasSelectedDesigns"
@deleteSelectedDesigns="mutate()"
>
......@@ -314,17 +300,11 @@ export default {
{{ __('An error occurred while loading designs. Please try again.') }}
</gl-alert>
<ol v-else class="list-unstyled row">
<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 class="col-md-6 col-lg-4 mb-3">
<design-dropzone class="design-list-item" @change="onUploadDesign" />
</li>
<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)"
<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)"
><design v-bind="design" :is-uploading="isDesignToBeSaved(design.filename)"
/></design-dropzone>
......
app/assets/javascripts/design_management_new/router/constants.js → app/assets/javascripts/design_management_legacy/router/constants.js
View file @ 4598b27b
export const ROOT_ROUTE_NAME = 'root';
export const DESIGNS_ROUTE_NAME = 'designs';
export const DESIGN_ROUTE_NAME = 'design';
app/assets/javascripts/design_management_new/router/index.js → app/assets/javascripts/design_management_legacy/router/index.js
View file @ 4598b27b
import $ from 'jquery';
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';
import { DESIGN_ROUTE_NAME } from './constants';
import { getPageLayoutElement } from '~/design_management_new/utils/design_management_utils';
import { getPageLayoutElement } from '~/design_management_legacy/utils/design_management_utils';
import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '../constants';
Vue.use(VueRouter);
......@@ -15,7 +16,9 @@ export default function createRouter(base) {
});
const pageEl = getPageLayoutElement();
router.beforeEach(({ name }, _, next) => {
router.beforeEach(({ meta: { el }, name }, _, next) => {
$(`#${el}`).tab('show');
// apply a fullscreen layout style in Design View (a.k.a design detail)
if (pageEl) {
if (name === DESIGN_ROUTE_NAME) {
......
app/assets/javascripts/design_management_legacy/router/routes.js 0 → 100644
View file @ 4598b27b
import Home from '../pages/index.vue';
import DesignDetail from '../pages/design/index.vue';
import { ROOT_ROUTE_NAME, DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from './constants';
export default [
{
name: ROOT_ROUTE_NAME,
path: '/',
component: Home,
meta: {
el: 'discussion',
},
},
{
name: DESIGNS_ROUTE_NAME,
path: '/designs',
component: Home,
meta: {
el: 'designs',
},
children: [
{
name: DESIGN_ROUTE_NAME,
path: ':id',
component: DesignDetail,
meta: {
el: 'designs',
},
beforeEnter(
{
params: { id },
},
from,
next,
) {
if (typeof id === 'string') {
next();
}
},
props: ({ params: { id } }) => ({ id }),
},
],
},
];
app/assets/javascripts/design_management_new/router/routes.js deleted 100644 → 0
View file @ 5e2323d5
import Home from '../pages/index.vue';
import DesignDetail from '../pages/design/index.vue';
import { DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from './constants';
export default [
{
name: DESIGNS_ROUTE_NAME,
path: '/',
component: Home,
alias: '/designs',
},
{
name: DESIGN_ROUTE_NAME,
path: '/designs/:id',
component: DesignDetail,
beforeEnter(
{
params: { id },
},
_,
next,
) {
if (typeof id === 'string') {
next();
}
},
props: ({ params: { id } }) => ({ id }),
},
];
app/assets/javascripts/pages/projects/issues/show.js
View file @ 4598b27b
......@@ -16,13 +16,13 @@ export default function() {
initSentryErrorStackTraceApp();
initRelatedMergeRequestsApp();
import(/* webpackChunkName: 'design_management' */ '~/design_management')
// This will be removed when we remove the `design_management_moved` feature flag
// See https://gitlab.com/gitlab-org/gitlab/-/issues/223197
import(/* webpackChunkName: 'design_management' */ '~/design_management_legacy')
.then(module => module.default())
.catch(() => {});
// This will be removed when we remove the `design_management_moved` feature flag
// See https://gitlab.com/gitlab-org/gitlab/-/issues/223197
import(/* webpackChunkName: 'design_management' */ '~/design_management_new')
import(/* webpackChunkName: 'design_management' */ '~/design_management')
.then(module => module.default())
.catch(() => {});
......
spec/frontend/design_management/components/delete_button_spec.js
View file @ 4598b27b
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/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/components/design_notes/design_discussion_spec.js
View file @ 4598b27b
......@@ -61,6 +61,10 @@ describe('Design discussions component', () => {
...data,
};
},
provide: {
projectPath: 'project-path',
issueIid: '1',
},
mocks: {
$apollo,
$route: {
......
spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap
View file @ 4598b27b
......@@ -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
......@@ -76,7 +76,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
......@@ -142,7 +142,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
......@@ -208,7 +208,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
......@@ -261,7 +261,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
......@@ -319,7 +319,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
......@@ -389,7 +389,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/components/toolbar/__snapshots__/index_spec.js.snap
View file @ 4598b27b
......@@ -7,6 +7,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
<a
aria-label="Go back to designs"
class="mr-3 text-plain d-flex justify-content-center align-items-center"
data-testid="close-design"
>
<icon-stub
name="close"
......@@ -49,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/components/upload/__snapshots__/button_spec.js.snap
View file @ 4598b27b
......@@ -4,16 +4,18 @@ 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"
variant="default"
>
Upload designs
<!---->
</gl-deprecated-button-stub>
</gl-button-stub>
<input
accept="image/*"
......@@ -27,11 +29,13 @@ 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"
variant="default"
>
Upload designs
......@@ -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,16 +61,18 @@ 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"
variant="default"
>
Upload designs
<!---->
</gl-deprecated-button-stub>
</gl-button-stub>
<input
accept="image/*"
......
spec/frontend/design_management/components/upload/__snapshots__/design_dropzone_spec.js.snap
View file @ 4598b27b
......@@ -5,20 +5,23 @@ 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>
<p
class="gl-mb-0"
>
<gl-sprintf-stub
message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
/>
</p>
</div>
......@@ -43,7 +46,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 +61,9 @@ exports[`Design management dropzone component when dragging renders correct temp
class="mw-50 text-center"
style=""
>
<h3>
<h3
class=""
>
Incoming!
</h3>
......@@ -74,20 +81,23 @@ 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>
<p
class="gl-mb-0"
>
<gl-sprintf-stub
message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
/>
</p>
</div>
......@@ -112,7 +122,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 +137,9 @@ exports[`Design management dropzone component when dragging renders correct temp
class="mw-50 text-center"
style=""
>
<h3>
<h3
class=""
>
Incoming!
</h3>
......@@ -143,20 +157,23 @@ 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>
<p
class="gl-mb-0"
>
<gl-sprintf-stub
message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
/>
</p>
</div>
......@@ -180,7 +197,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 +212,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,20 +232,23 @@ 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>
<p
class="gl-mb-0"
>
<gl-sprintf-stub
message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
/>
</p>
</div>
......@@ -248,7 +272,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 +287,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,20 +307,23 @@ 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>
<p
class="gl-mb-0"
>
<gl-sprintf-stub
message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
/>
</p>
</div>
......@@ -316,7 +347,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 +362,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,20 +382,23 @@ 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>
<p
class="gl-mb-0"
>
<gl-sprintf-stub
message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
/>
</p>
</div>
......@@ -384,7 +422,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 +437,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 +470,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 +485,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/components/upload/__snapshots__/design_version_dropdown_spec.js.snap
View file @ 4598b27b
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Design management design version dropdown component renders design version dropdown button 1`] = `
<gl-deprecated-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-deprecated-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-deprecated-dropdown-item-stub>
<gl-deprecated-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-deprecated-dropdown-item-stub>
</gl-deprecated-dropdown-stub>
</gl-new-dropdown-item-stub>
</gl-new-dropdown-stub>
`;
exports[`Design management design version dropdown component renders design version list 1`] = `
<gl-deprecated-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-deprecated-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-deprecated-dropdown-item-stub>
<gl-deprecated-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-deprecated-dropdown-item-stub>
</gl-deprecated-dropdown-stub>
</gl-new-dropdown-item-stub>
</gl-new-dropdown-stub>
`;
spec/frontend/design_management/components/upload/design_dropzone_spec.js
View file @ 4598b27b
import { shallowMount } from '@vue/test-utils';
import DesignDropzone from '~/design_management/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,18 @@ 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-3', 'gl-text-gray-700']);
expect(findIcon().props('size')).toBe(16);
});
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']);
expect(findIcon().props('size')).toBe(24);
});
});
spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
View file @ 4598b27b
import { shallowMount } from '@vue/test-utils';
import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue';
import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import { GlNewDropdown, GlNewDropdownItem } from '@gitlab/ui';
import mockAllVersions from './mock_data/all_versions';
const LATEST_VERSION_ID = 3;
......@@ -75,9 +75,7 @@ describe('Design management design version dropdown component', () => {
createComponent();
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlDeprecatedDropdown).attributes('text')).toBe(
'Showing Latest Version',
);
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing Latest Version');
});
});
......@@ -85,9 +83,7 @@ describe('Design management design version dropdown component', () => {
createComponent({ maxVersions: 1 });
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlDeprecatedDropdown).attributes('text')).toBe(
'Showing Latest Version',
);
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing Latest Version');
});
});
......@@ -95,7 +91,7 @@ describe('Design management design version dropdown component', () => {
createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) });
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlDeprecatedDropdown).attributes('text')).toBe(`Showing Version #1`);
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe(`Showing Version #1`);
});
});
......@@ -103,9 +99,7 @@ describe('Design management design version dropdown component', () => {
createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) });
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlDeprecatedDropdown).attributes('text')).toBe(
'Showing Latest Version',
);
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing Latest Version');
});
});
......@@ -113,9 +107,7 @@ describe('Design management design version dropdown component', () => {
createComponent();
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.findAll(GlDeprecatedDropdownItem)).toHaveLength(
wrapper.vm.allVersions.length,
);
expect(wrapper.findAll(GlNewDropdownItem)).toHaveLength(wrapper.vm.allVersions.length);
});
});
});
......
spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap
View file @ 4598b27b
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Design management index page designs does not render toolbar when there is no permission 1`] = `
<div>
<div
class="gl-mt-5"
data-testid="designs-root"
>
<!---->
<div
......@@ -11,17 +14,21 @@ exports[`Design management index page designs does not render toolbar when there
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"
......@@ -34,9 +41,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"
......@@ -49,9 +58,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"
......@@ -73,30 +84,45 @@ 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>
<div
class="gl-mt-5"
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-align-items-center"
>
<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
......@@ -117,17 +143,21 @@ exports[`Design management index page designs renders designs list and header wi
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"
......@@ -143,9 +173,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"
......@@ -161,9 +193,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"
......@@ -188,7 +222,10 @@ exports[`Design management index page designs renders designs list and header wi
`;
exports[`Design management index page designs renders error 1`] = `
<div>
<div
class="gl-mt-5"
data-testid="designs-root"
>
<!---->
<div
......@@ -216,7 +253,10 @@ exports[`Design management index page designs renders error 1`] = `
`;
exports[`Design management index page designs renders loading icon 1`] = `
<div>
<div
class="gl-mt-5"
data-testid="designs-root"
>
<!---->
<div
......@@ -235,8 +275,11 @@ exports[`Design management index page designs renders loading icon 1`] = `
</div>
`;
exports[`Design management index page when has no designs renders empty text 1`] = `
<div>
exports[`Design management index page when has no designs renders design dropzone 1`] = `
<div
class="gl-mt-5"
data-testid="designs-root"
>
<!---->
<div
......@@ -246,10 +289,11 @@ exports[`Design management index page when has no designs renders empty text 1`]
class="list-unstyled row"
>
<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/pages/design/__snapshots__/index_spec.js.snap
View file @ 4598b27b
......@@ -10,7 +10,7 @@ exports[`Design management design index page renders design index 1`] = `
<design-destroyer-stub
filenames="test.jpg"
iid="1"
projectpath=""
project-path="project-path"
/>
<!---->
......@@ -60,7 +60,7 @@ exports[`Design management design index page renders design index 1`] = `
designid="test"
discussion="[object Object]"
discussionwithopenform=""
markdownpreviewpath="//preview_markdown?target_type=Issue"
markdownpreviewpath="/project-path/preview_markdown?target_type=Issue"
noteableid="design-id"
/>
......@@ -108,7 +108,7 @@ exports[`Design management design index page renders design index 1`] = `
designid="test"
discussion="[object Object]"
discussionwithopenform=""
markdownpreviewpath="//preview_markdown?target_type=Issue"
markdownpreviewpath="/project-path/preview_markdown?target_type=Issue"
noteableid="design-id"
/>
</gl-collapse-stub>
......@@ -140,7 +140,7 @@ exports[`Design management design index page with error GlAlert is rendered in c
<design-destroyer-stub
filenames="test.jpg"
iid="1"
projectpath=""
project-path="project-path"
/>
<div
......
spec/frontend/design_management/pages/design/index_spec.js
View file @ 4598b27b
......@@ -95,9 +95,12 @@ describe('Design management design index page', () => {
DesignSidebar,
DesignReplyForm,
},
provide: {
issueIid: '1',
projectPath: 'project-path',
},
data() {
return {
issueIid: '1',
activeDiscussion: {
id: null,
source: null,
......@@ -149,7 +152,7 @@ describe('Design management design index page', () => {
expect(findSidebar().props()).toEqual({
design,
markdownPreviewPath: '//preview_markdown?target_type=Issue',
markdownPreviewPath: '/project-path/preview_markdown?target_type=Issue',
resolvedDiscussionsExpanded: false,
});
});
......
spec/frontend/design_management/pages/index_spec.js
View file @ 4598b27b
......@@ -25,6 +25,9 @@ const mockPageEl = {
};
jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageEl);
const scrollIntoViewMock = jest.fn();
HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
const localVue = createLocalVue();
const router = createRouter();
localVue.use(VueRouter);
......@@ -68,6 +71,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({
......@@ -92,19 +97,23 @@ describe('Design management index page', () => {
};
wrapper = shallowMount(Index, {
data() {
return {
designs,
allVersions,
permissions: {
createDesign,
},
};
},
mocks: { $apollo },
localVue,
router,
stubs: { DesignDestroyer, ApolloMutation, ...stubs },
attachToDocument: true,
});
wrapper.setData({
designs,
allVersions,
provide: {
projectPath: 'project-path',
issueIid: '1',
permissions: {
createDesign,
},
});
}
......@@ -117,10 +126,8 @@ describe('Design management index page', () => {
it('renders loading icon', () => {
createComponent({ loading: true });
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.element).toMatchSnapshot();
});
});
it('renders error', () => {
createComponent();
......@@ -135,25 +142,35 @@ describe('Design management index page', () => {
it('renders a toolbar with buttons when there are designs', () => {
createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
return wrapper.vm.$nextTick().then(() => {
expect(findToolbar().exists()).toBe(true);
});
});
it('renders designs list and header with upload button', () => {
createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.element).toMatchSnapshot();
});
});
it('does not render toolbar when there is no permission', () => {
createComponent({ designs: mockDesigns, allVersions: [mockVersion], createDesign: false });
return wrapper.vm.$nextTick().then(() => {
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',
]);
});
});
......@@ -162,11 +179,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);
......@@ -185,7 +211,7 @@ describe('Design management index page', () => {
mutation: uploadDesignQuery,
variables: {
files: [{ name: 'test' }],
projectPath: '',
projectPath: 'project-path',
iid: '1',
},
optimisticResponse: {
......@@ -231,11 +257,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');
});
});
......@@ -384,8 +416,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', () => {
......@@ -442,9 +473,9 @@ describe('Design management index page', () => {
});
});
it('on latest version when has no designs does not render toolbar buttons', () => {
it('on latest version when has no designs toolbar buttons are invisible', () => {
createComponent({ designs: [], allVersions: [mockVersion] });
expect(findToolbar().exists()).toBe(false);
expect(findToolbar().isVisible()).toBe(false);
});
describe('on non-latest version', () => {
......@@ -535,9 +566,18 @@ describe('Design management index page', () => {
it('ensures fullscreen layout is not applied', () => {
createComponent(true);
wrapper.vm.$router.push('/designs');
wrapper.vm.$router.push('/');
expect(mockPageEl.classList.remove).toHaveBeenCalledTimes(1);
expect(mockPageEl.classList.remove).toHaveBeenCalledWith(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
});
it('should trigger a scrollIntoView method if designs route is detected', () => {
router.replace({
path: '/designs',
});
createComponent(true);
expect(scrollIntoViewMock).toHaveBeenCalled();
});
});
});
spec/frontend/design_management/router_spec.js
View file @ 4598b27b
......@@ -5,11 +5,7 @@ import App from '~/design_management/components/app.vue';
import Designs from '~/design_management/pages/index.vue';
import DesignDetail from '~/design_management/pages/design/index.vue';
import createRouter from '~/design_management/router';
import {
ROOT_ROUTE_NAME,
DESIGNS_ROUTE_NAME,
DESIGN_ROUTE_NAME,
} from '~/design_management/router/constants';
import { DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from '~/design_management/router/constants';
import '~/commons/bootstrap';
function factory(routeArg) {
......@@ -49,7 +45,7 @@ describe('Design management router', () => {
window.location.hash = '';
});
describe.each([['/'], [{ name: ROOT_ROUTE_NAME }]])('root route', routeArg => {
describe.each([['/'], [{ name: DESIGNS_ROUTE_NAME }]])('root route', routeArg => {
it('pushes home component', () => {
const wrapper = factory(routeArg);
......@@ -57,14 +53,6 @@ describe('Design management router', () => {
});
});
describe.each([['/designs'], [{ name: DESIGNS_ROUTE_NAME }]])('designs route', routeArg => {
it('pushes designs root component', () => {
const wrapper = factory(routeArg);
expect(wrapper.find(Designs).exists()).toBe(true);
});
});
describe.each([['/designs/1'], [{ name: DESIGN_ROUTE_NAME, params: { id: '1' } }]])(
'designs detail route',
routeArg => {
......
spec/frontend/design_management_new/components/delete_button_spec.js → spec/frontend/design_management_legacy/components/delete_button_spec.js
View file @ 4598b27b
import { shallowMount } from '@vue/test-utils';
import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
import BatchDeleteButton from '~/design_management_new/components/delete_button.vue';
import { GlDeprecatedButton, GlModal, GlModalDirective } from '@gitlab/ui';
import BatchDeleteButton from '~/design_management_legacy/components/delete_button.vue';
describe('Batch delete button component', () => {
let wrapper;
const findButton = () => wrapper.find(GlButton);
const findButton = () => wrapper.find(GlDeprecatedButton);
const findModal = () => wrapper.find(GlModal);
function createComponent(isDeleting = false) {
......
spec/frontend/design_management_new/components/design_note_pin_spec.js → spec/frontend/design_management_legacy/components/design_note_pin_spec.js
View file @ 4598b27b
import { shallowMount } from '@vue/test-utils';
import DesignNotePin from '~/design_management_new/components/design_note_pin.vue';
import DesignNotePin from '~/design_management_legacy/components/design_note_pin.vue';
describe('Design note pin component', () => {
let wrapper;
......
spec/frontend/design_management_new/components/design_notes/design_discussion_spec.js → spec/frontend/design_management_legacy/components/design_notes/design_discussion_spec.js
View file @ 4598b27b
import { mount } from '@vue/test-utils';
import { GlLoadingIcon } from '@gitlab/ui';
import notes from '../../mock_data/notes';
import DesignDiscussion from '~/design_management_new/components/design_notes/design_discussion.vue';
import DesignNote from '~/design_management_new/components/design_notes/design_note.vue';
import DesignReplyForm from '~/design_management_new/components/design_notes/design_reply_form.vue';
import createNoteMutation from '~/design_management_new/graphql/mutations/create_note.mutation.graphql';
import toggleResolveDiscussionMutation from '~/design_management_new/graphql/mutations/toggle_resolve_discussion.mutation.graphql';
import DesignDiscussion from '~/design_management_legacy/components/design_notes/design_discussion.vue';
import DesignNote from '~/design_management_legacy/components/design_notes/design_note.vue';
import DesignReplyForm from '~/design_management_legacy/components/design_notes/design_reply_form.vue';
import createNoteMutation from '~/design_management_legacy/graphql/mutations/create_note.mutation.graphql';
import toggleResolveDiscussionMutation from '~/design_management_legacy/graphql/mutations/toggle_resolve_discussion.mutation.graphql';
import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
import ToggleRepliesWidget from '~/design_management_new/components/design_notes/toggle_replies_widget.vue';
import ToggleRepliesWidget from '~/design_management_legacy/components/design_notes/toggle_replies_widget.vue';
const discussion = {
id: '0',
......@@ -61,10 +61,6 @@ describe('Design discussions component', () => {
...data,
};
},
provide: {
projectPath: 'project-path',
issueIid: '1',
},
mocks: {
$apollo,
$route: {
......
spec/frontend/design_management_new/components/design_notes/design_note_spec.js → spec/frontend/design_management_legacy/components/design_notes/design_note_spec.js
View file @ 4598b27b
import { shallowMount } from '@vue/test-utils';
import { ApolloMutation } from 'vue-apollo';
import DesignNote from '~/design_management_new/components/design_notes/design_note.vue';
import DesignNote from '~/design_management_legacy/components/design_notes/design_note.vue';
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import DesignReplyForm from '~/design_management_new/components/design_notes/design_reply_form.vue';
import DesignReplyForm from '~/design_management_legacy/components/design_notes/design_reply_form.vue';
const scrollIntoViewMock = jest.fn();
const note = {
......
spec/frontend/design_management_new/components/design_notes/design_reply_form_spec.js → spec/frontend/design_management_legacy/components/design_notes/design_reply_form_spec.js
View file @ 4598b27b
import { mount } from '@vue/test-utils';
import DesignReplyForm from '~/design_management_new/components/design_notes/design_reply_form.vue';
import DesignReplyForm from '~/design_management_legacy/components/design_notes/design_reply_form.vue';
const showModal = jest.fn();
......
spec/frontend/design_management_new/components/design_notes/toggle_replies_widget_spec.js → spec/frontend/design_management_legacy/components/design_notes/toggle_replies_widget_spec.js
View file @ 4598b27b
import { shallowMount } from '@vue/test-utils';
import { GlIcon, GlButton, GlLink } from '@gitlab/ui';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import ToggleRepliesWidget from '~/design_management_new/components/design_notes/toggle_replies_widget.vue';
import ToggleRepliesWidget from '~/design_management_legacy/components/design_notes/toggle_replies_widget.vue';
import notes from '../../mock_data/notes';
describe('Toggle replies widget component', () => {
......
spec/frontend/design_management_new/components/design_overlay_spec.js → spec/frontend/design_management_legacy/components/design_overlay_spec.js
View file @ 4598b27b
import { mount } from '@vue/test-utils';
import DesignOverlay from '~/design_management_new/components/design_overlay.vue';
import updateActiveDiscussion from '~/design_management_new/graphql/mutations/update_active_discussion.mutation.graphql';
import DesignOverlay from '~/design_management_legacy/components/design_overlay.vue';
import updateActiveDiscussion from '~/design_management_legacy/graphql/mutations/update_active_discussion.mutation.graphql';
import notes from '../mock_data/notes';
import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '~/design_management_new/constants';
import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '~/design_management_legacy/constants';
const mutate = jest.fn(() => Promise.resolve());
......
spec/frontend/design_management_new/components/design_presentation_spec.js → spec/frontend/design_management_legacy/components/design_presentation_spec.js
View file @ 4598b27b
import { shallowMount } from '@vue/test-utils';
import DesignPresentation from '~/design_management_new/components/design_presentation.vue';
import DesignOverlay from '~/design_management_new/components/design_overlay.vue';
import DesignPresentation from '~/design_management_legacy/components/design_presentation.vue';
import DesignOverlay from '~/design_management_legacy/components/design_overlay.vue';
const mockOverlayData = {
overlayDimensions: {
......
spec/frontend/design_management_new/components/design_scaler_spec.js → spec/frontend/design_management_legacy/components/design_scaler_spec.js
View file @ 4598b27b
import { shallowMount } from '@vue/test-utils';
import DesignScaler from '~/design_management_new/components/design_scaler.vue';
import DesignScaler from '~/design_management_legacy/components/design_scaler.vue';
describe('Design management design scaler component', () => {
let wrapper;
......
spec/frontend/design_management_new/components/design_sidebar_spec.js → spec/frontend/design_management_legacy/components/design_sidebar_spec.js
View file @ 4598b27b
import { shallowMount } from '@vue/test-utils';
import { GlCollapse, GlPopover } from '@gitlab/ui';
import Cookies from 'js-cookie';
import DesignSidebar from '~/design_management_new/components/design_sidebar.vue';
import DesignSidebar from '~/design_management_legacy/components/design_sidebar.vue';
import Participants from '~/sidebar/components/participants/participants.vue';
import DesignDiscussion from '~/design_management_new/components/design_notes/design_discussion.vue';
import DesignDiscussion from '~/design_management_legacy/components/design_notes/design_discussion.vue';
import design from '../mock_data/design';
import updateActiveDiscussionMutation from '~/design_management_new/graphql/mutations/update_active_discussion.mutation.graphql';
import updateActiveDiscussionMutation from '~/design_management_legacy/graphql/mutations/update_active_discussion.mutation.graphql';
const updateActiveDiscussionMutationVariables = {
mutation: updateActiveDiscussionMutation,
......
spec/frontend/design_management_new/components/image_spec.js → spec/frontend/design_management_legacy/components/image_spec.js
View file @ 4598b27b
import { shallowMount } from '@vue/test-utils';
import { GlIcon } from '@gitlab/ui';
import DesignImage from '~/design_management_new/components/image.vue';
import DesignImage from '~/design_management_legacy/components/image.vue';
describe('Design management large image component', () => {
let wrapper;
......
spec/frontend/design_management_new/components/list/__snapshots__/item_spec.js.snap → spec/frontend/design_management_legacy/components/list/__snapshots__/item_spec.js.snap
View file @ 4598b27b
......@@ -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 design-list-item-new"
class="card cursor-pointer text-plain js-design-list-item design-list-item"
to="[object Object]"
>
<div
......@@ -76,7 +76,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 design-list-item-new"
class="card cursor-pointer text-plain js-design-list-item design-list-item"
to="[object Object]"
>
<div
......@@ -142,7 +142,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 design-list-item-new"
class="card cursor-pointer text-plain js-design-list-item design-list-item"
to="[object Object]"
>
<div
......@@ -208,7 +208,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 design-list-item-new"
class="card cursor-pointer text-plain js-design-list-item design-list-item"
to="[object Object]"
>
<div
......@@ -261,7 +261,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 design-list-item-new"
class="card cursor-pointer text-plain js-design-list-item design-list-item"
to="[object Object]"
>
<div
......@@ -319,7 +319,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 design-list-item-new"
class="card cursor-pointer text-plain js-design-list-item design-list-item"
to="[object Object]"
>
<div
......@@ -389,7 +389,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 design-list-item-new"
class="card cursor-pointer text-plain js-design-list-item design-list-item"
to="[object Object]"
>
<div
......
spec/frontend/design_management_new/components/list/item_spec.js → spec/frontend/design_management_legacy/components/list/item_spec.js
View file @ 4598b27b
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
import VueRouter from 'vue-router';
import Item from '~/design_management_new/components/list/item.vue';
import Item from '~/design_management_legacy/components/list/item.vue';
const localVue = createLocalVue();
localVue.use(VueRouter);
......
spec/frontend/design_management_new/components/toolbar/__snapshots__/index_spec.js.snap → spec/frontend/design_management_legacy/components/toolbar/__snapshots__/index_spec.js.snap
View file @ 4598b27b
......@@ -7,7 +7,6 @@ exports[`Design management toolbar component renders design and updated data 1`]
<a
aria-label="Go back to designs"
class="mr-3 text-plain d-flex justify-content-center align-items-center"
data-testid="close-design"
>
<icon-stub
name="close"
......@@ -50,7 +49,6 @@ 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/toolbar/index_spec.js → spec/frontend/design_management_legacy/components/toolbar/index_spec.js
View file @ 4598b27b
import { createLocalVue, shallowMount } from '@vue/test-utils';
import VueRouter from 'vue-router';
import Toolbar from '~/design_management_new/components/toolbar/index.vue';
import DeleteButton from '~/design_management_new/components/delete_button.vue';
import { DESIGNS_ROUTE_NAME } from '~/design_management_new/router/constants';
import Toolbar from '~/design_management_legacy/components/toolbar/index.vue';
import DeleteButton from '~/design_management_legacy/components/delete_button.vue';
import { DESIGNS_ROUTE_NAME } from '~/design_management_legacy/router/constants';
import { GlDeprecatedButton } from '@gitlab/ui';
const localVue = createLocalVue();
......
spec/frontend/design_management_new/components/toolbar/pagination_button_spec.js → spec/frontend/design_management_legacy/components/toolbar/pagination_button_spec.js
View file @ 4598b27b
import { createLocalVue, shallowMount } from '@vue/test-utils';
import VueRouter from 'vue-router';
import PaginationButton from '~/design_management_new/components/toolbar/pagination_button.vue';
import { DESIGN_ROUTE_NAME } from '~/design_management_new/router/constants';
import PaginationButton from '~/design_management_legacy/components/toolbar/pagination_button.vue';
import { DESIGN_ROUTE_NAME } from '~/design_management_legacy/router/constants';
const localVue = createLocalVue();
localVue.use(VueRouter);
......
spec/frontend/design_management_new/components/toolbar/pagination_spec.js → spec/frontend/design_management_legacy/components/toolbar/pagination_spec.js
View file @ 4598b27b
/* global Mousetrap */
import 'mousetrap';
import { shallowMount } from '@vue/test-utils';
import Pagination from '~/design_management_new/components/toolbar/pagination.vue';
import { DESIGN_ROUTE_NAME } from '~/design_management_new/router/constants';
import Pagination from '~/design_management_legacy/components/toolbar/pagination.vue';
import { DESIGN_ROUTE_NAME } from '~/design_management_legacy/router/constants';
const push = jest.fn();
const $router = {
......
spec/frontend/design_management_new/components/upload/__snapshots__/button_spec.js.snap → spec/frontend/design_management_legacy/components/upload/__snapshots__/button_spec.js.snap
View file @ 4598b27b
......@@ -4,18 +4,16 @@ exports[`Design management upload button component renders inverted upload desig
<div
isinverted="true"
>
<gl-button-stub
category="tertiary"
icon=""
size="small"
<gl-deprecated-button-stub
size="md"
title="Adding a design with the same filename replaces the file in a new version."
variant="default"
variant="success"
>
Upload designs
<!---->
</gl-button-stub>
</gl-deprecated-button-stub>
<input
accept="image/*"
......@@ -29,13 +27,11 @@ exports[`Design management upload button component renders inverted upload desig
exports[`Design management upload button component renders loading icon 1`] = `
<div>
<gl-button-stub
category="tertiary"
<gl-deprecated-button-stub
disabled="true"
icon=""
size="small"
size="md"
title="Adding a design with the same filename replaces the file in a new version."
variant="default"
variant="success"
>
Upload designs
......@@ -47,7 +43,7 @@ exports[`Design management upload button component renders loading icon 1`] = `
label="Loading"
size="sm"
/>
</gl-button-stub>
</gl-deprecated-button-stub>
<input
accept="image/*"
......@@ -61,18 +57,16 @@ exports[`Design management upload button component renders loading icon 1`] = `
exports[`Design management upload button component renders upload design button 1`] = `
<div>
<gl-button-stub
category="tertiary"
icon=""
size="small"
<gl-deprecated-button-stub
size="md"
title="Adding a design with the same filename replaces the file in a new version."
variant="default"
variant="success"
>
Upload designs
<!---->
</gl-button-stub>
</gl-deprecated-button-stub>
<input
accept="image/*"
......
spec/frontend/design_management_new/components/upload/__snapshots__/design_dropzone_spec.js.snap → spec/frontend/design_management_legacy/components/upload/__snapshots__/design_dropzone_spec.js.snap
View file @ 4598b27b
......@@ -5,23 +5,20 @@ 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 gl-align-items-center gl-justify-content-center gl-p-3"
class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
>
<div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
data-testid="dropzone-area"
class="d-flex-center flex-column text-center"
>
<gl-icon-stub
class="gl-mb-2"
name="upload"
size="24"
class="mb-4"
name="doc-new"
size="48"
/>
<p
class="gl-mb-0"
>
<p>
<gl-sprintf-stub
message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
/>
</p>
</div>
......@@ -46,9 +43,7 @@ exports[`Design management dropzone component when dragging renders correct temp
class="mw-50 text-center"
style="display: none;"
>
<h3
class=""
>
<h3>
Oh no!
</h3>
......@@ -61,9 +56,7 @@ exports[`Design management dropzone component when dragging renders correct temp
class="mw-50 text-center"
style=""
>
<h3
class=""
>
<h3>
Incoming!
</h3>
......@@ -81,23 +74,20 @@ 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 gl-align-items-center gl-justify-content-center gl-p-3"
class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
>
<div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
data-testid="dropzone-area"
class="d-flex-center flex-column text-center"
>
<gl-icon-stub
class="gl-mb-2"
name="upload"
size="24"
class="mb-4"
name="doc-new"
size="48"
/>
<p
class="gl-mb-0"
>
<p>
<gl-sprintf-stub
message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
/>
</p>
</div>
......@@ -122,9 +112,7 @@ exports[`Design management dropzone component when dragging renders correct temp
class="mw-50 text-center"
style="display: none;"
>
<h3
class=""
>
<h3>
Oh no!
</h3>
......@@ -137,9 +125,7 @@ exports[`Design management dropzone component when dragging renders correct temp
class="mw-50 text-center"
style=""
>
<h3
class=""
>
<h3>
Incoming!
</h3>
......@@ -157,23 +143,20 @@ 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 gl-align-items-center gl-justify-content-center gl-p-3"
class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
>
<div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
data-testid="dropzone-area"
class="d-flex-center flex-column text-center"
>
<gl-icon-stub
class="gl-mb-2"
name="upload"
size="24"
class="mb-4"
name="doc-new"
size="48"
/>
<p
class="gl-mb-0"
>
<p>
<gl-sprintf-stub
message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
/>
</p>
</div>
......@@ -197,9 +180,7 @@ exports[`Design management dropzone component when dragging renders correct temp
<div
class="mw-50 text-center"
>
<h3
class=""
>
<h3>
Oh no!
</h3>
......@@ -212,9 +193,7 @@ exports[`Design management dropzone component when dragging renders correct temp
class="mw-50 text-center"
style="display: none;"
>
<h3
class=""
>
<h3>
Incoming!
</h3>
......@@ -232,23 +211,20 @@ 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 gl-align-items-center gl-justify-content-center gl-p-3"
class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
>
<div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
data-testid="dropzone-area"
class="d-flex-center flex-column text-center"
>
<gl-icon-stub
class="gl-mb-2"
name="upload"
size="24"
class="mb-4"
name="doc-new"
size="48"
/>
<p
class="gl-mb-0"
>
<p>
<gl-sprintf-stub
message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
/>
</p>
</div>
......@@ -272,9 +248,7 @@ exports[`Design management dropzone component when dragging renders correct temp
<div
class="mw-50 text-center"
>
<h3
class=""
>
<h3>
Oh no!
</h3>
......@@ -287,9 +261,7 @@ exports[`Design management dropzone component when dragging renders correct temp
class="mw-50 text-center"
style="display: none;"
>
<h3
class=""
>
<h3>
Incoming!
</h3>
......@@ -307,23 +279,20 @@ 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 gl-align-items-center gl-justify-content-center gl-p-3"
class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
>
<div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
data-testid="dropzone-area"
class="d-flex-center flex-column text-center"
>
<gl-icon-stub
class="gl-mb-2"
name="upload"
size="24"
class="mb-4"
name="doc-new"
size="48"
/>
<p
class="gl-mb-0"
>
<p>
<gl-sprintf-stub
message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
/>
</p>
</div>
......@@ -347,9 +316,7 @@ exports[`Design management dropzone component when dragging renders correct temp
<div
class="mw-50 text-center"
>
<h3
class=""
>
<h3>
Oh no!
</h3>
......@@ -362,9 +329,7 @@ exports[`Design management dropzone component when dragging renders correct temp
class="mw-50 text-center"
style="display: none;"
>
<h3
class=""
>
<h3>
Incoming!
</h3>
......@@ -382,23 +347,20 @@ 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 gl-align-items-center gl-justify-content-center gl-p-3"
class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
>
<div
class="gl-display-flex gl-align-items-center gl-justify-content-center gl-text-center gl-flex-direction-column"
data-testid="dropzone-area"
class="d-flex-center flex-column text-center"
>
<gl-icon-stub
class="gl-mb-2"
name="upload"
size="24"
class="mb-4"
name="doc-new"
size="48"
/>
<p
class="gl-mb-0"
>
<p>
<gl-sprintf-stub
message="Drop or %{linkStart}upload%{linkEnd} designs to attach"
message="%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}."
/>
</p>
</div>
......@@ -422,9 +384,7 @@ exports[`Design management dropzone component when no slot provided renders defa
<div
class="mw-50 text-center"
>
<h3
class=""
>
<h3>
Oh no!
</h3>
......@@ -437,9 +397,7 @@ exports[`Design management dropzone component when no slot provided renders defa
class="mw-50 text-center"
style="display: none;"
>
<h3
class=""
>
<h3>
Incoming!
</h3>
......@@ -470,9 +428,7 @@ exports[`Design management dropzone component when slot provided renders dropzon
<div
class="mw-50 text-center"
>
<h3
class=""
>
<h3>
Oh no!
</h3>
......@@ -485,9 +441,7 @@ exports[`Design management dropzone component when slot provided renders dropzon
class="mw-50 text-center"
style="display: none;"
>
<h3
class=""
>
<h3>
Incoming!
</h3>
......
spec/frontend/design_management_new/components/upload/__snapshots__/design_version_dropdown_spec.js.snap → spec/frontend/design_management_legacy/components/upload/__snapshots__/design_version_dropdown_spec.js.snap
View file @ 4598b27b
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Design management design version dropdown component renders design version dropdown button 1`] = `
<gl-new-dropdown-stub
category="tertiary"
<gl-dropdown-stub
class="design-version-dropdown"
headertext=""
issueiid=""
projectpath=""
size="small"
text="Showing Latest Version"
variant="default"
variant="link"
>
<gl-new-dropdown-item-stub
avatarurl=""
iconcolor=""
iconname=""
iconrightname=""
secondarytext=""
>
<gl-dropdown-item-stub>
<router-link-stub
class="d-flex js-version-link"
to="[object Object]"
......@@ -40,14 +31,8 @@ exports[`Design management design version dropdown component renders design vers
class="fa fa-check pull-right"
/>
</router-link-stub>
</gl-new-dropdown-item-stub>
<gl-new-dropdown-item-stub
avatarurl=""
iconcolor=""
iconname=""
iconrightname=""
secondarytext=""
>
</gl-dropdown-item-stub>
<gl-dropdown-item-stub>
<router-link-stub
class="d-flex js-version-link"
to="[object Object]"
......@@ -66,28 +51,19 @@ exports[`Design management design version dropdown component renders design vers
<!---->
</router-link-stub>
</gl-new-dropdown-item-stub>
</gl-new-dropdown-stub>
</gl-dropdown-item-stub>
</gl-dropdown-stub>
`;
exports[`Design management design version dropdown component renders design version list 1`] = `
<gl-new-dropdown-stub
category="tertiary"
<gl-dropdown-stub
class="design-version-dropdown"
headertext=""
issueiid=""
projectpath=""
size="small"
text="Showing Latest Version"
variant="default"
variant="link"
>
<gl-new-dropdown-item-stub
avatarurl=""
iconcolor=""
iconname=""
iconrightname=""
secondarytext=""
>
<gl-dropdown-item-stub>
<router-link-stub
class="d-flex js-version-link"
to="[object Object]"
......@@ -110,14 +86,8 @@ exports[`Design management design version dropdown component renders design vers
class="fa fa-check pull-right"
/>
</router-link-stub>
</gl-new-dropdown-item-stub>
<gl-new-dropdown-item-stub
avatarurl=""
iconcolor=""
iconname=""
iconrightname=""
secondarytext=""
>
</gl-dropdown-item-stub>
<gl-dropdown-item-stub>
<router-link-stub
class="d-flex js-version-link"
to="[object Object]"
......@@ -136,6 +106,6 @@ exports[`Design management design version dropdown component renders design vers
<!---->
</router-link-stub>
</gl-new-dropdown-item-stub>
</gl-new-dropdown-stub>
</gl-dropdown-item-stub>
</gl-dropdown-stub>
`;
spec/frontend/design_management_new/components/upload/button_spec.js → spec/frontend/design_management_legacy/components/upload/button_spec.js
View file @ 4598b27b
import { shallowMount } from '@vue/test-utils';
import UploadButton from '~/design_management_new/components/upload/button.vue';
import UploadButton from '~/design_management_legacy/components/upload/button.vue';
describe('Design management upload button component', () => {
let wrapper;
......
spec/frontend/design_management_new/components/upload/design_dropzone_spec.js → spec/frontend/design_management_legacy/components/upload/design_dropzone_spec.js
View file @ 4598b27b
import { shallowMount } from '@vue/test-utils';
import DesignDropzone from '~/design_management_new/components/upload/design_dropzone.vue';
import DesignDropzone from '~/design_management_legacy/components/upload/design_dropzone.vue';
import createFlash from '~/flash';
import { GlIcon } from '@gitlab/ui';
jest.mock('~/flash');
......@@ -13,16 +12,10 @@ 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 = {}, props = {} } = {}) {
function createComponent({ slots = {}, data = {} } = {}) {
wrapper = shallowMount(DesignDropzone, {
slots,
propsData: {
hasDesigns: true,
...props,
},
data() {
return data;
},
......@@ -136,18 +129,4 @@ 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-3', 'gl-text-gray-700']);
expect(findIcon().props('size')).toBe(16);
});
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']);
expect(findIcon().props('size')).toBe(24);
});
});
spec/frontend/design_management_new/components/upload/design_version_dropdown_spec.js → spec/frontend/design_management_legacy/components/upload/design_version_dropdown_spec.js
View file @ 4598b27b
import { shallowMount } from '@vue/test-utils';
import DesignVersionDropdown from '~/design_management_new/components/upload/design_version_dropdown.vue';
import { GlNewDropdown, GlNewDropdownItem } from '@gitlab/ui';
import DesignVersionDropdown from '~/design_management_legacy/components/upload/design_version_dropdown.vue';
import { GlDropdown, GlDropdownItem } 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(GlNewDropdown).attributes('text')).toBe('Showing Latest Version');
expect(wrapper.find(GlDropdown).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(GlNewDropdown).attributes('text')).toBe('Showing Latest Version');
expect(wrapper.find(GlDropdown).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(GlNewDropdown).attributes('text')).toBe(`Showing Version #1`);
expect(wrapper.find(GlDropdown).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(GlNewDropdown).attributes('text')).toBe('Showing Latest Version');
expect(wrapper.find(GlDropdown).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(GlNewDropdownItem)).toHaveLength(wrapper.vm.allVersions.length);
expect(wrapper.findAll(GlDropdownItem)).toHaveLength(wrapper.vm.allVersions.length);
});
});
});
......
spec/frontend/design_management_new/pages/__snapshots__/index_spec.js.snap → spec/frontend/design_management_legacy/pages/__snapshots__/index_spec.js.snap
View file @ 4598b27b
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Design management index page designs does not render toolbar when there is no permission 1`] = `
<div
class="gl-mt-5"
data-testid="designs-root"
>
<div>
<!---->
<div
......@@ -14,21 +11,17 @@ exports[`Design management index page designs does not render toolbar when there
class="list-unstyled row"
>
<li
class="gl-flex-direction-column col-md-6 col-lg-3 gl-mb-3"
data-testid="design-dropzone-wrapper"
class="col-md-6 col-lg-4 mb-3"
>
<design-dropzone-stub
class="design-list-item design-list-item-new"
hasdesigns="true"
class="design-list-item"
/>
</li>
<li
class="col-md-6 col-lg-3 gl-mb-3"
>
<design-dropzone-stub
hasdesigns="true"
class="col-md-6 col-lg-4 mb-3"
>
<design-dropzone-stub>
<design-stub
event="NONE"
filename="design-1-name"
......@@ -41,11 +34,9 @@ exports[`Design management index page designs does not render toolbar when there
<!---->
</li>
<li
class="col-md-6 col-lg-3 gl-mb-3"
>
<design-dropzone-stub
hasdesigns="true"
class="col-md-6 col-lg-4 mb-3"
>
<design-dropzone-stub>
<design-stub
event="NONE"
filename="design-2-name"
......@@ -58,11 +49,9 @@ exports[`Design management index page designs does not render toolbar when there
<!---->
</li>
<li
class="col-md-6 col-lg-3 gl-mb-3"
>
<design-dropzone-stub
hasdesigns="true"
class="col-md-6 col-lg-4 mb-3"
>
<design-dropzone-stub>
<design-stub
event="NONE"
filename="design-3-name"
......@@ -84,45 +73,30 @@ 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-5"
data-testid="designs-root"
>
<div>
<header
class="row-content-block border-top-0 p-2 d-flex"
>
<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"
class="d-flex justify-content-between align-items-center w-100"
>
Designs
</span>
<design-version-dropdown-stub />
</div>
<div
class="qa-selector-toolbar gl-display-flex gl-align-items-center"
class="qa-selector-toolbar d-flex"
>
<gl-button-stub
category="tertiary"
class="gl-mr-2 js-select-all"
icon=""
size="small"
<gl-deprecated-button-stub
class="mr-2 js-select-all"
size="md"
variant="link"
>
Select all
</gl-button-stub>
</gl-deprecated-button-stub>
<div>
<delete-button-stub
buttonclass="gl-mr-4"
buttonsize="small"
buttonvariant="danger"
buttonclass="btn-danger btn-inverted mr-2"
buttonvariant=""
>
Delete selected
......@@ -143,21 +117,17 @@ exports[`Design management index page designs renders designs list and header wi
class="list-unstyled row"
>
<li
class="gl-flex-direction-column col-md-6 col-lg-3 gl-mb-3"
data-testid="design-dropzone-wrapper"
class="col-md-6 col-lg-4 mb-3"
>
<design-dropzone-stub
class="design-list-item design-list-item-new"
hasdesigns="true"
class="design-list-item"
/>
</li>
<li
class="col-md-6 col-lg-3 gl-mb-3"
>
<design-dropzone-stub
hasdesigns="true"
class="col-md-6 col-lg-4 mb-3"
>
<design-dropzone-stub>
<design-stub
event="NONE"
filename="design-1-name"
......@@ -173,11 +143,9 @@ exports[`Design management index page designs renders designs list and header wi
/>
</li>
<li
class="col-md-6 col-lg-3 gl-mb-3"
>
<design-dropzone-stub
hasdesigns="true"
class="col-md-6 col-lg-4 mb-3"
>
<design-dropzone-stub>
<design-stub
event="NONE"
filename="design-2-name"
......@@ -193,11 +161,9 @@ exports[`Design management index page designs renders designs list and header wi
/>
</li>
<li
class="col-md-6 col-lg-3 gl-mb-3"
>
<design-dropzone-stub
hasdesigns="true"
class="col-md-6 col-lg-4 mb-3"
>
<design-dropzone-stub>
<design-stub
event="NONE"
filename="design-3-name"
......@@ -222,10 +188,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-5"
data-testid="designs-root"
>
<div>
<!---->
<div
......@@ -253,10 +216,7 @@ exports[`Design management index page designs renders error 1`] = `
`;
exports[`Design management index page designs renders loading icon 1`] = `
<div
class="gl-mt-5"
data-testid="designs-root"
>
<div>
<!---->
<div
......@@ -275,11 +235,8 @@ exports[`Design management index page designs renders loading icon 1`] = `
</div>
`;
exports[`Design management index page when has no designs renders design dropzone 1`] = `
<div
class="gl-mt-5"
data-testid="designs-root"
>
exports[`Design management index page when has no designs renders empty text 1`] = `
<div>
<!---->
<div
......@@ -289,11 +246,10 @@ exports[`Design management index page when has no designs renders design dropzon
class="list-unstyled row"
>
<li
class="col-12"
data-testid="design-dropzone-wrapper"
class="col-md-6 col-lg-4 mb-3"
>
<design-dropzone-stub
class=""
class="design-list-item"
/>
</li>
......
spec/frontend/design_management_new/pages/design/__snapshots__/index_spec.js.snap → spec/frontend/design_management_legacy/pages/design/__snapshots__/index_spec.js.snap
View file @ 4598b27b
......@@ -10,7 +10,7 @@ exports[`Design management design index page renders design index 1`] = `
<design-destroyer-stub
filenames="test.jpg"
iid="1"
project-path="project-path"
projectpath=""
/>
<!---->
......@@ -60,7 +60,7 @@ exports[`Design management design index page renders design index 1`] = `
designid="test"
discussion="[object Object]"
discussionwithopenform=""
markdownpreviewpath="/project-path/preview_markdown?target_type=Issue"
markdownpreviewpath="//preview_markdown?target_type=Issue"
noteableid="design-id"
/>
......@@ -108,7 +108,7 @@ exports[`Design management design index page renders design index 1`] = `
designid="test"
discussion="[object Object]"
discussionwithopenform=""
markdownpreviewpath="/project-path/preview_markdown?target_type=Issue"
markdownpreviewpath="//preview_markdown?target_type=Issue"
noteableid="design-id"
/>
</gl-collapse-stub>
......@@ -140,7 +140,7 @@ exports[`Design management design index page with error GlAlert is rendered in c
<design-destroyer-stub
filenames="test.jpg"
iid="1"
project-path="project-path"
projectpath=""
/>
<div
......
spec/frontend/design_management_new/pages/design/index_spec.js → spec/frontend/design_management_legacy/pages/design/index_spec.js
View file @ 4598b27b
......@@ -3,10 +3,10 @@ import VueRouter from 'vue-router';
import { GlAlert } from '@gitlab/ui';
import { ApolloMutation } from 'vue-apollo';
import createFlash from '~/flash';
import DesignIndex from '~/design_management_new/pages/design/index.vue';
import DesignSidebar from '~/design_management_new/components/design_sidebar.vue';
import DesignPresentation from '~/design_management_new/components/design_presentation.vue';
import createImageDiffNoteMutation from '~/design_management_new/graphql/mutations/create_image_diff_note.mutation.graphql';
import DesignIndex from '~/design_management_legacy/pages/design/index.vue';
import DesignSidebar from '~/design_management_legacy/components/design_sidebar.vue';
import DesignPresentation from '~/design_management_legacy/components/design_presentation.vue';
import createImageDiffNoteMutation from '~/design_management_legacy/graphql/mutations/create_image_diff_note.mutation.graphql';
import design from '../../mock_data/design';
import mockResponseWithDesigns from '../../mock_data/designs';
import mockResponseNoDesigns from '../../mock_data/no_designs';
......@@ -14,11 +14,11 @@ import mockAllVersions from '../../mock_data/all_versions';
import {
DESIGN_NOT_FOUND_ERROR,
DESIGN_VERSION_NOT_EXIST_ERROR,
} from '~/design_management_new/utils/error_messages';
import { DESIGNS_ROUTE_NAME } from '~/design_management_new/router/constants';
import createRouter from '~/design_management_new/router';
import * as utils from '~/design_management_new/utils/design_management_utils';
import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '~/design_management_new/constants';
} from '~/design_management_legacy/utils/error_messages';
import { DESIGNS_ROUTE_NAME } from '~/design_management_legacy/router/constants';
import createRouter from '~/design_management_legacy/router';
import * as utils from '~/design_management_legacy/utils/design_management_utils';
import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '~/design_management_legacy/constants';
jest.mock('~/flash');
jest.mock('mousetrap', () => ({
......@@ -95,12 +95,9 @@ describe('Design management design index page', () => {
DesignSidebar,
DesignReplyForm,
},
provide: {
issueIid: '1',
projectPath: 'project-path',
},
data() {
return {
issueIid: '1',
activeDiscussion: {
id: null,
source: null,
......@@ -152,7 +149,7 @@ describe('Design management design index page', () => {
expect(findSidebar().props()).toEqual({
design,
markdownPreviewPath: '/project-path/preview_markdown?target_type=Issue',
markdownPreviewPath: '//preview_markdown?target_type=Issue',
resolvedDiscussionsExpanded: false,
});
});
......
spec/frontend/design_management_new/pages/index_spec.js → spec/frontend/design_management_legacy/pages/index_spec.js
View file @ 4598b27b
......@@ -2,20 +2,20 @@ import { createLocalVue, shallowMount } from '@vue/test-utils';
import { ApolloMutation } from 'vue-apollo';
import VueRouter from 'vue-router';
import { GlEmptyState } from '@gitlab/ui';
import Index from '~/design_management_new/pages/index.vue';
import uploadDesignQuery from '~/design_management_new/graphql/mutations/upload_design.mutation.graphql';
import DesignDestroyer from '~/design_management_new/components/design_destroyer.vue';
import DesignDropzone from '~/design_management_new/components/upload/design_dropzone.vue';
import DeleteButton from '~/design_management_new/components/delete_button.vue';
import { DESIGNS_ROUTE_NAME } from '~/design_management_new/router/constants';
import Index from '~/design_management_legacy/pages/index.vue';
import uploadDesignQuery from '~/design_management_legacy/graphql/mutations/upload_design.mutation.graphql';
import DesignDestroyer from '~/design_management_legacy/components/design_destroyer.vue';
import DesignDropzone from '~/design_management_legacy/components/upload/design_dropzone.vue';
import DeleteButton from '~/design_management_legacy/components/delete_button.vue';
import { DESIGNS_ROUTE_NAME } from '~/design_management_legacy/router/constants';
import {
EXISTING_DESIGN_DROP_MANY_FILES_MESSAGE,
EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE,
} from '~/design_management_new/utils/error_messages';
} from '~/design_management_legacy/utils/error_messages';
import createFlash from '~/flash';
import createRouter from '~/design_management_new/router';
import * as utils from '~/design_management_new/utils/design_management_utils';
import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '~/design_management_new/constants';
import createRouter from '~/design_management_legacy/router';
import * as utils from '~/design_management_legacy/utils/design_management_utils';
import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '~/design_management_legacy/constants';
jest.mock('~/flash.js');
const mockPageEl = {
......@@ -25,9 +25,6 @@ const mockPageEl = {
};
jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageEl);
const scrollIntoViewMock = jest.fn();
HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
const localVue = createLocalVue();
const router = createRouter();
localVue.use(VueRouter);
......@@ -71,8 +68,6 @@ 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({
......@@ -97,23 +92,19 @@ describe('Design management index page', () => {
};
wrapper = shallowMount(Index, {
data() {
return {
designs,
allVersions,
permissions: {
createDesign,
},
};
},
mocks: { $apollo },
localVue,
router,
stubs: { DesignDestroyer, ApolloMutation, ...stubs },
attachToDocument: true,
provide: {
projectPath: 'project-path',
});
wrapper.setData({
designs,
allVersions,
issueIid: '1',
permissions: {
createDesign,
},
});
}
......@@ -126,8 +117,10 @@ describe('Design management index page', () => {
it('renders loading icon', () => {
createComponent({ loading: true });
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.element).toMatchSnapshot();
});
});
it('renders error', () => {
createComponent();
......@@ -142,35 +135,25 @@ describe('Design management index page', () => {
it('renders a toolbar with buttons when there are designs', () => {
createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
return wrapper.vm.$nextTick().then(() => {
expect(findToolbar().exists()).toBe(true);
});
});
it('renders designs list and header with upload button', () => {
createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.element).toMatchSnapshot();
});
});
it('does not render toolbar when there is no permission', () => {
createComponent({ designs: mockDesigns, allVersions: [mockVersion], createDesign: false });
return wrapper.vm.$nextTick().then(() => {
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',
]);
});
});
......@@ -179,20 +162,11 @@ describe('Design management index page', () => {
createComponent();
});
it('renders design dropzone', () =>
it('renders empty text', () =>
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);
......@@ -211,7 +185,7 @@ describe('Design management index page', () => {
mutation: uploadDesignQuery,
variables: {
files: [{ name: 'test' }],
projectPath: 'project-path',
projectPath: '',
iid: '1',
},
optimisticResponse: {
......@@ -257,17 +231,11 @@ 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');
});
});
......@@ -416,7 +384,8 @@ describe('Design management index page', () => {
it('renders toolbar buttons', () => {
expect(findToolbar().exists()).toBe(true);
expect(findToolbar().isVisible()).toBe(true);
expect(findToolbar().classes()).toContain('d-flex');
expect(findToolbar().classes()).not.toContain('d-none');
});
it('adds two designs to selected designs when their checkboxes are checked', () => {
......@@ -473,9 +442,9 @@ describe('Design management index page', () => {
});
});
it('on latest version when has no designs toolbar buttons are invisible', () => {
it('on latest version when has no designs does not render toolbar buttons', () => {
createComponent({ designs: [], allVersions: [mockVersion] });
expect(findToolbar().isVisible()).toBe(false);
expect(findToolbar().exists()).toBe(false);
});
describe('on non-latest version', () => {
......@@ -566,18 +535,9 @@ describe('Design management index page', () => {
it('ensures fullscreen layout is not applied', () => {
createComponent(true);
wrapper.vm.$router.push('/');
wrapper.vm.$router.push('/designs');
expect(mockPageEl.classList.remove).toHaveBeenCalledTimes(1);
expect(mockPageEl.classList.remove).toHaveBeenCalledWith(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
});
it('should trigger a scrollIntoView method if designs route is detected', () => {
router.replace({
path: '/designs',
});
createComponent(true);
expect(scrollIntoViewMock).toHaveBeenCalled();
});
});
});
spec/frontend/design_management_new/router_spec.js → spec/frontend/design_management_legacy/router_spec.js
View file @ 4598b27b
import { mount, createLocalVue } from '@vue/test-utils';
import { nextTick } from 'vue';
import VueRouter from 'vue-router';
import App from '~/design_management_new/components/app.vue';
import Designs from '~/design_management_new/pages/index.vue';
import DesignDetail from '~/design_management_new/pages/design/index.vue';
import createRouter from '~/design_management_new/router';
import { DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from '~/design_management_new/router/constants';
import App from '~/design_management_legacy/components/app.vue';
import Designs from '~/design_management_legacy/pages/index.vue';
import DesignDetail from '~/design_management_legacy/pages/design/index.vue';
import createRouter from '~/design_management_legacy/router';
import {
ROOT_ROUTE_NAME,
DESIGNS_ROUTE_NAME,
DESIGN_ROUTE_NAME,
} from '~/design_management_legacy/router/constants';
import '~/commons/bootstrap';
function factory(routeArg) {
......@@ -45,7 +49,7 @@ describe('Design management router', () => {
window.location.hash = '';
});
describe.each([['/'], [{ name: DESIGNS_ROUTE_NAME }]])('root route', routeArg => {
describe.each([['/'], [{ name: ROOT_ROUTE_NAME }]])('root route', routeArg => {
it('pushes home component', () => {
const wrapper = factory(routeArg);
......@@ -53,6 +57,14 @@ describe('Design management router', () => {
});
});
describe.each([['/designs'], [{ name: DESIGNS_ROUTE_NAME }]])('designs route', routeArg => {
it('pushes designs root component', () => {
const wrapper = factory(routeArg);
expect(wrapper.find(Designs).exists()).toBe(true);
});
});
describe.each([['/designs/1'], [{ name: DESIGN_ROUTE_NAME, params: { id: '1' } }]])(
'designs detail route',
routeArg => {
......
spec/frontend/design_management_new/utils/cache_update_spec.js → spec/frontend/design_management_legacy/utils/cache_update_spec.js
View file @ 4598b27b
......@@ -5,13 +5,13 @@ import {
updateStoreAfterAddImageDiffNote,
updateStoreAfterUploadDesign,
updateStoreAfterUpdateImageDiffNote,
} from '~/design_management_new/utils/cache_update';
} from '~/design_management_legacy/utils/cache_update';
import {
designDeletionError,
ADD_DISCUSSION_COMMENT_ERROR,
ADD_IMAGE_DIFF_NOTE_ERROR,
UPDATE_IMAGE_DIFF_NOTE_ERROR,
} from '~/design_management_new/utils/error_messages';
} from '~/design_management_legacy/utils/error_messages';
import design from '../mock_data/design';
import createFlash from '~/flash';
......
spec/frontend/design_management_new/utils/design_management_utils_spec.js → spec/frontend/design_management_legacy/utils/design_management_utils_spec.js
View file @ 4598b27b
......@@ -6,7 +6,7 @@ import {
updateImageDiffNoteOptimisticResponse,
isValidDesignFile,
extractDesign,
} from '~/design_management_new/utils/design_management_utils';
} from '~/design_management_legacy/utils/design_management_utils';
import mockResponseNoDesigns from '../mock_data/no_designs';
import mockResponseWithDesigns from '../mock_data/designs';
import mockDesign from '../mock_data/design';
......
spec/frontend/design_management_new/utils/error_messages_spec.js → spec/frontend/design_management_legacy/utils/error_messages_spec.js
View file @ 4598b27b
import {
designDeletionError,
designUploadSkippedWarning,
} from '~/design_management_new/utils/error_messages';
} from '~/design_management_legacy/utils/error_messages';
const mockFilenames = n =>
Array(n)
......
spec/frontend/design_management_new/utils/tracking_spec.js → spec/frontend/design_management_legacy/utils/tracking_spec.js
View file @ 4598b27b
import { mockTracking } from 'helpers/tracking_helper';
import { trackDesignDetailView } from '~/design_management_new/utils/tracking';
import { trackDesignDetailView } from '~/design_management_legacy/utils/tracking';
function getTrackingSpy(key) {
return mockTracking(key, undefined, jest.spyOn);
......
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