From 5397cd31943d5790ec084684461b45b178edaca2 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@jamesritchie.co.uk>
Date: Fri, 7 Jul 2023 14:51:38 +0100
Subject: [PATCH] Added environment labels to the enironment and api keys help
 panel

---
 .../helpContent/HelpContentText.tsx           | 21 +++++++++++++++++--
 .../app/components/primitives/StepNumber.tsx  |  2 +-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/helpContent/HelpContentText.tsx b/apps/webapp/app/components/helpContent/HelpContentText.tsx
index 82a51ea6d..0fe997285 100644
--- a/apps/webapp/app/components/helpContent/HelpContentText.tsx
+++ b/apps/webapp/app/components/helpContent/HelpContentText.tsx
@@ -26,6 +26,7 @@ import selectEnvironment from "./select-environment.png";
 import selectExample from "./select-example.png";
 import { Header2 } from "../primitives/Headers";
 import { CodeBlock } from "../code/CodeBlock";
+import { EnvironmentLabel } from "../environments/EnvironmentLabel";
 
 export function HowToSetupYourProject() {
   const devEnvironment = useDevEnvironment();
@@ -349,7 +350,15 @@ export function HowToUseApiKeysAndEndpoints() {
   apiKey: process.env.TRIGGER_API_KEY!,
 });`}
       />
-      <StepNumber stepNumber="→" title="Development" />
+      <StepNumber
+        stepNumber="→"
+        title={
+          <span className="flex items-center gap-x-2">
+            <span>Development</span>
+            <EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />
+          </span>
+        }
+      />
       <StepContentContainer>
         <Paragraph>
           The <InlineCode>DEV</InlineCode> environment should only be used for
@@ -362,7 +371,15 @@ export function HowToUseApiKeysAndEndpoints() {
           scheduled Jobs.
         </Callout>
       </StepContentContainer>
-      <StepNumber stepNumber="→" title="Production" />
+      <StepNumber
+        stepNumber="→"
+        title={
+          <span className="flex items-center gap-x-2">
+            <span>Production</span>
+            <EnvironmentLabel environment={{ type: "PRODUCTION" }} />
+          </span>
+        }
+      />
       <StepContentContainer>
         <Paragraph spacing>
           The <InlineCode>PROD</InlineCode> environment is where your Jobs will
diff --git a/apps/webapp/app/components/primitives/StepNumber.tsx b/apps/webapp/app/components/primitives/StepNumber.tsx
index 3f75677c0..ae7759c38 100644
--- a/apps/webapp/app/components/primitives/StepNumber.tsx
+++ b/apps/webapp/app/components/primitives/StepNumber.tsx
@@ -11,7 +11,7 @@ export function StepNumber({
   stepNumber?: string;
   active?: boolean;
   complete?: boolean;
-  title?: string;
+  title?: React.ReactNode;
   className?: string;
 }) {
   return (