From c4ed090fceec55320c754e6c38b9d0f28a57b788 Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Mon, 14 Jul 2025 20:16:39 +0100 Subject: [PATCH] feat: update premium icon for create datasource page (#41109) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary This PR updates the premium icon displayed on the "Create Datasource" page. The previous implementation used a custom-styled Tag component for premium datasources. This change introduces a new reusable `PremiumFeatureTag` component with a star icon, and updates the UI to use this new component for premium datasources. ## Changes - **Added**: `PremiumFeatureTag` component in `components/editorComponents/` - Displays a star icon inside a non-closable tag. - **Refactored**: `PremiumDatasources` to use the new `PremiumFeatureTag` instead of the old custom-styled Tag. - **Updated**: `DatasourceItem` and related styled components to improve layout and alignment for the new premium tag. - **Removed**: Old custom `PremiumTag` styles and usage. ## Automation /ok-to-test tags="@tag.Sanity, @tag.Datasource" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: da8a4ece7dcc8e06367e0a3859e4ea631561e4c0 > Cypress dashboard. > Tags: `@tag.Sanity, @tag.Datasource` > Spec: >
Mon, 14 Jul 2025 10:10:19 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## Summary by CodeRabbit * **New Features** * Introduced a new visual tag to indicate premium features within the interface. * **Refactor** * Improved the layout and structure of datasource items for better visual organization. * Replaced custom premium label styling with a standardized reusable component for consistency. --- .../editorComponents/PremiumFeatureTag.tsx | 14 ++++++ .../IntegrationEditor/DatasourceItem.tsx | 44 +++++++++++-------- .../IntegrationStyledComponents.tsx | 15 +++++++ .../PremiumDatasources/index.tsx | 23 ++-------- 4 files changed, 57 insertions(+), 39 deletions(-) create mode 100644 app/client/src/components/editorComponents/PremiumFeatureTag.tsx diff --git a/app/client/src/components/editorComponents/PremiumFeatureTag.tsx b/app/client/src/components/editorComponents/PremiumFeatureTag.tsx new file mode 100644 index 0000000000..d4fefc572f --- /dev/null +++ b/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 ( + + + Premium feature + + ); +} + +export default PremiumFeatureTag; diff --git a/app/client/src/pages/Editor/IntegrationEditor/DatasourceItem.tsx b/app/client/src/pages/Editor/IntegrationEditor/DatasourceItem.tsx index 698d6c7ce9..2c9c2092d1 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/DatasourceItem.tsx +++ b/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} > - - - - {name} - - - {description} - - - {rightSibling} + + + + + + {name} + + + {description} + + + + {rightSibling} + ); } diff --git a/app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx b/app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx index 1c23de9d1d..3de8a296c0 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx +++ b/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; +`; diff --git a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx b/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx index 087cbc3835..e42960aea8 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx +++ b/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 && ( - - {createMessage(PREMIUM_DATASOURCES.PREMIUM_TAG)} - - ) + !props.isIntegrationsEnabledForPaid && } /> ))}