From ed34d0be6917c4a37150f2b0daaa3e6db27847b5 Mon Sep 17 00:00:00 2001 From: Aman Agarwal Date: Wed, 5 Mar 2025 14:27:47 +0530 Subject: [PATCH 1/3] chore: added upcoming section for gac enabled users --- app/client/src/ce/constants/messages.ts | 2 + .../IntegrationEditor/APIOrSaasPlugins.tsx | 23 ++++++++++- .../PremiumDatasources/Helpers.ts | 6 --- .../PremiumDatasources/index.tsx | 38 +++++++------------ 4 files changed, 38 insertions(+), 31 deletions(-) diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index 8aa452324789..9a77587961b7 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -2635,3 +2635,5 @@ export const DATASOURCE_SECURE_TEXT = () => `When connecting datasources, your passwords are AES-256 encrypted and we never store any of your data.`; export const TABLE_LOADING_RECORDS = () => "loading records"; + +export const UPCOMING_SAAS_INTEGRATIONS = () => "Upcoming SaaS Integrations"; diff --git a/app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx b/app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx index 5a9e6333965c..baeacd459d97 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx @@ -40,6 +40,7 @@ import { CREATE_NEW_SAAS_SECTION_HEADER, createMessage, PREMIUM_DATASOURCES, + UPCOMING_SAAS_INTEGRATIONS, } from "ee/constants/messages"; import scrollIntoView from "scroll-into-view-if-needed"; import PremiumDatasources from "./PremiumDatasources"; @@ -81,6 +82,7 @@ interface CreateAPIOrSaasPluginsProps { authApiPlugin?: Plugin; restAPIVisible?: boolean; graphQLAPIVisible?: boolean; + isGACEnabled?: boolean; } export const API_ACTION = { @@ -244,7 +246,9 @@ function APIOrSaasPlugins(props: CreateAPIOrSaasPluginsProps) { } /> ))} - + {!props.isGACEnabled && ( + + )} ); } @@ -289,6 +293,16 @@ function CreateAPIOrSaasPlugins(props: CreateAPIOrSaasPluginsProps) { + {props.premiumPlugins.length > 0 && props.isGACEnabled ? ( + + + {createMessage(UPCOMING_SAAS_INTEGRATIONS)} + + + + + + ) : null} ); } @@ -340,6 +354,12 @@ const mapStateToProps = ( FEATURE_FLAG.release_external_saas_plugins_enabled, ); + // We are using this feature flag to identify whether its the enterprise/business user - ref : https://www.notion.so/appsmith/Condition-for-showing-Premium-Soon-tag-datasources-184fe271b0e2802cb55bd63f468df60d + const isGACEnabled = selectFeatureFlagCheck( + state, + FEATURE_FLAG.license_gac_enabled, + ); + const pluginNames = allPlugins.map((plugin) => plugin.name.toLocaleLowerCase(), ); @@ -372,6 +392,7 @@ const mapStateToProps = ( restAPIVisible, graphQLAPIVisible, isCreating: props.isCreating || getDatasourcesLoadingState(state), + isGACEnabled, }; }; diff --git a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/Helpers.ts b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/Helpers.ts index 739fa918f0c0..56e774702fc2 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/Helpers.ts +++ b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/Helpers.ts @@ -4,12 +4,6 @@ import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import { PluginType, type Plugin } from "entities/Plugin"; import { isRelevantEmail } from "utils/formhelpers"; -export const getTagText = (isBusinessOrEnterprise?: boolean) => { - return isBusinessOrEnterprise - ? createMessage(PREMIUM_DATASOURCES.SOON_TAG) - : createMessage(PREMIUM_DATASOURCES.PREMIUM_TAG); -}; - export const handlePremiumDatasourceClick = ( integrationName: string, isBusinessOrEnterprise?: boolean, diff --git a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx index 0e314dca93eb..97eb3caf7f65 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx @@ -3,27 +3,20 @@ import { getAssetUrl } from "ee/utils/airgapHelpers"; import { Modal, ModalContent, Tag } from "@appsmith/ads"; import styled from "styled-components"; import ContactForm from "./ContactForm"; -import { getTagText, handlePremiumDatasourceClick } from "./Helpers"; +import { handlePremiumDatasourceClick } from "./Helpers"; import DatasourceItem from "../DatasourceItem"; import type { PremiumIntegration } from "./Constants"; -import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; -import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; +import { createMessage } from "ee/constants/messages"; +import { PREMIUM_DATASOURCES } from "ee/constants/messages"; const ModalContentWrapper = styled(ModalContent)` max-width: 518px; `; -const PremiumTag = styled(Tag)<{ isBusinessOrEnterprise: boolean }>` - color: ${(props) => - props.isBusinessOrEnterprise - ? "var(--ads-v2-color-gray-700)" - : "var(--ads-v2-color-purple-700)"}; - background-color: ${(props) => - props.isBusinessOrEnterprise - ? "var(--ads-v2-color-gray-100)" - : "var(--ads-v2-color-purple-100)"}; - border-color: ${(props) => - props.isBusinessOrEnterprise ? "#36425233" : "#401d7333"}; +const PremiumTag = styled(Tag)` + color: var(--ads-v2-color-purple-700); + background-color: var(--ads-v2-color-purple-100); + border-color: var(--ads-v2-color-purple-300); padding: var(--ads-v2-spaces-3) var(--ads-v2-spaces-2); text-transform: uppercase; > span { @@ -34,12 +27,11 @@ const PremiumTag = styled(Tag)<{ isBusinessOrEnterprise: boolean }>` export default function PremiumDatasources(props: { plugins: PremiumIntegration[]; + isGACEnabled?: boolean; }) { const [selectedIntegration, setSelectedIntegration] = useState(""); - // We are using this feature flag to identify whether its the enterprise/business user - ref : https://www.notion.so/appsmith/Condition-for-showing-Premium-Soon-tag-datasources-184fe271b0e2802cb55bd63f468df60d - const isGACEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled); const handleOnClick = (name: string) => { - handlePremiumDatasourceClick(name, isGACEnabled); + handlePremiumDatasourceClick(name, props.isGACEnabled); setSelectedIntegration(name); }; @@ -61,13 +53,11 @@ export default function PremiumDatasources(props: { key={integration.name} name={integration.name} rightSibling={ - - {getTagText(isGACEnabled)} - + !props.isGACEnabled && ( + + {createMessage(PREMIUM_DATASOURCES.PREMIUM_TAG)} + + ) } /> ))} From 04ab647c92fa552ac4e1ec71ac9aed551bfa7d31 Mon Sep 17 00:00:00 2001 From: Aman Agarwal Date: Fri, 7 Mar 2025 14:00:53 +0530 Subject: [PATCH 2/3] fix: removed the beta tag implementation --- app/client/src/ce/constants/messages.ts | 1 - .../Editor/IntegrationEditor/APIOrSaasPlugins.tsx | 14 +------------- .../IntegrationStyledComponents.tsx | 13 +------------ .../PremiumDatasources/Constants.ts | 4 ---- .../PremiumDatasources/Helpers.ts | 10 +--------- 5 files changed, 3 insertions(+), 39 deletions(-) diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index 9a77587961b7..2bd4fc0dd4a8 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -2628,7 +2628,6 @@ 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 baeacd459d97..af2b0030bd4b 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx @@ -28,7 +28,6 @@ import { DatasourceSection, DatasourceSectionHeading, StyledDivider, - BetaTag, } from "./IntegrationStyledComponents"; import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants"; import DatasourceItem from "./DatasourceItem"; @@ -39,7 +38,6 @@ import { CREATE_NEW_DATASOURCE_REST_API, CREATE_NEW_SAAS_SECTION_HEADER, createMessage, - PREMIUM_DATASOURCES, UPCOMING_SAAS_INTEGRATIONS, } from "ee/constants/messages"; import scrollIntoView from "scroll-into-view-if-needed"; @@ -55,7 +53,6 @@ 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: { @@ -234,16 +231,7 @@ function APIOrSaasPlugins(props: CreateAPIOrSaasPluginsProps) { icon={getAssetUrl(p.iconLocation)} key={p.id} name={p.name} - rightSibling={ - <> - {isPluginInBetaState(p) ? ( - - {createMessage(PREMIUM_DATASOURCES.BETA_TAG)} - - ) : null} - {isCreating && } - - } + rightSibling={isCreating && } /> ))} {!props.isGACEnabled && ( diff --git a/app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx b/app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx index 87387cf62567..1c23de9d1d34 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, Tag, Text } from "@appsmith/ads"; +import { Divider, Text } from "@appsmith/ads"; import styled from "styled-components"; export const StyledDivider = styled(Divider)` @@ -71,14 +71,3 @@ 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 7cc0ba5ec23d..4ab0332462e9 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/Constants.ts +++ b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/Constants.ts @@ -42,7 +42,3 @@ 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 56e774702fc2..acf584466991 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/Helpers.ts +++ b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/Helpers.ts @@ -1,7 +1,6 @@ -import { RELEASED_PREMIUM_PLUGINS, SCHEDULE_CALL_URL } from "./Constants"; +import { 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 handlePremiumDatasourceClick = ( @@ -110,10 +109,3 @@ 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()) - ); -}; From 0df6900cebdca10b71d22ff1477c83be227a5e92 Mon Sep 17 00:00:00 2001 From: Aman Agarwal Date: Fri, 7 Mar 2025 16:19:06 +0530 Subject: [PATCH 3/3] fix: changed section titles --- app/client/src/ce/constants/messages.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index 2bd4fc0dd4a8..b066fb375104 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -390,9 +390,9 @@ export const ACTION_RUN_BUTTON_MESSAGE_SECOND_HALF = () => "after adding your query"; export const CREATE_NEW_DATASOURCE = () => "Create datasource"; export const CREATE_NEW_DATASOURCE_DATABASE_HEADER = () => "Databases"; -export const CREATE_NEW_DATASOURCE_MOST_POPULAR_HEADER = () => "Most popular"; +export const CREATE_NEW_DATASOURCE_MOST_POPULAR_HEADER = () => "Most Popular"; export const CREATE_NEW_DATASOURCE_REST_API = () => "REST API"; -export const SAMPLE_DATASOURCES = () => "Sample datasources"; +export const SAMPLE_DATASOURCES = () => "Sample Datasources"; export const SAMPLE_DATASOURCE_SUBHEADING = () => "Use sample datasources if you don’t have a datasource for testing"; export const EDIT_DS_CONFIG = () => "Edit datasource configuration"; @@ -401,8 +401,8 @@ export const CREATE_NEW_DATASOURCE_AUTHENTICATED_REST_API = () => "Authenticated API"; export const CREATE_NEW_DATASOURCE_GRAPHQL_API = () => "GraphQL API"; export const CREATE_NEW_API_SECTION_HEADER = () => "APIs"; -export const CREATE_NEW_SAAS_SECTION_HEADER = () => "SaaS integrations"; -export const CREATE_NEW_AI_SECTION_HEADER = () => "AI integrations"; +export const CREATE_NEW_SAAS_SECTION_HEADER = () => "SaaS Integrations"; +export const CREATE_NEW_AI_SECTION_HEADER = () => "AI Integrations"; export const CONNECT_A_DATASOURCE_HEADING = () => "Connect a datasource"; export const CONNECT_A_DATASOURCE_SUBHEADING = () => "Select a sample datasource or connect your own";