Added EntityOrderFilter to sort entities by different fields

Signed-off-by: Mahendra Patel <mahendramp197@gmail.com>

.changeset/sharp-numbers-doubt.md

@@ -7,8 +7,14 @@ Added EntityOrderFilter to sort entities by different fields/columns. This new f
 Example usage:
 
 ```ts
-import { EntityOrderFilter } from '@backstage/plugin-catalog-react';
+import {
+  EntityOrderFilter,
+  useEntityList,
+} from '@backstage/plugin-catalog-react';
+// ...
+const { updateFilters } = useEntityList();
 
+// ...
 updateFilters({
   order: new EntityOrderFilter([
     {

plugins/catalog-react/src/components/UserListPicker/UserListPicker.test.tsx

@@ -60,12 +60,6 @@ const mockUser: UserEntity = {
 };
 
 const ownershipEntityRefs = ['user:default/testuser'];
-const orderFields = [
-  {
-    field: 'metadata.name',
-    order: 'asc',
-  },
-];
 
 const mockConfigApi = mockApis.config({
   data: { organization: { name: 'Test Company' } },
@@ -196,7 +190,6 @@ describe('<UserListPicker />', () => {
         'metadata.namespace': ['default'],
       },
       limit: 0,
-      orderFields,
     });
     expect(mockCatalogApi.queryEntities).toHaveBeenCalledWith({
       filter: {
@@ -204,7 +197,6 @@ describe('<UserListPicker />', () => {
         'relations.ownedBy': ['user:default/testuser'],
       },
       limit: 0,
-      orderFields,
     });
     expect(mockCatalogApi.queryEntities).toHaveBeenCalledWith({
       filter: {
@@ -212,7 +204,6 @@ describe('<UserListPicker />', () => {
         'metadata.name': ['e-1', 'e-2'],
       },
       limit: 1000,
-      orderFields,
     });
   });
 
@@ -238,12 +229,10 @@ describe('<UserListPicker />', () => {
     expect(mockCatalogApi.queryEntities).toHaveBeenCalledWith({
       filter: { 'metadata.tags': ['tag1'] },
       limit: 0,
-      orderFields,
     });
     expect(mockCatalogApi.queryEntities).toHaveBeenCalledWith({
       filter: { 'metadata.name': ['e-1', 'e-2'], 'metadata.tags': ['tag1'] },
       limit: 1000,
-      orderFields,
     });
     expect(mockCatalogApi.queryEntities).toHaveBeenCalledWith({
       filter: {
@@ -251,7 +240,6 @@ describe('<UserListPicker />', () => {
         'metadata.tags': ['tag1'],
       },
       limit: 0,
-      orderFields,
     });
   });
 
@@ -284,12 +272,10 @@ describe('<UserListPicker />', () => {
     expect(mockCatalogApi.queryEntities).toHaveBeenCalledWith({
       filter: { kind: 'component' },
       limit: 0,
-      orderFields,
     });
     expect(mockCatalogApi.queryEntities).toHaveBeenCalledWith({
       filter: { kind: 'component', 'metadata.name': ['e-1', 'e-2'] },
       limit: 1000,
-      orderFields,
     });
     expect(mockCatalogApi.queryEntities).toHaveBeenCalledWith({
       filter: {
@@ -297,7 +283,6 @@ describe('<UserListPicker />', () => {
         'relations.ownedBy': ['user:default/testuser'],
       },
       limit: 0,
-      orderFields,
     });
   });
 
@@ -323,12 +308,10 @@ describe('<UserListPicker />', () => {
       expect(mockCatalogApi.queryEntities).toHaveBeenCalledWith({
         filter: { kind: 'component', 'metadata.name': ['e-1', 'e-2'] },
         limit: 1000,
-        orderFields,
       });
       expect(mockCatalogApi.queryEntities).toHaveBeenCalledWith({
         filter: { kind: 'component' },
         limit: 0,
-        orderFields,
       });
       expect(mockCatalogApi.queryEntities).toHaveBeenCalledWith({
         filter: {
@@ -336,7 +319,6 @@ describe('<UserListPicker />', () => {
           'relations.ownedBy': ['user:default/testuser'],
         },
         limit: 0,
-        orderFields,
       });
     });
 
@@ -469,7 +451,6 @@ describe('<UserListPicker />', () => {
           expect(mockCatalogApi.queryEntities).toHaveBeenCalledWith({
             filter: { 'metadata.name': ['e-1', 'e-2'] },
             limit: 1000,
-            orderFields,
           });
         });
         expect(updateFilters).not.toHaveBeenCalledWith({
@@ -643,7 +624,6 @@ describe('<UserListPicker />', () => {
           expect(mockCatalogApi.queryEntities).toHaveBeenCalledWith({
             filter: { 'metadata.name': ['e-1', 'e-2'] },
             limit: 1000,
-            orderFields,
           });
         });
         expect(updateFilters).not.toHaveBeenCalledWith({

plugins/catalog-react/src/components/UserListPicker/useAllEntitiesCount.test.tsx

@@ -74,12 +74,6 @@ describe('useAllEntitiesCount', () => {
           'relations.ownedBy': ['user:default/owner'],
         },
         limit: 0,
-        orderFields: [
-          {
-            field: 'metadata.name',
-            order: 'asc',
-          },
-        ],
       }),
     );
     expect(result.current).toEqual({ count: 10, loading: false });

plugins/catalog-react/src/components/UserListPicker/useAllEntitiesCount.ts

@@ -30,7 +30,7 @@ export function useAllEntitiesCount() {
   const request = useMemo(() => {
     const { user, ...allFilters } = filters;
     const compacted = compact(Object.values(allFilters));
-    const catalogFilters = reduceCatalogFilters(compacted);
+    const { orderFields, ...catalogFilters } = reduceCatalogFilters(compacted);
     const newRequest: QueryEntitiesInitialRequest = {
       ...catalogFilters,
       limit: 0,

plugins/catalog-react/src/components/UserListPicker/useOwnedEntitiesCount.test.tsx

@@ -115,12 +115,6 @@ describe('useOwnedEntitiesCount', () => {
           'relations.ownedBy': ['user:default/spiderman', 'user:group/a-group'],
         },
         limit: 0,
-        orderFields: [
-          {
-            field: 'metadata.name',
-            order: 'asc',
-          },
-        ],
       }),
     );
 
@@ -196,12 +190,6 @@ describe('useOwnedEntitiesCount', () => {
           'relations.ownedBy': ['user:group/a-group'],
         },
         limit: 0,
-        orderFields: [
-          {
-            field: 'metadata.name',
-            order: 'asc',
-          },
-        ],
       }),
     );
 

plugins/catalog-react/src/components/UserListPicker/useOwnedEntitiesCount.ts

@@ -38,7 +38,7 @@ export function useOwnedEntitiesCount() {
   );
 
   const { user, owners, ...allFilters } = filters;
-  const catalogFilters = reduceCatalogFilters(
+  const { orderFields, ...catalogFilters } = reduceCatalogFilters(
     compact(Object.values(allFilters)),
   );
 

plugins/catalog-react/src/components/UserListPicker/useStarredEntitiesCount.test.tsx

@@ -87,12 +87,6 @@ describe('useStarredEntitiesCount', () => {
           'metadata.name': ['favourite1', 'favourite2'],
         },
         limit: 1000,
-        orderFields: [
-          {
-            field: 'metadata.name',
-            order: 'asc',
-          },
-        ],
       });
       expect(result.current).toEqual({
         count: 2,

plugins/catalog-react/src/components/UserListPicker/useStarredEntitiesCount.ts

@@ -34,7 +34,7 @@ export function useStarredEntitiesCount() {
   const request = useMemo(() => {
     const { user, ...allFilters } = filters;
     const compacted = compact(Object.values(allFilters));
-    const catalogFilters = reduceCatalogFilters(compacted);
+    const { orderFields, ...catalogFilters } = reduceCatalogFilters(compacted);
 
     const facet = 'metadata.name';
 

plugins/catalog-react/src/filters.ts

@@ -338,13 +338,13 @@ export class EntityErrorFilter implements EntityFilter {
  * @public
  */
 export class EntityOrderFilter implements EntityFilter {
-  constructor(readonly value: EntityOrderQuery) {}
+  constructor(readonly values: [string, 'asc' | 'desc'][]) {}
 
   getOrderFilters(): EntityOrderQuery {
-    return this.value;
+    return this.values.map(([field, order]) => ({ field, order }));
   }
 
-  filterEntity(_: Entity): boolean {
-    return true;
+  toQueryValue(): string[] {
+    return this.values.flat();
   }
 }