[PAI-1345] fix: remove tabs from integrations page for free workspaces (#6653)

* fix: connectors tab

* fix: refactor
This commit is contained in:
Akshita Goyal
2026-04-09 00:59:15 +05:30
committed by GitHub
parent f467da95f8
commit ffca683a0f
2 changed files with 35 additions and 26 deletions
@@ -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>
@@ -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;