feat(samples/action-center-app): act on review feedback

- Folder + Assignee filters in toolbar (header chip removed)
- Folder picker via /odata/Folders raw fetch (new useFolders hook)
- Create Task: folder dropdown instead of numeric ID
- My Tasks: row click → Complete dialog + info icon → detail sheet
- Manage Tasks: multi-select + bulk Assign / Reassign / Unassign,
  gated by selection state + completion
- Assignee filter derived from loaded tasks (no folder needed)
- 'Group' label for tasks assigned to a directory group
- TaskDetail Sheet mirrors Action Center's Task Summary
- Surface server messages on Create/Complete/Assign/Unassign errors;
  bulk batch errors use compact 'first + N more' format
- Various UI polish (info icon placement, fixed-width pickers,
  truncation, header column dividers)

Author: amrit-agarwal-1

samples/action-center-app/README.md

@@ -23,10 +23,10 @@ Every method on [`TaskServiceModel`](https://uipath.github.io/uipath-typescript/
 | `task.complete(options)` | `components/TaskDetail.tsx` (+ `taskUtils.ts` builds the discriminated-union options) |
 
 By default the app lists tasks across **all folders** you can view/edit. The
-header's **Folder ID** field is an optional filter — leave it blank for all
-folders, or set it to scope the list (persisted to `localStorage`). Per-task
-actions (detail, assign, complete) use each task's own folder, propagated from
-the row; creating a task asks for a target folder.
+toolbar's **Folder** dropdown (populated from `/odata/Folders`) lets you scope
+the list to one folder; the choice is persisted to `localStorage`. Per-task
+actions (assign, complete) use each task's own folder, propagated from the
+row; creating a task picks the target folder from the same dropdown.
 
 ## Files
 
@@ -42,9 +42,12 @@ src/
 ## Prerequisites
 
 - Node.js 20+
-- A UiPath OAuth External Application (client ID) with the **`OR.Tasks`** scope
-- An Orchestrator folder ID that contains Action Center tasks (required only
-  when creating tasks)
+- A UiPath OAuth External Application (client ID) with **`OR.Tasks`** and
+  **`OR.Folders.Read`** scopes (the latter powers the folder dropdown — the
+  SDK doesn't expose a Folders service yet, so the app calls
+  `/odata/Folders` directly with the SDK's access token)
+- An Orchestrator folder that contains Action Center tasks (only needed for
+  testing — leaving the filter on "All folders" still works)
 
 ## Setup
 
@@ -71,13 +74,18 @@ uip codedapp deploy -n action-center-app --folder-key <FOLDER_KEY>
 
 ## Notes
 
-- **My Tasks / Manage Tasks tabs:** these map to `getAll`'s `asTaskAdmin` flag,
-  mirroring Action Center. "Manage Tasks" (`asTaskAdmin: true`) lists tasks
-  across folders where you can assign them — the context where assigning to a
-  **group** applies. (The SDK doesn't expose a strict "assigned only to me"
-  view or a task `delete`, so those parts of the product aren't replicated.)
+- **My Tasks vs Manage Tasks:** these map to `getAll`'s `asTaskAdmin` flag.
+  - **My Tasks** — clicking a row opens a quick-complete dialog (Approve /
+    Reject / custom action). An info icon in that dialog opens the full
+    detail sheet on demand. The streamlined flow is the daily worker view.
+  - **Manage Tasks** (`asTaskAdmin: true`) — clicking rows selects them
+    (multi-select), and bulk **Assign** / **Unassign** appear in the
+    toolbar. Surfaces `Tasks.assign(payload[])` and `Tasks.unassign(ids)`
+    in their array forms. When status is filtered to *Pending*, an
+    additional **Assigned to** filter (powered by `Tasks.getUsers`) lets
+    an admin see who's overloaded.
 - **Pagination:** the list uses server-side page navigation (`jumpToPage` +
   `totalCount`); the user picker loops the cursor. No list call assumes one
   response holds every row.
-- **Creation** through the API only supports **external** tasks — form and app
-  tasks are created by the system through workflows.
+- **Creation** through the API only supports **external** tasks — form and
+  app tasks are created by the system through workflows.

samples/action-center-app/src/App.tsx

@@ -1,6 +1,4 @@
-import { useEffect, useState } from 'react'
-import { Folder, ListChecks, LogOut, ShieldCheck, X } from 'lucide-react'
-import type { UiPathSDKConfig } from '@uipath/uipath-typescript/core'
+import { ListChecks, LogOut, ShieldCheck } from 'lucide-react'
 import { Alert, AlertDescription } from '@uipath/apollo-wind/components/ui/alert'
 import { Button } from '@uipath/apollo-wind/components/ui/button'
 import {
@@ -10,41 +8,15 @@ import {
   CardHeader,
   CardTitle,
 } from '@uipath/apollo-wind/components/ui/card'
-import { Input } from '@uipath/apollo-wind/components/ui/input'
 import { Spinner } from '@uipath/apollo-wind/components/ui/spinner'
 import { Toaster } from '@uipath/apollo-wind/components/ui/sonner'
-import { AuthProvider, useAuth } from './hooks/useAuth'
+import { AuthProvider, useAuth } from './context/AuthContext'
 import { TaskList } from './components/TaskList'
 import { ThemeToggle } from './components/Theme'
 
-// Coded App pattern: the SDK fills config from `<meta name="uipath:*">` tags
-// (injected locally by coded-apps-dev or by the platform), so we pass {}.
-const authConfig = {} as UiPathSDKConfig
-
-const FOLDER_STORAGE_KEY = 'action-center-app.folderId'
-
 function AppContent() {
   const { isAuthenticated, isLoading, login, logout, error } = useAuth()
 
-  // Persist the folder filter across refresh/OAuth; blank = all folders.
-  const [folderId, setFolderId] = useState<number | null>(() => {
-    const stored = localStorage.getItem(FOLDER_STORAGE_KEY)
-    const parsed = stored ? Number(stored) : NaN
-    return Number.isFinite(parsed) ? parsed : null
-  })
-  const [draft, setDraft] = useState(folderId?.toString() ?? '')
-
-  useEffect(() => {
-    if (folderId == null) localStorage.removeItem(FOLDER_STORAGE_KEY)
-    else localStorage.setItem(FOLDER_STORAGE_KEY, String(folderId))
-  }, [folderId])
-
-  const commitFolder = () => {
-    const trimmed = draft.trim()
-    const parsed = trimmed === '' ? null : Number(trimmed)
-    setFolderId(parsed != null && Number.isFinite(parsed) ? parsed : null)
-  }
-
   if (isLoading) {
     return (
       <div className="flex h-screen items-center justify-center">
@@ -89,50 +61,6 @@ function AppContent() {
           <h1 className="truncate text-base font-semibold">Action Center Manager</h1>
         </div>
         <div className="flex items-center gap-2">
-          <div className="relative">
-            <Folder
-              className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
-              aria-hidden
-            />
-            <Input
-              id="folder-id"
-              // type=text + inputMode=numeric: numeric keypad on mobile, no
-              // desktop spinner arrows (incrementing an ID isn't meaningful).
-              type="text"
-              inputMode="numeric"
-              pattern="[0-9]*"
-              autoComplete="off"
-              value={draft}
-              onChange={(e) => setDraft(e.target.value.replace(/[^0-9]/g, ''))}
-              onBlur={commitFolder}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') commitFolder()
-                if (e.key === 'Escape' && draft) {
-                  setDraft('')
-                  setFolderId(null)
-                }
-              }}
-              placeholder="All folders"
-              aria-label="Folder ID"
-              title="Optional — leave blank to list tasks across all your folders"
-              className="w-44 pl-8 pr-8"
-            />
-            {draft && (
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => {
-                  setDraft('')
-                  setFolderId(null)
-                }}
-                aria-label="Clear folder filter"
-                title="Clear folder filter"
-                className="absolute right-1 top-1/2 h-6 w-6 -translate-y-1/2"
-              >
-                <X className="h-3.5 w-3.5" />
-              </Button>
-            )}
-          </div>
           <ThemeToggle />
           <Button variant="ghost" size="sm" onClick={logout}>
             <LogOut className="h-4 w-4" />
@@ -142,7 +70,7 @@ function AppContent() {
       </header>
 
       <main className="min-h-0 flex-1">
-        <TaskList folderId={folderId} />
+        <TaskList />
       </main>
       <Toaster />
     </div>
@@ -151,7 +79,7 @@ function AppContent() {
 
 export default function App() {
   return (
-    <AuthProvider config={authConfig}>
+    <AuthProvider>
       <AppContent />
     </AuthProvider>
   )

samples/action-center-app/src/components/TaskDetail.tsx

@@ -30,7 +30,7 @@ import {
   SelectValue,
 } from '@uipath/apollo-wind/components/ui/select'
 import { Spinner } from '@uipath/apollo-wind/components/ui/spinner'
-import { useTask, useTaskUsers } from '../hooks/useTasks'
+import { useFolders, useTask, useTaskUsers } from '../hooks/useTasks'
 import {
   statusBadge,
   priorityBadge,
@@ -55,10 +55,15 @@ type Sub = 'assign' | 'reassign' | 'complete' | null
 /** Task detail panel (Tasks.getById) with lifecycle actions via task-attached methods. */
 export function TaskDetail({ taskId, folderId, isManage, onClose, onChanged }: Props) {
   const { task, loading, error, reload } = useTask(taskId, folderId)
+  const { folders } = useFolders()
   const [sub, setSub] = useState<Sub>(null)
   const [busy, setBusy] = useState(false)
   const [actionError, setActionError] = useState<string | null>(null)
 
+  // Resolve folder display name; fall back to id.
+  const folderPath =
+    folders.find((f) => f.id === folderId)?.fullyQualifiedName ?? String(folderId)
+
   const afterChange = () => {
     reload()
     onChanged()
@@ -73,7 +78,7 @@ export function TaskDetail({ taskId, folderId, isManage, onClose, onChanged }: P
       if (result.success) afterChange()
       else setActionError('Unassign did not complete successfully')
     } catch (err) {
-      setActionError(err instanceof UiPathError ? err.message : 'Unassign failed')
+      setActionError(extractServerMessage(err) ?? 'Unassign failed')
     } finally {
       setBusy(false)
     }
@@ -119,28 +124,50 @@ export function TaskDetail({ taskId, folderId, isManage, onClose, onChanged }: P
                 )}
               </div>
 
-              <dl className="grid grid-cols-[7rem_1fr] gap-x-4 gap-y-1.5">
-                <Field
-                  label="Assignee"
-                  value={task.assignedToUser?.displayName ?? 'Unassigned'}
-                />
+              {/* Task Summary — mirrors Action Center's right pane. */}
+              <dl className="grid grid-cols-[7.5rem_1fr] gap-x-4 gap-y-1.5">
+                <Field label="Task ID" value={`#${task.id}`} mono />
                 {task.taskSource?.sourceName && (
                   <Field label="Source" value={task.taskSource.sourceName} />
                 )}
-                <Field label="Created" value={formatDateTime(task.createdTime)} />
+                <Field label="Folder path" value={folderPath} />
+                <Field label="Created on" value={formatDateTime(task.createdTime)} />
                 {task.completedTime && (
                   <Field label="Completed" value={formatDateTime(task.completedTime)} />
                 )}
                 {task.completedByUser?.displayName && (
                   <Field label="Completed by" value={task.completedByUser.displayName} />
                 )}
+                {task.taskAssignmentCriteria && (
+                  <Field label="Assignment criteria" value={task.taskAssignmentCriteria} />
+                )}
+                <Field
+                  label="Assigned to"
+                  value={
+                    task.assignedToUser?.displayName ??
+                    (assignedToGroupKey(task) ? 'Directory group' : 'Unassigned')
+                  }
+                />
                 {(task.actionLabel || task.action) && (
                   <Field label="Action" value={task.actionLabel ?? task.action ?? ''} />
                 )}
                 {task.externalTag && <Field label="External tag" value={task.externalTag} mono />}
                 <Field label="Key" value={task.key} mono />
               </dl>
 
+              {task.tags && task.tags.length > 0 && (
+                <Section title="Labels">
+                  <div className="flex flex-wrap gap-1.5">
+                    {task.tags.map((t) => (
+                      <Badge key={t.name} variant="secondary">
+                        {t.displayName || t.name}
+                        {t.displayValue ? `: ${t.displayValue}` : ''}
+                      </Badge>
+                    ))}
+                  </div>
+                </Section>
+              )}
+
               {task.data && Object.keys(task.data).length > 0 && (
                 <Section title="Data">
                   <dl className="grid grid-cols-[10rem_1fr] gap-x-4 gap-y-1 rounded-lg border bg-muted/40 p-3">
@@ -156,24 +183,6 @@ export function TaskDetail({ taskId, folderId, isManage, onClose, onChanged }: P
                 </Section>
               )}
 
-              {task.activities && task.activities.length > 0 && (
-                <Section title="Activity">
-                  <ul className="space-y-1.5">
-                    {task.activities.map((a, i) => (
-                      <li
-                        key={`${a.taskId}-${i}`}
-                        className="flex items-center justify-between gap-2"
-                      >
-                        <span>{a.activityType}</span>
-                        <span className="shrink-0 text-xs text-muted-foreground">
-                          {formatDateTime(a.createdTime)}
-                        </span>
-                      </li>
-                    ))}
-                  </ul>
-                </Section>
-              )}
-
               {actionError && (
                 <Alert variant="destructive">
                   <AlertDescription>{actionError}</AlertDescription>
@@ -243,6 +252,42 @@ function Section({ title, children }: { title: string; children: React.ReactNode
   )
 }
 
+/** Assigned to a directory group (no user object, but a key). */
+function assignedToGroupKey(task: TaskGetResponse): boolean {
+  if (task.assignedToUser) return false
+  const key = (task as unknown as { assignedToUserKey?: string | null }).assignedToUserKey
+  return !!key
+}
+
+/** First server message from a failed assign payload. */
+function extractAssignError(data: unknown): string {
+  if (Array.isArray(data)) {
+    for (const item of data) {
+      if (item && typeof item === 'object' && 'errorMessage' in item) {
+        const msg = String((item as { errorMessage?: string }).errorMessage ?? '').trim()
+        if (msg) return msg
+      }
+    }
+  }
+  return 'The assignment did not complete successfully'
+}
+
+/** Server error string from a thrown UiPath/HTTP error. */
+function extractServerMessage(err: unknown): string | null {
+  if (!err) return null
+  if (err instanceof UiPathError && err.message) return err.message
+  const e = err as Record<string, unknown>
+  const candidates = [
+    e.message,
+    (e.body as Record<string, unknown> | undefined)?.message,
+    ((e.response as Record<string, unknown> | undefined)?.data as Record<string, unknown> | undefined)?.message,
+  ]
+  for (const c of candidates) {
+    if (typeof c === 'string' && c.trim()) return c.trim()
+  }
+  return null
+}
+
 function renderValue(value: unknown): string {
   if (value === null || value === undefined) return '—'
   if (typeof value === 'object') {
@@ -292,10 +337,11 @@ function AssignForm({
         onDone()
         onClose()
       } else {
-        setSubmitError('The assignment did not complete successfully')
+        // Server-supplied error (e.g. "Already assigned to another user").
+        setSubmitError(extractAssignError(result.data))
       }
     } catch (err) {
-      setSubmitError(err instanceof UiPathError ? err.message : 'Assignment failed')
+      setSubmitError(extractServerMessage(err) ?? 'Assignment failed')
     } finally {
       setBusy(false)
     }
@@ -387,7 +433,7 @@ function CompleteForm({
         setSubmitError('The task did not complete successfully')
       }
     } catch (err) {
-      setSubmitError(err instanceof UiPathError ? err.message : 'Completion failed')
+      setSubmitError(extractServerMessage(err) ?? 'Completion failed')
     } finally {
       setBusy(false)
     }
@@ -399,8 +445,7 @@ function CompleteForm({
         <DialogHeader>
           <DialogTitle>Complete task</DialogTitle>
           <DialogDescription>
-            The action maps to the outcome the workflow expects. Use Reject, or type a custom
-            action and choose Complete.
+            Type the action your workflow expects (e.g. <span className="font-medium">Approve</span> or <span className="font-medium">Reject</span>) and confirm.
           </DialogDescription>
         </DialogHeader>
 
@@ -426,11 +471,8 @@ function CompleteForm({
           <Button variant="outline" onClick={onClose} disabled={busy}>
             Cancel
           </Button>
-          <Button variant="destructive" onClick={() => complete('Reject')} disabled={busy}>
-            Reject
-          </Button>
           <Button onClick={() => complete(action)} disabled={busy || !action.trim()}>
-            {busy ? 'Completing…' : `Complete (${action.trim() || '—'})`}
+            {busy ? 'Completing…' : 'Complete'}
           </Button>
         </DialogFooter>
       </DialogContent>