Feat/3482 dynamic header navigation by walldenfilippa · Pull Request #4080 · Altinn/app-frontend-react

walldenfilippa · 2026-03-25T15:19:40Z

Description

Added dynamic header navigationTitle in settings.json for each layout set, allowing customized side navigation headers.

isValidOrScalar returned true when expr was undefined. I therefore added a check in useEvalExpression to ensure that defaultValue is set when expr is undefined.

dynamisk_header.mp4

Related Issue(s)

closes #{issue number}

Verification/QA

Manual functionality testing
- I have tested these changes manually
- Creator of the original issue (or service owner) has been contacted for manual testing (or will be contacted when released in alpha)
- No testing done/necessary
Automated tests
- Unit test(s) have been added/updated
- Cypress E2E test(s) have been added/updated
- No automatic tests are needed here (no functional changes/additions)
- I want someone to help me make some tests
UU/WCAG (follow these guidelines until we have our own)
- I have tested with a screen reader/keyboard navigation/automated wcag validator
- No testing done/necessary (no DOM/visual changes)
- I want someone to help me perform accessibility testing
User documentation @ altinn-studio-docs
- Has been added/updated
- No functionality has been changed/added, so no documentation is needed
- I will do that later/have created an issue
Support in Altinn Studio
- Issue(s) created for support in Studio
- This change/feature does not require any changes to Altinn Studio
Sprint board
- The original issue (or this PR itself) has been added to the Team Apps project and to the current sprint board
- I don't have permissions to do that, please help me out
Labels
- I have added a kind/* and backport* label to this PR for proper release notes grouping
- I don't have permissions to add labels, please help me out

Summary by CodeRabbit

New Features
- Navigation panel heading is now customizable through settings, with support for dynamic expressions from the data model.
Tests
- Added test coverage for navigation heading customization functionality.

coderabbitai · 2026-03-25T15:19:57Z

📝 Walkthrough

Walkthrough

A new navigationTitle property has been added to GlobalPageSettings to allow customization of the navigation panel heading. The property is processed through the layout settings context, evaluated at runtime using expression evaluation, and integrated into both desktop and mobile navigation components.

Changes

Cohort / File(s)	Summary
Type Definition `src/codegen/Common.ts`	Added optional `navigationTitle` property to `GlobalPageSettings` as a string expression with description for overriding the navigation panel heading.
Navigation Components `src/features/navigation/AppNavigation.tsx`, `src/features/navigation/PopoverNavigation.tsx`	Integrated `navigationTitle` reading from `usePageSettings()` and runtime evaluation via `useEvalExpression`, replacing hardcoded navigation title with dynamic expression-based values in heading elements.
Layout Settings `src/features/form/layoutSettings/LayoutSettingsContext.tsx`	Updated `usePageSettings` hook to process `navigationTitle` separately, adjusting return type to treat it as optional while keeping other settings required.
Expression Evaluation `src/utils/layout/generator/useEvalExpression.ts`	Added explicit undefined check to return default value immediately when expression is not provided, before validation logic.
Tests `src/features/navigation/AppNavigation.test.tsx`	Added new test suite for `navigationTitle` functionality, verifying default heading display and custom title rendering via mocked page settings.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 14.29% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Feat/3482 dynamic header navigation' clearly summarizes the main change: adding dynamic navigation header functionality.
Description check	✅ Passed	The PR description provides a clear summary of changes and follows most template sections with appropriate checkboxes marked, though the Related Issue number is incomplete.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/3482-dynamic-header-navigation

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

🧹 Nitpick comments (1)

src/features/navigation/AppNavigation.test.tsx (1)
440-448: Consider adding a test for dynamic expressions in the navigationTitle component tests.

The current tests only validate static string values. Since navigationTitle supports dynamic expressions through useEvalExpression (as seen in the implementation), a test case that validates expression evaluation at the component level would complement the unit tests in shared-functions.test.tsx. For example, testing an expression that evaluates to a different heading value based on data model context.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/features/navigation/AppNavigation.test.tsx` around lines 440 - 448, Add a
test in AppNavigation.test.tsx that verifies dynamic expressions in
navigationTitle are evaluated: create a new it(...) that calls renderHeading
with a navigationTitle containing an expression (e.g. a template/expression
string) and either provide the needed data model/context or mock
useEvalExpression to return the evaluated string, then assert the heading text
(getByRole('heading', { level: 2 })) matches the evaluated result; reference
renderHeading, navigationTitle, and useEvalExpression and mirror the pattern
used in shared-functions.test.tsx for expression evaluation.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/features/navigation/AppNavigation.test.tsx`:
- Around line 440-448: Add a test in AppNavigation.test.tsx that verifies
dynamic expressions in navigationTitle are evaluated: create a new it(...) that
calls renderHeading with a navigationTitle containing an expression (e.g. a
template/expression string) and either provide the needed data model/context or
mock useEvalExpression to return the evaluated string, then assert the heading
text (getByRole('heading', { level: 2 })) matches the evaluated result;
reference renderHeading, navigationTitle, and useEvalExpression and mirror the
pattern used in shared-functions.test.tsx for expression evaluation.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3e064bdf-413e-4e80-9212-36fb9b025ba4

📥 Commits

Reviewing files that changed from the base of the PR and between 0fca32f and a214f1a.

📒 Files selected for processing (6)

src/codegen/Common.ts
src/features/form/layoutSettings/LayoutSettingsContext.tsx
src/features/navigation/AppNavigation.test.tsx
src/features/navigation/AppNavigation.tsx
src/features/navigation/PopoverNavigation.tsx
src/utils/layout/generator/useEvalExpression.ts

sonarqubecloud · 2026-03-25T15:31:09Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
87.5% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Magnusrm

Nice work, just a nitpick on typing 😊

Magnusrm · 2026-03-31T10:09:34Z

src/features/form/layoutSettings/LayoutSettingsContext.tsx

+export const usePageSettings = (): Omit<Required<GlobalPageSettings>, 'navigationTitle'> &
+  Pick<GlobalPageSettings, 'navigationTitle'> => {
  const globalUISettings = useLaxGlobalUISettings();
  const layoutSettings = useLaxCtx();


It seems like you could just use Required<GlobalPageSettings> here.

walldenfilippa added 2 commits March 24, 2026 11:12

dynamic header in side navigation bar, first draft

7ee3242

fix bug: default value was not showing

a214f1a

walldenfilippa added kind/feature-request New feature or request backport-ignore This PR is a new feature and should not be cherry-picked onto release branches labels Mar 25, 2026

walldenfilippa linked an issue Mar 25, 2026 that may be closed by this pull request

Navigasjonsmeny: overskrive "Skjemasider" (gitt hovedskjema/underskjema) #3482

Open

walldenfilippa added the squad/utforming Issues that belongs to the named squad. label Mar 25, 2026

walldenfilippa added kind/product-feature Pull requests containing new features and removed kind/feature-request New feature or request labels Mar 25, 2026

coderabbitai bot reviewed Mar 25, 2026

View reviewed changes

Magnusrm reviewed Mar 31, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/3482 dynamic header navigation#4080

Feat/3482 dynamic header navigation#4080
walldenfilippa wants to merge 2 commits intomainfrom
feat/3482-dynamic-header-navigation

walldenfilippa commented Mar 25, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Mar 25, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

❌ Failed checks (1 warning)

Uh oh!

coderabbitai bot left a comment

Uh oh!

sonarqubecloud bot commented Mar 25, 2026

Uh oh!

Magnusrm left a comment

Uh oh!

Magnusrm Mar 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

walldenfilippa commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue(s)

Verification/QA

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

❌ Failed checks (1 warning)

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Mar 25, 2026

Quality Gate passed

Uh oh!

Magnusrm left a comment

Choose a reason for hiding this comment

Uh oh!

Magnusrm Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

walldenfilippa commented Mar 25, 2026 •

edited

Loading

coderabbitai bot commented Mar 25, 2026 •

edited

Loading