feat: update premium icon for create datasource page #41109
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
WalkthroughA new reusable Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PremiumDatasources
participant PremiumFeatureTag
User->>PremiumDatasources: Render premium datasource list
PremiumDatasources->>PremiumFeatureTag: Render premium tag for item
PremiumFeatureTag-->>PremiumDatasources: Tag component with star icon
PremiumDatasources-->>User: Display datasource with standardized premium tag
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
app/client/src/components/editorComponents/PremiumFeatureTag.tsx (1)
4-10: Tiny perf & DX bump: memoise and expose test-id.This component is static. Exporting
React.memo(PremiumFeatureTag)avoids useless re-renders, and adata-testid="premium-tag"prop will spare future Cypress selectors from brittle DOM traversal.app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx (1)
75-88: Flexgapstill has patchy support in older Safari.If you need to support <= Safari 14, add a fallback:
export const DatasourceContentWrapper = styled.div` display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--ads-v2-spaces-4); + /* Fallback for Safari <15 */ + > * + * { + margin-left: var(--ads-v2-spaces-4); + } `;
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
app/client/src/components/editorComponents/PremiumFeatureTag.tsx(1 hunks)app/client/src/pages/Editor/IntegrationEditor/DatasourceItem.tsx(2 hunks)app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx(1 hunks)app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx(2 hunks)
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
Learnt from: CR
PR: appsmithorg/appsmith#0
File: .cursor/rules/index.mdc:0-0
Timestamp: 2025-06-23T12:22:10.042Z
Learning: Pull request titles in the Appsmith codebase should follow the Conventional Commits specification, using the format 'type(scope): description' with valid types such as feat, fix, docs, style, refactor, perf, test, build, ci, chore, and revert.
Learnt from: Aishwarya-U-R
PR: appsmithorg/appsmith#29405
File: app/client/cypress/e2e/Regression/ClientSide/Binding/TableV2_Widget_API_Pagination_spec.js:37-41
Timestamp: 2024-07-26T21:12:57.228Z
Learning: The pull request titled "test: Cypress | Replace static with Dynamic waits - Part 1" is part of a phased approach where only certain test specifications are targeted for static wait removal in the initial phase. Future phases will address additional specs.
Learnt from: Aishwarya-U-R
PR: appsmithorg/appsmith#29405
File: app/client/cypress/e2e/Regression/ClientSide/Binding/TableV2_Widget_API_Pagination_spec.js:37-41
Timestamp: 2024-10-08T15:32:39.374Z
Learning: The pull request titled "test: Cypress | Replace static with Dynamic waits - Part 1" is part of a phased approach where only certain test specifications are targeted for static wait removal in the initial phase. Future phases will address additional specs.
Learnt from: sneha122
PR: appsmithorg/appsmith#30012
File: app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx:679-682
Timestamp: 2024-10-08T15:32:34.115Z
Learning: The user `sneha122` has confirmed the resolution of the feedback regarding the redundancy of `|| false` in the `_.get` expression within the `RestAPIDatasourceForm.tsx` file.
Learnt from: sneha122
PR: appsmithorg/appsmith#30012
File: app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx:679-682
Timestamp: 2024-07-26T21:12:57.228Z
Learning: The user `sneha122` has confirmed the resolution of the feedback regarding the redundancy of `|| false` in the `_.get` expression within the `RestAPIDatasourceForm.tsx` file.
Learnt from: brayn003
PR: appsmithorg/appsmith#40462
File: app/client/src/instrumentation/index.ts:0-0
Timestamp: 2025-04-29T09:12:14.552Z
Learning: Only comment on files that are directly related to the PR's objectives, even if other files appear in the diff. For PR #40462, the focus is on the import override feature for artifacts, not on instrumentation or telemetry files.
Learnt from: ankitakinger
PR: appsmithorg/appsmith#37330
File: app/client/src/pages/common/SearchBar/HomepageHeaderAction.tsx:95-95
Timestamp: 2024-11-12T11:42:28.998Z
Learning: In icon provider components within the TypeScript/React codebase, old settings icons like `"settings-2-line"` and `"settings-control"` are intentionally provided alongside new icons. These references are acceptable and should not be flagged for updates.
Learnt from: brayn003
PR: appsmithorg/appsmith#38171
File: app/client/src/git/components/DefaultBranch/DefaultBranchCE.tsx:1-14
Timestamp: 2024-12-15T17:45:48.303Z
Learning: In `app/client/src/git/components/DefaultBranch/DefaultBranchCE.tsx`, the feature flag check is performed at a higher level, so it's acceptable to have `isGitProtectedFeatureLicensed={false}` in this component.
Learnt from: brayn003
PR: appsmithorg/appsmith#40462
File: app/client/src/git/components/ImportOverrideModal/ImportOverrideModalView.tsx:34-40
Timestamp: 2025-04-28T16:16:02.155Z
Learning: The Appsmith team prefers not to include HTML markup in string constants. Text styling or emphasis should be handled through proper React components rather than HTML tags in strings.
app/client/src/components/editorComponents/PremiumFeatureTag.tsx (9)
Learnt from: brayn003
PR: appsmithorg/appsmith#38171
File: app/client/src/git/components/DefaultBranch/DefaultBranchCE.tsx:1-14
Timestamp: 2024-12-15T17:45:48.303Z
Learning: In `app/client/src/git/components/DefaultBranch/DefaultBranchCE.tsx`, the feature flag check is performed at a higher level, so it's acceptable to have `isGitProtectedFeatureLicensed={false}` in this component.
Learnt from: KelvinOm
PR: appsmithorg/appsmith#29387
File: app/client/packages/design-system/widgets/src/components/TagGroup/src/Tag.tsx:9-9
Timestamp: 2024-07-26T21:12:57.228Z
Learning: The `CloseIcon` is being moved to a common directory for better reusability across components, following the suggestion to avoid importing it from the `Modal` component's directory.
Learnt from: KelvinOm
PR: appsmithorg/appsmith#29387
File: app/client/packages/design-system/widgets/src/components/TagGroup/src/Tag.tsx:9-9
Timestamp: 2024-10-08T15:32:34.114Z
Learning: The `CloseIcon` is being moved to a common directory for better reusability across components, following the suggestion to avoid importing it from the `Modal` component's directory.
Learnt from: ankitakinger
PR: appsmithorg/appsmith#37330
File: app/client/src/pages/common/SearchBar/HomepageHeaderAction.tsx:95-95
Timestamp: 2024-11-12T11:42:28.998Z
Learning: In icon provider components within the TypeScript/React codebase, old settings icons like `"settings-2-line"` and `"settings-control"` are intentionally provided alongside new icons. These references are acceptable and should not be flagged for updates.
Learnt from: brayn003
PR: appsmithorg/appsmith#40462
File: app/client/src/git/components/ImportOverrideModal/ImportOverrideModalView.tsx:34-40
Timestamp: 2025-04-28T16:16:02.155Z
Learning: The Appsmith team prefers not to include HTML markup in string constants. Text styling or emphasis should be handled through proper React components rather than HTML tags in strings.
Learnt from: ankitakinger
PR: appsmithorg/appsmith#37330
File: app/client/src/pages/Editor/gitSync/components/GitChangesList/StaticChange.tsx:52-52
Timestamp: 2024-11-12T07:37:42.598Z
Learning: The icon provider components in `app/client/packages/design-system/widgets-old/src/Icon/index.tsx` and `app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx` should provide both `settings-2-line` and `settings-v3` icons and should not be updated to remove the old icon.
Learnt from: brayn003
PR: appsmithorg/appsmith#38088
File: app/client/src/git/components/GitQuickActions/BranchButton/index.tsx:72-74
Timestamp: 2024-12-11T08:33:24.352Z
Learning: In the 'BranchButton' component in 'app/client/src/git/components/GitQuickActions/BranchButton/index.tsx' (TypeScript, React), the `useEffect` hook that checks for label ellipsis does not need to include `currentBranch` in its dependency array.
Learnt from: brayn003
PR: appsmithorg/appsmith#38155
File: app/client/src/git/components/ProtectedBranches/index.tsx:18-27
Timestamp: 2024-12-13T22:08:46.336Z
Learning: The `ProtectedBranchesView` component in `app/client/src/git/components/ProtectedBranches/ProtectedBranchesView.tsx` already has a TypeScript interface for its props.
Learnt from: ashit-rath
PR: appsmithorg/appsmith#37912
File: app/client/src/git/components/QuickActions/helpers.ts:22-25
Timestamp: 2024-12-03T10:13:43.282Z
Learning: In `app/client/src/git/components/QuickActions/helpers.ts`, the unnecessary `@ts-ignore` comments will be removed in future PRs.
app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx (12)
Learnt from: saiprabhu-dandanayak
PR: appsmithorg/appsmith#33911
File: app/client/src/api/TemplatesApi.ts:0-0
Timestamp: 2024-07-26T21:12:57.228Z
Learning: User saiprabhu-dandanayak has confirmed the removal of the `any` type in the TypeScript code for better type safety in the `TemplatesApi.ts` file.
Learnt from: saiprabhu-dandanayak
PR: appsmithorg/appsmith#33911
File: app/client/src/api/TemplatesApi.ts:0-0
Timestamp: 2024-10-08T15:32:39.374Z
Learning: User saiprabhu-dandanayak has confirmed the removal of the `any` type in the TypeScript code for better type safety in the `TemplatesApi.ts` file.
Learnt from: AmanAgarwal041
PR: appsmithorg/appsmith#38110
File: app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/ContactForm.tsx:53-59
Timestamp: 2024-12-16T17:36:25.195Z
Learning: In `app/client/src/ce/pages/IntegrationEditor/PremiumDatasources/ContactForm.tsx`, the `onSubmit` function only fires an event and doesn't depend on any API call response, so rate limiting is not necessary.
Learnt from: sharat87
PR: appsmithorg/appsmith#34471
File: app/client/src/ce/api/JSActionAPI.tsx:143-161
Timestamp: 2024-10-08T15:32:39.374Z
Learning: The `updateJSCollectionActionRefactor` method in `JSActionAPI.tsx` includes a check to ensure `action.datasource` is not null before manipulating its properties.
Learnt from: sharat87
PR: appsmithorg/appsmith#34471
File: app/client/src/ce/api/JSActionAPI.tsx:143-161
Timestamp: 2024-06-26T06:22:15.976Z
Learning: The `updateJSCollectionActionRefactor` method in `JSActionAPI.tsx` includes a check to ensure `action.datasource` is not null before manipulating its properties.
Learnt from: ashit-rath
PR: appsmithorg/appsmith#37912
File: app/client/src/git/components/QuickActions/helpers.ts:22-25
Timestamp: 2024-12-03T10:13:43.282Z
Learning: In `app/client/src/git/components/QuickActions/helpers.ts`, the unnecessary `@ts-ignore` comments will be removed in future PRs.
Learnt from: brayn003
PR: appsmithorg/appsmith#38088
File: app/client/src/git/components/GitQuickActions/BranchButton/index.tsx:72-74
Timestamp: 2024-12-11T08:33:24.352Z
Learning: In the 'BranchButton' component in 'app/client/src/git/components/GitQuickActions/BranchButton/index.tsx' (TypeScript, React), the `useEffect` hook that checks for label ellipsis does not need to include `currentBranch` in its dependency array.
Learnt from: ankitakinger
PR: appsmithorg/appsmith#37330
File: app/client/src/pages/Editor/gitSync/components/GitChangesList/StaticChange.tsx:52-52
Timestamp: 2024-11-12T07:37:42.598Z
Learning: The icon provider components in `app/client/packages/design-system/widgets-old/src/Icon/index.tsx` and `app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx` should provide both `settings-2-line` and `settings-v3` icons and should not be updated to remove the old icon.
Learnt from: alex-golovanov
PR: appsmithorg/appsmith#33863
File: app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx:93-98
Timestamp: 2024-07-26T21:12:57.228Z
Learning: The suggestion to optimize conditional rendering in `DatasourceDBEditor` is considered out of scope for the current issue related to making text selectable.
Learnt from: alex-golovanov
PR: appsmithorg/appsmith#33863
File: app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx:93-98
Timestamp: 2024-10-08T15:32:34.115Z
Learning: The suggestion to optimize conditional rendering in `DatasourceDBEditor` is considered out of scope for the current issue related to making text selectable.
Learnt from: brayn003
PR: appsmithorg/appsmith#40462
File: app/client/src/git/components/ImportOverrideModal/ImportOverrideModalView.tsx:34-40
Timestamp: 2025-04-28T16:16:02.155Z
Learning: The Appsmith team prefers not to include HTML markup in string constants. Text styling or emphasis should be handled through proper React components rather than HTML tags in strings.
Learnt from: brayn003
PR: appsmithorg/appsmith#38171
File: app/client/src/git/components/DefaultBranch/DefaultBranchCE.tsx:1-14
Timestamp: 2024-12-15T17:45:48.303Z
Learning: In `app/client/src/git/components/DefaultBranch/DefaultBranchCE.tsx`, the feature flag check is performed at a higher level, so it's acceptable to have `isGitProtectedFeatureLicensed={false}` in this component.
app/client/src/pages/Editor/IntegrationEditor/DatasourceItem.tsx (5)
Learnt from: sharat87
PR: appsmithorg/appsmith#34471
File: app/client/src/ce/api/JSActionAPI.tsx:143-161
Timestamp: 2024-10-08T15:32:39.374Z
Learning: The `updateJSCollectionActionRefactor` method in `JSActionAPI.tsx` includes a check to ensure `action.datasource` is not null before manipulating its properties.
Learnt from: sharat87
PR: appsmithorg/appsmith#34471
File: app/client/src/ce/api/JSActionAPI.tsx:143-161
Timestamp: 2024-06-26T06:22:15.976Z
Learning: The `updateJSCollectionActionRefactor` method in `JSActionAPI.tsx` includes a check to ensure `action.datasource` is not null before manipulating its properties.
Learnt from: alex-golovanov
PR: appsmithorg/appsmith#33863
File: app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx:93-98
Timestamp: 2024-07-26T21:12:57.228Z
Learning: The suggestion to optimize conditional rendering in `DatasourceDBEditor` is considered out of scope for the current issue related to making text selectable.
Learnt from: alex-golovanov
PR: appsmithorg/appsmith#33863
File: app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx:93-98
Timestamp: 2024-10-08T15:32:34.115Z
Learning: The suggestion to optimize conditional rendering in `DatasourceDBEditor` is considered out of scope for the current issue related to making text selectable.
Learnt from: ankitakinger
PR: appsmithorg/appsmith#37330
File: app/client/src/pages/common/SearchBar/HomepageHeaderAction.tsx:95-95
Timestamp: 2024-11-12T11:42:28.998Z
Learning: In icon provider components within the TypeScript/React codebase, old settings icons like `"settings-2-line"` and `"settings-control"` are intentionally provided alongside new icons. These references are acceptable and should not be flagged for updates.
app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx (9)
Learnt from: ankitakinger
PR: appsmithorg/appsmith#37330
File: app/client/src/pages/common/SearchBar/HomepageHeaderAction.tsx:95-95
Timestamp: 2024-11-12T11:42:28.998Z
Learning: In icon provider components within the TypeScript/React codebase, old settings icons like `"settings-2-line"` and `"settings-control"` are intentionally provided alongside new icons. These references are acceptable and should not be flagged for updates.
Learnt from: alex-golovanov
PR: appsmithorg/appsmith#33863
File: app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx:93-98
Timestamp: 2024-07-26T21:12:57.228Z
Learning: The suggestion to optimize conditional rendering in `DatasourceDBEditor` is considered out of scope for the current issue related to making text selectable.
Learnt from: alex-golovanov
PR: appsmithorg/appsmith#33863
File: app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx:93-98
Timestamp: 2024-10-08T15:32:34.115Z
Learning: The suggestion to optimize conditional rendering in `DatasourceDBEditor` is considered out of scope for the current issue related to making text selectable.
Learnt from: alex-golovanov
PR: appsmithorg/appsmith#36665
File: app/client/src/IDE/Components/FileTab/styles.tsx:19-19
Timestamp: 2024-10-08T15:32:34.115Z
Learning: Do not suggest replacing hardcoded `padding-top: 6px;` with design variables in `app/client/src/IDE/Components/FileTab/styles.tsx`.
Learnt from: alex-golovanov
PR: appsmithorg/appsmith#36665
File: app/client/src/IDE/Components/FileTab/styles.tsx:19-19
Timestamp: 2024-10-07T16:34:31.634Z
Learning: Do not suggest replacing hardcoded `padding-top: 6px;` with design variables in `app/client/src/IDE/Components/FileTab/styles.tsx`.
Learnt from: ankitakinger
PR: appsmithorg/appsmith#37330
File: app/client/src/pages/Editor/gitSync/components/GitChangesList/StaticChange.tsx:52-52
Timestamp: 2024-11-12T07:37:42.598Z
Learning: The icon provider components in `app/client/packages/design-system/widgets-old/src/Icon/index.tsx` and `app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx` should provide both `settings-2-line` and `settings-v3` icons and should not be updated to remove the old icon.
Learnt from: sharat87
PR: appsmithorg/appsmith#34471
File: app/client/src/ce/api/JSActionAPI.tsx:143-161
Timestamp: 2024-10-08T15:32:39.374Z
Learning: The `updateJSCollectionActionRefactor` method in `JSActionAPI.tsx` includes a check to ensure `action.datasource` is not null before manipulating its properties.
Learnt from: sharat87
PR: appsmithorg/appsmith#34471
File: app/client/src/ce/api/JSActionAPI.tsx:143-161
Timestamp: 2024-06-26T06:22:15.976Z
Learning: The `updateJSCollectionActionRefactor` method in `JSActionAPI.tsx` includes a check to ensure `action.datasource` is not null before manipulating its properties.
Learnt from: brayn003
PR: appsmithorg/appsmith#38155
File: app/client/src/git/components/ProtectedBranches/index.tsx:18-27
Timestamp: 2024-12-13T22:08:46.336Z
Learning: The `ProtectedBranchesView` component in `app/client/src/git/components/ProtectedBranches/ProtectedBranchesView.tsx` already has a TypeScript interface for its props.
🧬 Code Graph Analysis (1)
app/client/src/pages/Editor/IntegrationEditor/DatasourceItem.tsx (1)
app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx (6)
DatasourceContentWrapper(75-81)DatasourceLeftContent(83-88)DatasourceImage(48-53)DatasourceNameWrapper(55-59)DatasourceName(61-66)DatasourceDescription(68-73)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: perform-test / rts-build / build
- GitHub Check: perform-test / client-build / client-build
- GitHub Check: perform-test / server-build / server-unit-tests
- GitHub Check: client-lint / client-lint
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: client-prettier / prettier-check
- GitHub Check: client-build / client-build
🔇 Additional comments (2)
app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx (1)
42-44: Change looks good – one guard-rail to consider.If you ever gate the tag’s visibility on additional conditions, keep the boolean expression short-circuited (
&&) as you did here – it prevents the component from mounting at all, which is what you want.app/client/src/pages/Editor/IntegrationEditor/DatasourceItem.tsx (1)
45-67: Confirm e2e selectors after DOM shuffle.
DatasourceImage,DatasourceNameWrapper, and the new wrappers changed nesting depth. Any Cypress tests relying on positional selectors may now fail. Grep fordatasource-image/datasource-nameusage and adjust paths if needed.
app/client/src/components/editorComponents/PremiumFeatureTag.tsx
Outdated
Show resolved
Hide resolved
rahulbarwal
approved these changes
Jul 14, 2025
ankitakinger
approved these changes
Jul 14, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
PremiumFeatureTagcomponent with a star icon, and updates the UI to use this new component for premium datasources.Changes
PremiumFeatureTagcomponent incomponents/editorComponents/PremiumDatasourcesto use the newPremiumFeatureTaginstead of the old custom-styled Tag.DatasourceItemand related styled components to improve layout and alignment for the new premium tag.PremiumTagstyles and usage.Automation
/ok-to-test tags="@tag.Sanity, @tag.Datasource"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/16262901647
Commit: da8a4ec
Cypress dashboard.
Tags:
@tag.Sanity, @tag.DatasourceSpec:
Mon, 14 Jul 2025 10:10:19 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
New Features
Refactor