diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts
index 7b254ce2da2a..8aa452324789 100644
--- a/app/client/src/ce/constants/messages.ts
+++ b/app/client/src/ce/constants/messages.ts
@@ -2628,6 +2628,7 @@ export const PREMIUM_DATASOURCES = {
COMING_SOON_DESCRIPTION: () =>
"This integration is currently in development. Submit your email below to be notified as soon as it’s available.",
NOTIFY_ME: () => "Notify me",
+ BETA_TAG: () => "Beta",
};
export const DATASOURCE_SECURE_TEXT = () =>
diff --git a/app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx b/app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx
index c5053a010a8c..5a9e6333965c 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx
@@ -28,6 +28,7 @@ import {
DatasourceSection,
DatasourceSectionHeading,
StyledDivider,
+ BetaTag,
} from "./IntegrationStyledComponents";
import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants";
import DatasourceItem from "./DatasourceItem";
@@ -38,6 +39,7 @@ import {
CREATE_NEW_DATASOURCE_REST_API,
CREATE_NEW_SAAS_SECTION_HEADER,
createMessage,
+ PREMIUM_DATASOURCES,
} from "ee/constants/messages";
import scrollIntoView from "scroll-into-view-if-needed";
import PremiumDatasources from "./PremiumDatasources";
@@ -52,6 +54,7 @@ import type { IDEType } from "ee/IDE/Interfaces/IDETypes";
import { filterSearch } from "./util";
import { selectFeatureFlagCheck } from "ee/selectors/featureFlagsSelectors";
import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
+import { isPluginInBetaState } from "./PremiumDatasources/Helpers";
interface CreateAPIOrSaasPluginsProps {
location: {
@@ -229,7 +232,16 @@ function APIOrSaasPlugins(props: CreateAPIOrSaasPluginsProps) {
icon={getAssetUrl(p.iconLocation)}
key={p.id}
name={p.name}
- rightSibling={isCreating && }
+ rightSibling={
+ <>
+ {isPluginInBetaState(p) ? (
+
+ {createMessage(PREMIUM_DATASOURCES.BETA_TAG)}
+
+ ) : null}
+ {isCreating && }
+ >
+ }
/>
))}
@@ -328,7 +340,9 @@ const mapStateToProps = (
FEATURE_FLAG.release_external_saas_plugins_enabled,
);
- const pluginNames = allPlugins.map((plugin) => plugin.name);
+ const pluginNames = allPlugins.map((plugin) =>
+ plugin.name.toLocaleLowerCase(),
+ );
const premiumPlugins =
props.showSaasAPIs && props.isPremiumDatasourcesViewEnabled
diff --git a/app/client/src/pages/Editor/IntegrationEditor/EmptySearchedPlugins.tsx b/app/client/src/pages/Editor/IntegrationEditor/EmptySearchedPlugins.tsx
index 1295f8857e40..d66d4b0d34a3 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/EmptySearchedPlugins.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/EmptySearchedPlugins.tsx
@@ -44,7 +44,7 @@ export default function EmptySearchedPlugins({
),
);
- const pluginNames = plugins.map((plugin) => plugin.name);
+ const pluginNames = plugins.map((plugin) => plugin.name.toLocaleLowerCase());
const searchedItems =
filterSearch(
diff --git a/app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx b/app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx
index 1c23de9d1d34..87387cf62567 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx
@@ -1,4 +1,4 @@
-import { Divider, Text } from "@appsmith/ads";
+import { Divider, Tag, Text } from "@appsmith/ads";
import styled from "styled-components";
export const StyledDivider = styled(Divider)`
@@ -71,3 +71,14 @@ export const DatasourceDescription = styled.div`
font-weight: var(--ads-v2-font-weight-normal);
line-height: var(--ads-v2-line-height-2);
`;
+
+export const BetaTag = styled(Tag)`
+ color: var(--ads-v2-color-gray-700);
+ border-color: #36425233;
+ padding: var(--ads-v2-spaces-3) var(--ads-v2-spaces-2);
+ text-transform: uppercase;
+ > span {
+ font-weight: 700;
+ font-size: 10px;
+ }
+`;
diff --git a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/Constants.ts b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/Constants.ts
index 4138681de0fc..7cc0ba5ec23d 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/Constants.ts
+++ b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/Constants.ts
@@ -6,7 +6,7 @@ export interface PremiumIntegration {
icon: string;
}
-export const PREMIUM_INTEGRATIONS: PremiumIntegration[] = [
+const PREMIUM_INTEGRATIONS: PremiumIntegration[] = [
{
name: "Zendesk",
icon: getAssetUrl(`${ASSETS_CDN_URL}/zendesk-icon.png`),
@@ -31,7 +31,8 @@ export const getFilteredPremiumIntegrations = (
) => {
return isExternalSaasEnabled
? PREMIUM_INTEGRATIONS.filter(
- (integration) => !pluginNames.includes(integration.name),
+ (integration) =>
+ !pluginNames.includes(integration.name.toLocaleLowerCase()),
)
: PREMIUM_INTEGRATIONS;
};
@@ -41,3 +42,7 @@ export const PREMIUM_INTEGRATION_CONTACT_FORM =
export const SCHEDULE_CALL_URL =
"https://calendly.com/carina-neves-fonseca/appsmith";
+
+export const RELEASED_PREMIUM_PLUGINS: string[] = [
+ // Add new released integration plugin names here
+].map((name: string) => name.toLocaleLowerCase());
diff --git a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/Helpers.ts b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/Helpers.ts
index e78aa01214a8..739fa918f0c0 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/Helpers.ts
+++ b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/Helpers.ts
@@ -1,6 +1,7 @@
-import { SCHEDULE_CALL_URL } from "./Constants";
+import { RELEASED_PREMIUM_PLUGINS, SCHEDULE_CALL_URL } from "./Constants";
import { createMessage, PREMIUM_DATASOURCES } from "ee/constants/messages";
import AnalyticsUtil from "ee/utils/AnalyticsUtil";
+import { PluginType, type Plugin } from "entities/Plugin";
import { isRelevantEmail } from "utils/formhelpers";
export const getTagText = (isBusinessOrEnterprise?: boolean) => {
@@ -115,3 +116,10 @@ export const getContactFormSubmitButtonText = (
? createMessage(PREMIUM_DATASOURCES.SCHEDULE_CALL)
: createMessage(PREMIUM_DATASOURCES.SUBMIT);
};
+
+export const isPluginInBetaState = (p: Plugin) => {
+ return (
+ p.type === PluginType.EXTERNAL_SAAS &&
+ !RELEASED_PREMIUM_PLUGINS.includes(p.name.toLocaleLowerCase())
+ );
+};