feat: add help tooltip

jaaydenh · jaaydenh · commit 39483713d7fa · 2024-09-01T19:22:47.000Z
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncHelpTooltip.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncHelpTooltip.tsx
@@ -0,0 +1,31 @@
+import {
+	HelpTooltip,
+	HelpTooltipContent,
+	HelpTooltipLink,
+	HelpTooltipLinksGroup,
+	HelpTooltipText,
+	HelpTooltipTitle,
+	HelpTooltipTrigger,
+} from "components/HelpTooltip/HelpTooltip";
+import type { FC } from "react";
+import { docs } from "utils/docs";
+
+export const IdpSyncHelpTooltip: FC = () => {
+	return (
+		<HelpTooltip>
+			<HelpTooltipTrigger />
+			<HelpTooltipContent>
+				<HelpTooltipTitle>What is IdP Sync?</HelpTooltipTitle>
+				<HelpTooltipText>
+					View the current mappings between your external OIDC provider and
+					Coder. Use the Coder CLI to configure these mappings.
+				</HelpTooltipText>
+				<HelpTooltipLinksGroup>
+					<HelpTooltipLink href={docs("/admin/auth#group-sync-enterprise")}>
+						Configure IdP Sync
+					</HelpTooltipLink>
+				</HelpTooltipLinksGroup>
+			</HelpTooltipContent>
+		</HelpTooltip>
+	);
+};
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPage.tsx
@@ -13,9 +13,10 @@ import { type FC, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery, useQueryClient } from "react-query";
 import { Link as RouterLink, useParams } from "react-router-dom";
+import { docs } from "utils/docs";
 import { pageTitle } from "utils/page";
 import { useOrganizationSettings } from "../ManagementSettingsLayout";
-import { docs } from "utils/docs";
+import { IdpSyncHelpTooltip } from "./IdpSyncHelpTooltip";
 import IdpSyncPageView from "./IdpSyncPageView";
 
 export const IdpSyncPage: FC = () => {
@@ -59,12 +60,13 @@ export const IdpSyncPage: FC = () => {
 				<SettingsHeader
 					title="IdP Sync"
 					description="Group and role sync mappings (configured outside Coder)."
+					tooltip={<IdpSyncHelpTooltip />}
 				/>
 				<Stack direction="row" spacing={2}>
 					<Button
 						startIcon={<LaunchOutlined />}
 						component="a"
-						href={docs("/cli/server#--notifications-webhook-endpoint")}
+						href={docs("/admin/auth#group-sync-enterprise")}
 						target="_blank"
 					>
 						Setup IdP Sync
diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx
@@ -103,9 +103,7 @@ const RoleTable: FC<RoleTableProps> = ({ roles }) => {
 											<Button
 												startIcon={<LaunchOutlined />}
 												component="a"
-												href={docs(
-													"/cli/server#--notifications-webhook-endpoint",
-												)}
+												href={docs("/admin/auth#group-sync-enterprise")}
 												target="_blank"
 											>
 												How to setup IdP role sync
diff --git a/site/src/pages/ManagementSettingsPage/SidebarView.tsx b/site/src/pages/ManagementSettingsPage/SidebarView.tsx
@@ -279,7 +279,7 @@ const OrganizationSettingsNavigation: FC<
 						<SidebarNavSubItem
 							href={urlForSubpage(organization.name, "idp-sync")}
 						>
-							Idp Sync
+							IdP Sync
 						</SidebarNavSubItem>
 					)}
 				</Stack>

Original file line number	Diff line number	Diff line change
`@@ -279,7 +279,7 @@ const OrganizationSettingsNavigation: FC<`
`279`	`279`	`<SidebarNavSubItem`
`280`	`280`	`href={urlForSubpage(organization.name, "idp-sync")}`
`281`	`281`	`>`
`282`		`- Idp Sync`
	`282`	`+ IdP Sync`
`283`	`283`	`</SidebarNavSubItem>`
`284`	`284`	`)}`
`285`	`285`	`</Stack>`