Fix: Disable the ComponentAsTool shortcut when the component code does not have tool_mode=True + regression tests (#4918)

✨ (index.tsx): Add convertTestName function to generate data-testid attribute dynamically based on display_name
🔧 (use-shortcuts.tsx): Pass hasToolMode parameter to handleToolModeWShortcut function to conditionally activate tool mode
🔧 (index.tsx): Pass hasToolMode prop to NodeToolbarComponent to enable/disable tool mode functionality
🔧 (Vector Store.spec.ts): Import and use extractAndCleanCode function to extract and clean code content
🔧 (general-bugs-component-as-tool-shortcut.spec.ts): Import and use extractAndCleanCode function to extract and clean code content
📝 (extract-and-clean-code.ts): Add utility function extractAndCleanCode to extract and clean code content from HTML page

src/frontend/tests/utils/extract-and-clean-code.ts

@@ -0,0 +1,22 @@
+import { Page } from "playwright/test";
+
+export async function extractAndCleanCode(page: Page): Promise<string> {
+  const outerHTML = await page
+    .locator('//*[@id="codeValue"]')
+    .evaluate((el) => el.outerHTML);
+
+  const valueMatch = outerHTML.match(/value="([\s\S]*?)"/);
+  if (!valueMatch) {
+    throw new Error("Could not find value attribute in the HTML");
+  }
+
+  let codeContent = valueMatch[1]
+    .replace(/&quot;/g, '"')
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&#x27;/g, "'")
+    .replace(/&#x2F;/g, "/");
+
+  return codeContent;
+}