From 63358125194439984b0379684712782ced312d75 Mon Sep 17 00:00:00 2001
From: Ben Winding <benw@canva.com>
Date: Tue, 26 Nov 2024 21:19:57 +1100
Subject: [PATCH 1/6] Add numbers to SSHButton content for clarity

---
 site/src/modules/resources/SSHButton/SSHButton.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx
index aa10fe5138503..17e46f52188dc 100644
--- a/site/src/modules/resources/SSHButton/SSHButton.tsx
+++ b/site/src/modules/resources/SSHButton/SSHButton.tsx
@@ -52,7 +52,7 @@ export const SSHButton: FC<SSHButtonProps> = ({
 					<div>
 						<HelpTooltipText>
 							<strong css={styles.codeExampleLabel}>
-								Configure SSH hosts on machine:
+								1. Configure SSH hosts on machine:
 							</strong>
 						</HelpTooltipText>
 						<CodeExample secret={false} code="coder config-ssh" />
@@ -61,7 +61,7 @@ export const SSHButton: FC<SSHButtonProps> = ({
 					<div>
 						<HelpTooltipText>
 							<strong css={styles.codeExampleLabel}>
-								Connect to the agent:
+								2. Connect to the agent:
 							</strong>
 						</HelpTooltipText>
 						<CodeExample

From e80c9a88da9d727f5c9ff0a33f7ebbc2fdd4b5d1 Mon Sep 17 00:00:00 2001
From: Ben Winding <benw@canva.com>
Date: Thu, 28 Nov 2024 11:20:12 +1100
Subject: [PATCH 2/6] Use HTML `<li>` tags instead of numbering directly

---
 .../modules/resources/SSHButton/SSHButton.tsx | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx
index 17e46f52188dc..43425f34235b3 100644
--- 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}>
-								1. Configure SSH hosts on machine:
-							</strong>
-						</HelpTooltipText>
-						<CodeExample secret={false} code="coder config-ssh" />
-					</div>
-
-					<div>
-						<HelpTooltipText>
-							<strong css={styles.codeExampleLabel}>
-								2. 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,15 @@ export const SSHButton: FC<SSHButtonProps> = ({
 	);
 };
 
+const SSHStep = (props: { helpText: string; codeExample: string }) => (
+	<li style={{ listStylePosition: "inside" }}>
+		<HelpTooltipText style={{ display: "inline" }}>
+			<strong css={styles.codeExampleLabel}>Connect to the agent:</strong>
+		</HelpTooltipText>
+		<CodeExample secret={false} code={props.codeExample} />
+	</li>
+);
+
 const classNames = {
 	paper: (css, theme) => css`
     padding: 16px 24px 24px;

From abf9abd58cf4ca7fdb54acebb5f5c45087ca4ab7 Mon Sep 17 00:00:00 2001
From: Ben Winding <benw@canva.com>
Date: Tue, 10 Dec 2024 10:19:08 +1100
Subject: [PATCH 3/6] =?UTF-8?q?Fix=20helptext=20prop=20=F0=9F=A4=A6?=
 =?UTF-8?q?=E2=80=8D=E2=99=82=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/modules/resources/SSHButton/SSHButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx
index 43425f34235b3..d1c4b9eb45e8b 100644
--- a/site/src/modules/resources/SSHButton/SSHButton.tsx
+++ b/site/src/modules/resources/SSHButton/SSHButton.tsx
@@ -85,7 +85,7 @@ export const SSHButton: FC<SSHButtonProps> = ({
 const SSHStep = (props: { helpText: string; codeExample: string }) => (
 	<li style={{ listStylePosition: "inside" }}>
 		<HelpTooltipText style={{ display: "inline" }}>
-			<strong css={styles.codeExampleLabel}>Connect to the agent:</strong>
+			<strong css={styles.codeExampleLabel}>{props.helpText}</strong>
 		</HelpTooltipText>
 		<CodeExample secret={false} code={props.codeExample} />
 	</li>

From aca4b4980d46d630d52cd075b3ecc0d40fd0aaf2 Mon Sep 17 00:00:00 2001
From: Ben Winding <benw@canva.com>
Date: Wed, 11 Dec 2024 09:56:08 +1100
Subject: [PATCH 4/6] Declare props interface and destructure props

---
 site/src/modules/resources/SSHButton/SSHButton.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx
index d1c4b9eb45e8b..5466e4de6bfdc 100644
--- a/site/src/modules/resources/SSHButton/SSHButton.tsx
+++ b/site/src/modules/resources/SSHButton/SSHButton.tsx
@@ -82,12 +82,14 @@ export const SSHButton: FC<SSHButtonProps> = ({
 	);
 };
 
-const SSHStep = (props: { helpText: string; codeExample: string }) => (
+interface SSHStepProps { helpText: string; codeExample: string }
+
+const SSHStep = ({ helpText, codeExample }: SSHStepProps) => (
 	<li style={{ listStylePosition: "inside" }}>
 		<HelpTooltipText style={{ display: "inline" }}>
-			<strong css={styles.codeExampleLabel}>{props.helpText}</strong>
+			<strong css={styles.codeExampleLabel}>{helpText}</strong>
 		</HelpTooltipText>
-		<CodeExample secret={false} code={props.codeExample} />
+		<CodeExample secret={false} code={codeExample} />
 	</li>
 );
 

From 4ba6c1d28318fec20c22b6e60699f50444967096 Mon Sep 17 00:00:00 2001
From: Ben Winding <benw@canva.com>
Date: Wed, 11 Dec 2024 09:57:30 +1100
Subject: [PATCH 5/6] use `FC<T>` type from react

---
 site/src/modules/resources/SSHButton/SSHButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx
index 5466e4de6bfdc..5a4ae59ad5a82 100644
--- a/site/src/modules/resources/SSHButton/SSHButton.tsx
+++ b/site/src/modules/resources/SSHButton/SSHButton.tsx
@@ -84,7 +84,7 @@ export const SSHButton: FC<SSHButtonProps> = ({
 
 interface SSHStepProps { helpText: string; codeExample: string }
 
-const SSHStep = ({ helpText, codeExample }: SSHStepProps) => (
+const SSHStep: FC<SSHStepProps> = ({ helpText, codeExample }) => (
 	<li style={{ listStylePosition: "inside" }}>
 		<HelpTooltipText style={{ display: "inline" }}>
 			<strong css={styles.codeExampleLabel}>{helpText}</strong>

From 106aea738682ea71b3200b92c3a902dcf2cf47db Mon Sep 17 00:00:00 2001
From: Dean Sheather <dean@deansheather.com>
Date: Thu, 12 Dec 2024 14:33:22 +0900
Subject: [PATCH 6/6] Fix formatting

---
 site/src/modules/resources/SSHButton/SSHButton.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx
index 5a4ae59ad5a82..3b5869979321e 100644
--- a/site/src/modules/resources/SSHButton/SSHButton.tsx
+++ b/site/src/modules/resources/SSHButton/SSHButton.tsx
@@ -82,7 +82,10 @@ export const SSHButton: FC<SSHButtonProps> = ({
 	);
 };
 
-interface SSHStepProps { helpText: string; codeExample: string }
+interface SSHStepProps {
+	helpText: string;
+	codeExample: string;
+}
 
 const SSHStep: FC<SSHStepProps> = ({ helpText, codeExample }) => (
 	<li style={{ listStylePosition: "inside" }}>