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.

Sign up for GitHub

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

Jump to bottom

feat: filtering of recipe table #74

Merged
merged 8 commits into from
Apr 26, 2024
Merged

feat: filtering of recipe table #74

Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
dca4de4
feat: filtering of recipe table
lechnerc77 Apr 16, 2024
9d8d556
fix: linting
lechnerc77 Apr 16, 2024
0424823
Merge branch 'main' into issue-32-recipe
willtsai Apr 19, 2024
bc05ce6
Merge branch 'main' into issue-32-recipe
willtsai Apr 23, 2024
a931a48
Merge branch 'main' into issue-32-recipe
willtsai Apr 24, 2024
e28fbd9
feat: adjust toolbar for filtering
lechnerc77 Apr 26, 2024
86336db
fix: remove obsoletetitle parameter
lechnerc77 Apr 26, 2024
d802ab3
fix: format
lechnerc77 Apr 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions plugins/plugin-radius/src/components/recipes/RecipeTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Table, TableColumn } from '@backstage/core-components';
import { Table, TableColumn, TableFilter } from '@backstage/core-components';
import { EnvironmentProperties, Resource } from '../../resources';

interface DisplayRecipe {
Expand Down Expand Up @@ -41,12 +41,32 @@ export const RecipeTable = ({
{ title: 'Template Path', field: 'templatePath' },
];

const filters: TableFilter[] = [
{
column: 'Name',
type: 'select',
},
{
column: 'Type',
type: 'multiple-select',
},
{
column: 'Kind',
type: 'multiple-select',
},
{
column: 'Template Path',
type: 'multiple-select',
},
];

return (
<Table
title={title || 'Recipes'}
Copy link
Contributor

@nithyatsu nithyatsu Apr 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

The title is redundant since we have the page title set already. Therefore we can remove this. I will make sure to remove the redundant title from a couple of other pages too.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done

options={{ search: false, paging: false }}
options={{ search: true, paging: false, sorting: true }}
Copy link
Contributor

Choose a reason for hiding this comment

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

since we have the TableFilter, we can turn of the search so that the toolbar disappears.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I removed the search. I changed the filtering option for Name to multi-select to be consistent with the other options

columns={columns}
data={recipes}
filters={filters}
/>
);
};