Update time tracking UI

Changelog: changed

app/assets/javascripts/sidebar/components/time_tracking/create_timelog_form.vue

@@ -7,14 +7,13 @@ import {
   GlModal,
   GlAlert,
   GlLink,
-  GlSprintf,
 } from '@gitlab/ui';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
-import { TYPE_ISSUE } from '~/issues/constants';
+import { issuableTypeText, TYPE_ISSUE } from '~/issues/constants';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { TYPENAME_ISSUE, TYPENAME_MERGE_REQUEST } from '~/graphql_shared/constants';
 import { joinPaths } from '~/lib/utils/url_utility';
-import { s__ } from '~/locale';
+import { s__, sprintf } from '~/locale';
 import createTimelogMutation from '../../queries/create_timelog.mutation.graphql';
 import { CREATE_TIMELOG_MODAL_ID } from './constants';
 
@@ -27,7 +26,6 @@ export default {
     GlModal,
     GlAlert,
     GlLink,
-    GlSprintf,
   },
   inject: {
     issuableType: {
@@ -50,6 +48,12 @@ export default {
     };
   },
   computed: {
+    modalText() {
+      const issuableTypeName = issuableTypeText[this.issuableType];
+      return sprintf(s__('TimeTracking|Track time spent on this %{issuableTypeName}.'), {
+        issuableTypeName,
+      });
+    },
     submitDisabled() {
       return this.isLoading || this.timeSpent.length === 0;
     },
@@ -71,11 +75,6 @@ export default {
     timeTrackingDocsPath() {
       return joinPaths(gon.relative_url_root || '', '/help/user/project/time_tracking.md');
     },
-    issuableTypeName() {
-      return this.isIssue()
-        ? s__('CreateTimelogForm|issue')
-        : s__('CreateTimelogForm|merge request');
-    },
   },
   methods: {
     resetModal() {
@@ -129,11 +128,8 @@ export default {
           this.isLoading = false;
         });
     },
-    isIssue() {
-      return this.issuableType === TYPE_ISSUE;
-    },
     getGraphQLEntityType() {
-      return this.isIssue() ? TYPENAME_ISSUE : TYPENAME_MERGE_REQUEST;
+      return this.issuableType === TYPE_ISSUE ? TYPENAME_ISSUE : TYPENAME_MERGE_REQUEST;
     },
     updateSpentAtDate(val) {
       this.spentAt = val;
@@ -160,21 +156,8 @@ export default {
     @close="close"
     @hide="close"
   >
-    <p data-testid="timetracking-docs-link">
-      <gl-sprintf
-        :message="
-          s__(
-            'CreateTimelogForm|Track time spent on this %{issuableTypeNameStart}%{issuableTypeNameEnd}. %{timeTrackingDocsLinkStart}%{timeTrackingDocsLinkEnd}',
-          )
-        "
-      >
-        <template #issuableTypeName>{{ issuableTypeName }}</template>
-        <template #timeTrackingDocsLink>
-          <gl-link :href="timeTrackingDocsPath" target="_blank">{{
-            s__('CreateTimelogForm|How do I track and estimate time?')
-          }}</gl-link>
-        </template>
-      </gl-sprintf>
+    <p>
+      {{ modalText }}
     </p>
     <form
       class="gl-display-flex gl-flex-direction-column js-quick-submit"
@@ -212,19 +195,17 @@ export default {
           />
         </gl-form-group>
       </div>
-      <gl-form-group
-        :label="s__('CreateTimelogForm|Summary')"
-        optional
-        label-for="summary"
-        class="gl-mb-0"
-      >
+      <gl-form-group :label="s__('CreateTimelogForm|Summary')" optional label-for="summary">
         <gl-form-textarea id="summary" v-model="summary" rows="3" :no-resize="true" />
       </gl-form-group>
-      <gl-alert v-if="saveError" variant="danger" class="gl-mt-5" :dismissible="false">
+      <gl-alert v-if="saveError" variant="danger" class="gl-mb-3" :dismissible="false">
         {{ saveError }}
       </gl-alert>
       <!-- This is needed to have the quick-submit behaviour (with Ctrl + Enter or Cmd + Enter) -->
       <input type="submit" hidden />
     </form>
+    <gl-link :href="timeTrackingDocsPath">
+      {{ s__('CreateTimelogForm|How do I track and estimate time?') }}
+    </gl-link>
   </gl-modal>
 </template>

app/assets/javascripts/sidebar/components/time_tracking/report.vue

@@ -21,7 +21,11 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  inject: ['issuableType'],
+  inject: {
+    issuableType: {
+      default: null,
+    },
+  },
   props: {
     limitToHours: {
       type: Boolean,
@@ -119,10 +123,10 @@ export default {
     },
   },
   fields: [
-    { key: 'spentAt', label: __('Spent at'), tdClass: 'gl-w-quarter' },
-    { key: 'user', label: __('User') },
+    { key: 'spentAt', label: __('Date'), tdClass: 'gl-w-quarter' },
     { key: 'timeSpent', label: __('Time spent'), tdClass: 'gl-w-15' },
-    { key: 'summary', label: __('Summary / note') },
+    { key: 'user', label: __('User') },
+    { key: 'summary', label: __('Summary') },
     { key: 'actions', label: '', tdClass: 'gl-w-10' },
   ],
 };
@@ -137,11 +141,6 @@ export default {
       </template>
       <template #foot(spentAt)>&nbsp;</template>
 
-      <template #cell(user)="{ item: { user } }">
-        <div>{{ user.name }}</div>
-      </template>
-      <template #foot(user)>&nbsp;</template>
-
       <template #cell(timeSpent)="{ item: { timeSpent } }">
         <div>{{ formatTimeSpent(timeSpent) }}</div>
       </template>
@@ -149,6 +148,11 @@ export default {
         <div>{{ getTotalTimeSpent() }}</div>
       </template>
 
+      <template #cell(user)="{ item: { user } }">
+        <div>{{ user.name }}</div>
+      </template>
+      <template #foot(user)>&nbsp;</template>
+
       <template #cell(summary)="{ item: { summary, note } }">
         <div>{{ getSummary(summary, note) }}</div>
       </template>
@@ -165,9 +169,10 @@ export default {
         <div v-if="adminTimelog">
           <gl-button
             v-gl-tooltip="{ title: deleteButtonTooltip }"
-            category="secondary"
+            category="tertiary"
             icon="remove"
-            data-testid="deleteButton"
+            variant="danger"
+            :aria-label="deleteButtonTooltip"
             :loading="isDeletingTimelog(id)"
             @click="deleteTimelog(id)"
           />

app/assets/javascripts/sidebar/components/time_tracking/set_time_estimate_form.vue

 <script>
 import { GlFormGroup, GlFormInput, GlModal, GlAlert, GlLink } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
+import { issuableTypeText, TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
 import { s__, __, sprintf } from '~/locale';
 import issueSetTimeEstimateMutation from '../../queries/issue_set_time_estimate.mutation.graphql';
 import mergeRequestSetTimeEstimateMutation from '../../queries/merge_request_set_time_estimate.mutation.graphql';
@@ -20,7 +20,11 @@ export default {
     GlAlert,
     GlLink,
   },
-  inject: ['issuableType'],
+  inject: {
+    issuableType: {
+      default: null,
+    },
+  },
   props: {
     fullPath: {
       type: String,
@@ -44,7 +48,7 @@ export default {
   data() {
     return {
       currentEstimate: this.timeTracking.timeEstimate ?? 0,
-      timeEstimate: this.timeTracking.humanTimeEstimate ?? '0h',
+      timeEstimate: this.timeTracking.humanTimeEstimate ?? '',
       isSaving: false,
       isResetting: false,
       saveError: '',
@@ -91,19 +95,17 @@ export default {
         ? s__('TimeTracking|Set time estimate')
         : s__('TimeTracking|Edit time estimate');
     },
-    isIssue() {
-      return this.issuableType === TYPE_ISSUE;
-    },
     modalText() {
+      const issuableTypeName = issuableTypeText[this.issuableType || this.workItemType];
       return sprintf(s__('TimeTracking|Set estimated time to complete this %{issuableTypeName}.'), {
-        issuableTypeName: this.isIssue ? __('issue') : __('merge request'),
+        issuableTypeName,
       });
     },
   },
   watch: {
     timeTracking() {
       this.currentEstimate = this.timeTracking.timeEstimate ?? 0;
-      this.timeEstimate = this.timeTracking.humanTimeEstimate ?? '0h';
+      this.timeEstimate = this.timeTracking.humanTimeEstimate ?? '';
     },
   },
   methods: {
@@ -181,12 +183,8 @@ export default {
     @secondary.prevent="resetTimeEstimate"
     @cancel="close"
   >
-    <p data-testid="timetracking-docs-link">
+    <p>
       {{ modalText }}
-
-      <gl-link :href="timeTrackingDocsPath">{{
-        s__('TimeTracking|How do I estimate and track time?')
-      }}</gl-link>
     </p>
     <form class="js-quick-submit" @submit.prevent="saveTimeEstimate">
       <gl-form-group
@@ -205,11 +203,14 @@ export default {
           autocomplete="off"
         />
       </gl-form-group>
-      <gl-alert v-if="saveError" variant="danger" class="gl-mt-5" :dismissible="false">
+      <gl-alert v-if="saveError" variant="danger" class="gl-mb-3" :dismissible="false">
         {{ saveError }}
       </gl-alert>
       <!-- This is needed to have the quick-submit behaviour (with Ctrl + Enter or Cmd + Enter) -->
       <input type="submit" hidden />
     </form>
+    <gl-link :href="timeTrackingDocsPath">
+      {{ s__('TimeTracking|How do I estimate and track time?') }}
+    </gl-link>
   </gl-modal>
 </template>

locale/gitlab.pot

@@ -15295,15 +15295,6 @@ msgstr ""
 msgid "CreateTimelogForm|Time spent"
 msgstr ""
-msgid "CreateTimelogForm|Track time spent on this %{issuableTypeNameStart}%{issuableTypeNameEnd}. %{timeTrackingDocsLinkStart}%{timeTrackingDocsLinkEnd}"
-msgstr ""
-
-msgid "CreateTimelogForm|issue"
-msgstr ""
-
-msgid "CreateTimelogForm|merge request"
-msgstr ""
-
 msgid "CreateValueStreamForm|%{name} (default)"
 msgstr ""
@@ -49555,9 +49546,6 @@ msgstr ""
 msgid "Speed up your pipelines with Needs relationships"
 msgstr ""
-msgid "Spent at"
-msgstr ""
-
 msgid "Spent at can't be a future date and time."
 msgstr ""
@@ -50394,9 +50382,6 @@ msgstr ""
 msgid "Summary"
 msgstr ""
-msgid "Summary / note"
-msgstr ""
-
 msgid "Summary comment (optional)"
 msgstr ""
@@ -53241,6 +53226,9 @@ msgstr ""
 msgid "TimeTracking|To manage time, use /spend or /estimate."
 msgstr ""
+msgid "TimeTracking|Track time spent on this %{issuableTypeName}."
+msgstr ""
+
 msgid "Timeago|%s days ago"
 msgstr ""

spec/frontend/sidebar/components/time_tracking/create_timelog_form_spec.js

 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
-import { GlAlert, GlModal, GlFormInput, GlDatepicker, GlFormTextarea } from '@gitlab/ui';
+import { GlAlert, GlModal, GlFormInput, GlDatepicker, GlFormTextarea, GlLink } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -41,12 +41,11 @@ describe('Create Timelog Form', () => {
   Vue.use(VueApollo);
 
   let wrapper;
-  let fakeApollo;
 
   const findForm = () => wrapper.find('form');
   const findModal = () => wrapper.findComponent(GlModal);
   const findAlert = () => wrapper.findComponent(GlAlert);
-  const findDocsLink = () => wrapper.findByTestId('timetracking-docs-link');
+  const findDocsLink = () => wrapper.findComponent(GlLink);
   const findSaveButton = () => findModal().props('actionPrimary');
   const findSaveButtonLoadingState = () => findSaveButton().attributes.loading;
   const findSaveButtonDisabledState = () => findSaveButton().attributes.disabled;
@@ -60,8 +59,6 @@ describe('Create Timelog Form', () => {
     { props, providedProps } = {},
     mutationResolverMock = rejectedMutationMock,
   ) => {
-    fakeApollo = createMockApollo([[createTimelogMutation, mutationResolverMock]]);
-
     wrapper = shallowMountExtended(CreateTimelogForm, {
       provide: {
         issuableType: 'issue',
@@ -71,7 +68,7 @@ describe('Create Timelog Form', () => {
         issuableId: '1',
         ...props,
       },
-      apolloProvider: fakeApollo,
+      apolloProvider: createMockApollo([[createTimelogMutation, mutationResolverMock]]),
       stubs: {
         GlModal: stubComponent(GlModal, {
           methods: { close: modalCloseMock },
@@ -80,11 +77,6 @@ describe('Create Timelog Form', () => {
     });
   };
 
-  afterEach(() => {
-    fakeApollo = null;
-    modalCloseMock.mockClear();
-  });
-
   describe('save button', () => {
     it('is disabled and not loading by default', () => {
       mountComponent();
@@ -227,7 +219,8 @@ describe('Create Timelog Form', () => {
     it('is present', () => {
       mountComponent();
 
-      expect(findDocsLink().exists()).toBe(true);
+      expect(findDocsLink().text()).toBe('How do I track and estimate time?');
+      expect(findDocsLink().attributes('href')).toBe('/help/user/project/time_tracking.md');
     });
   });
 });

spec/frontend/sidebar/components/time_tracking/report_spec.js

-import { GlLoadingIcon } from '@gitlab/ui';
-import { getAllByRole, getByRole, getAllByTestId } from '@testing-library/dom';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { getAllByRole, getByRole } from '@testing-library/dom';
 import { shallowMount, mount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
@@ -25,7 +25,7 @@ describe('Issuable Time Tracking Report', () => {
   let wrapper;
 
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
-  const findDeleteButton = () => wrapper.findByTestId('deleteButton');
+  const findDeleteButton = () => wrapper.findComponent(GlButton);
   const successIssueQueryHandler = jest.fn().mockResolvedValue(getIssueTimelogsQueryResponse);
   const successMrQueryHandler = jest.fn().mockResolvedValue(getMrTimelogsQueryResponse);
 
@@ -81,7 +81,9 @@ describe('Issuable Time Tracking Report', () => {
       expect(getAllByRole(wrapper.element, 'row', { name: /Administrator/i })).toHaveLength(2);
       expect(getAllByRole(wrapper.element, 'row', { name: /A note/i })).toHaveLength(1);
       expect(getAllByRole(wrapper.element, 'row', { name: /A summary/i })).toHaveLength(2);
-      expect(getAllByTestId(wrapper.element, 'deleteButton')).toHaveLength(1);
+      expect(getAllByRole(wrapper.element, 'button', { name: /Delete time spent/ })).toHaveLength(
+        1,
+      );
     });
   });
 
@@ -102,7 +104,9 @@ describe('Issuable Time Tracking Report', () => {
       await waitForPromises();
 
       expect(getAllByRole(wrapper.element, 'row', { name: /Administrator/i })).toHaveLength(3);
-      expect(getAllByTestId(wrapper.element, 'deleteButton')).toHaveLength(3);
+      expect(getAllByRole(wrapper.element, 'button', { name: /Delete time spent/ })).toHaveLength(
+        3,
+      );
     });
   });
 

spec/frontend/sidebar/components/time_tracking/set_time_estimate_form_spec.js

 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
-import { GlModal, GlAlert } from '@gitlab/ui';
+import { GlModal, GlAlert, GlLink } from '@gitlab/ui';
 import setIssueTimeEstimateWithErrors from 'test_fixtures/graphql/issue_set_time_estimate_with_errors.json';
 import setIssueTimeEstimateWithoutErrors from 'test_fixtures/graphql/issue_set_time_estimate_without_errors.json';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -35,7 +35,7 @@ describe('Set Time Estimate Form', () => {
   const findModal = () => wrapper.findComponent(GlModal);
   const findModalTitle = () => findModal().props('title');
   const findAlert = () => wrapper.findComponent(GlAlert);
-  const findDocsLink = () => wrapper.findByTestId('timetracking-docs-link');
+  const findDocsLink = () => wrapper.findComponent(GlLink);
   const findSaveButton = () => findModal().props('actionPrimary');
   const findSaveButtonLoadingState = () => findSaveButton().attributes.loading;
   const findSaveButtonDisabledState = () => findSaveButton().attributes.disabled;
@@ -414,7 +414,8 @@ describe('Set Time Estimate Form', () => {
     it('is present', async () => {
       await mountComponent();
 
-      expect(findDocsLink().exists()).toBe(true);
+      expect(findDocsLink().text()).toBe('How do I estimate and track time?');
+      expect(findDocsLink().attributes('href')).toBe('/help/user/project/time_tracking.md');
     });
   });
 });