@shipfox/client-integrations 14.0.1 → 16.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-integrations",
   "license": "MIT",
-  "version": "14.0.1",
+  "version": "16.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -27,20 +27,20 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
-    "@shipfox/api-integration-core-dto": "12.0.0",
-    "@shipfox/api-integration-gitea-dto": "12.0.0",
-    "@shipfox/api-integration-github-dto": "12.0.0",
-    "@shipfox/api-integration-jira-dto": "12.0.0",
-    "@shipfox/api-integration-linear-dto": "12.0.0",
-    "@shipfox/api-integration-slack-dto": "12.0.0",
-    "@shipfox/api-integration-sentry-dto": "12.0.0",
-    "@shipfox/api-integration-webhook-dto": "12.0.0",
+    "@shipfox/api-integration-core-dto": "12.2.0",
+    "@shipfox/api-integration-gitea-dto": "12.2.0",
+    "@shipfox/api-integration-github-dto": "12.2.0",
+    "@shipfox/api-integration-linear-dto": "12.2.0",
+    "@shipfox/api-integration-jira-dto": "12.2.0",
+    "@shipfox/api-integration-slack-dto": "12.2.0",
+    "@shipfox/api-integration-webhook-dto": "12.2.0",
+    "@shipfox/api-integration-sentry-dto": "12.2.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-auth": "14.0.1",
-    "@shipfox/client-shell": "14.0.1",
-    "@shipfox/client-ui": "14.0.1",
-    "@shipfox/integration-icons": "0.3.1",
-    "@shipfox/react-ui": "1.0.0"
+    "@shipfox/client-auth": "16.0.0",
+    "@shipfox/client-shell": "16.0.0",
+    "@shipfox/client-ui": "16.0.0",
+    "@shipfox/react-ui": "1.1.0",
+    "@shipfox/integration-icons": "0.3.2"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

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

@@ -17,6 +17,7 @@ import {
 } from '@tanstack/react-router';
 import {createStore, Provider as JotaiProvider} from 'jotai';
 import {useMemo} from 'react';
+import {expect, screen, userEvent, within} from 'storybook/test';
 import {IntegrationGallery} from './integration-gallery.js';
 
 const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
@@ -148,6 +149,25 @@ export const LongNames: Story = {
   args: {scenario: 'long-names'},
 };
 
+export const UsageModalCloseRestoresInteraction: Story = {
+  play: async ({canvasElement}) => {
+    const user = userEvent.setup();
+    const canvas = within(canvasElement);
+    const actionsButton = await canvas.findByRole('button', {
+      name: 'Open acme-corp integration actions',
+    });
+
+    await user.click(actionsButton);
+    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();
+    expect(document.body.style.pointerEvents).not.toBe('none');
+    await user.click(actionsButton);
+    await screen.findByRole('menuitem', {name: 'Use this integration'});
+  },
+};
+
 function fetchForScenario(scenario: Scenario): typeof fetch {
   return (input, init) => {
     const url = requestUrl(input);

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

@@ -367,6 +367,27 @@ describe('IntegrationGallery — installed section', () => {
     expect(screen.getByText(webhookConnectionDto.inbound_url)).toBeVisible();
   });
 
+  test('restores page interactivity after closing the usage modal', async () => {
+    renderGallery({}, {connections: [webhookConnection]});
+
+    await openActions('Open Stripe production integration actions');
+    expect(document.body.style.pointerEvents).toBe('none');
+    fireEvent.click(screen.getByRole('menuitem', {name: 'Use this integration'}));
+    expect(await screen.findByRole('dialog', {name: 'Use Stripe production'})).toBeVisible();
+    expect(document.body.style.pointerEvents).toBe('none');
+
+    const usageDialog = screen.getByRole('dialog', {name: 'Use Stripe production'});
+    fireEvent.click(within(usageDialog).getByRole('button', {name: 'Done'}));
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog', {name: 'Use Stripe production'})).not.toBeInTheDocument();
+      expect(document.body).not.toHaveStyle({pointerEvents: 'none'});
+    });
+
+    await openActions('Open Stripe production integration actions');
+    expect(screen.getByRole('menuitem', {name: 'Use this integration'})).toBeVisible();
+  });
+
   test('opens the usage modal with a GitHub event selector', async () => {
     renderGallery({}, {connections: [githubConnection]});
 

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

@@ -71,8 +71,10 @@ export function IntegrationUsageModal({
   );
   const title = connection ? `Use ${connection.displayName}` : 'Use integration';
 
+  if (!open || connection === null) return null;
+
   return (
-    <Modal open={open && connection !== null} onOpenChange={onOpenChange}>
+    <Modal open={open} onOpenChange={onOpenChange}>
       <ModalContent aria-describedby={undefined} className="max-h-[calc(100vh-32px)] max-w-[640px]">
         <ModalTitle className="sr-only">{title}</ModalTitle>
         <ModalHeader>