fix(marketplace): align with UXD: add grey placeholder if icon is missing and placeholder when there is no description (#498)

christoph-jerolimov · web-flow · commit 4f2bf81334e8 · 2025-03-17T23:28:44.000+01:00
* chore(marketplace): add namespace to testdata

Signed-off-by: Christoph Jerolimov &lt;jerolimov+git@redhat.com&gt;

* fix(marketplace): make title and description optional

Signed-off-by: Christoph Jerolimov &lt;jerolimov+git@redhat.com&gt;

* fix(marketplace): render a grey placeholder icon when there is no icon defined

Signed-off-by: Christoph Jerolimov &lt;jerolimov+git@redhat.com&gt;

* fix(marketplace): render no description available when there is no description

Signed-off-by: Christoph Jerolimov &lt;jerolimov+git@redhat.com&gt;

---------

Signed-off-by: Christoph Jerolimov &lt;jerolimov+git@redhat.com&gt;
diff --git a/workspaces/marketplace/.changeset/cuddly-oranges-marry.md b/workspaces/marketplace/.changeset/cuddly-oranges-marry.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-catalog-backend-module-marketplace': patch
+---
+
+make title and description optional
diff --git a/workspaces/marketplace/.changeset/honest-pears-move.md b/workspaces/marketplace/.changeset/honest-pears-move.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-marketplace': patch
+---
+
+render a grey placeholder icon when there is no icon defined
diff --git a/workspaces/marketplace/.changeset/shiny-pugs-share.md b/workspaces/marketplace/.changeset/shiny-pugs-share.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-marketplace': patch
+---
+
+render no description available when there is no description
diff --git a/workspaces/marketplace/examples/all-collections.yaml b/workspaces/marketplace/examples/all-collections.yaml
@@ -1,6 +1,7 @@
 apiVersion: backstage.io/v1alpha1
 kind: Location
 metadata:
+  namespace: marketplace-plugin-demo
   name: all-collections
   description: A collection of marketplace plugin collections
 spec:
diff --git a/workspaces/marketplace/examples/all-orgs.yaml b/workspaces/marketplace/examples/all-orgs.yaml
@@ -1,6 +1,7 @@
 apiVersion: backstage.io/v1alpha1
 kind: Location
 metadata:
+  namespace: marketplace-plugin-demo
   name: all-orgs
   description: A collection of all the marketplace orgs
 spec:
diff --git a/workspaces/marketplace/examples/all-packages.yaml b/workspaces/marketplace/examples/all-packages.yaml
@@ -1,6 +1,7 @@
 apiVersion: backstage.io/v1alpha1
 kind: Location
 metadata:
+  namespace: marketplace-plugin-demo
   name: all-packages
   description: A collection of all the marketplace packages
 spec:
diff --git a/workspaces/marketplace/examples/all-plugins.yaml b/workspaces/marketplace/examples/all-plugins.yaml
@@ -1,13 +1,16 @@
 apiVersion: backstage.io/v1alpha1
 kind: Location
 metadata:
+  namespace: marketplace-plugin-demo
   name: all-plugins
   description: A collection of all the marketplace plugins
 spec:
   targets:
     - ./plugins/3scale.yaml
     - ./plugins/acr.yaml
     - ./plugins/keycloak.yaml
+    - ./plugins/marketplace.yaml
+    - ./plugins/no-icon-no-description.yaml
     - ./plugins/quay.yaml
     - ./plugins/tekton.yaml
     - ./plugins/topology.yaml
diff --git a/workspaces/marketplace/examples/collections/featured.yaml b/workspaces/marketplace/examples/collections/featured.yaml
@@ -2,7 +2,8 @@
 apiVersion: extensions.backstage.io/v1alpha1
 kind: PluginCollection
 metadata:
-  name: disabled-featured
+  namespace: marketplace-plugin-demo
+  name: featured
   title: Featured Plugins
   description: A set of great plugins! :)
 spec:
diff --git a/workspaces/marketplace/examples/collections/kubernetes.yaml b/workspaces/marketplace/examples/collections/kubernetes.yaml
@@ -2,6 +2,7 @@
 apiVersion: extensions.backstage.io/v1alpha1
 kind: PluginCollection
 metadata:
+  namespace: marketplace-plugin-demo
   name: kubernetes
   title: Kubernetes Plugins
   description: A set of Kubernetes plugins! :)
diff --git a/workspaces/marketplace/examples/packages/tekton.yaml b/workspaces/marketplace/examples/packages/tekton.yaml
@@ -2,6 +2,7 @@
 kind: Package
 apiVersion: extensions.backstage.io/v1alpha1
 metadata:
+  namespace: marketplace-plugin-demo
   name: backstage-community-plugin-tekton
   title: '@backstage-community/plugin-tekton'
   links:
diff --git a/workspaces/marketplace/examples/plugins/3scale.yaml b/workspaces/marketplace/examples/plugins/3scale.yaml
@@ -2,6 +2,7 @@
 apiVersion: extensions.backstage.io/v1alpha1
 kind: Plugin
 metadata:
+  namespace: marketplace-plugin-demo
   name: 3scale
   title: APIs with 3scale
   description: Synchronize 3scale content into the Backstage catalog.
diff --git a/workspaces/marketplace/examples/plugins/acr.yaml b/workspaces/marketplace/examples/plugins/acr.yaml
@@ -2,6 +2,7 @@
 apiVersion: extensions.backstage.io/v1alpha1
 kind: Plugin
 metadata:
+  namespace: marketplace-plugin-demo
   name: acr
   title: Container Image Registry for ACR
   description: View container image details from Azure Container Registry in Backstage.
diff --git a/workspaces/marketplace/examples/plugins/keycloak.yaml b/workspaces/marketplace/examples/plugins/keycloak.yaml
@@ -2,6 +2,7 @@
 apiVersion: extensions.backstage.io/v1alpha1
 kind: Plugin
 metadata:
+  namespace: marketplace-plugin-demo
   name: keycloak
   title: Authentication and Authorization with Keycloak
   description: Load users and groups from Keycloak, enabling use of multiple authentication providers to be applied to Backstage entities.
diff --git a/workspaces/marketplace/examples/plugins/marketplace.yaml b/workspaces/marketplace/examples/plugins/marketplace.yaml
@@ -2,6 +2,7 @@
 apiVersion: extensions.backstage.io/v1alpha1
 kind: Plugin
 metadata:
+  namespace: marketplace-plugin-demo
   name: marketplace
   title: Marketplace
   description: The Marketplace plugin allows you to discover and install plugins in Backstage.
diff --git a/workspaces/marketplace/examples/plugins/no-icon-no-description.yaml b/workspaces/marketplace/examples/plugins/no-icon-no-description.yaml
@@ -0,0 +1,7 @@
+# yaml-language-server: $schema=../../json-schema/plugins.json
+apiVersion: extensions.backstage.io/v1alpha1
+kind: Plugin
+metadata:
+  namespace: marketplace-plugin-demo
+  name: no-icon-no-description
+spec: {}
diff --git a/workspaces/marketplace/examples/plugins/quay.yaml b/workspaces/marketplace/examples/plugins/quay.yaml
@@ -2,6 +2,7 @@
 apiVersion: extensions.backstage.io/v1alpha1
 kind: Plugin
 metadata:
+  namespace: marketplace-plugin-demo
   name: quay
   title: Container Image Registry for Quay
   description: View container image details from Quay in Backstage.
diff --git a/workspaces/marketplace/examples/plugins/search.yaml b/workspaces/marketplace/examples/plugins/search.yaml
@@ -2,6 +2,7 @@
 apiVersion: extensions.backstage.io/v1alpha1
 kind: Plugin
 metadata:
+  namespace: marketplace-plugin-demo
   name: search
   title: Backstage Search
   description: Backstage Search lets you find the right information you are looking for in the Backstage ecosystem.
diff --git a/workspaces/marketplace/examples/plugins/tekton.yaml b/workspaces/marketplace/examples/plugins/tekton.yaml
@@ -2,6 +2,7 @@
 apiVersion: extensions.backstage.io/v1alpha1
 kind: Plugin
 metadata:
+  namespace: marketplace-plugin-demo
   name: tekton
   title: Pipelines with Tekton
   description: Easily view Tekton PipelineRun status for your services in Backstage.
diff --git a/workspaces/marketplace/examples/plugins/topology.yaml b/workspaces/marketplace/examples/plugins/topology.yaml
@@ -2,6 +2,7 @@
 apiVersion: extensions.backstage.io/v1alpha1
 kind: Plugin
 metadata:
+  namespace: marketplace-plugin-demo
   name: topology
   title: Application Topology for Kubernetes
   description: Visualize the deployment status and related resources of your applications deployed on any Kubernetes cluster.
diff --git a/workspaces/marketplace/json-schema/plugins.json b/workspaces/marketplace/json-schema/plugins.json
@@ -63,7 +63,7 @@
           }
         }
       },
-      "required": ["name", "title", "description"]
+      "required": ["name"]
     },
     "EntityMetadataLink": {
       "type": "object",
diff --git a/workspaces/marketplace/plugins/catalog-backend-module-marketplace/src/processors/MarketplacePluginProcessor.ts b/workspaces/marketplace/plugins/catalog-backend-module-marketplace/src/processors/MarketplacePluginProcessor.ts
@@ -70,6 +70,12 @@ export class MarketplacePluginProcessor implements CatalogProcessor {
     emit: CatalogProcessorEmit,
   ): Promise<Entity> {
     if (isMarketplacePlugin(entity)) {
+      // Automatically set title to name if it's not defined
+      // so that sorting and searching works as expected.
+      if (!entity.metadata.title) {
+        entity.metadata.title = entity.metadata.name;
+      }
+
       // Automatically enforce annotation pre-installed=false if it's not defined.
       if (!entity.metadata.annotations?.[MarketplaceAnnotation.PRE_INSTALLED]) {
         entity.metadata.annotations = {
diff --git a/workspaces/marketplace/plugins/marketplace/src/components/Markdown.tsx b/workspaces/marketplace/plugins/marketplace/src/components/Markdown.tsx
@@ -24,14 +24,14 @@ export interface MarkdownProps {
 }
 
 export const Markdown = (props: MarkdownProps) => {
-  let content = props.content ?? '';
+  let content = props.content ?? '**no description provided**';
   if (props.title && !content.startsWith('# ')) {
     content = `# ${props.title}\n\n${content}`;
   }
 
   // TODO load images from marketplace assets endpoint ???
   const transformImageUri = (href: string): string => {
-    console.log('xxx Markdown transformImageUri href', href);
+    // console.log('Markdown transformImageUri href', href);
     return href;
   };
 
diff --git a/workspaces/marketplace/plugins/marketplace/src/components/PluginCard.tsx b/workspaces/marketplace/plugins/marketplace/src/components/PluginCard.tsx
@@ -155,11 +155,15 @@ export const PluginCard = ({ plugin }: { plugin: MarketplacePlugin }) => {
             </Stack>
           </Stack>
 
-          {plugin.metadata.description ? (
-            <Typography variant="subtitle2" style={{ fontWeight: 'normal' }}>
-              {plugin.metadata.description}
-            </Typography>
-          ) : null}
+          <Typography
+            variant="subtitle2"
+            sx={{
+              fontWeight: 'normal',
+              fontStyle: plugin.metadata.description ? undefined : 'italic',
+            }}
+          >
+            {plugin.metadata.description ?? 'no description available'}
+          </Typography>
         </Stack>
       </CardContent>
       <CardActions sx={{ pl: 2, pr: 2, pb: 2, justifyContent: 'flex-start' }}>
diff --git a/workspaces/marketplace/plugins/marketplace/src/components/PluginIcon.tsx b/workspaces/marketplace/plugins/marketplace/src/components/PluginIcon.tsx
@@ -28,10 +28,15 @@ export const PluginIcon = ({
   size: number;
 }) => {
   const icon = plugin?.spec?.icon;
-  if (!icon) {
-    return null;
-  }
   return (
-    <CardMedia image={icon} sx={{ width: size, height: size, flexShrink: 0 }} />
+    <CardMedia
+      image={icon}
+      sx={{
+        width: size,
+        height: size,
+        flexShrink: 0,
+        backgroundColor: icon ? undefined : 'grey.400',
+      }}
+    />
   );
 };

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@red-hat-developer-hub/backstage-plugin-catalog-backend-module-marketplace': patch
 +---
++
 +make title and description optional