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

package/src/modules/appCatalog/ui/components/SubResourcesSection.tsx

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