chore: 16650 migrate usage of legacy studiopageheader with the new component and remove the old one #16937
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
area/dashboard
Contributor
WalkthroughThis pull request migrates Studio UI components from a legacy package ( Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderProfileMenu/StudioPageHeaderProfileMenu.tsx (1)
119-140: Critical: Link onClick closes dropdown unconditionally, breaking openInNewTab behavior.The
handleClickat line 123 always callssetOpen(false), but the test at lines 175-186 in the test file expects links withopenInNewTab: trueto keep the dropdown open. Links that open in a new tab should allow users to continue selecting other menu items.Apply this diff to close the dropdown only for same-window navigation:
const StudioProfileMenuLink = ({ item }: StudioProfileMenuLinkProps): ReactElement => { const { href, openInNewTab } = item.action; const { setOpen } = useStudioDropdownContext(); - const handleClick = (): void => setOpen(false); + const handleClick = (): void => { + if (!openInNewTab) setOpen(false); + }; return ( <StudioDropdown.Item> <StudioDropdown.Button asChild> <a href={href} target={openInNewTab ? '_blank' : undefined} rel={openInNewTab ? 'noopener noreferrer' : undefined} role='menuitem' onClick={handleClick} > {item.itemName} </a> </StudioDropdown.Button> </StudioDropdown.Item> ); };
🧹 Nitpick comments (1)
src/Designer/frontend/app-development/layout/PageHeader/SubHeader/PreviewButton/PreviewButton.tsx (1)
35-35: Use self-closing tag for empty element.Apply this diff:
- ></StudioPageHeader.HeaderLink> + />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (33)
src/Designer/frontend/admin/layout/PageHeader.tsx(2 hunks)src/Designer/frontend/app-development/contexts/PageHeaderContext/PageHeaderContext.tsx(1 hunks)src/Designer/frontend/app-development/layout/App.css(1 hunks)src/Designer/frontend/app-development/layout/PageHeader/LargeNavigationMenu/LargeNavigationMenu.module.css(1 hunks)src/Designer/frontend/app-development/layout/PageHeader/LargeNavigationMenu/LargeNavigationMenu.tsx(2 hunks)src/Designer/frontend/app-development/layout/PageHeader/PageHeader.tsx(2 hunks)src/Designer/frontend/app-development/layout/PageHeader/SmallHeaderMenu/SmallHeaderMenu.tsx(1 hunks)src/Designer/frontend/app-development/layout/PageHeader/SubHeader/PreviewButton/PreviewButton.tsx(2 hunks)src/Designer/frontend/app-development/layout/PageHeader/SubHeader/SettingsPageButton/SettingsPageButton.tsx(2 hunks)src/Designer/frontend/app-development/test/headerMocks.ts(1 hunks)src/Designer/frontend/app-preview/src/components/AppPreviewSubMenu/AppPreviewSubMenu.module.css(1 hunks)src/Designer/frontend/app-preview/src/components/AppPreviewSubMenu/AppPreviewSubMenu.tsx(2 hunks)src/Designer/frontend/app-preview/src/components/UserProfileMenu/UserProfileMenu.test.tsx(2 hunks)src/Designer/frontend/app-preview/src/components/UserProfileMenu/UserProfileMenu.tsx(1 hunks)src/Designer/frontend/app-preview/src/views/LandingPage.tsx(2 hunks)src/Designer/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.tsx(1 hunks)src/Designer/frontend/dashboard/pages/PageLayout/DashboardHeader/LargeNavigationMenu/LargeNavigationMenu.tsx(1 hunks)src/Designer/frontend/dashboard/types/NavigationMenuItem.ts(1 hunks)src/Designer/frontend/dashboard/utils/headerUtils/headerUtils.test.ts(1 hunks)src/Designer/frontend/dashboard/utils/headerUtils/headerUtils.ts(1 hunks)src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeader.module.css(1 hunks)src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderHeaderLink/StudioPageHeaderHeaderLink.module.css(1 hunks)src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/DigdirLogoLink/DigdirLogoLink.module.css(0 hunks)src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/DigdirLogoLink/DigdirLogoLink.tsx(2 hunks)src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/StudioPageHeaderLeft.tsx(1 hunks)src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderPopoverTrigger/StudioPageHeaderPopoverTrigger.tsx(1 hunks)src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderProfileMenu/StudioPageHeaderProfileMenu.test.tsx(4 hunks)src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderProfileMenu/StudioPageHeaderProfileMenu.tsx(4 hunks)src/Designer/frontend/packages/shared/src/components/GiteaHeader/ThreeDotsMenu/ThreeDotsMenu.tsx(3 hunks)src/Designer/frontend/packages/shared/src/components/GiteaHeader/VersionControlButtons/components/FetchChangesPopover/FetchChangesPopover.tsx(2 hunks)src/Designer/frontend/packages/shared/src/components/GiteaHeader/VersionControlButtons/components/ShareChangesPopover/ShareChangesPopover.tsx(2 hunks)src/Designer/frontend/resourceadm/components/ResourceAdmHeader/ResourceAdmHeader.tsx(1 hunks)src/Designer/frontend/studio-root/pages/PageLayout/PageLayout.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/DigdirLogoLink/DigdirLogoLink.module.css
🧰 Additional context used
🧠 Learnings (31)
📓 Common learnings
Learnt from: mgunnerud
Repo: Altinn/altinn-studio PR: 16187
File: frontend/resourceadm/components/ResourcePageInputs/ResourceSwitchInput.tsx:3-3
Timestamp: 2025-08-25T13:55:27.042Z
Learning: In the Altinn Studio codebase, when migrating from studio/components-legacy to studio/components, PRs should focus only on components that have available replacements in the new package. Components without new implementations should remain in the legacy package until replacements are available, supporting an incremental migration approach.
Learnt from: framitdavid
Repo: Altinn/altinn-studio PR: 16372
File: src/Designer/frontend/libs/studio-components/src/components/index.ts:34-34
Timestamp: 2025-09-23T08:53:19.508Z
Learning: In the Altinn Studio codebase, when moving components from studio-components-legacy to studio-components, the team prefers to handle the component migration and remaining import updates in separate PRs to maintain focused, atomic changes.
Learnt from: ErlingHauan
Repo: Altinn/altinn-studio PR: 15977
File: frontend/libs/studio-components-legacy/src/components/StudioCard/index.tsx:2-7
Timestamp: 2025-08-06T12:36:57.397Z
Learning: When a developer copies a component from `studio-components-legacy` to `studio-components` in the Altinn Studio repository and has not added a deprecation comment for the component in `studio-components-legacy`, suggest adding the deprecation comment in the PR review.
Learnt from: ErlingHauan
Repo: Altinn/altinn-studio PR: 15977
File: frontend/libs/studio-components-legacy/src/components/StudioCard/index.tsx:2-7
Timestamp: 2025-08-06T12:37:01.381Z
Learning: When reviewing PRs in the Altinn Studio repository where a developer copies a component from `studio-components-legacy` to `studio-components`, suggest adding a `deprecated` JSDoc comment to the component in `studio-components-legacy` if one hasn't been added. The deprecation comment should recommend using the component from `studio/components` instead.
Learnt from: TomasEng
Repo: Altinn/altinn-studio PR: 0
File: :0-0
Timestamp: 2025-09-10T12:02:06.348Z
Learning: In the Altinn Studio repository, the team convention is to remove irrelevant checkboxes from the PR template description rather than leaving them unmarked. This makes it clear that the author has intentionally considered each item and removed non-applicable ones, helping to avoid merging PRs with incomplete checklists.
Learnt from: mirkoSekulic
Repo: Altinn/altinn-studio PR: 16095
File: src/App/app-template-dotnet/src/App/models/model.cs:10-29
Timestamp: 2025-08-15T05:53:32.529Z
Learning: When moving app templates in Altinn Studio, mirkoSekulic prefers to keep the PR scope strictly limited to the move operation itself, with all content changes (including code quality improvements, naming convention fixes, and attribute cleanup) deferred to separate PRs for better maintainability and atomic changes.
Learnt from: lassopicasso
Repo: Altinn/altinn-studio PR: 14575
File: frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/OverrideFields/Summary2OverrideDisplayType.tsx:47-58
Timestamp: 2025-02-07T09:50:33.290Z
Learning: Avoid suggesting StudioCombobox component in future PRs for the Altinn Studio repository. A new replacement component will be introduced later.
Learnt from: ErlingHauan
Repo: Altinn/altinn-studio PR: 16123
File: frontend/libs/studio-components/src/types/OverridableComponentProps.ts:3-6
Timestamp: 2025-08-15T08:21:51.564Z
Learning: ErlingHauan prefers to keep PRs that move types from studio-components-legacy to studio-components focused strictly on the move operation, deferring type implementation changes or improvements to separate PRs for better maintainability and atomic changes.
Learnt from: mirkoSekulic
Repo: Altinn/altinn-studio PR: 16191
File: .dockerignore:3-3
Timestamp: 2025-08-26T12:35:44.069Z
Learning: In the Altinn Studio repository, mirkoSekulic is implementing a phased directory restructuring approach where backend and testdata are moved first, followed by separate moves for readme, frontend, and development directories into the Designer directory. This ensures atomic changes and prevents path reference issues during the transition.
Learnt from: ErlingHauan
Repo: Altinn/altinn-studio PR: 16081
File: frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/OptionListSelector/OptionListSelector.tsx:108-115
Timestamp: 2025-08-12T13:45:39.680Z
Learning: The StudioButton component from studio/components-legacy defaults to type="button", so explicit type attributes are not needed to prevent form submission behavior.
Learnt from: ErlingHauan
Repo: Altinn/altinn-studio PR: 15981
File: frontend/libs/studio-components/src/components/StudioLabelAsParagraph/StudioLabelAsParagraph.tsx:10-10
Timestamp: 2025-08-07T13:08:11.913Z
Learning: In the Altinn Studio codebase, when using components with the `asChild` prop pattern (like from digdir/designsystemet-react), the ref should be placed on the child DOM element rather than forwarded to the parent component. This pattern was established in PR #15998 where Card asChild was used with StudioFieldset, and the ref was passed to the StudioFieldset (child) not the Card (parent). This approach provides correct TypeScript typing automatically since the ref points directly to the actual DOM element being rendered.
Learnt from: framitdavid
Repo: Altinn/altinn-studio PR: 14494
File: frontend/app-development/features/appPublish/components/UndeployConsequenceDialog/UndeployConsequenceDialog.tsx:21-27
Timestamp: 2025-01-23T14:49:32.407Z
Learning: The StudioModal component from studio/components already includes built-in support for dialog close handling, keyboard interaction (Esc key), and focus trap for accessibility.
Learnt from: TomasEng
Repo: Altinn/altinn-studio PR: 0
File: :0-0
Timestamp: 2025-09-26T12:03:51.850Z
Learning: In PR #16443, TomasEng clarified that the ExpressionTexts type in studio/components does not require additional keys like dataModel, resource, or missingDataModelLabel that were suggested in a review comment. TypeScript compilation would catch any missing required properties, confirming the migration is correctly implemented.
📚 Learning: 2025-08-25T13:55:27.042Z
Learnt from: mgunnerud
Repo: Altinn/altinn-studio PR: 16187
File: frontend/resourceadm/components/ResourcePageInputs/ResourceSwitchInput.tsx:3-3
Timestamp: 2025-08-25T13:55:27.042Z
Learning: In the Altinn Studio codebase, when migrating from studio/components-legacy to studio/components, PRs should focus only on components that have available replacements in the new package. Components without new implementations should remain in the legacy package until replacements are available, supporting an incremental migration approach.
Applied to files:
src/Designer/frontend/dashboard/utils/headerUtils/headerUtils.tssrc/Designer/frontend/studio-root/pages/PageLayout/PageLayout.tsxsrc/Designer/frontend/admin/layout/PageHeader.tsxsrc/Designer/frontend/app-development/contexts/PageHeaderContext/PageHeaderContext.tsxsrc/Designer/frontend/app-preview/src/views/LandingPage.tsxsrc/Designer/frontend/resourceadm/components/ResourceAdmHeader/ResourceAdmHeader.tsxsrc/Designer/frontend/app-development/layout/PageHeader/PageHeader.tsxsrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/StudioPageHeaderLeft.tsxsrc/Designer/frontend/app-preview/src/components/UserProfileMenu/UserProfileMenu.tsx
📚 Learning: 2025-10-06T17:51:23.307Z
Learnt from: JamalAlabdullah
Repo: Altinn/altinn-studio PR: 16518
File: src/Designer/frontend/libs/studio-components/src/components/StudioToggleableTextfieldSchema/StudioToggleableTextfieldSchema.stories.tsx:2-3
Timestamp: 2025-10-06T17:51:23.307Z
Learning: Altinn/altinn-studio: In Storybook stories (*.stories.tsx) under Designer/frontend libs, the project convention is to import types (Meta, StoryFn/StoryObj) from 'storybook/react-vite' rather than 'storybook/react'. Prefer 'storybook/react-vite' in future reviews for consistency.
Applied to files:
src/Designer/frontend/dashboard/utils/headerUtils/headerUtils.tssrc/Designer/frontend/studio-root/pages/PageLayout/PageLayout.tsxsrc/Designer/frontend/app-development/test/headerMocks.tssrc/Designer/frontend/dashboard/utils/headerUtils/headerUtils.test.tssrc/Designer/frontend/app-development/layout/PageHeader/SmallHeaderMenu/SmallHeaderMenu.tsxsrc/Designer/frontend/admin/layout/PageHeader.tsxsrc/Designer/frontend/app-preview/src/components/AppPreviewSubMenu/AppPreviewSubMenu.tsxsrc/Designer/frontend/packages/shared/src/components/GiteaHeader/VersionControlButtons/components/FetchChangesPopover/FetchChangesPopover.tsxsrc/Designer/frontend/app-development/contexts/PageHeaderContext/PageHeaderContext.tsxsrc/Designer/frontend/app-preview/src/views/LandingPage.tsxsrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/StudioPageHeaderLeft.tsxsrc/Designer/frontend/app-preview/src/components/UserProfileMenu/UserProfileMenu.tsxsrc/Designer/frontend/dashboard/types/NavigationMenuItem.tssrc/Designer/frontend/app-development/layout/PageHeader/SubHeader/PreviewButton/PreviewButton.tsxsrc/Designer/frontend/packages/shared/src/components/GiteaHeader/ThreeDotsMenu/ThreeDotsMenu.tsx
📚 Learning: 2025-09-24T07:36:20.665Z
Learnt from: CR
Repo: Altinn/altinn-studio PR: 0
File: src/App/frontend/CLAUDE.md:0-0
Timestamp: 2025-09-24T07:36:20.665Z
Learning: Applies to src/App/frontend/src/layout/*/{config.ts,Component.tsx,index.tsx,config.generated.ts} : Layout components must follow the standardized structure: include `config.ts`, `Component.tsx`, `index.tsx`, and generated `config.generated.ts` in each `src/layout/<Component>/` directory
Applied to files:
src/Designer/frontend/studio-root/pages/PageLayout/PageLayout.tsxsrc/Designer/frontend/app-development/layout/PageHeader/LargeNavigationMenu/LargeNavigationMenu.tsxsrc/Designer/frontend/app-development/layout/PageHeader/SmallHeaderMenu/SmallHeaderMenu.tsxsrc/Designer/frontend/admin/layout/PageHeader.tsxsrc/Designer/frontend/dashboard/pages/PageLayout/DashboardHeader/LargeNavigationMenu/LargeNavigationMenu.tsxsrc/Designer/frontend/app-preview/src/views/LandingPage.tsxsrc/Designer/frontend/app-preview/src/components/UserProfileMenu/UserProfileMenu.tsx
📚 Learning: 2025-11-03T08:16:33.782Z
Learnt from: JamalAlabdullah
Repo: Altinn/altinn-studio PR: 16865
File: src/Designer/frontend/app-preview/src/components/PreviewControlHeader/PreviewControlHeader.tsx:44-50
Timestamp: 2025-11-03T08:16:33.782Z
Learning: In PreviewControlHeader.tsx (app-preview package), JamalAlabdullah confirmed that the StudioSelect component for layout set selection is acceptable with an empty label prop (label={''}), indicating this is an intentional design decision for that specific component.
Applied to files:
src/Designer/frontend/studio-root/pages/PageLayout/PageLayout.tsxsrc/Designer/frontend/app-development/layout/PageHeader/SubHeader/SettingsPageButton/SettingsPageButton.tsxsrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderPopoverTrigger/StudioPageHeaderPopoverTrigger.tsxsrc/Designer/frontend/admin/layout/PageHeader.tsxsrc/Designer/frontend/app-preview/src/components/AppPreviewSubMenu/AppPreviewSubMenu.tsxsrc/Designer/frontend/app-preview/src/views/LandingPage.tsxsrc/Designer/frontend/app-development/layout/PageHeader/PageHeader.tsxsrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/StudioPageHeaderLeft.tsxsrc/Designer/frontend/app-preview/src/components/UserProfileMenu/UserProfileMenu.tsxsrc/Designer/frontend/app-development/layout/PageHeader/SubHeader/PreviewButton/PreviewButton.tsxsrc/Designer/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.tsx
📚 Learning: 2025-10-25T11:48:49.152Z
Learnt from: lassopicasso
Repo: Altinn/altinn-studio PR: 16740
File: src/Designer/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PageConfigPanel.tsx:63-71
Timestamp: 2025-10-25T11:48:49.152Z
Learning: In src/Designer/frontend/packages/ux-editor/src/components/Properties/PageConfigPanel/PageConfigPanel.tsx, the NameConfig component is intentionally rendered in two places: once in the mainConfig section and once inside the "Text" accordion section. This duplication is by design.
Applied to files:
src/Designer/frontend/studio-root/pages/PageLayout/PageLayout.tsxsrc/Designer/frontend/admin/layout/PageHeader.tsx
📚 Learning: 2025-08-12T06:09:55.275Z
Learnt from: TomasEng
Repo: Altinn/altinn-studio PR: 16064
File: frontend/libs/studio-components/src/components/StudioCheckboxGroup/StudioGetCheckboxProps.ts:1-1
Timestamp: 2025-08-12T06:09:55.275Z
Learning: In the Altinn Studio codebase, the preferred approach for eliminating dependencies on deep imports from digdir/designsystemet-react is to make the code completely independent of deep imports rather than using shared wrappers. This approach would eliminate the need for import path adjustments during future Design System package updates.
Applied to files:
src/Designer/frontend/studio-root/pages/PageLayout/PageLayout.tsxsrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/DigdirLogoLink/DigdirLogoLink.tsxsrc/Designer/frontend/admin/layout/PageHeader.tsxsrc/Designer/frontend/app-preview/src/views/LandingPage.tsxsrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/StudioPageHeaderLeft.tsxsrc/Designer/frontend/app-preview/src/components/UserProfileMenu/UserProfileMenu.tsx
📚 Learning: 2025-09-26T12:03:56.908Z
Learnt from: TomasEng
Repo: Altinn/altinn-studio PR: 0
File: :0-0
Timestamp: 2025-09-26T12:03:56.908Z
Learning: In the Altinn Studio codebase, when reviewing migration from studio/components-legacy to studio/components for the StudioExpression component, the ExpressionTexts type interface does not require additional keys like `dataModel`, `resource`, or `missingDataModelLabel`. TypeScript compilation will catch any missing required properties, so successful builds indicate proper type compliance.
Applied to files:
src/Designer/frontend/studio-root/pages/PageLayout/PageLayout.tsxsrc/Designer/frontend/app-development/test/headerMocks.tssrc/Designer/frontend/dashboard/utils/headerUtils/headerUtils.test.tssrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderPopoverTrigger/StudioPageHeaderPopoverTrigger.tsxsrc/Designer/frontend/app-development/layout/PageHeader/SmallHeaderMenu/SmallHeaderMenu.tsxsrc/Designer/frontend/app-development/contexts/PageHeaderContext/PageHeaderContext.tsxsrc/Designer/frontend/resourceadm/components/ResourceAdmHeader/ResourceAdmHeader.tsxsrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/StudioPageHeaderLeft.tsxsrc/Designer/frontend/app-preview/src/components/UserProfileMenu/UserProfileMenu.tsxsrc/Designer/frontend/dashboard/types/NavigationMenuItem.ts
📚 Learning: 2025-09-23T08:53:19.508Z
Learnt from: framitdavid
Repo: Altinn/altinn-studio PR: 16372
File: src/Designer/frontend/libs/studio-components/src/components/index.ts:34-34
Timestamp: 2025-09-23T08:53:19.508Z
Learning: In the Altinn Studio codebase, when moving components from studio-components-legacy to studio-components, the team prefers to handle the component migration and remaining import updates in separate PRs to maintain focused, atomic changes.
Applied to files:
src/Designer/frontend/studio-root/pages/PageLayout/PageLayout.tsxsrc/Designer/frontend/app-development/layout/PageHeader/SmallHeaderMenu/SmallHeaderMenu.tsxsrc/Designer/frontend/app-preview/src/views/LandingPage.tsxsrc/Designer/frontend/app-preview/src/components/UserProfileMenu/UserProfileMenu.tsx
📚 Learning: 2025-08-12T05:59:20.146Z
Learnt from: TomasEng
Repo: Altinn/altinn-studio PR: 16064
File: frontend/libs/studio-components/src/components/StudioCheckboxGroup/StudioGetCheckboxProps.ts:1-1
Timestamp: 2025-08-12T05:59:20.146Z
Learning: In the Altinn Studio codebase, deep exports from digdir/designsystemet-react should be avoided. The team prefers using shared wrappers for design system imports to prevent breakage from upstream internal path changes, but such refactoring should be done in separate PRs to maintain focused scope.
Applied to files:
src/Designer/frontend/studio-root/pages/PageLayout/PageLayout.tsxsrc/Designer/frontend/app-development/layout/PageHeader/LargeNavigationMenu/LargeNavigationMenu.tsxsrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/DigdirLogoLink/DigdirLogoLink.tsxsrc/Designer/frontend/admin/layout/PageHeader.tsxsrc/Designer/frontend/dashboard/pages/PageLayout/DashboardHeader/LargeNavigationMenu/LargeNavigationMenu.tsxsrc/Designer/frontend/app-preview/src/views/LandingPage.tsxsrc/Designer/frontend/app-development/layout/PageHeader/PageHeader.tsxsrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/StudioPageHeaderLeft.tsxsrc/Designer/frontend/app-preview/src/components/UserProfileMenu/UserProfileMenu.tsxsrc/Designer/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.tsxsrc/Designer/frontend/packages/shared/src/components/GiteaHeader/ThreeDotsMenu/ThreeDotsMenu.tsx
📚 Learning: 2025-09-24T07:36:20.665Z
Learnt from: CR
Repo: Altinn/altinn-studio PR: 0
File: src/App/frontend/CLAUDE.md:0-0
Timestamp: 2025-09-24T07:36:20.665Z
Learning: Applies to src/App/frontend/src/__mocks__/** : Mock external dependencies under `src/__mocks__/`
Applied to files:
src/Designer/frontend/app-development/test/headerMocks.ts
📚 Learning: 2025-09-26T12:03:51.850Z
Learnt from: TomasEng
Repo: Altinn/altinn-studio PR: 0
File: :0-0
Timestamp: 2025-09-26T12:03:51.850Z
Learning: In PR #16443, TomasEng clarified that the ExpressionTexts type in studio/components does not require additional keys like dataModel, resource, or missingDataModelLabel that were suggested in a review comment. TypeScript compilation would catch any missing required properties, confirming the migration is correctly implemented.
Applied to files:
src/Designer/frontend/app-development/test/headerMocks.tssrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderPopoverTrigger/StudioPageHeaderPopoverTrigger.tsxsrc/Designer/frontend/resourceadm/components/ResourceAdmHeader/ResourceAdmHeader.tsx
📚 Learning: 2025-10-28T20:54:18.494Z
Learnt from: JamalAlabdullah
Repo: Altinn/altinn-studio PR: 16787
File: src/Designer/frontend/packages/ux-editor-v3/src/components/toolbar/RuleModal.test.tsx:70-70
Timestamp: 2025-10-28T20:54:18.494Z
Learning: Test inconsistencies in the ux-editor-v3 package do not need to be fixed, as indicated by the maintainer for the file `src/Designer/frontend/packages/ux-editor-v3/src/components/toolbar/RuleModal.test.tsx`.
Applied to files:
src/Designer/frontend/dashboard/utils/headerUtils/headerUtils.test.tssrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderProfileMenu/StudioPageHeaderProfileMenu.test.tsxsrc/Designer/frontend/app-preview/src/components/UserProfileMenu/UserProfileMenu.test.tsx
📚 Learning: 2025-09-24T07:36:20.665Z
Learnt from: CR
Repo: Altinn/altinn-studio PR: 0
File: src/App/frontend/CLAUDE.md:0-0
Timestamp: 2025-09-24T07:36:20.665Z
Learning: Applies to src/App/frontend/src/**/*.test.{ts,tsx} : In tests that require form layout context, use `renderWithProviders` from `src/test/renderWithProviders.tsx`
Applied to files:
src/Designer/frontend/dashboard/utils/headerUtils/headerUtils.test.tssrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderProfileMenu/StudioPageHeaderProfileMenu.test.tsxsrc/Designer/frontend/app-preview/src/components/UserProfileMenu/UserProfileMenu.test.tsx
📚 Learning: 2025-10-26T21:09:38.402Z
Learnt from: JamalAlabdullah
Repo: Altinn/altinn-studio PR: 16742
File: src/Designer/frontend/packages/schema-editor/src/components/SchemaInspector/ItemDataComponent.module.css:23-25
Timestamp: 2025-10-26T21:09:38.402Z
Learning: In the Altinn Studio codebase, the design system is migrating from `--fds-*` prefixed CSS variables to `--ds-*` prefixed variables. The `--fds-*` prefix will be removed in the future, so usage of `--ds-*` variables (like `--ds-size-4`) alongside existing `--fds-*` variables (like `--fds-spacing-4`) in the same file is intentional during this transition period.
<!--
Applied to files:
src/Designer/frontend/app-preview/src/components/AppPreviewSubMenu/AppPreviewSubMenu.module.csssrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeader.module.csssrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderHeaderLink/StudioPageHeaderHeaderLink.module.csssrc/Designer/frontend/app-development/layout/App.csssrc/Designer/frontend/app-development/layout/PageHeader/LargeNavigationMenu/LargeNavigationMenu.module.css
📚 Learning: 2025-06-18T12:34:13.539Z
Learnt from: lassopicasso
Repo: Altinn/altinn-studio PR: 15495
File: frontend/packages/ux-editor/src/components/TasksTable/TasksTable.tsx:77-83
Timestamp: 2025-06-18T12:34:13.539Z
Learning: In the TasksTable component at frontend/packages/ux-editor/src/components/TasksTable/TasksTable.tsx, the preview link uses CSS-based disabling with the `.disabledPreviewLink` class, which includes `pointer-events: none`, `opacity: 0.5`, and `cursor: not-allowed` to properly disable interactions when tasks.length === 0.
Applied to files:
src/Designer/frontend/app-preview/src/components/AppPreviewSubMenu/AppPreviewSubMenu.module.csssrc/Designer/frontend/app-preview/src/components/AppPreviewSubMenu/AppPreviewSubMenu.tsxsrc/Designer/frontend/app-preview/src/views/LandingPage.tsxsrc/Designer/frontend/app-development/layout/PageHeader/SubHeader/PreviewButton/PreviewButton.tsx
📚 Learning: 2025-09-24T07:36:20.665Z
Learnt from: CR
Repo: Altinn/altinn-studio PR: 0
File: src/App/frontend/CLAUDE.md:0-0
Timestamp: 2025-09-24T07:36:20.665Z
Learning: Prefer Digdir Design System components when possible
Applied to files:
src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/DigdirLogoLink/DigdirLogoLink.tsx
📚 Learning: 2025-08-12T13:45:39.680Z
Learnt from: ErlingHauan
Repo: Altinn/altinn-studio PR: 16081
File: frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/OptionListSelector/OptionListSelector.tsx:108-115
Timestamp: 2025-08-12T13:45:39.680Z
Learning: The StudioButton component from studio/components-legacy defaults to type="button", so explicit type attributes are not needed to prevent form submission behavior.
Applied to files:
src/Designer/frontend/app-development/layout/PageHeader/SubHeader/SettingsPageButton/SettingsPageButton.tsxsrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderPopoverTrigger/StudioPageHeaderPopoverTrigger.tsxsrc/Designer/frontend/admin/layout/PageHeader.tsxsrc/Designer/frontend/app-preview/src/components/AppPreviewSubMenu/AppPreviewSubMenu.tsxsrc/Designer/frontend/resourceadm/components/ResourceAdmHeader/ResourceAdmHeader.tsxsrc/Designer/frontend/app-development/layout/PageHeader/SubHeader/PreviewButton/PreviewButton.tsx
📚 Learning: 2025-11-03T18:58:18.996Z
Learnt from: TomasEng
Repo: Altinn/altinn-studio PR: 16876
File: src/Designer/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListsPage/CodeListsPage.tsx:17-23
Timestamp: 2025-11-03T18:58:18.996Z
Learning: In src/Designer/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListsPage/CodeListsPage.tsx, the CodeListsPage component is intentionally an uncontrolled component where the codeLists prop only initializes state on mount and does not synchronize when the prop changes. This is because the createCodeListMap function generates random UUIDs for keys, making it impure. Re-calling it after the first render would reassign keys and significantly disrupt the UI (unmounting/remounting components). The component manages its own state for draft/editing purposes, and the prop is not expected to change to anything that doesn't correspond to the internal state.
Applied to files:
src/Designer/frontend/app-development/layout/PageHeader/SubHeader/SettingsPageButton/SettingsPageButton.tsxsrc/Designer/frontend/admin/layout/PageHeader.tsx
📚 Learning: 2025-01-13T12:44:45.751Z
Learnt from: Jondyr
Repo: Altinn/altinn-studio PR: 14379
File: frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2OverrideEntry.tsx:63-70
Timestamp: 2025-01-13T12:44:45.751Z
Learning: In the Altinn Studio codebase, when using StudioProperty.Button component, it's expected to pass `false` as the value prop when no meaningful value is available (e.g., when componentNameType is undefined). This is the intended behavior and should not be changed to handle undefined cases differently.
Applied to files:
src/Designer/frontend/app-development/layout/PageHeader/SubHeader/SettingsPageButton/SettingsPageButton.tsxsrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/StudioPageHeaderLeft.tsx
📚 Learning: 2025-09-30T21:12:14.088Z
Learnt from: JamalAlabdullah
Repo: Altinn/altinn-studio PR: 16474
File: src/Designer/frontend/libs/studio-components/src/components/StudioIconCard/StudioIconCard.tsx:38-47
Timestamp: 2025-09-30T21:12:14.088Z
Learning: In the StudioPopover component within studio-components (DS V1), the `size` prop is no longer used. Instead, size is controlled via the `data-size` attribute (e.g., `data-size='sm'`).
Applied to files:
src/Designer/frontend/app-development/layout/PageHeader/SubHeader/SettingsPageButton/SettingsPageButton.tsxsrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderPopoverTrigger/StudioPageHeaderPopoverTrigger.tsxsrc/Designer/frontend/packages/shared/src/components/GiteaHeader/VersionControlButtons/components/ShareChangesPopover/ShareChangesPopover.tsx
📚 Learning: 2025-10-29T07:11:59.228Z
Learnt from: JamalAlabdullah
Repo: Altinn/altinn-studio PR: 16787
File: src/Designer/frontend/packages/ux-editor/src/components/config/editModal/EditImage/LocalImage/PreviewImageSummary/DeleteOptionsModal/DeleteOptionsModal.tsx:18-30
Timestamp: 2025-10-29T07:11:59.228Z
Learning: The StudioDialog component from studio/components includes built-in support for dialog close handling, with a close button in the header and keyboard interaction (Esc key) for accessibility.
Applied to files:
src/Designer/frontend/app-development/layout/PageHeader/SubHeader/SettingsPageButton/SettingsPageButton.tsxsrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderProfileMenu/StudioPageHeaderProfileMenu.tsx
📚 Learning: 2025-06-04T06:37:16.617Z
Learnt from: mlqn
Repo: Altinn/altinn-studio PR: 15495
File: frontend/app-development/layout/VersionAlerts/OutdatedVersionAlertRemindChoiceDialog.tsx:0-0
Timestamp: 2025-06-04T06:37:16.617Z
Learning: In the OutdatedVersionAlertRemindChoiceDialog component in frontend/app-development/layout/VersionAlerts/OutdatedVersionAlertRemindChoiceDialog.tsx, the onOpen handler uses `setOpened(!opened)` to toggle the popover state. This is expected behavior where the trigger button serves as both an open and close control for the popover.
Applied to files:
src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderPopoverTrigger/StudioPageHeaderPopoverTrigger.tsxsrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderProfileMenu/StudioPageHeaderProfileMenu.tsxsrc/Designer/frontend/packages/shared/src/components/GiteaHeader/VersionControlButtons/components/FetchChangesPopover/FetchChangesPopover.tsxsrc/Designer/frontend/packages/shared/src/components/GiteaHeader/VersionControlButtons/components/ShareChangesPopover/ShareChangesPopover.tsxsrc/Designer/frontend/packages/shared/src/components/GiteaHeader/ThreeDotsMenu/ThreeDotsMenu.tsx
📚 Learning: 2025-03-12T14:19:41.785Z
Learnt from: Konrad-Simso
Repo: Altinn/altinn-studio PR: 14952
File: frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/OptionListEditor/ManualOptionsEditor/ManualOptionsEditor.test.tsx:57-57
Timestamp: 2025-03-12T14:19:41.785Z
Learning: TODO comments in the codebase mentioning "Todo: Replace 'close modal' with defaultDialogProps.closeButtonTitle" will be addressed when upgrading to Designsystemet v1, which is currently being worked on.
Applied to files:
src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderProfileMenu/StudioPageHeaderProfileMenu.tsx
📚 Learning: 2025-08-07T13:08:11.913Z
Learnt from: ErlingHauan
Repo: Altinn/altinn-studio PR: 15981
File: frontend/libs/studio-components/src/components/StudioLabelAsParagraph/StudioLabelAsParagraph.tsx:10-10
Timestamp: 2025-08-07T13:08:11.913Z
Learning: In the Altinn Studio codebase, when using components with the `asChild` prop pattern (like from digdir/designsystemet-react), the ref should be placed on the child DOM element rather than forwarded to the parent component. This pattern was established in PR #15998 where Card asChild was used with StudioFieldset, and the ref was passed to the StudioFieldset (child) not the Card (parent). This approach provides correct TypeScript typing automatically since the ref points directly to the actual DOM element being rendered.
Applied to files:
src/Designer/frontend/admin/layout/PageHeader.tsxsrc/Designer/frontend/app-preview/src/components/AppPreviewSubMenu/AppPreviewSubMenu.tsxsrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/StudioPageHeaderLeft.tsxsrc/Designer/frontend/app-development/layout/PageHeader/SubHeader/PreviewButton/PreviewButton.tsx
📚 Learning: 2025-07-08T12:20:53.578Z
Learnt from: TomasEng
Repo: Altinn/altinn-studio PR: 15855
File: frontend/libs/studio-components-legacy/src/style/studio-variables.css:2-17
Timestamp: 2025-07-08T12:20:53.578Z
Learning: In CSS variable renaming refactoring PRs for the Altinn Studio legacy component library, the scope typically includes only exposed/exported variables (defined in studio-variables.css) that could cause naming conflicts between libraries. Internal variables used only within individual components don't need to be renamed since they don't create cross-library conflicts.
Applied to files:
src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeader.module.csssrc/Designer/frontend/app-development/layout/App.css
📚 Learning: 2025-08-06T12:37:01.381Z
Learnt from: ErlingHauan
Repo: Altinn/altinn-studio PR: 15977
File: frontend/libs/studio-components-legacy/src/components/StudioCard/index.tsx:2-7
Timestamp: 2025-08-06T12:37:01.381Z
Learning: When reviewing PRs in the Altinn Studio repository where a developer copies a component from `studio-components-legacy` to `studio-components`, suggest adding a `deprecated` JSDoc comment to the component in `studio-components-legacy` if one hasn't been added. The deprecation comment should recommend using the component from `studio/components` instead.
Applied to files:
src/Designer/frontend/app-preview/src/views/LandingPage.tsxsrc/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/StudioPageHeaderLeft.tsx
📚 Learning: 2025-08-06T12:36:57.397Z
Learnt from: ErlingHauan
Repo: Altinn/altinn-studio PR: 15977
File: frontend/libs/studio-components-legacy/src/components/StudioCard/index.tsx:2-7
Timestamp: 2025-08-06T12:36:57.397Z
Learning: When a developer copies a component from `studio-components-legacy` to `studio-components` in the Altinn Studio repository and has not added a deprecation comment for the component in `studio-components-legacy`, suggest adding the deprecation comment in the PR review.
Applied to files:
src/Designer/frontend/app-preview/src/views/LandingPage.tsx
📚 Learning: 2025-04-30T12:52:44.977Z
Learnt from: lassopicasso
Repo: Altinn/altinn-studio PR: 15313
File: frontend/packages/ux-editor/src/components/TasksTable/TasksTableBody.tsx:9-9
Timestamp: 2025-04-30T12:52:44.977Z
Learning: lassopicasso prefers to keep task-related utility functions (getTaskIcon, TaskType, isTaskReceipt) in the SettingsUtils.tsx file for now, even though they're used in multiple components including TasksTableBody.tsx. This is an intentional organizational decision.
Applied to files:
src/Designer/frontend/app-preview/src/views/LandingPage.tsx
📚 Learning: 2025-06-16T12:41:06.726Z
Learnt from: TomasEng
Repo: Altinn/altinn-studio PR: 15659
File: frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/CodeListDialog/CodeListDialog.test.tsx:145-151
Timestamp: 2025-06-16T12:41:06.726Z
Learning: In the Altinn Studio codebase, TomasEng has confirmed that using `expect(screen.getByRole('dialog')).toBeVisible` directly with `waitFor` is acceptable and equivalent to wrapping it in a function callback. This pattern is intentionally used in their testing setup.
Applied to files:
src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderProfileMenu/StudioPageHeaderProfileMenu.test.tsx
📚 Learning: 2025-08-08T13:24:30.117Z
Learnt from: nkylstad
Repo: Altinn/altinn-studio PR: 0
File: :0-0
Timestamp: 2025-08-08T13:24:30.117Z
Learning: In Altinn/altinn-studio PR reviews, when unit tests need React Query/TanStack Query data, prefer seeding with QueryClient.setQueryData over rendering/mocking use…Query hooks and waiting for isSuccess. Flag patterns like renderHookWithMockStore(() => use…Query(...)) and waitFor(() => expect(result.current.isSuccess).toBe(true)) and recommend the simpler setQueryData approach. Cite the internal Confluence guideline on component tests and the best-practice example in useAddItemToLayoutMutation.test.ts (lines updated 08.08.2025).
Applied to files:
src/Designer/frontend/app-preview/src/components/UserProfileMenu/UserProfileMenu.test.tsx
🧬 Code graph analysis (5)
src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/DigdirLogoLink/DigdirLogoLink.tsx (1)
src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/DigdirLogoLink/DigdirLogo.tsx (1)
DigdirLogo(3-13)
src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderProfileMenu/StudioPageHeaderProfileMenu.tsx (3)
src/Designer/frontend/libs/studio-components/src/components/StudioDropdown/StudioDropdown.tsx (1)
StudioDropdown(20-59)src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderProfileMenu/types/StudioProfileMenuGroup.ts (1)
StudioProfileMenuGroup(3-5)src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderProfileMenu/types/StudioProfileMenuItem.ts (1)
StudioProfileMenuItem(1-6)
src/Designer/frontend/app-development/layout/PageHeader/PageHeader.tsx (1)
src/Designer/frontend/app-development/contexts/PageHeaderContext/PageHeaderContext.tsx (1)
usePageHeaderContext(72-78)
src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/StudioPageHeaderLeft.tsx (1)
src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/DigdirLogoLink/DigdirLogoLink.tsx (1)
DigdirLogoLink(12-26)
src/Designer/frontend/packages/shared/src/components/GiteaHeader/ThreeDotsMenu/ThreeDotsMenu.tsx (1)
src/Designer/frontend/packages/shared/src/components/GiteaHeader/ThreeDotsMenu/ClonePopoverContent/ClonePopoverContent.tsx (1)
ClonePopoverContent(14-68)
🔇 Additional comments (45)
src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeader.module.css (1)
1-1: Whitespace normalization only.This is a pure formatting change (non-breaking space to standard space in the selector). No semantic or behavioral impact.
src/Designer/frontend/packages/shared/src/components/GiteaHeader/VersionControlButtons/components/ShareChangesPopover/ShareChangesPopover.tsx (2)
2-3: LGTM! Import migration correctly scoped.The import changes appropriately migrate only
StudioPageHeaderfrom the legacy package while keepingStudioPopoveranduseMediaQueryin@studio/components-legacy. This follows the team's preference for atomic, focused migrations. Based on learnings.
64-75: Verify visual consistency after prop changes.The prop updates reflect the new
StudioPageHeader.PopoverTriggerAPI:color='light'→data-color='neutral'andvariant='regular'→variant='tertiary'. Please verify that the button's visual appearance remains consistent with the previous implementation.src/Designer/frontend/app-development/layout/App.css (1)
21-23: Remove this review comment; the CSS changes align with intentional codebase patterns.The verification shows this is not a breaking change but an intentional pattern consistent throughout the codebase. Multiple other App.css files (dashboard, studio-root, resourceadm) follow the identical pattern of
a { text-decoration: none; }without explicit color—indicating that link colors are managed by the component library or inherited from parent context. The presence of FDS design system tokens in the codebase confirms an active migration away from studio-* tokens, making this change deliberate and aligned with the component migration goals. The unused--studio-link-colorvariable in this file is benign and remains defined in:rootfor use by other files like admin/layout/App.css.Likely an incorrect or invalid review comment.
src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderProfileMenu/StudioPageHeaderProfileMenu.test.tsx (1)
114-114: LGTM! Test selectors updated to match new ARIA roles.The test selector changes from
'link'to'menuitem'correctly reflect the implementation changes where links are now explicitly marked withrole='menuitem', which is semantically appropriate for menu items within a dropdown.Also applies to: 127-127, 182-182, 196-196
src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderProfileMenu/StudioPageHeaderProfileMenu.tsx (2)
4-4: LGTM! Context-driven state management is cleaner.The migration to
useStudioDropdownContext()for managing dropdown state is a good improvement over callback-based prop drilling, aligning with the broader component architecture shown in StudioDropdown.tsx.Also applies to: 40-40, 44-48
132-132: LGTM! Explicit ARIA role improves accessibility.Adding
role='menuitem'to the anchor element is semantically correct for menu items within a dropdown and aligns with ARIA best practices.src/Designer/frontend/app-preview/src/components/UserProfileMenu/UserProfileMenu.test.tsx (1)
52-55: LGTM!The test assertions correctly verify the conditional rendering of trigger button text based on screen size.
Also applies to: 64-67
src/Designer/frontend/studio-root/pages/PageLayout/PageLayout.tsx (1)
3-3: LGTM!Import path successfully migrated from legacy to public components package.
src/Designer/frontend/app-development/contexts/PageHeaderContext/PageHeaderContext.tsx (1)
4-8: LGTM!Type imports successfully migrated from legacy to public components package with no changes to type signatures.
src/Designer/frontend/app-development/layout/PageHeader/SubHeader/SettingsPageButton/SettingsPageButton.tsx (2)
2-3: LGTM!Import paths correctly updated: StudioPageHeader moved to public components while useMediaQuery remains in legacy (awaiting its own migration).
45-48: LGTM!Props correctly updated to the new API:
color='light'replaced withdata-color='neutral'and variant explicitly set to'tertiary'. This aligns with the prop surface simplification in the migrated component.src/Designer/frontend/dashboard/types/NavigationMenuItem.ts (1)
1-1: LGTM!Type import successfully migrated from legacy to public components package.
src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderPopoverTrigger/StudioPageHeaderPopoverTrigger.tsx (2)
6-6: LGTM!Props interface simplified by removing
colorandvariant, now purely extendingStudioPopoverTriggerProps. This is consistent with the prop surface simplification seen throughout the PR.
9-13: LGTM!Component correctly forwards all props without providing defaults for removed
colorandvariantprops. Styling control is now delegated to consumers.src/Designer/frontend/packages/shared/src/components/GiteaHeader/ThreeDotsMenu/ThreeDotsMenu.tsx (3)
1-7: LGTM!Imports correctly updated: removed
useState(no longer needed with TriggerContext pattern) and migrated to public components package.
21-27: LGTM!Successfully refactored from callback-based popover to TriggerContext pattern, eliminating manual state management. Props correctly updated to
data-color='neutral'andvariant='tertiary'.
32-40: Verify nested TriggerContext behavior.The nested
StudioPopover.TriggerContextstructure (clone popover inside the main three-dots menu popover) appears correct, but ensure that:
- Both popovers can be opened/closed independently
- Clicking the clone trigger properly opens the nested popover
- Closing the outer popover also closes the inner one (if that's the intended behavior)
Consider adding a manual test case to verify the nested popover interaction works as expected.
src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderHeaderLink/StudioPageHeaderHeaderLink.module.css (1)
4-5: The color token usage follows an established codebase pattern.While
--ds-color-neutral-background-defaultis semantically questionable for text color, this exact pattern already exists insrc/Designer/frontend/app-preview/src/components/AppPreviewSubMenu/AppPreviewSubMenu.module.css(lines 9 and 14, where it's applied to.linkand.iconcolor properties). The PR is consistent with the codebase convention, though the broader token naming may warrant a separate design system review.src/Designer/frontend/dashboard/utils/headerUtils/headerUtils.ts (1)
7-7: LGTM! Clean import migration.The import source change from
@studio/components-legacyto@studio/componentsaligns with the broader migration effort. No behavioral changes.src/Designer/frontend/dashboard/utils/headerUtils/headerUtils.test.ts (1)
10-10: LGTM! Test import updated consistently.The test import follows the same migration pattern as the source file. No test logic changes.
src/Designer/frontend/app-development/test/headerMocks.ts (1)
6-6: LGTM! Mock imports updated consistently.The mock file follows the same migration pattern. Mock data structure remains unchanged.
src/Designer/frontend/packages/shared/src/components/GiteaHeader/VersionControlButtons/components/FetchChangesPopover/FetchChangesPopover.tsx (2)
2-3: LGTM! Import split reflects incremental migration.
StudioPageHeadermoved to@studio/componentswhile other components remain in legacy package, consistent with the incremental migration approach.Based on learnings
65-71: LGTM! Prop API updated for new component.The prop changes (
color='light'→data-color='neutral',variant='regular'→variant='tertiary') reflect the updated API surface of the migrated component.src/Designer/frontend/app-development/layout/PageHeader/SmallHeaderMenu/SmallHeaderMenu.tsx (1)
4-4: LGTM! Type import migrated cleanly.The
StudioProfileMenuItemtype import updated to@studio/components. No behavioral changes.src/Designer/frontend/app-preview/src/components/AppPreviewSubMenu/AppPreviewSubMenu.tsx (2)
4-5: LGTM! Incremental migration with component replacement.
useMediaQueryremains in legacy package whileStudioLinkis imported from the public package, aligning with the incremental approach.Based on learnings
17-24: LGTM! HeaderButton replaced with StudioLink.The button component has been replaced with a link component. The
className={classes.link}should provide equivalent styling. Functionality preserved with href and aria-label maintained.src/Designer/frontend/dashboard/pages/PageLayout/DashboardHeader/LargeNavigationMenu/LargeNavigationMenu.tsx (1)
5-5: LGTM! Import migrated to public package.
StudioPageHeaderimport moved to@studio/components. No other visible changes in the component logic.src/Designer/frontend/resourceadm/components/ResourceAdmHeader/ResourceAdmHeader.tsx (1)
5-9: LGTM! Consolidated import from public package.All StudioPageHeader-related types now imported from
@studio/components. The migration consolidates imports and aligns with the broader refactor.src/Designer/frontend/app-development/layout/PageHeader/LargeNavigationMenu/LargeNavigationMenu.module.css (1)
14-15: LGTM! Design token migration is correct.The update from
--fds-semantic-surface-neutral-defaultto--ds-color-text-defaultaligns with the design system's migration to the new token naming convention. The removal of explicit spacing/sizing values delegates styling to the component defaults, which is appropriate for this refactor.src/Designer/frontend/app-preview/src/components/AppPreviewSubMenu/AppPreviewSubMenu.module.css (1)
8-15: LGTM! New styling classes support the component migration.The added
.linkclass and updated.iconclass properly use the new design system tokens (--ds-color-neutral-background-default) to ensure consistent styling with the migrated StudioLink component.src/Designer/frontend/app-preview/src/components/UserProfileMenu/UserProfileMenu.tsx (2)
6-11: LGTM! Import migration follows the incremental approach.The migration correctly moves
StudioPageHeaderand related types to@studio/componentswhile keepingStudioAvataranduseMediaQueryin the legacy package until replacements are available. This aligns with the team's incremental migration strategy.Based on learnings
43-53: LGTM! API simplification is correctly applied.The removal of
ariaLabelTriggerButton,color, andvariantprops fromStudioPageHeader.ProfileMenuis consistent with the API simplification across the codebase. The component retains all essential functionality throughtriggerButtonText,profileImage, andprofileMenuGroups.src/Designer/frontend/admin/layout/PageHeader.tsx (2)
43-51: Verify the navigation behavior change.The replacement of
NavLinkwithStudioLinkButtonchanges the navigation from React Router's client-side routing to a standard anchor link, which will trigger a full page reload when clicked. Please confirm this behavioral change is intentional for the "About" link.
3-5: LGTM! Component migration is correctly implemented.The import consolidation and removal of
ariaLabelTriggerButton,color, andvariantprops fromProfileMenualign with the API simplification across the codebase. All essential functionality is preserved.Also applies to: 89-99
src/Designer/frontend/app-development/layout/PageHeader/LargeNavigationMenu/LargeNavigationMenu.tsx (2)
5-5: LGTM! Import migration is correctly implemented.The migration of
StudioPageHeaderfrom the legacy package to the public@studio/componentspackage is correct and consistent with the broader migration effort.
34-48: LGTM! API simplification using data attributes.The removal of explicit
colorandvariantprops in favor of thedata-color='neutral'attribute on the underlyingNavLinkis a cleaner approach that delegates styling to CSS and data attributes. The active state logic and navigation behavior are correctly preserved.src/Designer/frontend/app-preview/src/views/LandingPage.tsx (1)
11-20: LGTM! Import migration is correctly applied.The migration of
StudioPageHeaderto the public@studio/componentspackage while keepinguseMediaQueryin the legacy package follows the incremental migration strategy. The component usage remains unchanged, ensuring no behavioral impact.src/Designer/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.tsx (2)
4-5: LGTM! Import consolidation is correctly implemented.The migration of
StudioAvatarandStudioPageHeaderto the public@studio/componentspackage while keepinguseMediaQueryin the legacy package follows the incremental migration approach.
71-81: LGTM! API simplification is consistently applied.The removal of
ariaLabelTriggerButton,color, andvariantprops fromStudioPageHeader.ProfileMenuis consistent with the broader API simplification effort. The component retains all essential functionality, and the small-screen handling withSmallHeaderMenuis preserved.src/Designer/frontend/app-development/layout/PageHeader/PageHeader.tsx (2)
3-4: LGTM! Import migration is correctly implemented.The migration of
StudioPageHeaderandStudioAvatarto the public@studio/componentspackage while keepinguseMediaQueryin the legacy package follows the incremental migration approach.
68-87: LGTM! Context and API updates are correctly applied.The removal of
variantfrom the context destructuring and the removal ofariaLabelTriggerButton,color, andvariantprops fromStudioPageHeader.ProfileMenuare consistent with the API simplification. All essential functionality is preserved, including the small-screen handling.src/Designer/frontend/app-development/layout/PageHeader/SubHeader/PreviewButton/PreviewButton.tsx (2)
5-6: LGTM! Appropriate incremental migration.The migration correctly imports components from
@studio/componentswhile keepinguseMediaQueryin the legacy package, following the incremental migration pattern.Based on learnings.
26-30: The review comment is incorrect. The aria-label does reach the interactive element.The HeaderLink component destructures
className,renderLink,isBeta, and...restfrom its props, then creates a props object with{ className, ...rest }. Sincearia-labelis not explicitly destructured, it's captured in...rest. This props object (containing aria-label) is passed to the renderLink callback, which then spreads it into StudioLinkButton on line 30 via{...props}. The aria-label attribute correctly propagates through this props-forwarding pattern to the interactive element.Likely an incorrect or invalid review comment.
src/Designer/frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/DigdirLogoLink/DigdirLogoLink.tsx (1)
15-17: LGTM! Standard home link pattern.Wrapping the logo in a StudioLink with
href='/'is a standard UX pattern that makes the logo clickable and navigates to the home page. The existing accessibility features (role and title on the SVG) are preserved.
...dio-components/src/components/StudioPageHeader/StudioPageHeaderLeft/StudioPageHeaderLeft.tsx
Outdated
Show resolved
Hide resolved
…er-with-the-new-component-and-remove-the-old-one
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
JamalAlabdullah
changed the title
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #16937 +/- ##
==========================================
+ Coverage 96.19% 96.20% +0.01%
==========================================
Files 2447 2391 -56
Lines 30790 30458 -332
Branches 3544 3510 -34
==========================================
- Hits 29618 29302 -316
+ Misses 864 851 -13
+ Partials 308 305 -3 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
…er-with-the-new-component-and-remove-the-old-one
JamalAlabdullah
added
the
squad/utforming
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Verification
Summary by CodeRabbit
Release Notes
New Features
Style
Bug Fixes