feat: datasource homepage ui redesign and search functionality for the datasources #38360
Conversation
WalkthroughThis pull request introduces comprehensive updates to the datasource integration interface in the Appsmith client application. The changes focus on restructuring and enhancing the user experience for creating and managing datasources, including new components for displaying plugins, improved messaging, and refined UI components. The modifications span multiple files in the integration editor, introducing more modular and flexible approaches to datasource management. Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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
|
github-actions
bot
added
Integrations Pod General
AmanAgarwal041
changed the title
AmanAgarwal041
changed the title
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/12490435517. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (13)
app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx (2)
4-7: Maintain consistency with theme variables
Consider ensuring margin and border colors align with the design system.
28-48: Hover effect is user friendly
Hiding.ctaby default is acceptable, though some users may be unaware until they hover. Consider a subtle pointer or tooltip for guidance.app/client/src/pages/Editor/IntegrationEditor/EmptySearchedPlugins.tsx (1)
27-32: Search logic uses string comparison
toLocaleLowerCase()is acceptable for basic string search but may not handle all locales. For simple needs, this is fine.app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx (1)
73-73: Tag usage clarifies plan type
The color scheme could be handled by theme variables, but this is acceptable.app/client/src/pages/Editor/IntegrationEditor/AIPlugins.tsx (2)
36-66: Refactor logic for clarity and reuse.
TheAIDataSourcesfunction is well-structured for listing plugins, but extracting the click handler logic into a separate helper might improve testability and readability.
86-106: Combine sorting & filtering to minimize passes onplugins.
Currently, you sort, then filter. Combining these steps or using a single pass approach can slightly enhance performance for large plugin arrays.app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx (4)
12-19: Retain or remove named exports consistently.
Presently, styled components are imported and used here, but the naming conventions in the new imports are inconsistent with older file patterns. Revisit to maintain a uniform style.
Line range hint
27-79: Ensure consistent naming for analytics events.
You’re loggingADD_MOCK_DATASOURCE_CLICKandCREATE_DATA_SOURCE_CLICK. Use a consistent naming format prefix to group these logically.
71-79: Provide a loading or success state foraddMockDataSource.
A loader or success toast helps signal the outcome of asynchronously adding a mock datasource.
81-123: Consider migrating search logic to a memoized selector.
The filtered mock datasources rely onsearchedPlugin. Using a memoized selector or a separate state for searching can reduce re-renders when selecting or editing unrelated states.app/client/src/ce/constants/messages.ts (1)
398-410: Minimal duplication check for the “NEW_DATASOURCE_*” constants.
While adding new message constants, ensure minimal duplication or overlap with existing constants to avoid confusion and reduce maintenance overhead.app/client/src/pages/Editor/IntegrationEditor/DBOrMostPopularPlugins.tsx (2)
69-69: TODO reminder in interface.
The interface includes a// TODO. Consider addressing or opening a dedicated issue if this fix is still pending.Would you like help creating a tracking issue?
299-305: Double-negation usage.
Lines 311 and 318 use!!to coerce values to boolean, which is not strictly necessary in a conditional. Removing the extra negation won't affect logic.- const filteredMostPopularPlugins: Plugin[] = !!isAirgappedInstance + const filteredMostPopularPlugins: Plugin[] = isAirgappedInstance ? mostPopularPlugins.filter( (plugin: Plugin) => plugin?.packageName !== PluginPackageName.GOOGLE_SHEETS, ) : mostPopularPlugins; - let plugins = !!props?.showMostPopularPlugins + let plugins = props?.showMostPopularPlugins ? filteredMostPopularPlugins : getDBPlugins(state);Also applies to: 309-311, 318-320, 322-325
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
app/client/src/ce/constants/messages.ts(1 hunks)app/client/src/constants/PremiumDatasourcesConstants.ts(1 hunks)app/client/src/pages/Editor/IntegrationEditor/AIDataSources.tsx(0 hunks)app/client/src/pages/Editor/IntegrationEditor/AIPlugins.tsx(1 hunks)app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx(1 hunks)app/client/src/pages/Editor/IntegrationEditor/AddDatasourceSecurely.tsx(1 hunks)app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceHeader.tsx(1 hunks)app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx(5 hunks)app/client/src/pages/Editor/IntegrationEditor/DBOrMostPopularPlugins.tsx(8 hunks)app/client/src/pages/Editor/IntegrationEditor/DatasourceItem.tsx(1 hunks)app/client/src/pages/Editor/IntegrationEditor/EmptySearchedPlugins.tsx(1 hunks)app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx(1 hunks)app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx(2 hunks)app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx(0 hunks)app/client/src/pages/Editor/IntegrationEditor/NewQuery.tsx(0 hunks)app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx(3 hunks)
💤 Files with no reviewable changes (3)
- app/client/src/pages/Editor/IntegrationEditor/AIDataSources.tsx
- app/client/src/pages/Editor/IntegrationEditor/NewQuery.tsx
- app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
app/client/src/pages/Editor/IntegrationEditor/DBOrMostPopularPlugins.tsx
[error] 220-220: Avoid redundant double-negation.
It is not necessary to use double-negation when a value will already be coerced to a boolean.
Unsafe fix: Remove redundant double-negation
(lint/complexity/noExtraBooleanCast)
[error] 311-311: Avoid redundant double-negation.
It is not necessary to use double-negation when a value will already be coerced to a boolean.
Unsafe fix: Remove redundant double-negation
(lint/complexity/noExtraBooleanCast)
[error] 318-318: Avoid redundant double-negation.
It is not necessary to use double-negation when a value will already be coerced to a boolean.
Unsafe fix: Remove redundant double-negation
(lint/complexity/noExtraBooleanCast)
🔇 Additional comments (71)
app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx (14)
2-2: Import statement is appropriate.
No issues noted here.
21-23: Nicely structured imports for modularity.
Including APIOrSaasPlugins, DBPluginsOrMostPopular, and AIPlugins together clarifies their roles.
32-34: Well-organized imports.
These imports (StyledDivider, CreateNewDatasourceHeader, and EmptySearchedPlugins) are in line with the new layout approach.
41-41: Margin update aligns UI spacing to new design.
This minor UI update should unify styling for a consistent experience.
95-95: Simple conditional assignment.
Setting mockDataSectionVisible based on non-empty mockDatasources is straightforward.
100-108: Separate components for header and mock datasources.
Displaying AddDatasourceSecurely and optionally MockDataSources improves clarity by grouping related UI conditions.
109-109: Use of DBPluginsOrMostPopular.
Good approach for grouping database plugins or popular ones in a self-contained component.
118-122: Conditional properties and feature flags.
Passing in isPremiumDatasourcesViewEnabled helps keep premium logic in sync with feature flags.
127-129: Additional divider usage.
The addDivider prop improves readability by segmenting plugin groups.
135-141: showSaasAPIs prop usage.
This provides a clean toggle to differentiate between REST/GraphQL and SaaS display.
144-144: AI plugins integration.
Adding AIPlugins seamlessly extends the available data source options for advanced scenarios.
149-153: Conditional block for mock data.
Ensuring MockDataSources is shown only if real datasources exist. This new logic usage is consistent with previous condition.
155-159: Render fallback for empty search results.
EmptySearchedPlugins clarifies no matches for certain queries, improving UX.
183-184: Feature flag check for premium datasources.
The double-bang ensures a valid boolean, cleanly gating premium features.
app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx (7)
1-88: Imports and constants well-structured.
Bringing in relevant hooks, utilities, and constants such as API_ACTION ensures a clear approach for plugin creation.
89-220: NewApiScreen encapsulation looks good.
• Provides modular handling of API creation, with robust analytics logs.
• The handleOnClick logic uses a fallback for unsupported plugins, which is a helpful user safeguard.
222-240: Scroll-into-view logic for improved navigation.
This approach ensures a smooth user experience, especially when toggling between sections.
241-249: Cleanly handles airgapped instances.
Returning null early if showSaasAPIs is set in an airgapped environment is a straightforward safeguard.
251-264: Section heading and optional SaaS.
Using CREATE_NEW_SAAS_SECTION_HEADER or CREATE_NEW_API_SECTION_HEADER is a tidy design to differentiate contexts.
266-319: Selective plugin filtering and search alignment.
Multiple filter criteria, including searchedPlugin, plugin type, premium plugin array, and feature flags are combined effectively.
321-330: MapDispatchToProps usage is consistent.
All necessary actions are neatly wired, complying with the Redux pattern.
app/client/src/constants/PremiumDatasourcesConstants.ts (1)
4-4: Exporting PremiumIntegration broadens reusability.
This interface can now be leveraged across multiple components and modules.
app/client/src/pages/Editor/IntegrationEditor/DatasourceItem.tsx (2)
1-17: Interfaces and imports appear coherent.
Encapsulating details (className, description) clarifies the coin of exchange for data source items.
19-44: DatasourceItem is a concise, self-contained component.
• Highlights: Click handler, optional sibling content, and consistent naming.
• This fosters an extensible approach to data source card UI.
app/client/src/pages/Editor/IntegrationEditor/AddDatasourceSecurely.tsx (6)
3-3: Text component import is aligned with usage.
Ensures consistent typography for user-facing copy.
7-9: Callout styling approach.
Leveraging StyledCallout and a close button for dismissible UI is neat and user-friendly.
10-10: Reference to close button constants.
Good use of pre-defined class names ensures consistent styling and behavior.
12-14: Wrapper with dynamic isClosed prop.
Smart approach to conditionally hide or display the callout container.
21-21: Local state for callout visibility.
Maintaining minimal state avoids complexity for a small UI element.
24-42: AddDatasourceSecurely emphasis on encryption and trust.
• Simple, dismissible info callout that fosters user confidence.
• Coupled with a close button for better user control.
app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx (8)
1-2: Imports look straightforward
No issues found here.
9-13: General styling approach
Flex column with defined gap is clear. Good implementation.
15-17: Logical font sizing
Using theme-based font sizing is aligned to consistency.
19-26: Responsive grid usage
Implementation is concise and aligns items well. Looks good.
50-55: Adaptive image sizing
Good approach to prevent overflow issues.
57-62: Sensible layout for text blocks
This is a neat approach.
64-69: Clear emphasis for datasource name
No issues found.
71-76: Muted styling is correct
Implementation matches typical subdued styling for secondary text.
app/client/src/pages/Editor/IntegrationEditor/EmptySearchedPlugins.tsx (8)
1-2: Imports are well-organized
No concerns here.
3-10: Utilizing ee/constants/messages
Good use of localized strings for user-facing text.
11-15: Selectors are properly imported
Logic is consistent with Redux usage.
17-20: Styled image is well-defined
Image dimension constraints are good for maintaining layout integrity.
22-26: Prop definitions are clear
Straightforward destructuring for isPremiumDatasourcesViewEnabled.
34-42: Conditional merges multiple checks
Combining matches is efficient enough for small data sets.
44-45: Returning null early is good
This approach keeps the component clean if search results exist.
46-58: Empty search UI is user friendly
Clearly communicates no matching plugins found.
app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceHeader.tsx (7)
1-2: Importing from @appsmith/ads
Consistent usage of design system components.
15-19: Form name is well declared
This name is descriptive and unique for the Redux form.
21-24: Header text container
Flex usage is standard for layout. LGTM.
26-32: Search container styling
Height and font size are consistent with the rest of the UI.
34-36: Interface definition is minimal
Serves well for typed props.
38-60: Header structure is crisp
The heading and subheading usage is straightforward. Search is integrated neatly.
62-71: Redux connection looks good
Mapping form value to props and usage of enableReinitialize is correct.
app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/index.tsx (6)
3-3: Accurate imports
No issues here.
12-13: DatasourceItem usage recognized
Appropriate replacement for older components.
38-40: Props for flexible usage
Passing in a plugin list fosters reusability.
56-57: Mapping integration items
Good approach for dynamic rendering of premium integrations.
59-59: Providing a test-friendly className
This is helpful for test automation.
62-65: Icon and name are set properly
Leverages asset URL function effectively.
app/client/src/pages/Editor/IntegrationEditor/AIPlugins.tsx (2)
39-49: Add error handling.
When creating temporary data sources, consider including a try/catch around props.createTempDatasourceFromForm to gracefully handle any potential errors from the action.
68-84: Verify null-return conditions.
Returning null if the instance is airgapped or plugins array is empty is sensible, but ensure no up-line or downstream component depends on these states for layout or data logic.
app/client/src/pages/Editor/IntegrationEditor/DBOrMostPopularPlugins.tsx (10)
Line range hint 1-23: Imports look consistent and concise.
No issues found with these imports; they appear necessary and relevant.
30-31: Descriptive constants for heading titles look good.
The message constants are properly named and enhance readability.
36-47: Integration Styled Components and helper imports are well-structured.
This grouping of imports for styled components and utility functions is clear, keeping relevant modules together.
112-126: New props interface extends flexibility.
The expanded prop list is clearly defined, and the isOnboardingScreen or pageId fields help in relevant UI states.
128-133: Type definitions enhance clarity.
Combining ReduxStateProps, ReduxDispatchProps, and local props in a single type is a sound approach.
206-206: Destructuring of props is straightforward.
Good pattern for readability and maintainability.
216-216: Conditional divider rendering is neat.
Using && is a common React pattern that keeps the view concise.
Line range hint 221-247: DatasourceItem usage and event handling are well-managed.
- Event handling is properly delegated to relevant handlers, with analytics logging in place.
- Dynamic assignment of icon and name is intuitive, guiding users to create the correct data source.
- Spinner display for the
isCreatingstate is helpful feedback for users.
Also applies to: 250-251
🧰 Tools
🪛 Biome (1.9.4)
[error] 220-220: Avoid redundant double-negation.
It is not necessary to use double-negation when a value will already be coerced to a boolean.
Unsafe fix: Remove redundant double-negation
(lint/complexity/noExtraBooleanCast)
256-295: Functional component for scrolled focus.
The useEffect logic for focusing the component when active is true is well-structured. This improves UX by auto-scrolling for relevant sections.
372-372: Connect usage is aligned with Redux patterns.
The connect statement properly wires up state and dispatch props with the component.
|
Deploy-Preview-URL: https://ce-38360.dp.appsmith.com |
AmanAgarwal041
requested review from
ApekshaBhosale and
sagar-qa007
as code owners
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (7)
app/client/src/pages/Editor/IntegrationEditor/DatasourceItem.tsx (1)
10-22: Props interface is well-structured but could be improvedConsider splitting the test ID props into a separate interface for better maintainability.
interface DatasourceItem { className?: string; name: string; icon: string; description?: string; handleOnClick: () => unknown; rightSibling?: ReactNode; +} + +interface DatasourceTestIds { dataNameTestId?: string; dataCardTestId?: string; dataCardWrapperTestId?: string; dataCardDescriptionTestId?: string; dataCardImageTestId?: string; -} +} + +interface DatasourceItemProps extends DatasourceItem, Partial<DatasourceTestIds> {}app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx (1)
101-103: Consider optimizing search performanceThe current search implementation could be optimized for large datasets.
- const filteredDatasources = mockDatasources.filter((m) => - m.name.toLocaleLowerCase().includes(searchedPlugin || ""), - ); + const searchTerm = searchedPlugin?.toLowerCase() || ""; + const filteredDatasources = searchTerm + ? mockDatasources.filter((m) => m.name.toLowerCase().includes(searchTerm)) + : mockDatasources;app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx (3)
47-78: Consider improving type definitionsThe interface uses
anytypes which could be replaced with more specific types for better type safety.Consider defining proper types for:
showUnsupportedPluginDialogcallbackcreateDatasourceFromFormdata parametercreateTempDatasourceFromFormdata parameter
133-170: Consider decomposing handleOnClick functionThe function handles multiple responsibilities including validation, analytics, and action dispatching.
Consider breaking it down into smaller functions:
validatePluginSupporthandleCreateDatasourcehandleCreateApi
269-322: Remove redundant double negationsThe code uses unnecessary double negations that can be simplified.
Replace:
-!!props.showSaasAPIs +Boolean(props.showSaasAPIs)app/client/src/pages/Editor/IntegrationEditor/DBOrMostPopularPlugins.tsx (2)
Line range hint
134-259: Consider extracting navigation logicThe
goToCreateDatasourcemethod contains complex navigation and validation logic.Consider extracting the navigation logic into a separate utility function:
const handleGeneratePageNavigation = ( pluginId: string, skipValidPluginCheck: boolean, generateCRUDSupportedPlugin: GenerateCRUDEnabledPluginMap, showUnsupportedPluginDialog: (callback: () => void) => void ) => { // Navigation logic here };🧰 Tools
🪛 Biome (1.9.4)
[error] 220-220: Avoid redundant double-negation.
It is not necessary to use double-negation when a value will already be coerced to a boolean.
Unsafe fix: Remove redundant double-negation(lint/complexity/noExtraBooleanCast)
Line range hint
341-375: Consider improving dispatch typesThe mapDispatchToProps function uses
anytypes which could be replaced with proper action types.Consider:
- Creating proper action types for each dispatch function
- Using the Redux
Dispatchtype- Removing the eslint-disable comments after fixing the types
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
app/client/cypress/limited-tests.txt(1 hunks)app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx(1 hunks)app/client/src/pages/Editor/IntegrationEditor/DBOrMostPopularPlugins.tsx(8 hunks)app/client/src/pages/Editor/IntegrationEditor/DatasourceItem.tsx(1 hunks)app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
app/client/cypress/limited-tests.txt (1)
Pattern app/client/cypress/**/**.*: Review the following e2e test code written using the Cypress test library. Ensure that:
- Follow best practices for Cypress code and e2e automation.
- Avoid using cy.wait in code.
- Avoid using cy.pause in code.
- Avoid using agHelper.sleep().
- Use locator variables for locators and do not use plain strings.
- Use data-* attributes for selectors.
- Avoid Xpaths, Attributes and CSS path.
- Avoid selectors like .btn.submit or button[type=submit].
- Perform logins via API with LoginFromAPI.
- Perform logout via API with LogOutviaAPI.
- Perform signup via API with SignupFromAPI.
- Avoid using it.only.
- Avoid using after and aftereach in test cases.
- Use multiple assertions for expect statements.
- Avoid using strings for assertions.
- Do not use duplicate filenames even with different paths.
- Avoid using agHelper.Sleep, this.Sleep in any file in code.
🪛 Biome (1.9.4)
app/client/src/pages/Editor/IntegrationEditor/DBOrMostPopularPlugins.tsx
[error] 220-220: Avoid redundant double-negation.
It is not necessary to use double-negation when a value will already be coerced to a boolean.
Unsafe fix: Remove redundant double-negation
(lint/complexity/noExtraBooleanCast)
[error] 315-315: Avoid redundant double-negation.
It is not necessary to use double-negation when a value will already be coerced to a boolean.
Unsafe fix: Remove redundant double-negation
(lint/complexity/noExtraBooleanCast)
[error] 322-322: Avoid redundant double-negation.
It is not necessary to use double-negation when a value will already be coerced to a boolean.
Unsafe fix: Remove redundant double-negation
(lint/complexity/noExtraBooleanCast)
🔇 Additional comments (6)
app/client/cypress/limited-tests.txt (1)
2-13: Verify test coverage for new datasource UI features
The test specifications cover essential areas including:
- Bug fixes (DS_Bug26716, DS_Bug28750)
- Schema validation
- UI features and styles
- Mobile responsiveness
✅ Verification successful
Test coverage for datasource UI features is comprehensive
The test files contain thorough coverage of:
- Datasource card UI design for mock, database, and API datasources
- Schema validation and refresh functionality
- Bug fixes for schema refresh and invalid datasource scenarios
- Schema search functionality across different datasource types
No skipped tests were found in the examined files, and all test cases appear to be actively maintained.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify test coverage for datasource UI components
# Check if all new test files exist
fd -e ts -e js "DS_Bug26716_Spec|DS_Bug28750_Spec|DatasourceSchema_spec|EnableGoogle_spec|ConversionFlow_Generated_App_spec|PropertyControl_spec|EntityBottomBar_spec|JSOnLoad_cyclic_dependency_errors_spec|MockDBs_Spec|Styles_spec|Generate_Crud_New_Page_spec"
# Verify test descriptions
rg -A 5 "describe\(" "cypress/e2e/Regression/ClientSide/BugTests/DS_Bug*.ts" "cypress/e2e/Sanity/Datasources/*.ts"
Length of output: 1481
Script:
#!/bin/bash
# Let's check the test descriptions with correct paths
rg -A 5 "describe\(" "app/client/cypress/e2e/Regression/ClientSide/BugTests/DS_Bug*.ts" "app/client/cypress/e2e/Sanity/Datasources/*.ts"
# Also check test coverage for datasource UI components
rg -A 3 "it\(" "app/client/cypress/e2e/Regression/ClientSide/BugTests/DatasourceSchema_spec.ts" "app/client/cypress/e2e/Sanity/Datasources/Styles_spec.js"
# Check for any skipped tests
rg "it\.skip|describe\.skip" "app/client/cypress/e2e/Regression/ClientSide/BugTests/DS_Bug*.ts" "app/client/cypress/e2e/Sanity/Datasources/*.ts"
Length of output: 4466
app/client/src/pages/Editor/IntegrationEditor/DatasourceItem.tsx (1)
24-63: Component implementation looks good
The component is well-structured with:
- Proper default values for test IDs
- Accessibility attributes (alt text)
- Consistent class naming convention
app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx (2)
Line range hint 27-83: MockDatasourceCard implementation looks good
The component correctly:
- Handles plugin validation
- Tracks analytics events
- Implements proper error handling
115-123: Key generation in map looks good
The key combines multiple unique identifiers to ensure uniqueness:
- datasource name
- package name
- index
app/client/src/pages/Editor/IntegrationEditor/APIOrSaasPlugins.tsx (1)
225-267: Implementation looks good!
The component follows React best practices with proper hooks usage and error handling.
app/client/src/pages/Editor/IntegrationEditor/DBOrMostPopularPlugins.tsx (1)
260-299: Implementation looks good!
The component follows React best practices with proper hooks usage and prop handling.
|
/ci-test-limit |
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/12503714434. |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx (1)
19-26: Consider refining the grid layout implementation.The grid layout is well-structured, but there are two potential improvements:
- The border-radius property appears to have no effect without a border or background color
- The
align-items: centermight cause uneven layouts with varying content heightsexport const DatasourceContainer = styled.div` display: grid; grid-template-columns: repeat(auto-fill, minmax(218.25px, 1fr)); gap: var(--ads-v2-spaces-5); min-width: 150px; - border-radius: 4px; - align-items: center; + align-items: start; `;
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx(1 hunks)
🔇 Additional comments (2)
app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx (2)
1-18: LGTM! Good use of design tokens.
The basic styled components are well-structured and properly utilize design tokens for consistency.
50-75: LGTM! Well-structured visual components.
The visual components are well-implemented with proper use of design tokens and responsive constraints.
app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx
Outdated
Show resolved
Hide resolved
|
Deploy-Preview-URL: https://ce-38360.dp.appsmith.com |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
app/client/src/pages/Editor/IntegrationEditor/AddDatasourceSecurely.tsx (4)
13-15: Consider using design tokens for measurementsReplace hardcoded values with design system tokens for better maintainability and consistency.
const SecureImg = styled.img` - height: 28px; - padding: var(--ads-v2-spaces-2); + height: var(--ads-v2-spaces-7); + padding: var(--ads-v2-spaces-2); `;
19-19: Consider using more descriptive state variable names
isClosedandsetClosedcould be more specific to their context, likeisCalloutClosedandsetCalloutClosed.
22-43: Add TypeScript interface for component propsThe component looks well-structured, but would benefit from explicit TypeScript interfaces for better type safety and documentation.
interface AddDatasourceSecurelyProps { // Add any future props here } function AddDatasourceSecurely({}: AddDatasourceSecurelyProps) { // ... existing implementation }
24-27: Consider extracting image path to constantsThe image path could be moved to a constants file for better maintainability.
// In constants file export const SECURE_LOCK_IMAGE = `${ASSETS_CDN_URL}/secure-lock.png`; // In component <SecureImg alt="datasource securely" src={getAssetUrl(SECURE_LOCK_IMAGE)} />
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
app/client/src/pages/Editor/IntegrationEditor/AddDatasourceSecurely.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: perform-test / client-build / client-build
- GitHub Check: perform-test / rts-build / build
- GitHub Check: perform-test / server-build / server-unit-tests
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-lint / client-lint
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: client-prettier / prettier-check
- GitHub Check: client-build / client-build
🔇 Additional comments (1)
app/client/src/pages/Editor/IntegrationEditor/AddDatasourceSecurely.tsx (1)
31-41: LGTM! Well-structured close button implementationThe close button implementation follows best practices with proper accessibility attributes and consistent styling.
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/12658536873. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
app/client/src/pages/Editor/IntegrationEditor/AddDatasourceSecurely.tsx (3)
9-20: Consider using display property in CSS variablesThe inline display style could be moved to a CSS variable for better maintainability.
const StyledCalloutWrapper = styled(Flex)<{ isClosed: boolean }>` - ${(props) => (props.isClosed ? "display: none;" : "")} + display: ${(props) => (props.isClosed ? "none" : "flex")}; background-color: var(--ads-v2-colors-response-info-surface-default-bg);
22-24: Use CSS variables for dimensionsConsider using CSS variables for the height value to maintain consistency with the design system.
const SecureImg = styled.img` - height: 28px; + height: var(--ads-v2-spaces-7); padding: var(--ads-v2-spaces-2); `;
28-51: Consider memoizing the component for performanceThe component could benefit from memoization since it's likely to be rendered frequently in a list of datasources.
-function AddDatasourceSecurely() { +const AddDatasourceSecurely = React.memo(function AddDatasourceSecurely() { const [isClosed, setClosed] = React.useState(false); // ... rest of the component -} +});
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
app/client/src/pages/Editor/IntegrationEditor/AddDatasourceSecurely.tsx(1 hunks)app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceHeader.tsx(1 hunks)app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceHeader.tsx
- app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: perform-test / client-build / client-build
- GitHub Check: perform-test / server-build / server-unit-tests
- GitHub Check: perform-test / rts-build / build
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-prettier / prettier-check
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: client-build / client-build
- GitHub Check: client-lint / client-lint
🔇 Additional comments (2)
app/client/src/pages/Editor/IntegrationEditor/AddDatasourceSecurely.tsx (2)
3-3: LGTM! Good practices for imports and i18nThe imports are well-organized and follow best practices, particularly using
createMessagefor internationalization.Also applies to: 6-7
39-49: LGTM! Excellent accessibility implementationGreat job implementing proper aria labels and using the design system's button component with appropriate props.
|
Deploy-Preview-URL: https://ce-38360.dp.appsmith.com |
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/12669660562. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx (1)
56-56: Consider using theme spacing tokens for consistency.While the padding and border changes improve the visual separation, consider using theme spacing tokens for the margin-left value (-4px) to maintain consistency with the design system.
padding: var(--ads-v2-spaces-4) var(--ads-v2-spaces-8); z-index: 1; border-bottom: 1px solid var(--ads-v2-color-gray-300); - margin-left: -4px; + margin-left: calc(-1 * var(--ads-v2-spaces-2));Also applies to: 58-58
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx(4 hunks)app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- app/client/src/pages/Editor/IntegrationEditor/IntegrationStyledComponents.tsx
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: perform-test / rts-build / build
- GitHub Check: perform-test / server-build / server-unit-tests
- GitHub Check: perform-test / client-build / client-build
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-lint / client-lint
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: client-build / client-build
- GitHub Check: client-prettier / prettier-check
🔇 Additional comments (3)
app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx (3)
13-13: LGTM! Import statement is correctly structured.The addition of Flex from @appsmith/ads is appropriate for the layout changes being implemented.
67-67: LGTM! Styled component update improves layout control.The change from div to Flex component provides better layout control and aligns with modern flexbox practices.
216-217: LGTM! Layout structure improvements.The flex properties are appropriately used to create a flexible and responsive layout structure.
|
Deploy-Preview-URL: https://ce-38360.dp.appsmith.com |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
app/client/src/pages/Editor/IntegrationEditor/AddDatasourceSecurely.tsx (3)
3-7: Consider optimizing imports.The
Flexcomponent is only used in styled-components. Consider importing it from styled-components directly if available.-import { Button, Flex, Text } from "@appsmith/ads"; +import { Button, Text } from "@appsmith/ads"; +import { Flex } from "@appsmith/ads/styled";
9-19: Add type safety for styled component props.Consider adding a Props interface for better type safety and documentation.
+interface CalloutWrapperProps { + isClosed: boolean; +} -const StyledCalloutWrapper = styled(Flex)<{ isClosed: boolean }>` +const StyledCalloutWrapper = styled(Flex)<CalloutWrapperProps>`
26-51: Add error handling for image loading and component documentation.The component could benefit from:
- Error handling for image loading failures
- JSDoc documentation for the component's purpose and usage
+/** + * AddDatasourceSecurely displays a callout informing users about secure datasource handling. + * @returns {JSX.Element} A dismissible callout component + */ function AddDatasourceSecurely() {Also, consider adding an onError handler for the image:
<SecureImg alt={"datasource securely"} src={getAssetUrl(`${ASSETS_CDN_URL}/secure-lock.png`)} + onError={(e) => { + e.currentTarget.src = getAssetUrl(`${ASSETS_CDN_URL}/fallback-icon.png`); + }} />
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
app/client/cypress/support/dataSourceCommands.js(3 hunks)app/client/src/pages/Editor/IntegrationEditor/AddDatasourceSecurely.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- app/client/cypress/support/dataSourceCommands.js
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: perform-test / rts-build / build
- GitHub Check: perform-test / server-build / server-unit-tests
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-prettier / prettier-check
- GitHub Check: client-build / client-build
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: client-lint / client-lint
🔇 Additional comments (1)
app/client/src/pages/Editor/IntegrationEditor/AddDatasourceSecurely.tsx (1)
38-49: LGTM! Well-implemented accessibility.The Button component has proper accessibility attributes and clear click handling.
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/12687635849. |
|
Deploy-Preview-URL: https://ce-38360.dp.appsmith.com |
Description
The PR
Searchbar,Titleand updates design ofBanneron datasource home pageFixes #38209
or
Fixes
Issue URLWarning
If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.
Automation
/ok-to-test tags="@tag.All"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/12679330922
Commit: aa2489b
Cypress dashboard.
Tags:
@tag.AllSpec:
Thu, 09 Jan 2025 07:29:03 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
Based on the comprehensive changes, here are the updated release notes:
New Features
Improvements
Bug Fixes
Documentation