diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts
index 8aa452324789..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";
@@ -2628,10 +2628,11 @@ 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 = () =>
`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..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,7 @@ 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";
import PremiumDatasources from "./PremiumDatasources";
@@ -54,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: {
@@ -81,6 +79,7 @@ interface CreateAPIOrSaasPluginsProps {
authApiPlugin?: Plugin;
restAPIVisible?: boolean;
graphQLAPIVisible?: boolean;
+ isGACEnabled?: boolean;
}
export const API_ACTION = {
@@ -232,19 +231,12 @@ 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 && (
+
+ )}
);
}
@@ -289,6 +281,16 @@ function CreateAPIOrSaasPlugins(props: CreateAPIOrSaasPluginsProps) {
+ {props.premiumPlugins.length > 0 && props.isGACEnabled ? (
+
+
+ {createMessage(UPCOMING_SAAS_INTEGRATIONS)}
+
+
+
+
+
+ ) : null}
>
);
}
@@ -340,6 +342,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 +380,7 @@ const mapStateToProps = (
restAPIVisible,
graphQLAPIVisible,
isCreating: props.isCreating || getDatasourcesLoadingState(state),
+ 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 739fa918f0c0..acf584466991 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/Helpers.ts
+++ b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/Helpers.ts
@@ -1,15 +1,8 @@
-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 getTagText = (isBusinessOrEnterprise?: boolean) => {
- return isBusinessOrEnterprise
- ? createMessage(PREMIUM_DATASOURCES.SOON_TAG)
- : createMessage(PREMIUM_DATASOURCES.PREMIUM_TAG);
-};
-
export const handlePremiumDatasourceClick = (
integrationName: string,
isBusinessOrEnterprise?: boolean,
@@ -116,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())
- );
-};
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)}
+
+ )
}
/>
))}