From 65b7a320ea603bb7ad03ea1360dfaad5e228b7a3 Mon Sep 17 00:00:00 2001
From: Basirat Kareem <101411132+basiratkareem@users.noreply.github.com>
Date: Fri, 22 Nov 2024 11:50:26 +0100
Subject: [PATCH] Implement clickable flag buttons to filter records without
 updating search term (#5611)

Co-authored-by: Severin Neumann <severin.neumann@altmuehlnet.de>
---
 .../partials/ecosystem/registry/entry.html    | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/layouts/partials/ecosystem/registry/entry.html b/layouts/partials/ecosystem/registry/entry.html
index 27b17cc83014..ba87a52671fc 100644
--- a/layouts/partials/ecosystem/registry/entry.html
+++ b/layouts/partials/ecosystem/registry/entry.html
@@ -1,9 +1,9 @@
 {{ $languageNames := .languageNames -}}
 
 {{ with .value -}}
-    {{ 
+    {{
         $remoteRegistries := dict
-            "npm" (dict 
+            "npm" (dict
                 "urlPattern" "https://npmjs.com/package/%s"
                 "installTemplate" "ecosystem/registry/quickinstall/default.md"
                 "installLine" "npm install %s"
@@ -116,16 +116,19 @@ <h4 class="card-title mb-0 d-flex flex-row">
             <span class="badge rounded-pill text-bg-info"><i class="fa-regular fa-star"></i> new</span>
             {{ end -}}
             {{ if $isNative -}}
-            <span class="badge rounded-pill text-bg-success text-white"><i class="fa-solid fa-puzzle-piece"></i> native</span>
+            <a href="/ecosystem/registry?flag=native" class="badge rounded-pill text-bg-success text-white" title="Click to filter by native flag">
+            <i class="fa-solid fa-puzzle-piece"></i> native</a>
             {{ end -}}
             {{ if $isFirstParty -}}
-            <span class="badge rounded-pill text-bg-success text-white"><i class="fa-solid fa-heart"></i> first party integration</span>
+            <a href="/ecosystem/registry?flag=first_party" class="badge rounded-pill text-bg-success text-white" title="Click to filter by first party flag">
+            <i class="fa-solid fa-heart"></i> first party integration</a>
             {{ end -}}
             {{ if $usedInDemo -}}
             <span class="badge rounded-pill text-bg-secondary text-white" title="This package is used in the OpenTelemetry Demo!"><i class="fa-solid fa-shapes"></i> OTel Demo</span>
             {{ end -}}
             {{ if $deprecated -}}
-            <span class="badge rounded-pill text-bg-danger text-white" title=""><i class="fa-solid fa-ban"></i> deprecated</span>
+            <a href="/ecosystem/registry?flag=deprecated" class="badge rounded-pill text-bg-danger text-white" title="Click to filter by deprecated flag">
+            <i class="fa-solid fa-ban"></i> deprecated</a>
             {{ end -}}
             {{ if .cncfProjectLevel -}}
             <span class="badge rounded-pill text-bg-primary text-white" title="CNCF {{ .cncfProjectLevel}} Project">
@@ -136,7 +139,7 @@ <h4 class="card-title mb-0 d-flex flex-row">
         </h4>
         <p class="card-text">
             <small class="text-body-secondary">
-            by 
+            by
             {{ range $index, $author := .authors -}}
                 {{ if $index }}, {{ end }}
                 {{ if eq $author.name "OpenTelemetry Authors" -}}
@@ -191,7 +194,7 @@ <h6><i class="fa-solid fa-forward"></i> Quick Install</h6>
                     {{ .package.version }}
                 </div>
                 <small>Version</small>
-                </div>      
+                </div>
             </li>
             {{- end -}}
             {{ with .language -}}
@@ -201,7 +204,7 @@ <h6><i class="fa-solid fa-forward"></i> Quick Install</h6>
                     {{ $languageNames.Get . | default (humanize .) }}
                 </div>
                 <small>Language</small>
-                </div>      
+                </div>
             </li>
             {{- end }}
             {{ with .registryType -}}
@@ -211,7 +214,7 @@ <h6><i class="fa-solid fa-forward"></i> Quick Install</h6>
                     {{ . | humanize }}
                 </div>
                 <small>Component</small>
-                </div>      
+                </div>
             </li>
             {{- end -}}
             {{ with .license -}}
@@ -221,7 +224,7 @@ <h6><i class="fa-solid fa-forward"></i> Quick Install</h6>
                     {{ . }}
                 </div>
                 <small>License</small>
-                </div>      
+                </div>
             </li>
             {{- end -}}
             </div>