chore: use Link component

jaaydenh · jaaydenh · commit 16665e2048ed · 2025-01-22T20:55:58.000Z
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
@@ -6,9 +6,9 @@ import {
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
+import { Link } from "components/Link/Link";
 import { Loader } from "components/Loader/Loader";
 import { Paywall } from "components/Paywall/Paywall";
-import { SquareArrowOutUpRight } from "lucide-react";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { type FC, useEffect } from "react";
@@ -62,13 +62,9 @@ export const IdpOrgSyncPage: FC = () => {
 						<p className="flex flex-row gap-1 text-sm text-content-secondary font-medium m-0">
 							Automatically assign users to an organization based on their IdP
 							claims.
-							<a
-								href={docs("/admin/users/idp-sync")}
-								className="flex flex-row text-content-link items-center gap-1 no-underline hover:underline visited:text-content-link"
-							>
+							<Link href={docs("/admin/users/idp-sync#organization-sync")}>
 								View docs
-								<SquareArrowOutUpRight size={14} />
-							</a>
+							</Link>
 						</p>
 					</div>
 					<ExportPolicyButton syncSettings={orgSyncSettingsData} />
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -28,14 +28,15 @@ import {
 } from "components/HelpTooltip/HelpTooltip";
 import { Input } from "components/Input/Input";
 import { Label } from "components/Label/Label";
+import { Link } from "components/Link/Link";
 import {
 	MultiSelectCombobox,
 	type Option,
 } from "components/MultiSelectCombobox/MultiSelectCombobox";
 import { Spinner } from "components/Spinner/Spinner";
 import { Switch } from "components/Switch/Switch";
 import { useFormik } from "formik";
-import { Plus, SquareArrowOutUpRight, Trash } from "lucide-react";
+import { Plus, Trash } from "lucide-react";
 import { type FC, useId, useState } from "react";
 import { docs } from "utils/docs";
 import * as Yup from "yup";
@@ -207,6 +208,7 @@ export const IdpOrgSyncPageView: FC<IdpSyncPageViewProps> = ({
 								<div />
 								<Button
 									type="submit"
+									className="min-w-fit"
 									disabled={!idpOrgName || coderOrgs.length === 0}
 									onClick={async () => {
 										const newSyncSettings = {
@@ -307,15 +309,11 @@ const IdpMappingTable: FC<IdpMappingTableProps> = ({ isEmpty, children }) => {
 										message={"No organization mappings"}
 										isCompact
 										cta={
-											<Button variant="outline" asChild>
-												<a
-													href={docs("/admin/users/idp-sync")}
-													className="no-underline"
-												>
-													<SquareArrowOutUpRight size={14} />
-													How to set up IdP organization sync
-												</a>
-											</Button>
+											<Link
+												href={docs("/admin/users/idp-sync#organization-sync")}
+											>
+												How to set up IdP organization sync
+											</Link>
 										}
 									/>
 								</TableCell>
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpGroupSyncForm.tsx
@@ -210,6 +210,7 @@ export const IdpGroupSyncForm = ({
 						<div />
 						<Button
 							type="submit"
+							className="min-w-fit"
 							disabled={!idpGroupName || coderGroups.length === 0}
 							onClick={() => {
 								const newSyncSettings = {
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpMappingTable.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpMappingTable.tsx
@@ -43,7 +43,11 @@ export const IdpMappingTable: FC<IdpMappingTableProps> = ({
 											message={`No ${type.toLocaleLowerCase()} mappings`}
 											isCompact
 											cta={
-												<Link href={docs("/admin/users/idp-sync")}>
+												<Link
+													href={docs(
+														`/admin/users/idp-sync#${type.toLocaleLowerCase()}-sync`,
+													)}
+												>
 													How to setup IdP {type.toLocaleLowerCase()} sync
 												</Link>
 											}
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpRoleSyncForm.tsx
@@ -155,6 +155,7 @@ export const IdpRoleSyncForm = ({
 						<div />
 						<Button
 							type="submit"
+							className="min-w-fit"
 							disabled={!idpRoleName || coderRoles.length === 0}
 							onClick={() => {
 								const newSyncSettings = {
