✨ (extraSidebarComponent/index.tsx): update featureFlags property acc…

…ess to use optional chaining for better error handling

📝 (stop-building.spec.ts): add ua-parser-js import to get user agent information and update control key based on user's operating system for better user experience. Also, refactor code to improve readability and add comments for better understanding.

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -251,7 +251,7 @@ export default function ExtraSidebar(): JSX.Element {
               <div key={index}></div>
             ),
           )}
-        {(ENABLE_INTEGRATIONS || featureFlags.mvp_components) && (
+        {(ENABLE_INTEGRATIONS || featureFlags?.mvp_components) && (
           <ParentDisclosureComponent
             defaultOpen={true}
             key={`${search.length !== 0}-${getFilterEdge.length !== 0}-Bundle`}

src/frontend/tests/core/features/stop-building.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test";
+import uaParser from "ua-parser-js";
 
 test("user must be able to stop a building", async ({ page }) => {
   await page.goto("/");
@@ -20,6 +21,14 @@ test("user must be able to stop a building", async ({ page }) => {
     modalCount = await page.getByTestId("modal-title")?.count();
   }
 
+  const getUA = await page.evaluate(() => navigator.userAgent);
+  const userAgentInfo = uaParser(getUA);
+  let control = "Control";
+
+  if (userAgentInfo.os.name.includes("Mac")) {
+    control = "Meta";
+  }
+
   await page.getByTestId("blank-flow").click();
 
   //first component
@@ -203,7 +212,62 @@ test("user must be able to stop a building", async ({ page }) => {
   await page.getByTestId("int_int_chunk_size").fill("2");
   await page.getByTestId("int_int_chunk_overlap").fill("1");
 
-  await page.getByTestId("button_run_chat output").click();
+  const timerCode = `
+# from langflow.field_typing import Data
+from langflow.custom import Component
+from langflow.io import MessageTextInput, Output
+from langflow.schema import Data
+import time
+
+class CustomComponent(Component):
+    display_name = "Custom Component"
+    description = "Use as a template to create your own component."
+    documentation: str = "http://docs.langflow.org/components/custom"
+    icon = "custom_components"
+    name = "CustomComponent"
+
+    inputs = [
+        MessageTextInput(name="input_value", display_name="Input Value", value="Hello, World!"),
+    ]
+
+    outputs = [
+        Output(display_name="Output", name="output", method="build_output"),
+    ]
+
+    def build_output(self) -> Data:
+        time.sleep(10000)
+        data = Data(value=self.input_value)
+        self.status = data
+        return data
+  `;
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("custom component");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .locator('//*[@id="helpersCustom Component"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.getByTestId("title-Custom Component").first().click();
+
+  await page.waitForTimeout(500);
+  await page.getByTestId("code-button-modal").click();
+  await page.waitForTimeout(500);
+
+  await page.locator("textarea").last().press(`${control}+a`);
+  await page.keyboard.press("Backspace");
+  await page.locator("textarea").last().fill(timerCode);
+  await page.locator('//*[@id="checkAndSaveBtn"]').click();
+  await page.waitForTimeout(500);
+
+  await page.getByTestId("button_run_custom component").click();
 
   await page.waitForSelector("text=Building", {
     timeout: 100000,
@@ -233,7 +297,7 @@ test("user must be able to stop a building", async ({ page }) => {
     timeout: 100000,
   });
 
-  await page.getByTestId("button_run_chat output").click();
+  await page.getByTestId("button_run_custom component").click();
 
   await page.waitForSelector("text=Building", {
     timeout: 100000,
@@ -269,7 +333,7 @@ test("user must be able to stop a building", async ({ page }) => {
     timeout: 100000,
   });
 
-  await page.getByTestId("button_run_chat output").click();
+  await page.getByTestId("button_run_custom component").click();
 
   await page.waitForSelector('[data-testid="loading_icon"]', {
     timeout: 100000,