diff --git a/site/src/components/Filter/Filter.tsx b/site/src/components/Filter/Filter.tsx
index 7129351db2f58..f87696e8db3eb 100644
--- a/site/src/components/Filter/Filter.tsx
+++ b/site/src/components/Filter/Filter.tsx
@@ -16,7 +16,7 @@ import { InputGroup } from "components/InputGroup/InputGroup";
import { SearchField } from "components/SearchField/SearchField";
import { useDebouncedFunction } from "hooks/debounce";
import { type FC, type ReactNode, useEffect, useRef, useState } from "react";
-import type { useSearchParams } from "react-router-dom";
+import type { useSearchParams } from "react-router";
export type PresetFilter = {
name: string;
diff --git a/site/src/components/FullPageLayout/Sidebar.tsx b/site/src/components/FullPageLayout/Sidebar.tsx
index 8852d796abaa0..8a5eaf9b4f6be 100644
--- a/site/src/components/FullPageLayout/Sidebar.tsx
+++ b/site/src/components/FullPageLayout/Sidebar.tsx
@@ -1,6 +1,6 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import type { ComponentProps, FC, HTMLAttributes } from "react";
-import { Link, type LinkProps } from "react-router-dom";
+import { Link, type LinkProps } from "react-router";
import { TopbarIconButton } from "./Topbar";
export const Sidebar: FC> = (props) => {
diff --git a/site/src/components/Icons/DockerIcon.tsx b/site/src/components/Icons/DockerIcon.tsx
index e6892a94bcf17..36032883cd858 100644
--- a/site/src/components/Icons/DockerIcon.tsx
+++ b/site/src/components/Icons/DockerIcon.tsx
@@ -1,4 +1,5 @@
import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
export const DockerIcon = (props: SvgIconProps): JSX.Element => (
diff --git a/site/src/components/Icons/EditSquare.tsx b/site/src/components/Icons/EditSquare.tsx
index 252a23e148739..21669ebf051ec 100644
--- a/site/src/components/Icons/EditSquare.tsx
+++ b/site/src/components/Icons/EditSquare.tsx
@@ -1,4 +1,5 @@
import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
export const EditSquare = (props: SvgIconProps): JSX.Element => (
diff --git a/site/src/components/Icons/ErrorIcon.tsx b/site/src/components/Icons/ErrorIcon.tsx
index 30e4f4ba6975e..38943169ec088 100644
--- a/site/src/components/Icons/ErrorIcon.tsx
+++ b/site/src/components/Icons/ErrorIcon.tsx
@@ -1,4 +1,5 @@
import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
export const ErrorIcon = (props: SvgIconProps): JSX.Element => (
diff --git a/site/src/components/Icons/FileCopyIcon.tsx b/site/src/components/Icons/FileCopyIcon.tsx
index bd6fc359fe71f..2d24ce083d627 100644
--- a/site/src/components/Icons/FileCopyIcon.tsx
+++ b/site/src/components/Icons/FileCopyIcon.tsx
@@ -1,4 +1,5 @@
import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
export const FileCopyIcon = (props: SvgIconProps): JSX.Element => (
diff --git a/site/src/components/Icons/GitIcon.tsx b/site/src/components/Icons/GitIcon.tsx
index 1cf32baedfd01..8d2d249863c78 100644
--- a/site/src/components/Icons/GitIcon.tsx
+++ b/site/src/components/Icons/GitIcon.tsx
@@ -1,4 +1,5 @@
import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
export const GitIcon = (props: SvgIconProps): JSX.Element => (
diff --git a/site/src/components/Icons/GitlabIcon.tsx b/site/src/components/Icons/GitlabIcon.tsx
index 8447cca8d94c1..96ab5c63e0b70 100644
--- a/site/src/components/Icons/GitlabIcon.tsx
+++ b/site/src/components/Icons/GitlabIcon.tsx
@@ -1,4 +1,5 @@
import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
export const GitlabIcon = (props: SvgIconProps): JSX.Element => (
diff --git a/site/src/components/Icons/JetBrainsIcon.tsx b/site/src/components/Icons/JetBrainsIcon.tsx
index 8c08ae51f8e0e..66723b7ff36e1 100644
--- a/site/src/components/Icons/JetBrainsIcon.tsx
+++ b/site/src/components/Icons/JetBrainsIcon.tsx
@@ -1,4 +1,5 @@
import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
export const JetBrainsIcon = (props: SvgIconProps): JSX.Element => (
diff --git a/site/src/components/Icons/MarkdownIcon.tsx b/site/src/components/Icons/MarkdownIcon.tsx
index 13c3535663baa..f627812eb275a 100644
--- a/site/src/components/Icons/MarkdownIcon.tsx
+++ b/site/src/components/Icons/MarkdownIcon.tsx
@@ -1,4 +1,5 @@
import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
export const MarkdownIcon = (props: SvgIconProps): JSX.Element => (
diff --git a/site/src/components/Icons/RocketIcon.tsx b/site/src/components/Icons/RocketIcon.tsx
index 2e19ced4685e5..ce63a76778f88 100644
--- a/site/src/components/Icons/RocketIcon.tsx
+++ b/site/src/components/Icons/RocketIcon.tsx
@@ -1,4 +1,5 @@
import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
export const RocketIcon = (props: SvgIconProps): JSX.Element => (
diff --git a/site/src/components/Icons/TerminalIcon.tsx b/site/src/components/Icons/TerminalIcon.tsx
index 6b44b8d928e63..869332cb13741 100644
--- a/site/src/components/Icons/TerminalIcon.tsx
+++ b/site/src/components/Icons/TerminalIcon.tsx
@@ -1,4 +1,5 @@
import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
export const TerminalIcon = (props: SvgIconProps): JSX.Element => (
diff --git a/site/src/components/Icons/TerraformIcon.tsx b/site/src/components/Icons/TerraformIcon.tsx
index 6e06cf5efdda2..c155bf7c4e76b 100644
--- a/site/src/components/Icons/TerraformIcon.tsx
+++ b/site/src/components/Icons/TerraformIcon.tsx
@@ -1,4 +1,5 @@
import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
export const TerraformIcon = (props: SvgIconProps): JSX.Element => (
diff --git a/site/src/components/Icons/VSCodeIcon.tsx b/site/src/components/Icons/VSCodeIcon.tsx
index 277f7593d44c0..219f8261369e5 100644
--- a/site/src/components/Icons/VSCodeIcon.tsx
+++ b/site/src/components/Icons/VSCodeIcon.tsx
@@ -1,4 +1,5 @@
import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
export const VSCodeIcon = (props: SvgIconProps): JSX.Element => (
diff --git a/site/src/components/Icons/VSCodeInsidersIcon.tsx b/site/src/components/Icons/VSCodeInsidersIcon.tsx
index 10d6db0a39d57..574a8b4f0484b 100644
--- a/site/src/components/Icons/VSCodeInsidersIcon.tsx
+++ b/site/src/components/Icons/VSCodeInsidersIcon.tsx
@@ -1,4 +1,5 @@
import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
export const VSCodeInsidersIcon = (props: SvgIconProps): JSX.Element => (
diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx
index 42b9671d17771..437003e017e7c 100644
--- a/site/src/components/Margins/Margins.tsx
+++ b/site/src/components/Margins/Margins.tsx
@@ -13,7 +13,7 @@ const widthBySize: Record = {
small: containerWidth / 3,
};
-type MarginsProps = JSX.IntrinsicElements["div"] & {
+type MarginsProps = React.ComponentProps<"div"> & {
size?: Size;
};
diff --git a/site/src/components/MoreMenu/MoreMenu.tsx b/site/src/components/MoreMenu/MoreMenu.tsx
index 8ba7864fc5e5d..8973338428b84 100644
--- a/site/src/components/MoreMenu/MoreMenu.tsx
+++ b/site/src/components/MoreMenu/MoreMenu.tsx
@@ -16,7 +16,7 @@ import {
} from "react";
type MoreMenuContextValue = {
- triggerRef: React.RefObject;
+ triggerRef: React.RefObject;
close: () => void;
open: () => void;
isOpen: boolean;
@@ -61,7 +61,8 @@ export const MoreMenuTrigger: FC> = ({
}) => {
const menu = useMoreMenuContext();
- return cloneElement(children as ReactElement, {
+ // biome-ignore lint/suspicious/noExplicitAny: React 19 defaults to `unknown` now
+ return cloneElement(children as ReactElement, {
"aria-haspopup": "true",
...props,
ref: menu.triggerRef,
diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx
index 0b7c85e979d24..8d0d4a4ca8d12 100644
--- a/site/src/components/Paywall/Paywall.tsx
+++ b/site/src/components/Paywall/Paywall.tsx
@@ -5,7 +5,6 @@ import Link from "@mui/material/Link";
import { PremiumBadge } from "components/Badges/Badges";
import { Stack } from "components/Stack/Stack";
import type { FC, ReactNode } from "react";
-import { docs } from "utils/docs";
export interface PaywallProps {
message: string;
diff --git a/site/src/components/Paywall/PopoverPaywall.tsx b/site/src/components/Paywall/PopoverPaywall.tsx
index 0141fac486a07..bee06fd3396c0 100644
--- a/site/src/components/Paywall/PopoverPaywall.tsx
+++ b/site/src/components/Paywall/PopoverPaywall.tsx
@@ -5,7 +5,6 @@ import Link from "@mui/material/Link";
import { PremiumBadge } from "components/Badges/Badges";
import { Stack } from "components/Stack/Stack";
import type { FC, ReactNode } from "react";
-import { docs } from "utils/docs";
export interface PopoverPaywallProps {
message: string;
diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
index 8d6b338062a7c..05812f56e7ac4 100644
--- a/site/src/components/Pill/Pill.tsx
+++ b/site/src/components/Pill/Pill.tsx
@@ -45,9 +45,9 @@ export const Pill: FC = forwardRef(
ref={ref}
css={[
styles.pill,
- icon && size === "md" && styles.pillWithIcon,
+ Boolean(icon) && size === "md" && styles.pillWithIcon,
size === "lg" && styles.pillLg,
- icon && size === "lg" && styles.pillLgWithIcon,
+ Boolean(icon) && size === "lg" && styles.pillLgWithIcon,
typeStyles,
]}
{...divProps}
diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx
index 987a4b91a3976..4daf24dadfee3 100644
--- a/site/src/components/Sidebar/Sidebar.tsx
+++ b/site/src/components/Sidebar/Sidebar.tsx
@@ -3,7 +3,7 @@ import type { CSSObject, Interpolation, Theme } from "@emotion/react";
import { Stack } from "components/Stack/Stack";
import { type ClassName, useClassName } from "hooks/useClassName";
import type { ElementType, FC, ReactNode } from "react";
-import { Link, NavLink } from "react-router-dom";
+import { Link, NavLink } from "react-router";
import { cn } from "utils/cn";
interface SidebarProps {
diff --git a/site/src/components/Tabs/Tabs.tsx b/site/src/components/Tabs/Tabs.tsx
index ebeaa762674ad..4976174ed0b15 100644
--- a/site/src/components/Tabs/Tabs.tsx
+++ b/site/src/components/Tabs/Tabs.tsx
@@ -1,6 +1,6 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import { type FC, type HTMLAttributes, createContext, useContext } from "react";
-import { Link, type LinkProps } from "react-router-dom";
+import { Link, type LinkProps } from "react-router";
export const TAB_PADDING_Y = 12;
export const TAB_PADDING_X = 16;
diff --git a/site/src/components/Timeline/Timeline.tsx b/site/src/components/Timeline/Timeline.tsx
index 28994e49ca26c..71ebf898f1880 100644
--- a/site/src/components/Timeline/Timeline.tsx
+++ b/site/src/components/Timeline/Timeline.tsx
@@ -1,5 +1,5 @@
import { TimelineDateRow } from "components/Timeline/TimelineDateRow";
-import { Fragment } from "react";
+import { Fragment, type JSX } from "react";
type GetDateFn = (data: TData) => Date;
diff --git a/site/src/components/deprecated/Popover/Popover.tsx b/site/src/components/deprecated/Popover/Popover.tsx
index a7f39810e43b2..9bcdf77b86932 100644
--- a/site/src/components/deprecated/Popover/Popover.tsx
+++ b/site/src/components/deprecated/Popover/Popover.tsx
@@ -21,7 +21,7 @@ import {
type TriggerMode = "hover" | "click";
-type TriggerRef = RefObject;
+type TriggerRef = RefObject;
// Have to append ReactNode type to satisfy React's cloneElement function. It
// has absolutely no bearing on what happens at runtime
@@ -146,6 +146,7 @@ export const PopoverTrigger: FC = (props) => {
return cloneElement(evaluatedChildren, {
...elementProps,
...(popover.mode === "click" ? clickProps : hoverProps),
+ // @ts-expect-error – maybe removed from types?
"aria-haspopup": true,
"aria-owns": popover.id,
"aria-expanded": popover.open,
diff --git a/site/src/contexts/auth/RequireAuth.tsx b/site/src/contexts/auth/RequireAuth.tsx
index e558b66c802de..d71e640101d21 100644
--- a/site/src/contexts/auth/RequireAuth.tsx
+++ b/site/src/contexts/auth/RequireAuth.tsx
@@ -4,7 +4,7 @@ import { Loader } from "components/Loader/Loader";
import { ProxyProvider as ProductionProxyProvider } from "contexts/ProxyContext";
import { DashboardProvider as ProductionDashboardProvider } from "modules/dashboard/DashboardProvider";
import { type FC, useEffect } from "react";
-import { Navigate, Outlet, useLocation } from "react-router-dom";
+import { Navigate, Outlet, useLocation } from "react-router";
import { embedRedirect } from "utils/redirect";
import { type AuthContextValue, useAuthContext } from "./AuthProvider";
diff --git a/site/src/contexts/auth/RequirePermission.tsx b/site/src/contexts/auth/RequirePermission.tsx
index 50dbd0232ab88..389a331546fef 100644
--- a/site/src/contexts/auth/RequirePermission.tsx
+++ b/site/src/contexts/auth/RequirePermission.tsx
@@ -1,5 +1,5 @@
import type { FC, ReactNode } from "react";
-import { Navigate } from "react-router-dom";
+import { Navigate } from "react-router";
export interface RequirePermissionProps {
children?: ReactNode;
diff --git a/site/src/hooks/useClickable.ts b/site/src/hooks/useClickable.ts
index d0e4081e498b4..3f59851b8fc3b 100644
--- a/site/src/hooks/useClickable.ts
+++ b/site/src/hooks/useClickable.ts
@@ -23,7 +23,7 @@ export type UseClickableResult<
TElement extends ClickableElement = ClickableElement,
TRole extends ClickableAriaRole = ClickableAriaRole,
> = Readonly<{
- ref: RefObject;
+ ref: RefObject;
tabIndex: 0;
role: TRole;
onClick: MouseEventHandler;
diff --git a/site/src/hooks/useClipboard.ts b/site/src/hooks/useClipboard.ts
index 8fde4d7833e99..1eb91cc356155 100644
--- a/site/src/hooks/useClipboard.ts
+++ b/site/src/hooks/useClipboard.ts
@@ -44,7 +44,7 @@ export const useClipboard = (input: UseClipboardInput): UseClipboardResult => {
const { textToCopy, onError: errorCallback } = input;
const [showCopiedSuccess, setShowCopiedSuccess] = useState(false);
const [error, setError] = useState();
- const timeoutIdRef = useRef();
+ const timeoutIdRef = useRef(undefined);
useEffect(() => {
const clearIdOnUnmount = () => window.clearTimeout(timeoutIdRef.current);
diff --git a/site/src/hooks/usePaginatedQuery.ts b/site/src/hooks/usePaginatedQuery.ts
index af443d43c2443..9176ea0999c83 100644
--- a/site/src/hooks/usePaginatedQuery.ts
+++ b/site/src/hooks/usePaginatedQuery.ts
@@ -8,7 +8,7 @@ import {
useQuery,
useQueryClient,
} from "react-query";
-import { type SetURLSearchParams, useSearchParams } from "react-router-dom";
+import { type SetURLSearchParams, useSearchParams } from "react-router";
import { useEffectEvent } from "./hookPolyfills";
const DEFAULT_RECORDS_PER_PAGE = 25;
diff --git a/site/src/hooks/usePagination.ts b/site/src/hooks/usePagination.ts
index 72ea70868fb30..146ad9707da25 100644
--- a/site/src/hooks/usePagination.ts
+++ b/site/src/hooks/usePagination.ts
@@ -1,5 +1,5 @@
import { DEFAULT_RECORDS_PER_PAGE } from "components/PaginationWidget/utils";
-import type { useSearchParams } from "react-router-dom";
+import type { useSearchParams } from "react-router";
export const usePagination = ({
searchParamsResult,
diff --git a/site/src/hooks/useSearchParamsKey.ts b/site/src/hooks/useSearchParamsKey.ts
index fcc9899a6afed..18b9eba053165 100644
--- a/site/src/hooks/useSearchParamsKey.ts
+++ b/site/src/hooks/useSearchParamsKey.ts
@@ -1,4 +1,4 @@
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router";
export type UseSearchParamsKeyConfig = Readonly<{
key: string;
diff --git a/site/src/hooks/useWorkspaceBuildLogs.ts b/site/src/hooks/useWorkspaceBuildLogs.ts
index fd8e348dc88ea..ad1326c0924e6 100644
--- a/site/src/hooks/useWorkspaceBuildLogs.ts
+++ b/site/src/hooks/useWorkspaceBuildLogs.ts
@@ -9,7 +9,7 @@ export const useWorkspaceBuildLogs = (
enabled = true,
) => {
const [logs, setLogs] = useState();
- const socket = useRef();
+ const socket = useRef(undefined);
useEffect(() => {
if (!buildId || !enabled) {
diff --git a/site/src/modules/dashboard/DashboardLayout.tsx b/site/src/modules/dashboard/DashboardLayout.tsx
index 6f028b70d59a8..bca024b2f4703 100644
--- a/site/src/modules/dashboard/DashboardLayout.tsx
+++ b/site/src/modules/dashboard/DashboardLayout.tsx
@@ -7,7 +7,7 @@ import { useAuthenticated } from "contexts/auth/RequireAuth";
import { AnnouncementBanners } from "modules/dashboard/AnnouncementBanners/AnnouncementBanners";
import { LicenseBanner } from "modules/dashboard/LicenseBanner/LicenseBanner";
import { type FC, type HTMLAttributes, Suspense } from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
import { dashboardContentBottomPadding } from "theme/constants";
import { docs } from "utils/docs";
import { DeploymentBanner } from "./DeploymentBanner/DeploymentBanner";
diff --git a/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
index bfee3f451f9f8..5fad853a2c2eb 100644
--- a/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
+++ b/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
@@ -32,7 +32,7 @@ import {
useMemo,
useState,
} from "react";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink } from "react-router";
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
import colors from "theme/tailwindColors";
import { getDisplayWorkspaceStatus } from "utils/workspace";
diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
index d1a75c02cd315..4beeb940fac32 100644
--- a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
+++ b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
@@ -11,7 +11,7 @@ import {
import { ChevronDownIcon } from "lucide-react";
import { linkToAuditing } from "modules/navigation";
import type { FC } from "react";
-import { NavLink } from "react-router-dom";
+import { NavLink } from "react-router";
interface DeploymentDropdownProps {
canViewDeployment: boolean;
diff --git a/site/src/modules/dashboard/Navbar/MobileMenu.stories.tsx b/site/src/modules/dashboard/Navbar/MobileMenu.stories.tsx
index 19c66c14b38a7..5861c48c0ec6e 100644
--- a/site/src/modules/dashboard/Navbar/MobileMenu.stories.tsx
+++ b/site/src/modules/dashboard/Navbar/MobileMenu.stories.tsx
@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react";
import { fn, userEvent, within } from "@storybook/test";
import { PointerEventsCheckLevel } from "@testing-library/user-event";
import type { FC } from "react";
-import { chromaticWithTablet } from "testHelpers/chromatic";
import {
MockPrimaryWorkspaceProxy,
MockProxyLatencies,
diff --git a/site/src/modules/dashboard/Navbar/MobileMenu.tsx b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
index e04bb7328d78c..d8a08e06d4abc 100644
--- a/site/src/modules/dashboard/Navbar/MobileMenu.tsx
+++ b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
@@ -24,7 +24,7 @@ import {
XIcon,
} from "lucide-react";
import { type FC, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
import { cn } from "utils/cn";
import { sortProxiesByLatency } from "./proxyUtils";
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
index ec3a1c690bb60..20c25346951d2 100644
--- a/site/src/modules/dashboard/Navbar/NavbarView.tsx
+++ b/site/src/modules/dashboard/Navbar/NavbarView.tsx
@@ -3,7 +3,7 @@ import { ExternalImage } from "components/ExternalImage/ExternalImage";
import { CoderIcon } from "components/Icons/CoderIcon";
import type { ProxyContextValue } from "contexts/ProxyContext";
import type { FC } from "react";
-import { NavLink, useLocation } from "react-router-dom";
+import { NavLink, useLocation } from "react-router";
import { cn } from "utils/cn";
import { DeploymentDropdown } from "./DeploymentDropdown";
import { MobileMenu } from "./MobileMenu";
diff --git a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
index 5345d3db9cdae..c1694a1b5b2cf 100644
--- a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
+++ b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
@@ -13,7 +13,7 @@ import type { ProxyContextValue } from "contexts/ProxyContext";
import { useAuthenticated } from "contexts/auth/RequireAuth";
import { ChevronDownIcon } from "lucide-react";
import { type FC, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
import { sortProxiesByLatency } from "./proxyUtils";
interface ProxyMenuProps {
diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
index a6a3d2f3d0a1b..d99c855e2c11a 100644
--- a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
+++ b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
@@ -19,8 +19,8 @@ import { CopyButton } from "components/CopyButton/CopyButton";
import { ExternalImage } from "components/ExternalImage/ExternalImage";
import { Stack } from "components/Stack/Stack";
import { usePopover } from "components/deprecated/Popover/Popover";
-import type { FC } from "react";
-import { Link } from "react-router-dom";
+import type { FC, JSX } from "react";
+import { Link } from "react-router";
export const Language = {
accountLabel: "Account",
diff --git a/site/src/modules/management/DeploymentSettingsLayout.tsx b/site/src/modules/management/DeploymentSettingsLayout.tsx
index 65c2e70ea3333..a86e18554f51e 100644
--- a/site/src/modules/management/DeploymentSettingsLayout.tsx
+++ b/site/src/modules/management/DeploymentSettingsLayout.tsx
@@ -9,7 +9,7 @@ import { Loader } from "components/Loader/Loader";
import { useAuthenticated } from "contexts/auth/RequireAuth";
import { RequirePermission } from "contexts/auth/RequirePermission";
import { type FC, Suspense } from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
import { DeploymentSidebar } from "./DeploymentSidebar";
const DeploymentSettingsLayout: FC = () => {
diff --git a/site/src/modules/management/DeploymentSettingsProvider.tsx b/site/src/modules/management/DeploymentSettingsProvider.tsx
index 633c67d67fe44..f2a7e525d37a0 100644
--- a/site/src/modules/management/DeploymentSettingsProvider.tsx
+++ b/site/src/modules/management/DeploymentSettingsProvider.tsx
@@ -6,7 +6,7 @@ import { useAuthenticated } from "contexts/auth/RequireAuth";
import { RequirePermission } from "contexts/auth/RequirePermission";
import { type FC, createContext, useContext } from "react";
import { useQuery } from "react-query";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
export const DeploymentSettingsContext = createContext<
DeploymentSettingsValue | undefined
diff --git a/site/src/modules/management/OrganizationSettingsLayout.tsx b/site/src/modules/management/OrganizationSettingsLayout.tsx
index aa586e877d6e0..e7e7497654fe8 100644
--- a/site/src/modules/management/OrganizationSettingsLayout.tsx
+++ b/site/src/modules/management/OrganizationSettingsLayout.tsx
@@ -14,7 +14,7 @@ import { useAuthenticated } from "contexts/auth/RequireAuth";
import { RequirePermission } from "contexts/auth/RequirePermission";
import { useDashboard } from "modules/dashboard/useDashboard";
import { type FC, Suspense, createContext, useContext } from "react";
-import { Outlet, useParams } from "react-router-dom";
+import { Outlet, useParams } from "react-router";
import { OrganizationSidebar } from "./OrganizationSidebar";
export const OrganizationSettingsContext = createContext<
diff --git a/site/src/modules/management/OrganizationSidebar.tsx b/site/src/modules/management/OrganizationSidebar.tsx
index 902085052e289..604ab294863f4 100644
--- a/site/src/modules/management/OrganizationSidebar.tsx
+++ b/site/src/modules/management/OrganizationSidebar.tsx
@@ -6,7 +6,7 @@ import {
} from "modules/management/OrganizationSettingsLayout";
import type { FC } from "react";
import { useQuery } from "react-query";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
import {
OrganizationSidebarView,
type OrganizationWithPermissions,
diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx
index 104bf28c87b7c..fe4a4df6adb17 100644
--- a/site/src/modules/management/OrganizationSidebarView.tsx
+++ b/site/src/modules/management/OrganizationSidebarView.tsx
@@ -12,7 +12,7 @@ import type { Permissions } from "contexts/auth/permissions";
import { type ClassName, useClassName } from "hooks/useClassName";
import { useDashboard } from "modules/dashboard/useDashboard";
import type { FC, ReactNode } from "react";
-import { Link, NavLink } from "react-router-dom";
+import { Link, NavLink } from "react-router";
export interface OrganizationWithPermissions extends Organization {
permissions: AuthorizationResponse;
diff --git a/site/src/modules/resources/AgentLogs/AgentLogs.tsx b/site/src/modules/resources/AgentLogs/AgentLogs.tsx
index 9c7c1fd08c553..823df908bfcd8 100644
--- a/site/src/modules/resources/AgentLogs/AgentLogs.tsx
+++ b/site/src/modules/resources/AgentLogs/AgentLogs.tsx
@@ -1,7 +1,7 @@
import type { Interpolation, Theme } from "@emotion/react";
import Tooltip from "@mui/material/Tooltip";
import type { WorkspaceAgentLogSource } from "api/typesGenerated";
-import { type ComponentProps, forwardRef, useMemo } from "react";
+import { type ComponentProps, type JSX, forwardRef, useMemo } from "react";
import { FixedSizeList as List } from "react-window";
import {
AGENT_LOG_LINE_HEIGHT,
diff --git a/site/src/modules/resources/ResourceCard.stories.tsx b/site/src/modules/resources/ResourceCard.stories.tsx
index 1ce76894a032e..87993cc6a6f4a 100644
--- a/site/src/modules/resources/ResourceCard.stories.tsx
+++ b/site/src/modules/resources/ResourceCard.stories.tsx
@@ -1,6 +1,7 @@
import type { Meta, StoryObj } from "@storybook/react";
import type { WorkspaceAgent } from "api/typesGenerated";
import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
+import type { JSX } from "react";
import {
MockProxyLatencies,
MockWorkspaceResource,
diff --git a/site/src/modules/resources/ResourceCard.tsx b/site/src/modules/resources/ResourceCard.tsx
index 325a737e1adc1..75f225cf497f5 100644
--- a/site/src/modules/resources/ResourceCard.tsx
+++ b/site/src/modules/resources/ResourceCard.tsx
@@ -6,7 +6,7 @@ import { CopyableValue } from "components/CopyableValue/CopyableValue";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
import { Stack } from "components/Stack/Stack";
-import { Children, type FC, useState } from "react";
+import { Children, type FC, type JSX, useState } from "react";
import { ResourceAvatar } from "./ResourceAvatar";
import { SensitiveValue } from "./SensitiveValue";
diff --git a/site/src/modules/resources/Resources.stories.tsx b/site/src/modules/resources/Resources.stories.tsx
index da8ed2f249696..cda53afe69b84 100644
--- a/site/src/modules/resources/Resources.stories.tsx
+++ b/site/src/modules/resources/Resources.stories.tsx
@@ -1,6 +1,7 @@
import type { Meta, StoryObj } from "@storybook/react";
import type { WorkspaceAgent } from "api/typesGenerated";
import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
+import type { JSX } from "react";
import {
MockProxyLatencies,
MockWorkspaceResource,
diff --git a/site/src/modules/resources/Resources.tsx b/site/src/modules/resources/Resources.tsx
index 18c2a65db30ac..6ebaec946e6ff 100644
--- a/site/src/modules/resources/Resources.tsx
+++ b/site/src/modules/resources/Resources.tsx
@@ -3,7 +3,7 @@ import Button from "@mui/material/Button";
import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { Stack } from "components/Stack/Stack";
-import { type FC, useState } from "react";
+import { type FC, type JSX, useState } from "react";
import { ResourceCard } from "./ResourceCard";
const countAgents = (resource: WorkspaceResource) => {
diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
index f003a886552e1..95145df9e5240 100644
--- a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
+++ b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
@@ -5,7 +5,7 @@ import type { TemplateExample } from "api/typesGenerated";
import { ExternalImage } from "components/ExternalImage/ExternalImage";
import { Pill } from "components/Pill/Pill";
import type { FC, HTMLAttributes } from "react";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink } from "react-router";
type TemplateExampleCardProps = HTMLAttributes & {
example: TemplateExample;
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx
index cfebbd81eee11..3e808b421b0a7 100644
--- a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx
+++ b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx
@@ -6,7 +6,13 @@ import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import { SimpleTreeView, TreeItem } from "@mui/x-tree-view";
import { DockerIcon } from "components/Icons/DockerIcon";
-import { type CSSProperties, type ElementType, type FC, useState } from "react";
+import {
+ type CSSProperties,
+ type ElementType,
+ type FC,
+ type JSX,
+ useState,
+} from "react";
import type { FileTree } from "utils/filetree";
const isFolder = (content?: FileTree | string): content is FileTree =>
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
index 95716e38827aa..a7abe1c7bc3e8 100644
--- a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
+++ b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
@@ -5,7 +5,7 @@ import { SyntaxHighlighter } from "components/SyntaxHighlighter/SyntaxHighlighte
import set from "lodash/set";
import { linkToTemplate, useLinks } from "modules/navigation";
import { type FC, useCallback, useMemo } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
import type { FileTree } from "utils/filetree";
import type { TemplateVersionFiles } from "utils/templateVersion";
import { TemplateFileTree } from "./TemplateFileTree";
diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Tooltip.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Tooltip.tsx
index fc1ab550a8854..f619c51fac53d 100644
--- a/site/src/modules/workspaces/WorkspaceTiming/Chart/Tooltip.tsx
+++ b/site/src/modules/workspaces/WorkspaceTiming/Chart/Tooltip.tsx
@@ -5,7 +5,7 @@ import MUITooltip, {
type TooltipProps as MUITooltipProps,
} from "@mui/material/Tooltip";
import type { FC, HTMLProps } from "react";
-import { Link, type LinkProps } from "react-router-dom";
+import { Link, type LinkProps } from "react-router";
export type TooltipProps = MUITooltipProps;
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx
index 51d4e8ec910d9..a45213f961cb1 100644
--- a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx
+++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx
@@ -1,7 +1,7 @@
import Link from "@mui/material/Link";
import type { AuditLog } from "api/typesGenerated";
import type { FC } from "react";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink } from "react-router";
import { BuildAuditDescription } from "./BuildAuditDescription";
interface AuditLogDescriptionProps {
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx
index ca610eb01f6a3..4846d5c1c1492 100644
--- a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx
+++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx
@@ -1,7 +1,7 @@
import Link from "@mui/material/Link";
import type { AuditLog } from "api/typesGenerated";
import { type FC, useMemo } from "react";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink } from "react-router";
interface BuildAuditDescriptionProps {
auditLog: AuditLog;
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
index 909fb7cf5646e..3840d868c0b49 100644
--- a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
+++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
@@ -11,7 +11,7 @@ import { Pill } from "components/Pill/Pill";
import { Stack } from "components/Stack/Stack";
import { TimelineEntry } from "components/Timeline/TimelineEntry";
import { type FC, useState } from "react";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink } from "react-router";
import type { ThemeRole } from "theme/roles";
import userAgentParser from "ua-parser-js";
import { AuditLogDescription } from "./AuditLogDescription/AuditLogDescription";
diff --git a/site/src/pages/AuditPage/AuditPage.tsx b/site/src/pages/AuditPage/AuditPage.tsx
index 68f566b4bf054..8bce0d04be3a3 100644
--- a/site/src/pages/AuditPage/AuditPage.tsx
+++ b/site/src/pages/AuditPage/AuditPage.tsx
@@ -7,8 +7,7 @@ import { useDashboard } from "modules/dashboard/useDashboard";
import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
import { useOrganizationsFilterMenu } from "modules/tableFiltering/options";
import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router";
import { pageTitle } from "utils/page";
import { useActionFilterMenu, useResourceTypeFilterMenu } from "./AuditFilter";
import { AuditPageView } from "./AuditPageView";
@@ -69,9 +68,7 @@ const AuditPage: FC = () => {
return (
<>
-
- {pageTitle("Audit")}
-
+ {pageTitle("Audit")}
{
return (
<>
-
- {pageTitle("CLI Auth")}
-
+ {pageTitle("CLI Auth")}
+
- {pageTitle("Create a Template")}
-
+ {pageTitle("Create a Template")}
+
{
diff --git a/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx b/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
index 7f6b5f45aef04..c59b19fd2e0f2 100644
--- a/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
+++ b/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
@@ -20,7 +20,7 @@ type BuildLogsDrawerProps = {
open: boolean;
onClose: () => void;
templateVersion: TemplateVersion | undefined;
- variablesSectionRef: React.RefObject;
+ variablesSectionRef: React.RefObject;
};
export const BuildLogsDrawer: FC = ({
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
index 7ee3dd6609f3c..0cbc3a5b974db 100644
--- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
+++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -25,7 +25,7 @@ import capitalize from "lodash/capitalize";
import { SelectedTemplate } from "pages/CreateWorkspacePage/SelectedTemplate";
import { type FC, useState } from "react";
import { useQuery } from "react-query";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router";
import { docs } from "utils/docs";
import {
displayNameValidator,
@@ -180,7 +180,7 @@ export type CreateTemplateFormProps = (
jobError?: string;
logs?: ProvisionerJobLog[];
allowAdvancedScheduling: boolean;
- variablesSectionRef: React.RefObject;
+ variablesSectionRef: React.RefObject;
showOrganizationPicker?: boolean;
};
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx b/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx
index 031c823d36250..70240da333488 100644
--- a/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx
+++ b/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx
@@ -3,9 +3,8 @@ import type { TemplateVersion } from "api/typesGenerated";
import { FullPageHorizontalForm } from "components/FullPageForm/FullPageHorizontalForm";
import { linkToTemplate, useLinks } from "modules/navigation";
import { type FC, useRef, useState } from "react";
-import { Helmet } from "react-helmet-async";
import { useMutation } from "react-query";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router";
import { pageTitle } from "utils/page";
import { BuildLogsDrawer } from "./BuildLogsDrawer";
import { DuplicateTemplateView } from "./DuplicateTemplateView";
@@ -46,9 +45,7 @@ const CreateTemplatePage: FC = () => {
return (
<>
-
- {pageTitle("Create Template")}
-
+ {pageTitle("Create Template")}
{searchParams.has("fromTemplate") ? (
diff --git a/site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx b/site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx
index 3782333c851f6..306a9f1843ec1 100644
--- a/site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx
+++ b/site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx
@@ -10,7 +10,7 @@ import { Loader } from "components/Loader/Loader";
import { useDashboard } from "modules/dashboard/useDashboard";
import type { FC } from "react";
import { useQuery } from "react-query";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router";
import { CreateTemplateForm } from "./CreateTemplateForm";
import type { CreateTemplatePageViewProps } from "./types";
import { firstVersionFromFile, getFormPermissions, newTemplate } from "./utils";
diff --git a/site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx b/site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx
index e1dcdbcf98cbe..5d809a36cccf0 100644
--- a/site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx
+++ b/site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx
@@ -7,10 +7,9 @@ import {
import { ErrorAlert } from "components/Alert/ErrorAlert";
import { Loader } from "components/Loader/Loader";
import { useDashboard } from "modules/dashboard/useDashboard";
-import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
import type { FC } from "react";
import { useQuery } from "react-query";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router";
import { CreateTemplateForm } from "./CreateTemplateForm";
import type { CreateTemplatePageViewProps } from "./types";
import {
diff --git a/site/src/pages/CreateTemplatePage/TemplateUpload.tsx b/site/src/pages/CreateTemplatePage/TemplateUpload.tsx
index 800cab0ce0512..bc0160dca50b9 100644
--- a/site/src/pages/CreateTemplatePage/TemplateUpload.tsx
+++ b/site/src/pages/CreateTemplatePage/TemplateUpload.tsx
@@ -1,7 +1,7 @@
import Link from "@mui/material/Link";
import { FileUpload } from "components/FileUpload/FileUpload";
import type { FC } from "react";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink } from "react-router";
export interface TemplateUploadProps {
isUploading: boolean;
diff --git a/site/src/pages/CreateTemplatePage/UploadTemplateView.tsx b/site/src/pages/CreateTemplatePage/UploadTemplateView.tsx
index 8294bfc44ed16..619c197c0f297 100644
--- a/site/src/pages/CreateTemplatePage/UploadTemplateView.tsx
+++ b/site/src/pages/CreateTemplatePage/UploadTemplateView.tsx
@@ -7,10 +7,9 @@ import {
} from "api/queries/templates";
import { displayError } from "components/GlobalSnackbar/utils";
import { useDashboard } from "modules/dashboard/useDashboard";
-import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
import type { FC } from "react";
import { useMutation, useQuery } from "react-query";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
import { CreateTemplateForm } from "./CreateTemplateForm";
import type { CreateTemplatePageViewProps } from "./types";
import { firstVersionFromFile, getFormPermissions, newTemplate } from "./utils";
diff --git a/site/src/pages/CreateTemplatePage/types.ts b/site/src/pages/CreateTemplatePage/types.ts
index 2bf4894ff884f..418bf72b24a3e 100644
--- a/site/src/pages/CreateTemplatePage/types.ts
+++ b/site/src/pages/CreateTemplatePage/types.ts
@@ -3,7 +3,7 @@ import type { CreateTemplateOptions } from "api/queries/templates";
export type CreateTemplatePageViewProps = {
onCreateTemplate: (options: CreateTemplateOptions) => Promise;
onOpenBuildLogsDrawer: () => void;
- variablesSectionRef: React.RefObject;
+ variablesSectionRef: React.RefObject;
error: unknown;
isCreating: boolean;
};
diff --git a/site/src/pages/CreateTokenPage/CreateTokenForm.tsx b/site/src/pages/CreateTokenPage/CreateTokenForm.tsx
index cb01ebd82ed87..6df579f288952 100644
--- a/site/src/pages/CreateTokenPage/CreateTokenForm.tsx
+++ b/site/src/pages/CreateTokenPage/CreateTokenForm.tsx
@@ -12,7 +12,7 @@ import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import type { FormikContextType } from "formik";
import { type FC, useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
import { getFormHelpers, onChangeTrimmed } from "utils/formUtils";
import {
type CreateTokenData,
diff --git a/site/src/pages/CreateTokenPage/CreateTokenPage.tsx b/site/src/pages/CreateTokenPage/CreateTokenPage.tsx
index fecf0b8730359..236c57b1d1664 100644
--- a/site/src/pages/CreateTokenPage/CreateTokenPage.tsx
+++ b/site/src/pages/CreateTokenPage/CreateTokenPage.tsx
@@ -7,9 +7,8 @@ import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
import { Loader } from "components/Loader/Loader";
import { useFormik } from "formik";
import { type FC, useState } from "react";
-import { Helmet } from "react-helmet-async";
import { useMutation, useQuery } from "react-query";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
import { pageTitle } from "utils/page";
import { CreateTokenForm } from "./CreateTokenForm";
import { type CreateTokenData, NANO_HOUR } from "./utils";
@@ -89,9 +88,8 @@ export const CreateTokenPage: FC = () => {
return (
<>
-
- {pageTitle("Create Token")}
-
+ {pageTitle("Create Token")}
+
{tokenFetchFailed && {
return (
-
- {pageTitle("Create User")}
-
+ {pageTitle("Create User")}
{
return (
<>
-
- {pageTitle(title)}
-
+ {pageTitle(title)}
+
{isLoadingFormData || isLoadingExternalAuth || autoCreateReady ? (
- {pageTitle("Appearance Settings")}
-
+ {pageTitle("Appearance Settings")}
{
return (
<>
-
- {pageTitle("External Authentication Settings")}
-
+ {pageTitle("External Authentication Settings")}
+
- {pageTitle("General Settings")}
-
+ {pageTitle("General Settings")}
+
{
return (
<>
-
- {pageTitle("Organization IdP Sync")}
-
+ {pageTitle("Organization IdP Sync")}
diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePage.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePage.tsx
index e6955c228467c..0bdf7fcc2ea9d 100644
--- a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePage.tsx
+++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePage.tsx
@@ -1,9 +1,8 @@
import { API } from "api/api";
import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
import { useMutation } from "react-query";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
import { pageTitle } from "utils/page";
import { AddNewLicensePageView } from "./AddNewLicensePageView";
@@ -37,9 +36,7 @@ const AddNewLicensePage: FC = () => {
return (
<>
-
- {pageTitle("License Settings")}
-
+ {pageTitle("License Settings")}
{
return (
<>
-
- {pageTitle("License Settings")}
-
+ {pageTitle("License Settings")}
+
{
return (
<>
-
- {pageTitle("Network Settings")}
-
+ {pageTitle("Network Settings")}
+
- {pageTitle("Notifications Settings")}
-
+ {pageTitle("Notifications Settings")}
+
{
return (
<>
-
- {pageTitle("New OAuth2 Application")}
-
+ {pageTitle("New OAuth2 Application")}
{
return (
<>
-
- {pageTitle("Edit OAuth2 Application")}
-
+ {pageTitle("Edit OAuth2 Application")}
{
return (
<>
-
- {pageTitle("OAuth2 Applications")}
-
+ {pageTitle("OAuth2 Applications")}
+
{
return (
<>
-
- {pageTitle("Observability Settings")}
-
+ {pageTitle("Observability Settings")}
+
{
return (
<>
-
- {pageTitle("Premium Features")}
-
+ {pageTitle("Premium Features")}
+
- {pageTitle("Security Settings")}
-
+ {pageTitle("Security Settings")}
+
{
return (
<>
-
- {pageTitle("User Authentication Settings")}
-
+ {pageTitle("User Authentication Settings")}
+
- {pageTitle("Create Group")}
-
+ {pageTitle("Create Group")}
+
{
const newGroup = await createGroupMutation.mutateAsync(data);
diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.tsx
index 389dc6e0e89cb..476057bacb1a7 100644
--- a/site/src/pages/GroupsPage/CreateGroupPageView.tsx
+++ b/site/src/pages/GroupsPage/CreateGroupPageView.tsx
@@ -9,7 +9,7 @@ import { Margins } from "components/Margins/Margins";
import { Stack } from "components/Stack/Stack";
import { type FormikTouched, useFormik } from "formik";
import type { FC } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
import { getFormHelpers, onChangeTrimmed } from "utils/formUtils";
import * as Yup from "yup";
diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx
index 4af3ce30389fa..a5b3cb726aee5 100644
--- a/site/src/pages/GroupsPage/GroupPage.tsx
+++ b/site/src/pages/GroupsPage/GroupPage.tsx
@@ -47,9 +47,8 @@ import {
} from "components/TableToolbar/TableToolbar";
import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
import { type FC, useState } from "react";
-import { Helmet } from "react-helmet-async";
import { useMutation, useQuery, useQueryClient } from "react-query";
-import { Link as RouterLink, useNavigate, useParams } from "react-router-dom";
+import { Link as RouterLink, useNavigate, useParams } from "react-router";
import { isEveryoneGroup } from "utils/groups";
import { pageTitle } from "utils/page";
@@ -73,13 +72,9 @@ export const GroupPage: FC = () => {
const canUpdateGroup = permissions ? permissions.canUpdateGroup : false;
const helmet = (
-
-
- {pageTitle(
- (groupData?.display_name || groupData?.name) ?? "Loading...",
- )}
-
-
+
+ {pageTitle((groupData?.display_name || groupData?.name) ?? "Loading...")}
+
);
if (groupQuery.error) {
diff --git a/site/src/pages/GroupsPage/GroupsPage.tsx b/site/src/pages/GroupsPage/GroupsPage.tsx
index 6313b8e450c9e..ac832366be63c 100644
--- a/site/src/pages/GroupsPage/GroupsPage.tsx
+++ b/site/src/pages/GroupsPage/GroupsPage.tsx
@@ -4,7 +4,6 @@ import { displayError } from "components/GlobalSnackbar/utils";
import { useAuthenticated } from "contexts/auth/RequireAuth";
import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
import { type FC, useEffect } from "react";
-import { Helmet } from "react-helmet-async";
import { useQuery } from "react-query";
import { pageTitle } from "utils/page";
import GroupsPageView from "./GroupsPageView";
@@ -24,9 +23,7 @@ export const GroupsPage: FC = () => {
return (
<>
-
- {pageTitle("Groups")}
-
+ {pageTitle("Groups")}
{
navigate(`/groups/${groupName}`);
};
- const helmet = (
-
- {pageTitle("Settings Group")}
-
- );
+ const helmet = {pageTitle("Settings Group")} ;
if (groupQuery.error) {
return
- {pageTitle("Access URL - Health")}
-
+ {pageTitle("Access URL - Health")}
diff --git a/site/src/pages/HealthPage/Content.tsx b/site/src/pages/HealthPage/Content.tsx
index dcc645e1c08e8..a47e6bd6b30fd 100644
--- a/site/src/pages/HealthPage/Content.tsx
+++ b/site/src/pages/HealthPage/Content.tsx
@@ -155,7 +155,7 @@ export const SectionLabel: FC> = (props) => {
};
type PillProps = HTMLAttributes & {
- icon: ReactElement;
+ icon: ReactElement<{ className?: string }>;
};
export const Pill = forwardRef((props, ref) => {
diff --git a/site/src/pages/HealthPage/DERPPage.tsx b/site/src/pages/HealthPage/DERPPage.tsx
index 3daa403c99f36..f6040c6bcffce 100644
--- a/site/src/pages/HealthPage/DERPPage.tsx
+++ b/site/src/pages/HealthPage/DERPPage.tsx
@@ -9,8 +9,7 @@ import type {
} from "api/typesGenerated";
import { Alert } from "components/Alert/Alert";
import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
-import { Link, useOutletContext } from "react-router-dom";
+import { Link, useOutletContext } from "react-router";
import { pageTitle } from "utils/page";
import {
BooleanPill,
@@ -52,9 +51,7 @@ export const DERPPage: FC = () => {
return (
<>
-
- {pageTitle("DERP - Health")}
-
+ {pageTitle("DERP - Health")}
diff --git a/site/src/pages/HealthPage/DERPRegionPage.tsx b/site/src/pages/HealthPage/DERPRegionPage.tsx
index 8c4a078d1d112..c4cd6f53c239d 100644
--- a/site/src/pages/HealthPage/DERPRegionPage.tsx
+++ b/site/src/pages/HealthPage/DERPRegionPage.tsx
@@ -12,8 +12,7 @@ import type {
} from "api/typesGenerated";
import { Alert } from "components/Alert/Alert";
import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
-import { Link, useOutletContext, useParams } from "react-router-dom";
+import { Link, useOutletContext, useParams } from "react-router";
import { getLatencyColor } from "utils/latency";
import { pageTitle } from "utils/page";
import {
@@ -41,9 +40,7 @@ export const DERPRegionPage: FC = () => {
return (
<>
-
- {pageTitle(region!.RegionName, "Health")}
-
+ {pageTitle(region!.RegionName, "Health")}
diff --git a/site/src/pages/HealthPage/DatabasePage.tsx b/site/src/pages/HealthPage/DatabasePage.tsx
index 1949e2766c807..f6836c5c01a46 100644
--- a/site/src/pages/HealthPage/DatabasePage.tsx
+++ b/site/src/pages/HealthPage/DatabasePage.tsx
@@ -1,7 +1,6 @@
import type { HealthcheckReport } from "api/typesGenerated";
import { Alert } from "components/Alert/Alert";
-import { Helmet } from "react-helmet-async";
-import { useOutletContext } from "react-router-dom";
+import { useOutletContext } from "react-router";
import { pageTitle } from "utils/page";
import {
GridData,
@@ -21,9 +20,7 @@ export const DatabasePage = () => {
return (
<>
-
- {pageTitle("Database - Health")}
-
+ {pageTitle("Database - Health")}
diff --git a/site/src/pages/HealthPage/HealthLayout.tsx b/site/src/pages/HealthPage/HealthLayout.tsx
index 2c566500d892b..607c86f653d35 100644
--- a/site/src/pages/HealthPage/HealthLayout.tsx
+++ b/site/src/pages/HealthPage/HealthLayout.tsx
@@ -12,9 +12,8 @@ import { type ClassName, useClassName } from "hooks/useClassName";
import kebabCase from "lodash/fp/kebabCase";
import { DashboardFullPage } from "modules/dashboard/DashboardLayout";
import { type FC, Suspense } from "react";
-import { Helmet } from "react-helmet-async";
import { useMutation, useQuery, useQueryClient } from "react-query";
-import { NavLink, Outlet } from "react-router-dom";
+import { NavLink, Outlet } from "react-router";
import { createDayString } from "utils/createDayString";
import { pageTitle } from "utils/page";
import { HealthIcon } from "./Content";
@@ -44,9 +43,7 @@ export const HealthLayout: FC = () => {
return (
<>
-
- {pageTitle("Health")}
-
+ {pageTitle("Health")}
{healthStatus ? (
diff --git a/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx b/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
index e13e0adc810dc..85d6b9d8d4e4d 100644
--- a/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
+++ b/site/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
@@ -2,8 +2,7 @@ import type { HealthcheckReport } from "api/typesGenerated";
import { Alert } from "components/Alert/Alert";
import { Provisioner } from "modules/provisioners/Provisioner";
import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
-import { useOutletContext } from "react-router-dom";
+import { useOutletContext } from "react-router";
import { pageTitle } from "utils/page";
import {
Header,
@@ -20,9 +19,7 @@ export const ProvisionerDaemonsPage: FC = () => {
return (
<>
-
- {pageTitle("Provisioner Daemons - Health")}
-
+ {pageTitle("Provisioner Daemons - Health")}
diff --git a/site/src/pages/HealthPage/WebsocketPage.tsx b/site/src/pages/HealthPage/WebsocketPage.tsx
index efbb1f052caa8..962df6d116dd3 100644
--- a/site/src/pages/HealthPage/WebsocketPage.tsx
+++ b/site/src/pages/HealthPage/WebsocketPage.tsx
@@ -3,8 +3,7 @@ import CodeOutlined from "@mui/icons-material/CodeOutlined";
import Tooltip from "@mui/material/Tooltip";
import type { HealthcheckReport } from "api/typesGenerated";
import { Alert } from "components/Alert/Alert";
-import { Helmet } from "react-helmet-async";
-import { useOutletContext } from "react-router-dom";
+import { useOutletContext } from "react-router";
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
import { pageTitle } from "utils/page";
import {
@@ -24,9 +23,7 @@ export const WebsocketPage = () => {
return (
<>
-
- {pageTitle("Websocket - Health")}
-
+ {pageTitle("Websocket - Health")}
diff --git a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
index 69ff49e1ca283..ecba9984d8b4f 100644
--- a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
+++ b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
@@ -5,8 +5,7 @@ import Tooltip from "@mui/material/Tooltip";
import type { HealthcheckReport } from "api/typesGenerated";
import { Alert } from "components/Alert/Alert";
import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
-import { useOutletContext } from "react-router-dom";
+import { useOutletContext } from "react-router";
import { createDayString } from "utils/createDayString";
import { pageTitle } from "utils/page";
import {
@@ -28,9 +27,7 @@ export const WorkspaceProxyPage: FC = () => {
return (
<>
-
- {pageTitle("Workspace Proxy - Health")}
-
+ {pageTitle("Workspace Proxy - Health")}
diff --git a/site/src/pages/IconsPage/IconsPage.tsx b/site/src/pages/IconsPage/IconsPage.tsx
index 50004aa07bae3..5d193644b8fe0 100644
--- a/site/src/pages/IconsPage/IconsPage.tsx
+++ b/site/src/pages/IconsPage/IconsPage.tsx
@@ -16,7 +16,6 @@ import {
} from "components/PageHeader/PageHeader";
import { Stack } from "components/Stack/Stack";
import { type FC, type ReactNode, useMemo, useState } from "react";
-import { Helmet } from "react-helmet-async";
import {
defaultParametersForBuiltinIcons,
parseImageParameters,
@@ -74,9 +73,8 @@ export const IconsPage: FC = () => {
return (
<>
-
- {pageTitle("Icons")}
-
+ {pageTitle("Icons")}
+
{
return (
<>
-
- Sign in to {applicationName}
-
+ Sign in to {applicationName}
+
{
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx
index 9bb27679689fa..63b6de8edb495 100644
--- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx
+++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CreateEditRolePage.tsx
@@ -10,9 +10,8 @@ import { displayError } from "components/GlobalSnackbar/utils";
import { Loader } from "components/Loader/Loader";
import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
import { useMutation, useQuery, useQueryClient } from "react-query";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
import { pageTitle } from "utils/page";
import CreateEditRolePageView from "./CreateEditRolePageView";
@@ -45,13 +44,11 @@ export const CreateEditRolePage: FC = () => {
return (
<>
-
-
- {pageTitle(
- role !== undefined ? "Edit Custom Role" : "Create Custom Role",
- )}
-
-
+
+ {pageTitle(
+ role !== undefined ? "Edit Custom Role" : "Create Custom Role",
+ )}
+
{
return (
<>
-
- {pageTitle("Custom Roles")}
-
+ {pageTitle("Custom Roles")}
= ({
canAssignOrgRole,
isCustomRolesEnabled,
}) => {
- const theme = useTheme();
return (
{!isCustomRolesEnabled && (
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPage.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPage.tsx
index 257a404a3b7ea..04730b7e7f980 100644
--- a/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPage.tsx
+++ b/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPage.tsx
@@ -1,8 +1,7 @@
import { createGroup } from "api/queries/groups";
import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
import { useMutation, useQueryClient } from "react-query";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
import { pageTitle } from "utils/page";
import CreateGroupPageView from "./CreateGroupPageView";
@@ -16,9 +15,8 @@ export const CreateGroupPage: FC = () => {
return (
<>
-
- {pageTitle("Create Group")}
-
+ {pageTitle("Create Group")}
+
{
const newGroup = await createGroupMutation.mutateAsync(data);
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx
index 87b17cf2f4e36..0221d8d8c3192 100644
--- a/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx
+++ b/site/src/pages/ManagementSettingsPage/GroupsPage/CreateGroupPageView.tsx
@@ -12,7 +12,7 @@ import { IconField } from "components/IconField/IconField";
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
import { useFormik } from "formik";
import type { FC } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
import { getFormHelpers, onChangeTrimmed } from "utils/formUtils";
import * as Yup from "yup";
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx
index 6c226a1dba9ff..d19b9582d2da9 100644
--- a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx
+++ b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx
@@ -46,9 +46,8 @@ import {
} from "components/TableToolbar/TableToolbar";
import { MemberAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
import { type FC, useState } from "react";
-import { Helmet } from "react-helmet-async";
import { useMutation, useQuery, useQueryClient } from "react-query";
-import { Link as RouterLink, useNavigate, useParams } from "react-router-dom";
+import { Link as RouterLink, useNavigate, useParams } from "react-router";
import { isEveryoneGroup } from "utils/groups";
import { pageTitle } from "utils/page";
@@ -72,13 +71,9 @@ export const GroupPage: FC = () => {
const canUpdateGroup = permissions ? permissions.canUpdateGroup : false;
const helmet = (
-
-
- {pageTitle(
- (groupData?.display_name || groupData?.name) ?? "Loading...",
- )}
-
-
+
+ {pageTitle((groupData?.display_name || groupData?.name) ?? "Loading...")}
+
);
if (groupQuery.error) {
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupSettingsPage.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupSettingsPage.tsx
index 17f02c5d42f0e..1797ecaaa299a 100644
--- a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupSettingsPage.tsx
+++ b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupSettingsPage.tsx
@@ -4,9 +4,8 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
import { displayError } from "components/GlobalSnackbar/utils";
import { Loader } from "components/Loader/Loader";
import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
import { useMutation, useQuery, useQueryClient } from "react-query";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
import { pageTitle } from "utils/page";
import GroupSettingsPageView from "./GroupSettingsPageView";
@@ -24,11 +23,7 @@ export const GroupSettingsPage: FC = () => {
navigate(`/organizations/${organization}/groups/${groupName}`);
};
- const helmet = (
-
- {pageTitle("Settings Group")}
-
- );
+ const helmet = {pageTitle("Settings Group")} ;
if (groupQuery.error) {
return
-
- {pageTitle("Groups", organization.display_name || organization.name)}
-
-
+
+ {pageTitle("Groups", organization.display_name || organization.name)}
+
{
return (
<>
-
- {pageTitle("IdP Sync")}
-
+ {pageTitle("IdP Sync")}
{
}
const helmet = organization && (
-
-
- {pageTitle("Members", organization.display_name || organization.name)}
-
-
+
+ {pageTitle("Members", organization.display_name || organization.name)}
+
);
return (
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx
index 1cc009e1f4de7..55be60971927a 100644
--- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx
+++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx
@@ -8,7 +8,6 @@ import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import { getErrorMessage } from "api/errors";
-import type { GroupsByUserId } from "api/queries/groups";
import type {
Group,
OrganizationMemberWithUserData,
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx
index 8d97a49e78bd1..0f510e709e459 100644
--- a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx
+++ b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx
@@ -5,9 +5,8 @@ import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
import { useDashboard } from "modules/dashboard/useDashboard";
import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
import { useQuery } from "react-query";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
import { pageTitle } from "utils/page";
import { OrganizationProvisionersPageView } from "./OrganizationProvisionersPageView";
@@ -27,11 +26,10 @@ const OrganizationProvisionersPage: FC = () => {
return (
<>
-
-
- {pageTitle("Members", organization.display_name || organization.name)}
-
-
+
+ {pageTitle("Members", organization.display_name || organization.name)}
+
+
= ({ redirect }) => {
return (
<>
-
- Reset Password - {applicationName}
-
+ Reset Password - {applicationName}
diff --git a/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx b/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx
index 0a097971b6626..c8a9f95fd2fa9 100644
--- a/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx
+++ b/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx
@@ -2,16 +2,13 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import LoadingButton from "@mui/lab/LoadingButton";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
-import { getErrorMessage } from "api/errors";
import { requestOneTimePassword } from "api/queries/users";
import { ErrorAlert } from "components/Alert/ErrorAlert";
import { CustomLogo } from "components/CustomLogo/CustomLogo";
-import { displayError } from "components/GlobalSnackbar/utils";
import { Stack } from "components/Stack/Stack";
import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
import { useMutation } from "react-query";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink } from "react-router";
import { getApplicationName } from "utils/appearance";
const RequestOTPPage: FC = () => {
@@ -20,9 +17,7 @@ const RequestOTPPage: FC = () => {
return (
<>
-
- Reset Password - {applicationName}
-
+ Reset Password - {applicationName}
- {pageTitle("Set up your account")}
-
+ {pageTitle("Set up your account")}
+
{
return (
<>
-
- {pageTitle(starterTemplate?.name ?? exampleId)}
-
+ {pageTitle(starterTemplate?.name ?? exampleId)}
-
- {pageTitle(template.name, "Documentation")}
-
+ {pageTitle(template.name, "Documentation")}
{
return (
<>
-
- {pageTitle(template.name)}
-
+ {pageTitle(template.name)}
+
= ({
return (
<>
-
- {pageTitle(template.name)}
-
+ {pageTitle(template.name)}
+
{!buttonValues || !templateParameters ? (
- {getTemplatePageTitle("Source Code", template)}
-
+ {getTemplatePageTitle("Source Code", template)}
{shouldDisplayFiles ? (
= {
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
index 097b8fce513e7..c4075415edf63 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -53,9 +53,8 @@ import {
type ReactNode,
useId,
} from "react";
-import { Helmet } from "react-helmet-async";
import { useQuery } from "react-query";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router";
import { getLatencyColor } from "utils/latency";
import { getTemplatePageTitle } from "../utils";
import { DateRange as DailyPicker, type DateRangeValue } from "./DateRange";
@@ -101,9 +100,8 @@ export default function TemplateInsightsPage() {
return (
<>
-
- {getTemplatePageTitle("Insights", template)}
-
+ {getTemplatePageTitle("Insights", template)}
+
diff --git a/site/src/pages/TemplatePage/TemplateLayout.tsx b/site/src/pages/TemplatePage/TemplateLayout.tsx
index 421bdfb09c9cd..c5c0657251b71 100644
--- a/site/src/pages/TemplatePage/TemplateLayout.tsx
+++ b/site/src/pages/TemplatePage/TemplateLayout.tsx
@@ -12,7 +12,7 @@ import {
useContext,
} from "react";
import { useQuery } from "react-query";
-import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
+import { Outlet, useLocation, useNavigate, useParams } from "react-router";
import { TemplatePageHeader } from "./TemplatePageHeader";
const templatePermissions = (
diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
index b04a2c6d103f5..8d681787f3de9 100644
--- a/site/src/pages/TemplatePage/TemplatePageHeader.tsx
+++ b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
@@ -33,7 +33,7 @@ import { Stack } from "components/Stack/Stack";
import { linkToTemplate, useLinks } from "modules/navigation";
import type { FC } from "react";
import { useQuery } from "react-query";
-import { Link as RouterLink, useNavigate } from "react-router-dom";
+import { Link as RouterLink, useNavigate } from "react-router";
import { useDeletionDialogState } from "./useDeletionDialogState";
type TemplateMenuProps = {
@@ -168,7 +168,6 @@ export const TemplatePageHeader: FC = ({
onDeleteTemplate,
}) => {
const getLink = useLinks();
- const hasIcon = template.icon && template.icon !== "";
const templateLink = getLink(
linkToTemplate(template.organization_name, template.name),
);
diff --git a/site/src/pages/TemplatePage/TemplateRedirectController.tsx b/site/src/pages/TemplatePage/TemplateRedirectController.tsx
index c4164746d1a6a..b81c26e343387 100644
--- a/site/src/pages/TemplatePage/TemplateRedirectController.tsx
+++ b/site/src/pages/TemplatePage/TemplateRedirectController.tsx
@@ -1,7 +1,7 @@
import type { Organization } from "api/typesGenerated";
import { useDashboard } from "modules/dashboard/useDashboard";
import type { FC } from "react";
-import { Navigate, Outlet, useLocation, useParams } from "react-router-dom";
+import { Navigate, Outlet, useLocation, useParams } from "react-router";
export const TemplateRedirectController: FC = () => {
const { organizations, showOrganizations } = useDashboard();
diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateStats.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateStats.tsx
index 737a9be5a2ac4..ade2e7ccf7711 100644
--- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateStats.tsx
+++ b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateStats.tsx
@@ -1,7 +1,7 @@
import type { Template, TemplateVersion } from "api/typesGenerated";
import { Stats, StatsItem } from "components/Stats/Stats";
import type { FC } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
import { createDayString } from "utils/createDayString";
import {
formatTemplateActiveDevelopers,
diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.tsx
index d118ce0a3e188..ac76976cdc0b8 100644
--- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPage.tsx
@@ -1,7 +1,6 @@
import { API } from "api/api";
import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
import type { FC } from "react";
-import { Helmet } from "react-helmet-async";
import { useQuery } from "react-query";
import { getTemplatePageTitle } from "../utils";
import { TemplateSummaryPageView } from "./TemplateSummaryPageView";
@@ -15,9 +14,8 @@ export const TemplateSummaryPage: FC = () => {
return (
<>
-
- {getTemplatePageTitle("Template", template)}
-
+ {getTemplatePageTitle("Template", template)}
+
{
return (
<>
-
- {getTemplatePageTitle("Versions", template)}
-
+ {getTemplatePageTitle("Versions", template)}
+
{
return (
<>
-
- {pageTitle(template.name, "General Settings")}
-
+ {pageTitle(template.name, "General Settings")}
+
{
return (
<>
-
- {pageTitle(template.name, "Permissions")}
-
+ {pageTitle(template.name, "Permissions")}
+
{!isTemplateRBACEnabled ? (
{
return (
<>
-
- {pageTitle(template.name, "Schedule")}
-
+ {pageTitle(template.name, "Schedule")}
+
{
return (
<>
-
- {pageTitle(templateName, "Settings")}
-
+ {pageTitle(templateName, "Settings")}
diff --git a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPage.tsx b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPage.tsx
index dc6cf5e4f6c8d..bd3e82ff9bfa1 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPage.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPage.tsx
@@ -14,9 +14,8 @@ import { displaySuccess } from "components/GlobalSnackbar/utils";
import { Loader } from "components/Loader/Loader";
import { linkToTemplate, useLinks } from "modules/navigation";
import { type FC, useCallback } from "react";
-import { Helmet } from "react-helmet-async";
import { useMutation, useQuery, useQueryClient } from "react-query";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
import { pageTitle } from "utils/page";
import { useTemplateSettings } from "../TemplateSettingsLayout";
import { TemplateVariablesPageView } from "./TemplateVariablesPageView";
@@ -86,9 +85,7 @@ export const TemplateVariablesPage: FC = () => {
return (
<>
-
- {pageTitle(template.name, "Template variables")}
-
+ {pageTitle(template.name, "Template variables")}
= ({
}, [triggerPreview]);
// Automatically switch to the template preview tab when the build succeeds.
- const previousVersion = useRef();
+ const previousVersion = useRef(undefined);
useEffect(() => {
if (!previousVersion.current) {
previousVersion.current = templateVersion;
@@ -546,6 +546,7 @@ export const TemplateVersionEditor: FC = ({
}}
>