@igstack/app-catalog-frontend-core 6.6.0 → 6.7.0

package/dist/esm/modules/appCatalog/ui/components/SubResourcesSection.js

@@ -1,13 +1,16 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useSearch, useNavigate, Link } from "@tanstack/react-router";
 import { X, Search } from "lucide-react";
-import { useMemo, useState, useEffect, useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useMemo, useState, useEffect, useRef, useDeferredValue, memo, useCallback, useLayoutEffect } from "react";
 import { Badge } from "../../../../ui/badge.js";
 import { Input } from "../../../../ui/input.js";
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "../../../../ui/table.js";
 import { PersonBadge, PersonOrGroupBadge } from "./PersonBadge.js";
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../../../../ui/select.js";
 import { markdownToPlainText } from "../../utils/markdownToPlainText.js";
+import { useSlotFilled, usePluginUser } from "../../../extensions/index.js";
+import { ResourceSubResourceRowActions } from "../../../extensions/features/resourceDetail.js";
 function getTierBadgeVariant(tierSlug) {
   if (tierSlug === "prod" || tierSlug === "production") return "destructive";
   if (tierSlug === "dev" || tierSlug === "staging") return "secondary";
@@ -30,11 +33,128 @@ function getTierDisplayLabel(tierSlug) {
   if (tierSlug === "staging") return "Staging";
   return tierSlug;
 }
+function SubResourceRowBase({
+  resource: sr,
+  parentSlug,
+  adminParent,
+  user,
+  isHighlighted,
+  measureRef,
+  index
+}) {
+  var _a;
+  const approvers = [...new Set(sr.approverSlugs ?? [])];
+  const accountId = (_a = sr.extra) == null ? void 0 : _a.awsAccountId;
+  return /* @__PURE__ */ jsxs(
+    TableRow,
+    {
+      ref: measureRef,
+      "data-index": index,
+      "aria-current": isHighlighted ? "true" : void 0,
+      className: `group ${isHighlighted ? "bg-primary/[0.06]" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs(TableCell, { children: [
+          /* @__PURE__ */ jsx(
+            Link,
+            {
+              to: "/app/$slug/sub/$subSlug",
+              params: { slug: parentSlug, subSlug: sr.slug },
+              className: "font-medium text-sm hover:text-primary hover:underline",
+              children: sr.displayName
+            }
+          ),
+          (sr.aliases ?? []).length > 0 && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: (sr.aliases ?? []).join(", ") }),
+          sr.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: markdownToPlainText(sr.description) })
+        ] }),
+        /* @__PURE__ */ jsx(TableCell, { children: sr.tier && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: getTierBadgeVariant(sr.tier),
+            className: `text-xs ${getTierBadgeClassName(sr.tier)}`,
+            children: getTierDisplayLabel(sr.tier)
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TableCell, { children: sr.ownerPersonSlug && /* @__PURE__ */ jsx(PersonBadge, { slug: sr.ownerPersonSlug }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: approvers.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: approvers.map((slug) => /* @__PURE__ */ jsx(PersonOrGroupBadge, { slug }, slug)) }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "-" }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: !accountId ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" }) : (
+          // The account id is what people copy; when the resource also
+          // carries its own `appUrl` that is the console deep link for THAT
+          // account, so the id doubles as the launch affordance.
+          sr.appUrl ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: sr.appUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "font-mono text-xs text-muted-foreground hover:text-primary hover:underline select-text",
+              children: accountId
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-muted-foreground select-text", children: accountId })
+        ) }),
+        adminParent !== void 0 && // `relative`, so a contribution can position something against the
+        // cell — a resting-state glyph under a hover-revealed control, for
+        // instance. A plugin cannot add it, because the cell is the core's.
+        /* @__PURE__ */ jsx(TableCell, { className: "relative w-[168px]", children: /* @__PURE__ */ jsx(
+          ResourceSubResourceRowActions,
+          {
+            resource: sr,
+            parent: adminParent,
+            user
+          }
+        ) })
+      ]
+    }
+  );
+}
+const SubResourceRow = memo(SubResourceRowBase);
+function SpacerRow({ height, columns }) {
+  return /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan: columns, style: { height, padding: 0, border: 0 } }) });
+}
+const VIRTUALIZE_ABOVE = 60;
+function useRowWindow(rows, scrollRef) {
+  var _a;
+  const virtualize = rows.length > VIRTUALIZE_ABOVE;
+  const getItemKey = useCallback((i) => {
+    var _a2;
+    return ((_a2 = rows[i]) == null ? void 0 : _a2.slug) ?? i;
+  }, [rows]);
+  const rowVirtualizer = useVirtualizer({
+    count: virtualize ? rows.length : 0,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 88,
+    overscan: 8,
+    getItemKey,
+    // The container's height limit, so the first render already mounts the
+    // rows that will be visible instead of painting an empty body for a frame.
+    initialRect: { width: 0, height: 400 }
+  });
+  const [hasLayout, setHasLayout] = useState(true);
+  useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (el) setHasLayout(el.clientHeight > 0);
+  }, [scrollRef]);
+  const windowed = virtualize && hasLayout;
+  const virtualRows = windowed ? rowVirtualizer.getVirtualItems() : [];
+  const padTop = ((_a = virtualRows[0]) == null ? void 0 : _a.start) ?? 0;
+  const lastRow = virtualRows.at(-1);
+  const padBottom = lastRow ? rowVirtualizer.getTotalSize() - lastRow.end : 0;
+  return {
+    windowed,
+    virtualRows,
+    padTop,
+    padBottom,
+    measureElement: rowVirtualizer.measureElement
+  };
+}
 function SubResourcesSection({
   subResources,
   parentSlug,
-  initialSearch
+  parent,
+  initialSearch,
+  childrenLabel
 }) {
+  const showAdminColumn = useSlotFilled("resourceSubResourceRowActions") && parent !== void 0;
+  const user = usePluginUser();
   const search_ = useSearch({ strict: false });
   const selectedSubSlug = search_.sub;
   const selectedSub = useMemo(
@@ -72,6 +192,8 @@ function SubResourcesSection({
   }, [initialSearch, subResources]);
   const [search, setSearch] = useState(seededSearch);
   const [tierFilter, setTierFilter] = useState("all");
+  const deferredSearch = useDeferredValue(search);
+  const isFilterPending = search !== deferredSearch;
   useEffect(() => setSearch(seededSearch), [seededSearch]);
   const uniqueTiers = useMemo(() => {
     const tiers = /* @__PURE__ */ new Set();
@@ -86,26 +208,42 @@ function SubResourcesSection({
     if (tierFilter !== "all") {
       result = result.filter((sr) => sr.tier === tierFilter);
     }
-    if (search.trim()) {
-      const q = search.trim().toLowerCase();
+    if (deferredSearch.trim()) {
+      const q = deferredSearch.trim().toLowerCase();
       result = result.filter(
         (sr) => {
-          var _a, _b;
-          return sr.displayName.toLowerCase().includes(q) || (sr.aliases ?? []).some((a) => a.toLowerCase().includes(q)) || (((_a = sr.description) == null ? void 0 : _a.toLowerCase().includes(q)) ?? false) || ((_b = sr.extra.awsAccountId) == null ? void 0 : _b.includes(q)) === true;
+          var _a, _b, _c;
+          return sr.displayName.toLowerCase().includes(q) || (sr.aliases ?? []).some((a) => a.toLowerCase().includes(q)) || (((_a = sr.description) == null ? void 0 : _a.toLowerCase().includes(q)) ?? false) || // `extra` is nullable on a served resource, and the cast hid that:
+          // dereferencing it threw a TypeError the moment anything typed into
+          // this box met a child without it, taking the whole table down.
+          ((_c = (_b = sr.extra) == null ? void 0 : _b.awsAccountId) == null ? void 0 : _c.includes(q)) === true;
         }
       );
     }
     return result;
-  }, [subResources, search, tierFilter, selectedSub]);
+  }, [subResources, deferredSearch, tierFilter, selectedSub]);
+  const scrollRef = useRef(null);
+  const { windowed, virtualRows, padTop, padBottom, measureElement } = useRowWindow(filtered, scrollRef);
+  const fixedLayout = subResources.length > VIRTUALIZE_ABOVE;
+  const columnCount = showAdminColumn ? 6 : 5;
   if (subResources.length === 0) return null;
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium", children: [
-      "Sub-Resources (",
-      filtered.length,
-      " of ",
-      subResources.length,
-      ")"
-    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": "sub-resources-heading",
+        className: "text-sm font-medium",
+        children: [
+          childrenLabel ?? "Sub-Resources",
+          " (",
+          filtered.length,
+          " of",
+          " ",
+          subResources.length,
+          ")"
+        ]
+      }
+    ) }),
     /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
       selectedSub ? (
         // `?sub=` wins over the search box, so show it where the box would be
@@ -130,7 +268,7 @@ function SubResourcesSection({
           Input,
           {
             ref: searchInputRef,
-            placeholder: "Search resources by name or alias...",
+            placeholder: `Search ${childrenLabel ?? "resources"} by name or alias...`,
             value: search,
             onChange: (e) => setSearch(e.target.value),
             className: "pl-9 h-9"
@@ -145,74 +283,69 @@ function SubResourcesSection({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "rounded-lg border max-h-[400px] overflow-auto", children: /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-        /* @__PURE__ */ jsx(TableHead, { children: "Name" }),
-        /* @__PURE__ */ jsx(TableHead, { className: "w-[80px]", children: "Tier" }),
-        /* @__PURE__ */ jsx(TableHead, { children: "Owner" }),
-        /* @__PURE__ */ jsx(TableHead, { children: "Approvers" }),
-        /* @__PURE__ */ jsx(TableHead, { className: "w-[140px]", children: "AWS Account" })
-      ] }) }),
-      /* @__PURE__ */ jsx(TableBody, { children: filtered.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
-        TableCell,
-        {
-          colSpan: 5,
-          className: "text-center text-muted-foreground py-8",
-          children: "No resources match your filters"
-        }
-      ) }) : filtered.map((sr) => {
-        const approvers = [...new Set(sr.approverSlugs ?? [])];
-        return /* @__PURE__ */ jsxs(
-          TableRow,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "rounded-lg border overflow-hidden",
+        "aria-busy": isFilterPending || void 0,
+        children: /* @__PURE__ */ jsxs(
+          Table,
           {
-            "aria-current": sr.slug === highlightSlug ? "true" : void 0,
-            className: sr.slug === highlightSlug ? "bg-primary/[0.06]" : "",
+            stickyHeader: true,
+            containerRef: scrollRef,
+            className: `max-h-[400px] transition-opacity ${fixedLayout ? "[&>table]:table-fixed" : ""} ${isFilterPending ? "opacity-60" : ""}`,
             children: [
-              /* @__PURE__ */ jsxs(TableCell, { children: [
-                /* @__PURE__ */ jsx(
-                  Link,
-                  {
-                    to: "/app/$slug/sub/$subSlug",
-                    params: { slug: parentSlug, subSlug: sr.slug },
-                    className: "font-medium text-sm hover:text-primary hover:underline",
-                    children: sr.displayName
-                  }
-                ),
-                (sr.aliases ?? []).length > 0 && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: (sr.aliases ?? []).join(", ") }),
-                sr.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: markdownToPlainText(sr.description) })
-              ] }),
-              /* @__PURE__ */ jsx(TableCell, { children: sr.tier && /* @__PURE__ */ jsx(
-                Badge,
+              /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+                /* @__PURE__ */ jsx(TableHead, { children: "Name" }),
+                /* @__PURE__ */ jsx(TableHead, { className: "w-[80px]", children: "Tier" }),
+                /* @__PURE__ */ jsx(TableHead, { className: fixedLayout ? "w-[190px]" : void 0, children: "Owner" }),
+                /* @__PURE__ */ jsx(TableHead, { className: fixedLayout ? "w-[230px]" : void 0, children: "Approvers" }),
+                /* @__PURE__ */ jsx(TableHead, { className: "w-[140px]", children: "AWS Account" }),
+                showAdminColumn && /* @__PURE__ */ jsx(TableHead, { className: "w-[168px]", children: "Admin" })
+              ] }) }),
+              /* @__PURE__ */ jsx(TableBody, { children: filtered.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+                TableCell,
                 {
-                  variant: getTierBadgeVariant(sr.tier),
-                  className: `text-xs ${getTierBadgeClassName(sr.tier)}`,
-                  children: getTierDisplayLabel(sr.tier)
+                  colSpan: showAdminColumn ? 6 : 5,
+                  className: "text-center text-muted-foreground py-8",
+                  children: "No resources match your filters"
                 }
-              ) }),
-              /* @__PURE__ */ jsx(TableCell, { children: sr.ownerPersonSlug && /* @__PURE__ */ jsx(PersonBadge, { slug: sr.ownerPersonSlug }) }),
-              /* @__PURE__ */ jsx(TableCell, { children: approvers.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: approvers.map((slug) => /* @__PURE__ */ jsx(PersonOrGroupBadge, { slug }, slug)) }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "-" }) }),
-              /* @__PURE__ */ jsx(TableCell, { children: (() => {
-                var _a;
-                const accountId = (_a = sr.extra) == null ? void 0 : _a.awsAccountId;
-                if (!accountId)
-                  return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" });
-                return sr.appUrl ? /* @__PURE__ */ jsx(
-                  "a",
-                  {
-                    href: sr.appUrl,
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    className: "font-mono text-xs text-muted-foreground hover:text-primary hover:underline select-text",
-                    children: accountId
-                  }
-                ) : /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-muted-foreground select-text", children: accountId });
-              })() })
+              ) }) : windowed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                padTop > 0 && /* @__PURE__ */ jsx(SpacerRow, { height: padTop, columns: columnCount }),
+                virtualRows.map((v) => {
+                  const sr = filtered[v.index];
+                  if (!sr) return null;
+                  return /* @__PURE__ */ jsx(
+                    SubResourceRow,
+                    {
+                      resource: sr,
+                      parentSlug,
+                      adminParent: showAdminColumn ? parent : void 0,
+                      user,
+                      isHighlighted: sr.slug === highlightSlug,
+                      measureRef: measureElement,
+                      index: v.index
+                    },
+                    sr.slug
+                  );
+                }),
+                padBottom > 0 && /* @__PURE__ */ jsx(SpacerRow, { height: padBottom, columns: columnCount })
+              ] }) : filtered.map((sr) => /* @__PURE__ */ jsx(
+                SubResourceRow,
+                {
+                  resource: sr,
+                  parentSlug,
+                  adminParent: showAdminColumn ? parent : void 0,
+                  user,
+                  isHighlighted: sr.slug === highlightSlug
+                },
+                sr.slug
+              )) })
             ]
-          },
-          sr.slug
-        );
-      }) })
-    ] }) })
+          }
+        )
+      }
+    )
   ] });
 }
 export {

package/dist/esm/modules/appCatalog/ui/components/SubResourcesSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubResourcesSection.js","sources":["../../../../../../src/modules/appCatalog/ui/components/SubResourcesSection.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { Link, useNavigate, useSearch } from '@tanstack/react-router'\nimport { Search, X } from 'lucide-react'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { Badge } from '~/ui/badge'\nimport { Input } from '~/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\nimport { PersonBadge, PersonOrGroupBadge } from './PersonBadge'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '~/ui/select'\nimport { markdownToPlainText } from '~/modules/appCatalog/utils/markdownToPlainText'\n\ninterface SubResourcesSectionProps {\n  subResources: Resource[]\n  /** Slug of the parent, for linking to a child's own page. */\n  parentSlug: string\n  /**\n   * Initial filter text (#38 item C). When the user reached this app by\n   * searching a term that matched a sub-resource, seed the sub-resource filter\n   * with that term so the matched child is revealed instead of buried in a\n   * long list (e.g. searching \"data\" → open Cloud Console → the matching\n   * account is pre-filtered). Only applied when it actually matches a child.\n   */\n  initialSearch?: string\n}\n\nfunction getTierBadgeVariant(\n  tierSlug: string,\n): 'default' | 'secondary' | 'destructive' | 'outline' {\n  if (tierSlug === 'prod' || tierSlug === 'production') return 'destructive'\n  if (tierSlug === 'dev' || tierSlug === 'staging') return 'secondary'\n  if (tierSlug === 'preprod') return 'outline'\n  if (tierSlug === 'sandbox') return 'outline'\n  return 'outline'\n}\n\nfunction getTierBadgeClassName(tierSlug: string): string {\n  if (tierSlug === 'preprod')\n    return 'border-amber-400 bg-amber-100 text-amber-800 hover:bg-amber-200'\n  if (tierSlug === 'sandbox')\n    return 'border-gray-400 bg-gray-100 text-gray-700 hover:bg-gray-200'\n  return ''\n}\n\nfunction getTierDisplayLabel(tierSlug: string): string {\n  if (tierSlug === 'preprod') return 'Pre-Prod'\n  if (tierSlug === 'sandbox') return 'Sandbox'\n  if (tierSlug === 'prod' || tierSlug === 'production') return 'Prod'\n  if (tierSlug === 'dev') return 'Dev'\n  if (tierSlug === 'staging') return 'Staging'\n  return tierSlug\n}\n\nexport function SubResourcesSection({\n  subResources,\n  parentSlug,\n  initialSearch,\n}: SubResourcesSectionProps) {\n  // `?sub=<slug>` — the one sub-resource the user asked for, by clicking its row\n  // in the search results. It wins over the query-seeded filter below: a query\n  // like \"project\" matches every child, so seeding with it would bury the row\n  // that was actually clicked.\n  const search_ = useSearch({ strict: false })\n  const selectedSubSlug = search_.sub\n  const selectedSub = useMemo(\n    () => subResources.find((sr) => sr.slug === selectedSubSlug) ?? null,\n    [subResources, selectedSubSlug],\n  )\n  const navigate = useNavigate()\n\n  // The row to mark as \"this one\". It outlives `?sub=` so clearing the filter\n  // brings the siblings back without losing the user's place.\n  const [highlightSlug, setHighlightSlug] = useState(selectedSubSlug)\n  useEffect(() => {\n    if (selectedSubSlug) setHighlightSlug(selectedSubSlug)\n  }, [selectedSubSlug])\n\n  // The search input only mounts once the selection is gone, so focus it then.\n  const searchInputRef = useRef<HTMLInputElement>(null)\n  const focusSearchAfterClearRef = useRef(false)\n  useEffect(() => {\n    if (!selectedSub && focusSearchAfterClearRef.current) {\n      focusSearchAfterClearRef.current = false\n      searchInputRef.current?.focus()\n    }\n  }, [selectedSub])\n\n  const clearSelection = () => {\n    focusSearchAfterClearRef.current = true\n    // A navigation, not a replace, so Back restores the single-row view.\n    void navigate({\n      to: '.',\n      search: (prev) => ({ ...prev, sub: undefined }),\n    })\n  }\n\n  // Seed the filter with the incoming query ONLY if it matches a child, so we\n  // reveal the matched sub-resource without hiding everything on a non-match.\n  const seededSearch = useMemo(() => {\n    const q = initialSearch?.trim().toLowerCase()\n    if (!q) return ''\n    const hit = subResources.some(\n      (sr) =>\n        sr.displayName.toLowerCase().includes(q) ||\n        (sr.aliases ?? []).some((a) => a.toLowerCase().includes(q)),\n    )\n    return hit ? initialSearch!.trim() : ''\n  }, [initialSearch, subResources])\n  const [search, setSearch] = useState(seededSearch)\n  const [tierFilter, setTierFilter] = useState<string>('all')\n\n  // useState only reads its argument on the first render, so without this the\n  // filter kept the query from whenever this panel first mounted — searching\n  // again with the panel already open left the old term in the box.\n  useEffect(() => setSearch(seededSearch), [seededSearch])\n\n  const uniqueTiers = useMemo(() => {\n    const tiers = new Set<string>()\n    for (const sr of subResources) {\n      if (sr.tier) tiers.add(sr.tier)\n    }\n    return [...tiers].sort()\n  }, [subResources])\n\n  const filtered = useMemo(() => {\n    if (selectedSub) return [selectedSub]\n\n    let result = subResources\n\n    if (tierFilter !== 'all') {\n      result = result.filter((sr) => sr.tier === tierFilter)\n    }\n\n    if (search.trim()) {\n      const q = search.trim().toLowerCase()\n      result = result.filter(\n        (sr) =>\n          sr.displayName.toLowerCase().includes(q) ||\n          (sr.aliases ?? []).some((a) => a.toLowerCase().includes(q)) ||\n          (sr.description?.toLowerCase().includes(q) ?? false) ||\n          (\n            (sr.extra as Record<string, unknown>).awsAccountId as\n              | string\n              | undefined\n          )?.includes(q) === true,\n      )\n    }\n\n    return result\n  }, [subResources, search, tierFilter, selectedSub])\n\n  if (subResources.length === 0) return null\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"text-sm font-medium\">\n          Sub-Resources ({filtered.length} of {subResources.length})\n        </div>\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex gap-2\">\n        {selectedSub ? (\n          // `?sub=` wins over the search box, so show it where the box would be\n          // and make it dismissible — otherwise the only way out is the URL.\n          <div className=\"flex flex-1 items-center\">\n            <Badge variant=\"secondary\" className=\"h-9 gap-1 pl-3 pr-1 text-sm\">\n              Showing: {selectedSub.displayName}\n              <button\n                type=\"button\"\n                aria-label=\"Clear sub-resource filter\"\n                onClick={clearSelection}\n                className=\"rounded-sm p-1 hover:bg-muted-foreground/20\"\n              >\n                <X className=\"size-4\" />\n              </button>\n            </Badge>\n          </div>\n        ) : (\n          <div className=\"relative flex-1\">\n            <Search className=\"absolute left-2.5 top-2.5 size-4 text-muted-foreground\" />\n            <Input\n              ref={searchInputRef}\n              placeholder=\"Search resources by name or alias...\"\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              className=\"pl-9 h-9\"\n            />\n          </div>\n        )}\n        {uniqueTiers.length > 1 && (\n          <Select value={tierFilter} onValueChange={setTierFilter}>\n            <SelectTrigger className=\"w-[130px] h-9\">\n              <SelectValue placeholder=\"All tiers\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"all\">All tiers</SelectItem>\n              {uniqueTiers.map((tier) => (\n                <SelectItem key={tier} value={tier}>\n                  {tier}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        )}\n      </div>\n\n      {/* Table */}\n      <div className=\"rounded-lg border max-h-[400px] overflow-auto\">\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead>Name</TableHead>\n              <TableHead className=\"w-[80px]\">Tier</TableHead>\n              <TableHead>Owner</TableHead>\n              <TableHead>Approvers</TableHead>\n              <TableHead className=\"w-[140px]\">AWS Account</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {filtered.length === 0 ? (\n              <TableRow>\n                <TableCell\n                  colSpan={5}\n                  className=\"text-center text-muted-foreground py-8\"\n                >\n                  No resources match your filters\n                </TableCell>\n              </TableRow>\n            ) : (\n              filtered.map((sr) => {\n                // Approvers are Person OR Group slugs; the badge resolves both.\n                const approvers = [...new Set(sr.approverSlugs ?? [])]\n\n                return (\n                  <TableRow\n                    key={sr.slug}\n                    // The row the user asked for, so it reads as \"this one\" even\n                    // once the filter is cleared and its siblings come back.\n                    aria-current={\n                      sr.slug === highlightSlug ? 'true' : undefined\n                    }\n                    className={\n                      sr.slug === highlightSlug ? 'bg-primary/[0.06]' : ''\n                    }\n                  >\n                    <TableCell>\n                      {/* A real link, not a click handler on the row: this is a\n                          table of resources, each of which has its own page. */}\n                      <Link\n                        to=\"/app/$slug/sub/$subSlug\"\n                        params={{ slug: parentSlug, subSlug: sr.slug }}\n                        className=\"font-medium text-sm hover:text-primary hover:underline\"\n                      >\n                        {sr.displayName}\n                      </Link>\n                      {(sr.aliases ?? []).length > 0 && (\n                        <div className=\"text-xs text-muted-foreground mt-0.5\">\n                          {(sr.aliases ?? []).join(', ')}\n                        </div>\n                      )}\n                      {sr.description && (\n                        <div className=\"text-xs text-muted-foreground mt-0.5\">\n                          {markdownToPlainText(sr.description)}\n                        </div>\n                      )}\n                    </TableCell>\n                    <TableCell>\n                      {sr.tier && (\n                        <Badge\n                          variant={getTierBadgeVariant(sr.tier)}\n                          className={`text-xs ${getTierBadgeClassName(sr.tier)}`}\n                        >\n                          {getTierDisplayLabel(sr.tier)}\n                        </Badge>\n                      )}\n                    </TableCell>\n                    <TableCell>\n                      {sr.ownerPersonSlug && (\n                        <PersonBadge slug={sr.ownerPersonSlug} />\n                      )}\n                    </TableCell>\n                    <TableCell>\n                      {approvers.length > 0 ? (\n                        <div className=\"flex flex-wrap gap-1\">\n                          {approvers.map((slug) => (\n                            <PersonOrGroupBadge key={slug} slug={slug} />\n                          ))}\n                        </div>\n                      ) : (\n                        <span className=\"text-muted-foreground\">-</span>\n                      )}\n                    </TableCell>\n                    <TableCell>\n                      {(() => {\n                        const accountId = (\n                          sr.extra as Record<string, unknown> | null | undefined\n                        )?.awsAccountId as string | undefined\n                        if (!accountId)\n                          return (\n                            <span className=\"text-muted-foreground\">—</span>\n                          )\n                        // The account id is what people copy; when the resource\n                        // also carries its own `appUrl` that is the console\n                        // deep link for THAT account, so the id doubles as the\n                        // launch affordance.\n                        return sr.appUrl ? (\n                          <a\n                            href={sr.appUrl}\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            className=\"font-mono text-xs text-muted-foreground hover:text-primary hover:underline select-text\"\n                          >\n                            {accountId}\n                          </a>\n                        ) : (\n                          <span className=\"font-mono text-xs text-muted-foreground select-text\">\n                            {accountId}\n                          </span>\n                        )\n                      })()}\n                    </TableCell>\n                  </TableRow>\n                )\n              })\n            )}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SubResourcesSection.js","sources":["../../../../../../src/modules/appCatalog/ui/components/SubResourcesSection.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { Link, useNavigate, useSearch } from '@tanstack/react-router'\nimport { Search, X } from 'lucide-react'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport {\n  memo,\n  useCallback,\n  useDeferredValue,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { Badge } from '~/ui/badge'\nimport { Input } from '~/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\nimport { PersonBadge, PersonOrGroupBadge } from './PersonBadge'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '~/ui/select'\nimport { markdownToPlainText } from '~/modules/appCatalog/utils/markdownToPlainText'\nimport {\n  ResourceSubResourceRowActions,\n  usePluginUser,\n  useSlotFilled,\n} from '~/modules/extensions/index'\n\ninterface SubResourcesSectionProps {\n  subResources: Resource[]\n  /** Slug of the parent, for linking to a child's own page. */\n  parentSlug: string\n  /**\n   * The parent itself, for the row-actions slot's payload.\n   *\n   * Optional, and the Admin column is skipped without it: a row action is about\n   * a child *of something*, and a plugin deciding whether it applies needs the\n   * parent to decide against.\n   */\n  parent?: Resource\n  /**\n   * Initial filter text (#38 item C). When the user reached this app by\n   * searching a term that matched a sub-resource, seed the sub-resource filter\n   * with that term so the matched child is revealed instead of buried in a\n   * long list (e.g. searching \"data\" → open Cloud Console → the matching\n   * account is pre-filtered). Only applied when it actually matches a child.\n   */\n  initialSearch?: string\n  /**\n   * What this app calls its children, from the parent's `childrenLabel`.\n   *\n   * The tab above already uses it, so without it here the tab and the panel it\n   * opens disagree — \"AWS Accounts\" over a heading that says \"Sub-Resources\".\n   * Defaults to the same generic wording the tab falls back to.\n   */\n  childrenLabel?: string\n}\n\nfunction getTierBadgeVariant(\n  tierSlug: string,\n): 'default' | 'secondary' | 'destructive' | 'outline' {\n  if (tierSlug === 'prod' || tierSlug === 'production') return 'destructive'\n  if (tierSlug === 'dev' || tierSlug === 'staging') return 'secondary'\n  if (tierSlug === 'preprod') return 'outline'\n  if (tierSlug === 'sandbox') return 'outline'\n  return 'outline'\n}\n\nfunction getTierBadgeClassName(tierSlug: string): string {\n  if (tierSlug === 'preprod')\n    return 'border-amber-400 bg-amber-100 text-amber-800 hover:bg-amber-200'\n  if (tierSlug === 'sandbox')\n    return 'border-gray-400 bg-gray-100 text-gray-700 hover:bg-gray-200'\n  return ''\n}\n\nfunction getTierDisplayLabel(tierSlug: string): string {\n  if (tierSlug === 'preprod') return 'Pre-Prod'\n  if (tierSlug === 'sandbox') return 'Sandbox'\n  if (tierSlug === 'prod' || tierSlug === 'production') return 'Prod'\n  if (tierSlug === 'dev') return 'Dev'\n  if (tierSlug === 'staging') return 'Staging'\n  return tierSlug\n}\n\ninterface SubResourceRowProps {\n  resource: Resource\n  parentSlug: string\n  /**\n   * The parent, but ONLY when the Admin column is being rendered — so this one\n   * prop carries both \"show the cell\" and \"what to pass it\", and the row needs\n   * no separate boolean. `undefined` means no Admin cell, which keeps the cells\n   * in lockstep with the header and the empty row's `colSpan`, all three\n   * derived from `showAdminColumn` in one place above.\n   */\n  adminParent?: Resource\n  user: ReturnType<typeof usePluginUser>\n  isHighlighted: boolean\n  /** Set only when the body is virtualized: lets the virtualizer measure the row. */\n  measureRef?: (el: HTMLTableRowElement | null) => void\n  index?: number\n}\n\n/**\n * One row, memoized — which is load-bearing rather than tidiness.\n *\n * Measured on the 667-account table: a filter keystroke that changed no visible\n * row still cost ~400ms and wrote 9 attributes, because every row's element\n * tree was rebuilt and diffed. The browser can build all 33,861 nodes from\n * scratch in ~195ms, so React was spending twice that to change nothing. The\n * work was reconciliation, not the DOM.\n *\n * `memo` makes a keystroke cost one props comparison per row instead. For that\n * to hold, every prop here must be a primitive or a stable reference:\n * `resource` objects come from the parent's `useMemo` filter (same identities),\n * `user` is memoized in `usePluginUser`, and the highlight arrives as a\n * BOOLEAN. Passing `highlightSlug` and comparing inside would change one prop\n * on all 667 rows whenever the highlight moved, re-rendering the whole table to\n * restyle two rows.\n */\nfunction SubResourceRowBase({\n  resource: sr,\n  parentSlug,\n  adminParent,\n  user,\n  isHighlighted,\n  measureRef,\n  index,\n}: SubResourceRowProps) {\n  // Approvers are Person OR Group slugs; the badge resolves both.\n  const approvers = [...new Set(sr.approverSlugs ?? [])]\n  const accountId = (sr.extra as Record<string, unknown> | null | undefined)\n    ?.awsAccountId as string | undefined\n\n  return (\n    <TableRow\n      ref={measureRef}\n      data-index={index}\n      // The row the user asked for, so it reads as \"this one\" even once the\n      // filter is cleared and its siblings come back.\n      aria-current={isHighlighted ? 'true' : undefined}\n      // `group` so a row-slot contribution can react to the row being hovered\n      // or focused (`group-hover:`, `group-focus-within:`). A plugin cannot add\n      // this itself — it renders inside the cell, not on the row — and the\n      // alternative is every plugin hand-rolling a `tr:hover &` arbitrary\n      // variant.\n      className={`group ${isHighlighted ? 'bg-primary/[0.06]' : ''}`}\n    >\n      <TableCell>\n        {/* A real link, not a click handler on the row: this is a table of\n            resources, each of which has its own page. */}\n        <Link\n          to=\"/app/$slug/sub/$subSlug\"\n          params={{ slug: parentSlug, subSlug: sr.slug }}\n          className=\"font-medium text-sm hover:text-primary hover:underline\"\n        >\n          {sr.displayName}\n        </Link>\n        {(sr.aliases ?? []).length > 0 && (\n          <div className=\"text-xs text-muted-foreground mt-0.5\">\n            {(sr.aliases ?? []).join(', ')}\n          </div>\n        )}\n        {sr.description && (\n          <div className=\"text-xs text-muted-foreground mt-0.5\">\n            {markdownToPlainText(sr.description)}\n          </div>\n        )}\n      </TableCell>\n      <TableCell>\n        {sr.tier && (\n          <Badge\n            variant={getTierBadgeVariant(sr.tier)}\n            className={`text-xs ${getTierBadgeClassName(sr.tier)}`}\n          >\n            {getTierDisplayLabel(sr.tier)}\n          </Badge>\n        )}\n      </TableCell>\n      <TableCell>\n        {sr.ownerPersonSlug && <PersonBadge slug={sr.ownerPersonSlug} />}\n      </TableCell>\n      <TableCell>\n        {approvers.length > 0 ? (\n          <div className=\"flex flex-wrap gap-1\">\n            {approvers.map((slug) => (\n              <PersonOrGroupBadge key={slug} slug={slug} />\n            ))}\n          </div>\n        ) : (\n          <span className=\"text-muted-foreground\">-</span>\n        )}\n      </TableCell>\n      <TableCell>\n        {!accountId ? (\n          <span className=\"text-muted-foreground\">—</span>\n        ) : // The account id is what people copy; when the resource also\n        // carries its own `appUrl` that is the console deep link for THAT\n        // account, so the id doubles as the launch affordance.\n        sr.appUrl ? (\n          <a\n            href={sr.appUrl}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"font-mono text-xs text-muted-foreground hover:text-primary hover:underline select-text\"\n          >\n            {accountId}\n          </a>\n        ) : (\n          <span className=\"font-mono text-xs text-muted-foreground select-text\">\n            {accountId}\n          </span>\n        )}\n      </TableCell>\n      {adminParent !== undefined && (\n        // `relative`, so a contribution can position something against the\n        // cell — a resting-state glyph under a hover-revealed control, for\n        // instance. A plugin cannot add it, because the cell is the core's.\n        <TableCell className=\"relative w-[168px]\">\n          <ResourceSubResourceRowActions\n            resource={sr}\n            parent={adminParent}\n            user={user}\n          />\n        </TableCell>\n      )}\n    </TableRow>\n  )\n}\n\nconst SubResourceRow = memo(SubResourceRowBase)\n\n/** Stands in for the rows scrolled out of view, so the scrollbar is honest. */\nfunction SpacerRow({ height, columns }: { height: number; columns: number }) {\n  return (\n    <tr aria-hidden=\"true\">\n      <td colSpan={columns} style={{ height, padding: 0, border: 0 }} />\n    </tr>\n  )\n}\n\n/**\n * Past this many rows the body is virtualized: only what is on screen, plus\n * a margin, is mounted.\n *\n * Tab panels mount only while active, so every switch to this tab built the\n * whole table from scratch — measured at ~950 ms for 667 rows and 33,861\n * nodes, every time. `memo` cannot help with that: it saves RE-rendering,\n * and this is mounting. Below the threshold nothing changes, which keeps the\n * common short child list rendering exactly as it always has.\n *\n * Spacer rows rather than absolutely positioned ones, so this stays a real\n * `<table>`: column widths still come from table layout, and the sticky\n * header still resolves against the container that scrolls.\n */\nconst VIRTUALIZE_ABOVE = 60\n\nfunction useRowWindow(\n  rows: readonly Resource[],\n  scrollRef: React.RefObject<HTMLDivElement | null>,\n) {\n  const virtualize = rows.length > VIRTUALIZE_ABOVE\n  // Stable on purpose. The virtualizer caches row measurements keyed on this\n  // function's IDENTITY, so an inline arrow — a new function every render —\n  // invalidated the cache on every render, which recomputed the visible range,\n  // which re-rendered, which made a new arrow: \"Too many re-renders\", and the\n  // card blanked the moment this tab opened.\n  const getItemKey = useCallback((i: number) => rows[i]?.slug ?? i, [rows])\n  // TanStack Virtual hands back functions the React Compiler cannot memoize\n  // safely, so it skips this hook. Nothing to fix short of dropping the\n  // library; registered in eslint.config.js alongside TanStack Table.\n  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Virtual\n  const rowVirtualizer = useVirtualizer({\n    count: virtualize ? rows.length : 0,\n    getScrollElement: () => scrollRef.current,\n    estimateSize: () => 88,\n    overscan: 8,\n    getItemKey,\n    // The container's height limit, so the first render already mounts the\n    // rows that will be visible instead of painting an empty body for a frame.\n    initialRect: { width: 0, height: 400 },\n  })\n  // No layout, no window. Without layout (jsdom, a print preview) the\n  // container measures 0 tall, a virtualizer mounts nothing, and every row\n  // becomes unreachable — so render them all instead.\n  const [hasLayout, setHasLayout] = useState(true)\n  useLayoutEffect(() => {\n    const el = scrollRef.current\n    if (el) setHasLayout(el.clientHeight > 0)\n  }, [scrollRef])\n  const windowed = virtualize && hasLayout\n  const virtualRows = windowed ? rowVirtualizer.getVirtualItems() : []\n  const padTop = virtualRows[0]?.start ?? 0\n  const lastRow = virtualRows.at(-1)\n  const padBottom = lastRow ? rowVirtualizer.getTotalSize() - lastRow.end : 0\n  return {\n    windowed,\n    virtualRows,\n    padTop,\n    padBottom,\n    measureElement: rowVirtualizer.measureElement,\n  }\n}\n\nexport function SubResourcesSection({\n  subResources,\n  parentSlug,\n  parent,\n  initialSearch,\n  childrenLabel,\n}: SubResourcesSectionProps) {\n  // `useSlotFilled`, not \"render it and see\": the column is layout, so the\n  // header has to be decided before any cell renders.\n  //\n  // ONE flag for the header, the cells and the empty row's colSpan. Deriving it\n  // separately per site is how a header appears over a column with no cells —\n  // the parent check only guarded the cells at first, and the header rendered\n  // anyway.\n  const showAdminColumn =\n    useSlotFilled('resourceSubResourceRowActions') && parent !== undefined\n  const user = usePluginUser()\n  // `?sub=<slug>` — the one sub-resource the user asked for, by clicking its row\n  // in the search results. It wins over the query-seeded filter below: a query\n  // like \"project\" matches every child, so seeding with it would bury the row\n  // that was actually clicked.\n  const search_ = useSearch({ strict: false })\n  const selectedSubSlug = search_.sub\n  const selectedSub = useMemo(\n    () => subResources.find((sr) => sr.slug === selectedSubSlug) ?? null,\n    [subResources, selectedSubSlug],\n  )\n  const navigate = useNavigate()\n\n  // The row to mark as \"this one\". It outlives `?sub=` so clearing the filter\n  // brings the siblings back without losing the user's place.\n  const [highlightSlug, setHighlightSlug] = useState(selectedSubSlug)\n  useEffect(() => {\n    if (selectedSubSlug) setHighlightSlug(selectedSubSlug)\n  }, [selectedSubSlug])\n\n  // The search input only mounts once the selection is gone, so focus it then.\n  const searchInputRef = useRef<HTMLInputElement>(null)\n  const focusSearchAfterClearRef = useRef(false)\n  useEffect(() => {\n    if (!selectedSub && focusSearchAfterClearRef.current) {\n      focusSearchAfterClearRef.current = false\n      searchInputRef.current?.focus()\n    }\n  }, [selectedSub])\n\n  const clearSelection = () => {\n    focusSearchAfterClearRef.current = true\n    // A navigation, not a replace, so Back restores the single-row view.\n    void navigate({\n      to: '.',\n      search: (prev) => ({ ...prev, sub: undefined }),\n    })\n  }\n\n  // Seed the filter with the incoming query ONLY if it matches a child, so we\n  // reveal the matched sub-resource without hiding everything on a non-match.\n  const seededSearch = useMemo(() => {\n    const q = initialSearch?.trim().toLowerCase()\n    if (!q) return ''\n    const hit = subResources.some(\n      (sr) =>\n        sr.displayName.toLowerCase().includes(q) ||\n        (sr.aliases ?? []).some((a) => a.toLowerCase().includes(q)),\n    )\n    return hit ? initialSearch!.trim() : ''\n  }, [initialSearch, subResources])\n  const [search, setSearch] = useState(seededSearch)\n  const [tierFilter, setTierFilter] = useState<string>('all')\n\n  /**\n   * The input stays bound to `search`; the TABLE filters on this.\n   *\n   * Rebuilding the row list is the expensive half of a keystroke — on a large\n   * entry it mounts and unmounts hundreds of rows — and doing it in the same\n   * render as the input makes the caret wait for it. `useDeferredValue` splits\n   * them: React commits the typed character immediately and re-renders the\n   * table at low priority, interruptibly. Keep typing and the superseded\n   * low-priority render is abandoned rather than finished and thrown away, so\n   * a burst costs roughly one filter pass instead of one per character.\n   *\n   * This only works because the row is memoized. Deferring tells React it MAY\n   * skip the expensive subtree between keystrokes; `memo` is what lets it\n   * actually skip anything.\n   *\n   * Not a debounce: there is no fixed delay to tune, nothing is thrown away on\n   * a fast typist, and the final result is never late — React yields to input\n   * instead of waiting on a timer.\n   */\n  const deferredSearch = useDeferredValue(search)\n  // True while the table is a render behind the box. Used only to dim it, so\n  // stale rows read as stale instead of as the answer.\n  const isFilterPending = search !== deferredSearch\n\n  // useState only reads its argument on the first render, so without this the\n  // filter kept the query from whenever this panel first mounted — searching\n  // again with the panel already open left the old term in the box.\n  useEffect(() => setSearch(seededSearch), [seededSearch])\n\n  const uniqueTiers = useMemo(() => {\n    const tiers = new Set<string>()\n    for (const sr of subResources) {\n      if (sr.tier) tiers.add(sr.tier)\n    }\n    return [...tiers].sort()\n  }, [subResources])\n\n  const filtered = useMemo(() => {\n    if (selectedSub) return [selectedSub]\n\n    let result = subResources\n\n    if (tierFilter !== 'all') {\n      result = result.filter((sr) => sr.tier === tierFilter)\n    }\n\n    if (deferredSearch.trim()) {\n      const q = deferredSearch.trim().toLowerCase()\n      result = result.filter(\n        (sr) =>\n          sr.displayName.toLowerCase().includes(q) ||\n          (sr.aliases ?? []).some((a) => a.toLowerCase().includes(q)) ||\n          (sr.description?.toLowerCase().includes(q) ?? false) ||\n          // `extra` is nullable on a served resource, and the cast hid that:\n          // dereferencing it threw a TypeError the moment anything typed into\n          // this box met a child without it, taking the whole table down.\n          (\n            (sr.extra as Record<string, unknown> | null | undefined)\n              ?.awsAccountId as string | undefined\n          )?.includes(q) === true,\n      )\n    }\n\n    return result\n  }, [subResources, deferredSearch, tierFilter, selectedSub])\n\n  const scrollRef = useRef<HTMLDivElement>(null)\n  const { windowed, virtualRows, padTop, padBottom, measureElement } =\n    useRowWindow(filtered, scrollRef)\n  // Fixed layout for any table big enough to be windowed. With auto layout a\n  // column is as wide as its widest MOUNTED cell, so while scrolling a\n  // windowed body the columns resized under the cursor — measured at 264px.\n  // Keyed on the unfiltered size so a big table keeps one layout while it is\n  // filtered below the threshold, rather than jumping as the user types.\n  const fixedLayout = subResources.length > VIRTUALIZE_ABOVE\n  const columnCount = showAdminColumn ? 6 : 5\n\n  if (subResources.length === 0) return null\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center justify-between\">\n        {/* `data-testid`, because the label is now deployment-defined: the test\n            kit used to locate this heading by matching the literal string\n            \"Sub-Resources (n of m)\", which silently stopped finding it the\n            moment a catalog named its children something else. */}\n        <div\n          data-testid=\"sub-resources-heading\"\n          className=\"text-sm font-medium\"\n        >\n          {/* Each site keeps the exact wording it had before `childrenLabel`\n              existed, so a deployment that names nothing renders identically —\n              the heading and the placeholder never agreed, and quietly making\n              them agree would change every existing catalog. */}\n          {childrenLabel ?? 'Sub-Resources'} ({filtered.length} of{' '}\n          {subResources.length})\n        </div>\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex gap-2\">\n        {selectedSub ? (\n          // `?sub=` wins over the search box, so show it where the box would be\n          // and make it dismissible — otherwise the only way out is the URL.\n          <div className=\"flex flex-1 items-center\">\n            <Badge variant=\"secondary\" className=\"h-9 gap-1 pl-3 pr-1 text-sm\">\n              Showing: {selectedSub.displayName}\n              <button\n                type=\"button\"\n                aria-label=\"Clear sub-resource filter\"\n                onClick={clearSelection}\n                className=\"rounded-sm p-1 hover:bg-muted-foreground/20\"\n              >\n                <X className=\"size-4\" />\n              </button>\n            </Badge>\n          </div>\n        ) : (\n          <div className=\"relative flex-1\">\n            <Search className=\"absolute left-2.5 top-2.5 size-4 text-muted-foreground\" />\n            <Input\n              ref={searchInputRef}\n              // Verbatim, not lower-cased: the deployment chose the casing and\n              // an acronym does not survive it — \"AWS Accounts\" became\n              // \"Search aws accounts…\". The no-label default stays lowercase\n              // because that is the wording this placeholder already had.\n              placeholder={`Search ${childrenLabel ?? 'resources'} by name or alias...`}\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              className=\"pl-9 h-9\"\n            />\n          </div>\n        )}\n        {uniqueTiers.length > 1 && (\n          <Select value={tierFilter} onValueChange={setTierFilter}>\n            <SelectTrigger className=\"w-[130px] h-9\">\n              <SelectValue placeholder=\"All tiers\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"all\">All tiers</SelectItem>\n              {uniqueTiers.map((tier) => (\n                <SelectItem key={tier} value={tier}>\n                  {tier}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        )}\n      </div>\n\n      {/* Table.\n          The vertical scroll sits on the Table's own wrapper rather than here,\n          so the sticky header below pins to the element that actually scrolls —\n          see the comment on `stickyHeader`. */}\n      {/* Dimmed while the rows are a render behind the filter box, so stale\n          rows read as stale rather than as the answer. `aria-busy` says the\n          same thing to a screen reader. Opacity only — no spinner and no\n          layout change, because on a fast filter this lasts one frame and\n          anything heavier would strobe. */}\n      <div\n        className=\"rounded-lg border overflow-hidden\"\n        aria-busy={isFilterPending || undefined}\n      >\n        <Table\n          stickyHeader\n          containerRef={scrollRef}\n          className={`max-h-[400px] transition-opacity ${\n            fixedLayout ? '[&>table]:table-fixed' : ''\n          } ${isFilterPending ? 'opacity-60' : ''}`}\n        >\n          <TableHeader>\n            <TableRow>\n              <TableHead>Name</TableHead>\n              <TableHead className=\"w-[80px]\">Tier</TableHead>\n              <TableHead className={fixedLayout ? 'w-[190px]' : undefined}>\n                Owner\n              </TableHead>\n              <TableHead className={fixedLayout ? 'w-[230px]' : undefined}>\n                Approvers\n              </TableHead>\n              <TableHead className=\"w-[140px]\">AWS Account</TableHead>\n              {/* Only when something fills it: an empty column with a header and\n                  no cells is worse than no column, and the open-source build\n                  registers no plugins at all. */}\n              {showAdminColumn && (\n                <TableHead className=\"w-[168px]\">Admin</TableHead>\n              )}\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {filtered.length === 0 ? (\n              <TableRow>\n                <TableCell\n                  colSpan={showAdminColumn ? 6 : 5}\n                  className=\"text-center text-muted-foreground py-8\"\n                >\n                  No resources match your filters\n                </TableCell>\n              </TableRow>\n            ) : windowed ? (\n              <>\n                {padTop > 0 && (\n                  <SpacerRow height={padTop} columns={columnCount} />\n                )}\n                {virtualRows.map((v) => {\n                  const sr = filtered[v.index]\n                  if (!sr) return null\n                  return (\n                    <SubResourceRow\n                      key={sr.slug}\n                      resource={sr}\n                      parentSlug={parentSlug}\n                      adminParent={showAdminColumn ? parent : undefined}\n                      user={user}\n                      isHighlighted={sr.slug === highlightSlug}\n                      measureRef={measureElement}\n                      index={v.index}\n                    />\n                  )\n                })}\n                {padBottom > 0 && (\n                  <SpacerRow height={padBottom} columns={columnCount} />\n                )}\n              </>\n            ) : (\n              filtered.map((sr) => (\n                <SubResourceRow\n                  key={sr.slug}\n                  resource={sr}\n                  parentSlug={parentSlug}\n                  // One prop for \"render the Admin cell, with this parent\".\n                  // `showAdminColumn` already implies `parent !== undefined`,\n                  // so this cannot disagree with the header or the colSpan.\n                  adminParent={showAdminColumn ? parent : undefined}\n                  user={user}\n                  isHighlighted={sr.slug === highlightSlug}\n                />\n              ))\n            )}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n"],"names":["_a"],"mappings":"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"}

package/dist/esm/modules/appCatalog/ui/components/TierVariantsSection.js

@@ -5,20 +5,6 @@ import { MarkdownText } from "./MarkdownText.js";
 import { Badge } from "../../../../ui/badge.js";
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "../../../../ui/table.js";
 import { useAppCatalogContext } from "../../context/AppCatalogContext.js";
-import "../context/AppCatalogFiltersContext.js";
-import "@tanstack/react-router";
-import "clsx";
-import "tailwind-merge";
-import "next-themes";
-import "@tanstack/react-query";
-import "../../../../ui/button.js";
-import "../../../auth/AuthModalContext.js";
-import "@radix-ui/react-dialog";
-import "../../../config/GlobalConfigContext.js";
-import "../../../pluginCore/PluginManagerContext.js";
-import "@radix-ui/react-tooltip";
-import "../../../../ui/empty.js";
-import "../pages/AppCatalogPage.js";
 import { PersonOrGroupBadge } from "./PersonBadge.js";
 import { displayUrl } from "../../utils/displayUrl.js";
 function getTierBadgeVariant(tierSlug) {

package/dist/esm/modules/appCatalog/ui/components/TierVariantsSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"TierVariantsSection.js","sources":["../../../../../../src/modules/appCatalog/ui/components/TierVariantsSection.tsx"],"sourcesContent":["import type {\n  AppAccessRequest,\n  AppApprovalMethod,\n  TierVariant,\n} from '@igstack/app-catalog-backend-core'\nimport { Bot, ExternalLinkIcon, Settings, Users } from 'lucide-react'\nimport { useState } from 'react'\nimport { MarkdownText } from './MarkdownText'\nimport { Badge } from '~/ui/badge'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\nimport { useAppCatalogContext } from '~/modules/appCatalog'\nimport { PersonOrGroupBadge } from './PersonBadge'\nimport { displayUrl } from '~/modules/appCatalog/utils/displayUrl'\n\ninterface TierVariantsSectionProps {\n  tiers: TierVariant[]\n}\n\nfunction getTierBadgeVariant(\n  tierSlug: string,\n): 'default' | 'secondary' | 'destructive' | 'outline' {\n  if (tierSlug === 'prod' || tierSlug === 'production') return 'destructive'\n  if (tierSlug === 'dev' || tierSlug === 'staging') return 'secondary'\n  if (tierSlug === 'preprod') return 'outline'\n  if (tierSlug === 'sandbox') return 'outline'\n  return 'outline'\n}\n\nfunction getTierBadgeClassName(tierSlug: string): string {\n  if (tierSlug === 'preprod')\n    return 'border-amber-400 bg-amber-100 text-amber-800 hover:bg-amber-200'\n  if (tierSlug === 'sandbox')\n    return 'border-gray-400 bg-gray-100 text-gray-700 hover:bg-gray-200'\n  return ''\n}\n\nfunction getTierDisplayLabel(tierSlug: string): string {\n  if (tierSlug === 'preprod') return 'Pre-Prod'\n  if (tierSlug === 'sandbox') return 'Sandbox'\n  if (tierSlug === 'prod' || tierSlug === 'production') return 'Prod'\n  if (tierSlug === 'dev') return 'Dev'\n  if (tierSlug === 'staging') return 'Staging'\n  return tierSlug\n}\n\nfunction getAccessIcon(type: string): React.ReactNode {\n  switch (type) {\n    case 'service':\n      return <Bot className=\"size-4 text-primary shrink-0\" />\n    case 'personTeam':\n      return <Users className=\"size-4 text-primary shrink-0\" />\n    default:\n      return <Settings className=\"size-4 text-primary shrink-0\" />\n  }\n}\n\n/** Compact inline access detail for a tier row */\nfunction TierAccessDetail({\n  accessRequest,\n  methods,\n}: {\n  accessRequest: AppAccessRequest\n  methods: AppApprovalMethod[]\n}) {\n  const [expanded, setExpanded] = useState(false)\n  const method = methods.find(\n    (m) => m.slug === accessRequest.approvalMethodSlug,\n  )\n\n  const hasExtra =\n    accessRequest.comments ||\n    accessRequest.urls?.length ||\n    accessRequest.approverSlugs?.length ||\n    accessRequest.postApprovalInstructions\n\n  return (\n    <div className=\"space-y-1\">\n      <div className=\"flex items-center gap-1.5\">\n        {method && getAccessIcon(method.type)}\n        {method?.type === 'service' && method.config.url ? (\n          <a\n            href={method.config.url}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"text-sm text-primary hover:underline inline-flex items-center gap-1\"\n          >\n            {method.displayName}\n            <ExternalLinkIcon className=\"size-3\" />\n          </a>\n        ) : (\n          <span className=\"text-sm\">\n            {method?.displayName ?? accessRequest.approvalMethodSlug}\n          </span>\n        )}\n        {hasExtra && (\n          <button\n            type=\"button\"\n            onClick={() => setExpanded(!expanded)}\n            className=\"text-xs text-muted-foreground hover:text-primary ml-1\"\n          >\n            {expanded ? 'less' : 'more...'}\n          </button>\n        )}\n      </div>\n      {expanded && (\n        <div className=\"pl-5 space-y-1.5 text-xs\">\n          {accessRequest.comments && (\n            <div className=\"text-muted-foreground prose prose-xs max-w-none\">\n              <MarkdownText>{accessRequest.comments}</MarkdownText>\n            </div>\n          )}\n          {accessRequest.urls && accessRequest.urls.length > 0 && (\n            <div className=\"flex flex-col gap-0.5\">\n              {accessRequest.urls.map((urlObj, idx) => (\n                <a\n                  key={`${urlObj.url}-${idx}`}\n                  href={urlObj.url}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  className=\"text-primary hover:underline inline-flex items-center gap-1\"\n                >\n                  {urlObj.label || displayUrl(urlObj.url)}\n                  <ExternalLinkIcon className=\"size-3\" />\n                </a>\n              ))}\n            </div>\n          )}\n          {accessRequest.approverSlugs &&\n            accessRequest.approverSlugs.length > 0 && (\n              <div className=\"flex flex-wrap gap-1\">\n                {accessRequest.approverSlugs.map((slug) => (\n                  <PersonOrGroupBadge key={slug} slug={slug} />\n                ))}\n              </div>\n            )}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport function TierVariantsSection({ tiers }: TierVariantsSectionProps) {\n  const { approvalMethods } = useAppCatalogContext()\n\n  if (tiers.length === 0) return null\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"text-sm font-medium\">Environment Tiers</div>\n      <div className=\"rounded-lg border\">\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead className=\"w-[100px]\">Tier</TableHead>\n              <TableHead>Name</TableHead>\n              <TableHead>URL</TableHead>\n              <TableHead>Access</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {tiers.map((tier) => (\n              <TableRow key={tier.tierSlug}>\n                <TableCell>\n                  <Badge\n                    variant={getTierBadgeVariant(tier.tierSlug)}\n                    className={getTierBadgeClassName(tier.tierSlug)}\n                  >\n                    {getTierDisplayLabel(tier.tierSlug)}\n                  </Badge>\n                </TableCell>\n                <TableCell className=\"font-medium\">\n                  {tier.displayName ?? tier.tierSlug}\n                </TableCell>\n                <TableCell>\n                  {tier.appUrl ? (\n                    <a\n                      href={tier.appUrl}\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      className=\"text-sm text-primary hover:underline inline-flex items-center gap-1\"\n                    >\n                      {displayUrl(tier.appUrl)}\n                      <ExternalLinkIcon className=\"size-3\" />\n                    </a>\n                  ) : (\n                    <span className=\"text-muted-foreground\">-</span>\n                  )}\n                </TableCell>\n                <TableCell>\n                  {tier.accessRequest ? (\n                    <TierAccessDetail\n                      accessRequest={tier.accessRequest}\n                      methods={approvalMethods}\n                    />\n                  ) : (\n                    <span className=\"text-muted-foreground\">Same as app</span>\n                  )}\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TierVariantsSection.js","sources":["../../../../../../src/modules/appCatalog/ui/components/TierVariantsSection.tsx"],"sourcesContent":["import type {\n  AppAccessRequest,\n  AppApprovalMethod,\n  TierVariant,\n} from '@igstack/app-catalog-backend-core'\nimport { Bot, ExternalLinkIcon, Settings, Users } from 'lucide-react'\nimport { useState } from 'react'\nimport { MarkdownText } from './MarkdownText'\nimport { Badge } from '~/ui/badge'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\nimport { useAppCatalogContext } from '~/modules/appCatalog'\nimport { PersonOrGroupBadge } from './PersonBadge'\nimport { displayUrl } from '~/modules/appCatalog/utils/displayUrl'\n\ninterface TierVariantsSectionProps {\n  tiers: TierVariant[]\n}\n\nfunction getTierBadgeVariant(\n  tierSlug: string,\n): 'default' | 'secondary' | 'destructive' | 'outline' {\n  if (tierSlug === 'prod' || tierSlug === 'production') return 'destructive'\n  if (tierSlug === 'dev' || tierSlug === 'staging') return 'secondary'\n  if (tierSlug === 'preprod') return 'outline'\n  if (tierSlug === 'sandbox') return 'outline'\n  return 'outline'\n}\n\nfunction getTierBadgeClassName(tierSlug: string): string {\n  if (tierSlug === 'preprod')\n    return 'border-amber-400 bg-amber-100 text-amber-800 hover:bg-amber-200'\n  if (tierSlug === 'sandbox')\n    return 'border-gray-400 bg-gray-100 text-gray-700 hover:bg-gray-200'\n  return ''\n}\n\nfunction getTierDisplayLabel(tierSlug: string): string {\n  if (tierSlug === 'preprod') return 'Pre-Prod'\n  if (tierSlug === 'sandbox') return 'Sandbox'\n  if (tierSlug === 'prod' || tierSlug === 'production') return 'Prod'\n  if (tierSlug === 'dev') return 'Dev'\n  if (tierSlug === 'staging') return 'Staging'\n  return tierSlug\n}\n\nfunction getAccessIcon(type: string): React.ReactNode {\n  switch (type) {\n    case 'service':\n      return <Bot className=\"size-4 text-primary shrink-0\" />\n    case 'personTeam':\n      return <Users className=\"size-4 text-primary shrink-0\" />\n    default:\n      return <Settings className=\"size-4 text-primary shrink-0\" />\n  }\n}\n\n/** Compact inline access detail for a tier row */\nfunction TierAccessDetail({\n  accessRequest,\n  methods,\n}: {\n  accessRequest: AppAccessRequest\n  methods: AppApprovalMethod[]\n}) {\n  const [expanded, setExpanded] = useState(false)\n  const method = methods.find(\n    (m) => m.slug === accessRequest.approvalMethodSlug,\n  )\n\n  const hasExtra =\n    accessRequest.comments ||\n    accessRequest.urls?.length ||\n    accessRequest.approverSlugs?.length ||\n    accessRequest.postApprovalInstructions\n\n  return (\n    <div className=\"space-y-1\">\n      <div className=\"flex items-center gap-1.5\">\n        {method && getAccessIcon(method.type)}\n        {method?.type === 'service' && method.config.url ? (\n          <a\n            href={method.config.url}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"text-sm text-primary hover:underline inline-flex items-center gap-1\"\n          >\n            {method.displayName}\n            <ExternalLinkIcon className=\"size-3\" />\n          </a>\n        ) : (\n          <span className=\"text-sm\">\n            {method?.displayName ?? accessRequest.approvalMethodSlug}\n          </span>\n        )}\n        {hasExtra && (\n          <button\n            type=\"button\"\n            onClick={() => setExpanded(!expanded)}\n            className=\"text-xs text-muted-foreground hover:text-primary ml-1\"\n          >\n            {expanded ? 'less' : 'more...'}\n          </button>\n        )}\n      </div>\n      {expanded && (\n        <div className=\"pl-5 space-y-1.5 text-xs\">\n          {accessRequest.comments && (\n            <div className=\"text-muted-foreground prose prose-xs max-w-none\">\n              <MarkdownText>{accessRequest.comments}</MarkdownText>\n            </div>\n          )}\n          {accessRequest.urls && accessRequest.urls.length > 0 && (\n            <div className=\"flex flex-col gap-0.5\">\n              {accessRequest.urls.map((urlObj, idx) => (\n                <a\n                  key={`${urlObj.url}-${idx}`}\n                  href={urlObj.url}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  className=\"text-primary hover:underline inline-flex items-center gap-1\"\n                >\n                  {urlObj.label || displayUrl(urlObj.url)}\n                  <ExternalLinkIcon className=\"size-3\" />\n                </a>\n              ))}\n            </div>\n          )}\n          {accessRequest.approverSlugs &&\n            accessRequest.approverSlugs.length > 0 && (\n              <div className=\"flex flex-wrap gap-1\">\n                {accessRequest.approverSlugs.map((slug) => (\n                  <PersonOrGroupBadge key={slug} slug={slug} />\n                ))}\n              </div>\n            )}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport function TierVariantsSection({ tiers }: TierVariantsSectionProps) {\n  const { approvalMethods } = useAppCatalogContext()\n\n  if (tiers.length === 0) return null\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"text-sm font-medium\">Environment Tiers</div>\n      <div className=\"rounded-lg border\">\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead className=\"w-[100px]\">Tier</TableHead>\n              <TableHead>Name</TableHead>\n              <TableHead>URL</TableHead>\n              <TableHead>Access</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {tiers.map((tier) => (\n              <TableRow key={tier.tierSlug}>\n                <TableCell>\n                  <Badge\n                    variant={getTierBadgeVariant(tier.tierSlug)}\n                    className={getTierBadgeClassName(tier.tierSlug)}\n                  >\n                    {getTierDisplayLabel(tier.tierSlug)}\n                  </Badge>\n                </TableCell>\n                <TableCell className=\"font-medium\">\n                  {tier.displayName ?? tier.tierSlug}\n                </TableCell>\n                <TableCell>\n                  {tier.appUrl ? (\n                    <a\n                      href={tier.appUrl}\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      className=\"text-sm text-primary hover:underline inline-flex items-center gap-1\"\n                    >\n                      {displayUrl(tier.appUrl)}\n                      <ExternalLinkIcon className=\"size-3\" />\n                    </a>\n                  ) : (\n                    <span className=\"text-muted-foreground\">-</span>\n                  )}\n                </TableCell>\n                <TableCell>\n                  {tier.accessRequest ? (\n                    <TierAccessDetail\n                      accessRequest={tier.accessRequest}\n                      methods={approvalMethods}\n                    />\n                  ) : (\n                    <span className=\"text-muted-foreground\">Same as app</span>\n                  )}\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/modules/appCatalog/ui/detail/AppDetails.d.ts

@@ -1,6 +1,5 @@
 import { Resource } from '@igstack/app-catalog-backend-core';
-export declare function AppDetails({ app, onAppClick, onClosePanel, }: {
+export declare function AppDetails({ app, onAppClick, }: {
     app: Resource;
     onAppClick?: (app: Resource) => void;
-    onClosePanel: () => void;
 }): import("react/jsx-runtime").JSX.Element;