Add Server-Side Filtering for Versions and Changesets (#190)

Author: SorexBentley

common/changes/@itwin/manage-versions-react/sourabh-adding-server-side-filters-for-versions-and-changesets_2025-12-03-16-45.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/manage-versions-react",
+      "comment": "Added server-side filtering for Named Versions (name, description) and Changesets (index range) tables with improved performance and preserved expandable row state.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@itwin/manage-versions-react"
+}

packages/modules/manage-versions/src/clients/changesetClient.test.ts

@@ -19,7 +19,7 @@ describe("ChangesetClient", () => {
 
     await changesetClient.get(MOCKED_IMODEL_ID);
     expect(mockHttpGet).toHaveBeenCalledWith(
-      `https://api.bentley.com/imodels/${MOCKED_IMODEL_ID}/changesets?$orderBy=index+desc`,
+      `https://api.bentley.com/imodels/${MOCKED_IMODEL_ID}/changesets?$orderBy=index%20desc`,
       {
         headers: {
           Prefer: "return=representation",
@@ -34,7 +34,7 @@ describe("ChangesetClient", () => {
 
     await changesetClient.get(MOCKED_IMODEL_ID, { top: 10, skip: 20 });
     expect(mockHttpGet).toHaveBeenCalledWith(
-      `https://api.bentley.com/imodels/${MOCKED_IMODEL_ID}/changesets?$orderBy=index+desc&$top=10&$skip=20`,
+      `https://api.bentley.com/imodels/${MOCKED_IMODEL_ID}/changesets?$orderBy=index%20desc&$top=10&$skip=20`,
       {
         headers: {
           Prefer: "return=representation",

packages/modules/manage-versions/src/clients/changesetClient.ts

@@ -21,12 +21,17 @@ export class ChangesetClient {
     imodelId: string,
     requestOptions: RequestOptions = {}
   ): Promise<Changeset[]> {
+    const options = {
+      orderBy: "index+desc",
+      ...requestOptions,
+    };
+
     return this._http
       .get(
         `${UrlBuilder.buildChangesetUrl(
           imodelId,
           this._serverEnvironmentPrefix
-        )}${UrlBuilder.getQuery({ orderBy: "index+desc", ...requestOptions })}`,
+        )}${UrlBuilder.getQuery(options)}`,
         {
           headers: {
             [HttpHeaderNames.Prefer]: "return=representation",

packages/modules/manage-versions/src/clients/namedVersionClient.test.ts

@@ -21,7 +21,7 @@ describe("NamedVersionClient", () => {
 
     await namedVersionClient.get(MOCKED_IMODEL_ID);
     expect(mockHttpGet).toHaveBeenCalledWith(
-      `https://api.bentley.com/imodels/${MOCKED_IMODEL_ID}/namedversions?$orderBy=changesetIndex+desc`,
+      `https://api.bentley.com/imodels/${MOCKED_IMODEL_ID}/namedversions?$orderBy=changesetIndex%20desc`,
       {
         headers: {
           Prefer: "return=representation",
@@ -36,7 +36,7 @@ describe("NamedVersionClient", () => {
 
     await namedVersionClient.get(MOCKED_IMODEL_ID, { top: 10, skip: 20 });
     expect(mockHttpGet).toHaveBeenCalledWith(
-      `https://api.bentley.com/imodels/${MOCKED_IMODEL_ID}/namedversions?$orderBy=changesetIndex+desc&$top=10&$skip=20`,
+      `https://api.bentley.com/imodels/${MOCKED_IMODEL_ID}/namedversions?$orderBy=changesetIndex%20desc&$top=10&$skip=20`,
       {
         headers: {
           Prefer: "return=representation",

packages/modules/manage-versions/src/clients/namedVersionClient.ts

@@ -21,16 +21,18 @@ export class NamedVersionClient {
     imodelId: string,
     requestOptions: RequestOptions = {}
   ): Promise<NamedVersion[]> {
+    const options = {
+      orderBy: "changesetIndex+desc",
+      ...requestOptions,
+    };
+
     return this._http
       .get(
         `${UrlBuilder.buildVersionsUrl(
           imodelId,
           undefined,
           this._serverEnvironmentPrefix
-        )}${UrlBuilder.getQuery({
-          orderBy: "changesetIndex+desc",
-          ...requestOptions,
-        })}`,
+        )}${UrlBuilder.getQuery(options)}`,
         {
           headers: {
             [HttpHeaderNames.Prefer]: "return=representation",

packages/modules/manage-versions/src/clients/urlBuilder.test.ts

@@ -32,11 +32,13 @@ describe("UrlBuilder", () => {
   it("should return query with given params", () => {
     expect(
       UrlBuilder.getQuery({ skip: 20, top: 10, orderBy: "index+desc" })
-    ).toEqual("?$skip=20&$top=10&$orderBy=index+desc");
+    ).toEqual("?$skip=20&$top=10&$orderBy=index%20desc");
   });
 
   it("should return query with given params (one with falsy value)", () => {
-    expect(UrlBuilder.getQuery({ skip: 0, top: 10 })).toEqual("?$top=10");
+    expect(UrlBuilder.getQuery({ skip: 0, top: 10 })).toEqual(
+      "?$skip=0&$top=10"
+    );
     expect(UrlBuilder.getQuery({ skip: undefined, top: 10 })).toEqual(
       "?$top=10"
     );
@@ -45,7 +47,7 @@ describe("UrlBuilder", () => {
 
   it("should return empty string when query params are empty", () => {
     expect(UrlBuilder.getQuery({})).toEqual("");
-    expect(UrlBuilder.getQuery({ skip: 0, top: 0 })).toEqual("");
+    expect(UrlBuilder.getQuery({ skip: 0, top: 0 })).toEqual("?$skip=0&$top=0");
     expect(UrlBuilder.getQuery({ skip: undefined, top: undefined })).toEqual(
       ""
     );

packages/modules/manage-versions/src/clients/urlBuilder.ts

@@ -8,12 +8,31 @@ export class UrlBuilder {
     top?: number;
     orderBy?: string;
     lastIndex?: number;
+    afterIndex?: number;
+    $search?: string;
+    name?: string;
   }) => {
     const query = Object.entries(params)
-      .filter(([key, value]) => !!value)
-      .map(([key, value]) =>
-        key === "lastIndex" ? `${key}=${value}` : `$${key}=${value}`
+      .filter(
+        ([key, value]) => value !== undefined && value !== null && value !== ""
       )
+      .map(([key, value]) => {
+        if (key === "lastIndex" || key === "afterIndex") {
+          return `${key}=${value}`;
+        } else if (key === "orderBy") {
+          // Replace + with space before encoding
+          const orderByValue = (value as string).replace(/\+/g, " ");
+          return `$orderBy=${encodeURIComponent(orderByValue)}`;
+        } else if (key === "skip") {
+          return `$skip=${value}`;
+        } else if (key === "top") {
+          return `$top=${value}`;
+        } else if (key === "name") {
+          return `name=${encodeURIComponent(value as string)}`;
+        } else {
+          return `${key}=${value}`;
+        }
+      })
       .join("&");
     return query ? `?${query}` : "";
   };

packages/modules/manage-versions/src/components/ManageVersions/ChangesTab/ChangesTab.test.tsx

@@ -31,6 +31,7 @@ const renderComponent = (initialProps?: Partial<ChangesTabProps>) => {
     loadMoreChanges: jest.fn(),
     latestVersion: undefined,
     onVersionCreated: jest.fn(),
+    onFilterChange: jest.fn(),
     ...initialProps,
   };
   return render(

packages/modules/manage-versions/src/components/ManageVersions/ChangesTab/ChangesTab.tsx

@@ -8,7 +8,7 @@ import {
   SvgInfoCircular,
   SvgNamedVersionAdd,
 } from "@itwin/itwinui-icons-react";
-import { IconButton, Table, Text } from "@itwin/itwinui-react";
+import { IconButton, Table, tableFilters, Text } from "@itwin/itwinui-react";
 import { CellProps } from "@itwin/itwinui-react/react-table";
 import React from "react";
 
@@ -28,6 +28,7 @@ export type ChangesTabProps = {
   loadMoreChanges: () => void;
   onVersionCreated: () => void;
   latestVersion: NamedVersion | undefined;
+  onFilterChange: (filters: { id: string; value: any }[]) => void;
 };
 
 const ChangesTab = (props: ChangesTabProps) => {
@@ -37,6 +38,7 @@ const ChangesTab = (props: ChangesTabProps) => {
     loadMoreChanges,
     onVersionCreated,
     latestVersion,
+    onFilterChange,
   } = props;
 
   const { stringsOverrides } = useConfig();
@@ -65,10 +67,12 @@ const ChangesTab = (props: ChangesTabProps) => {
         Header: "Name",
         columns: [
           {
-            id: "INDEX",
+            id: "index",
             Header: "#",
             accessor: "index",
             width: 90,
+            Filter: tableFilters.NumberRangeFilter(),
+            filter: "between",
           },
           {
             id: "DESCRIPTION",
@@ -177,6 +181,8 @@ const ChangesTab = (props: ChangesTabProps) => {
       <Table<Changeset>
         columns={columns}
         data={changesets}
+        manualFilters={true}
+        onFilter={onFilterChange}
         bodyProps={{
           className: "iac-changes-table-body",
         }}
@@ -185,6 +191,7 @@ const ChangesTab = (props: ChangesTabProps) => {
           status === RequestStatus.NotStarted
         }
         emptyTableContent={emptyTableContent}
+        emptyFilteredTableContent={stringsOverrides.messageNoFilterResults}
         onBottomReached={loadMoreChanges}
         className="iac-changes-table"
       />

packages/modules/manage-versions/src/components/ManageVersions/ManageVersions.test.tsx

@@ -138,6 +138,7 @@ describe("ManageVersions", () => {
     expect(mockGetChangesets).toHaveBeenCalledWith(MOCKED_IMODEL_ID, {
       top: 100,
       skip: 0,
+      orderBy: "index+desc",
     });
   });