Skip to content
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

feat(marketplace): Refactore and update UI, add filter and align it latest design and API changes #401

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

christoph-jerolimov
Copy link
Member

@christoph-jerolimov christoph-jerolimov commented Feb 11, 2025

Hey, I just made a Pull Request!

Address:

✔️ Checklist

  • A changeset describing the change and affected packages. (more info)
  • Added or Updated documentation
  • Tests for new functionality and regression tests for bug fixes
  • Screenshots attached (for UI changes)

@rhdh-gh-app
Copy link

rhdh-gh-app bot commented Feb 11, 2025

Missing Changesets

The following package(s) are changed by this PR but do not have a changeset:

  • @red-hat-developer-hub/marketplace-cli
  • @red-hat-developer-hub/backstage-plugin-catalog-backend-module-marketplace
  • @red-hat-developer-hub/backstage-plugin-marketplace-backend
  • @red-hat-developer-hub/backstage-plugin-marketplace-common
  • @red-hat-developer-hub/backstage-plugin-marketplace

See CONTRIBUTING.md for more information about how to add changesets.

Changed Packages

Package Name Package Path Changeset Bump Current Version
app workspaces/marketplace/packages/app none v0.0.0
backend workspaces/marketplace/packages/backend none v0.0.0
@red-hat-developer-hub/marketplace-cli workspaces/marketplace/packages/cli none v0.0.3
@red-hat-developer-hub/backstage-plugin-catalog-backend-module-marketplace workspaces/marketplace/plugins/catalog-backend-module-marketplace none v0.0.10
@red-hat-developer-hub/backstage-plugin-marketplace-backend workspaces/marketplace/plugins/marketplace-backend none v0.0.9
@red-hat-developer-hub/backstage-plugin-marketplace-common workspaces/marketplace/plugins/marketplace-common none v0.0.9
@red-hat-developer-hub/backstage-plugin-marketplace workspaces/marketplace/plugins/marketplace none v0.0.9

@christoph-jerolimov christoph-jerolimov force-pushed the marketplace-ui branch 3 times, most recently from ec9f85b to 13b470f Compare February 11, 2025 08:56
Copy link
Contributor

@karthikjeeyar karthikjeeyar left a comment

Choose a reason for hiding this comment

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

Filters, Badges, new routes for plugin Install page, massive UI improvements 🎉 Looks good, I have add some minor comments.

'apiVersion' in maybe &&
'kind' in maybe &&
maybe.apiVersion === 'marketplace.backstage.io/v1alpha1' &&
maybe.kind === 'Plugin'
Copy link
Contributor

Choose a reason for hiding this comment

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

nit:

Suggested change
maybe.kind === 'Plugin'
maybe.kind === MarketplaceKind.Plugin

@@ -187,7 +187,7 @@ describe('createRouter', () => {
const { backendServer } = await setupTestWithMockCatalog({
mockData: mockPluginList[0],
name: 'featured-plugins',
kind: 'pluginlist',
kind: 'PluginList',
Copy link
Contributor

Choose a reason for hiding this comment

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

nit:

Suggested change
kind: 'PluginList',
kind: MarketplaceKind.PluginList,

Comment on lines +72 to +77
return {
color: colors.custom,
label: 'Custom',
tooltip: 'Custom',
};
};
Copy link
Contributor

Choose a reason for hiding this comment

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

This shows Custom badge by default for all the entities missing certified/verified annotations, is this expected?

Copy link
Contributor

Choose a reason for hiding this comment

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

Oh I see this in figma, label reads Custom plugins there.


const SupportTypeFilter = () => {
const categoriesFacet = usePluginFacet('spec.categories');
const categories = categoriesFacet.data?.facets['spec.categories'];
Copy link
Contributor

Choose a reason for hiding this comment

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

Instead of categories, Shouldn't this be Certified, Verified, and Custom ?

export const MarketplacePluginsGrid = () => {
const pluginLists = usePluginLists();

const [search] = useQueryParamState<string | undefined>('q');
Copy link
Contributor

Choose a reason for hiding this comment

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

looks like you need to also add the filters for category, author and support.type here, or is it coming in next pr?

Copy link

Quality Gate Failed Quality Gate failed

Failed conditions
16.0% Duplication on New Code (required ≤ 3%)
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants