@igstack/app-catalog-frontend-core 6.8.3 → 6.9.0

package/src/__tests__/modules/appCatalog/ui/components/SubResourcesSection.adminColumn.test.tsx

@@ -60,8 +60,9 @@ describe('the sub-resources Admin column', () => {
     expect(
       screen.queryByRole('columnheader', { name: 'Admin' }),
     ).not.toBeInTheDocument()
-    // Five columns, the same as before the slot existed.
-    expect(screen.getAllByRole('columnheader')).toHaveLength(5)
+    // Name, Tier, Owner, Approvers — these children carry no account id, so
+    // the AWS Account column is absent too.
+    expect(screen.getAllByRole('columnheader')).toHaveLength(4)
   })
 
   it('appears, with one cell per row, once a plugin fills it', () => {
@@ -70,7 +71,7 @@ describe('the sub-resources Admin column', () => {
     expect(
       screen.getByRole('columnheader', { name: 'Admin' }),
     ).toBeInTheDocument()
-    expect(screen.getAllByRole('columnheader')).toHaveLength(6)
+    expect(screen.getAllByRole('columnheader')).toHaveLength(5)
 
     // Called once PER ROW and handed that row — the opposite shape to the
     // header slot, which is called once with the whole list.
@@ -96,7 +97,43 @@ describe('the sub-resources Admin column', () => {
     )
 
     const empty = within(container).getByText(/No resources match your filters/)
-    expect(empty).toHaveAttribute('colspan', '6')
+    expect(empty).toHaveAttribute('colspan', '5')
+  })
+
+  it('is absent on a parent the plugin says it does not serve', () => {
+    // A contribution that returns null for this parent would still leave a
+    // header over a column of empty cells; `appliesTo` is how the plugin keeps
+    // the column off tables it has nothing for.
+    mount([
+      {
+        ...rowActionsPlugin,
+        appliesTo: {
+          resourceSubResourceRowActions: ({ parent: p }) => p.slug === 'other',
+        },
+      },
+    ])
+
+    expect(
+      screen.queryByRole('columnheader', { name: 'Admin' }),
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: /Provision/ }),
+    ).not.toBeInTheDocument()
+  })
+
+  it('appears on a parent the plugin says it serves', () => {
+    mount([
+      {
+        ...rowActionsPlugin,
+        appliesTo: {
+          resourceSubResourceRowActions: ({ parent: p }) => p.slug === 'cloud',
+        },
+      },
+    ])
+
+    expect(
+      screen.getByRole('columnheader', { name: 'Admin' }),
+    ).toBeInTheDocument()
   })
 
   it('skips the column when the parent is not known', () => {

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

@@ -96,6 +96,40 @@ describe('SubResourcesSection — account id as deep link', () => {
   })
 })
 
+// The AWS Account column belongs to families of AWS accounts. Anything else —
+// workflow namespaces, data projects — has nothing to put in it, and a column
+// of dashes under that header reads as missing data.
+describe('SubResourcesSection — AWS Account column', () => {
+  it('is absent when no child carries an account id', () => {
+    render(
+      <SubResourcesSection
+        parentSlug="workflows"
+        subResources={[sub('ns-a', null), sub('ns-b', { region: 'x' })]}
+      />,
+    )
+    expect(
+      screen.queryByRole('columnheader', { name: 'AWS Account' }),
+    ).not.toBeInTheDocument()
+    expect(screen.getAllByRole('columnheader')).toHaveLength(4)
+  })
+
+  it('is present when at least one child carries an account id', () => {
+    render(
+      <SubResourcesSection
+        parentSlug="cloud-console"
+        subResources={[
+          sub('acct-a', { awsAccountId: '111122223333' }),
+          sub('other', null),
+        ]}
+      />,
+    )
+    expect(
+      screen.getByRole('columnheader', { name: 'AWS Account' }),
+    ).toBeInTheDocument()
+    expect(screen.getAllByRole('columnheader')).toHaveLength(5)
+  })
+})
+
 // A `?sub=` deep link singles out one row; the table must say so and offer a
 // way back to the full list without editing the URL.
 describe('SubResourcesSection — clearing the ?sub= selection', () => {

package/src/__tests__/modules/dismiss/DismissStack.test.tsx

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom/vitest'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import {
   DismissStackProvider,
   useDismissable,
@@ -327,4 +327,94 @@ describe('the dismiss stack', () => {
 
     expect(document.activeElement).toBe(screen.getByTestId('layer-card'))
   })
+
+  /** A layer that takes the caret on mount, as the detail card does. */
+  function GrabbingLayer({
+    name,
+    onDismiss,
+    children,
+  }: {
+    name: string
+    onDismiss: () => void
+    children?: React.ReactNode
+  }) {
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => ref.current?.focus(), [])
+    useDismissable(ref, onDismiss)
+    return (
+      <div ref={ref} tabIndex={-1} data-testid={`layer-${name}`}>
+        {children}
+      </div>
+    )
+  }
+
+  it('gives the caret back to the field that opened the last layer, where it was', async () => {
+    // Enter on a search result opens the card; Escape has to land the reader
+    // back in the query, caret and all, so a wrong pick is one keystroke to fix.
+    function Host() {
+      const [open, setOpen] = useState(false)
+      return (
+        <>
+          <input
+            aria-label="search"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') setOpen(true)
+            }}
+          />
+          {open && (
+            <GrabbingLayer name="card" onDismiss={() => setOpen(false)} />
+          )}
+        </>
+      )
+    }
+    render(<Host />)
+    const input = screen.getByLabelText<HTMLInputElement>('search')
+
+    await userEvent.type(input, 'Master Control{ArrowLeft}{Enter}')
+    expect(screen.getByTestId('layer-card')).toHaveFocus()
+
+    await esc()
+    await new Promise((r) => setTimeout(r, 0))
+
+    expect(input).toHaveFocus()
+    expect([input.selectionStart, input.selectionEnd]).toEqual([13, 13])
+  })
+
+  it('does not hand the caret to an opener still covered by a layer', async () => {
+    // A dialog opened from inside the card returns to its button in the card;
+    // only the card closing reaches the field behind it.
+    function Host() {
+      const [card, setCard] = useState(false)
+      const [dialog, setDialog] = useState(false)
+      return (
+        <>
+          <button type="button" onClick={() => setCard(true)}>
+            open card
+          </button>
+          {card && (
+            <GrabbingLayer name="card" onDismiss={() => setCard(false)}>
+              <button type="button" onClick={() => setDialog(true)}>
+                open dialog
+              </button>
+            </GrabbingLayer>
+          )}
+          {dialog && (
+            <GrabbingLayer name="dialog" onDismiss={() => setDialog(false)} />
+          )}
+        </>
+      )
+    }
+    render(<Host />)
+    const tick = () => new Promise((r) => setTimeout(r, 0))
+
+    await userEvent.click(screen.getByRole('button', { name: 'open card' }))
+    await userEvent.click(screen.getByRole('button', { name: 'open dialog' }))
+    await esc()
+    await tick()
+    expect(screen.getByRole('button', { name: 'open dialog' })).toHaveFocus()
+
+    await esc()
+    await tick()
+    expect(screen.getByRole('button', { name: 'open card' })).toHaveFocus()
+  })
 })

package/src/index.tsx

@@ -19,9 +19,11 @@ export type { PwaAutoUpdateOptions, PwaUpdateHandle } from './modules/pwa/index'
 // have to depend on backend-core directly just to type a handler.
 export type {
   AcPlugin,
+  PluginAppliesTo,
   PluginSlots,
   PluginWrappers,
   PluginUser,
+  SlotScopeSpec,
   SlotSpec,
   WrapperSpec,
 } from './modules/extensions/index'

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

@@ -67,6 +67,16 @@ interface SubResourcesSectionProps {
   childrenLabel?: string
 }
 
+/**
+ * The AWS account a child stands for, if it is one. `extra` is nullable on a
+ * served resource, so the optional chain is load-bearing: dereferencing it threw
+ * the moment anything typed into the filter met a child without it.
+ */
+function awsAccountIdOf(sr: Resource): string | undefined {
+  return (sr.extra as Record<string, unknown> | null | undefined)
+    ?.awsAccountId as string | undefined
+}
+
 function getTierBadgeVariant(
   tierSlug: string,
 ): 'default' | 'secondary' | 'destructive' | 'outline' {
@@ -105,6 +115,8 @@ interface SubResourceRowProps {
    * derived from `showAdminColumn` in one place above.
    */
   adminParent?: Resource
+  /** Whether the AWS Account column is rendered — `showAccountColumn` above. */
+  showAccount: boolean
   user: ReturnType<typeof usePluginUser>
   isHighlighted: boolean
   /** Set only when the body is virtualized: lets the virtualizer measure the row. */
@@ -133,6 +145,7 @@ function SubResourceRowBase({
   resource: sr,
   parentSlug,
   adminParent,
+  showAccount,
   user,
   isHighlighted,
   measureRef,
@@ -140,8 +153,7 @@ function SubResourceRowBase({
 }: 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
+  const accountId = awsAccountIdOf(sr)
 
   return (
     <TableRow
@@ -202,27 +214,29 @@ function SubResourceRowBase({
           <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>
+      {showAccount && (
+        <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
@@ -326,9 +340,19 @@ export function SubResourcesSection({
   // 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
+  // anyway. The scope lets a plugin that serves only some parents keep the
+  // column off every other parent's table; no parent means nothing to decide.
+  const showAdminColumn = useSlotFilled(
+    'resourceSubResourceRowActions',
+    parent ? { parent } : undefined,
+  )
+  // Same rule from the data side: only a family of AWS accounts has an account
+  // id to show. Decided on the UNFILTERED list, so typing a filter that happens
+  // to hide every account does not make the column jump.
+  const showAccountColumn = useMemo(
+    () => subResources.some((sr) => awsAccountIdOf(sr) !== undefined),
+    [subResources],
+  )
   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
@@ -436,13 +460,7 @@ export function SubResourcesSection({
           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> | null | undefined)
-              ?.awsAccountId as string | undefined
-          )?.includes(q) === true,
+          awsAccountIdOf(sr)?.includes(q) === true,
       )
     }
 
@@ -458,7 +476,9 @@ export function SubResourcesSection({
   // 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
+  // Name, Tier, Owner, Approvers, then the two optional columns.
+  const columnCount =
+    4 + (showAccountColumn ? 1 : 0) + (showAdminColumn ? 1 : 0)
 
   if (subResources.length === 0) return null
 
@@ -563,7 +583,9 @@ export function SubResourcesSection({
               <TableHead className={fixedLayout ? 'w-[230px]' : undefined}>
                 Approvers
               </TableHead>
-              <TableHead className="w-[140px]">AWS Account</TableHead>
+              {showAccountColumn && (
+                <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. */}
@@ -576,7 +598,7 @@ export function SubResourcesSection({
             {filtered.length === 0 ? (
               <TableRow>
                 <TableCell
-                  colSpan={showAdminColumn ? 6 : 5}
+                  colSpan={columnCount}
                   className="text-center text-muted-foreground py-8"
                 >
                   No resources match your filters
@@ -596,6 +618,7 @@ export function SubResourcesSection({
                       resource={sr}
                       parentSlug={parentSlug}
                       adminParent={showAdminColumn ? parent : undefined}
+                      showAccount={showAccountColumn}
                       user={user}
                       isHighlighted={sr.slug === highlightSlug}
                       measureRef={measureElement}
@@ -617,6 +640,7 @@ export function SubResourcesSection({
                   // `showAdminColumn` already implies `parent !== undefined`,
                   // so this cannot disagree with the header or the colSpan.
                   adminParent={showAdminColumn ? parent : undefined}
+                  showAccount={showAccountColumn}
                   user={user}
                   isHighlighted={sr.slug === highlightSlug}
                 />

package/src/modules/dismiss/DismissStack.tsx

@@ -1,4 +1,4 @@
-import { createContext, use, useEffect, useMemo, useRef } from 'react'
+import { createContext, use, useEffect, useMemo, useRef, useState } from 'react'
 
 /**
  * One Escape key, one answer: dismiss the layer on top.
@@ -51,6 +51,27 @@ interface DismissEntry {
    * popover. Skipped when choosing the top rather than unregistering.
    */
   enabled: boolean
+  /**
+   * What had the caret before this layer opened — read on its first render,
+   * ahead of the layer's own mount focus — and the caret's place in it when
+   * it is a text field.
+   */
+  opener?: { element: Element | null; selection: [number, number] | null }
+}
+
+function readOpener(): DismissEntry['opener'] {
+  const element = document.activeElement
+  const field =
+    element instanceof HTMLInputElement ||
+    element instanceof HTMLTextAreaElement
+      ? element
+      : null
+  const start = field?.selectionStart
+  const end = field?.selectionEnd
+  return {
+    element,
+    selection: start != null && end != null ? [start, end] : null,
+  }
 }
 
 export interface DismissStackApi {
@@ -125,20 +146,38 @@ function createStack(): DismissStackApi {
     return () => {
       const i = entries.indexOf(entry)
       if (i !== -1) entries.splice(i, 1)
-      if (entries.length === 0) {
+      if (entries.length === 0)
         document.removeEventListener('keydown', onKeyDown)
-        return
-      }
       // When a layer closes, the caret it held goes with it and lands on
       // <body>, where the next Tab walks whatever is behind every overlay and
       // Escape still works only because this listener is on the document.
-      // Hand it to the layer that is now on top. Only from <body>: if
-      // something already restored focus — Radix returns it to the trigger —
-      // that choice is more specific than this one and stands.
+      // Hand it back to whatever opened the layer — the search field, caret
+      // where it was — unless a layer still covers that; then to the layer now
+      // on top. Only from <body>: if something already restored focus — Radix
+      // returns it to the trigger — that choice is more specific and stands.
       queueMicrotask(() => {
         if (document.activeElement && document.activeElement !== document.body)
           return
-        topElement()?.focus()
+        const onTop = topElement()
+        const opener = entry.opener?.element
+        if (
+          opener instanceof HTMLElement &&
+          opener !== document.body &&
+          opener.isConnected &&
+          (!onTop || onTop.contains(opener))
+        ) {
+          opener.focus()
+          const selection = entry.opener?.selection
+          if (
+            selection &&
+            (opener instanceof HTMLInputElement ||
+              opener instanceof HTMLTextAreaElement)
+          )
+            opener.setSelectionRange(...selection)
+          // A hidden, inert or disabled opener refuses focus; fall through.
+          if (document.activeElement === opener) return
+        }
+        onTop?.focus()
       })
     }
   }
@@ -205,11 +244,15 @@ export function useDismissable(
   // new object whenever the callback identity changed would churn the stack on
   // every render for no benefit.
   const entryRef = useRef<DismissEntry>({ layer, onDismiss, enabled })
+  // Read during the first render, not in an effect: by the time effects run,
+  // the layer has usually taken the caret for itself.
+  const [opener] = useState(readOpener)
   useEffect(() => {
     entryRef.current.layer = layer
     entryRef.current.onDismiss = onDismiss
     entryRef.current.enabled = enabled
-  }, [layer, onDismiss, enabled])
+    entryRef.current.opener = opener
+  }, [layer, onDismiss, enabled, opener])
 
   useEffect(() => stack.register(entryRef.current), [stack])
 }

package/src/modules/extensions/features/resourceDetail.ts

@@ -38,7 +38,9 @@ export interface ResourceDetailSlots {
    * family has children (hundreds, in a large catalog) — keep the cell cheap and
    * defer anything expensive until it is interacted with. And the column only
    * appears when a plugin actually fills it, so a build with no plugin renders
-   * the table exactly as before.
+   * the table exactly as before. A plugin that serves only some parents says so
+   * in `appliesTo` (see `ResourceDetailSlotScopes`), so every other parent's
+   * table gets no column rather than a column of empty cells.
    */
   resourceSubResourceRowActions: {
     /** The child this row is showing. */
@@ -49,6 +51,20 @@ export interface ResourceDetailSlots {
   }
 }
 
+/**
+ * What the core knows when it decides a slot's LAYOUT, before any row renders.
+ *
+ * The input to a plugin's `appliesTo` predicate for that slot. A contribution
+ * renders as a component, so the core cannot ask it whether it would render
+ * nothing; the plugin has to say up front which scopes it serves.
+ */
+export interface ResourceDetailSlotScopes {
+  resourceSubResourceRowActions: {
+    /** The entry whose sub-resources table is being laid out. */
+    parent: Resource
+  }
+}
+
 /**
  * Wrappers on the resource detail card.
  *

package/src/modules/extensions/index.ts

@@ -5,6 +5,7 @@ import type { ReactNode } from 'react'
 // resolves it if it has mapped it, which the example app has not.
 import { useOptionalUser } from '../auth/AuthContext'
 import type {
+  ResourceDetailSlotScopes,
   ResourceDetailSlots,
   ResourceDetailWrappers,
 } from './features/resourceDetail'
@@ -23,6 +24,7 @@ export {
   ResourceDetailProvider,
 } from './features/resourceDetail'
 export type {
+  ResourceDetailSlotScopes,
   ResourceDetailSlots,
   ResourceDetailWrappers,
 } from './features/resourceDetail'
@@ -38,6 +40,9 @@ export type SlotSpec = ResourceDetailSlots
 /** Every wrapper slot in the core. */
 export type WrapperSpec = ResourceDetailWrappers
 
+/** The layout scope of every slot whose layout depends on more than presence. */
+export type SlotScopeSpec = ResourceDetailSlotScopes
+
 // Guard: with a second feature this becomes
 // `AssertDisjoint<ResourceDetailSlots, ServiceDeskSlots>` and fails with the
 // duplicated id spelled out in the error. With one feature it is trivially true,
@@ -63,6 +68,16 @@ export type PluginWrappers = {
   ) => ReactNode
 }
 
+/**
+ * Which layout scopes a plugin's slot contribution serves. Absent = all of them.
+ *
+ * Only slots listed in `SlotScopeSpec` take a predicate: those are the slots
+ * whose layout the core decides before rendering any contribution.
+ */
+export type PluginAppliesTo = {
+  [N in keyof SlotScopeSpec]?: (scope: SlotScopeSpec[N]) => boolean
+}
+
 /**
  * One deployment-specific feature's contribution to the core's UI.
  *
@@ -79,6 +94,7 @@ export interface AcPlugin {
   name: string
   slots?: PluginSlots
   wrappers?: PluginWrappers
+  appliesTo?: PluginAppliesTo
 }
 
 /**
@@ -93,9 +109,28 @@ export interface AcPlugin {
  * Use it ONLY for layout. A slot must never be the only route to something the
  * core itself needs, so branching behaviour on a plugin's presence is a design
  * smell even where branching layout is not.
+ *
+ * A slot in `SlotScopeSpec` also takes the scope being laid out, and counts only
+ * plugins whose `appliesTo` accepts it. An `undefined` scope means there is
+ * nothing to decide against, so the slot reads as unfilled.
  */
-export function useSlotFilled(slot: keyof SlotSpec): boolean {
-  return useExtensions().some((plugin) => Boolean(plugin.slots?.[slot]))
+export function useSlotFilled<TSlot extends keyof SlotSpec>(
+  slot: TSlot,
+  ...scope: TSlot extends keyof SlotScopeSpec
+    ? [scope: SlotScopeSpec[TSlot] | undefined]
+    : []
+): boolean {
+  const plugins = useExtensions()
+  const scoped = scope.length > 0
+  const value = scope[0]
+  if (scoped && value === undefined) return false
+  return plugins.some((plugin) => {
+    if (!plugin.slots?.[slot]) return false
+    const applies = plugin.appliesTo?.[slot] as
+      | ((s: typeof value) => boolean)
+      | undefined
+    return !scoped || !applies || applies(value)
+  })
 }
 
 /**

package/src/modules/extensions/types.ts

@@ -34,6 +34,7 @@ export interface PluginRegistration {
   name: string
   slots?: Record<string, OpaqueRenderer | undefined>
   wrappers?: Record<string, OpaqueRenderer | undefined>
+  appliesTo?: Record<string, ((scope: never) => boolean) | undefined>
 }
 
 /**