feat: add premium feature tag for paid external SaaS plugins in DataSidePane (#41110)

## Summary

This PR introduces a new premium feature tag for datasources that use
paid external SaaS plugins in the DataSidePane. The tag is conditionally
displayed based on a new feature flag, allowing for controlled rollout
and visibility of premium integrations.

---

## Changes

- **Feature Flag:**  
- Added `release_paid_features_tagging` to the `FEATURE_FLAG` and
`DEFAULT_FEATURE_FLAG_VALUE` in `FeatureFlag.ts`.
- **DataSidePane UI:**  
  - Imported and used the new `PremiumFeatureTag` component.
- Added logic to determine if a datasource should display the premium
tag:
    - Checks if the new feature flag is enabled.
- Checks if the datasource's plugin is of type `EXTERNAL_SAAS` and if
the corresponding paid integration feature is disabled.
- Displays the premium tag in the datasource list for eligible
datasources.


## Automation

/ok-to-test tags="@tag.Sanity, @tag.Datasource"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/16281977131>
> Commit: f6450ef
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=16281977131&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.Datasource`
> Spec:
> <hr>Tue, 15 Jul 2025 02:37:55 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

* **New Features**
* Introduced a premium feature tag for certain datasources in the
DataSidePane, visible when specific feature flags are enabled.

* **Chores**
  * Added a new feature flag to support premium feature tagging.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: jacquesikot

app/client/src/ce/entities/FeatureFlag.ts

@@ -64,6 +64,7 @@ export const FEATURE_FLAG = {
     "release_jsobjects_onpageunloadactions_enabled",
   configure_block_event_tracking_for_anonymous_users:
     "configure_block_event_tracking_for_anonymous_users",
+  release_paid_features_tagging: "release_paid_features_tagging",
 } as const;
 
 export type FeatureFlag = keyof typeof FEATURE_FLAG;
@@ -116,6 +117,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   license_ai_agent_instance_enabled: false,
   release_jsobjects_onpageunloadactions_enabled: false,
   configure_block_event_tracking_for_anonymous_users: false,
+  release_paid_features_tagging: false,
 };
 
 export const AB_TESTING_EVENT_KEYS = {

app/client/src/pages/Editor/DataSidePane/DataSidePane.tsx

@@ -6,6 +6,7 @@ import {
   getDatasources,
   getDatasourcesGroupedByPluginCategory,
   getPluginImages,
+  getPlugins,
 } from "ee/selectors/entitiesSelector";
 import history from "utils/history";
 import { datasourcesEditorIdURL, integrationEditorURL } from "ee/RouteBuilder";
@@ -29,6 +30,10 @@ import { getHasCreateDatasourcePermission } from "ee/utils/BusinessFeatures/perm
 import { EmptyState } from "@appsmith/ads";
 import { getAssetUrl } from "ee/utils/airgapHelpers";
 import { getCurrentBasePageId } from "selectors/editorSelectors";
+import PremiumFeatureTag from "components/editorComponents/PremiumFeatureTag";
+import { PluginType } from "entities/Plugin";
+import { selectFeatureFlagCheck } from "ee/selectors/featureFlagsSelectors";
+import type { Datasource } from "entities/Datasource";
 
 const PaneBody = styled.div`
   padding: var(--ads-v2-spaces-3) 0;
@@ -54,7 +59,16 @@ export const DataSidePane = (props: DataSidePaneProps) => {
   const datasources = useSelector(getDatasources);
   const groupedDatasources = useSelector(getDatasourcesGroupedByPluginCategory);
   const pluginImages = useSelector(getPluginImages);
+  const plugins = useSelector(getPlugins);
   const location = useLocation();
+
+  const isIntegrationsEnabledForPaid = useSelector((state: DefaultRootState) =>
+    selectFeatureFlagCheck(
+      state,
+      FEATURE_FLAG.license_external_saas_plugins_enabled,
+    ),
+  );
+
   const goToDatasource = useCallback((id: string) => {
     history.push(datasourcesEditorIdURL({ datasourceId: id }));
   }, []);
@@ -69,6 +83,9 @@ export const DataSidePane = (props: DataSidePaneProps) => {
   );
 
   const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
+  const isPaidFeaturesTaggingEnabled = useFeatureFlag(
+    FEATURE_FLAG.release_paid_features_tagging,
+  );
 
   const canCreateDatasource = getHasCreateDatasourcePermission(
     isFeatureEnabled,
@@ -94,6 +111,26 @@ export const DataSidePane = (props: DataSidePaneProps) => {
     [addButtonClickHandler, canCreateDatasource],
   );
 
+  const shouldShowPremiumTag = useCallback(
+    (datasource: Datasource) => {
+      if (!isPaidFeaturesTaggingEnabled) return false;
+
+      const plugin = plugins.find((p) => p.id === datasource.pluginId);
+
+      if (!plugin) return false;
+
+      if (
+        plugin.type === PluginType.EXTERNAL_SAAS &&
+        !isIntegrationsEnabledForPaid
+      ) {
+        return true;
+      }
+
+      return false;
+    },
+    [plugins, isIntegrationsEnabledForPaid, isPaidFeaturesTaggingEnabled],
+  );
+
   return (
     <Flex flexDirection="column" height="100%" width="100%">
       <PaneHeader
@@ -131,6 +168,9 @@ export const DataSidePane = (props: DataSidePaneProps) => {
                   className: "t--datasource",
                   isSelected: currentSelectedDatasource === data.id,
                   onClick: () => goToDatasource(data.id),
+                  rightControl: shouldShowPremiumTag(data) && (
+                    <PremiumFeatureTag />
+                  ),
                 };
               }),
               className: "",