From 400f3ecf95c8b5572cdffe52be1ef37919cdd8a8 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 26 May 2025 23:14:45 +0530
Subject: [PATCH] fix: Hide AI Repair button in config tab

Co-authored-by: Alois Klink <alois@aloisklink.com>
---
 package.json                     |  2 +-
 src/lib/components/Editor.svelte | 27 ++++++++++++++-----------
 src/lib/constants.ts             |  2 ++
 tests/errorDisplay.spec.ts       | 34 ++++++++++++++++++++++++++++++++
 tests/test.ts                    |  7 +++++++
 5 files changed, 60 insertions(+), 12 deletions(-)
 create mode 100644 tests/errorDisplay.spec.ts

diff --git a/package.json b/package.json
index 4b29e59a..9429f231 100644
--- a/package.json
+++ b/package.json
@@ -115,7 +115,7 @@
     ]
   },
   "engines": {
-    "node": ">=20.19.1"
+    "node": ">=20.19.0"
   },
   "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39",
   "pnpm": {
diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index 24fe6cfd..c03d15cd 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -32,20 +32,25 @@
           <ExclamationCircleIcon class="size-6 text-destructive" aria-hidden="true" />
           <div class="flex flex-col">
             <p>Syntax error</p>
-            {#if env.isEnabledMermaidChartLinks}
-              <p class="text-xs text-white/60">Create a free account to repair with AI</p>
+            {#if env.isEnabledMermaidChartLinks && $stateStore.editorMode === 'code'}
+              <p class="text-xs text-white/60" data-testid={TID.aiHelpText}>
+                Create a free account to repair with AI
+              </p>
             {/if}
           </div>
         </div>
-        <McWrapper>
-          <Button
-            variant="accent"
-            size="sm"
-            href={$urlsStore.mermaidChart({ medium: 'ai_repair' }).save}>
-            <MermaidChartIcon />
-            AI Repair
-          </Button>
-        </McWrapper>
+        {#if $stateStore.editorMode === 'code'}
+          <McWrapper>
+            <Button
+              variant="accent"
+              size="sm"
+              data-testid={TID.aiRepairButton}
+              href={$urlsStore.mermaidChart({ medium: 'ai_repair' }).save}>
+              <MermaidChartIcon />
+              AI Repair
+            </Button>
+          </McWrapper>
+        {/if}
       </div>
       <output class="max-h-32 overflow-auto bg-muted p-2" name="mermaid-error" for="editor">
         <pre>{$stateStore.error?.toString()}</pre>
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 0cd308b3..2e71e336 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -1,4 +1,6 @@
 export const TID = {
+  aiHelpText: 'ai-help-text',
+  aiRepairButton: 'ai-repair-button',
   copyMarkdown: 'copy-markdown',
   diagramDocumentationButton: 'diagram-documentation-button',
   downloadPNG: 'download-PNG',
diff --git a/tests/errorDisplay.spec.ts b/tests/errorDisplay.spec.ts
new file mode 100644
index 00000000..067ab144
--- /dev/null
+++ b/tests/errorDisplay.spec.ts
@@ -0,0 +1,34 @@
+import { test } from './test';
+
+test.describe('Error display tests', () => {
+  test('should show AI Repair button for syntax errors in Code tab', async ({ editPage }) => {
+    // Enter code with syntax error
+    await editPage.clearEditor();
+    await editPage.typeInEditor('graph TD\nA --> B -->');
+
+    // Verify error is displayed
+    await editPage.checkError('Syntax error');
+
+    // Verify AI Repair button and help text is shown in Code tab
+    await editPage.checkAIHelperVisibility(true);
+  });
+
+  test('should not show AI Repair button for errors in Config tab', async ({ editPage }) => {
+    // First enter valid diagram
+    await editPage.clearEditor();
+    await editPage.typeInEditor('graph TD\nA --> B');
+
+    // Switch to Config tab
+    await editPage.setEditorMode('Config');
+
+    // Enter invalid JSON in config
+    await editPage.clearEditor();
+    await editPage.typeInEditor('{\n  "theme": "default",\n  invalid json');
+
+    // Verify error is displayed
+    await editPage.checkError('Syntax error');
+
+    // Verify AI Repair button and help text is NOT shown in Config tab
+    await editPage.checkAIHelperVisibility(false);
+  });
+});
diff --git a/tests/test.ts b/tests/test.ts
index 3c4fec2c..1d5e54fe 100644
--- a/tests/test.ts
+++ b/tests/test.ts
@@ -103,6 +103,13 @@ export class EditorPage {
       `Switch to ${theme === 'light' ? 'dark' : 'light'} theme`
     );
   }
+
+  async checkAIHelperVisibility(shouldBeVisible: boolean) {
+    const button = this.page.getByTestId(TID.aiRepairButton);
+    const helpText = this.page.getByTestId(TID.aiHelpText);
+    await expect(button)[shouldBeVisible ? 'toBeVisible' : 'toBeHidden']();
+    await expect(helpText)[shouldBeVisible ? 'toBeVisible' : 'toBeHidden']();
+  }
 }
 
 export const test = base.extend<{ editPage: EditorPage }>({