Hide deprecated packages behind a Type filter option

themes/default/layouts/partials/registry/package-list.html

@@ -41,6 +41,11 @@ <h4 class="text-lg">Filters</h4>
                                     label="Component"
                                     >Component</pulumi-filter-select-option
                                 >
+                                <pulumi-filter-select-option
+                                    value="deprecated"
+                                    label="Deprecated"
+                                    >Deprecated</pulumi-filter-select-option
+                                >
                             </div>
                         </pulumi-filter-select-option-group>
 

themes/default/layouts/partials/registry/package.html

@@ -4,7 +4,8 @@
 $packageType := "provider" }} {{ $packageTypeName := "Provider" }} {{ if
 .package.native }} {{ $packageType = "native-provider" }} {{ $packageTypeName =
 "Native Provider" }} {{ end }} {{ if .package.component }} {{ $packageType =
-"component" }} {{ $packageTypeName = "Component" }} {{ end }}
+"component" }} {{ $packageTypeName = "Component" }} {{ end }} {{ $isDeprecated
+:= eq .package.publisher "DEPRECATED" }}
 
 <div class="package my-1.5 w-full md:w-1/2 lg:w-1/3 px-3">
     <a href="{{ $href }}" title="{{ .package.title }}">
@@ -14,6 +15,7 @@
                 data-type="{{ $packageType }}"
                 data-category="{{ $packageCategory }}"
                 data-title="{{ .package.title }}"
+                data-deprecated="{{ $isDeprecated }}"
             >
                 <div class="flex flex-wrap">
                     <div

themes/default/theme/src/ts/packages.ts

@@ -10,19 +10,27 @@ const filterByTextAndTags = (filters, filterText) => {
     const noSelectedType = filters.find(f => f.group === "type") === undefined;
     const noSelectedCategory = filters.find(f => f.group === "category") === undefined;
 
-    if (filters.length > 0 || filterText) {
-        packages.forEach(pkg => pkg.classList.add("hidden"));
+    // "Deprecated" is a value in the type filter group. Deprecated packages stay
+    // hidden unless that option is selected.
+    const showDeprecated = !!filters.find(f => f.group === "type" && f.value === "deprecated");
 
-        packages.forEach(pkg => {
+    packages.forEach(pkg => pkg.classList.add("hidden"));
+
+    packages.forEach(pkg => {
             const el = pkg.querySelector("[data-category]") as HTMLElement;
             if (!el) return;
 
+            const packageIsDeprecated = el.getAttribute("data-deprecated") === "true";
+            if (packageIsDeprecated && !showDeprecated) return;
+
             const packageType = el.getAttribute("data-type");
             const packageCategory = el.getAttribute("data-category");
             let packageIsNative = packageType === "native-provider";
 
+            // A deprecated package that reaches this point was explicitly requested
+            // via the "Deprecated" type option, so treat it as a type match.
             const packageHasSelectedType =
-                !!filters.find(f => f.group === "type" && f.value === packageType) || (filters.find(f => f.group === "type" && f.value === "provider") && packageIsNative);
+                packageIsDeprecated || !!filters.find(f => f.group === "type" && f.value === packageType) || (filters.find(f => f.group === "type" && f.value === "provider") && packageIsNative);
             const packageHasSelectedCategory = !!filters.find(f => f.group === "category" && f.value === packageCategory);
 
             const packageTitle = el.getAttribute("data-title");
@@ -49,12 +57,35 @@ const filterByTextAndTags = (filters, filterText) => {
             if ((packageHasSelectedType || noSelectedType) && (packageHasSelectedCategory || noSelectedCategory) && (!filterText || packageIsAMatch)) {
                 pkg.classList.remove("hidden");
             }
-        });
-    } else {
-        packages.forEach(pkg => pkg.classList.remove("hidden"));
-    }
+    });
 }
 
+// Reads the currently active filter tags from the DOM.
+const getActiveFilters = () => {
+    const filters = [];
+    document.querySelectorAll("ul.active-tags li").forEach(tag => {
+        filters.push({
+            group: tag.getAttribute("data-filter-group"),
+            value: tag.getAttribute("data-filter-value"),
+            label: tag.getAttribute("data-filter-label"),
+        });
+    });
+    return filters;
+};
+
+// Reads the current free-text filter value from the search input.
+const getActiveFilterText = () => {
+    const searchElement = document.querySelector("pulumi-registry-list-search") as any;
+    const inputElement = searchElement?.querySelector(".registry-filter-input") as HTMLInputElement;
+    return inputElement?.value || "";
+};
+
+// Refreshes the visible-package count badges.
+const updateAllCount = () => {
+    const allCount = document.querySelectorAll(".all-packages .package:not(.hidden)").length;
+    document.querySelectorAll(".all-count").forEach(el => el.textContent = String(allCount));
+};
+
 document.querySelector(".section-registry")?.addEventListener("filterSelect", (event: CustomEvent) => {
     const source: any = event.target;
     const filters = event.detail as any[];
@@ -93,8 +124,7 @@ document.querySelector(".section-registry")?.addEventListener("filterSelect", (e
         el.setAttribute("data-selected-categories", selectedCategories);
     });
 
-    const allCount = document.querySelectorAll(".all-packages .package:not(.hidden)").length;
-    document.querySelectorAll(".all-count").forEach(el => el.textContent = String(allCount));
+    updateAllCount();
 
     document.querySelectorAll("pulumi-filter-select-option-group").forEach((el: any) => el.close());
 });
@@ -110,8 +140,7 @@ document.querySelector(".section-registry .no-results .reset")?.addEventListener
 
     filterByTextAndTags([], "");
 
-    const allCount = document.querySelectorAll(".all-packages .package:not(.hidden)").length;
-    document.querySelectorAll(".all-count").forEach(el => el.textContent = String(allCount));
+    updateAllCount();
 });
 
 document.querySelector(".section-registry")?.addEventListener("packageSearch", (event: CustomEvent) => {
@@ -130,10 +159,14 @@ document.querySelector(".section-registry")?.addEventListener("packageSearch", (
 
     filterByTextAndTags(filters, filterText);
 
-    const allCount = document.querySelectorAll(".all-packages .package:not(.hidden)").length;
-    document.querySelectorAll(".all-count").forEach(el => el.textContent = String(allCount));
+    updateAllCount();
 });
 
+// Apply the default filtering on initial load so deprecated packages start hidden,
+// and sync the count badges.
+filterByTextAndTags(getActiveFilters(), getActiveFilterText());
+updateAllCount();
+
 
 document.addEventListener("DOMContentLoaded", function () {
     const logoNavMenuButton = document.querySelector(".logo-nav-button") as HTMLElement;