Apply FE review suggestions

kacpersaw · kacpersaw · commit 387fc042686b · 2025-08-06T13:54:15.000Z
diff --git a/site/src/components/CodeExample/CodeExample.stories.tsx b/site/src/components/CodeExample/CodeExample.stories.tsx
@@ -37,6 +37,6 @@ export const Redact: Story = {
 		secret: false,
 		redactPattern: /CODER_AGENT_TOKEN="([^"]+)"/g,
 		redactReplacement: `CODER_AGENT_TOKEN="********"`,
-		redactShowButton: true,
+		showRevealButton: true,
 	},
 };
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
@@ -13,10 +13,14 @@ import { CopyButton } from "../CopyButton/CopyButton";
 
 interface CodeExampleProps {
 	code: string;
+	/** Defaulting to true to be on the safe side; you should have to opt out of the secure option, not remember to opt in */
 	secret?: boolean;
+	/** Redact parts of the code if the user doesn't want to obfuscate the whole code */
 	redactPattern?: RegExp;
+	/** Replacement text for redacted content */
 	redactReplacement?: string;
-	redactShowButton?: boolean;
+	/** Show a button to reveal the redacted parts of the code */
+	showRevealButton?: boolean;
 	className?: string;
 }
 
@@ -26,17 +30,10 @@ interface CodeExampleProps {
 export const CodeExample: FC<CodeExampleProps> = ({
 	code,
 	className,
-
-	// Defaulting to true to be on the safe side; you should have to opt out of
-	// the secure option, not remember to opt in
 	secret = true,
-
-	// Redact parts of the code if the user doesn't want to obfuscate the whole code
 	redactPattern,
 	redactReplacement = "********",
-
-	// Show a button to show the redacted parts of the code
-	redactShowButton = false,
+	showRevealButton,
 }) => {
 	const [showFullValue, setShowFullValue] = useState(false);
 
@@ -78,8 +75,8 @@ export const CodeExample: FC<CodeExampleProps> = ({
 				)}
 			</code>
 
-			<div css={styles.actions}>
-				{redactShowButton && redactPattern && !secret && (
+			<div className="flex items-center gap-1">
+				{showRevealButton && redactPattern && !secret && (
 					<TooltipProvider>
 						<Tooltip>
 							<TooltipTrigger asChild>
@@ -134,10 +131,4 @@ const styles = {
 	secret: {
 		"-webkit-text-security": "disc", // also supported by firefox
 	},
-
-	actions: {
-		display: "flex",
-		alignItems: "center",
-		gap: 4,
-	},
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/modules/resources/AgentExternal.tsx b/site/src/modules/resources/AgentExternal.tsx
@@ -34,7 +34,7 @@ export const AgentExternal: FC<AgentExternalProps> = ({
 	}, [isExternalAgent, agent.status, workspace.id, agent.name]);
 
 	return (
-		<section css={styles.externalAgentSection}>
+		<section className="text-base text-muted-foreground pb-2 leading-relaxed">
 			<p>
 				Please run the following command to attach an agent to the{" "}
 				{workspace.name} workspace:
@@ -44,17 +44,8 @@ export const AgentExternal: FC<AgentExternalProps> = ({
 				secret={false}
 				redactPattern={/CODER_AGENT_TOKEN="([^"]+)"/g}
 				redactReplacement={`CODER_AGENT_TOKEN="********"`}
-				redactShowButton={true}
+				showRevealButton={true}
 			/>
 		</section>
 	);
 };
-
-const styles = {
-	externalAgentSection: (theme) => ({
-		fontSize: 16,
-		color: theme.palette.text.secondary,
-		paddingBottom: 8,
-		lineHeight: 1.4,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
