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,11 +39,13 @@ 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";
 import { pluginSearchSelector } from "./CreateNewDatasourceHeader";
 import {
+  BETA_PLUGINS,
   getFilteredPremiumIntegrations,
   type PremiumIntegration,
 } from "./PremiumDatasources/Constants";
@@ -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={
+            <>
+              {BETA_PLUGINS.includes(p.name) ? (
+                <BetaTag isClosable={false}>
+                  {createMessage(PREMIUM_DATASOURCES.BETA_TAG)}
+                </BetaTag>
+              ) : null}
+              {isCreating && <Spinner className="cta" size={"sm"} />}
+            </>
+          }
         />
       ))}
       <PremiumDatasources plugins={props.premiumPlugins} />

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

@@ -41,3 +41,5 @@ export const PREMIUM_INTEGRATION_CONTACT_FORM =
 
 export const SCHEDULE_CALL_URL =
   "https://calendly.com/carina-neves-fonseca/appsmith";
+
+export const BETA_PLUGINS = ["Zendesk", "Salesforce", "Slack"];