From bc5fd0fdd4186887ce924dc512b3b699db59b409 Mon Sep 17 00:00:00 2001
From: Anna <a.rcottrill521@gmail.com>
Date: Mon, 13 Jan 2025 14:10:24 -0500
Subject: [PATCH] feat(tools): add link to live version of challenge in
 challenge editor (#58027)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
---
 .gitpod.yml                                   |  1 +
 tools/challenge-editor/client/sample.env      |  1 +
 .../client/src/components/editor/editor.tsx   | 10 +++++++
 .../client/src/utils/block-name-translator.ts | 28 +++++++++++++++++++
 .../client/src/vite-app-env.d.ts              |  8 ++++++
 5 files changed, 48 insertions(+)
 create mode 100644 tools/challenge-editor/client/src/utils/block-name-translator.ts

diff --git a/.gitpod.yml b/.gitpod.yml
index f7fa4286fda..085d5e4af35 100644
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -35,6 +35,7 @@ tasks:
       export API_LOCATION=$(gp url 3000)
       export CHALLENGE_EDITOR_API_LOCATION=$(gp url 3200)
       export CHALLENGE_EDITOR_CLIENT_LOCATION=$(gp url 3300)
+      export CHALLENGE_EDITOR_LEARN_CLIENT_LOCATION=$(gp url 8000)
       ' >> ~/.bashrc;
       exit;
 
diff --git a/tools/challenge-editor/client/sample.env b/tools/challenge-editor/client/sample.env
index 21383b79214..f9c1536d2cd 100644
--- a/tools/challenge-editor/client/sample.env
+++ b/tools/challenge-editor/client/sample.env
@@ -1 +1,2 @@
 CHALLENGE_EDITOR_API_LOCATION=http://localhost:3200
+CHALLENGE_EDITOR_LEARN_CLIENT_LOCATION=http://localhost:8000
diff --git a/tools/challenge-editor/client/src/components/editor/editor.tsx b/tools/challenge-editor/client/src/components/editor/editor.tsx
index e26cab86e2b..b1a4d2e509b 100644
--- a/tools/challenge-editor/client/src/components/editor/editor.tsx
+++ b/tools/challenge-editor/client/src/components/editor/editor.tsx
@@ -13,6 +13,7 @@ import { ChallengeContent } from '../../../interfaces/challenge-content';
 import SaveChallenge from '../buttons/save-challenge';
 import './editor.css';
 import { API_LOCATION } from '../../utils/handle-request';
+import { superBlockNameMap } from '../../utils/block-name-translator';
 
 const Editor = () => {
   const [error, setError] = useState<Error | null>(null);
@@ -87,6 +88,15 @@ const Editor = () => {
       <p>
         <Link to={`/${superblock || ''}/${block || ''}`}>Return to Block</Link>
       </p>
+      <p>
+        <Link
+          to={`${import.meta.env.CHALLENGE_EDITOR_LEARN_CLIENT_LOCATION}/learn/${superBlockNameMap[superblock || '']}/${block || ''}/${items.name.replace(/[\s]+/g, '-').toLowerCase() || ''}`}
+          target='_blank'
+        >
+          View Live Version of the Challenge in your running development
+          environment
+        </Link>
+      </p>
     </div>
   );
 };
diff --git a/tools/challenge-editor/client/src/utils/block-name-translator.ts b/tools/challenge-editor/client/src/utils/block-name-translator.ts
new file mode 100644
index 00000000000..b37ecc62147
--- /dev/null
+++ b/tools/challenge-editor/client/src/utils/block-name-translator.ts
@@ -0,0 +1,28 @@
+export const superBlockNameMap: { [key: string]: string } = {
+  '01-responsive-web-design': 'responsive-web-design',
+  '02-javascript-algorithms-and-data-structures':
+    'javascript-algorithms-and-data-structures',
+  '03-front-end-development-libraries': 'front-end-development-libraries',
+  '04-data-visualization': 'data-visualization',
+  '05-back-end-development-and-apis': 'back-end-development-and-apis',
+  '06-quality-assurance': 'quality-assurance',
+  '07-scientific-computing-with-python': 'scientific-computing-with-python',
+  '08-data-analysis-with-python': 'data-analysis-with-python',
+  '09-information-security': 'information-security',
+  '10-coding-interview-prep': 'coding-interview-prep',
+  '11-machine-learning-with-python': 'machine-learning-with-python',
+  '13-relational-databases': 'relational-databases',
+  '14-responsive-web-design-22': '2022/responsive-web-design',
+  '15-javascript-algorithms-and-data-structures-22':
+    'javascript-algorithms-and-data-structures-v8',
+  '16-the-odin-project': 'the-odin-project',
+  '17-college-algebra-with-python': 'college-algebra-with-python',
+  '18-project-euler': 'project-euler',
+  '19-foundational-c-sharp-with-microsoft':
+    'foundational-c-sharp-with-microsoft',
+  '21-a2-english-for-developers': 'a2-english-for-developers',
+  '22-rosetta-code': 'rosetta-code',
+  '23-python-for-everybody': 'python-for-everybody',
+  '24-b1-english-for-developers': 'b1-english-for-developers',
+  '25-front-end-development': 'full-stack-developer'
+};
diff --git a/tools/challenge-editor/client/src/vite-app-env.d.ts b/tools/challenge-editor/client/src/vite-app-env.d.ts
index 11f02fe2a00..35412df1a73 100644
--- a/tools/challenge-editor/client/src/vite-app-env.d.ts
+++ b/tools/challenge-editor/client/src/vite-app-env.d.ts
@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly CHALLENGE_EDITOR_LEARN_CLIENT_LOCATION: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}