@nextclaw/ui 0.15.22 → 0.15.23

package/src/features/inbox/pages/inbox-page.tsx

@@ -3,12 +3,13 @@ import type { InboxDelivery } from "@nextclaw/shared";
 import { Archive, ArrowLeft, Inbox, MessageCircle, RotateCcw, Trash2 } from "lucide-react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { PageHeader } from "@/app/components/layout/page-layout";
 import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { InboxDeliveryContent } from "@/features/inbox/components/inbox-delivery-content";
 import { useInboxDeliveries } from "@/features/inbox/hooks/use-inbox-deliveries";
 import { Button } from "@/shared/components/ui/button";
 import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
-import { formatDateTime, t } from "@/shared/lib/i18n";
+import { formatDateShort, formatDateTime, t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
 type InboxFilter = "unread" | "all" | "archived";
@@ -51,26 +52,6 @@ function InboxEmptyState({ selection = false }: { selection?: boolean }) {
   );
 }
 
-function InboxPageHeader({ unreadCount }: { unreadCount: number }) {
-  return (
-    <header className="shrink-0 px-4 pb-4 pt-1 sm:px-0">
-      <div className="flex items-end justify-between gap-4">
-        <div>
-          <h1 className="text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
-            {t("inboxTitle")}
-          </h1>
-          <p className="mt-1 text-sm text-muted-foreground">{t("inboxDescription")}</p>
-        </div>
-        {unreadCount > 0 ? (
-          <span className="shrink-0 rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary">
-            {t("inboxUnreadCount").replace("{count}", String(unreadCount))}
-          </span>
-        ) : null}
-      </div>
-    </header>
-  );
-}
-
 function InboxListPane({
   activeDeliveryId,
   deliveries,
@@ -82,69 +63,76 @@ function InboxListPane({
   filter: InboxFilter;
   onFilterChange: (filter: InboxFilter) => void;
 }) {
-  const filterItems: Array<{ id: InboxFilter; label: string }> = [
-    { id: "unread", label: t("inboxUnread") },
-    { id: "all", label: t("inboxAll") },
-    { id: "archived", label: t("inboxArchived") },
+  const filterItems: Array<{ id: InboxFilter; label: string; count: number }> = [
+    {
+      id: "unread",
+      label: t("inboxUnread"),
+      count: filterDeliveries(deliveries, "unread").length,
+    },
+    { id: "all", label: t("inboxAll"), count: filterDeliveries(deliveries, "all").length },
+    {
+      id: "archived",
+      label: t("inboxArchived"),
+      count: filterDeliveries(deliveries, "archived").length,
+    },
   ];
   const filteredDeliveries = filterDeliveries(deliveries, filter);
   return (
-    <aside className="flex min-h-0 flex-col border-border/60 md:border-r">
-      <div className="flex shrink-0 gap-1 border-b border-border/60 p-3">
+    <aside className="flex min-h-0 flex-col border-border/60 bg-muted/20 md:border-r">
+      <div className="flex shrink-0 gap-1 border-b border-border/50 px-3 py-2">
         {filterItems.map((item) => (
           <button
             key={item.id}
             type="button"
             onClick={() => onFilterChange(item.id)}
             className={cn(
-              "rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+              "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
               filter === item.id
-                ? "bg-foreground text-background"
-                : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                ? "bg-[var(--interaction-selection)] text-foreground"
+                : "text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground",
             )}
           >
             {item.label}
+            <span aria-hidden="true" className="text-[10px] font-normal tabular-nums opacity-60">
+              {item.count}
+            </span>
           </button>
         ))}
       </div>
       <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto p-2">
         {filteredDeliveries.length > 0 ? (
-          <ul className="space-y-1">
+          <ul className="space-y-0.5">
             {filteredDeliveries.map((delivery) => (
               <li key={delivery.id}>
                 <Link
                   to={`/inbox/${encodeURIComponent(delivery.id)}`}
                   className={cn(
-                    "block rounded-xl px-3 py-3 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
-                    activeDeliveryId === delivery.id ? "bg-muted" : "hover:bg-muted/70",
+                    "block rounded-lg px-2.5 py-2 text-[13px] transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+                    activeDeliveryId === delivery.id
+                      ? "bg-[var(--interaction-selection)] text-foreground"
+                      : "text-foreground/80 hover:bg-[var(--interaction-hover)] hover:text-foreground",
                   )}
                 >
-                  <div className="flex items-start gap-2">
-                    <span
-                      className={cn(
-                        "mt-1.5 h-2 w-2 shrink-0 rounded-full",
-                        !delivery.readAt && "bg-primary",
-                      )}
-                      aria-label={!delivery.readAt ? t("inboxUnread") : undefined}
-                      aria-hidden={delivery.readAt ? "true" : undefined}
-                    />
-                    <div className="min-w-0 flex-1">
-                      <h2 className={cn(
-                        "line-clamp-2 text-sm leading-5 text-foreground",
-                        !delivery.readAt && "font-semibold",
-                      )}>
-                        {delivery.title}
-                      </h2>
-                      <p className="mt-1 line-clamp-2 text-xs leading-5 text-muted-foreground">
-                        {delivery.summary ?? t("inboxNoSummary")}
-                      </p>
-                      <time
-                        className="mt-2 block text-[11px] text-muted-foreground/80"
-                        dateTime={delivery.createdAt}
-                      >
-                        {formatDateTime(delivery.createdAt)}
+                  <h2 className={cn(
+                    "truncate font-medium leading-5",
+                    !delivery.readAt && "font-semibold text-foreground",
+                  )}>
+                    {delivery.title}
+                  </h2>
+                  <div className="mt-0.5 flex items-center gap-2 text-[11px] leading-4 text-muted-foreground/65">
+                    <p className="min-w-0 flex-1 truncate">
+                      {delivery.summary ?? t("inboxNoSummary")}
+                    </p>
+                    {!delivery.readAt ? (
+                      <span
+                        className="h-2 w-2 shrink-0 rounded-full bg-primary"
+                        aria-label={t("inboxUnread")}
+                      />
+                    ) : (
+                      <time className="shrink-0 tabular-nums" dateTime={delivery.createdAt}>
+                        {formatDateShort(delivery.createdAt)}
                       </time>
-                    </div>
+                    )}
                   </div>
                 </Link>
               </li>
@@ -183,42 +171,40 @@ function InboxDetailPane({
   const isHtml = delivery.contentType === "html";
   return (
     <main className="flex min-h-0 flex-col">
-      <div className={cn(
-        "shrink-0 border-b border-border/60 px-5 sm:px-8",
-        isHtml ? "py-3 sm:py-4" : "py-4 sm:py-6",
-      )}>
+      <div className="shrink-0 border-b border-border/50 px-5 py-3 sm:px-6">
         {isMobile ? (
           <button
             type="button"
             onClick={onBack}
-            className="mb-4 inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
+            className="mb-3 inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
           >
             <ArrowLeft className="h-4 w-4" />
             {t("inboxTitle")}
           </button>
         ) : null}
-        <div className="text-xs text-muted-foreground">
-          {t("inboxDeliveredBy")} · {formatDateTime(delivery.createdAt)}
+        <div className="flex min-h-7 min-w-0 items-center gap-2">
+          <h2
+            title={delivery.title}
+            className="min-w-0 truncate text-sm font-medium text-foreground"
+          >
+            {delivery.title}
+          </h2>
+          <span className="hidden shrink-0 text-muted-foreground sm:inline" aria-hidden="true">·</span>
+          <time
+            className="hidden shrink-0 text-[11px] tabular-nums text-muted-foreground sm:block"
+            dateTime={delivery.createdAt}
+          >
+            {formatDateTime(delivery.createdAt)}
+          </time>
         </div>
-        <h2 className={cn(
-          "text-balance font-semibold leading-tight tracking-[-0.02em] text-foreground",
-          isHtml ? "mt-2 text-lg sm:text-xl" : "mt-3 text-2xl",
-        )}>
-          {delivery.title}
-        </h2>
-        {delivery.summary && !isHtml ? (
-          <p className="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
-            {delivery.summary}
-          </p>
-        ) : null}
       </div>
       <div className={cn(
         "min-h-0 flex-1",
         isHtml
-          ? "p-4 sm:p-5"
-          : "custom-scrollbar overflow-y-auto px-5 py-6 sm:px-8 sm:py-8",
+          ? "p-3 sm:p-4"
+          : "custom-scrollbar overflow-y-auto px-5 py-5 sm:px-6 sm:py-6",
       )}>
-        <div className={cn("mx-auto", isHtml ? "h-full max-w-5xl" : "max-w-3xl")}>
+        <div className={cn("mx-auto max-w-5xl", isHtml && "h-full")}>
           <InboxDeliveryContent
             className={isHtml ? "h-full" : undefined}
             content={delivery.content}
@@ -228,26 +214,28 @@ function InboxDetailPane({
           />
         </div>
       </div>
-      <div className="shrink-0 border-t border-border/60 px-5 py-3 sm:px-8">
+      <div className="shrink-0 border-t border-border/50 px-5 py-3 sm:px-6">
         {error ? <p role="alert" className="mb-2 text-sm text-destructive">{error}</p> : null}
-        <div className="flex flex-wrap items-center gap-2">
-          <Button disabled={pending} onClick={onContinue}>
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex flex-wrap items-center gap-1">
+            <Button size="sm" variant="outline" disabled={pending} onClick={onReadToggle}>
+              {delivery.readAt ? t("inboxMarkUnread") : t("inboxMarkRead")}
+            </Button>
+            <Button size="sm" variant="ghost" disabled={pending} onClick={onArchiveToggle}>
+              {delivery.archivedAt
+                ? <RotateCcw className="mr-2 h-4 w-4" />
+                : <Archive className="mr-2 h-4 w-4" />}
+              {delivery.archivedAt ? t("inboxRestore") : t("inboxArchive")}
+            </Button>
+            <Button size="sm" variant="ghost" disabled={pending} onClick={onDelete}>
+              <Trash2 className="mr-2 h-4 w-4" />
+              {t("inboxDelete")}
+            </Button>
+          </div>
+          <Button size="sm" disabled={pending} onClick={onContinue}>
             <MessageCircle className="mr-2 h-4 w-4" />
             {t("inboxContinueChat")}
           </Button>
-          <Button variant="outline" disabled={pending} onClick={onReadToggle}>
-            {delivery.readAt ? t("inboxMarkUnread") : t("inboxMarkRead")}
-          </Button>
-          <Button variant="ghost" disabled={pending} onClick={onArchiveToggle}>
-            {delivery.archivedAt
-              ? <RotateCcw className="mr-2 h-4 w-4" />
-              : <Archive className="mr-2 h-4 w-4" />}
-            {delivery.archivedAt ? t("inboxRestore") : t("inboxArchive")}
-          </Button>
-          <Button variant="ghost" disabled={pending} onClick={onDelete}>
-            <Trash2 className="mr-2 h-4 w-4" />
-            {t("inboxDelete")}
-          </Button>
         </div>
       </div>
     </main>
@@ -351,14 +339,18 @@ export function InboxPage() {
   const showDetail = !isMobile || Boolean(activeDelivery);
 
   return (
-    <div className="flex h-full min-h-0 flex-col">
-      <InboxPageHeader unreadCount={deliveriesQuery.data?.unreadCount ?? 0} />
+    <div className="flex h-full min-h-0 flex-col gap-6">
+      <PageHeader
+        headingLevel={1}
+        title={t("inboxTitle")}
+        className="px-4 sm:px-0"
+      />
 
       <div className="min-h-0 flex-1 overflow-hidden border-y border-border/60 bg-background sm:rounded-2xl sm:border">
         {deliveriesQuery.isError ? (
           <div role="alert" className="p-6 text-sm text-destructive">{t("inboxLoadError")}</div>
         ) : (
-          <div className="grid h-full min-h-0 grid-cols-1 md:grid-cols-[320px_minmax(0,1fr)]">
+          <div className="grid h-full min-h-0 grid-cols-1 md:grid-cols-[300px_minmax(0,1fr)]">
             {showList ? <InboxListPane
               activeDeliveryId={activeDelivery?.id ?? null}
               deliveries={deliveries}

package/src/features/notifications/components/__tests__/app-notification-toast.test.tsx

@@ -1,22 +1,28 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter, useLocation } from "react-router-dom";
 import { describe, expect, it, vi } from "vitest";
 import { AppNotificationToast } from "@/features/notifications";
 
+function CurrentPathname() {
+  return <span data-testid="current-pathname">{useLocation().pathname}</span>;
+}
+
 describe("AppNotificationToast", () => {
-  it("renders a keyboard-accessible route notification and dismisses it on activation", async () => {
+  it("keeps opening and dismissing a route notification as separate actions", async () => {
     const onDismiss = vi.fn();
     const user = userEvent.setup();
     render(
-      <MemoryRouter>
+      <MemoryRouter initialEntries={["/chat/current"]}>
         <AppNotificationToast
           title="Background task"
           description="The requested summary is ready."
           href="/chat/session-1"
           ariaLabel="Open the background task reply"
+          dismissLabel="Dismiss notification"
           onDismiss={onDismiss}
         />
+        <CurrentPathname />
       </MemoryRouter>,
     );
 
@@ -29,23 +35,39 @@ describe("AppNotificationToast", () => {
     );
     expect(screen.getByText("Background task")).toBeTruthy();
     expect(screen.getByText("The requested summary is ready.")).toBeTruthy();
+    expect(notification.querySelector("button")).toBeNull();
 
-    await user.click(notification);
+    const dismiss = screen.getByRole("button", { name: "Dismiss notification" });
+    await user.tab();
+    expect(document.activeElement).toBe(notification);
+    await user.tab();
+    expect(document.activeElement).toBe(dismiss);
+    await user.click(dismiss);
     expect(onDismiss).toHaveBeenCalledOnce();
+    expect(screen.getByTestId("current-pathname").textContent).toBe("/chat/current");
+
+    await user.click(notification);
+    expect(onDismiss).toHaveBeenCalledTimes(2);
+    expect(screen.getByTestId("current-pathname").textContent).toBe("/chat/session-1");
   });
 
-  it("keeps informational notifications non-interactive when no route exists", () => {
+  it("lets users dismiss an informational notification without making its content interactive", async () => {
+    const onDismiss = vi.fn();
+    const user = userEvent.setup();
     render(
       <MemoryRouter>
         <AppNotificationToast
           title="All caught up"
           description="There is nothing else to review."
-          onDismiss={vi.fn()}
+          dismissLabel="Dismiss notification"
+          onDismiss={onDismiss}
         />
       </MemoryRouter>,
     );
 
     expect(screen.getByRole("status")).toBeTruthy();
     expect(screen.queryByRole("link")).toBeNull();
+    await user.click(screen.getByRole("button", { name: "Dismiss notification" }));
+    expect(onDismiss).toHaveBeenCalledOnce();
   });
 });

package/src/features/notifications/components/app-notification-toast.tsx

@@ -1,4 +1,6 @@
+import { X } from "lucide-react";
 import { Link } from "react-router-dom";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 
 export type AppNotificationToastProps = {
   title: string;
@@ -6,11 +8,15 @@ export type AppNotificationToastProps = {
   href?: string;
   iconSrc?: string;
   ariaLabel?: string;
+  dismissLabel: string;
   onDismiss: () => void;
 };
 
 const NOTIFICATION_CARD_CLASS =
-  "group ml-auto flex min-h-[74px] w-[320px] max-w-[calc(100vw-2rem)] items-center gap-3 rounded-[20px] border border-border/80 bg-background px-[18px] py-3 text-left text-foreground shadow-[0_8px_18px_rgba(0,0,0,0.12),0_2px_5px_rgba(0,0,0,0.06)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+  "relative ml-auto flex min-h-[74px] w-[320px] max-w-[calc(100vw-2rem)] rounded-[20px] border border-border/80 bg-background text-left text-foreground shadow-[0_8px_18px_rgba(0,0,0,0.12),0_2px_5px_rgba(0,0,0,0.06)]";
+
+const NOTIFICATION_CONTENT_CLASS =
+  "flex min-h-[72px] min-w-0 flex-1 items-center gap-3 rounded-[inherit] py-3 pl-[18px] pr-[52px]";
 
 function AppNotificationContent({
   title,
@@ -41,39 +47,72 @@ function AppNotificationContent({
   );
 }
 
+function AppNotificationDismissButton({
+  dismissLabel,
+  onDismiss,
+}: Pick<AppNotificationToastProps, "dismissLabel" | "onDismiss">) {
+  return (
+    <IconActionButton
+      className="absolute right-2.5 top-2.5 z-10"
+      icon={<X className="h-4 w-4" aria-hidden="true" />}
+      label={dismissLabel}
+      onClick={onDismiss}
+      size="lg"
+      tooltipSide="left"
+    />
+  );
+}
+
 export function AppNotificationToast({
   title,
   description,
   href,
   iconSrc,
   ariaLabel,
+  dismissLabel,
   onDismiss,
 }: AppNotificationToastProps) {
   const accessibleLabel = ariaLabel ?? [title, description].filter(Boolean).join(": ");
 
   if (href) {
     return (
-      <Link
-        to={href}
+      <div className={NOTIFICATION_CARD_CLASS}>
+        <Link
+          to={href}
+          aria-label={accessibleLabel}
+          className={`${NOTIFICATION_CONTENT_CLASS} focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/50`}
+          onClick={onDismiss}
+        >
+          <AppNotificationContent
+            title={title}
+            description={description}
+            iconSrc={iconSrc}
+          />
+        </Link>
+        <AppNotificationDismissButton
+          dismissLabel={dismissLabel}
+          onDismiss={onDismiss}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={NOTIFICATION_CARD_CLASS}>
+      <div
+        role="status"
         aria-label={accessibleLabel}
-        className={NOTIFICATION_CARD_CLASS}
-        onClick={onDismiss}
+        className={NOTIFICATION_CONTENT_CLASS}
       >
         <AppNotificationContent
           title={title}
           description={description}
           iconSrc={iconSrc}
         />
-      </Link>
-    );
-  }
-
-  return (
-    <div role="status" aria-label={accessibleLabel} className={NOTIFICATION_CARD_CLASS}>
-      <AppNotificationContent
-        title={title}
-        description={description}
-        iconSrc={iconSrc}
+      </div>
+      <AppNotificationDismissButton
+        dismissLabel={dismissLabel}
+        onDismiss={onDismiss}
       />
     </div>
   );

package/src/features/notifications/managers/__tests__/app-notification.manager.test.ts

@@ -5,6 +5,7 @@ import {
   AppNotificationToast,
   type AppNotificationToastProps,
 } from "@/features/notifications";
+import { t } from "@/shared/lib/i18n";
 
 const mocks = vi.hoisted(() => ({
   custom: vi.fn(),
@@ -54,6 +55,7 @@ describe("AppNotificationManager", () => {
       title: "Research complete",
       description: "The findings are ready.",
       href: "/chat/session-1",
+      dismissLabel: t("notificationDismiss"),
     }));
 
     element.props.onDismiss();

package/src/features/notifications/managers/app-notification.manager.ts

@@ -1,6 +1,7 @@
 import { createElement } from "react";
 import { toast } from "sonner";
 import { AppNotificationToast } from "@/features/notifications/components/app-notification-toast";
+import { t } from "@/shared/lib/i18n";
 
 export type AppNotification = {
   id?: string | number;
@@ -9,6 +10,7 @@ export type AppNotification = {
   href?: string;
   iconSrc?: string;
   ariaLabel?: string;
+  dismissLabel?: string;
   durationMs?: number;
 };
 
@@ -24,6 +26,7 @@ export class AppNotificationManager {
           href: notification.href,
           iconSrc: notification.iconSrc,
           ariaLabel: notification.ariaLabel,
+          dismissLabel: notification.dismissLabel ?? t("notificationDismiss"),
           onDismiss: () => {
             toast.dismiss(toastId);
           },

package/src/features/panel-apps/utils/panel-app-doc-browser.utils.tsx

@@ -79,5 +79,6 @@ export const PANEL_APPS_DOC_BROWSER_RENDERERS: DocBrowserCustomTabRenderers = {
         onRefresh={refreshIframe}
       />
     ),
+    supportsScrollRestoration: true,
   },
 };

package/src/features/pwa/managers/__tests__/pwa-shell-theme.manager.test.ts

@@ -91,6 +91,15 @@ describe('PwaShellThemeManager', () => {
     expect(document.documentElement.style.colorScheme).toBe('dark');
   });
 
+  it('applies charcoal shell colors and dark color scheme', () => {
+    pwaShellThemeManager.syncTheme('charcoal');
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#1C1C1C');
+    expect(document.body.style.backgroundColor).toBe('rgb(28, 28, 28)');
+    expect(document.documentElement.style.colorScheme).toBe('dark');
+  });
+
   it('maps the legacy leaf theme to warm shell colors', () => {
     document.documentElement.setAttribute('data-theme', 'leaf');
 

package/src/features/pwa/managers/pwa-shell-theme.manager.ts

@@ -14,6 +14,7 @@ const PWA_SHELL_THEME_COLORS: Record<UiTheme, string> = {
   dawn: '#FAF7F4',
   graphite: '#F8F8F7',
   night: '#101318',
+  charcoal: '#1C1C1C',
   probe: '#FEFCF6',
 };
 

package/src/features/service-apps/components/__tests__/service-apps-panel.test.tsx

@@ -62,7 +62,7 @@ vi.mock('@/features/service-apps/hooks/use-service-apps', () => ({
 }));
 
 describe('ServiceAppsPanel', () => {
-  it('labels service app icon actions and deletes through a confirm dialog', async () => {
+  it('keeps service actions progressive and deletes through a confirm dialog', async () => {
     const user = userEvent.setup();
 
     render(<ServiceAppsPanel />);
@@ -71,15 +71,16 @@ describe('ServiceAppsPanel', () => {
     expect(screen.queryByText('idle')).toBeNull();
     const discoverButton = screen.getByRole('button', { name: 'Connect and discover actions' });
     expect(discoverButton).toBeTruthy();
-    const disconnectButton = screen.getByRole('button', { name: 'Disconnect runtime' });
-    expect(disconnectButton).toBeTruthy();
-    expect((disconnectButton as HTMLButtonElement).disabled).toBe(true);
     await user.hover(discoverButton);
     await waitFor(() => {
       expect(screen.queryAllByText('Connect to the service app runtime and discover its available actions.').length).toBeGreaterThan(0);
     });
 
+    await user.click(discoverButton);
+    expect(discoverServiceAppActionsMutateAsync).toHaveBeenCalledWith('notes');
+
     fireEvent.click(screen.getByRole('button', { name: 'More actions' }));
+    expect((screen.getByRole('button', { name: 'Disconnect runtime' }) as HTMLButtonElement).disabled).toBe(true);
     fireEvent.click(screen.getByRole('button', { name: 'Delete service app' }));
     fireEvent.click(screen.getByRole('button', { name: 'Delete' }));