feat(site): add numbers to SSHButton content for clarity (coder#15661)

benwinding · web-flow · commit 737205ed8e06 · 2024-12-12T15:39:34.000+10:00
diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx
@@ -48,28 +48,18 @@ export const SSHButton: FC<SSHButtonProps> = ({
 					Run the following commands to connect with SSH:
 				</HelpTooltipText>
 
-				<Stack spacing={0.5} css={styles.codeExamples}>
-					<div>
-						<HelpTooltipText>
-							<strong css={styles.codeExampleLabel}>
-								Configure SSH hosts on machine:
-							</strong>
-						</HelpTooltipText>
-						<CodeExample secret={false} code="coder config-ssh" />
-					</div>
-
-					<div>
-						<HelpTooltipText>
-							<strong css={styles.codeExampleLabel}>
-								Connect to the agent:
-							</strong>
-						</HelpTooltipText>
-						<CodeExample
-							secret={false}
-							code={`ssh ${sshPrefix}${workspaceName}.${agentName}`}
+				<ol style={{ margin: 0, padding: 0 }}>
+					<Stack spacing={0.5} css={styles.codeExamples}>
+						<SSHStep
+							helpText="Configure SSH hosts on machine:"
+							codeExample="coder config-ssh"
+						/>
+						<SSHStep
+							helpText="Connect to the agent:"
+							codeExample={`ssh ${sshPrefix}${workspaceName}.${agentName}`}
 						/>
-					</div>
-				</Stack>
+					</Stack>
+				</ol>
 
 				<HelpTooltipLinksGroup>
 					<HelpTooltipLink href={docs("/install")}>
@@ -92,6 +82,20 @@ export const SSHButton: FC<SSHButtonProps> = ({
 	);
 };
 
+interface SSHStepProps {
+	helpText: string;
+	codeExample: string;
+}
+
+const SSHStep: FC<SSHStepProps> = ({ helpText, codeExample }) => (
+	<li style={{ listStylePosition: "inside" }}>
+		<HelpTooltipText style={{ display: "inline" }}>
+			<strong css={styles.codeExampleLabel}>{helpText}</strong>
+		</HelpTooltipText>
+		<CodeExample secret={false} code={codeExample} />
+	</li>
+);
+
 const classNames = {
 	paper: (css, theme) => css`
     padding: 16px 24px 24px;
