Merge branch 'cngo-fix-task-actions-bug' into 'master'

Fix issue description task actions focus bug

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



Merged-by: Miranda Fluharty <mfluharty@gitlab.com>
Approved-by: James Rushford <jrushford@gitlab.com>
Approved-by: Miranda Fluharty <mfluharty@gitlab.com>
Reviewed-by: Miranda Fluharty <mfluharty@gitlab.com>
Reviewed-by: Coung Ngo <cngo@gitlab.com>
Reviewed-by: James Rushford <jrushford@gitlab.com>
Co-authored-by: Coung Ngo <cngo@gitlab.com>

app/assets/javascripts/issues/show/components/description.vue

@@ -34,10 +34,6 @@ import TaskListItemActions from './task_list_item_actions.vue';
 
 Vue.use(GlToast);
 
-const workItemTypes = {
-  TASK: 'task',
-};
-
 export default {
   directives: {
     SafeHtml,
@@ -146,19 +142,14 @@ export default {
         this.initialUpdate = false;
       }
 
-      this.$nextTick(() => {
-        this.renderGFM();
-      });
+      this.renderGFM();
     },
   },
   mounted() {
     eventHub.$on('convert-task-list-item', this.convertTaskListItem);
     eventHub.$on('delete-task-list-item', this.deleteTaskListItem);
 
-    // this.renderGFM();
-    this.$nextTick(() => {
-      this.renderGFM();
-    });
+    this.renderGFM();
   },
   beforeDestroy() {
     eventHub.$off('convert-task-list-item', this.convertTaskListItem);
@@ -167,7 +158,9 @@ export default {
     this.removeAllPointerEventListeners();
   },
   methods: {
-    renderGFM() {
+    async renderGFM() {
+      await this.$nextTick();
+
       renderGFM(this.$refs['gfm-content']);
 
       if (this.canUpdate) {
@@ -177,15 +170,13 @@ export default {
           fieldName: 'description',
           lockVersion: this.lockVersion,
           selector: '.detail-page-description',
-          onUpdate: this.taskListUpdateStarted.bind(this),
-          onSuccess: this.taskListUpdateSuccess.bind(this),
+          onUpdate: () => this.$emit('taskListUpdateStarted'),
+          onSuccess: () => this.$emit('taskListUpdateSucceeded'),
           onError: this.taskListUpdateError.bind(this),
         });
 
         this.removeAllPointerEventListeners();
-
         this.renderSortableLists();
-
         this.renderTaskListItemActions();
       }
     },
@@ -263,30 +254,18 @@ export default {
         this.pointerEventListeners.delete(listItem);
       });
     },
-    taskListUpdateStarted() {
-      this.$emit('taskListUpdateStarted');
-    },
-    taskListUpdateSuccess() {
-      this.$emit('taskListUpdateSucceeded');
-    },
     taskListUpdateError() {
-      createAlert({
-        message: sprintf(
-          __(
-            'Someone edited this %{issueType} at the same time you did. The description has been updated and you will need to make your changes again.',
-          ),
-          {
-            issueType: this.issuableType,
-          },
-        ),
-      });
+      const message = __(
+        'Someone edited this %{issueType} at the same time you did. The description has been updated and you will need to make your changes again.',
+      );
+      createAlert({ message: sprintf(message, { issueType: this.issuableType }) });
 
       this.$emit('taskListUpdateFailed');
     },
-    createTaskListItemActions(provide) {
+    createTaskListItemActions() {
       const app = new Vue({
         el: document.createElement('div'),
-        provide,
+        provide: { issuableType: this.issuableType },
         render: (createElement) => createElement(TaskListItemActions),
       });
       return app.$el;
@@ -310,8 +289,7 @@ export default {
       );
 
       taskListItems?.forEach((item) => {
-        const provide = { canUpdate: this.canUpdate, issuableType: this.issuableType };
-        const dropdown = this.createTaskListItemActions(provide);
+        const dropdown = this.createTaskListItemActions();
         this.insertNextToTaskListItemText(dropdown, item);
         this.addPointerEventListeners(item, '.task-list-item-actions');
         this.hasTaskListItemActions = true;
@@ -419,7 +397,7 @@ export default {
     },
     showAlert(message, error) {
       createAlert({
-        message: sprintfWorkItem(message, workItemTypes.TASK),
+        message: sprintfWorkItem(message, WORK_ITEM_TYPE_VALUE_TASK),
         error,
         captureError: true,
       });

app/assets/javascripts/issues/show/components/task_list_item_actions.vue

 <script>
 import { GlDisclosureDropdown, GlDisclosureDropdownItem } from '@gitlab/ui';
 import { TYPE_INCIDENT, TYPE_ISSUE } from '~/issues/constants';
-import { __, s__ } from '~/locale';
 import eventHub from '../event_hub';
 
 export default {
-  i18n: {
-    convertToTask: s__('WorkItem|Convert to task'),
-    delete: __('Delete'),
-    taskActions: s__('WorkItem|Task actions'),
-  },
   components: {
     GlDisclosureDropdown,
     GlDisclosureDropdownItem,
   },
-  inject: ['canUpdate', 'issuableType'],
+  inject: ['issuableType'],
   computed: {
     showConvertToTaskItem() {
       return [TYPE_INCIDENT, TYPE_ISSUE].includes(this.issuableType);
@@ -33,29 +27,28 @@ export default {
 
 <template>
   <gl-disclosure-dropdown
-    v-if="canUpdate"
     class="task-list-item-actions-wrapper"
     category="tertiary"
     icon="ellipsis_v"
     no-caret
     placement="bottom-end"
-    :toggle-text="$options.i18n.taskActions"
     text-sr-only
-    toggle-class="task-list-item-actions gl-opacity-0 gl-p-2! "
+    toggle-class="task-list-item-actions gl-opacity-0 !gl-p-2"
+    :toggle-text="s__('WorkItem|Task actions')"
   >
     <gl-disclosure-dropdown-item
       v-if="showConvertToTaskItem"
-      class="gl-ml-2!"
+      class="!gl-ml-2"
       data-testid="convert"
       @action="convertToTask"
     >
       <template #list-item>
-        {{ $options.i18n.convertToTask }}
+        {{ s__('WorkItem|Convert to task') }}
       </template>
     </gl-disclosure-dropdown-item>
-    <gl-disclosure-dropdown-item class="gl-ml-2!" data-testid="delete" @action="deleteTaskListItem">
+    <gl-disclosure-dropdown-item class="!gl-ml-2" data-testid="delete" @action="deleteTaskListItem">
       <template #list-item>
-        <span class="gl-text-red-500!">{{ $options.i18n.delete }}</span>
+        <span class="gl-text-red-500">{{ __('Delete') }}</span>
       </template>
     </gl-disclosure-dropdown-item>
   </gl-disclosure-dropdown>

app/assets/stylesheets/page_bundles/issues_show.scss

@@ -19,13 +19,13 @@
       inset-inline-end: -2rem;
     }
 
-    .task-list-item-actions-wrapper.show .task-list-item-actions,
+    .task-list-item-actions[aria-expanded="true"],
     .task-list-item-actions:is(:focus, :hover) {
       opacity: 1;
     }
   }
 
-  .md.has-task-list-item-actions > :is(ul, ol) > li {
+  .has-task-list-item-actions > :is(ul, ol) > li {
     margin-inline-end: 1.5rem;
   }
 
@@ -36,10 +36,6 @@
       inset-inline-start: -0.6rem;
     }
   }
-
-  .dropdown-item.text-danger p {
-    color: var(--red-500, $red-500); /* Override typography.scss making text black */
-  }
 }
 
 .is-ghost {

spec/frontend/issues/show/components/task_list_item_actions_spec.js

@@ -20,7 +20,7 @@ describe('TaskListItemActions component', () => {
     document.body.appendChild(li);
 
     wrapper = shallowMountExtended(TaskListItemActions, {
-      provide: { canUpdate: true, issuableType },
+      provide: { issuableType },
       attachTo: document.querySelector('div'),
     });
   };
@@ -32,8 +32,8 @@ describe('TaskListItemActions component', () => {
       category: 'tertiary',
       icon: 'ellipsis_v',
       placement: 'bottom-end',
-      toggleText: TaskListItemActions.i18n.taskActions,
       textSrOnly: true,
+      toggleText: 'Task actions',
     });
   });