[catalog/unprocessed-entities] add sort and filter

Implement sorting and filtering to unprocessed entities tables.

Sorting added to entity-ref, owner and kind columns.

Filtering/searching added to entity-ref column.

Fixes #18694

Signed-off-by: Rickard Dybeck <dybeck@spotify.com>

.changeset/new-kangaroos-train.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-unprocessed-entities': patch
+---
+
+Added filtering and sorting to unprocessed entities tables.

plugins/catalog-unprocessed-entities/src/components/FailedEntities.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import React, { useState } from 'react';
 
 import {
   ErrorPanel,
@@ -91,6 +91,7 @@ export const FailedEntities = () => {
     error,
     value: data,
   } = useAsync(async () => await unprocessedApi.failed());
+  const [, setSelectedSearchTerm] = useState<string>('');
 
   if (loading) {
     return <Progress />;
@@ -102,22 +103,33 @@ export const FailedEntities = () => {
   const columns: TableColumn[] = [
     {
       title: <Typography>entityRef</Typography>,
+      sorting: true,
+      field: 'entity_ref',
+      customFilterAndSearch: (query, row: any) =>
+        row.entity_ref
+          .toLocaleUpperCase('en-US')
+          .includes(query.toLocaleUpperCase('en-US')),
       render: (rowData: UnprocessedEntity | {}) =>
         (rowData as UnprocessedEntity).entity_ref,
     },
     {
       title: <Typography>Kind</Typography>,
+      sorting: true,
+      field: 'kind',
       render: (rowData: UnprocessedEntity | {}) =>
         (rowData as UnprocessedEntity).unprocessed_entity.kind,
     },
     {
       title: <Typography>Owner</Typography>,
+      sorting: true,
+      field: 'unprocessed_entity.spec.owner',
       render: (rowData: UnprocessedEntity | {}) =>
         (rowData as UnprocessedEntity).unprocessed_entity.spec?.owner ||
         'unknown',
     },
     {
       title: <Typography>Raw</Typography>,
+      sorting: false,
       render: (rowData: UnprocessedEntity | {}) => (
         <EntityDialog entity={rowData as UnprocessedEntity} />
       ),
@@ -134,6 +146,9 @@ export const FailedEntities = () => {
             No failed entities found
           </Typography>
         }
+        onSearchChange={(searchTerm: string) =>
+          setSelectedSearchTerm(searchTerm)
+        }
         detailPanel={({ rowData }) => {
           const errors = (rowData as UnprocessedEntity).errors;
           return (

plugins/catalog-unprocessed-entities/src/components/PendingEntities.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import React, { useState } from 'react';
 
 import {
   ErrorPanel,
@@ -46,6 +46,7 @@ export const PendingEntities = () => {
     error,
     value: data,
   } = useAsync(async () => await unprocessedApi.pending());
+  const [, setSelectedSearchTerm] = useState<string>('');
 
   if (loading) {
     return <Progress />;
@@ -57,22 +58,33 @@ export const PendingEntities = () => {
   const columns: TableColumn[] = [
     {
       title: <Typography>entityRef</Typography>,
+      sorting: true,
+      field: 'entity_ref',
+      customFilterAndSearch: (query, row: any) =>
+        row.entity_ref
+          .toLocaleUpperCase('en-US')
+          .includes(query.toLocaleUpperCase('en-US')),
       render: (rowData: UnprocessedEntity | {}) =>
         (rowData as UnprocessedEntity).entity_ref,
     },
     {
       title: <Typography>Kind</Typography>,
+      sorting: true,
+      field: 'kind',
       render: (rowData: UnprocessedEntity | {}) =>
         (rowData as UnprocessedEntity).unprocessed_entity.kind,
     },
     {
       title: <Typography>Owner</Typography>,
+      sorting: true,
+      field: 'unprocessed_entity.spec.owner',
       render: (rowData: UnprocessedEntity | {}) =>
         (rowData as UnprocessedEntity).unprocessed_entity.spec?.owner ||
         'unknown',
     },
     {
       title: <Typography>Raw</Typography>,
+      sorting: false,
       render: (rowData: UnprocessedEntity | {}) => (
         <EntityDialog entity={rowData as UnprocessedEntity} />
       ),
@@ -84,6 +96,9 @@ export const PendingEntities = () => {
         options={{ pageSize: 20 }}
         columns={columns}
         data={data?.entities || []}
+        onSearchChange={(searchTerm: string) =>
+          setSelectedSearchTerm(searchTerm)
+        }
         emptyContent={
           <Typography className={classes.successMessage}>
             No pending entities found