WIP: Related issues FE

See https://gitlab.com/gitlab-org/gitlab-ee/issues/2001

app/assets/javascripts/issuable/related_issues/components/issue_token.js

+export default {
+  name: 'IssueToken',
+
+  props: {
+    reference: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    href: {
+      type: String,
+      required: true,
+    },
+  },
+
+  computed: {
+    removeButtonLabel() {
+      return `Remove related issue ${this.reference}`;
+    },
+  },
+
+  methods: {
+  },
+
+  template: `
+    <div>
+      <a :href="href">
+        {{ reference }}
+      </a>
+      <a :href="href">
+        {{ title }}
+      </a>
+      <button class="has-tooltip" :title="removeButtonLabel">
+        <i class="fa fa-spinner fa-spin" aria-hidden="true" />
+      </button>
+    </div>
+  `,
+};

app/assets/javascripts/issuable/related_issues/components/related_issues_block.js

+import eventHub from '../event_hub';
+import IssueToken from './issue_token';
+
+export default {
+  name: 'RelatedIssuesBlock',
+
+  props: {
+    relatedIssues: {
+      type: Array,
+      required: true,
+    },
+    fetchError: {
+      type: Error,
+      required: false,
+      default: null,
+    },
+  },
+
+  methods: {
+  },
+
+  template: `
+    <div
+      class="panel-slim panel-default">
+      <div class="panel-heading">
+        <h3 class="panel-title">
+          Related issues
+        </h3>
+      </div>
+      <div class="panel-body">
+        <template v-if="fetchError">
+          <i class="fa fa-exclamation-circle" aria-hidden="true" />
+          An error occurred while fetching the related issues
+        </template>
+        <template v-else-if="relatedIssues" v-for="issue in relatedIssues">
+          <IssueToken
+            :reference="issue.reference"
+            :title="issue.title"
+            :href="issue.href" />
+        </template>
+        <template v-else>
+          <i class="fa fa-spinner fa-spin" aria-hidden="true" />
+          Fetching related issues
+        </template>
+      </div>
+    </div>
+  `,
+
+  components: {
+    IssueToken,
+  },
+};

app/assets/javascripts/issuable/related_issues/event_hub.js

+import Vue from 'vue';
+
+export default new Vue();

app/assets/javascripts/issuable/related_issues/related_issues_root.js

+import Vue from 'vue';
+import RelatedIssuesBlock from './components/related_issues_block';
+import RelatedIssuesStore from './stores/related_issues_store';
+import RelatedIssuesService from './services/related_issues_service';
+
+class RelatedIssuesRoot {
+  constructor(wrapperElement) {
+    this.wrapperElement = wrapperElement;
+    const endpoint = this.wrapperElement.dataset.endpoint;
+
+    this.store = new RelatedIssuesStore({
+
+    });
+    this.service = new RelatedIssuesService(endpoint);
+  }
+
+  init() {
+    //this.bindEvents();
+
+    this.fetchRelatedIssues();
+
+    this.render();
+  }
+
+  render() {
+    this.vm = new Vue({
+      el: this.wrapperElement,
+      data: this.store.state,
+      template: `
+        <RelatedIssuesBlock
+          :relatedIssues="relatedIssues" />
+      `,
+      components: {
+        RelatedIssuesBlock,
+      },
+    });
+  }
+
+  fetchRelatedIssues() {
+    this.service.fetchRelatedIssues()
+      .then((issues) => {
+        this.store.setRelatedIssues(issues);
+      })
+      .catch((err) => {
+        this.store.setFetchError(err);
+      });
+  }
+
+  destroy() {
+    //this.unbindEvents();
+    if (this.vm) {
+      this.vm.$destroy();
+    }
+  }
+}
+
+export default RelatedIssuesRoot;

app/assets/javascripts/issuable/related_issues/services/related_issues_service.js

+import Vue from 'vue';
+import vueResource from 'vue-resource';
+import '../../../vue_shared/vue_resource_interceptor';
+
+Vue.use(vueResource);
+
+class RelatedIssuesService {
+  constructor(endpoint) {
+    this.relatedIssuesResource = Vue.resource(`${endpoint}`);
+  }
+
+  fetchRelatedIssues() {
+    return this.relatedIssuesResource.get()
+      .then((res) => {
+        let issues = res.data;
+        if (!issues) {
+          throw new Error('Response didn\'t include `service_desk_address`');
+        }
+
+        // TODO: Fake data
+        issues = issues.concat([{
+          title: 'This is the title of my issue',
+          state: 'open',
+          reference: '#1222',
+          path: '/gitlab-org/gitlab-ce/issues/0-fake-issue-id',
+        }, {
+          title: 'Another title to my other issue',
+          state: 'closed',
+          reference: '#43',
+          path: '/gitlab-org/gitlab-ce/issues/0-fake-issue-id',
+        }, {
+          title: 'One last title to my other issue',
+          state: 'closed',
+          reference: '#432',
+          path: '/gitlab-org/gitlab-ce/issues/0-fake-issue-id',
+        }, {
+          title: 'An issue from another project',
+          state: 'closed',
+          reference: 'design/#1222',
+          path: '/gitlab-org/gitlab-ce/issues/0-fake-issue-id',
+        }]);
+
+        return issues;
+      });
+  }
+}
+
+export default RelatedIssuesService;

app/assets/javascripts/issuable/related_issues/stores/related_issues_store.js

+class RelatedIssuesStore {
+  constructor(initialState = {}) {
+    this.state = Object.assign({
+      relatedIssues: null,
+      fetchError: null,
+    }, initialState);
+  }
+
+  setRelatedIssues(value) {
+    this.state.relatedIssues = value;
+  }
+
+  setFetchError(value) {
+    this.state.fetchError = value;
+  }
+
+}
+
+export default RelatedIssuesStore;

app/assets/javascripts/issue.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, no-underscore-dangle, one-var-declaration-per-line, object-shorthand, no-unused-vars, no-new, comma-dangle, consistent-return, quotes, dot-notation, quote-props, prefer-arrow-callback, max-len */
 /* global Flash */
+import RelatedIssuesRoot from './issuable/related_issues/related_issues_root';
+
 require('./flash');
 require('~/lib/utils/text_utility');
 require('vendor/jquery.waitforimages');
@@ -23,6 +25,7 @@ class Issue {
     Issue.$btnNewBranch = $('#new-branch');
+    Issue.initRelatedIssues();
     Issue.initMergeRequests();
     Issue.initRelatedBranches();
     Issue.initCanCreateBranch();
@@ -86,6 +89,12 @@ class Issue {
     }
   }
+  static initRelatedIssues() {
+    console.log('initRelatedIssues');
+    new RelatedIssuesRoot(document.querySelector('.js-related-issues-root'))
+      .init();
+  }
+
   static initMergeRequests() {
     var $container;
     $container = $('#merge-requests');

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

@@ -64,6 +64,8 @@
           = @issue.description
     = edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue_edited_ago')
+    .js-related-issues-root{ data: { endpoint: namespace_project_issue_related_issues_path(@project.namespace, @project, @issue) } }
+
     #merge-requests{ data: { url: referenced_merge_requests_namespace_project_issue_url(@project.namespace, @project, @issue) } }
       // This element is filled in using JavaScript.

db/schema.rb

@@ -24,6 +24,7 @@
     t.datetime "created_at"
     t.datetime "updated_at"
     t.text "message_html"
+    t.integer "cached_markdown_version"
   end
   create_table "appearances", force: :cascade do |t|
@@ -35,6 +36,7 @@
     t.datetime "updated_at"
     t.string "header_logo"
     t.text "description_html"
+    t.integer "cached_markdown_version"
   end
   create_table "application_settings", force: :cascade do |t|
@@ -118,9 +120,6 @@
     t.integer "shared_runners_minutes", default: 0, null: false
     t.integer "repository_size_limit", limit: 8, default: 0
     t.integer "terminal_max_session_time", default: 0, null: false
-    t.integer "unique_ips_limit_per_user"
-    t.integer "unique_ips_limit_time_window"
-    t.boolean "unique_ips_limit_enabled", default: false, null: false
     t.integer "minimum_mirror_sync_time", default: 15, null: false
     t.string "default_artifacts_expire_in", default: "0", null: false
     t.string "elasticsearch_url", default: "http://localhost:9200"
@@ -128,10 +127,14 @@
     t.string "elasticsearch_aws_region", default: "us-east-1"
     t.string "elasticsearch_aws_access_key"
     t.string "elasticsearch_aws_secret_access_key"
+    t.integer "unique_ips_limit_per_user"
+    t.integer "unique_ips_limit_time_window"
+    t.boolean "unique_ips_limit_enabled", default: false, null: false
     t.integer "geo_status_timeout", default: 10
     t.string "uuid"
     t.decimal "polling_interval_multiplier", default: 1.0, null: false
     t.boolean "elasticsearch_experimental_indexer"
+    t.integer "cached_markdown_version"
   end
   create_table "approvals", force: :cascade do |t|
@@ -209,6 +212,7 @@
     t.string "color"
     t.string "font"
     t.text "message_html"
+    t.integer "cached_markdown_version"
   end
   create_table "chat_names", force: :cascade do |t|
@@ -491,10 +495,10 @@
     t.integer "geo_node_key_id"
     t.integer "oauth_application_id"
     t.integer "system_hook_id"
-    t.boolean "enabled", default: true, null: false
     t.string "access_key"
     t.string "encrypted_secret_access_key"
     t.string "encrypted_secret_access_key_iv"
+    t.boolean "enabled", default: true, null: false
   end
   add_index "geo_nodes", ["access_key"], name: "index_geo_nodes_on_access_key", using: :btree
@@ -567,6 +571,7 @@
     t.integer "relative_position"
     t.datetime "closed_at"
     t.string "service_desk_reply_to"
+    t.integer "cached_markdown_version"
   end
   add_index "issues", ["assignee_id"], name: "index_issues_on_assignee_id", using: :btree
@@ -631,6 +636,7 @@
     t.text "description_html"
     t.string "type"
     t.integer "group_id"
+    t.integer "cached_markdown_version"
   end
   add_index "labels", ["group_id", "project_id", "title"], name: "index_labels_on_group_id_and_project_id_and_title", unique: true, using: :btree
@@ -771,6 +777,7 @@
     t.text "description_html"
     t.integer "time_estimate"
     t.boolean "squash", default: false, null: false
+    t.integer "cached_markdown_version"
   end
   add_index "merge_requests", ["assignee_id"], name: "index_merge_requests_on_assignee_id", using: :btree
@@ -808,6 +815,7 @@
     t.text "title_html"
     t.text "description_html"
     t.date "start_date"
+    t.integer "cached_markdown_version"
   end
   add_index "milestones", ["description"], name: "index_milestones_on_description_trigram", using: :gin, opclasses: {"description"=>"gin_trgm_ops"}
@@ -846,10 +854,11 @@
     t.text "description_html"
     t.boolean "lfs_enabled"
     t.integer "parent_id"
-    t.boolean "require_two_factor_authentication", default: false, null: false
-    t.integer "two_factor_grace_period", default: 48, null: false
     t.integer "shared_runners_minutes_limit"
     t.integer "repository_size_limit", limit: 8
+    t.boolean "require_two_factor_authentication", default: false, null: false
+    t.integer "two_factor_grace_period", default: 48, null: false
+    t.integer "cached_markdown_version"
   end
   add_index "namespaces", ["created_at"], name: "index_namespaces_on_created_at", using: :btree
@@ -886,6 +895,7 @@
     t.integer "resolved_by_id"
     t.string "discussion_id"
     t.text "note_html"
+    t.integer "cached_markdown_version"
   end
   add_index "notes", ["author_id"], name: "index_notes_on_author_id", using: :btree
@@ -1105,12 +1115,13 @@
     t.boolean "lfs_enabled"
     t.text "description_html"
     t.boolean "only_allow_merge_if_all_discussions_are_resolved"
-    t.integer "auto_cancel_pending_pipelines", default: 0, null: false
     t.integer "repository_size_limit", limit: 8
     t.integer "sync_time", default: 60, null: false
     t.boolean "printing_merge_request_link_enabled", default: true, null: false
-    t.string "import_jid"
     t.boolean "service_desk_enabled"
+    t.string "import_jid"
+    t.integer "auto_cancel_pending_pipelines", default: 0, null: false
+    t.integer "cached_markdown_version"
   end
   add_index "projects", ["ci_id"], name: "index_projects_on_ci_id", using: :btree
@@ -1218,6 +1229,7 @@
     t.datetime "created_at"
     t.datetime "updated_at"
     t.text "description_html"
+    t.integer "cached_markdown_version"
   end
   add_index "releases", ["project_id", "tag"], name: "index_releases_on_project_id_and_tag", using: :btree
@@ -1309,6 +1321,7 @@
     t.integer "visibility_level", default: 0, null: false
     t.text "title_html"
     t.text "content_html"
+    t.integer "cached_markdown_version"
   end
   add_index "snippets", ["author_id"], name: "index_snippets_on_author_id", using: :btree
@@ -1518,11 +1531,11 @@
     t.boolean "authorized_projects_populated"
     t.boolean "auditor", default: false, null: false
     t.boolean "ghost"
-    t.date "last_activity_on"
     t.boolean "notified_of_own_activity"
+    t.boolean "support_bot"
+    t.date "last_activity_on"
     t.boolean "require_two_factor_authentication_from_group", default: false, null: false
     t.integer "two_factor_grace_period", default: 48, null: false
-    t.boolean "support_bot"
   end
   add_index "users", ["admin"], name: "index_users_on_admin", using: :btree