From 380d8588e4f1bde64b0ad2572f5a083b42ec175e Mon Sep 17 00:00:00 2001
From: Antal Orcsik <antal.orcsik@bitrise.io>
Date: Mon, 26 Feb 2024 18:34:39 +0100
Subject: [PATCH] add tags to changelog list

---
 src/js/changelog/ChangelogList.js  | 58 ++++++++++++++++++++++++++++--
 src/js/changelog/ChangelogTopic.js |  7 ++++
 2 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/src/js/changelog/ChangelogList.js b/src/js/changelog/ChangelogList.js
index 4f616ea..6e23010 100644
--- a/src/js/changelog/ChangelogList.js
+++ b/src/js/changelog/ChangelogList.js
@@ -1,5 +1,5 @@
 import { formatDate } from "../common";
-import ChangelogTopic from "./ChangelogTopic";
+import ChangelogTopic, { ChangelogTag } from "./ChangelogTopic";
 
 class ChangelogList
 {
@@ -7,6 +7,26 @@ class ChangelogList
     /** @type {HTMLUListElement} */
     this.list = list;
 
+    /** @type {HTMLDivElement} */
+    this.tagPurpleFilledTemplate = this.list.querySelector("#changelog-tag-purple-filled");
+    this.tagPurpleFilledTemplate.id = "";
+    this.tagPurpleFilledTemplate.remove();
+
+    /** @type {HTMLDivElement} */
+    this.tagPurpleTemplate = this.list.querySelector("#changelog-tag-purple");
+    this.tagPurpleTemplate.id = "";
+    this.tagPurpleTemplate.remove();
+
+    /** @type {HTMLDivElement} */
+    this.tagBlueTemplate = this.list.querySelector("#changelog-tag-blue");
+    this.tagBlueTemplate.id = "";
+    this.tagBlueTemplate.remove();
+
+    /** @type {HTMLDivElement} */
+    this.tagYelowTemplate = this.list.querySelector("#changelog-tag-yellow");
+    this.tagYelowTemplate.id = "";
+    this.tagYelowTemplate.remove();
+
     /** @type {HTMLLIElement} */
     this.unreadListItemTemplate = this.list.querySelector("#changelog-unread-template");
     this.unreadListItemTemplate.id = "";
@@ -43,6 +63,33 @@ class ChangelogList
     return timestampListItem;
   }
 
+  /**
+   * @param {ChangelogTag[]} tags 
+   * @returns {HTMLDivElement?}
+   */
+  getTopicTag(tags) {
+    if (tags.includes("new-feature")) {
+      const listItemTag = this.tagPurpleFilledTemplate.cloneNode(true);
+      listItemTag.innerHTML = `🎉 New feature`;
+      return listItemTag;
+    }
+    else if (tags.includes("feature-update")) {
+      const listItemTag = this.tagPurpleTemplate.cloneNode(true);
+      listItemTag.innerHTML = 'Feature update';
+      return listItemTag;
+    }
+    else if (tags.includes("step-update")) {
+      const listItemTag = this.tagBlueTemplate.cloneNode(true);
+      listItemTag.innerHTML = 'Step update';
+      return listItemTag;
+    }
+    else if (tags.includes("deprecation")) {
+      const listItemTag = this.tagYelowTemplate.cloneNode(true);
+      listItemTag.innerHTML = 'Deprecation';
+      return listItemTag;
+    }
+    return null;
+  }
 
   /**
    * @param {ChangelogTopic} topic 
@@ -52,7 +99,14 @@ class ChangelogList
   renderListItem(topic, isUnread = false) {
     const listItem = (isUnread ? this.unreadListItemTemplate : this.readListItemTemplate).cloneNode(true);
     listItem.querySelector(".changelog-timestamp").innerHTML = formatDate(topic.createdAt);
-    listItem.querySelector(".changelog-title").innerHTML = topic.fancyTitle;
+
+    /** @type {HTMLDivElement} */
+    const changelogTitleElement = listItem.querySelector(".changelog-title");
+    changelogTitleElement.innerHTML = topic.fancyTitle;
+    
+    const listItemTag = this.getTopicTag(topic.tags);
+    if (listItemTag) changelogTitleElement.parentNode.insertBefore(listItemTag, changelogTitleElement);
+
     listItem.querySelector("a").href = topic.webflowUrl;
     return listItem;
   }
diff --git a/src/js/changelog/ChangelogTopic.js b/src/js/changelog/ChangelogTopic.js
index 1956f93..ada9aa6 100644
--- a/src/js/changelog/ChangelogTopic.js
+++ b/src/js/changelog/ChangelogTopic.js
@@ -1,3 +1,5 @@
+/** @typedef {("new-feature" | "feature-update" | "step-update" | "deprecation")} ChangelogTag */
+
 class ChangelogTopic
 {
   constructor(data) {
@@ -40,6 +42,11 @@ class ChangelogTopic
     }
     return [];
   }
+
+  /** @returns {ChangelogTag[]} */
+  get tags() {
+    return this.data.tags || [];
+  }
 }
 
 export default ChangelogTopic;
\ No newline at end of file