remove HTML injection

Author: ToBinio

app/components/version-list/row.hbs

@@ -21,7 +21,20 @@
       {{/if}}
 
       <EmberTooltip @side="right" data-test-release-track-title>
-        {{{this.releaseTrackTitle}}}
+        {{this.releaseTrackTitle}}
+        {{#if this.displaysReleaseTrackModifiers}}
+          <p local-class='mark-wrapper'>
+            {{#if @version.isPrerelease}}
+              <mark local-class="yellow">prerelease</mark>
+            {{/if}}
+            {{#if this.hasAllReleaseTrackModifiers}}
+              ,
+            {{/if}}
+            {{#if @version.isHighestOfReleaseTrack}}
+              <mark local-class="green">latest</mark>
+            {{/if}}
+          </p>
+        {{/if}}
       </EmberTooltip>
     </div>
 
@@ -59,7 +72,9 @@
         <EmberTooltip>
           {{date-format @version.created_at 'PPP'}}
           {{#if @version.isNew}}
-            (<mark local-class="orange">recent</mark>)
+            <p local-class='mark-wrapper'>
+              <mark local-class="orange">recent</mark>
+            </p>
           {{/if}}
         </EmberTooltip>
       </time>

app/components/version-list/row.js

@@ -11,7 +11,7 @@ export default class VersionRow extends Component {
   get releaseTrackTitle() {
     let { version } = this.args;
     if (version.yanked) {
-      return 'This version was <mark style="color: hsl(0, 84%, 32%)">yanked</mark>';
+      return 'This version was yanked';
     }
     if (version.invalidSemver) {
       return `Failed to parse version ${version.num}`;
@@ -22,19 +22,19 @@ export default class VersionRow extends Component {
 
     let { releaseTrack } = version;
 
-    let modifiers = [];
-    if (version.isPrerelease) {
-      modifiers.push('<mark style="color: hsl(39, 71%, 45%)">prerelease</mark>');
-    }
-    if (version.isHighestOfReleaseTrack) {
-      modifiers.push('<mark style="color: hsl(136, 67%, 38%)">latest</mark>');
-    }
+    return `Release Track: ${releaseTrack}`;
+  }
 
-    let title = `Release Track: ${releaseTrack}`;
-    if (modifiers.length !== 0) {
-      title += ` (${modifiers.join(', ')})`;
-    }
-    return title;
+  get displaysReleaseTrackModifiers() {
+    let { version } = this.args;
+
+    return (version.isPrerelease || version.isHighestOfReleaseTrack) && !version.yanked;
+  }
+
+  get hasAllReleaseTrackModifiers() {
+    let { version } = this.args;
+
+    return version.isPrerelease && version.isHighestOfReleaseTrack;
   }
 
   get isOwner() {

app/components/version-list/row.module.css

@@ -190,12 +190,36 @@
     }
 }
 
-mark.orange{
-    color: hsl(39, 98%, 47%);
-}
-
 mark{
     background-color: transparent;
+
+    &.orange{
+         color: hsl(39, 98%, 47%);
+     }
+
+    &.yellow{
+         color: hsl(39, 71%, 45%);
+     }
+
+    &.green{
+         color: hsl(136, 67%, 38%);
+     }
+}
+
+.mark-wrapper{
+    display: inline;
+    margin: 0;
+    word-break: break-all;
+
+    &:before{
+        content: "(";
+        margin-right: -3px;
+    }
+
+    &:after{
+        content: ")";
+        margin-left: -3px;
+    }
 }
 
 .msrv {