Merge branch '458457-update-work-item-sticky-header-to-add-state-badge' into 'master'

Add more actions to work item sticky header

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/152156



Merged-by: Enrique Alcántara <ealcantara@gitlab.com>
Approved-by: Nick Leonard <nleonard@gitlab.com>
Approved-by: Ross Byrne <robyrne@gitlab.com>
Approved-by: Enrique Alcántara <ealcantara@gitlab.com>
Reviewed-by: Nick Leonard <nleonard@gitlab.com>
Reviewed-by: Ross Byrne <robyrne@gitlab.com>
Co-authored-by: Deepika Guliani <dguliani@gitlab.com>

app/assets/javascripts/work_items/components/work_item_detail.vue

@@ -561,6 +561,7 @@ export default {
           @toggleWorkItemConfidentiality="toggleConfidentiality"
           @error="updateError = $event"
           @promotedToObjective="$emit('promotedToObjective', workItemIid)"
+          @toggleEditMode="enableEditMode"
         />
         <div data-testid="work-item-overview" class="work-item-overview">
           <section>

app/assets/javascripts/work_items/components/work_item_sticky_header.vue

 <script>
-import { GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
+import { GlLoadingIcon, GlIntersectionObserver, GlButton, GlLink } from '@gitlab/ui';
 import LockedBadge from '~/issuable/components/locked_badge.vue';
 import { WORKSPACE_PROJECT } from '~/issues/constants';
 import ConfidentialityBadge from '~/vue_shared/components/confidentiality_badge.vue';
 import { isNotesWidget } from '../utils';
 import WorkItemActions from './work_item_actions.vue';
 import WorkItemTodos from './work_item_todos.vue';
+import WorkItemStateBadge from './work_item_state_badge.vue';
 
 export default {
   components: {
@@ -15,6 +16,9 @@ export default {
     WorkItemActions,
     WorkItemTodos,
     ConfidentialityBadge,
+    WorkItemStateBadge,
+    GlButton,
+    GlLink,
   },
   props: {
     workItem: {
@@ -78,6 +82,9 @@ export default {
     projectFullPath() {
       return this.workItem.namespace?.fullPath;
     },
+    workItemState() {
+      return this.workItem.state;
+    },
   },
   WORKSPACE_PROJECT,
 };
@@ -95,18 +102,33 @@ export default {
         data-testid="work-item-sticky-header"
       >
         <div
-          class="work-item-sticky-header-text gl-align-items-center gl-mx-auto gl-px-6 gl-display-flex gl-gap-3"
+          class="work-item-sticky-header-text gl-items-center gl-mx-auto gl-px-5 xl:gl-px-6 gl-flex gl-gap-3"
         >
-          <span class="gl-text-truncate gl-font-weight-bold gl-pr-3 gl-mr-auto">
-            {{ workItem.title }}
-          </span>
+          <work-item-state-badge v-if="workItemState" :work-item-state="workItemState" />
           <gl-loading-icon v-if="updateInProgress" />
           <confidentiality-badge
             v-if="workItem.confidential"
             :issuable-type="workItemType"
             :workspace-type="$options.WORKSPACE_PROJECT"
+            hide-text-in-small-screens
           />
           <locked-badge v-if="isDiscussionLocked" :issuable-type="workItemType" />
+          <gl-link
+            class="gl-truncate gl-block gl-font-bold gl-pr-3 gl-mr-auto gl-text-black"
+            href="#top"
+            :title="workItem.title"
+          >
+            {{ workItem.title }}
+          </gl-link>
+          <gl-button
+            v-if="canUpdate"
+            category="secondary"
+            data-testid="work-item-edit-button-sticky"
+            class="shortcut-edit-wi-description"
+            @click="$emit('toggleEditMode')"
+          >
+            {{ __('Edit') }}
+          </gl-button>
           <work-item-todos
             v-if="showWorkItemCurrentUserTodos"
             :work-item-id="workItem.id"

spec/frontend/work_items/components/work_item_detail_spec.js

@@ -684,7 +684,7 @@ describe('WorkItemDetail component', () => {
 
   describe('work item two column view', () => {
     beforeEach(async () => {
-      createComponent({ workItemsBeta: true });
+      createComponent();
       await waitForPromises();
     });
 
@@ -701,10 +701,24 @@ describe('WorkItemDetail component', () => {
     });
   });
 
+  describe('work item sticky header', () => {
+    beforeEach(async () => {
+      createComponent();
+      await waitForPromises();
+    });
+
+    it('enables the edit mode when event `toggleEditMode` is emitted', async () => {
+      findStickyHeader().vm.$emit('toggleEditMode');
+      await nextTick();
+
+      expect(findWorkItemDescription().props('editMode')).toBe(true);
+    });
+  });
+
   describe('edit button for work item title and description', () => {
     describe('with permissions to update', () => {
       beforeEach(async () => {
-        createComponent({ workItemsBeta: true });
+        createComponent();
         await waitForPromises();
       });
 

spec/frontend/work_items/components/work_item_sticky_header_spec.js

-import { GlIntersectionObserver } from '@gitlab/ui';
+import { GlIntersectionObserver, GlLink } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { STATE_OPEN } from '~/work_items/constants';
@@ -8,14 +8,19 @@ import WorkItemStickyHeader from '~/work_items/components/work_item_sticky_heade
 import ConfidentialityBadge from '~/vue_shared/components/confidentiality_badge.vue';
 import WorkItemActions from '~/work_items/components/work_item_actions.vue';
 import WorkItemTodos from '~/work_items/components/work_item_todos.vue';
+import WorkItemStateBadge from '~/work_items/components/work_item_state_badge.vue';
 
 describe('WorkItemStickyHeader', () => {
   let wrapper;
 
-  const createComponent = ({ confidential = false, discussionLocked = false } = {}) => {
+  const createComponent = ({
+    confidential = false,
+    discussionLocked = false,
+    canUpdate = true,
+  } = {}) => {
     wrapper = shallowMountExtended(WorkItemStickyHeader, {
       propsData: {
-        workItem: workItemResponseFactory({ canUpdate: true, confidential, discussionLocked }).data
+        workItem: workItemResponseFactory({ canUpdate, confidential, discussionLocked }).data
           .workItem,
         fullPath: '/test',
         isStickyHeaderShowing: true,
@@ -36,6 +41,9 @@ describe('WorkItemStickyHeader', () => {
   const findWorkItemActions = () => wrapper.findComponent(WorkItemActions);
   const findWorkItemTodos = () => wrapper.findComponent(WorkItemTodos);
   const findIntersectionObserver = () => wrapper.findComponent(GlIntersectionObserver);
+  const findWorkItemStateBadge = () => wrapper.findComponent(WorkItemStateBadge);
+  const findEditButton = () => wrapper.findByTestId('work-item-edit-button-sticky');
+  const findWorkItemTitle = () => wrapper.findComponent(GlLink);
   const triggerPageScroll = () => findIntersectionObserver().vm.$emit('disappear');
 
   it('has the sticky header when the page is scrolled', async () => {
@@ -50,11 +58,35 @@ describe('WorkItemStickyHeader', () => {
   it('renders title, todos, and actions', () => {
     createComponent();
 
-    expect(wrapper.findByText('Updated title').exists()).toBe(true);
+    expect(findWorkItemTitle().exists()).toBe(true);
     expect(findWorkItemTodos().exists()).toBe(true);
     expect(findWorkItemActions().exists()).toBe(true);
   });
 
+  it('has title with the link to the top', () => {
+    createComponent();
+    expect(findWorkItemTitle().attributes('href')).toBe('#top');
+  });
+
+  it('renders the state badge', () => {
+    createComponent();
+    expect(findWorkItemStateBadge().exists()).toBe(true);
+  });
+
+  describe('edit button', () => {
+    it('renders the button when it has permissions to edit', () => {
+      createComponent({ canUpdate: true });
+
+      expect(findEditButton().exists()).toBe(true);
+    });
+
+    it('does not render the button when it does not have permissions to edit', () => {
+      createComponent({ canUpdate: false });
+
+      expect(findEditButton().exists()).toBe(false);
+    });
+  });
+
   describe('confidential badge', () => {
     describe('when not confidential', () => {
       beforeEach(() => {