feat: add description to flags

Author: Iandenh

server/features.templ

@@ -70,6 +70,14 @@ templ feature(flag overleash.Feature, o *overleash.OverleashContext, showDetail
         }
     </div>
 
+    if flag.Description != "" {
+        <div class="description">
+            @templ.Raw(renderJiraLink(flag.Description))
+        </div>
+    }
+
+    <div class="separator"></div>
+
     <div class="current-status">
         <div>
             <span class="label">Feature flag:</span>

server/helpers.go

@@ -4,7 +4,10 @@ import (
 	"fmt"
 	"github.com/Iandenh/overleash/internal/version"
 	"github.com/Iandenh/overleash/overleash"
+	"html"
 	"net/url"
+	"regexp"
+	"strings"
 )
 
 func constraintsOfStrategy(strategy overleash.Strategy, segments map[int][]overleash.Constraint) []overleash.Constraint {
@@ -120,3 +123,18 @@ func (list *featureList) isSelected(key, value string) bool {
 
 	return urlValues.Get(key) == value
 }
+
+func renderJiraLink(text string) string {
+	text = html.EscapeString(strings.TrimSpace(text))
+
+	re := regexp.MustCompile(`https://[a-zA-Z0-9\-]+\.atlassian\.net/browse/([A-Z]+-\d+)`)
+
+	return re.ReplaceAllStringFunc(text, func(match string) string {
+		subMatch := re.FindStringSubmatch(match)
+		if len(subMatch) < 2 {
+			return match
+		}
+		ticket := subMatch[1]
+		return fmt.Sprintf(`<a target="_black" href="%s">%s</a>`, match, ticket)
+	})
+}

server/static/style.css

@@ -150,6 +150,10 @@ body {
     letter-spacing: .5px;
 }
 
+a {
+    color: var(--text-color);
+}
+
 header {
     padding: 5px 16px;
     box-shadow: inset 0 -1px 0 var(--border-color-muted);
@@ -227,12 +231,25 @@ header {
     }
 }
 
+.description {
+    margin-top: 6px;
+    color: var(--status-background-color);
+    font-size: 0.75rem;
+}
+
+.separator {
+    margin: 1rem -1.25rem;
+    width: auto;
+    background-color: var(--border-color-muted);
+    height: 1px;
+}
+
 .current-status {
     font-family: inherit;
     font-weight: 400;
     line-height: 1.3;
     font-size: 0.85rem;
-    margin-bottom: .5rem;
+    margin-bottom: 1rem;
     color: var(--status-background-color);
 
     .text {