From 2652f44d31a31a2078fb071c34742b84b560a111 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Wed, 11 Sep 2024 18:39:16 -0300
Subject: [PATCH] fix: share button not working on canvas (#3770)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🔧 (utils.py): refactor import statement to get version info from utils module instead of version module
🔧 (index.tsx): add dataTestId attribute to submit button in ShareModal component for testing purposes
✨ (generalBugs-shard-13.spec.ts): add end-to-end test to verify sharing a flow on the Langflow Store via modal interaction
---
 src/backend/base/langflow/api/utils.py        |  4 +-
 src/frontend/src/modals/shareModal/index.tsx  |  3 +-
 .../regression/generalBugs-shard-13.spec.ts   | 88 +++++++++++++++++++
 3 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/tests/extended/regression/generalBugs-shard-13.spec.ts

diff --git a/src/backend/base/langflow/api/utils.py b/src/backend/base/langflow/api/utils.py
index c75826a59..5ce7e4836 100644
--- a/src/backend/base/langflow/api/utils.py
+++ b/src/backend/base/langflow/api/utils.py
@@ -85,9 +85,9 @@ def get_is_component_from_data(data: dict):
 
 
 async def check_langflow_version(component: StoreComponentCreate):
-    from langflow.version import get_version
+    from langflow.utils.version import get_version_info
 
-    __version__ = get_version()
+    __version__ = get_version_info()["version"]
 
     if not component.last_tested_version:
         component.last_tested_version = __version__
diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx
index 1cf82a36f..161cbe215 100644
--- a/src/frontend/src/modals/shareModal/index.tsx
+++ b/src/frontend/src/modals/shareModal/index.tsx
@@ -254,8 +254,9 @@ export default function ShareModal({
 
         <BaseModal.Footer
           submit={{
-            label: `Share ${is_component ? " Component" : " Flow"}`,
+            label: `Share ${is_component ? "Component" : "Flow"}`,
             loading: loadingNames,
+            dataTestId: "share-modal-button-flow",
           }}
         >
           <>
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-13.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-13.spec.ts
new file mode 100644
index 000000000..c26b5851a
--- /dev/null
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-13.spec.ts
@@ -0,0 +1,88 @@
+import { test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("should be able to share a component on the store by clicking on the share button on the canvas", async ({
+  page,
+}) => {
+  test.skip(
+    !process?.env?.STORE_API_KEY,
+    "STORE_API_KEY required to run this test",
+  );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByText("Close", { exact: true }).click();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("user-profile-settings").click();
+  await page.waitForTimeout(500);
+
+  await page.getByText("Settings", { exact: true }).first().click();
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByPlaceholder("Insert your API Key")
+    .fill(process.env.STORE_API_KEY ?? "");
+
+  await page.getByTestId("api-key-save-button-store").click();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByText("Success! Your API Key has been saved.").isVisible();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByText("My Collection", { exact: true }).click();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByText("New Project", { exact: true }).click();
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+  await page.waitForSelector("text=share", { timeout: 10000 });
+  await page.waitForSelector("text=playground", { timeout: 10000 });
+  await page.waitForSelector("text=api", { timeout: 10000 });
+
+  await page.getByTestId("shared-button-flow").click();
+
+  await page.waitForTimeout(500);
+
+  await page.waitForSelector("text=Publish workflow to the Langflow Store.", {
+    timeout: 10000,
+  });
+  await page.waitForSelector('[data-testid="share-modal-button-flow"]', {
+    timeout: 10000,
+  });
+  await page.waitForSelector("text=Share Flow", { timeout: 10000 });
+
+  await page.getByTestId("share-modal-button-flow").click();
+
+  await page.waitForSelector("text=flow shared successfully ", {
+    timeout: 10000,
+  });
+});