chore: design changes for admin settings menu dropdown

jaaydenh · jaaydenh · commit 67b8927d2cca · 2024-12-20T17:43:36.000Z
diff --git a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx
@@ -19,12 +19,14 @@ type FeatureStageBadgeProps = Readonly<
 	Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
 		contentType: keyof typeof featureStageBadgeTypes;
 		size?: "sm" | "md" | "lg";
+		showTooltip?: boolean;
 	}
 >;
 
 export const FeatureStageBadge: FC<FeatureStageBadgeProps> = ({
 	contentType,
 	size = "md",
+	showTooltip = true, // This is a temporary until the deprecated popover is removed
 	...delegatedProps
 }) => {
 	return (
@@ -49,24 +51,26 @@ export const FeatureStageBadge: FC<FeatureStageBadgeProps> = ({
 				)}
 			</PopoverTrigger>
 
-			<HelpTooltipContent
-				anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
-				transformOrigin={{ vertical: "top", horizontal: "center" }}
-			>
-				<p css={styles.tooltipDescription}>
-					This feature has not yet reached general availability (GA).
-				</p>
-
-				<Link
-					href={docs("/contributing/feature-stages")}
-					target="_blank"
-					rel="noreferrer"
-					css={styles.tooltipLink}
+			{showTooltip && (
+				<HelpTooltipContent
+					anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+					transformOrigin={{ vertical: "top", horizontal: "center" }}
 				>
-					Learn about feature stages
-					<span style={visuallyHidden}> (link opens in new tab)</span>
-				</Link>
-			</HelpTooltipContent>
+					<p css={styles.tooltipDescription}>
+						This feature has not yet reached general availability (GA).
+					</p>
+
+					<Link
+						href={docs("/contributing/feature-stages")}
+						target="_blank"
+						rel="noreferrer"
+						css={styles.tooltipLink}
+					>
+						Learn about feature stages
+						<span style={visuallyHidden}> (link opens in new tab)</span>
+					</Link>
+				</HelpTooltipContent>
+			)}
 		</Popover>
 	);
 };
diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
@@ -2,13 +2,14 @@ import { type Interpolation, type Theme, css, useTheme } from "@emotion/react";
 import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
 import {
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
 	usePopover,
 } from "components/deprecated/Popover/Popover";
-import { linkToAuditing, linkToUsers } from "modules/navigation";
+import { linkToAuditing } from "modules/navigation";
 import type { FC } from "react";
 import { NavLink } from "react-router-dom";
 
@@ -52,7 +53,7 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
 						/>
 					}
 				>
-					Administration
+					Admin settings
 				</Button>
 			</PopoverTrigger>
 
@@ -81,7 +82,6 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
 const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
 	canViewDeployment,
 	canViewOrganizations,
-	canViewAllUsers,
 	canViewAuditLog,
 	canViewHealth,
 }) => {
@@ -98,7 +98,7 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
 					css={styles.menuItem}
 					onClick={onPopoverClose}
 				>
-					Settings
+					Deployment
 				</MenuItem>
 			)}
 			{canViewOrganizations && (
@@ -109,16 +109,7 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
 					onClick={onPopoverClose}
 				>
 					Organizations
-				</MenuItem>
-			)}
-			{canViewAllUsers && (
-				<MenuItem
-					component={NavLink}
-					to={linkToUsers}
-					css={styles.menuItem}
-					onClick={onPopoverClose}
-				>
-					Users
+					<FeatureStageBadge contentType="beta" size="sm" showTooltip={false} />
 				</MenuItem>
 			)}
 			{canViewAuditLog && (
diff --git a/site/src/modules/management/OrganizationSettingsLayout.tsx b/site/src/modules/management/OrganizationSettingsLayout.tsx
@@ -8,6 +8,7 @@ import {
 	BreadcrumbPage,
 	BreadcrumbSeparator,
 } from "components/Breadcrumb/Breadcrumb";
+import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
 import { Loader } from "components/Loader/Loader";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { RequirePermission } from "contexts/auth/RequirePermission";
@@ -81,8 +82,12 @@ const OrganizationSettingsLayout: FC = () => {
 							</BreadcrumbItem>
 							<BreadcrumbSeparator />
 							<BreadcrumbItem>
-								<BreadcrumbLink href="/organizations">
+								<BreadcrumbLink
+									href="/organizations"
+									className="flex items-center gap-2"
+								>
 									Organizations
+									<FeatureStageBadge contentType="beta" size="sm" />
 								</BreadcrumbLink>
 							</BreadcrumbItem>
 							{organization && (
