Skip to content

Marketplace page UI/ UX enhancements #4819

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jul 14, 2025
Merged

Conversation

anoopw3bdev
Copy link
Contributor

Description:

Introduced an Autocomplete component to select usecases in the marketplace page

Before:
image

After:
Screenshot 2025-07-09 at 12 14 57 PM

Improved styling of Export Data modal

Before:
Screenshot 2025-07-09 at 12 17 13 PM

After:
Screenshot 2025-07-09 at 12 20 58 PM

@toi500
Copy link
Contributor

toi500 commented Jul 9, 2025

This is good. Love it.

@HenryHengZJ HenryHengZJ requested a review from Copilot July 9, 2025 08:43
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR enhances the Marketplace page by replacing the manual usecase checkbox list with an Autocomplete component and refines the layout/styling of the Export Data modal.

  • Introduce MUI Autocomplete for selecting usecases in Marketplace
  • Wrap tabs and autocomplete in a horizontal Stack for improved layout
  • Change Export Data modal’s options layout to a two-column CSS grid

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
packages/ui/src/views/marketplaces/index.jsx Swap manual checkbox list for MUI Autocomplete and adjust tabs wrap
packages/ui/src/layout/MainLayout/Header/ProfileSection/index.jsx Convert export options Stack to a two-column grid layout
Comments suppressed due to low confidence (1)

packages/ui/src/views/marketplaces/index.jsx:648

  • The component ListItemText is used in renderOption but not imported. Add import { ListItemText } from '@mui/material' to prevent runtime errors.
                                                <ListItemText primary={option} />

direction='row'
sx={{
display: 'grid',
gridTemplateColumns: 'repeat(2, 1fr)'
Copy link
Preview

Copilot AI Jul 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] When using CSS grid here, add a gap (e.g. gap: 1 or gridGap: '16px') to the sx so the grid items aren’t flush against each other.

Suggested change
gridTemplateColumns: 'repeat(2, 1fr)'
gridTemplateColumns: 'repeat(2, 1fr)',
gap: '16px'

Copilot uses AI. Check for mistakes.

@HenryHengZJ
Copy link
Contributor

thanks! suggestion: can we add tooltip when hover over the use cases? because right now it can only display 2, and its not apparent to me which are the use cases selected, as opposed to the previous methods where I can see what I have selected:
image

@anoopw3bdev
Copy link
Contributor Author

Thanks for the suggestion @HenryHengZJ
a tooltip with selected values will be very useful in this case. I will push those changes

@anoopw3bdev
Copy link
Contributor Author

Please take a look now

image

Copy link
Contributor

@HenryHengZJ HenryHengZJ left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you!

@HenryHengZJ HenryHengZJ merged commit 9d43852 into FlowiseAI:main Jul 14, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants