chore: added upcoming section for gac enabled users

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

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) {
           }
         />
       ))}
-      <PremiumDatasources plugins={props.premiumPlugins} />
+      {!props.isGACEnabled && (
+        <PremiumDatasources plugins={props.premiumPlugins} />
+      )}
     </DatasourceContainer>
   );
 }
@@ -289,6 +293,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 +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,
   };
 };
 

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,

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>
+            )
           }
         />
       ))}