feat: add help tooltip

jaaydenh · jaaydenh · commit 82983463f837 · 2024-09-05T23:06:25.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
@@ -286,7 +286,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
`@@ -286,7 +286,7 @@ const OrganizationSettingsNavigation: FC<`
`286`	`286`	`<SidebarNavSubItem`
`287`	`287`	`href={urlForSubpage(organization.name, "idp-sync")}`
`288`	`288`	`>`
`289`		`- Idp Sync`
	`289`	`+ IdP Sync`
`290`	`290`	`</SidebarNavSubItem>`
`291`	`291`	`)}`
`292`	`292`	`</Stack>`