From 90f4f984159602f4dc20622e766e123ca3fdcb55 Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Mon, 18 Mar 2024 15:09:23 +0100 Subject: [PATCH] frontend: upgrade @tanstack/react-router --- .github/dependabot.yml | 4 ++ frontend/package-lock.json | 56 +++++++++++++------ frontend/package.json | 6 +- frontend/src/components/ButtonLink.tsx | 27 ++++----- frontend/src/components/Link.tsx | 24 +++----- .../components/SessionCard/SessionCard.tsx | 39 ++++++++----- .../BrowserSessionsOverview.tsx | 2 +- .../BrowserSessionsOverview.test.tsx.snap | 4 +- .../__snapshots__/CompatSession.test.tsx.snap | 3 +- .../__snapshots__/OAuth2Session.test.tsx.snap | 6 +- frontend/src/routes/__root.tsx | 11 ++-- frontend/src/routes/_account.sessions.$id.tsx | 2 +- .../src/routes/_account.sessions.browsers.tsx | 4 +- .../src/routes/_account.sessions.index.tsx | 4 +- frontend/src/routes/devices.$id.tsx | 4 +- 15 files changed, 112 insertions(+), 84 deletions(-) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index f667b185d..29ac25e8a 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -89,6 +89,10 @@ updates: graphql-codegen: patterns: - "@graphql-codegen/*" + tanstack-router: + patterns: + - "@tanstack/react-router" + - "@tanstack/router-*" types: patterns: - "@types/*" diff --git a/frontend/package-lock.json b/frontend/package-lock.json index e0e9a135d..0d943be6d 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -13,7 +13,7 @@ "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-form": "^0.0.3", - "@tanstack/react-router": "^1.16.6", + "@tanstack/react-router": "^1.20.1", "@types/ua-parser-js": "^0.7.39", "@urql/core": "^4.2.3", "@urql/devtools": "^2.0.3", @@ -48,8 +48,8 @@ "@storybook/addon-essentials": "^7.6.17", "@storybook/react": "^7.6.17", "@storybook/react-vite": "^7.6.17", - "@tanstack/router-devtools": "^1.16.6", - "@tanstack/router-vite-plugin": "^1.16.5", + "@tanstack/router-devtools": "^1.20.1", + "@tanstack/router-vite-plugin": "^1.20.2", "@testing-library/react": "^14.2.1", "@types/node": "^20.11.24", "@types/react": "^18.2.61", @@ -8162,9 +8162,9 @@ } }, "node_modules/@tanstack/react-router": { - "version": "1.16.6", - "resolved": "https://registry.npmjs.org/@tanstack/react-router/-/react-router-1.16.6.tgz", - "integrity": "sha512-d1Kjs38IF3bH7jKwihMBrdnh7BMVOHSNhJ9sltCiP4gLHcZkG7V9BwwJn5yL4V7YHIPNxdrJ3v4yrkvdrPJ0Ww==", + "version": "1.20.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-router/-/react-router-1.20.1.tgz", + "integrity": "sha512-WpWZ4rYC+L3DHCB4+lo9HPVoNkUy4yN9QL+1Z8QSYeUKG0ZAydrqUnL48YBKdSh3bp8FRh09R+74DTP0/lvxAw==", "dependencies": { "@tanstack/history": "1.15.13", "@tanstack/react-store": "^0.2.1", @@ -8201,13 +8201,15 @@ } }, "node_modules/@tanstack/router-devtools": { - "version": "1.16.6", - "resolved": "https://registry.npmjs.org/@tanstack/router-devtools/-/router-devtools-1.16.6.tgz", - "integrity": "sha512-zjyLuStYA1TM4L1IfgQJ1ZCq36o3UVaLLCVmBBHukxbc6n2cKR2U11BXJW5RpkNZDyAPyGcPLEgJ2qcZCYSDcQ==", + "version": "1.20.1", + "resolved": "https://registry.npmjs.org/@tanstack/router-devtools/-/router-devtools-1.20.1.tgz", + "integrity": "sha512-1t/IE6dR4rGNpdWVLl8G6DN31Uj+UUth6j9AhVox4lRA76O+/JRnpBuh/Q/59CUPN3dR5dY7vLyl96swr/1Nwg==", "dev": true, "dependencies": { - "@tanstack/react-router": "1.16.6", - "date-fns": "^2.29.1" + "@tanstack/react-router": "1.20.1", + "clsx": "^2.1.0", + "date-fns": "^2.29.1", + "goober": "^2.1.14" }, "engines": { "node": ">=12" @@ -8238,9 +8240,9 @@ } }, "node_modules/@tanstack/router-generator": { - "version": "1.16.5", - "resolved": "https://registry.npmjs.org/@tanstack/router-generator/-/router-generator-1.16.5.tgz", - "integrity": "sha512-np9+DASQvD4ff+FrCZ4XqRMGpVC6Y2213kma/X05mvo241yh0D5C6paUY7N7pSBPpuTlJbYKi+73cm/xRtK3Hg==", + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/@tanstack/router-generator/-/router-generator-1.20.0.tgz", + "integrity": "sha512-YkxVMi6q3K3V99Xo13dbP4fQDHxGUZi8Z5B7t4XZvwouAj7RDF8Tm8UcJVix8VLWaH4pt1idSXy185GWLTAiTw==", "dev": true, "dependencies": { "prettier": "^3.1.1", @@ -8255,12 +8257,12 @@ } }, "node_modules/@tanstack/router-vite-plugin": { - "version": "1.16.5", - "resolved": "https://registry.npmjs.org/@tanstack/router-vite-plugin/-/router-vite-plugin-1.16.5.tgz", - "integrity": "sha512-rNfAuWIScl0KnjWOda5hzQYgHdwpLu1OljvqZa260UrCB6e32882X2Ci687+OUBfydhZT/V53XtQ+la7/AO5Rw==", + "version": "1.20.2", + "resolved": "https://registry.npmjs.org/@tanstack/router-vite-plugin/-/router-vite-plugin-1.20.2.tgz", + "integrity": "sha512-lZ6fBwXszmzS0n9fbQUDdi0u4f6ZimDXIQhMjZEzqn9yB/IPloqN0ja0Bac78/5C7gJhsZ8YcgH8qRqqXYWGeg==", "dev": true, "dependencies": { - "@tanstack/router-generator": "1.16.5" + "@tanstack/router-generator": "1.20.0" }, "engines": { "node": ">=12" @@ -11330,6 +11332,15 @@ "integrity": "sha512-au6ydSpg6nsrigcZ4m8Bc9hxjeW+GJ8xh5G3BJCMt4WXe1H10UNaVOamqQTmrx1kjVuxAHIQSNU6hY4Nsn9/ag==", "dev": true }, + "node_modules/clsx": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", + "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/coa": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz", @@ -15212,6 +15223,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/goober": { + "version": "2.1.14", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz", + "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==", + "dev": true, + "peerDependencies": { + "csstype": "^3.0.10" + } + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 7fb2bb5c0..ef8751df8 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -21,7 +21,7 @@ "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-form": "^0.0.3", - "@tanstack/react-router": "^1.16.6", + "@tanstack/react-router": "^1.20.1", "@types/ua-parser-js": "^0.7.39", "@urql/core": "^4.2.3", "@urql/devtools": "^2.0.3", @@ -56,8 +56,8 @@ "@storybook/addon-essentials": "^7.6.17", "@storybook/react": "^7.6.17", "@storybook/react-vite": "^7.6.17", - "@tanstack/router-devtools": "^1.16.6", - "@tanstack/router-vite-plugin": "^1.16.5", + "@tanstack/router-devtools": "^1.20.1", + "@tanstack/router-vite-plugin": "^1.20.2", "@testing-library/react": "^14.2.1", "@types/node": "^20.11.24", "@types/react": "^18.2.61", diff --git a/frontend/src/components/ButtonLink.tsx b/frontend/src/components/ButtonLink.tsx index 2f854956c..ea8463885 100644 --- a/frontend/src/components/ButtonLink.tsx +++ b/frontend/src/components/ButtonLink.tsx @@ -12,7 +12,11 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { LinkComponent, useLinkProps } from "@tanstack/react-router"; +import { + UseLinkPropsOptions, + createLink, + useLinkProps, +} from "@tanstack/react-router"; import { Button } from "@vector-im/compound-web"; import { forwardRef } from "react"; @@ -23,24 +27,15 @@ type Props = { destructive?: boolean; }; -export const ButtonLink: LinkComponent = forwardRef< +// XXX: createLink is broken, so we work around it by using useLinkProps directly +export const ButtonLink = forwardRef< HTMLAnchorElement, - Parameters[0] & Props ->(({ children, kind, size, destructive, Icon, ...props }, ref) => { + Props & UseLinkPropsOptions +>(({ children, ...props }, ref) => { const linkProps = useLinkProps(props); - return ( - ); -}) as LinkComponent; +}) as ReturnType>; diff --git a/frontend/src/components/Link.tsx b/frontend/src/components/Link.tsx index 07a1d5b47..0b2b46399 100644 --- a/frontend/src/components/Link.tsx +++ b/frontend/src/components/Link.tsx @@ -12,23 +12,13 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { LinkComponent, useLinkProps } from "@tanstack/react-router"; +import { createLink, useLinkProps } from "@tanstack/react-router"; import { Link as CompoundLink } from "@vector-im/compound-web"; -import { forwardRef } from "react"; -type Props = { - kind?: "primary" | "critical"; -}; - -export const Link: LinkComponent = forwardRef< - HTMLAnchorElement, - Parameters[0] & Props ->(({ children, kind, ...props }, ref) => { +export const Link: ReturnType> = ({ + children, + ...props +}: Parameters[0]) => { const linkProps = useLinkProps(props); - - return ( - - {children} - - ); -}) as LinkComponent; + return {children}; +}; diff --git a/frontend/src/components/SessionCard/SessionCard.tsx b/frontend/src/components/SessionCard/SessionCard.tsx index 02c704b29..92d1414c8 100644 --- a/frontend/src/components/SessionCard/SessionCard.tsx +++ b/frontend/src/components/SessionCard/SessionCard.tsx @@ -12,9 +12,13 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { LinkComponent, useLinkProps } from "@tanstack/react-router"; +import { + UseLinkPropsOptions, + createLink, + useLinkProps, +} from "@tanstack/react-router"; import cx from "classnames"; -import { forwardRef } from "react"; +import { AnchorHTMLAttributes, forwardRef } from "react"; import { DeviceType } from "../../gql/graphql"; import ClientAvatar from "../Session/ClientAvatar"; @@ -26,28 +30,35 @@ export const Root: React.FC = ({ children }) => (
{children}
); +// XXX: createLink is broken, so we work around it by using useLinkProps directly type BodyProps = React.PropsWithChildren<{ disabled?: boolean; compact?: boolean; }>; -export const LinkBody: LinkComponent = forwardRef< +export const LinkBody = forwardRef< HTMLAnchorElement, - Parameters[0] & BodyProps + BodyProps & UseLinkPropsOptions >(({ children, disabled, compact, ...props }, ref) => { - const linkProps = useLinkProps({ - className: cx( - styles.sessionCard, - compact && styles.compact, - disabled && styles.disabled, - ), - ...props, - }); + const { className, ...linkProps } = useLinkProps({ disabled, ...props }); return ( - + {children} ); -}) as LinkComponent; +}) as ReturnType< + typeof createLink< + React.FC> + > +>; export const Body: React.FC = ({ children, compact, disabled }) => (
- + {t("frontend.browser_sessions_overview.view_all_button")} diff --git a/frontend/src/components/UserSessionsOverview/__snapshots__/BrowserSessionsOverview.test.tsx.snap b/frontend/src/components/UserSessionsOverview/__snapshots__/BrowserSessionsOverview.test.tsx.snap index fd872e131..16713dbeb 100644 --- a/frontend/src/components/UserSessionsOverview/__snapshots__/BrowserSessionsOverview.test.tsx.snap +++ b/frontend/src/components/UserSessionsOverview/__snapshots__/BrowserSessionsOverview.test.tsx.snap @@ -22,7 +22,7 @@ exports[`BrowserSessionsOverview > renders with no browser sessions 1`] = ` View all @@ -53,7 +53,7 @@ exports[`BrowserSessionsOverview > renders with sessions 1`] = ` View all diff --git a/frontend/src/components/__snapshots__/CompatSession.test.tsx.snap b/frontend/src/components/__snapshots__/CompatSession.test.tsx.snap index 0541e8bf1..1d00a95f5 100644 --- a/frontend/src/components/__snapshots__/CompatSession.test.tsx.snap +++ b/frontend/src/components/__snapshots__/CompatSession.test.tsx.snap @@ -5,13 +5,14 @@ exports[` > renders a finished session 1`] = ` className="_sessionCardRoot_e2909e" >
> renders a finished session 1`] = ` className="_sessionCardRoot_e2909e" >
> renders correct icon for a native session 1`] = ` className="_sessionCardRoot_e2909e" >
()({ @@ -62,7 +65,7 @@ export const Route = createRootRouteWithContext<{ case "sessions_list": case "org.matrix.sessions_list": - throw redirect({ to: "/sessions" }); + throw redirect({ to: "/sessions/", search: { last: PAGE_SIZE } }); case "session_view": case "org.matrix.session_view": @@ -71,7 +74,7 @@ export const Route = createRootRouteWithContext<{ to: "/devices/$id", params: { id: search.device_id }, }); - throw redirect({ to: "/sessions" }); + throw redirect({ to: "/sessions/", search: { last: PAGE_SIZE } }); case "session_end": case "org.matrix.session_end": @@ -80,11 +83,11 @@ export const Route = createRootRouteWithContext<{ to: "/devices/$id", params: { id: search.device_id }, }); - throw redirect({ to: "/sessions" }); + throw redirect({ to: "/sessions/", search: { last: PAGE_SIZE } }); case "org.matrix.cross_signing_reset": throw redirect({ - to: "/reset-cross-signing", + to: "/reset-cross-signing/", search: { deepLink: true }, }); } diff --git a/frontend/src/routes/_account.sessions.$id.tsx b/frontend/src/routes/_account.sessions.$id.tsx index c011ad35d..da372729a 100644 --- a/frontend/src/routes/_account.sessions.$id.tsx +++ b/frontend/src/routes/_account.sessions.$id.tsx @@ -66,7 +66,7 @@ function NotFound(): React.ReactElement { title={t("frontend.session_detail.alert.title", { deviceId: id })} > {t("frontend.session_detail.alert.text")} - + {t("frontend.session_detail.alert.button")} diff --git a/frontend/src/routes/_account.sessions.browsers.tsx b/frontend/src/routes/_account.sessions.browsers.tsx index 4698c54df..fc2015203 100644 --- a/frontend/src/routes/_account.sessions.browsers.tsx +++ b/frontend/src/routes/_account.sessions.browsers.tsx @@ -133,7 +133,7 @@ function BrowserSessions(): React.ReactElement { size="sm" disabled={!forwardPage} to={Route.fullPath} - search={forwardPage} + search={forwardPage || pagination} > {t("common.previous")} @@ -146,7 +146,7 @@ function BrowserSessions(): React.ReactElement { size="sm" disabled={!backwardPage} to={Route.fullPath} - search={backwardPage} + search={backwardPage || pagination} > {t("common.next")} diff --git a/frontend/src/routes/_account.sessions.index.tsx b/frontend/src/routes/_account.sessions.index.tsx index f7762d086..190dffb0c 100644 --- a/frontend/src/routes/_account.sessions.index.tsx +++ b/frontend/src/routes/_account.sessions.index.tsx @@ -176,7 +176,7 @@ function Sessions(): React.ReactElement { size="sm" disabled={!forwardPage} to={Route.fullPath} - search={forwardPage} + search={forwardPage || pagination} > {t("common.previous")} @@ -189,7 +189,7 @@ function Sessions(): React.ReactElement { size="sm" disabled={!backwardPage} to={Route.fullPath} - search={backwardPage} + search={backwardPage || pagination} > {t("common.next")} diff --git a/frontend/src/routes/devices.$id.tsx b/frontend/src/routes/devices.$id.tsx index 68f81602e..954bffd9c 100644 --- a/frontend/src/routes/devices.$id.tsx +++ b/frontend/src/routes/devices.$id.tsx @@ -86,7 +86,9 @@ function NotFound(): React.ReactElement { title={t("frontend.session_detail.alert.title", { deviceId })} > {t("frontend.session_detail.alert.text")} - {t("frontend.session_detail.alert.button")} + + {t("frontend.session_detail.alert.button")} + );