@pega/sdk 0.0.3 → 0.0.5

package/templates/react-sdk-reference/.ai-common/skills/widget-skills/FileUtility.md

@@ -0,0 +1,273 @@
+# Skill: FileUtility
+
+File and URL management utility widget. Displays case attachments and links, supports upload/download/delete, and provides modals for adding new files or URLs. Also covers `ActionButtonsForFileUtil` sub-component.
+
+> **Prerequisite skill:** [`widget-components.md`](../widget-components.md) — covers architecture, props interface, data-fetching patterns, and registration conventions common to ALL widget components.
+
+---
+
+## Component Purpose
+
+The primary attachments management panel in the case utilities column. Shows up to 3 attachments/links in the main view with a "View all" option that opens a modal with the full list. Users can upload files, attach URLs, download, and delete items. Attachment state is kept fresh via debounced pub-sub subscriptions.
+
+## Pega Metadata
+
+- **Registration key:** `FileUtility` (in `component-map.ts`)
+- **Category:** Widget — file management
+- **Extends:** `PConnProps`
+
+## Props
+
+| Prop          | Type       | Required | Description                                                                       |
+| ------------- | ---------- | -------- | --------------------------------------------------------------------------------- |
+| `caseId`      | `string`   | No       | Optional case ID override. If absent, resolved from `pConn.getCaseInfo().getID()` |
+| `getPConnect` | `function` | Yes      | PConnect getter                                                                   |
+
+## Component Skeleton
+
+This is the largest widget (~500 lines). Key structural outline:
+
+```typescript
+import { useEffect, useState } from 'react';
+import { debounce } from '@mui/material';
+import download from 'downloadjs';
+import { Utils } from '../../../helpers/utils';
+import { validateMaxSize } from '../../../helpers/attachmentShared';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+import './FileUtility.css';
+
+export default function FileUtility(props: FileUtilityProps) {
+  const SummaryList = getComponentFromRegistry('SummaryList');
+  const ActionButtonsForFileUtil = getComponentFromRegistry('ActionButtonsForFileUtil');
+  const { getPConnect, caseId } = props;
+  const thePConn = getPConnect();
+  const caseID = caseId ?? thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, '');
+
+  // 1. State: list (top 3), fileData (add-file modal), linkData (add-link modal), link fields
+  const [list, setList] = useState({ data: [], count: 0 });
+  const [fileData, setFileData] = useState({ showfileModal: false, fileList: [], attachedFiles: [], ... });
+  const [linkData, setLinkData] = useState({ showLinkModal: false, linksList: [], attachedLinks: [], ... });
+  const [link, setLink] = useState({ title: '', url: '', disable: true });
+
+  // 2. getAttachments — fetches case attachments, builds SummaryItem-compatible objects
+  // 3. debouncedGetAttachments — debounce(getAttachments, 1000)
+  // 4. useEffect: subscribe to messaging service for ATTACHMENTS changes
+  // 5. downloadAttachedFile / deleteAttachedFile handlers
+  // 6. onAttachFiles — upload + linkAttachmentsToCase
+  // 7. onAttachLinks — linkAttachmentsToCase with URL category
+
+  // 8. Render: Card with header + SummaryList(top 3) + View All button
+  //    + Add File modal (input + SummaryList + ActionButtons)
+  //    + Add Link modal (title + url fields + ActionButtons)
+  //    + View All modal (full SummaryList)
+  return <Card>...</Card>;
+}
+```
+
+> **Key patterns:** Debounced refresh (1000ms) on messaging subscription, `linkAttachmentsToCase` after upload, `ActionButtonsForFileUtil` for modal button rows, `SummaryList` for item display.
+
+## Behavioral Contract
+
+### Attachment Fetch
+
+On mount and on attachment change events:
+
+```typescript
+const caseID = caseId ?? thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, '');
+// Do NOT use pConn.getCaseInfo().getID() — it may return the wrong format
+PCore.getAttachmentUtils().getCaseAttachments(caseID, context);
+```
+
+Returns array of attachment/link objects. Store in `attachments` state. Guard: only fetch if `caseID` is non-empty.
+
+### Pub/Sub Subscription
+
+Subscribe to the case attachments event for auto-refresh:
+
+```typescript
+const eventName = (PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW;
+PCore.getPubSubUtils().subscribe(eventName, refresh, 'FileUtility');
+// Cleanup: PCore.getPubSubUtils().unsubscribe(eventName, 'FileUtility');
+```
+
+This ensures attachments refresh when CaseView publishes the update event.
+
+### Menu Actions
+
+"Add files" and "Add links" should be in a **dropdown menu** (overflow/three-dot icon or text dropdown), NOT as plain buttons. The reference uses a `<Menu>` + `<MenuItem>` pattern.
+
+### Main View — Top 3 Display
+
+Show only the first 3 items from `attachments`. If `attachments.length > 3`, show a `"View all (N)"` button that opens the full-list modal.
+
+### SummaryList Integration
+
+Map each attachment/link to a `SummaryItem`-compatible object:
+
+```typescript
+{
+  id: attachment.ID,
+  visual: { icon: getFileIcon(attachment.mimeType) },
+  primary: {
+    type: attachment.category === 'FILE' ? 'FILE' : 'URL',
+    name: attachment.name,
+    click: () => handleDownloadOrOpen(attachment)
+  },
+  secondary: { text: attachment.createdBy + ' · ' + formatDate(attachment.createTime) }
+  actions: [
+    { id: 'delete', text: 'Delete', icon: 'trash', onClick: () => handleDelete(attachment.ID) }
+  ]
+}
+```
+
+Pass to `<SummaryList arItems$={summaryItems} />`.
+
+### File Upload
+
+1. User clicks "Add files" from the overflow menu (three-dot icon).
+2. Opens an add-file modal (DS Modal/Dialog component with `primaryButtonText="Attach"` and `secondaryButtonText="Cancel"`).
+3. User selects a file via the DS file uploader button — do NOT use a plain `<input type='file'>`. Use the DS's styled file upload component (e.g., Carbon `FileUploaderButton`, Ant Design `Upload`, Chakra `Input type="file"` with custom styling). Show the selected file name below the button.
+4. "Attach" button is disabled until a file is selected.
+5. On confirm: call `PCore.getAttachmentUtils().uploadAttachment(file, onProgress, onError, context)`.
+6. On success: call `PCore.getAttachmentUtils().linkAttachmentsToCase(caseKey, [newAttachment], 'FILE', context)`.
+7. Close modal, clear file state, refresh attachment list.
+
+> ⚠️ Do NOT use a bare `<input type="file">` — it renders as an unstyled browser-native button. Always use the design system's file uploader component for visual consistency.
+
+### URL Attachment
+
+1. User clicks "Add links" from the overflow menu.
+2. Opens add-link modal with two DS text input fields: `Title` (required) and `URL` (required).
+3. "Attach" button is disabled until both `title` and `url` are non-empty.
+4. On confirm: call `PCore.getAttachmentUtils().linkAttachmentsToCase(caseKey, [{ name: title, url, category: 'URL' }], 'URL', context)`.
+5. Close modal, clear fields, refresh attachment list.
+
+### Menu Actions
+
+"Add files" and "Add links" MUST be in a **dropdown/overflow menu** (three-dot icon), NOT as plain text buttons. Use the DS's overflow menu or dropdown component.
+
+### Download / Open
+
+- **FILE type:** Call `PCore.getAttachmentUtils().downloadAttachment(attachmentID, context)` then trigger browser download via `downloadjs`.
+- **URL type:** Open `attachment.url` in a new browser tab (`window.open(url, '_blank')`).
+
+### Delete
+
+Call `PCore.getAttachmentUtils().deleteAttachment(attachmentID, context)`. Refresh attachment list after success.
+
+### Actions Menu
+
+Render a `<MoreVertIcon>` `<IconButton>` that opens a `<Menu>` with:
+
+- `"Add file"` — opens add-file modal
+- `"Add link"` — opens add-link modal
+
+## Visual Specifications
+
+### Main Card
+
+| Element           | Description                                  |
+| ----------------- | -------------------------------------------- |
+| Card header       | `"Attachments"` (or localized) + count badge |
+| Actions icon      | `<MoreVertIcon>` button top-right            |
+| Attachment rows   | Up to 3 `SummaryItem` cards                  |
+| "View all" button | Text button, shown when > 3 attachments      |
+
+### "View all" Modal
+
+| Element         | Description                |
+| --------------- | -------------------------- |
+| Modal header    | `"All attachments (N)"`    |
+| Attachment rows | All items in `SummaryList` |
+| Close button    | `X` in modal header        |
+
+### Add File Modal
+
+| Element        | Description                                  |
+| -------------- | -------------------------------------------- |
+| File picker    | `<input type='file'>`                        |
+| Progress bar   | Per-file upload progress                     |
+| Action buttons | `ActionButtonsForFileUtil` (Cancel + Attach) |
+
+### Add Link Modal
+
+| Element        | Description                                  |
+| -------------- | -------------------------------------------- |
+| Title field    | `<TextField label='Title'>` — required       |
+| URL field      | `<TextField label='URL'>` — required         |
+| Attach button  | Enabled only when both fields are filled     |
+| Action buttons | `ActionButtonsForFileUtil` (Cancel + Attach) |
+
+**CSS-only implementation notes:**
+
+- Main card: standard card styles.
+- Modal: `position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,0.2); min-width: 480px; padding: 1.5rem`.
+- "View all" button: text style, `color: var(--app-primary-color); cursor: pointer`.
+- Progress bar: `height: 4px; background: var(--app-primary-color); transition: width 0.3s`.
+
+## Sub-Component: ActionButtonsForFileUtil
+
+**Registration key:** `ActionButtonsForFileUtil`
+
+A simple button row component used inside the FileUtility modals to render Cancel + primary action buttons.
+
+### Props
+
+| Prop                 | Type       | Required | Description                                                  |
+| -------------------- | ---------- | -------- | ------------------------------------------------------------ |
+| `arMainButtons`      | `any[]`    | Yes      | Primary button definitions `[{ actionID, name }]`            |
+| `arSecondaryButtons` | `any[]`    | Yes      | Secondary (cancel) button definitions `[{ actionID, name }]` |
+| `primaryAction`      | `function` | Yes      | Callback invoked when the primary button is clicked          |
+| `secondaryAction`    | `function` | Yes      | Callback invoked when the secondary/cancel button is clicked |
+| `getPConnect`        | `function` | Yes      | PConnect getter                                              |
+
+### Layout
+
+```
+[Secondary buttons (left)]   [Primary buttons (right)]
+      Cancel                        Attach
+```
+
+- Secondary buttons: outlined/text style.
+- Primary buttons: contained/filled style with theme primary color.
+- Render using `arSecondaryButtons.map(...)` and `arMainButtons.map(...)`.
+
+## Edge Cases & Special Logic
+
+- **Debounce (1000ms):** Prevents excessive re-fetches when multiple attachment events fire in quick succession.
+- **Add link "Attach" button disabled state:** Title and URL validation must happen on every keystroke — use controlled inputs with `!title || !url` to derive disabled state.
+- **`linkAttachmentsToCase`:** After upload, the file must be explicitly linked to the case. Uploading alone does not associate the file with the case.
+- **Pub-sub cleanup:** Unsubscribe from `CASE_ATTACHMENTS_UPDATED` on unmount to prevent stale callbacks.
+- **Error display:** Use `PCore.getMessageManager()` or inline error state in the modal — do not silently fail on upload/link errors.
+
+## Dependencies
+
+- `PCore.getAttachmentUtils()` — getCaseAttachments, uploadAttachment, downloadAttachment, deleteAttachment, linkAttachmentsToCase
+- `PCore.getMessagingServiceManager()` — subscribe to attachment change events
+- `PCore.getConstants()` — case info ID, summary refresh timing
+- `getComponentFromRegistry('SummaryList')` — renders the attachment item list
+- `getComponentFromRegistry('ActionButtonsForFileUtil')` — renders modal action buttons
+- `downloadjs` — browser file download trigger
+- MUI: `<Card>`, `<CardHeader>`, `<CardContent>`, `<IconButton>`, `<Menu>`, `<MenuItem>`, `<Button>`, `<TextField>`, `<Dialog>`, `<CircularProgress>`
+- MUI Icons: `<MoreVertIcon>`
+
+## Design System Mapping
+
+**UI control type:** File management widget — attachment list with upload/download/delete and add modals.
+
+Listed design systems are examples only.
+
+| Design System      | Card         | Action Menu                          | Modal      | Progress                                   |
+| ------------------ | ------------ | ------------------------------------ | ---------- | ------------------------------------------ |
+| Default (CSS only) | `<div>` card | `<button>` + custom dropdown         | `<dialog>` | CSS progress bar                           |
+| MUI                | `<Card>`     | `<IconButton>` + `<Menu>/<MenuItem>` | `<Dialog>` | `<CircularProgress>` or `<LinearProgress>` |
+| Ant Design         | `<Card>`     | `<Dropdown menu={{ items }}>`        | `<Modal>`  | `<Progress>`                               |
+| Chakra UI          | `<Card>`     | `<Menu>/<MenuButton>/<MenuList>`     | `<Modal>`  | `<Progress>`                               |
+| Shadcn/ui          | `<Card>`     | `<DropdownMenu>`                     | `<Dialog>` | Custom progress bar                        |
+
+When implementing in a specific design system:
+
+- Debounced refresh (1000ms) after pub-sub attachment events is required — prevents excessive API calls
+- `linkAttachmentsToCase` must be called after upload — uploading alone does not attach to the case
+- `ActionButtonsForFileUtil` receives button definition arrays — render them generically from `arMainButtons`/`arSecondaryButtons`

package/templates/react-sdk-reference/{.cursor/rules/skills/widget-skills/Followers.mdrules → .ai-common/skills/widget-skills/Followers.md}

@@ -1,8 +1,3 @@
----
-description: Widget component skill: Followers
-alwaysApply: false
----
-
 # Skill: Followers
 
 Followers widget. Displays the list of users following the current case. Currently a stub/placeholder in the reference implementation — renders an "unsupported" message.
@@ -23,11 +18,32 @@ Intended to display the list of operators following a case, allowing users to fo
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop          | Type       | Required | Description     |
+| ------------- | ---------- | -------- | --------------- |
+| `getPConnect` | `function` | Yes      | PConnect getter |
+
+## Component Skeleton
+
+Stub implementation:
+
+```typescript
+import type { PropsWithChildren } from 'react';
+import type { PConnProps } from '@pega/sdk-react';
+
+export default function Followers(props: PropsWithChildren<PConnProps>) {
+  return (
+    <Card>
+      <CardHeader><h6>Followers - <em>unsupported</em></h6></CardHeader>
+      <CardContent>Followers content</CardContent>
+    </Card>
+  );
+}
+```
+
+> A production implementation would fetch from `D_pyCaseFollowers` and provide follow/unfollow actions.
 
 No additional custom props in the current stub implementation. A full implementation would likely include:
+
 - `datasource` — data page name for follower list
 - `headerText` — widget title (e.g., `"Followers"`)
 
@@ -52,24 +68,26 @@ No additional custom props in the current stub implementation. A full implementa
 
 ### Stub Rendering
 
-| Element | Value |
-|---------|-------|
-| Card title | `"Followers"` |
-| Card body | `"Followers - unsupported"` plain text |
+| Element    | Value                                  |
+| ---------- | -------------------------------------- |
+| Card title | `"Followers"`                          |
+| Card body  | `"Followers - unsupported"` plain text |
 
 ### Expected Full Rendering
 
-| Element | Description |
-|---------|-------------|
-| Card header | `"Followers"` + count badge |
-| Follower avatars | Row of avatar initials circles |
-| Follow button | Toggle button `"Follow"` / `"Unfollow"` |
+| Element          | Description                             |
+| ---------------- | --------------------------------------- |
+| Card header      | `"Followers"` + count badge             |
+| Follower avatars | Row of avatar initials circles          |
+| Follow button    | Toggle button `"Follow"` / `"Unfollow"` |
 
 **CSS-only implementation notes (stub):**
+
 - Card: standard card layout — `border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.12); padding: 1rem`.
 - Unsupported message: `color: var(--secondary-text-color); font-size: 0.875rem`.
 
 **CSS-only implementation notes (full):**
+
 - Avatar row: `display: flex; flex-wrap: wrap; gap: 4px`.
 - Avatar circle: `width: 32px; height: 32px; border-radius: 50%; background: var(--avatar-bg); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600`.
 
@@ -90,15 +108,16 @@ No additional custom props in the current stub implementation. A full implementa
 
 Listed design systems are examples only.
 
-| Design System | Card | Avatar | Toggle Button |
-|---|---|---|---|
-| Default (CSS only) | `<div>` with border | CSS circle with initials | `<button>` |
-| MUI | `<Card>` + `<Avatar>` | `<Avatar>` | `<Button>` variant toggle |
-| Ant Design | `<Card>` | `<Avatar>` | `<Button>` |
-| Chakra UI | `<Card>` | `<Avatar>` | `<Button>` |
-| Shadcn/ui | `<Card>` | Custom avatar | `<Button>` |
+| Design System      | Card                  | Avatar                   | Toggle Button             |
+| ------------------ | --------------------- | ------------------------ | ------------------------- |
+| Default (CSS only) | `<div>` with border   | CSS circle with initials | `<button>`                |
+| MUI                | `<Card>` + `<Avatar>` | `<Avatar>`               | `<Button>` variant toggle |
+| Ant Design         | `<Card>`              | `<Avatar>`               | `<Button>`                |
+| Chakra UI          | `<Card>`              | `<Avatar>`               | `<Button>`                |
+| Shadcn/ui          | `<Card>`              | Custom avatar            | `<Button>`                |
 
 When implementing in a specific design system:
+
 - The current stub only needs a card with a message — implement the full behavior once the Pega backend supports it
 - Follow/unfollow must be scoped to the current case (`caseKey` from `pConn.getCaseInfo().getKey()`)
 - Follower count badge in the card header improves scannability

package/templates/react-sdk-reference/{.cursor/rules/skills/widget-skills/QuickCreate.mdrules → .ai-common/skills/widget-skills/QuickCreate.md}

@@ -1,8 +1,3 @@
----
-description: Widget component skill: QuickCreate
-alwaysApply: false
----
-
 # Skill: QuickCreate
 
 Quick case creation widget. Renders a set of buttons — one per available case type — allowing users to create cases directly from the widget without navigating to a separate form.
@@ -23,12 +18,60 @@ Provides a shortcut panel for creating new cases. Case types are sourced from th
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `heading` | `string` | Yes | Widget title (e.g., `"Create"`) |
-| `showCaseIcons` | `boolean` | No | Whether to show case type icons alongside labels. Default `false` |
-| `classFilter` | `any[]` | No | Array of class names to filter available case types. Empty array = show all |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop            | Type       | Required | Description                                                                 |
+| --------------- | ---------- | -------- | --------------------------------------------------------------------------- |
+| `heading`       | `string`   | Yes      | Widget title (e.g., `"Create"`)                                             |
+| `showCaseIcons` | `boolean`  | No       | Whether to show case type icons alongside labels. Default `false`           |
+| `classFilter`   | `any[]`    | No       | Array of class names to filter available case types. Empty array = show all |
+| `getPConnect`   | `function` | Yes      | PConnect getter                                                             |
+
+## Component Skeleton
+
+```typescript
+import { useEffect, useState } from 'react';
+import { Utils } from '../../helpers/utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface QuickCreateProps extends PConnProps {
+  heading: string;
+  showCaseIcons: boolean;
+  classFilter: any[];
+}
+
+export default function QuickCreate(props: QuickCreateProps) {
+  const WssQuickCreate = getComponentFromRegistry('WssQuickCreate');
+  const { getPConnect, heading, showCaseIcons, classFilter } = props;
+  const pConn = getPConnect();
+  const [quickCreateCases, setCases] = useState([]);
+
+  useEffect(() => {
+    // 1. Read case types from envInfo or fallback to portal config
+    const envInfo = PCore.getEnvironmentInfo();
+    let defaultCases = [];
+    if (envInfo?.environmentInfoObject?.pyCaseTypeList) {
+      defaultCases = envInfo.environmentInfoObject.pyCaseTypeList.map(ct => ({
+        classname: ct.pyWorkTypeImplementationClassName,
+        label: ct.pyWorkTypeName,
+        onClick: () => pConn.getActionsApi().createWork(ct.pyWorkTypeImplementationClassName, {}),
+        ...(showCaseIcons && { icon: Utils.getImageSrc(ct.pxIcon, Utils.getSDKStaticConentUrl()) }),
+      }));
+    } else {
+      // Launchpad fallback: read from store/portal config
+    }
+
+    // 2. Apply classFilter (empty = show all)
+    if (classFilter?.length > 0) {
+      setCases(defaultCases.filter(c => classFilter.includes(c.classname)));
+    } else {
+      setCases(defaultCases);
+    }
+  }, []);
+
+  // 3. Delegate rendering to WssQuickCreate DSE
+  return <WssQuickCreate heading={heading} actions={quickCreateCases} />;
+}
+```
 
 ## Behavioral Contract
 
@@ -44,6 +87,7 @@ Provides a shortcut panel for creating new cases. Case types are sourced from th
 ### Case Type Object Mapping
 
 For each case type, build:
+
 ```typescript
 {
   classname: caseType.pyClassName,
@@ -59,6 +103,7 @@ For each case type, build:
 ### Rendering Delegation
 
 Pass the mapped case type array to `WssQuickCreate` (retrieved via `getComponentFromRegistry('WssQuickCreate')`):
+
 ```tsx
 const WssQuickCreate = getComponentFromRegistry('WssQuickCreate');
 return <WssQuickCreate heading={heading} caseTypes={caseTypeObjects} />;
@@ -70,12 +115,13 @@ This component handles all button rendering — `QuickCreate` is purely a data-p
 
 Visual rendering is owned by `WssQuickCreate` (a design system extension component). Typical layout:
 
-| Element | Description |
-|---------|-------------|
-| Heading | Widget title at the top |
+| Element           | Description                                       |
+| ----------------- | ------------------------------------------------- |
+| Heading           | Widget title at the top                           |
 | Case type buttons | One button per case type; icon (optional) + label |
 
 **CSS-only implementation notes (if implementing without `WssQuickCreate`):**
+
 - Container: `display: flex; flex-direction: column; gap: 0.5rem`.
 - Heading: `font-weight: 600; margin-bottom: 0.5rem`.
 - Case type button: `display: flex; align-items: center; gap: 0.5rem; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer; background: white`.
@@ -105,15 +151,16 @@ Rendering is delegated to `WssQuickCreate` — implement that DSE component for
 
 If implementing without `WssQuickCreate`:
 
-| Design System | Button List |
-|---|---|
-| Default (CSS only) | `<button>` list with optional `<img>` icon |
-| MUI | `<List>` + `<ListItemButton>` or `<Button>` stack |
-| Ant Design | `<Space direction='vertical'>` + `<Button>` per case type |
-| Chakra UI | `<VStack>` + `<Button>` per case type |
-| Shadcn/ui | `<div>` stack + `<Button variant='outline'>` |
+| Design System      | Button List                                               |
+| ------------------ | --------------------------------------------------------- |
+| Default (CSS only) | `<button>` list with optional `<img>` icon                |
+| MUI                | `<List>` + `<ListItemButton>` or `<Button>` stack         |
+| Ant Design         | `<Space direction='vertical'>` + `<Button>` per case type |
+| Chakra UI          | `<VStack>` + `<Button>` per case type                     |
+| Shadcn/ui          | `<div>` stack + `<Button variant='outline'>`              |
 
 When implementing in a specific design system:
+
 - `classFilter` empty array = show ALL case types (not zero) — this is a common gotcha
 - `createWork` must be called with the correct `containerName` constant (`APP.APP`)
 - `showCaseIcons` is optional — only fetch/render icons when this prop is `true`