@forge/react 11.9.0-next.1 → 11.9.1-experimental-60ea29e

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @forge/react
 
+## 11.9.1-experimental-60ea29e
+
+### Minor Changes
+
+- f058dd8: Expose Permissions API in @forge/bridge for Custom UI apps
+
+### Patch Changes
+
+- Updated dependencies [f058dd8]
+  - @forge/bridge@5.10.2-experimental-60ea29e
+
+## 11.9.1
+
+### Patch Changes
+
+- f57dd69: Bug fix for usePermissions hook
+- Updated dependencies [4205052]
+  - @forge/bridge@5.10.2
+
+## 11.9.1-next.1
+
+### Patch Changes
+
+- Updated dependencies [4205052]
+  - @forge/bridge@5.10.2-next.0
+
+## 11.9.1-next.0
+
+### Patch Changes
+
+- f57dd69: Bug fix for usePermissions hook
+
+## 11.9.0
+
+### Minor Changes
+
+- 92c8fe8: Added useTheme hook to access the current theme and subscribe to theme updates
+
+### Patch Changes
+
+- @forge/bridge@5.10.1
+
 ## 11.9.0-next.1
 
 ### Minor Changes

package/LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright (c) 2025 Atlassian
+Copyright (c) 2026 Atlassian
 Permission is hereby granted to use this software in accordance with the terms 
 and conditions outlined in the Atlassian Developer Terms, which can be found 
 at the following URL:

package/out/hooks/__test__/usePermissions.test.js

@@ -4,11 +4,25 @@ const react_hooks_1 = require("@testing-library/react-hooks");
 const usePermissions_1 = require("../usePermissions");
 const testUtils_1 = require("../../__test__/testUtils");
 // Mock @forge/bridge
-jest.mock('@forge/bridge', () => ({
-    view: {
-        getContext: jest.fn()
+jest.mock('@forge/bridge', () => {
+    // Set up window before requiring actual bridge to avoid initialization issues
+    if (typeof window === 'undefined') {
+        // @ts-ignore
+        global.window = global;
+        // @ts-ignore
+        global.window.__bridge = {
+            callBridge: jest.fn()
+        };
     }
-}));
+    const actualBridge = jest.requireActual('@forge/bridge');
+    return {
+        ...actualBridge,
+        view: {
+            ...actualBridge.view,
+            getContext: jest.fn()
+        }
+    };
+});
 const mockGetContext = jest.fn();
 describe('usePermissions', () => {
     beforeEach(() => {
@@ -363,6 +377,369 @@ describe('usePermissions', () => {
             });
         });
     });
+    describe('CSP path matching for client fetch', () => {
+        it('should allow any path when allowlist has no path', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            client: ['https://cdn.example.com']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        client: [
+                            'https://cdn.example.com',
+                            'https://cdn.example.com/',
+                            'https://cdn.example.com/any/path',
+                            'https://cdn.example.com/file.js'
+                        ]
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(true);
+        });
+        it('should use prefix matching when allowlist has trailing slash', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            client: ['https://cdn.example.com/api/']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        client: [
+                            'https://cdn.example.com/api/',
+                            'https://cdn.example.com/api/users',
+                            'https://cdn.example.com/api/v1/data'
+                        ]
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(true);
+        });
+        it('should block paths outside prefix when using trailing slash', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            client: ['https://cdn.example.com/api/']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        client: ['https://cdn.example.com/other', 'https://cdn.example.com/']
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(false);
+            expect(result.current.missingPermissions?.external?.fetch?.client).toEqual([
+                'https://cdn.example.com/other',
+                'https://cdn.example.com/'
+            ]);
+        });
+        it('should use exact matching when allowlist has no trailing slash', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            client: ['https://cdn.example.com/bundle.js']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        client: ['https://cdn.example.com/bundle.js']
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(true);
+        });
+        it('should block non-exact paths when using exact matching', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            client: ['https://cdn.example.com/bundle.js']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        client: [
+                            'https://cdn.example.com/bundle.js/extra',
+                            'https://cdn.example.com/other.js',
+                            'https://cdn.example.com/'
+                        ]
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(false);
+            expect(result.current.missingPermissions?.external?.fetch?.client).toEqual([
+                'https://cdn.example.com/bundle.js/extra',
+                'https://cdn.example.com/other.js',
+                'https://cdn.example.com/'
+            ]);
+        });
+    });
+    describe('Backend vs Client CSP differences', () => {
+        it('should allow any path for backend (hostname-only matching)', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            backend: ['https://api.example.com/specific/path']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        backend: [
+                            'https://api.example.com',
+                            'https://api.example.com/different/path',
+                            'https://api.example.com/specific/path'
+                        ]
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(true);
+        });
+        it('should demonstrate backend allows but client blocks different paths', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            backend: ['https://api.example.com/api/'],
+                            client: ['https://api.example.com/api/']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        backend: ['https://api.example.com/private/secret.json'],
+                        client: ['https://api.example.com/private/secret.json']
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(false);
+            // Backend should pass (hostname-only), client should fail (CSP path check)
+            expect(result.current.missingPermissions?.external?.fetch?.backend).toBeUndefined();
+            expect(result.current.missingPermissions?.external?.fetch?.client).toEqual([
+                'https://api.example.com/private/secret.json'
+            ]);
+        });
+    });
+    describe('CSP for resource types', () => {
+        it('should use CSP validation for images with paths', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        images: ['https://cdn.example.com/public/']
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    images: ['https://cdn.example.com/public/image.png', 'https://cdn.example.com/public/nested/image.jpg']
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(true);
+        });
+        it('should block images outside allowed directory', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        images: ['https://cdn.example.com/public/']
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    images: ['https://cdn.example.com/private/image.png', 'https://cdn.example.com/image.png']
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(false);
+            expect(result.current.missingPermissions?.external?.images).toEqual([
+                'https://cdn.example.com/private/image.png',
+                'https://cdn.example.com/image.png'
+            ]);
+        });
+        it('should apply CSP to all resource types', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        scripts: ['https://cdn.example.com'],
+                        styles: ['https://cdn.example.com/css/'],
+                        fonts: ['https://fonts.example.com/font.woff2']
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    scripts: ['https://cdn.example.com/bundle.js'],
+                    styles: ['https://cdn.example.com/css/main.css'],
+                    fonts: ['https://fonts.example.com/font.woff2'] // Exact match
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(true);
+        });
+    });
+    describe('URL normalization and protocol handling', () => {
+        it('should handle URLs without protocol', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            backend: ['api.example.com']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        backend: ['https://api.example.com', 'api.example.com']
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(true);
+        });
+        it('should handle CSP secure protocol upgrades (http -> https)', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            client: ['http://example.com']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        client: ['http://example.com', 'https://example.com']
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(true);
+        });
+        it('should not allow protocol downgrades (https -> http)', async () => {
+            const mockContext = {
+                permissions: {
+                    external: {
+                        fetch: {
+                            client: ['https://example.com']
+                        }
+                    }
+                }
+            };
+            mockGetContext.mockResolvedValue(mockContext);
+            const requiredPermissions = {
+                external: {
+                    fetch: {
+                        client: ['http://example.com']
+                    }
+                }
+            };
+            const { result } = (0, react_hooks_1.renderHook)(() => (0, usePermissions_1.usePermissions)(requiredPermissions));
+            await (0, react_hooks_1.act)(async () => {
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.hasPermission).toBe(false);
+            expect(result.current.missingPermissions?.external?.fetch?.client).toEqual(['http://example.com']);
+        });
+    });
     describe('Edge cases', () => {
         it('should handle empty required permissions', async () => {
             const mockContext = {

package/out/hooks/usePermissions.d.ts

@@ -1,17 +1,5 @@
-/**
- * https://ecosystem-platform.atlassian.net/browse/DEPLOY-1411
- * reuse logic from @forge/api
- */
-/**
- * Resource types that can be loaded externally
- */
-declare const RESOURCE_TYPES: readonly ["fonts", "styles", "frames", "images", "media", "scripts"];
-export declare type ResourceType = (typeof RESOURCE_TYPES)[number];
-/**
- * Fetch types for external requests
- */
-declare const FETCH_TYPES: readonly ["backend", "client"];
-export declare type FetchType = (typeof FETCH_TYPES)[number];
+import { type PermissionRequirements, type MissingPermissions, type PermissionCheckResult, type ResourceType, type FetchType } from '@forge/bridge';
+export type { ResourceType, FetchType };
 export interface Permissions {
     scopes?: string[];
     external?: {
@@ -28,21 +16,7 @@ export interface Permissions {
     };
     content?: Record<string, unknown>;
 }
-/**
- * Required permissions for a component
- */
-export declare type PermissionRequirements = Permissions;
-/**
- * Missing permissions information
- */
-export declare type MissingPermissions = Permissions;
-/**
- * Permission check result
- */
-export interface PermissionCheckResult {
-    granted: boolean;
-    missing: MissingPermissions | null;
-}
+export type { PermissionRequirements, MissingPermissions, PermissionCheckResult };
 /**
  * Hook for checking permissions in Forge apps
  *
@@ -82,8 +56,7 @@ export interface PermissionCheckResult {
 export declare const usePermissions: (requiredPermissions: PermissionRequirements) => {
     hasPermission: boolean;
     isLoading: boolean;
-    missingPermissions: Permissions | null;
+    missingPermissions: PermissionRequirements | null;
     error: Error | null;
 };
-export {};
 //# sourceMappingURL=usePermissions.d.ts.map

package/out/hooks/usePermissions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePermissions.d.ts","sourceRoot":"","sources":["../../src/hooks/usePermissions.ts"],"names":[],"mappings":"AAIA;;;GAGG;AAEH;;GAEG;AACH,QAAA,MAAM,cAAc,sEAAuE,CAAC;AAC5F,oBAAY,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3D;;GAEG;AACH,QAAA,MAAM,WAAW,gCAAiC,CAAC;AACnD,oBAAY,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAErD,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE;YACN,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;YACnB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;SACnB,CAAC;QACF,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;KACpB,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACnC;AAED;;GAEG;AACH,oBAAY,sBAAsB,GAAG,WAAW,CAAC;AAEjD;;GAEG;AACH,oBAAY,kBAAkB,GAAG,WAAW,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAAC;CACpC;AAaD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,cAAc,wBAAyB,sBAAsB;;;;;CA2JzE,CAAC"}
+{"version":3,"file":"usePermissions.d.ts","sourceRoot":"","sources":["../../src/hooks/usePermissions.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,eAAe,CAAC;AAGvB,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;AAExC,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE;YACN,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;YACnB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;SACnB,CAAC;QACF,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;KACpB,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACnC;AAGD,YAAY,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,CAAC;AAElF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,cAAc,wBAAyB,sBAAsB;;;;;CAoEzE,CAAC"}