diff --git a/app/assets/javascripts/design_management/components/design_sidebar.vue b/app/assets/javascripts/design_management/components/design_sidebar.vue
index 8c9e1fe2cc498045289409ded6da433f5ce11aeb..4433c3469f10b70e28361659912dfc40843b10b5 100644
--- a/app/assets/javascripts/design_management/components/design_sidebar.vue
+++ b/app/assets/javascripts/design_management/components/design_sidebar.vue
@@ -11,7 +11,6 @@ import { extractDiscussions, extractParticipants } from '../utils/design_managem
import DesignDiscussion from './design_notes/design_discussion.vue';
import DescriptionForm from './design_description/description_form.vue';
import DesignNoteSignedOut from './design_notes/design_note_signed_out.vue';
-import DesignTodoButton from './design_todo_button.vue';
import DesignDisclosure from './design_disclosure.vue';
export default {
@@ -22,7 +21,6 @@ export default {
GlAccordion,
GlAccordionItem,
GlSkeletonLoader,
- DesignTodoButton,
DescriptionForm,
DesignDisclosure,
},
@@ -139,13 +137,7 @@ export default {
<design-disclosure :open="true">
<template #default>
<div class="image-notes gl-h-full gl-pt-0" @click.self="handleSidebarClick">
- <div
- class="gl-py-4 gl-mb-4 gl-display-flex gl-justify-content-space-between gl-align-items-center gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
- >
- <span>{{ __('To Do') }}</span>
- <design-todo-button :design="design" @error="$emit('todoError', $event)" />
- </div>
- <h2 class="gl-font-weight-bold gl-mt-0">
+ <h2 class="gl-font-weight-bold gl-mt-4">
{{ issue.title }}
</h2>
<a
diff --git a/app/assets/javascripts/design_management/components/design_todo_button.vue b/app/assets/javascripts/design_management/components/design_todo_button.vue
index a1a23d61093811e5e204d0e4362b270993d3486b..00857777e3436662cd4fe41d7644bd5abbcd67ab 100644
--- a/app/assets/javascripts/design_management/components/design_todo_button.vue
+++ b/app/assets/javascripts/design_management/components/design_todo_button.vue
@@ -1,6 +1,8 @@
<script>
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
import todoMarkDoneMutation from '~/graphql_shared/mutations/todo_mark_done.mutation.graphql';
import TodoButton from '~/sidebar/components/todo_toggle/todo_button.vue';
+import { todoLabel } from '~/sidebar/utils';
import createDesignTodoMutation from '../graphql/mutations/create_design_todo.mutation.graphql';
import getDesignQuery from '../graphql/queries/get_design.query.graphql';
import allVersionsMixin from '../mixins/all_versions';
@@ -11,6 +13,10 @@ import { CREATE_DESIGN_TODO_ERROR, DELETE_DESIGN_TODO_ERROR } from '../utils/err
export default {
components: {
TodoButton,
+ GlIcon,
+ },
+ directives: {
+ GlTooltip: GlTooltipDirective,
},
mixins: [allVersionsMixin],
inject: {
@@ -58,6 +64,12 @@ export default {
hasPendingTodo() {
return Boolean(this.pendingTodo);
},
+ buttonIcon() {
+ return this.pendingTodo ? 'todo-done' : 'todo-add';
+ },
+ tooltipLabel() {
+ return todoLabel(this.hasPendingTodo);
+ },
},
methods: {
createTodo() {
@@ -132,10 +144,14 @@ export default {
<template>
<todo-button
+ v-gl-tooltip
+ :title="tooltipLabel"
issuable-type="design"
:issuable-id="design.iid"
:is-todo="hasPendingTodo"
:loading="todoLoading"
@click.stop.prevent="toggleTodo"
- />
+ >
+ <gl-icon :class="{ 'gl-fill-blue-500': pendingTodo }" :name="buttonIcon" />
+ </todo-button>
</template>
diff --git a/app/assets/javascripts/design_management/components/toolbar/index.vue b/app/assets/javascripts/design_management/components/toolbar/index.vue
index b2249da9b256704f6195eb1162124cbff28c577e..61e863b5ecd0ee74dbab7dba7b497dfba47bef7d 100644
--- a/app/assets/javascripts/design_management/components/toolbar/index.vue
+++ b/app/assets/javascripts/design_management/components/toolbar/index.vue
@@ -6,6 +6,7 @@ import { __, s__, sprintf } from '~/locale';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import { DESIGNS_ROUTE_NAME } from '../../router/constants';
import DeleteButton from '../delete_button.vue';
+import DesignTodoButton from '../design_todo_button.vue';
import DesignNavigation from './design_navigation.vue';
export default {
@@ -18,6 +19,7 @@ export default {
GlSkeletonLoader,
DesignNavigation,
DeleteButton,
+ DesignTodoButton,
},
directives: {
GlTooltip: GlTooltipDirective,
@@ -68,6 +70,10 @@ export default {
type: Boolean,
required: true,
},
+ design: {
+ type: Object,
+ required: true,
+ },
},
data() {
return {
@@ -115,6 +121,7 @@ export default {
</div>
</div>
<design-navigation :id="id" class="gl-ml-auto gl-flex-shrink-0" />
+ <design-todo-button :design="design" class="gl-mr-3" @error="$emit('todoError', $event)" />
<gl-button
v-gl-tooltip.bottom
:href="image"
diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue
index 9f6077ace9291e5b51188515a4d0254d783593aa..0af31d2b9d576769315c73f47a574e9797792dc6 100644
--- a/app/assets/javascripts/design_management/pages/design/index.vue
+++ b/app/assets/javascripts/design_management/pages/design/index.vue
@@ -350,6 +350,7 @@ export default {
:is-deleting="loading"
:is-latest-version="isLatestVersion"
:is-loading="isLoading"
+ :design="design"
v-bind="design"
@delete="mutate"
/>
diff --git a/spec/frontend/design_management/components/design_sidebar_spec.js b/spec/frontend/design_management/components/design_sidebar_spec.js
index 0682cd7103568ca197be3f31c9e4acf4901a7095..119c785fca7b15c512081e80661d376f91aa3bb6 100644
--- a/spec/frontend/design_management/components/design_sidebar_spec.js
+++ b/spec/frontend/design_management/components/design_sidebar_spec.js
@@ -4,7 +4,6 @@ import { nextTick } from 'vue';
import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue';
import DesignNoteSignedOut from '~/design_management/components/design_notes/design_note_signed_out.vue';
import DesignSidebar from '~/design_management/components/design_sidebar.vue';
-import DesignTodoButton from '~/design_management/components/design_todo_button.vue';
import DesignDisclosure from '~/design_management/components/design_disclosure.vue';
import updateActiveDiscussionMutation from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql';
import Participants from '~/sidebar/components/participants/participants.vue';
@@ -94,12 +93,6 @@ describe('Design management design sidebar component', () => {
expect(findParticipants().props('participants')).toHaveLength(1);
});
- it('renders To-Do button', () => {
- createComponent();
-
- expect(wrapper.findComponent(DesignTodoButton).exists()).toBe(true);
- });
-
describe('when has no discussions', () => {
beforeEach(() => {
createComponent({
diff --git a/spec/frontend/design_management/components/design_todo_button_spec.js b/spec/frontend/design_management/components/design_todo_button_spec.js
index 2262e5fdd83dfa06b97f92343196f6c6817737a6..8f2699497523f73122f5493ee9a0a3290641051f 100644
--- a/spec/frontend/design_management/components/design_todo_button_spec.js
+++ b/spec/frontend/design_management/components/design_todo_button_spec.js
@@ -1,3 +1,4 @@
+import { GlIcon } from '@gitlab/ui';
import { shallowMount, mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DesignTodoButton from '~/design_management/components/design_todo_button.vue';
@@ -21,6 +22,7 @@ const mutate = jest.fn().mockResolvedValue();
describe('Design management design todo button', () => {
let wrapper;
+ const findIcon = () => wrapper.findComponent(GlIcon);
function createComponent(props = {}, { mountFn = shallowMount } = {}) {
wrapper = mountFn(DesignTodoButton, {
@@ -59,8 +61,8 @@ describe('Design management design todo button', () => {
createComponent({ design: mockDesignWithPendingTodos }, { mountFn: mount });
});
- it('renders correct button text', () => {
- expect(wrapper.text()).toBe('Mark as done');
+ it('renders correct button icon', () => {
+ expect(findIcon().props('name')).toBe('todo-done');
});
describe('when clicked', () => {
@@ -106,7 +108,7 @@ describe('Design management design todo button', () => {
});
it('renders correct button text', () => {
- expect(wrapper.text()).toBe('Add a to do');
+ expect(findIcon().props('name')).toBe('todo-add');
});
describe('when clicked', () => {
diff --git a/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
index 93ce2db382ea897875c237f74057932f9e454a96..15e1ff4694c5b75c3557339ec9979ca926a5a5d6 100644
--- a/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
+++ b/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
@@ -26,6 +26,10 @@ exports[`Design management toolbar component renders design and updated data 1`]
class="gl-flex-shrink-0 gl-ml-auto"
id="reference-0"
/>
+ <design-todo-button-stub
+ class="gl-mr-3"
+ design="[object Object]"
+ />
<gl-button-stub
aria-label="Download design"
buttontextclasses=""
diff --git a/spec/frontend/design_management/components/toolbar/index_spec.js b/spec/frontend/design_management/components/toolbar/index_spec.js
index 764ad73805fc3c51c88af16d587641b1ed09cdfc..9a2dc913659838b98fe78a3157f37a0743bc2e4d 100644
--- a/spec/frontend/design_management/components/toolbar/index_spec.js
+++ b/spec/frontend/design_management/components/toolbar/index_spec.js
@@ -7,9 +7,11 @@ import createMockApollo from 'helpers/mock_apollo_helper';
import waitForPromises from 'helpers/wait_for_promises';
import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql';
import DeleteButton from '~/design_management/components/delete_button.vue';
+import DesignTodoButton from '~/design_management/components/design_todo_button.vue';
import Toolbar from '~/design_management/components/toolbar/index.vue';
import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants';
import { getPermissionsQueryResponse } from '../../mock_data/apollo_mock';
+import design from '../../mock_data/design';
Vue.use(VueRouter);
Vue.use(VueApollo);
@@ -45,6 +47,7 @@ describe('Design management toolbar component', () => {
isLatestVersion: true,
isLoading,
isDeleting: false,
+ design,
filename: 'test.jpg',
updatedAt: updatedAt.toString(),
updatedBy: {
@@ -105,6 +108,12 @@ describe('Design management toolbar component', () => {
expect(wrapper.findComponent(DeleteButton).exists()).toBe(false);
});
+ it('renders To-Do button', () => {
+ createComponent();
+
+ expect(wrapper.findComponent(DesignTodoButton).exists()).toBe(true);
+ });
+
it('emits `delete` event on deleteButton `delete-selected-designs` event', async () => {
createComponent();
diff --git a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
index fc4474f62f2b2df2c6b5eb833dda89b64b512b3c..72dcf5914d9d748c059852e583550baaa4bb0b43 100644
--- a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
+++ b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
@@ -37,18 +37,8 @@ exports[`Design management design index page renders design index 1`] = `
<div
class="gl-h-full gl-pt-0 image-notes"
>
- <div
- class="gl-align-items-center gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-display-flex gl-justify-content-space-between gl-mb-4 gl-py-4"
- >
- <span>
- To Do
- </span>
- <design-todo-button-stub
- design="[object Object]"
- />
- </div>
<h2
- class="gl-font-weight-bold gl-mt-0"
+ class="gl-font-weight-bold gl-mt-4"
>
My precious issue
</h2>
@@ -166,18 +156,8 @@ exports[`Design management design index page with error GlAlert is rendered in c
<div
class="gl-h-full gl-pt-0 image-notes"
>
- <div
- class="gl-align-items-center gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-display-flex gl-justify-content-space-between gl-mb-4 gl-py-4"
- >
- <span>
- To Do
- </span>
- <design-todo-button-stub
- design="[object Object]"
- />
- </div>
<h2
- class="gl-font-weight-bold gl-mt-0"
+ class="gl-font-weight-bold gl-mt-4"
>
My precious issue
</h2>