feat(samples/action-center-app): side-sheet task detail + UI fixes

amrit-agarwal-1 · claude · amrit-agarwal-1 · commit 2b9499a0427d · 2026-06-16T13:25:58.000+05:30
Co-Authored-By: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/samples/action-center-app/src/App.tsx b/samples/action-center-app/src/App.tsx
@@ -17,21 +17,16 @@ import { AuthProvider, useAuth } from './hooks/useAuth'
 import { TaskList } from './components/TaskList'
 import { ThemeToggle } from './components/Theme'
 
-// Coded App pattern: the SDK fills required fields (clientId, orgName,
-// tenantName, baseUrl, scope, redirectUri) from `<meta name="uipath:*">` tags
-// injected at runtime — by `@uipath/coded-apps-dev` locally (from uipath.json)
-// or by the platform when deployed. The static type insists on those fields,
-// so we pass an empty object cast to satisfy it.
+// 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()
 
-  // Action Center tasks are folder-scoped. Persist the choice so it survives a
-  // refresh and the OAuth round-trip. Leaving it blank lists tasks across all
-  // folders the user can view/edit.
+  // 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
@@ -101,10 +96,8 @@ function AppContent() {
             />
             <Input
               id="folder-id"
-              // Folder IDs are identifiers, not quantities — `type="text"` with
-              // `inputMode="numeric"` keeps the on-screen numeric keypad on
-              // mobile while dropping the desktop spinner arrows (which would
-              // imply incrementing an ID is meaningful, which it isn't).
+              // 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]*"
diff --git a/samples/action-center-app/src/components/TaskDetail.tsx b/samples/action-center-app/src/components/TaskDetail.tsx
@@ -13,6 +13,13 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@uipath/apollo-wind/components/ui/dialog'
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@uipath/apollo-wind/components/ui/sheet'
 import { Input } from '@uipath/apollo-wind/components/ui/input'
 import { Label } from '@uipath/apollo-wind/components/ui/label'
 import {
@@ -36,19 +43,17 @@ import {
 interface Props {
   taskId: number
   folderId: number
+  /** Opened from Manage Tasks — gates the Assign/Reassign actions. */
+  isManage: boolean
   onClose: () => void
   /** Called after a mutation so the parent list can refresh. */
   onChanged: () => void
 }
 
 type Sub = 'assign' | 'reassign' | 'complete' | null
 
-/**
- * Detail modal for one task (via `Tasks.getById`) plus the lifecycle actions.
- * Assign / reassign / complete open small inline forms; unassign runs inline.
- * All mutations use the task-attached methods on the fetched task.
- */
-export function TaskDetail({ taskId, folderId, onClose, onChanged }: Props) {
+/** 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 [sub, setSub] = useState<Sub>(null)
   const [busy, setBusy] = useState(false)
@@ -79,12 +84,16 @@ export function TaskDetail({ taskId, folderId, onClose, onChanged }: Props) {
 
   return (
     <>
-      <Dialog open onOpenChange={(open) => !open && onClose()}>
-        <DialogContent className="sm:max-w-lg">
-          <DialogHeader>
-            <DialogTitle className="truncate">{task?.title ?? `Task #${taskId}`}</DialogTitle>
-          </DialogHeader>
+      <Sheet open onOpenChange={(open) => !open && onClose()}>
+        <SheetContent side="right" className="flex w-full flex-col sm:max-w-lg">
+          <SheetHeader>
+            <SheetTitle className="min-w-0 break-words pr-8">
+              {task?.title ?? `Task #${taskId}`}
+            </SheetTitle>
+          </SheetHeader>
 
+          {/* Scrollable body so the footer stays pinned regardless of content height. */}
+          <div className="-mx-6 min-h-0 flex-1 overflow-y-auto px-6">
           {loading ? (
             <div className="flex justify-center py-6">
               <Spinner label="Loading task…" showLabel />
@@ -94,8 +103,8 @@ export function TaskDetail({ taskId, folderId, onClose, onChanged }: Props) {
               <AlertDescription>{error}</AlertDescription>
             </Alert>
           ) : task ? (
-            <div className="space-y-5 text-sm">
-              <div className="flex flex-wrap items-center gap-2">
+            <div className="space-y-4 text-sm">
+              <div className="flex flex-wrap items-center gap-1.5">
                 <Badge variant={statusBadge(task.status).variant}>
                   {statusBadge(task.status).label}
                 </Badge>
@@ -115,27 +124,23 @@ export function TaskDetail({ taskId, folderId, onClose, onChanged }: Props) {
                   label="Assignee"
                   value={task.assignedToUser?.displayName ?? 'Unassigned'}
                 />
+                {task.taskSource?.sourceName && (
+                  <Field label="Source" value={task.taskSource.sourceName} />
+                )}
                 <Field label="Created" 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.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="Tags">
-                  <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">
@@ -176,11 +181,15 @@ export function TaskDetail({ taskId, folderId, onClose, onChanged }: Props) {
               )}
             </div>
           ) : null}
+          </div>
 
           {task && !isCompleted && (
-            <DialogFooter className="flex-wrap">
-              {!hasAssignee && <Button onClick={() => setSub('assign')}>Assign</Button>}
-              {hasAssignee && (
+            <SheetFooter className="flex-wrap gap-2">
+              {/* Assign/Reassign to others is a Manage Tasks action only. */}
+              {isManage && !hasAssignee && (
+                <Button onClick={() => setSub('assign')}>Assign</Button>
+              )}
+              {isManage && hasAssignee && (
                 <Button variant="outline" onClick={() => setSub('reassign')}>
                   Reassign
                 </Button>
@@ -193,10 +202,10 @@ export function TaskDetail({ taskId, folderId, onClose, onChanged }: Props) {
               <Button variant="outline" onClick={() => setSub('complete')}>
                 Complete
               </Button>
-            </DialogFooter>
+            </SheetFooter>
           )}
-        </DialogContent>
-      </Dialog>
+        </SheetContent>
+      </Sheet>
 
       {task && (sub === 'assign' || sub === 'reassign') && (
         <AssignForm
@@ -269,9 +278,8 @@ function AssignForm({
     const id = Number(userId)
     if (!Number.isFinite(id) || id <= 0) return
     const selected = users.find((u) => u.id === id)
-    // Assigning to a directory group needs an assignment criteria so the
-    // backend knows how to distribute the task across the group's members; a
-    // direct (single-user) assignment omits it.
+    // Directory-group assignment needs a criteria to distribute across members;
+    // single-user assignment omits it.
     const opts: TaskAssignOptions =
       selected?.type === TaskUserType.DirectoryGroup
         ? { userId: id, assignmentCriteria: TaskAssignmentCriteria.AllUsers }
diff --git a/samples/action-center-app/src/components/TaskList.tsx b/samples/action-center-app/src/components/TaskList.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Inbox, Plus, RefreshCw, User, Users } from 'lucide-react'
+import { ChevronRight, Inbox, Plus, RefreshCw, User, Users } from 'lucide-react'
 import { Tasks, TaskStatus, TaskPriority } from '@uipath/uipath-typescript/tasks'
 import type { TaskGetResponse } from '@uipath/uipath-typescript/tasks'
 import { UiPathError } from '@uipath/uipath-typescript/core'
@@ -74,9 +74,7 @@ interface Props {
 export function TaskList({ folderId }: Props) {
   const [status, setStatus] = useState<TaskStatus | 'all'>('all')
   const [priority, setPriority] = useState<TaskPriority | 'all'>('all')
-  // Mirrors Action Center's My Tasks / Manage Tasks split via getAll's
-  // `asTaskAdmin` flag — "Manage" lists tasks the user can assign (the context
-  // where group assignment applies).
+  // My Tasks / Manage Tasks split via getAll's `asTaskAdmin` flag.
   const [asTaskAdmin, setAsTaskAdmin] = useState(false)
   const [selected, setSelected] = useState<TaskGetResponse | null>(null)
   const [creating, setCreating] = useState(false)
@@ -178,7 +176,8 @@ export function TaskList({ folderId }: Props) {
                   <TableHead className="w-[12%]">Status</TableHead>
                   <TableHead className="w-[10%]">Priority</TableHead>
                   <TableHead className="w-[14%]">Assignee</TableHead>
-                  <TableHead className="w-[18%]">Created</TableHead>
+                  <TableHead className="w-[14%]">Created</TableHead>
+                  <TableHead className="w-[4%]" aria-label="Open" />
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -224,6 +223,9 @@ export function TaskList({ folderId }: Props) {
                       <TableCell className="truncate text-muted-foreground">
                         {formatDateTime(task.createdTime)}
                       </TableCell>
+                      <TableCell className="text-right text-muted-foreground">
+                        <ChevronRight className="inline h-4 w-4" aria-hidden />
+                      </TableCell>
                     </TableRow>
                   )
                 })}
@@ -268,6 +270,7 @@ export function TaskList({ folderId }: Props) {
           key={selected.id}
           taskId={selected.id}
           folderId={selected.folderId}
+          isManage={asTaskAdmin}
           onClose={() => setSelected(null)}
           onChanged={refresh}
         />
@@ -283,11 +286,7 @@ export function TaskList({ folderId }: Props) {
   )
 }
 
-/**
- * Skeleton placeholder for the task table. Mirrors the real table's column
- * layout so the page doesn't jump on load — the industry-standard pattern
- * for data-grids (Linear, Notion, Vercel, Stripe all do this).
- */
+/** Skeleton placeholder mirroring the table's columns so the page doesn't jump on load. */
 function TaskTableSkeleton({ rows = 8 }: { rows?: number }) {
   return (
     <div className="rounded-lg border">
@@ -299,7 +298,8 @@ function TaskTableSkeleton({ rows = 8 }: { rows?: number }) {
             <TableHead className="w-[12%]">Status</TableHead>
             <TableHead className="w-[10%]">Priority</TableHead>
             <TableHead className="w-[14%]">Assignee</TableHead>
-            <TableHead className="w-[18%]">Created</TableHead>
+            <TableHead className="w-[14%]">Created</TableHead>
+            <TableHead className="w-[4%]" />
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -323,6 +323,7 @@ function TaskTableSkeleton({ rows = 8 }: { rows?: number }) {
               <TableCell>
                 <Skeleton className="h-4 w-32" />
               </TableCell>
+              <TableCell />
             </TableRow>
           ))}
         </TableBody>
@@ -359,11 +360,7 @@ function FilterSelect({
   )
 }
 
-/**
- * Inline create form — `Tasks.create` only supports External tasks and needs a
- * target folder, so a Folder ID field is always shown (prefilled from the
- * header filter when one is set).
- */
+/** Inline create form — Tasks.create makes External tasks and needs a target folder. */
 function CreateForm({
   defaultFolderId,
   onClose,
diff --git a/samples/action-center-app/src/hooks/useTasks.ts b/samples/action-center-app/src/hooks/useTasks.ts
@@ -14,10 +14,8 @@ import type { TaskFilters } from '../taskUtils'
  * to keep the sample small; each wraps one part of `TaskServiceModel`.
  */
 
-// Principal types a human task can be assigned to. `Tasks.getUsers` also
-// returns robot / external-application accounts (and a folder may contain only
-// groups, not individual users), so we keep people + directory users + groups
-// and drop the non-human accounts.
+// Human-assignable principals only — drop the robot / external-app accounts
+// that Tasks.getUsers also returns.
 const ASSIGNABLE_TYPES = new Set<TaskUserType>([
   TaskUserType.User,
   TaskUserType.DirectoryUser,
@@ -62,10 +60,8 @@ export function useTasks(
 
   const filter = buildTaskFilter(filters)
 
-  // Reset to page 1 AND clear the previous result set when the folder,
-  // filters, or admin scope change. Clearing `tasks` flips the table into its
-  // loading state immediately instead of letting the stale rows linger until
-  // the new fetch resolves.
+  // On folder/filter/scope change, reset to page 1 and clear rows so the table
+  // shows loading immediately instead of stale data.
   useEffect(() => {
     setPage(1)
     setTasks([])
@@ -81,10 +77,8 @@ export function useTasks(
       const result = await svc.getAll({
         pageSize,
         jumpToPage: page,
-        // Use the raw server property name. The SDK renames `CreationTime` →
-        // `createdTime` on the response, but OData $orderby/$filter run on the
-        // server, which only knows the original `CreationTime` — passing the
-        // SDK alias returns "Invalid OData query options" (400).
+        // Raw server property name: $orderby runs server-side and only knows
+        // `CreationTime` (the SDK alias `createdTime` would 400).
         orderby: 'CreationTime desc',
         ...(folderId != null ? { folderId } : {}),
         ...(filter ? { filter } : {}),
diff --git a/samples/action-center-app/src/index.css b/samples/action-center-app/src/index.css
@@ -1,7 +1,11 @@
 /*
- * Apollo Vertex design system styles — bundles Tailwind v4 base + utilities,
- * Apollo's design tokens (semantic colours, typography, radii), and built-in
- * `.dark` overrides. `next-themes` toggles `class="dark"` on <html> and
- * everything else (apollo-wind components, our Tailwind utilities) reacts.
+ * Import apollo-wind's Tailwind source (not the pre-compiled styles.css) so this
+ * app compiles its own utility classes. Brings in Tailwind v4 base/utilities,
+ * Apollo design tokens, and `.dark` overrides (toggled by next-themes).
  */
-@import '@uipath/apollo-wind/styles.css';
+@import '@uipath/apollo-wind/tailwind.css';
+
+/* Tailwind skips node_modules — scan apollo-wind so its component classes
+   (e.g. the Dialog's p-6/gap-4) regenerate; the second line scans this app. */
+@source '../node_modules/@uipath/apollo-wind/dist';
+@source './';
