Commit 4793d599 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'gvso/gitlab-220964-rename-design-delete-button' into 'master'

Re-name "Delete" button to "Archive" on Design Tab

See merge request gitlab-org/gitlab!38446
parents 64b3b839 ac624954
<script>
import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
import { uniqueId } from 'lodash';
import { s__ } from '~/locale';
import { s__, __ } from '~/locale';
export default {
name: 'DeleteButton',
......@@ -28,6 +28,16 @@ export default {
required: false,
default: 'info',
},
buttonCategory: {
type: String,
required: false,
default: 'primary',
},
buttonIcon: {
type: String,
required: false,
default: undefined,
},
buttonSize: {
type: String,
required: false,
......@@ -38,6 +48,11 @@ export default {
required: false,
default: true,
},
loading: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
......@@ -45,13 +60,13 @@ export default {
};
},
modal: {
title: s__('DesignManagement|Delete designs confirmation'),
title: s__('DesignManagement|Are you sure you want to archive the selected designs?'),
actionPrimary: {
text: s__('Delete'),
attributes: { variant: 'danger' },
text: s__('DesignManagement|Archive designs'),
attributes: { variant: 'warning' },
},
actionCancel: {
text: s__('Cancel'),
text: __('Cancel'),
},
},
};
......@@ -66,14 +81,23 @@ export default {
:action-cancel="$options.modal.actionCancel"
@ok="$emit('deleteSelectedDesigns')"
>
<p>{{ s__('DesignManagement|Are you sure you want to delete the selected designs?') }}</p>
<p>
{{
s__(
'DesignManagement|Archived designs will still be available in previous versions of the design collection.',
)
}}
</p>
</gl-modal>
<gl-button
v-gl-modal-directive="modalId"
:variant="buttonVariant"
:category="buttonCategory"
:size="buttonSize"
:class="buttonClass"
:disabled="isDeleting || !hasSelectedDesigns"
:loading="loading"
:icon="buttonIcon"
>
<slot></slot>
</gl-button>
......
......@@ -74,7 +74,7 @@ export default {
deletion: {
name: 'file-deletion-solid',
classes: 'text-danger-500',
tooltip: __('Deleted in this version'),
tooltip: __('Archived in this version'),
},
};
......
<script>
import { GlDeprecatedButton } from '@gitlab/ui';
import { GlButton, GlIcon } from '@gitlab/ui';
import { __, sprintf } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import Pagination from './pagination.vue';
import DeleteButton from '../delete_button.vue';
......@@ -10,10 +9,10 @@ import { DESIGNS_ROUTE_NAME } from '../../router/constants';
export default {
components: {
Icon,
GlIcon,
Pagination,
DeleteButton,
GlDeprecatedButton,
GlButton,
},
mixins: [timeagoMixin],
props: {
......@@ -92,33 +91,39 @@ export default {
</script>
<template>
<header class="d-flex p-2 bg-white align-items-center js-design-header">
<router-link
:to="{
name: $options.DESIGNS_ROUTE_NAME,
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" />
</router-link>
<div class="overflow-hidden d-flex align-items-center">
<h2 class="m-0 str-truncated-100 gl-font-base">{{ filename }}</h2>
<small v-if="updatedAt" class="text-secondary">{{ updatedText }}</small>
<header
class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-bg-white gl-py-4 gl-pl-4 js-design-header"
>
<div class="gl-display-flex gl-align-items-center">
<router-link
:to="{
name: $options.DESIGNS_ROUTE_NAME,
query: $route.query,
}"
:aria-label="s__('DesignManagement|Go back to designs')"
data-testid="close-design"
class="gl-mr-5 gl-display-flex gl-align-items-center gl-justify-content-center text-plain"
>
<gl-icon name="close" />
</router-link>
<div class="overflow-hidden d-flex align-items-center">
<h2 class="m-0 str-truncated-100 gl-font-base">{{ filename }}</h2>
<small v-if="updatedAt" class="text-secondary">{{ updatedText }}</small>
</div>
</div>
<div class="gl-display-flex gl-align-items-center">
<pagination :id="id" class="gl-mr-3 gl-flex-shrink-0" />
<gl-button :href="image" icon="download" />
<delete-button
v-if="isLatestVersion && canDeleteDesign"
class="gl-ml-3"
:is-deleting="isDeleting"
button-variant="warning"
button-icon="archive"
button-category="secondary"
@deleteSelectedDesigns="$emit('delete')"
/>
</div>
<pagination :id="id" class="ml-auto flex-shrink-0" />
<gl-deprecated-button :href="image" class="mr-2">
<icon :size="18" name="download" />
</gl-deprecated-button>
<delete-button
v-if="isLatestVersion && canDeleteDesign"
:is-deleting="isDeleting"
button-variant="danger"
@deleteSelectedDesigns="$emit('delete')"
>
<icon :size="18" name="remove" />
</delete-button>
</header>
</template>
......@@ -65,7 +65,7 @@ export default {
<template>
<div v-if="designsCount" class="d-flex align-items-center">
{{ paginationText }}
<div class="btn-group ml-3 mr-3">
<div class="btn-group gl-ml-3">
<pagination-button
:design="previousDesign"
:title="s__('DesignManagement|Go to previous design')"
......
......@@ -327,7 +327,7 @@ export default {
v-if="isLatestVersion"
variant="link"
size="small"
class="gl-mr-2 js-select-all"
class="gl-mr-3 js-select-all"
@click="toggleDesignsSelection"
>{{ selectAllButtonText }}
</gl-button>
......@@ -340,14 +340,15 @@ export default {
<delete-button
v-if="isLatestVersion"
:is-deleting="loading"
button-variant="danger"
button-class="gl-mr-4"
button-variant="warning"
button-category="secondary"
button-class="gl-mr-3"
button-size="small"
:loading="loading"
:has-selected-designs="hasSelectedDesigns"
@deleteSelectedDesigns="mutate()"
>
{{ s__('DesignManagement|Delete selected') }}
<gl-loading-icon v-if="loading" inline class="ml-1" />
{{ s__('DesignManagement|Archive selected') }}
</delete-button>
</design-destroyer>
<upload-button v-if="canCreateDesign" :is-saving="isSaving" @upload="onUploadDesign" />
......
......@@ -73,7 +73,7 @@ const someDesignsSkippedMessage = skippedFiles => {
export const designDeletionError = ({ singular = true } = {}) => {
const design = singular ? __('a design') : __('designs');
return sprintf(s__('Could not delete %{design}. Please try again.'), {
return sprintf(s__('Could not archive %{design}. Please try again.'), {
design,
});
};
......
---
title: "Re-name \"Delete\" button to \"Archive\" in Design Management"
merge_request: 38446
author: Getulio Valentin Sánchez @gvso
type: changed
......@@ -3139,6 +3139,9 @@ msgstr ""
msgid "Archived"
msgstr ""
msgid "Archived in this version"
msgstr ""
msgid "Archived project! Repository and other project resources are read only"
msgstr ""
......@@ -6901,6 +6904,9 @@ msgstr ""
msgid "Could not add admins as members"
msgstr ""
msgid "Could not archive %{design}. Please try again."
msgstr ""
msgid "Could not authorize chat nickname. Try again!"
msgstr ""
......@@ -8322,6 +8328,18 @@ msgstr ""
msgid "DesignManagement|Adding a design with the same filename replaces the file in a new version."
msgstr ""
msgid "DesignManagement|Archive designs"
msgstr ""
msgid "DesignManagement|Archive selected"
msgstr ""
msgid "DesignManagement|Archived designs will still be available in previous versions of the design collection."
msgstr ""
msgid "DesignManagement|Are you sure you want to archive the selected designs?"
msgstr ""
msgid "DesignManagement|Are you sure you want to cancel changes to this comment?"
msgstr ""
......
......@@ -2,62 +2,64 @@
exports[`Design management toolbar component renders design and updated data 1`] = `
<header
class="d-flex p-2 bg-white align-items-center js-design-header"
class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-bg-white gl-py-4 gl-pl-4 js-design-header"
>
<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"
size="18"
/>
</a>
<div
class="overflow-hidden d-flex align-items-center"
class="gl-display-flex gl-align-items-center"
>
<h2
class="m-0 str-truncated-100 gl-font-base"
<a
aria-label="Go back to designs"
class="gl-mr-5 gl-display-flex gl-align-items-center gl-justify-content-center text-plain"
data-testid="close-design"
>
test.jpg
</h2>
<gl-icon-stub
name="close"
size="16"
/>
</a>
<small
class="text-secondary"
<div
class="overflow-hidden d-flex align-items-center"
>
Updated 1 hour ago by Test Name
</small>
<h2
class="m-0 str-truncated-100 gl-font-base"
>
test.jpg
</h2>
<small
class="text-secondary"
>
Updated 1 hour ago by Test Name
</small>
</div>
</div>
<pagination-stub
class="ml-auto flex-shrink-0"
id="1"
/>
<gl-deprecated-button-stub
class="mr-2"
href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d"
size="md"
variant="secondary"
<div
class="gl-display-flex gl-align-items-center"
>
<icon-stub
name="download"
size="18"
<pagination-stub
class="gl-mr-3 gl-flex-shrink-0"
id="1"
/>
</gl-deprecated-button-stub>
<delete-button-stub
buttonclass=""
buttonsize="medium"
buttonvariant="danger"
hasselecteddesigns="true"
>
<icon-stub
name="remove"
size="18"
<gl-button-stub
category="tertiary"
href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d"
icon="download"
size="medium"
variant="default"
/>
</delete-button-stub>
<delete-button-stub
buttoncategory="secondary"
buttonclass=""
buttonicon="archive"
buttonsize="medium"
buttonvariant="warning"
class="gl-ml-3"
hasselecteddesigns="true"
/>
</div>
</header>
`;
......@@ -10,7 +10,7 @@ exports[`Design management pagination component renders pagination buttons 1`] =
0 of 2
<div
class="btn-group ml-3 mr-3"
class="btn-group gl-ml-3"
>
<pagination-button-stub
class="js-previous-design"
......
......@@ -3,7 +3,7 @@ import VueRouter from 'vue-router';
import Toolbar from '~/design_management/components/toolbar/index.vue';
import DeleteButton from '~/design_management/components/delete_button.vue';
import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants';
import { GlDeprecatedButton } from '@gitlab/ui';
import { GlButton } from '@gitlab/ui';
const localVue = createLocalVue();
localVue.use(VueRouter);
......@@ -116,7 +116,7 @@ describe('Design management toolbar component', () => {
});
it('renders download button with correct link', () => {
expect(wrapper.find(GlDeprecatedButton).attributes('href')).toBe(
expect(wrapper.find(GlButton).attributes('href')).toBe(
'/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d',
);
});
......
......@@ -111,7 +111,7 @@ exports[`Design management index page designs renders designs list and header wi
>
<gl-button-stub
category="tertiary"
class="gl-mr-2 js-select-all"
class="gl-mr-3 js-select-all"
icon=""
size="small"
variant="link"
......@@ -122,14 +122,14 @@ exports[`Design management index page designs renders designs list and header wi
<div>
<delete-button-stub
buttonclass="gl-mr-4"
buttoncategory="secondary"
buttonclass="gl-mr-3"
buttonsize="small"
buttonvariant="danger"
buttonvariant="warning"
>
Delete selected
<!---->
Archive selected
</delete-button-stub>
</div>
......
......@@ -10,8 +10,8 @@ const mockFilenames = n =>
describe('Error message', () => {
describe('designDeletionError', () => {
const singularMsg = 'Could not delete a design. Please try again.';
const pluralMsg = 'Could not delete designs. Please try again.';
const singularMsg = 'Could not archive a design. Please try again.';
const pluralMsg = 'Could not archive designs. Please try again.';
describe('when [singular=true]', () => {
it.each([[undefined], [true]])('uses singular grammar', singularOption => {
......
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