Enable quantity formatting in editable property grid

Author: grigasp

apps/test-viewer/package.json

@@ -35,7 +35,7 @@
     "@itwin/measure-tools-react": "workspace:*",
     "@itwin/one-click-lca-react": "workspace:*",
     "@itwin/presentation-common": "^5.1.1",
-    "@itwin/presentation-components": "^5.12.5",
+    "@itwin/presentation-components": "^5.12.6",
     "@itwin/presentation-frontend": "^5.1.1",
     "@itwin/presentation-hierarchies": "^1.7.1",
     "@itwin/presentation-hierarchies-react": "^1.9.1",

apps/test-viewer/pnpm-lock.yaml

@@ -216,6 +216,7 @@ const configuredUiItems = new Map<string, UiItem>([
           getWidgets: () => {
             return [
               createPropertyGrid({
+                editorSystem: "legacy",
                 autoExpandChildCategories: true,
                 ancestorsNavigationControls: (props) => <AncestorsNavigationControls {...props} />,
                 contextMenuItems: [
@@ -231,6 +232,11 @@ const configuredUiItems = new Map<string, UiItem>([
                   console.log(`PropertyGrid [${feature}] used`);
                 },
                 selectionStorage: unifiedSelectionStorage,
+                isPropertyEditingEnabled: true,
+                onPropertyUpdated: async ({ newValue }) => {
+                  console.log(`Updated new value`, newValue);
+                  return true;
+                },
               }),
             ];
           },

apps/test-viewer/src/UiProvidersConfig.tsx

@@ -6,7 +6,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { IModelApp, IModelConnection } from "@itwin/core-frontend";
-import { SchemaFormatsProvider, SchemaKey, SchemaMatchType, SchemaUnitProvider } from "@itwin/ecschema-metadata";
+import { SchemaFormatsProvider, SchemaUnitProvider } from "@itwin/ecschema-metadata";
 import { ECSchemaRpcInterface } from "@itwin/ecschema-rpcinterface-common";
 import { FrontendDevTools } from "@itwin/frontend-devtools";
 import { ArcGisAccessClient } from "@itwin/map-layers-auth";
@@ -90,14 +90,12 @@ function ViewerWithOptions() {
 }
 
 function onIModelConnected(imodel: IModelConnection) {
-  // need this temporarily for e2e tests, until a fix for https://github.com/iTwin/itwinjs-core/issues/7496 is consumed
-  setTimeout(() => {
-    IModelConnection.onOpen.raiseEvent(imodel);
-  }, 1000);
   const setupFormatsProvider = async () => {
     try {
-      const schema = await imodel.schemaContext.getSchema(new SchemaKey("AecUnits", SchemaMatchType.Latest));
-      if (!schema) throw new Error("AecUnits schema not found in iModel");
+      // const schema = await imodel.schemaContext.getSchema(new SchemaKey("AecUnits", SchemaMatchType.Latest));
+      // if (!schema) {
+      //   throw new Error("AecUnits schema not found in iModel");
+      // }
 
       const schemaFormatsProvider = new SchemaFormatsProvider(imodel.schemaContext, IModelApp.quantityFormatter.activeUnitSystem);
       const removeListener = IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.addListener((args) => {

apps/test-viewer/src/components/Viewer.tsx

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix quantity formatting not working in editable property grid.",
+  "packageName": "@itwin/property-grid-react",
+  "email": "35135765+grigasp@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@itwin-property-grid-react-7cd73d0d-b754-4b16-a685-6be3abb609ef.json

@@ -99,7 +99,7 @@
     "@itwin/imodel-components-react": "^5.13.0",
     "@itwin/oidc-signin-tool": "^5.0.1",
     "@itwin/presentation-common": "^5.1.1",
-    "@itwin/presentation-components": "^5.12.5",
+    "@itwin/presentation-components": "^5.12.6",
     "@itwin/presentation-frontend": "^5.1.1",
     "@itwin/webgl-compatibility": "^5.1.1",
     "@playwright/test": "^1.48.2",

packages/itwin/property-grid/package.json

@@ -4,13 +4,15 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { useActiveIModelConnection } from "@itwin/appui-react";
+import { SchemaMetadataContextProvider } from "@itwin/presentation-components";
 import { MultiElementPropertyGrid } from "./components/MultiElementPropertyGrid.js";
 import { TelemetryContextProvider } from "./hooks/UseTelemetryContext.js";
 import { PreferencesContextProvider } from "./PropertyGridPreferencesContext.js";
 
 import type { TelemetryContextProviderProps } from "./hooks/UseTelemetryContext.js";
 import type { MultiElementPropertyGridProps } from "./components/MultiElementPropertyGrid.js";
 import type { PreferencesStorage } from "./api/PreferencesStorage.js";
+import type { IModelConnection } from "@itwin/core-frontend";
 
 /**
  * Props for `PropertyGridComponent`.
@@ -35,10 +37,16 @@ export function PropertyGridComponent({ preferencesStorage, onPerformanceMeasure
   }
 
   return (
-    <TelemetryContextProvider onPerformanceMeasured={onPerformanceMeasured} onFeatureUsed={onFeatureUsed}>
-      <PreferencesContextProvider storage={preferencesStorage}>
-        <MultiElementPropertyGrid {...props} imodel={imodel} />
-      </PreferencesContextProvider>
-    </TelemetryContextProvider>
+    <SchemaMetadataContextProvider imodel={imodel} schemaContextProvider={getSchemaContext}>
+      <TelemetryContextProvider onPerformanceMeasured={onPerformanceMeasured} onFeatureUsed={onFeatureUsed}>
+        <PreferencesContextProvider storage={preferencesStorage}>
+          <MultiElementPropertyGrid {...props} imodel={imodel} />
+        </PreferencesContextProvider>
+      </TelemetryContextProvider>
+    </SchemaMetadataContextProvider>
   );
 }
+
+function getSchemaContext(imodel: IModelConnection) {
+  return imodel.schemaContext;
+}