Add latest changes from gitlab-org/gitlab@master

6 files changed, 126 insertions, 56 deletions

diff --git a/app/assets/javascripts/work_items/components/notes/work_item_comment_form.vue b/app/assets/javascripts/work_items/components/notes/work_item_comment_form.vue
index 62e1ebc50a8..1e6bd9ff1ac 100644
--- a/app/assets/javascripts/work_items/components/notes/work_item_comment_form.vue
+++ b/app/assets/javascripts/work_items/components/notes/work_item_comment_form.vue
@@ -8,7 +8,7 @@ import { STATE_OPEN, TRACKING_CATEGORY_SHOW, TASK_TYPE_NAME } from '~/work_items
 import { getDraft, clearDraft, updateDraft } from '~/lib/utils/autosave';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
-import WorkItemStateToggleButton from '~/work_items/components/work_item_state_toggle_button.vue';
+import WorkItemStateToggle from '~/work_items/components/work_item_state_toggle.vue';
 import CommentFieldLayout from '~/notes/components/comment_field_layout.vue';
 
 export default {
@@ -29,7 +29,7 @@ export default {
     MarkdownEditor,
     GlFormCheckbox,
     GlIcon,
-    WorkItemStateToggleButton,
+    WorkItemStateToggle,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -229,7 +229,7 @@ export default {
             @click="$emit('submitForm', { commentText, isNoteInternal })"
             >{{ commentButtonTextComputed }}
           </gl-button>
-          <work-item-state-toggle-button
+          <work-item-state-toggle
             v-if="isNewDiscussion"
             class="gl-ml-3"
             :work-item-id="workItemId"
diff --git a/app/assets/javascripts/work_items/components/work_item_actions.vue b/app/assets/javascripts/work_items/components/work_item_actions.vue
index 88f82fb6fb7..0a71fbc9a34 100644
--- a/app/assets/javascripts/work_items/components/work_item_actions.vue
+++ b/app/assets/javascripts/work_items/components/work_item_actions.vue
@@ -25,6 +25,7 @@ import {
   TEST_ID_PROMOTE_ACTION,
   TEST_ID_COPY_CREATE_NOTE_EMAIL_ACTION,
   TEST_ID_COPY_REFERENCE_ACTION,
+  TEST_ID_TOGGLE_ACTION,
   I18N_WORK_ITEM_ERROR_CONVERTING,
   WORK_ITEM_TYPE_VALUE_KEY_RESULT,
   WORK_ITEM_TYPE_VALUE_OBJECTIVE,
@@ -35,6 +36,7 @@ import {
 import updateWorkItemNotificationsMutation from '../graphql/update_work_item_notifications.mutation.graphql';
 import convertWorkItemMutation from '../graphql/work_item_convert.mutation.graphql';
 import projectWorkItemTypesQuery from '../graphql/project_work_item_types.query.graphql';
+import WorkItemStateToggle from './work_item_state_toggle.vue';
 
 export default {
   i18n: {
@@ -53,6 +55,7 @@ export default {
     GlDropdownDivider,
     GlModal,
     GlToggle,
+    WorkItemStateToggle,
   },
   directives: {
     GlModal: GlModalDirective,
@@ -65,12 +68,17 @@ export default {
   copyCreateNoteEmailTestId: TEST_ID_COPY_CREATE_NOTE_EMAIL_ACTION,
   deleteActionTestId: TEST_ID_DELETE_ACTION,
   promoteActionTestId: TEST_ID_PROMOTE_ACTION,
+  stateToggleTestId: TEST_ID_TOGGLE_ACTION,
   inject: ['isGroup'],
   props: {
     fullPath: {
       type: String,
       required: true,
     },
+    workItemState: {
+      type: String,
+      required: true,
+    },
     workItemId: {
       type: String,
       required: false,
@@ -126,6 +134,11 @@ export default {
       required: false,
       default: false,
     },
+    workItemParentId: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   apollo: {
     workItemTypes: {
@@ -310,6 +323,16 @@ export default {
         <template #list-item>{{ confidentialItemText }}</template>
       </gl-disclosure-dropdown-item>
 
+      <work-item-state-toggle
+        v-if="canUpdate"
+        :data-testid="$options.stateToggleTestId"
+        :work-item-id="workItemId"
+        :work-item-state="workItemState"
+        :work-item-parent-id="workItemParentId"
+        :work-item-type="workItemType"
+        show-as-dropdown-item
+      />
+
       <gl-disclosure-dropdown-item
         :data-testid="$options.copyReferenceTestId"
         :data-clipboard-text="workItemReference"
diff --git a/app/assets/javascripts/work_items/components/work_item_created_updated.vue b/app/assets/javascripts/work_items/components/work_item_created_updated.vue
index 460b5d35187..d352d66196a 100644
--- a/app/assets/javascripts/work_items/components/work_item_created_updated.vue
+++ b/app/assets/javascripts/work_items/components/work_item_created_updated.vue
@@ -86,7 +86,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-mb-3 gl-text-gray-700">
+  <div class="gl-mb-3 gl-text-gray-700 gl-mt-3">
     <work-item-state-badge v-if="workItemState" :work-item-state="workItemState" />
     <gl-loading-icon v-if="updateInProgress" :inline="true" class="gl-mr-3" />
     <confidentiality-badge
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 c8ea2a12038..45d3aa564a5 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -50,7 +50,6 @@ import WorkItemDescription from './work_item_description.vue';
 import WorkItemNotes from './work_item_notes.vue';
 import WorkItemDetailModal from './work_item_detail_modal.vue';
 import WorkItemAwardEmoji from './work_item_award_emoji.vue';
-import WorkItemStateToggleButton from './work_item_state_toggle_button.vue';
 import WorkItemRelationships from './work_item_relationships/work_item_relationships.vue';
 import WorkItemTypeIcon from './work_item_type_icon.vue';
 
@@ -61,7 +60,6 @@ export default {
   },
   isLoggedIn: isLoggedIn(),
   components: {
-    WorkItemStateToggleButton,
     GlAlert,
     GlButton,
     GlLoadingIcon,
@@ -274,6 +272,18 @@ export default {
     showWorkItemLinkedItems() {
       return this.hasLinkedWorkItems && this.workItemLinkedItems;
     },
+    titleClassHeader() {
+      return {
+        'gl-sm-display-none!': this.parentWorkItem,
+        'gl-w-full': !this.parentWorkItem,
+      };
+    },
+    titleClassComponent() {
+      return {
+        'gl-sm-display-block!': !this.parentWorkItem,
+        'gl-display-none gl-sm-display-block!': this.parentWorkItem,
+      };
+    },
   },
   mounted() {
     if (this.modalWorkItemIid) {
@@ -409,7 +419,20 @@ export default {
         </gl-skeleton-loader>
       </div>
       <template v-else>
-        <div class="gl-display-flex gl-align-items-center">
+        <div class="gl-sm-display-none! gl-display-flex">
+          <gl-button
+            v-if="isModal"
+            class="gl-ml-auto"
+            category="tertiary"
+            data-testid="work-item-close"
+            icon="close"
+            :aria-label="__('Close')"
+            @click="$emit('close')"
+          />
+        </div>
+        <div
+          class="gl-display-block gl-sm-display-flex! gl-align-items-flex-start gl-flex-direction-column gl-sm-flex-direction-row gl-gap-3 gl-pt-3"
+        >
           <ul
             v-if="parentWorkItem"
             class="list-unstyled gl-display-flex gl-min-w-0 gl-mr-auto gl-mb-0 gl-z-index-0"
@@ -440,53 +463,55 @@ export default {
             </li>
           </ul>
           <div
-            v-else-if="!error && !workItemLoading"
-            class="gl-mr-auto"
+            v-if="!error && !workItemLoading"
+            :class="titleClassHeader"
             data-testid="work-item-type"
           >
-            <work-item-type-icon
-              :work-item-icon-name="workItemIconName"
+            <work-item-title
+              v-if="workItem.title"
+              ref="title"
+              class="gl-sm-display-block!"
+              :work-item-id="workItem.id"
+              :work-item-title="workItem.title"
               :work-item-type="workItemType"
-              show-text
+              :work-item-parent-id="workItemParentId"
+              :can-update="canUpdate"
+              @error="updateError = $event"
+            />
+          </div>
+          <div class="detail-page-header-actions gl-display-flex gl-align-self-start gl-gap-3">
+            <work-item-todos
+              v-if="showWorkItemCurrentUserTodos"
+              :work-item-id="workItem.id"
+              :work-item-iid="workItemIid"
+              :work-item-fullpath="projectFullPath"
+              :current-user-todos="currentUserTodos"
+              @error="updateError = $event"
+            />
+            <work-item-actions
+              :full-path="fullPath"
+              :work-item-id="workItem.id"
+              :subscribed-to-notifications="workItemNotificationsSubscribed"
+              :work-item-type="workItemType"
+              :work-item-type-id="workItemTypeId"
+              :can-delete="canDelete"
+              :can-update="canUpdate"
+              :is-confidential="workItem.confidential"
+              :is-parent-confidential="parentWorkItemConfidentiality"
+              :work-item-reference="workItem.reference"
+              :work-item-create-note-email="workItem.createNoteEmail"
+              :is-modal="isModal"
+              :work-item-state="workItem.state"
+              :work-item-parent-id="workItemParentId"
+              @deleteWorkItem="$emit('deleteWorkItem', { workItemType, workItemId: workItem.id })"
+              @toggleWorkItemConfidentiality="toggleConfidentiality"
+              @error="updateError = $event"
+              @promotedToObjective="$emit('promotedToObjective', workItemIid)"
             />
-            {{ workItemBreadcrumbReference }}
           </div>
-          <work-item-state-toggle-button
-            v-if="canUpdate"
-            :work-item-id="workItem.id"
-            :work-item-state="workItem.state"
-            :work-item-parent-id="workItemParentId"
-            :work-item-type="workItemType"
-            @error="updateError = $event"
-          />
-          <work-item-todos
-            v-if="showWorkItemCurrentUserTodos"
-            :work-item-id="workItem.id"
-            :work-item-iid="workItemIid"
-            :work-item-fullpath="projectFullPath"
-            :current-user-todos="currentUserTodos"
-            @error="updateError = $event"
-          />
-          <work-item-actions
-            :full-path="fullPath"
-            :work-item-id="workItem.id"
-            :subscribed-to-notifications="workItemNotificationsSubscribed"
-            :work-item-type="workItemType"
-            :work-item-type-id="workItemTypeId"
-            :can-delete="canDelete"
-            :can-update="canUpdate"
-            :is-confidential="workItem.confidential"
-            :is-parent-confidential="parentWorkItemConfidentiality"
-            :work-item-reference="workItem.reference"
-            :work-item-create-note-email="workItem.createNoteEmail"
-            :is-modal="isModal"
-            @deleteWorkItem="$emit('deleteWorkItem', { workItemType, workItemId: workItem.id })"
-            @toggleWorkItemConfidentiality="toggleConfidentiality"
-            @error="updateError = $event"
-            @promotedToObjective="$emit('promotedToObjective', workItemIid)"
-          />
           <gl-button
             v-if="isModal"
+            class="gl-display-none gl-sm-display-block!"
             category="tertiary"
             data-testid="work-item-close"
             icon="close"
@@ -496,8 +521,9 @@ export default {
         </div>
         <div>
           <work-item-title
-            v-if="workItem.title"
+            v-if="workItem.title && parentWorkItem"
             ref="title"
+            :class="titleClassComponent"
             :work-item-id="workItem.id"
             :work-item-title="workItem.title"
             :work-item-type="workItemType"
diff --git a/app/assets/javascripts/work_items/components/work_item_state_toggle_button.vue b/app/assets/javascripts/work_items/components/work_item_state_toggle.vue
index 6d7a93f64c4..581ef9ec945 100644
--- a/app/assets/javascripts/work_items/components/work_item_state_toggle_button.vue
+++ b/app/assets/javascripts/work_items/components/work_item_state_toggle.vue
@@ -1,9 +1,8 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlDisclosureDropdownItem, GlLoadingIcon } from '@gitlab/ui';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import Tracking from '~/tracking';
-import { __, sprintf } from '~/locale';
-import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
+import { __ } from '~/locale';
 import { getUpdateWorkItemMutation } from '~/work_items/components/update_work_item';
 import {
   sprintfWorkItem,
@@ -17,6 +16,8 @@ import {
 export default {
   components: {
     GlButton,
+    GlDisclosureDropdownItem,
+    GlLoadingIcon,
   },
   mixins: [Tracking.mixin()],
   props: {
@@ -37,6 +38,11 @@ export default {
       required: false,
       default: null,
     },
+    showAsDropdownItem: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -51,9 +57,7 @@ export default {
       const baseText = this.isWorkItemOpen
         ? __('Close %{workItemType}')
         : __('Reopen %{workItemType}');
-      return capitalizeFirstCharacter(
-        sprintf(baseText, { workItemType: this.workItemType.toLowerCase() }),
-      );
+      return sprintfWorkItem(baseText, this.workItemType);
     },
     tracking() {
       return {
@@ -62,6 +66,12 @@ export default {
         property: `type_${this.workItemType}`,
       };
     },
+    toggleInProgressText() {
+      const baseText = this.isWorkItemOpen
+        ? __('Closing %{workItemType}')
+        : __('Reopening %{workItemType}');
+      return sprintfWorkItem(baseText, this.workItemType);
+    },
   },
   methods: {
     async updateWorkItem() {
@@ -104,7 +114,18 @@ export default {
 </script>
 
 <template>
-  <gl-button :loading="updateInProgress" @click="updateWorkItem">{{
+  <gl-disclosure-dropdown-item v-if="showAsDropdownItem" @action="updateWorkItem">
+    <template #list-item>
+      <template v-if="updateInProgress">
+        <gl-loading-icon inline size="sm" />
+        {{ toggleInProgressText }}
+      </template>
+      <template v-else>
+        {{ toggleWorkItemStateText }}
+      </template>
+    </template>
+  </gl-disclosure-dropdown-item>
+  <gl-button v-else :loading="updateInProgress" @click="updateWorkItem">{{
     toggleWorkItemStateText
   }}</gl-button>
 </template>
diff --git a/app/assets/javascripts/work_items/components/work_item_todos.vue b/app/assets/javascripts/work_items/components/work_item_todos.vue
index d5633adec9a..62518616398 100644
--- a/app/assets/javascripts/work_items/components/work_item_todos.vue
+++ b/app/assets/javascripts/work_items/components/work_item_todos.vue
@@ -177,7 +177,7 @@ export default {
     v-gl-tooltip.hover
     :loading="isLoading"
     :title="buttonLabel"
-    category="tertiary"
+    category="secondary"
     :aria-label="buttonLabel"
     @click="onToggle"
   >