diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-03 00:09:12 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-03 00:09:12 +0300 |
commit | b6a26580610bc6e0ba577260744bc3b52f1ffb46 (patch) | |
tree | 86fb8ae0570000fac545f8ee2f07d1e7bf8f72de /app/assets/javascripts/work_items | |
parent | 63fbe648bba03254f7658b50deb2521fa8ac08d3 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/work_items')
3 files changed, 32 insertions, 35 deletions
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue index 29d61ec6091..33d49583b04 100644 --- a/app/assets/javascripts/work_items/components/work_item_detail.vue +++ b/app/assets/javascripts/work_items/components/work_item_detail.vue @@ -1,5 +1,5 @@ <script> -import { GlAlert } from '@gitlab/ui'; +import { GlAlert, GlSkeletonLoader } from '@gitlab/ui'; import { i18n } from '../constants'; import workItemQuery from '../graphql/work_item.query.graphql'; import workItemTitleSubscription from '../graphql/work_item_title.subscription.graphql'; @@ -11,6 +11,7 @@ export default { i18n, components: { GlAlert, + GlSkeletonLoader, WorkItemActions, WorkItemTitle, WorkItemState, @@ -80,23 +81,35 @@ export default { {{ error }} </gl-alert> - <div class="gl-display-flex"> - <work-item-title - :loading="workItemLoading" - :work-item-id="workItem.id" - :work-item-title="workItem.title" - :work-item-type="workItemType" - class="gl-mr-5" - @error="error = $event" - /> - <work-item-actions - :work-item-id="workItem.id" - :can-delete="canDelete" - class="gl-ml-auto gl-mt-5" - @workItemDeleted="handleWorkItemDeleted" + <div v-if="workItemLoading" class="gl-max-w-26 gl-py-5"> + <gl-skeleton-loader :height="65" :width="240"> + <rect width="240" height="20" x="5" y="0" rx="4" /> + <rect width="100" height="20" x="5" y="45" rx="4" /> + </gl-skeleton-loader> + </div> + <template v-else> + <div class="gl-display-flex"> + <work-item-title + :work-item-id="workItem.id" + :work-item-title="workItem.title" + :work-item-type="workItemType" + class="gl-mr-5" + @error="error = $event" + @updated="$emit('workItemUpdated')" + /> + <work-item-actions + :work-item-id="workItem.id" + :can-delete="canDelete" + class="gl-ml-auto gl-mt-5" + @workItemDeleted="handleWorkItemDeleted" + @error="error = $event" + /> + </div> + <work-item-state + :work-item="workItem" @error="error = $event" + @updated="$emit('workItemUpdated')" /> - </div> - <work-item-state :loading="workItemLoading" :work-item="workItem" @error="error = $event" /> + </template> </section> </template> diff --git a/app/assets/javascripts/work_items/components/work_item_state.vue b/app/assets/javascripts/work_items/components/work_item_state.vue index ad92d077b25..7d4b48f847f 100644 --- a/app/assets/javascripts/work_items/components/work_item_state.vue +++ b/app/assets/javascripts/work_items/components/work_item_state.vue @@ -1,5 +1,4 @@ <script> -import { GlLoadingIcon } from '@gitlab/ui'; import * as Sentry from '@sentry/browser'; import Tracking from '~/tracking'; import { @@ -14,16 +13,10 @@ import ItemState from './item_state.vue'; export default { components: { - GlLoadingIcon, ItemState, }, mixins: [Tracking.mixin()], props: { - loading: { - type: Boolean, - required: false, - default: false, - }, workItem: { type: Object, required: true, @@ -94,9 +87,8 @@ export default { </script> <template> - <gl-loading-icon v-if="loading" class="gl-mt-3" size="md" /> <item-state - v-else-if="workItem.state" + v-if="workItem.state" :state="workItem.state" :loading="updateInProgress" @changed="updateWorkItemState" diff --git a/app/assets/javascripts/work_items/components/work_item_title.vue b/app/assets/javascripts/work_items/components/work_item_title.vue index 88a825853cc..73b46bb06d2 100644 --- a/app/assets/javascripts/work_items/components/work_item_title.vue +++ b/app/assets/javascripts/work_items/components/work_item_title.vue @@ -1,5 +1,4 @@ <script> -import { GlLoadingIcon } from '@gitlab/ui'; import Tracking from '~/tracking'; import { i18n } from '../constants'; import updateWorkItemMutation from '../graphql/update_work_item.mutation.graphql'; @@ -7,16 +6,10 @@ import ItemTitle from './item_title.vue'; export default { components: { - GlLoadingIcon, ItemTitle, }, mixins: [Tracking.mixin()], props: { - loading: { - type: Boolean, - required: false, - default: false, - }, workItemId: { type: String, required: false, @@ -68,6 +61,5 @@ export default { </script> <template> - <gl-loading-icon v-if="loading" class="gl-mt-3" size="md" /> - <item-title v-else :title="workItemTitle" @title-changed="updateTitle" /> + <item-title :title="workItemTitle" @title-changed="updateTitle" /> </template> |