Remove time tracking sub components

Both estimate_only_pane.vue and no_tracking_pane.vue
did not contain any logic in them and having them as
separate components add unnecessary overhead (of having
vue instances).

Rather than turning them into functional components,
(because their templates are tiny)
this commit inlines them in time_tracker.vue

Also changes text color for "No estimate or time spent"
to gl-text-gray-500.

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

-<script>
-export default {
-  name: 'TimeTrackingEstimateOnlyPane',
-  props: {
-    timeEstimateHumanReadable: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>
-
-<template>
-  <div data-testid="estimateOnlyPane">
-    <span class="gl-font-weight-bold">{{ s__('TimeTracking|Estimated:') }} </span
-    >{{ timeEstimateHumanReadable }}
-  </div>
-</template>

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

-<script>
-export default {
-  name: 'TimeTrackingNoTrackingPane',
-};
-</script>
-
-<template>
-  <div data-testid="noTrackingPane">
-    <span class="no-value">{{ __('No estimate or time spent') }}</span>
-  </div>
-</template>

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

 <script>
 import { GlIcon } from '@gitlab/ui';
+import { s__, __ } from '~/locale';
 import TimeTrackingHelpState from './help_state.vue';
 import TimeTrackingCollapsedState from './collapsed_state.vue';
 import TimeTrackingSpentOnlyPane from './spent_only_pane.vue';
-import TimeTrackingNoTrackingPane from './no_tracking_pane.vue';
-import TimeTrackingEstimateOnlyPane from './estimate_only_pane.vue';
 import TimeTrackingComparisonPane from './comparison_pane.vue';
 
 import eventHub from '../../event_hub';
 
 export default {
   name: 'IssuableTimeTracker',
+  i18n: {
+    noTimeTrackingText: __('No estimate or time spent'),
+    estimatedOnlyText: s__('TimeTracking|Estimated:'),
+  },
   components: {
     GlIcon,
     TimeTrackingCollapsedState,
-    TimeTrackingEstimateOnlyPane,
     TimeTrackingSpentOnlyPane,
-    TimeTrackingNoTrackingPane,
     TimeTrackingComparisonPane,
     TimeTrackingHelpState,
   },
@@ -139,15 +140,17 @@ export default {
       </div>
     </div>
     <div class="time-tracking-content hide-collapsed">
-      <time-tracking-estimate-only-pane
-        v-if="showEstimateOnlyState"
-        :time-estimate-human-readable="humanTimeEstimate"
-      />
+      <div v-if="showEstimateOnlyState" data-testid="estimateOnlyPane">
+        <span class="gl-font-weight-bold">{{ $options.i18n.estimatedOnlyText }} </span
+        >{{ humanTimeEstimate }}
+      </div>
       <time-tracking-spent-only-pane
         v-if="showSpentOnlyState"
         :time-spent-human-readable="humanTimeSpent"
       />
-      <time-tracking-no-tracking-pane v-if="showNoTimeTrackingState" />
+      <div v-if="showNoTimeTrackingState" data-testid="noTrackingPane">
+        <span class="gl-text-gray-500">{{ $options.i18n.noTimeTrackingText }}</span>
+      </div>
       <time-tracking-comparison-pane
         v-if="showComparisonState"
         :time-estimate="timeEstimate"

changelogs/unreleased/273555-move-time-tracker-help-state-to-the-sidebar-component.yml

+---
+title: Fix text color for 'no estimate or time spent' message in time tracker component
+merge_request: 50558
+author:
+type: other