Merge pull request #41115 from appsmithorg/release

16/07 Daily Promotion

Author: btsgh

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/components/editorComponents/PremiumFeatureTag.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Icon, Tag } from "@appsmith/ads";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+
+function PremiumFeatureTag() {
+  return (
+    <Tag isClosable={false} size="md">
+      <Icon name="star-line" size="sm" />
+      <VisuallyHidden>Premium feature</VisuallyHidden>
+    </Tag>
+  );
+}
+
+export default PremiumFeatureTag;

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: "",

app/client/src/pages/Editor/IntegrationEditor/DatasourceItem.tsx

@@ -5,6 +5,8 @@ import {
   DatasourceImage,
   DatasourceName,
   DatasourceNameWrapper,
+  DatasourceContentWrapper,
+  DatasourceLeftContent,
 } from "./IntegrationStyledComponents";
 
 interface DatasourceItem {
@@ -40,25 +42,29 @@ export default function DatasourceItem({
       data-testid={dataCardTestId}
       onClick={handleOnClick}
     >
-      <DatasourceImage
-        alt={name}
-        className="content-icon"
-        data-testid={dataCardImageTestId}
-        src={icon}
-      />
-      <DatasourceNameWrapper data-testid={dataCardWrapperTestId}>
-        <DatasourceName
-          className="t--plugin-name"
-          data-testid={dataNameTestId}
-          renderAs="p"
-        >
-          {name}
-        </DatasourceName>
-        <DatasourceDescription data-testid={dataCardDescriptionTestId}>
-          {description}
-        </DatasourceDescription>
-      </DatasourceNameWrapper>
-      {rightSibling}
+      <DatasourceContentWrapper>
+        <DatasourceLeftContent>
+          <DatasourceImage
+            alt={name}
+            className="content-icon"
+            data-testid={dataCardImageTestId}
+            src={icon}
+          />
+          <DatasourceNameWrapper data-testid={dataCardWrapperTestId}>
+            <DatasourceName
+              className="t--plugin-name"
+              data-testid={dataNameTestId}
+              renderAs="p"
+            >
+              {name}
+            </DatasourceName>
+            <DatasourceDescription data-testid={dataCardDescriptionTestId}>
+              {description}
+            </DatasourceDescription>
+          </DatasourceNameWrapper>
+        </DatasourceLeftContent>
+        {rightSibling}
+      </DatasourceContentWrapper>
     </DatasourceCard>
   );
 }

app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx

@@ -71,3 +71,18 @@ export const DatasourceDescription = styled.div`
   font-weight: var(--ads-v2-font-weight-normal);
   line-height: var(--ads-v2-line-height-2);
 `;
+
+export const DatasourceContentWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: var(--ads-v2-spaces-4);
+`;
+
+export const DatasourceLeftContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--ads-v2-spaces-4);
+  flex: 1;
+`;

app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx

@@ -1,30 +1,17 @@
 import React, { useState } from "react";
 import { getAssetUrl } from "ee/utils/airgapHelpers";
-import { Modal, ModalContent, Tag } from "@appsmith/ads";
+import { Modal, ModalContent } from "@appsmith/ads";
 import styled from "styled-components";
 import ContactForm from "./ContactForm";
 import { handlePremiumDatasourceClick } from "./Helpers";
 import DatasourceItem from "../DatasourceItem";
-import { createMessage } from "ee/constants/messages";
-import { PREMIUM_DATASOURCES } from "ee/constants/messages";
 import type { UpcomingIntegration } from "entities/Plugin";
+import PremiumFeatureTag from "components/editorComponents/PremiumFeatureTag";
 
 const ModalContentWrapper = styled(ModalContent)`
   max-width: 518px;
 `;
 
-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 {
-    font-weight: 700;
-    font-size: 10px;
-  }
-`;
-
 export default function PremiumDatasources(props: {
   plugins: UpcomingIntegration[];
   isIntegrationsEnabledForPaid?: boolean;
@@ -53,11 +40,7 @@ export default function PremiumDatasources(props: {
           key={integration.name}
           name={integration.name}
           rightSibling={
-            !props.isIntegrationsEnabledForPaid && (
-              <PremiumTag isClosable={false} kind={"premium"}>
-                {createMessage(PREMIUM_DATASOURCES.PREMIUM_TAG)}
-              </PremiumTag>
-            )
+            !props.isIntegrationsEnabledForPaid && <PremiumFeatureTag />
           }
         />
       ))}