@shipfox/client-integrations 22.0.2 → 22.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-integrations",
   "license": "MIT",
-  "version": "22.0.2",
+  "version": "22.0.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -36,11 +36,11 @@
     "@shipfox/api-integration-sentry-dto": "12.2.0",
     "@shipfox/api-integration-webhook-dto": "12.2.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-auth": "22.0.2",
-    "@shipfox/client-shell": "22.0.2",
-    "@shipfox/client-ui": "22.0.2",
-    "@shipfox/react-ui": "2.1.1",
-    "@shipfox/integration-icons": "0.3.6"
+    "@shipfox/client-auth": "22.0.3",
+    "@shipfox/client-shell": "22.0.3",
+    "@shipfox/client-ui": "22.0.3",
+    "@shipfox/integration-icons": "0.3.7",
+    "@shipfox/react-ui": "2.2.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/integration-gallery.stories.tsx

@@ -161,13 +161,25 @@ export const UsageModalCloseRestoresInteraction: Story = {
     await user.click(await screen.findByRole('menuitem', {name: 'Use this integration'}));
     await screen.findByRole('dialog', {name: 'Use acme-corp'});
     await user.click(await screen.findByRole('button', {name: 'Done'}));
-    expect(screen.queryByRole('dialog', {name: 'Use acme-corp'})).not.toBeInTheDocument();
-    // The dialog unmounts before its dismissable layer releases the body, so
-    // wait for the release rather than asserting it on the same tick: clicking
-    // while `pointer-events: none` is still set is swallowed silently.
+    // The dialog stays mounted while it animates out, which is what keeps the
+    // close from being an abrupt unmount.
     await waitFor(() => {
+      expect(screen.queryByRole('dialog', {name: 'Use acme-corp'})).toHaveAttribute(
+        'data-state',
+        'closed',
+      );
+    });
+    // Both the removal and the body pointer-events release therefore land after
+    // the click rather than on the same tick.
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog', {name: 'Use acme-corp'})).not.toBeInTheDocument();
       expect(document.body.style.pointerEvents).not.toBe('none');
     });
+    // Radix dismisses on the first outside pointerdown while the previous menu is
+    // still mounted, so let it finish leaving before reopening.
+    await waitFor(() => {
+      expect(document.querySelectorAll('[role="menu"]')).toHaveLength(0);
+    });
     await user.click(actionsButton);
     await screen.findByRole('menuitem', {name: 'Use this integration'});
   },

package/src/components/integration-usage-modal.tsx

@@ -26,7 +26,7 @@ import {
 } from '@shipfox/react-ui/select';
 import {Text} from '@shipfox/react-ui/typography';
 import type {ReactNode} from 'react';
-import {useEffect, useMemo, useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 import {ConnectionStatusBadge} from '#connection-status-badge.js';
 import type {IntegrationConnection} from '#core/models.js';
 
@@ -62,19 +62,23 @@ export function IntegrationUsageModal({
     );
   }, [eventValuesKey]);
 
-  const workflowExample = connection
-    ? buildWorkflowExample({source: connection.slug, event: selectedEvent})
+  // The caller clears the connection in the same render that closes the modal,
+  // so keep the last one to render against while the surface animates out.
+  const lastConnection = useRef(connection);
+  if (connection !== null) lastConnection.current = connection;
+  const shownConnection = connection ?? lastConnection.current;
+
+  const workflowExample = shownConnection
+    ? buildWorkflowExample({source: shownConnection.slug, event: selectedEvent})
     : '';
   const data = useMemo(
     () => [{language: 'yaml', filename: WORKFLOW_FILENAME, code: workflowExample}],
     [workflowExample],
   );
-  const title = connection ? `Use ${connection.displayName}` : 'Use integration';
-
-  if (!open || connection === null) return null;
+  const title = shownConnection ? `Use ${shownConnection.displayName}` : 'Use integration';
 
   return (
-    <Modal open={open} onOpenChange={onOpenChange}>
+    <Modal open={open && connection !== null} onOpenChange={onOpenChange}>
       <ModalContent aria-describedby={undefined} className="max-h-[calc(100vh-32px)] max-w-[640px]">
         <ModalTitle className="sr-only">{title}</ModalTitle>
         <ModalHeader>
@@ -83,8 +87,11 @@ export function IntegrationUsageModal({
               <Text size="lg" aria-hidden="true" className="truncate">
                 {title}
               </Text>
-              {connection ? (
-                <ConnectionStatusBadge status={connection.lifecycleStatus} className="shrink-0" />
+              {shownConnection ? (
+                <ConnectionStatusBadge
+                  status={shownConnection.lifecycleStatus}
+                  className="shrink-0"
+                />
               ) : null}
             </div>
             <Text size="sm" className="text-foreground-neutral-muted">
@@ -92,7 +99,7 @@ export function IntegrationUsageModal({
             </Text>
           </div>
         </ModalHeader>
-        {connection ? (
+        {shownConnection ? (
           <>
             <ModalBody className="min-h-0 flex-1 gap-section overflow-y-auto overflow-x-clip scrollbar">
               <section className="flex w-full flex-col gap-cluster">