Skip to content

ENG-3461: migrate admin-ui to RouterLink and remove legacyBehavior #7942

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gilluminate merged 7 commits into from
Apr 16, 2026
Merged

ENG-3461: migrate admin-ui to RouterLink and remove legacyBehavior #7942

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7e1cab9
ENG-3461: migrate admin-ui to RouterLink and remove legacyBehavior
gilluminate Apr 15, 2026
96708a3
ENG-3461: add changelog entry for RouterLink migration
gilluminate Apr 15, 2026
351ef88
Update aggregate-results.cy.ts
gilluminate Apr 15, 2026
516b5fa
ENG-3461: migrate remaining passHref usages to RouterLink
gilluminate Apr 15, 2026
141547b
fix jest test
gilluminate Apr 15, 2026
9fc6d67
Address PR review feedback on RouterLink
gilluminate Apr 16, 2026
6ab4f74
Migrate 4 new passHref sites from rebase to RouterLink
gilluminate Apr 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions changelog/7942-eng-3461-router-link-legacy-behavior.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
type: Developer Experience
description: Replaced deprecated `next/link` `legacyBehavior`/`passHref` usage in the Admin UI with a shared `RouterLink` component for internal navigation.
pr: 7942
labels: []
24 changes: 14 additions & 10 deletions clients/admin-ui/cypress/e2e/action-center/aggregate-results.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,16 +81,20 @@ describe("Action center", () => {
// TODO: [HJ-337] uncomment when Add button is implemented
// cy.getByTestId(`add-button-${webMonitorKey}`).should("exist");
// Review button
cy.getByTestId(`review-button-${webMonitorKey}`).should(
"have.attr",
"href",
`${ACTION_CENTER_ROUTE}/${APIMonitorType.WEBSITE}/${webMonitorKey}`,
);
cy.getByTestId(`review-button-${integrationMonitorKey}`).should(
"have.attr",
"href",
`${ACTION_CENTER_ROUTE}/${APIMonitorType.DATASTORE}/${integrationMonitorKey}`,
);
cy.getByTestId(`review-button-${webMonitorKey}`)
.closest("a")
.should(
"have.attr",
"href",
`${ACTION_CENTER_ROUTE}/${APIMonitorType.WEBSITE}/${webMonitorKey}`,
);
cy.getByTestId(`review-button-${integrationMonitorKey}`)
.closest("a")
.should(
"have.attr",
"href",
`${ACTION_CENTER_ROUTE}/${APIMonitorType.DATASTORE}/${integrationMonitorKey}`,
);
});
it.skip("Should paginate results", () => {
// TODO: mock pagination and also test skeleton loading state
Expand Down
6 changes: 3 additions & 3 deletions clients/admin-ui/src/features/access-policies/ControlForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Button, Flex, Form, Input } from "fidesui";
import NextLink from "next/link";
import { useMemo } from "react";

import { RouterLink } from "~/features/common/nav/RouterLink";
import { CONTROLS_ROUTE } from "~/features/common/nav/routes";

import type { Control } from "./access-policies.slice";
Expand Down Expand Up @@ -59,9 +59,9 @@ const ControlForm = ({
<Button type="primary" htmlType="submit" loading={isSubmitting}>
{isEditing ? "Save" : "Create control"}
</Button>
<NextLink href={CONTROLS_ROUTE} passHref>
<RouterLink href={CONTROLS_ROUTE}>
<Button>Cancel</Button>
</NextLink>
</RouterLink>
</Flex>
</Form>
);
Expand Down
26 changes: 8 additions & 18 deletions clients/admin-ui/src/features/access-policies/PolicyCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,16 @@ import {
Tag,
Text,
Tooltip,
Typography,
} from "fidesui";
import NextLink from "next/link";

import { RouterLink } from "~/features/common/nav/RouterLink";
import { ACCESS_POLICY_EDIT_ROUTE } from "~/features/common/nav/routes";

import DecisionTag from "./DecisionTag";
import styles from "./PolicyCard.module.scss";
import { AccessPolicyListItem } from "./types";
import { formatRelativeTime } from "./utils";

const { Link: LinkText } = Typography;

interface PolicyCardProps {
policy: AccessPolicyListItem;
onToggle: (policy: AccessPolicyListItem) => void;
Expand All @@ -34,25 +31,18 @@ const PolicyCard = ({ policy, onToggle }: PolicyCardProps) => {
{/* Header */}
<Flex justify="space-between" align="flex-start">
<Flex gap="small" align="center" className="min-w-0">
{/* legacyBehavior is required: Typography.Link renders <a>, and
Next.js 13 Link also renders <a> — without it we'd get nested anchors */}
<NextLink
<RouterLink
href={{
pathname: ACCESS_POLICY_EDIT_ROUTE,
query: { id: policy.id },
}}
passHref
legacyBehavior
strong
ellipsis
variant="primary"
className={styles.policyName}
>
<LinkText
strong
ellipsis
variant="primary"
className={styles.policyName}
>
{policy.name}
</LinkText>
</NextLink>
{policy.name}
</RouterLink>
</Flex>
<Flex gap="small" align="center" className="shrink-0">
{policy.is_recommendation && (
Expand Down
Loading
Loading