feat: filtering of recipe table (#74)

* feat: filtering of recipe table Signed-off-by: Christian Lechner <[email protected]> * fix: linting Signed-off-by: Christian Lechner <[email protected]> * feat: adjust toolbar for filtering Signed-off-by: Christian Lechner <[email protected]> * fix: remove obsoletetitle parameter Signed-off-by: Christian Lechner <[email protected]> * fix: format Signed-off-by: Christian Lechner <[email protected]> --------- Signed-off-by: Christian Lechner <[email protected]> Co-authored-by: Will <[email protected]>
radius-project · Apr 26, 2024 · fa87fda · fa87fda
1 parent 7d601c5
commit fa87fda
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/plugins/plugin-radius/src/components/recipes/RecipeTable.tsx b/plugins/plugin-radius/src/components/recipes/RecipeTable.tsx
@@ -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 {
@@ -11,7 +11,6 @@ interface DisplayRecipe {
 
 export const RecipeTable = ({
   environment,
-  title,
 }: {
   environment: Resource<EnvironmentProperties>;
   title?: string;
@@ -41,12 +40,31 @@ export const RecipeTable = ({
     { title: 'Template Path', field: 'templatePath' },
   ];
 
+  const filters: TableFilter[] = [
+    {
+      column: 'Name',
+      type: 'multiple-select',
+    },
+    {
+      column: 'Type',
+      type: 'multiple-select',
+    },
+    {
+      column: 'Kind',
+      type: 'multiple-select',
+    },
+    {
+      column: 'Template Path',
+      type: 'multiple-select',
+    },
+  ];
+
   return (
     <Table
-      title={title || 'Recipes'}
-      options={{ search: false, paging: false }}
+      options={{ search: false, paging: false, sorting: true }}
       columns={columns}
       data={recipes}
+      filters={filters}
     />
   );
 };
diff --git a/plugins/plugin-radius/src/components/resources/RecipesTab.tsx b/plugins/plugin-radius/src/components/resources/RecipesTab.tsx
@@ -7,10 +7,5 @@ export const RecipesTab = ({
 }: {
   resource: Resource<EnvironmentProperties>;
 }) => {
-  return (
-    <RecipeTable
-      environment={resource}
-      title={`Recipes for ${resource.name}`}
-    />
-  );
+  return <RecipeTable environment={resource} />;
 };