From ffca683a0f407ae88761b4bc86d36971e041d55f Mon Sep 17 00:00:00 2001
From: Akshita Goyal <36129505+gakshita@users.noreply.github.com>
Date: Thu, 9 Apr 2026 00:59:15 +0530
Subject: [PATCH] [PAI-1345] fix: remove tabs from integrations page for free
 workspaces (#6653)

* fix: connectors tab

* fix: refactor
---
 .../(workspace)/integrations/page.tsx         | 47 ++++++++++---------
 .../layouts/auth-layout/workspace-wrapper.tsx | 14 ++++--
 2 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/integrations/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/integrations/page.tsx
index 2c22d3a526..5ed4610ca2 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/integrations/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/integrations/page.tsx
@@ -36,19 +36,22 @@ import { cn } from "@plane/utils";
 import { ConnectorListRoot } from "@/components/marketplace/connectors/root";
 import { useRouter, useSearchParams } from "next/navigation";
 import { WithAiFeatureFlagHOC } from "@/components/feature-flags/with-ai-feature-flag-hoc";
+import { useAiFlag } from "@/plane-web/hooks/store/use-ai-flag";
+import type { Route } from "./+types/page";
 
 const siloAppService = new SiloAppService();
 
-function WorkspaceIntegrationsPage() {
+function WorkspaceIntegrationsPage({ params }: Route.ComponentProps) {
+  const { workspaceSlug } = params;
   // i18n
   const { t } = useTranslation();
   // store hooks
   const { workspaceUserInfo, allowPermissions } = useUserPermissions();
   const { currentWorkspace } = useWorkspace();
-  const { slug: workspaceSlug } = currentWorkspace || {};
   const { fetchApplications, getApplicationsForWorkspace } = useApplications();
   const searchParams = useSearchParams();
   const router = useRouter();
+  const isMcpConnectorEnabled = useAiFlag(workspaceSlug, "AI_MCP_CONNECTORS", false);
 
   // derived values
   const canPerformWorkspaceMemberActions = allowPermissions(
@@ -56,7 +59,7 @@ function WorkspaceIntegrationsPage() {
     EUserPermissionsLevel.WORKSPACE
   );
   const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Integrations` : undefined;
-  const applications = getApplicationsForWorkspace(workspaceSlug || "");
+  const applications = getApplicationsForWorkspace(workspaceSlug);
   const activeTabParam = searchParams.get("tab");
 
   // state
@@ -103,19 +106,19 @@ function WorkspaceIntegrationsPage() {
         />
         <>
           {/* Tab Navigation */}
-          <div className="flex items-center gap-3 border-b border-subtle">
-            <button
-              onClick={() => handleTabChange("apps")}
-              className={cn(
-                "py-2 text-sm font-medium transition-colors border-b-2 -mb-px",
-                activeTab === "apps"
-                  ? "border-primary-dark text-primary"
-                  : "border-transparent text-tertiary hover:text-secondary"
-              )}
-            >
-              <Button variant={activeTab === "apps" ? "tertiary" : "ghost"}>Apps</Button>
-            </button>
-            <WithAiFeatureFlagHOC flag="AI_MCP_CONNECTORS" disabledFallback={<></>} workspaceSlug={workspaceSlug || ""}>
+          <WithAiFeatureFlagHOC flag="AI_MCP_CONNECTORS" disabledFallback={<></>} workspaceSlug={workspaceSlug || ""}>
+            <div className="flex items-center gap-3 border-b border-subtle">
+              <button
+                onClick={() => handleTabChange("apps")}
+                className={cn(
+                  "py-2 text-sm font-medium transition-colors border-b-2 -mb-px",
+                  activeTab === "apps"
+                    ? "border-primary-dark text-primary"
+                    : "border-transparent text-tertiary hover:text-secondary"
+                )}
+              >
+                <Button variant={activeTab === "apps" ? "tertiary" : "ghost"}>Apps</Button>
+              </button>
               <button
                 onClick={() => handleTabChange("connectors")}
                 className={cn(
@@ -127,16 +130,16 @@ function WorkspaceIntegrationsPage() {
               >
                 <Button variant={activeTab === "connectors" ? "tertiary" : "ghost"}>Connectors</Button>
               </button>
-            </WithAiFeatureFlagHOC>
-          </div>
-          {activeTab === "apps" ? (
+            </div>
+          </WithAiFeatureFlagHOC>
+          {activeTab === "connectors" && isMcpConnectorEnabled ? (
+            <ConnectorListRoot workspaceSlug={workspaceSlug} />
+          ) : (
             <AppListRoot
-              workspaceSlug={workspaceSlug || ""}
+              workspaceSlug={workspaceSlug}
               apps={applications}
               supportedIntegrations={supportedIntegrations}
             />
-          ) : (
-            <ConnectorListRoot workspaceSlug={workspaceSlug || ""} />
           )}
         </>
       </div>
diff --git a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
index 5e0b7176de..2b0b37ca73 100644
--- a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
+++ b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
@@ -72,6 +72,7 @@ import { useConnectors } from "@/plane-web/hooks/store/marketplace/use-connector
 import { useWorkspaceWorkItemTypes } from "@/plane-web/hooks/store/work-item-types/use-workspace-work-item-types";
 import { useWorkspaceCustomProperties } from "@/plane-web/hooks/store/custom-properties/use-workspace-custom-properties";
 import { useReleases } from "@/hooks/store/use-releases";
+import { useAiFlag } from "@/plane-web/hooks/store/use-ai-flag";
 
 type WorkspaceAuthWrapper = {
   children: ReactNode;
@@ -143,6 +144,7 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
   const isWorkflowsFeatureEnabled = useFlag(workspaceSlug, "WORKFLOWS");
   const isCustomRelationsEnabled = useFlag(workspaceSlug, "CUSTOM_RELATIONS", false);
   const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id;
+  const isMcpConnectorEnabled = useAiFlag(workspaceSlug, "AI_MCP_CONNECTORS", false);
 
   // fetching user workspace information
   useSWR(
@@ -403,10 +405,14 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
   );
 
   // fetching connectors list
-  useSWR(`CONNECTORS_LIST_${workspaceSlug}`, () => fetchConnectors(workspaceSlug), {
-    revalidateOnFocus: false,
-    errorRetryCount: 0,
-  });
+  useSWR(
+    workspaceSlug && isMcpConnectorEnabled ? `CONNECTORS_LIST_${workspaceSlug}` : null,
+    workspaceSlug && isMcpConnectorEnabled ? () => fetchConnectors(workspaceSlug) : null,
+    {
+      revalidateOnFocus: false,
+      errorRetryCount: 0,
+    }
+  );
 
   const flagsLoader = featureFlagsResponse.isLoading || aiFeatureFlagsResponse.isLoading;
   const flagsError = featureFlagsResponse.error || aiFeatureFlagsResponse.error;