🚀 Explore: Customize card list rendering (grouping, filtering, ordering, etc.)

[dotboris]

Workspace

explore

🔖 Feature description

I'd like to be able to customize the Tools tab in the explore plugin. Specifically, I'd like to be able to groups into sections. While my use case is about grouping, I think that it's reasonable to also allow more in-depth customization including filtering, ordering and so on.

🎤 Context

In my org, we have a lot of tools and the tools page ends up being pretty large and overwhelming. We'd like to be able to organize it in groups / sections.

✌️ Possible Implementation

Mimic the Scaffolder plugin

The template list page supports something like this: https://backstage.io/docs/features/software-templates/configuration#customizing-the-scaffolderpage-with-grouping-and-filtering we could mimic this implementation. It would look something like this:

<ToolExplorerContent
  groups={[
    {
      title: "Section 1",
      filter: (tool) => tool.tags.includes("foo"),
    },
    {
      title: "Section 2",
      filter: (tool) => tool.tags.includes("bar"),
    },
  ]}
  filter={(tool) => tool.tags.include("hide-me")}
/>

This approach feels pretty easy to use and configure but every kind of customization requires changes to <ToolExplorerContent>.

Render props / Function as children

Another idea is to allow users to pass in a function to <ToolExplorerContent> to control the rendering. For example, it could look something like this:

<ToolExplorerContent>
  {({ tools, Card } => {
    const section1 = tools.filter(tool => tool.tags.includes("foo"))
    const section2 = tools.filter(tool => tool.tags.includes("bar"))
    const others = tools.filter(tool => !tool.tags.includes("foo") && !tool.tags.includes("bar")) // This logic is pretty messy not sure how to make this more elegant
    return (
      <>
        <Typography variant="h2">Section 1</Typography>
        <ItemCardGrid>
          {section1.map((tool, index) => <Card tool={tool} key={index}/>}
        </ItemCardGrid>
        <Typography variant="h2">Section 2</Typography>
        <ItemCardGrid>
          {section2.map((tool, index) => <Card tool={tool} key={index}/>}
        </ItemCardGrid>
        <Typography variant="h2">Others</Typography>
        <ItemCardGrid>
          {others.map((tool, index) => <Card tool={tool} key={index}/>}
        </ItemCardGrid>
      </>
    )
  }}
</ToolExplorerContent>

This pattern is very flexible because it allows grouping, sorting, filtering and so on. I think that it's a nice experience for people familiar with React but it's likely more cumbersome than the approach taken by the templates page.

👀 Have you spent some time to check if this feature request has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

Are you willing to submit PR?

No, I don't have time to work on this right now