feat: instance contextual layout settings #3908
Conversation
📝 WalkthroughWalkthroughAdds instance-aware fetching for layouts and layout settings, new URL helpers for instance-scoped endpoints, and test mocks; fetching switches to instance-specific endpoints when the feature flag and an instance ID are present, otherwise falls back to existing behavior. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used📓 Path-based instructions (2)**/*.{ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
{**/*.module.css,**/*.{ts,tsx}}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
🧠 Learnings (4)📚 Learning: 2025-08-28T12:00:32.967ZApplied to files:
📚 Learning: 2025-11-25T12:53:54.399ZApplied to files:
📚 Learning: 2025-11-25T12:53:54.399ZApplied to files:
📚 Learning: 2025-11-25T12:53:54.399ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
🔇 Additional comments (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Jondyr
added
kind/product-feature
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/features/form/layoutSettings/LayoutSettingsContext.tsx (1)
20-38: Consider usingqueryOptionspattern for better maintainability.The coding guidelines recommend using objects for managing query keys and
queryOptionsfor sharing TanStack Query patterns across the system. This would improve consistency and make it easier to reuse query definitions.Based on learnings, the codebase is moving towards centralized query management with
queryOptions. Consider refactoring to follow this pattern in a future update:export const layoutSettingsQueryOptions = ( layoutSetId: string | undefined, instanceId: string | undefined, features: Record<string, unknown>, fetchLayoutSettings: (layoutSetId: string) => Promise<ILayoutSettings>, fetchLayoutSettingsForInstance: (layoutSetId: string, instanceId: string) => Promise<ILayoutSettings>, ) => ({ queryKey: ['layoutSettings', layoutSetId, instanceId], queryFn: layoutSetId ? async () => { const shouldUseInstanceEndpoint = features.addInstanceIdentifierToLayoutRequests && instanceId; const layoutSettings = shouldUseInstanceEndpoint ? await fetchLayoutSettingsForInstance(layoutSetId, instanceId) : await fetchLayoutSettings(layoutSetId); return processData(layoutSettings); } : skipToken, });As per coding guidelines, this approach enables better central management of query patterns.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/features/form/layoutSettings/LayoutSettingsContext.tsx(1 hunks)src/queries/queries.ts(2 hunks)src/test/renderWithProviders.tsx(1 hunks)src/utils/urls/appUrlHelper.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Avoid usinganytype or type casting (as type) in TypeScript code; improve typing by avoiding casts andanys when refactoring
Use objects for managing query keys and functions, andqueryOptionsfor sharing TanStack Query patterns across the system for central management
Files:
src/test/renderWithProviders.tsxsrc/features/form/layoutSettings/LayoutSettingsContext.tsxsrc/queries/queries.tssrc/utils/urls/appUrlHelper.ts
{**/*.module.css,**/*.{ts,tsx}}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS Modules for component styling and leverage Digdir Design System components when possible
Files:
src/test/renderWithProviders.tsxsrc/features/form/layoutSettings/LayoutSettingsContext.tsxsrc/queries/queries.tssrc/utils/urls/appUrlHelper.ts
🧠 Learnings (4)
📚 Learning: 2025-11-25T12:53:54.399Z
Learnt from: CR
Repo: Altinn/app-frontend-react PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T12:53:54.399Z
Learning: Applies to **/*.test.{ts,tsx} : Use `renderWithProviders` from `src/test/renderWithProviders.tsx` when testing components that require form layout context
Applied to files:
src/test/renderWithProviders.tsx
📚 Learning: 2025-11-25T12:53:54.399Z
Learnt from: CR
Repo: Altinn/app-frontend-react PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T12:53:54.399Z
Learning: Reduce dependency on React Context and migrate state management towards React Query patterns instead of Zustand wrappers
Applied to files:
src/features/form/layoutSettings/LayoutSettingsContext.tsx
📚 Learning: 2025-11-25T12:53:54.399Z
Learnt from: CR
Repo: Altinn/app-frontend-react PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T12:53:54.399Z
Learning: Applies to **/*.{ts,tsx} : Use objects for managing query keys and functions, and `queryOptions` for sharing TanStack Query patterns across the system for central management
Applied to files:
src/features/form/layoutSettings/LayoutSettingsContext.tsx
📚 Learning: 2025-08-28T12:00:32.967Z
Learnt from: olemartinorg
Repo: Altinn/app-frontend-react PR: 3645
File: src/features/datamodel/DataModelsProvider.tsx:172-175
Timestamp: 2025-08-28T12:00:32.967Z
Learning: In DataModelsProvider.tsx, the effect that processes referenced data types must run for both stateless and non-stateless apps. The `isFetching` guard is appropriate because stateless apps don't fetch instance data (useInstanceDataQuery is disabled with `enabled: !isStateless`) but still need the data type processing to occur.
Applied to files:
src/features/form/layoutSettings/LayoutSettingsContext.tsx
🧬 Code graph analysis (2)
src/features/form/layoutSettings/LayoutSettingsContext.tsx (5)
src/core/queries/usePrefetchQuery.ts (1)
QueryDefinition(4-4)src/core/contexts/AppQueriesProvider.tsx (1)
useAppQueries(58-58)src/features/instance/InstanceContext.tsx (1)
useLaxInstanceId(58-62)src/features/applicationMetadata/ApplicationMetadataProvider.tsx (1)
useApplicationMetadata(67-67)src/queries/queries.ts (2)
fetchLayoutSettingsForInstance(303-304)fetchLayoutSettings(300-301)
src/queries/queries.ts (3)
src/utils/network/networking.ts (1)
httpGet(10-17)src/utils/network/sharedNetworking.ts (1)
httpGet(7-13)src/utils/urls/appUrlHelper.ts (1)
getInstanceLayoutSettingsUrl(185-186)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Analyze (javascript)
- GitHub Check: Install
- GitHub Check: Type-checks, eslint, unit tests and SonarCloud
🔇 Additional comments (3)
src/utils/urls/appUrlHelper.ts (1)
185-186: LGTM! Clean URL helper implementation.The new
getInstanceLayoutSettingsUrlfunction follows the established pattern of other instance-scoped URL helpers in the file and has a clear, descriptive name.src/test/renderWithProviders.tsx (1)
154-154: LGTM! Test mock properly added.The mock for
fetchLayoutSettingsForInstancecorrectly mirrors the structure of the existingfetchLayoutSettingsmock, ensuring consistent test behavior.src/queries/queries.ts (1)
303-304: LGTM! Fetch function follows established patterns.The new
fetchLayoutSettingsForInstancefunction is implemented consistently with other query functions in the file, using the samehttpGetpattern and returning the correct type.
|
/publish |
PR release:
|
|
2 participants
Description
Related Issue(s)
Verification/QA
kind/*andbackport*label to this PR for proper release notes groupingSummary by CodeRabbit
New Features
Tests
✏️ Tip: You can customize this high-level summary in your review settings.