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()) + ); +};