From d98d7389a44a6bf5a5bfda4ad4364c2e437bbe4f Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Mon, 28 Oct 2024 16:26:36 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(extraSidebarComponent/index.tsx):?=
 =?UTF-8?q?=20update=20featureFlags=20property=20access=20to=20use=20optio?=
 =?UTF-8?q?nal=20chaining=20for=20better=20error=20handling=20=F0=9F=93=9D?=
 =?UTF-8?q?=20(stop-building.spec.ts):=20add=20ua-parser-js=20import=20to?=
 =?UTF-8?q?=20get=20user=20agent=20information=20and=20update=20control=20?=
 =?UTF-8?q?key=20based=20on=20user's=20operating=20system=20for=20better?=
 =?UTF-8?q?=20user=20experience.=20Also,=20refactor=20code=20to=20improve?=
 =?UTF-8?q?=20readability=20and=20add=20comments=20for=20better=20understa?=
 =?UTF-8?q?nding.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../extraSidebarComponent/index.tsx           |  2 +-
 .../tests/core/features/stop-building.spec.ts | 70 ++++++++++++++++++-
 2 files changed, 68 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 71f813f2b798..993bd72f1ca9 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/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`}
diff --git a/src/frontend/tests/core/features/stop-building.spec.ts b/src/frontend/tests/core/features/stop-building.spec.ts
index d79d85c6ec12..964e2953778e 100644
--- a/src/frontend/tests/core/features/stop-building.spec.ts
+++ b/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,