Remove some weird code to add/remove the task status

Moved the data into the data method
Renamed edited ago class name

app/assets/javascripts/issue_show/components/description.vue

@@ -29,7 +29,7 @@
       return {
         preAnimation: false,
         pulseAnimation: false,
-        timeAgoEl: $('.issue_edited_ago'),
+        timeAgoEl: $('.js-issue-edited-ago'),
       };
     },
     watch: {
@@ -49,22 +49,15 @@
       taskStatus() {
         const taskRegexMatches = this.taskStatus.match(/(\d+) of (\d+)/);
         const $issuableHeader = $('.issuable-meta');
-        let $tasks = $('#task_status', $issuableHeader);
-        let $tasksShort = $('#task_status_short', $issuableHeader);
-
-        if (this.taskStatus.indexOf('0 of 0') >= 0 || this.taskStatus.trim() === '') {
-          $tasks.remove();
-          $tasksShort.remove();
-        } else if (!$tasks.length && !$tasksShort.length) {
-          $tasks = $issuableHeader.append('<span id="task_status" class="hidden-xs hidden-sm"></span>')
-            .find('#task_status');
-          $tasksShort = $issuableHeader.append('<span id="task_status_short" class="hidden-md hidden-lg"></span>')
-            .find('#task_status_short');
-        }
+        const $tasks = $('#task_status', $issuableHeader);
+        const $tasksShort = $('#task_status_short', $issuableHeader);
         if (taskRegexMatches) {
           $tasks.text(this.taskStatus);
           $tasksShort.text(`${taskRegexMatches[1]}/${taskRegexMatches[2]} task${taskRegexMatches[2] > 1 ? 's' : ''}`);
+        } else {
+          $tasks.text('');
+          $tasksShort.text('');
         }
       },
     },

app/assets/javascripts/issue_show/index.js

@@ -2,31 +2,41 @@ import Vue from 'vue';
 import issuableApp from './components/app.vue';
 import '../vue_shared/vue_resource_interceptor';
-document.addEventListener('DOMContentLoaded', () => {
-  const issuableElement = document.getElementById('js-issuable-app');
-  const issuableTitleElement = issuableElement.querySelector('.title');
-  const issuableDescriptionElement = issuableElement.querySelector('.wiki');
-  const issuableDescriptionTextarea = issuableElement.querySelector('.js-task-list-field');
-  const {
-    canUpdate,
-    endpoint,
-    issuableRef,
-  } = issuableElement.dataset;
-  return new Vue({
-    el: issuableElement,
-    components: {
-      issuableApp,
-    },
-    render: createElement => createElement('issuable-app', {
+document.addEventListener('DOMContentLoaded', () => new Vue({
+  el: document.getElementById('js-issuable-app'),
+  components: {
+    issuableApp,
+  },
+  data() {
+    const issuableElement = this.$options.el;
+    const issuableTitleElement = issuableElement.querySelector('.title');
+    const issuableDescriptionElement = issuableElement.querySelector('.wiki');
+    const issuableDescriptionTextarea = issuableElement.querySelector('.js-task-list-field');
+    const {
+      canUpdate,
+      endpoint,
+      issuableRef,
+    } = issuableElement.dataset;
+    return {
+      canUpdate: gl.utils.convertPermissionToBoolean(canUpdate),
+      endpoint,
+      issuableRef,
+      initialTitle: issuableTitleElement.innerHTML,
+      initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '',
+      initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
+    };
+  },
+  render(createElement) {
+    return createElement('issuable-app', {
       props: {
-        canUpdate: gl.utils.convertPermissionToBoolean(canUpdate),
-        endpoint,
-        issuableRef,
-        initialTitle: issuableTitleElement.innerHTML,
-        initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '',
-        initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
+        canUpdate: this.canUpdate,
+        endpoint: this.endpoint,
+        issuableRef: this.issuableRef,
+        initialTitle: this.initialTitle,
+        initialDescriptionHtml: this.initialDescriptionHtml,
+        initialDescriptionText: this.initialDescriptionText,
       },
-    }),
-  });
-});
+    });
+  },
+}));

app/assets/stylesheets/framework/mobile.scss

@@ -112,7 +112,7 @@
     }
   }
-  .issue_edited_ago,
+  .issue-edited-ago,
   .note_edited_ago {
     display: none;
   }

app/helpers/issuables_helper.rb

@@ -136,11 +136,9 @@ module IssuablesHelper
       author_output << link_to_member(project, issuable.author, size: 24, by_username: true, avatar: false, mobile_classes: "hidden-sm hidden-md hidden-lg")
     end
-    if issuable.tasks?
-      output << "&ensp;".html_safe
-      output << content_tag(:span, issuable.task_status, id: "task_status", class: "hidden-xs hidden-sm")
-      output << content_tag(:span, issuable.task_status_short, id: "task_status_short", class: "hidden-md hidden-lg")
-    end
+    output << "&ensp;".html_safe
+    output << content_tag(:span, issuable.task_status, id: "task_status", class: "hidden-xs hidden-sm")
+    output << content_tag(:span, issuable.task_status_short, id: "task_status_short", class: "hidden-md hidden-lg")
     output
   end

app/views/projects/issues/show.html.haml

@@ -61,7 +61,7 @@
           .wiki= markdown_field(@issue, :description)
           %textarea.hidden.js-task-list-field= @issue.description
-    = edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue_edited_ago')
+    = edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue-edited-ago js-issue-edited-ago')
     #merge-requests{ data: { url: referenced_merge_requests_namespace_project_issue_url(@project.namespace, @project, @issue) } }
       // This element is filled in using JavaScript.