Merge pull request #1726 from mermaid-js/sidv/hideAIRepair

fix: Hide AI Repair button in config tab

.env

@@ -2,6 +2,6 @@ MERMAID_DOMAIN=''
 MERMAID_ANALYTICS_URL=''
 MERMAID_RENDERER_URL='https://mermaid.ink'
 MERMAID_KROKI_RENDERER_URL='https://kroki.io'
-MERMAID_IS_ENABLED_MERMAID_CHART_LINKS=''
+MERMAID_IS_ENABLED_MERMAID_CHART_LINKS='true'
 
 # cp .env .env.local to make local changes

.github/workflows/tests.yml

@@ -49,6 +49,6 @@ jobs:
       - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 30
+          name: test-results
+          path: test-results/
+          retention-days: 7

package.json

@@ -115,7 +115,7 @@
     ]
   },
   "engines": {
-    "node": ">=20.19.1"
+    "node": ">=20.19.0"
   },
   "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39",
   "pnpm": {

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>

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',

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);
+  });
+});

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 }>({