[PAI-1345] fix: remove tabs from integrations page for free workspaces (#6653)
* fix: connectors tab * fix: refactor
This commit is contained in:
+25
-22
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user