diff --git a/ee/app/assets/javascripts/work_items/components/work_item_progress.vue b/ee/app/assets/javascripts/work_items/components/work_item_progress.vue index 99f4c94505b8b4d0c63823a8c9f226f57066bcca..a28695dd5e1040538aa16a195a6433100157e761 100644 --- a/ee/app/assets/javascripts/work_items/components/work_item_progress.vue +++ b/ee/app/assets/javascripts/work_items/components/work_item_progress.vue @@ -1,5 +1,5 @@ <script> -import { GlForm, GlFormGroup, GlFormInput, GlTooltipDirective } from '@gitlab/ui'; +import { GlForm, GlFormGroup, GlFormInput, GlIcon, GlPopover } from '@gitlab/ui'; import { isNumber } from 'lodash'; import * as Sentry from '@sentry/browser'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; @@ -13,9 +13,6 @@ import { import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql'; export default { - directives: { - GlTooltip: GlTooltipDirective, - }, inputId: 'progress-widget-input', minValue: 0, maxValue: 100, @@ -23,9 +20,17 @@ export default { GlForm, GlFormGroup, GlFormInput, + GlIcon, + GlPopover, }, mixins: [Tracking.mixin(), glFeatureFlagMixin()], inject: ['hasOkrsFeature'], + i18n: { + progressPopoverTitle: __('How is progress calculated?'), + progressPopoverContent: __( + 'This field is auto-calculated based on the Progress score of its direct children. You can overwrite this value but it will be replaced by the auto-calculation anytime the Progress score of its direct children are updated.', + ), + }, props: { canUpdate: { type: Boolean, @@ -128,12 +133,8 @@ export default { Sentry.captureException(error); }); }, - getProgressTooltip() { - return this.glFeatures.okrAutomaticRollups && this.workItemType === __('Objective') - ? __( - 'This field is auto-calculated based on the Progress score of its direct children. You can overwrite this value but it will be replaced by the auto-calculation anytime the Progress score of its direct children is updated.', - ) - : ''; + showProgressPopover() { + return this.glFeatures.okrAutomaticRollups && this.workItemType === __('Objective'); }, }, }; @@ -143,18 +144,32 @@ export default { <gl-form v-if="isOkrsEnabled" data-testid="work-item-progress" @submit.prevent="blurInput"> <gl-form-group class="gl-align-items-center" - :label="__('Progress')" label-for="progress-widget-input" label-class="gl-pb-0! gl-overflow-wrap-break work-item-field-label" label-cols="3" label-cols-lg="2" > + <template #label> + {{ __('Progress') }} + <gl-icon + v-if="showProgressPopover()" + id="okr-progress-popover" + class="gl-text-blue-600" + name="question-o" + /> + <gl-popover + triggers="hover" + target="okr-progress-popover" + placement="right" + :title="$options.i18n.progressPopoverTitle" + :content="$options.i18n.progressPopoverContent" + /> + </template> + <gl-form-input id="progress-widget-input" ref="input" v-model="localProgress" - v-gl-tooltip - :title="getProgressTooltip" :min="$options.minValue" :max="$options.maxValue" data-testid="work-item-progress-input" diff --git a/ee/spec/frontend/work_items/components/work_item_progress_spec.js b/ee/spec/frontend/work_items/components/work_item_progress_spec.js index a262fce8291d870af1920f8faade7eef3468da26..e8b7adfac0ca1023c2d1b53b96d6e37d15b504da 100644 --- a/ee/spec/frontend/work_items/components/work_item_progress_spec.js +++ b/ee/spec/frontend/work_items/components/work_item_progress_spec.js @@ -17,7 +17,6 @@ describe('WorkItemProgress component', () => { let wrapper; const workItemId = 'gid://gitlab/WorkItem/1'; - const workItemType = 'Objective'; const findForm = () => wrapper.findComponent(GlForm); const findInput = () => wrapper.findComponent(GlFormInput); @@ -27,6 +26,8 @@ describe('WorkItemProgress component', () => { canUpdate = false, hasOkrsFeature = true, okrsMvc = true, + okrAutomaticRollups = false, + workItemType = 'Objective', isEditing = false, progress, mutationHandler = jest.fn().mockResolvedValue(updateWorkItemMutationResponse), @@ -43,6 +44,7 @@ describe('WorkItemProgress component', () => { hasOkrsFeature, glFeatures: { okrsMvc, + okrAutomaticRollups, }, }, }); @@ -106,6 +108,22 @@ describe('WorkItemProgress component', () => { }); }); + describe('showProgressTooltip', () => { + describe.each` + description | okrAutomaticRollups | workItemType | value + ${'when okrAutomaticRollups enabled and type is an objective'} | ${true} | ${'Objective'} | ${true} + ${'when okrAutomaticRollups enabled and type is a key_result'} | ${true} | ${'Key Result'} | ${false} + ${'when okrAutomaticRollups disabled and type is an objective'} | ${false} | ${'Objective'} | ${false} + ${'when okrAutomaticRollups disabled and type is a key_result'} | ${false} | ${'Key Result'} | ${false} + `('$description', ({ okrAutomaticRollups, workItemType, value }) => { + it(`returns ${value}`, () => { + createComponent({ okrAutomaticRollups, workItemType }); + + expect(wrapper.findByTestId('question-o-icon').exists()).toBe(value); + }); + }); + }); + describe('displays progress and passes as value to input field', () => { describe.each` progress diff --git a/locale/gitlab.pot b/locale/gitlab.pot index f4c1c13abf78a286b4e35f4153b8906e11b5dd56..20a658b155e01224fc0ba7ceb598f2a2def37933 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -22981,6 +22981,9 @@ msgstr "" msgid "How does pull mirroring work?" msgstr "" +msgid "How is progress calculated?" +msgstr "" + msgid "How many seconds an IP counts toward the IP address limit." msgstr "" @@ -47294,7 +47297,7 @@ msgstr "" msgid "This feature requires local storage to be enabled" msgstr "" -msgid "This field is auto-calculated based on the Progress score of its direct children. You can overwrite this value but it will be replaced by the auto-calculation anytime the Progress score of its direct children is updated." +msgid "This field is auto-calculated based on the Progress score of its direct children. You can overwrite this value but it will be replaced by the auto-calculation anytime the Progress score of its direct children are updated." msgstr "" msgid "This field is required"