feat: update premium icon for create datasource page (#41109)

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

### 🔍 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/16262901647>
> Commit: da8a4ece7dcc8e06367e0a3859e4ea631561e4c0
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=16262901647&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.Datasource`
> Spec:
> <hr>Mon, 14 Jul 2025 10:10:19 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

* **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.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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/IntegrationEditor/DatasourceItem.tsx

@@ -5,6 +5,8 @@ import {
   DatasourceImage,
   DatasourceName,
   DatasourceNameWrapper,
+  DatasourceContentWrapper,
+  DatasourceLeftContent,
 } from "./IntegrationStyledComponents";
 
 interface DatasourceItem {
@@ -40,6 +42,8 @@ export default function DatasourceItem({
       data-testid={dataCardTestId}
       onClick={handleOnClick}
     >
+      <DatasourceContentWrapper>
+        <DatasourceLeftContent>
           <DatasourceImage
             alt={name}
             className="content-icon"
@@ -58,7 +62,9 @@ export default function DatasourceItem({
               {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 && (
+            !props.isIntegrationsEnabledForPaid && <PremiumFeatureTag />
-              <PremiumTag isClosable={false} kind={"premium"}>
-                {createMessage(PREMIUM_DATASOURCES.PREMIUM_TAG)}
-              </PremiumTag>
-            )
           }
         />
       ))}