feat: add new .env variable "LANGFLOW_FEATURE_MVP_COMPONENTS" to show/hide integration sidebar components

src/backend/base/langflow/api/v1/endpoints.py

@@ -45,6 +45,7 @@
     get_task_service,
     get_telemetry_service,
 )
+from langflow.services.settings.feature_flags import FEATURE_FLAGS
 from langflow.services.telemetry.schema import RunPayload
 from langflow.utils.constants import SIDEBAR_CATEGORIES
 from langflow.utils.version import get_version_info
@@ -629,7 +630,8 @@ def get_config():
         from langflow.services.deps import get_settings_service
 
         settings_service: SettingsService = get_settings_service()
-        return settings_service.settings.model_dump()
+
+        return {"feature_flags": FEATURE_FLAGS.model_dump(), **settings_service.settings.model_dump()}
     except Exception as exc:
         raise HTTPException(status_code=500, detail=str(exc)) from exc
 

src/backend/base/langflow/api/v1/schemas.py

@@ -350,6 +350,7 @@ class FlowDataRequest(BaseModel):
 
 
 class ConfigResponse(BaseModel):
+    feature_flags: dict
     frontend_timeout: int
     auto_saving: bool
     auto_saving_interval: int

src/backend/base/langflow/services/settings/feature_flags.py

@@ -3,6 +3,7 @@
 
 class FeatureFlags(BaseSettings):
     add_toolkit_output: bool = False
+    mvp_components: bool = False
 
     class Config:
         env_prefix = "LANGFLOW_FEATURE_"

src/frontend/src/controllers/API/queries/config/use-get-config.ts

@@ -12,6 +12,7 @@ export interface ConfigResponse {
   auto_saving_interval: number;
   health_check_max_retries: number;
   max_file_size_upload: number;
+  feature_flags: Record<string, any>;
 }
 
 export const useGetConfig: useQueryFunctionType<undefined, ConfigResponse> = (
@@ -27,6 +28,7 @@ export const useGetConfig: useQueryFunctionType<undefined, ConfigResponse> = (
   const setMaxFileSizeUpload = useUtilityStore(
     (state) => state.setMaxFileSizeUpload,
   );
+  const setFeatureFlags = useUtilityStore((state) => state.setFeatureFlags);
 
   const { query } = UseRequestProcessor();
 
@@ -43,6 +45,7 @@ export const useGetConfig: useQueryFunctionType<undefined, ConfigResponse> = (
       setAutoSavingInterval(data.auto_saving_interval);
       setHealthCheckMaxRetries(data.health_check_max_retries);
       setMaxFileSizeUpload(data.max_file_size_upload);
+      setFeatureFlags(data.feature_flags);
     }
     return data;
   };

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

@@ -20,6 +20,7 @@ import { nodeIconsLucide } from "../../../../utils/styleUtils";
 import ParentDisclosureComponent from "../ParentDisclosureComponent";
 import { SidebarCategoryComponent } from "./SidebarCategoryComponent";
 
+import { useUtilityStore } from "@/stores/utilityStore";
 import { SidebarFilterComponent } from "./sidebarFilterComponent";
 import { sortKeys } from "./utils";
 
@@ -31,6 +32,8 @@ export default function ExtraSidebar(): JSX.Element {
   const hasStore = useStoreStore((state) => state.hasStore);
   const filterType = useFlowStore((state) => state.filterType);
 
+  const featureFlags = useUtilityStore((state) => state.featureFlags);
+
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const [dataFilter, setFilterData] = useState(data);
   const [search, setSearch] = useState("");
@@ -248,7 +251,7 @@ export default function ExtraSidebar(): JSX.Element {
               <div key={index}></div>
             ),
           )}
-        {ENABLE_INTEGRATIONS && (
+        {(ENABLE_INTEGRATIONS || featureFlags.mvp_components) && (
           <ParentDisclosureComponent
             defaultOpen={true}
             key={`${search.length !== 0}-${getFilterEdge.length !== 0}-Bundle`}

src/frontend/src/stores/utilityStore.ts

@@ -29,4 +29,6 @@ export const useUtilityStore = create<UtilityStoreType>((set, get) => ({
   setFlowsPagination: (flowsPagination: Pagination) => set({ flowsPagination }),
   tags: [],
   setTags: (tags: Tag[]) => set({ tags }),
+  featureFlags: {},
+  setFeatureFlags: (featureFlags: Record<string, any>) => set({ featureFlags }),
 }));

src/frontend/src/types/zustand/utility/index.ts

@@ -13,4 +13,6 @@ export type UtilityStoreType = {
   setFlowsPagination: (pagination: Pagination) => void;
   tags: Tag[];
   setTags: (tags: Tag[]) => void;
+  featureFlags: Record<string, any>;
+  setFeatureFlags: (featureFlags: Record<string, any>) => void;
 };

src/frontend/tests/extended/features/integration-side-bar.spec.ts

@@ -0,0 +1,96 @@
+import { expect, test } from "@playwright/test";
+
+test("user should be able to see integrations in the sidebar if mvp_components is true", async ({
+  page,
+}) => {
+  await page.route("**/api/v1/config", (route) => {
+    route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        feature_flags: {
+          mvp_components: true,
+        },
+      }),
+      headers: {
+        "content-type": "application/json",
+        ...route.request().headers(),
+      },
+    });
+  });
+
+  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(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+
+  await expect(page.getByText("Integrations")).toBeVisible();
+  await expect(page.getByText("Notion")).toBeVisible();
+});
+
+test("user should NOT be able to see integrations in the sidebar if mvp_components is false", async ({
+  page,
+}) => {
+  await page.waitForTimeout(4000);
+  await page.route("**/api/v1/config", (route) => {
+    route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        feature_flags: {
+          mvp_components: false,
+        },
+      }),
+      headers: {
+        "content-type": "application/json",
+        ...route.request().headers(),
+      },
+    });
+  });
+
+  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(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+
+  await expect(page.getByText("Integrations")).not.toBeVisible();
+  await expect(page.getByText("Notion")).not.toBeVisible();
+});