From fa87fdaeeac39a037049122a43b5e27dba6e9856 Mon Sep 17 00:00:00 2001
From: Christian Lechner <lechnerc77@users.noreply.github.com>
Date: Fri, 26 Apr 2024 22:07:28 +0200
Subject: [PATCH] feat: filtering of recipe table (#74)

* feat: filtering of recipe table

Signed-off-by: Christian Lechner <lechnerc77@users.noreply.github.com>

* fix: linting

Signed-off-by: Christian Lechner <lechnerc77@users.noreply.github.com>

* feat: adjust toolbar for filtering

Signed-off-by: Christian Lechner <lechnerc77@users.noreply.github.com>

* fix: remove obsoletetitle parameter

Signed-off-by: Christian Lechner <lechnerc77@users.noreply.github.com>

* fix: format

Signed-off-by: Christian Lechner <lechnerc77@users.noreply.github.com>

---------

Signed-off-by: Christian Lechner <lechnerc77@users.noreply.github.com>
Co-authored-by: Will <28876888+willtsai@users.noreply.github.com>
---
 .../src/components/recipes/RecipeTable.tsx    | 26 ++++++++++++++++---
 .../src/components/resources/RecipesTab.tsx   |  7 +----
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/plugins/plugin-radius/src/components/recipes/RecipeTable.tsx b/plugins/plugin-radius/src/components/recipes/RecipeTable.tsx
index 7c46e4f..4f4fa48 100644
--- 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
index bc29e80..a569ca5 100644
--- 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} />;
 };