Add latest changes from gitlab-org/gitlab@master

3 files changed, 48 insertions, 35 deletions

diff --git a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue
index 0de4cb2e59f..ec23e817127 100644
--- a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue
+++ b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue
@@ -10,6 +10,7 @@ import {
   GlIcon,
   GlTooltipDirective,
 } from '@gitlab/ui';
+import { kebabCase, snakeCase } from 'lodash';
 import createFlash from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { IssuableType } from '~/issues/constants';
@@ -221,6 +222,12 @@ export default {
       // MV to EE https://gitlab.com/gitlab-org/gitlab/-/issues/345311
       return this.issuableAttribute === IssuableType.Epic;
     },
+    formatIssuableAttribute() {
+      return {
+        kebab: kebabCase(this.issuableAttribute),
+        snake: snakeCase(this.issuableAttribute),
+      };
+    },
   },
   methods: {
     updateAttribute(attributeId) {
@@ -300,26 +307,28 @@ export default {
   <sidebar-editable-item
     ref="editable"
     :title="attributeTypeTitle"
-    :data-testid="`${issuableAttribute}-edit`"
+    :data-testid="`${formatIssuableAttribute.kebab}-edit`"
     :tracking="tracking"
     :loading="updating || loading"
     @open="handleOpen"
     @close="handleClose"
   >
     <template #collapsed>
+      <slot name="value-collapsed" :current-attribute="currentAttribute">
+        <div
+          v-if="isClassicSidebar"
+          v-gl-tooltip.left.viewport
+          :title="attributeTypeTitle"
+          class="sidebar-collapsed-icon"
+        >
+          <gl-icon :aria-label="attributeTypeTitle" :name="attributeTypeIcon" />
+          <span class="collapse-truncated-title">
+            {{ attributeTitle }}
+          </span>
+        </div>
+      </slot>
       <div
-        v-if="isClassicSidebar"
-        v-gl-tooltip.left.viewport
-        :title="attributeTypeTitle"
-        class="sidebar-collapsed-icon"
-      >
-        <gl-icon :size="16" :aria-label="attributeTypeTitle" :name="attributeTypeIcon" />
-        <span class="collapse-truncated-title">
-          {{ attributeTitle }}
-        </span>
-      </div>
-      <div
-        :data-testid="`select-${issuableAttribute}`"
+        :data-testid="`select-${formatIssuableAttribute.kebab}`"
         :class="isClassicSidebar ? 'hide-collapsed' : 'gl-mt-3'"
       >
         <span v-if="updating" class="gl-font-weight-bold">{{ selectedTitle }}</span>
@@ -337,7 +346,7 @@ export default {
             v-gl-tooltip="tooltipText"
             class="gl-text-gray-900! gl-font-weight-bold"
             :href="attributeUrl"
-            :data-qa-selector="`${issuableAttribute}_link`"
+            :data-qa-selector="`${formatIssuableAttribute.snake}_link`"
           >
             {{ attributeTitle }}
             <span v-if="isAttributeOverdue(currentAttribute)">{{ $options.i18n.expired }}</span>
@@ -359,7 +368,7 @@ export default {
       >
         <gl-search-box-by-type ref="search" v-model="searchTerm" />
         <gl-dropdown-item
-          :data-testid="`no-${issuableAttribute}-item`"
+          :data-testid="`no-${formatIssuableAttribute.kebab}-item`"
           :is-check-item="true"
           :is-checked="isAttributeChecked($options.noAttributeId)"
           @click="updateAttribute($options.noAttributeId)"
@@ -389,7 +398,7 @@ export default {
               :key="attrItem.id"
               :is-check-item="true"
               :is-checked="isAttributeChecked(attrItem.id)"
-              :data-testid="`${issuableAttribute}-items`"
+              :data-testid="`${formatIssuableAttribute.kebab}-items`"
               @click="updateAttribute(attrItem.id)"
             >
               {{ attrItem.title }}
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
index 7c157fe2775..bb90ef8e444 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
@@ -38,7 +38,10 @@ export default {
 </script>
 
 <template>
-  <div data-testid="helpPane" class="time-tracking-help-state">
+  <div
+    data-testid="helpPane"
+    class="sidebar-help-state gl-bg-white gl-border-gray-100 gl-border-t-solid gl-border-b-solid gl-border-1"
+  >
     <div class="time-tracking-info">
       <h4>{{ __('Track time with quick actions') }}</h4>
       <p>{{ __('Quick actions can be used in description and comment boxes.') }}</p>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
index 91c67a03dfb..d222a2af382 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlIcon, GlLink, GlModal, GlModalDirective, GlLoadingIcon } from '@gitlab/ui';
+import { GlIcon, GlLink, GlModal, GlButton, GlModalDirective, GlLoadingIcon } from '@gitlab/ui';
 import { IssuableType } from '~/issues/constants';
 import { s__, __ } from '~/locale';
 import { timeTrackingQueries } from '~/sidebar/constants';
@@ -21,6 +21,7 @@ export default {
     GlIcon,
     GlLink,
     GlModal,
+    GlButton,
     GlLoadingIcon,
     TimeTrackingCollapsedState,
     TimeTrackingSpentOnlyPane,
@@ -187,7 +188,11 @@ export default {
 </script>
 
 <template>
-  <div v-cloak class="time-tracker time-tracking-component-wrap" data-testid="time-tracker">
+  <div
+    v-cloak
+    class="time-tracker time-tracking-component-wrap sidebar-help-wrap"
+    data-testid="time-tracker"
+  >
     <time-tracking-collapsed-state
       v-if="showCollapsed"
       :show-comparison-state="showComparisonState"
@@ -198,25 +203,21 @@ export default {
       :time-spent-human-readable="humanTotalTimeSpent"
       :time-estimate-human-readable="humanTimeEstimate"
     />
-    <div class="hide-collapsed gl-line-height-20 gl-text-gray-900">
+    <div
+      class="hide-collapsed gl-line-height-20 gl-text-gray-900 gl-display-flex gl-align-items-center"
+    >
       {{ __('Time tracking') }}
       <gl-loading-icon v-if="isTimeTrackingInfoLoading" size="sm" inline />
-      <div
-        v-if="!showHelpState"
-        data-testid="helpButton"
-        class="help-button float-right"
-        @click="toggleHelpState(true)"
+      <gl-button
+        :data-testid="showHelpState ? 'closeHelpButton' : 'helpButton'"
+        category="tertiary"
+        size="small"
+        variant="link"
+        class="gl-ml-auto"
+        @click="toggleHelpState(!showHelpState)"
       >
-        <gl-icon name="question-o" />
-      </div>
-      <div
-        v-else
-        data-testid="closeHelpButton"
-        class="close-help-button float-right"
-        @click="toggleHelpState(false)"
-      >
-        <gl-icon name="close" />
-      </div>
+        <gl-icon :name="showHelpState ? 'close' : 'question-o'" class="gl-text-gray-900!" />
+      </gl-button>
     </div>
     <div v-if="!isTimeTrackingInfoLoading" class="hide-collapsed">
       <div v-if="showEstimateOnlyState" data-testid="estimateOnlyPane">