feat: datasource homepage ui redesign and search functionality for the datasources #38360
Conversation
WalkthroughThis pull request introduces comprehensive updates to the integration editor's user interface for creating and managing data sources. The changes involve refactoring multiple components, introducing new styled components, and restructuring the data source creation workflow. The modifications focus on improving the user experience by providing a more modular, flexible, and intuitive interface for selecting and creating various types of data sources. Changes
Assessment against linked issues
Possibly related PRs
Suggested Labels
Suggested Reviewers
Poem
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command 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.
| interface CreateAIPluginsProps { | ||
| pageId: string; | ||
| isCreating?: boolean; | ||
| // TODO: Fix this the next time the file is edited | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| showUnsupportedPluginDialog: (callback: any) => void; | ||
|
|
||
| plugins: Plugin[]; | ||
| // TODO: Fix this the next time the file is edited | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| createTempDatasourceFromForm: (data: any) => void; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider clarifying the any type usage.
These references reduce type safety in TypeScript. For stronger typing, define an explicit type or use generics in the function signatures.
|
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
Caution
🔴 🔴 🔴 Some tests have failed.
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/12490435213
Commit: d9defc9
Cypress dashboard.
Tags: @tag.All
Spec:
The following are new failures, please fix them before merging the PR:
- cypress/e2e/Regression/ClientSide/BugTests/DS_Bug26716_Spec.ts
- cypress/e2e/Regression/ClientSide/BugTests/DS_Bug28750_Spec.ts
- cypress/e2e/Regression/ClientSide/BugTests/DatasourceSchema_spec.ts
- cypress/e2e/Regression/ClientSide/Google/EnableGoogle_spec.js
- cypress/e2e/Regression/ClientSide/MobileResponsiveTests/ConversionFlow_Generated_App_spec.ts
- cypress/e2e/Regression/ClientSide/OneClickBinding/PropertyControl_spec.ts
- cypress/e2e/Regression/ClientSide/OtherUIFeatures/EntityBottomBar_spec.ts
- cypress/e2e/Regression/ServerSide/OnLoadTests/JSOnLoad_cyclic_dependency_errors_spec.js
- cypress/e2e/Sanity/Datasources/MockDBs_Spec.ts
- cypress/e2e/Sanity/Datasources/Styles_spec.js
- cypress/e2e/Smoke/GenerateCRUD/Generate_Crud_New_Page_spec.ts
List of identified flaky tests.Wed, 25 Dec 2024 08:05:15 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
New Features
DatasourceItemcomponent for displaying data source information.Bug Fixes
PremiumIntegrationinterface.Refactor
CreateNewDatasourceTabcomponent by removing unused components and simplifying rendering logic.DBOrMostPopularPluginscomponent for improved organization and functionality.Chores