fix: add code button decoration when throwing custom component in screen (#6823)

* made pasted component be selected

* Added bg when is custom component and component is not edited

* Added test to check if custom component button is pink

* Stop chatinput propagation

* fixed tests

---------

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarDraggableComponent/index.tsx

@@ -97,6 +97,7 @@ export const SidebarDraggableComponent = forwardRef(
     const handleKeyDown = (e) => {
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
+        e.stopPropagation();
         addComponent(apiClass, itemName);
       }
     };

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

@@ -427,11 +427,16 @@ const NodeToolbarComponent = memo(
       setOpenShowMoreOptions && setOpenShowMoreOptions(open);
     };
 
+    const isCustomComponent = useMemo(() => {
+      return data.type === "CustomComponent" && !data.node?.edited;
+    }, [data.type, data.node?.edited]);
+
     const renderToolbarButtons = useMemo(
       () => (
         <>
           {hasCode && (
             <ToolbarButton
+              className={isCustomComponent ? "!bg-accent-pink" : ""}
               icon="Code"
               label="Code"
               onClick={() => setOpenModal(true)}

src/frontend/src/stores/flowStore.ts

@@ -448,7 +448,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       // Add the new node to the list of nodes in state
       newNodes = newNodes
         .map((node) => ({ ...node, selected: false }))
-        .concat({ ...newNode, selected: false });
+        .concat({ ...newNode, selected: true });
     });
     get().setNodes(newNodes);
 

src/frontend/tests/core/features/customComponentAdd.spec.ts

@@ -0,0 +1,73 @@
+import { expect, test } from "@playwright/test";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+
+test(
+  "custom component code button should be pink when adding custom component",
+  { tag: ["@release", "@components"] },
+
+  async ({ page }) => {
+    await awaitBootstrapTest(page);
+
+    await page.waitForSelector('[data-testid="blank-flow"]', {
+      timeout: 3000,
+    });
+
+    await page.getByTestId("blank-flow").click();
+
+    await page.waitForSelector('[data-testid="zoom_out"]', {
+      timeout: 3000,
+    });
+
+    await page.getByTestId("sidebar-custom-component-button").click();
+
+    await expect(page.getByTestId("code-button-modal")).toBeVisible({
+      timeout: 3000,
+    });
+
+    await expect(page.getByTestId("code-button-modal")).toHaveClass(
+      /!bg-accent-pink/,
+    );
+
+    await page.getByTestId("code-button-modal").last().click();
+
+    const waitTimeoutCode = `
+# from langflow.field_typing import Data
+from langflow.custom import Component
+from langflow.io import MessageTextInput, Output
+from langflow.schema import Data
+from time import sleep
+from langflow.schema.message import Message
+
+class CustomComponent(Component):
+    display_name = "Custom Component"
+    description = "Use as a template to create your own component."
+    documentation: str = "https://docs.langflow.org/components-custom-components"
+    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) -> Message:
+        data = Data(value=self.input_value)
+        self.status = data
+        sleep(60)
+        return data`;
+
+    await page.locator(".ace_content").click();
+    await page.keyboard.press(`ControlOrMeta+A`);
+    await page.locator("textarea").fill(waitTimeoutCode);
+
+    await page.getByText("Check & Save").last().click();
+
+    await expect(page.getByTestId("code-button-modal")).not.toHaveClass(
+      /!bg-accent-pink/,
+      { timeout: 3000 },
+    );
+  },
+);

src/frontend/tests/core/features/saveComponents.spec.ts

@@ -52,10 +52,6 @@ test.describe("save component tests", () => {
         .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[3]')
         .click();
 
-      await page.getByTestId("title-ChatOpenAI").click({
-        modifiers: ["Control"],
-      });
-
       await page.getByTestId("title-Agent Initializer").click({
         modifiers: ["Control"],
       });