chore: added upcoming section for gac enabled users

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";

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) ? (
-                <BetaTag isClosable={false}>
-                  {createMessage(PREMIUM_DATASOURCES.BETA_TAG)}
-                </BetaTag>
-              ) : null}
-              {isCreating && <Spinner className="cta" size={"sm"} />}
-            </>
-          }
+          rightSibling={isCreating && <Spinner className="cta" size={"sm"} />}
         />
       ))}
-      <PremiumDatasources plugins={props.premiumPlugins} />
+      {!props.isGACEnabled && (
+        <PremiumDatasources plugins={props.premiumPlugins} />
+      )}
     </DatasourceContainer>
   );
 }
@@ -289,6 +281,16 @@ function CreateAPIOrSaasPlugins(props: CreateAPIOrSaasPluginsProps) {
         </DatasourceSectionHeading>
         <APIOrSaasPlugins {...props} />
       </DatasourceSection>
+      {props.premiumPlugins.length > 0 && props.isGACEnabled ? (
+        <DatasourceSection id="upcoming-saas-integrations">
+          <DatasourceSectionHeading kind="heading-m">
+            {createMessage(UPCOMING_SAAS_INTEGRATIONS)}
+          </DatasourceSectionHeading>
+          <DatasourceContainer data-testid="upcoming-datasource-card-container">
+            <PremiumDatasources isGACEnabled plugins={props.premiumPlugins} />
+          </DatasourceContainer>
+        </DatasourceSection>
+      ) : 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,
   };
 };
 

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

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

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

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<string>("");
-  // 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={
-            <PremiumTag
-              isBusinessOrEnterprise={isGACEnabled}
-              isClosable={false}
-              kind={"premium"}
-            >
-              {getTagText(isGACEnabled)}
-            </PremiumTag>
+            !props.isGACEnabled && (
+              <PremiumTag isClosable={false} kind={"premium"}>
+                {createMessage(PREMIUM_DATASOURCES.PREMIUM_TAG)}
+              </PremiumTag>
+            )
           }
         />
       ))}