chore: beta tags enabled for certain integrations

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 = () =>

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 && <Spinner className="cta" size={"sm"} />}
+          rightSibling={
+            <>
+              {isPluginInBetaState(p) ? (
+                <BetaTag isClosable={false}>
+                  {createMessage(PREMIUM_DATASOURCES.BETA_TAG)}
+                </BetaTag>
+              ) : null}
+              {isCreating && <Spinner className="cta" size={"sm"} />}
+            </>
+          }
         />
       ))}
       <PremiumDatasources plugins={props.premiumPlugins} />
@@ -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

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(

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;
+  }
+`;

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

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