@itwin/grouping-mapping-widget 0.23.1 → 0.25.0

package/lib/cjs/components/Properties/CustomCalculations/CustomCalculationAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomCalculationAction.js","sourceRoot":"","sources":["../../../../../src/components/Properties/CustomCalculations/CustomCalculationAction.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport {\n  Alert,\n  Fieldset,\n  LabeledInput,\n  LabeledSelect,\n  LabeledTextarea,\n  Text,\n} from \"@itwin/itwinui-react\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport ActionPanel from \"../../SharedComponents/ActionPanel\";\nimport useValidator, { NAME_REQUIREMENTS } from \"../hooks/useValidator\";\nimport { handleError } from \"../../../common/utils\";\nimport \"./CustomCalculationAction.scss\";\nimport { quantityTypesSelectionOptions } from \"../GroupProperties/GroupPropertyAction\";\nimport { useFormulaValidation } from \"../hooks/useFormulaValidation\";\nimport type { PossibleDataType, PropertyMap } from \"../../../formula/Types\";\nimport { useMappingClient } from \"../../context/MappingClientContext\";\nimport { useGroupingMappingApiConfig } from \"../../context/GroupingApiConfigContext\";\nimport type { CalculatedProperty, CustomCalculation, GroupProperty } from \"@itwin/insights-client\";\nimport { QuantityType } from \"@itwin/insights-client\";\nimport { usePropertiesContext } from \"../../context/PropertiesContext\";\n\nexport interface CustomCalculationActionProps {\n  mappingId: string;\n  groupId: string;\n  customCalculation?: CustomCalculation;\n  onSaveSuccess: () => void;\n  onClickCancel?: () => void;\n}\n\nconst stringToPossibleDataType = (str?: string): PossibleDataType => {\n  switch (str?.toLowerCase()) {\n    case \"double\":\n    case \"number\": return \"Number\";\n    case \"string\": return \"String\";\n    case \"boolean\": return \"Boolean\";\n    default: return \"Undefined\";\n  }\n};\n\nconst convertToPropertyMap = (\n  groupProperties: GroupProperty[],\n  calculatedProperties: CalculatedProperty[],\n  customCalculations: CustomCalculation[],\n  selectedPropertyName?: string\n): PropertyMap => {\n  const map: PropertyMap = {};\n  const selectedLowerName = selectedPropertyName?.toLowerCase();\n\n  groupProperties.forEach((p) => {\n    const lowerName = p.propertyName?.toLowerCase();\n    if (lowerName && lowerName !== selectedLowerName)\n      map[lowerName] = stringToPossibleDataType(p.dataType);\n  });\n\n  calculatedProperties.forEach((p) => {\n    const lowerName = p.propertyName?.toLowerCase();\n    if (lowerName)\n      map[lowerName] = \"Number\";\n  });\n\n  customCalculations.forEach((p) => {\n    const lowerName = p.propertyName?.toLowerCase();\n    if (lowerName && lowerName !== selectedLowerName)\n      map[lowerName] = stringToPossibleDataType(p.dataType);\n  });\n\n  return map;\n};\n\nexport const CustomCalculationAction = ({\n  mappingId,\n  groupId,\n  customCalculation,\n  onSaveSuccess,\n  onClickCancel,\n}: CustomCalculationActionProps) => {\n  const { getAccessToken, iModelId } = useGroupingMappingApiConfig();\n  const mappingClient = useMappingClient();\n  const [propertyName, setPropertyName] = useState<string>(\n    customCalculation?.propertyName ?? \"\",\n  );\n  const [formula, setFormula] = useState<string>(\n    customCalculation?.formula ?? \"\",\n  );\n  const {\n    groupProperties,\n    setGroupProperties,\n    calculatedProperties,\n    setCalculatedProperties,\n    customCalculationProperties,\n    setCustomCalculationProperties,\n  } = usePropertiesContext();\n  const [quantityType, setQuantityType] = useState<QuantityType>(customCalculation?.quantityType ?? QuantityType.Undefined);\n  const [isLoading, setIsLoading] = useState<boolean>(true);\n  const [formulaErrorMessage, setFormulaErrorMessage] = useState<string>(\"\");\n  const [validator, showValidationMessage] = useValidator();\n  const [properties, setProperties] = useState<PropertyMap>({});\n  const { isValid, forceValidation } = useFormulaValidation(propertyName.toLowerCase(), formula, properties, setFormulaErrorMessage);\n\n  const initialize = useCallback(async () => {\n    const accessToken = await getAccessToken();\n    const [groupProps, calcProps, customCalcProps] = await Promise.all([\n      mappingClient.getGroupProperties(accessToken, iModelId, mappingId, groupId),\n      mappingClient.getCalculatedProperties(accessToken, iModelId, mappingId, groupId),\n      mappingClient.getCustomCalculations(accessToken, iModelId, mappingId, groupId),\n    ]);\n    setGroupProperties(groupProps);\n    setCalculatedProperties(calcProps);\n    setCustomCalculationProperties(customCalcProps);\n  }, [getAccessToken, groupId, iModelId, mappingClient, mappingId, setCalculatedProperties, setCustomCalculationProperties, setGroupProperties]);\n\n  const fetchAllProperties = useCallback(async () => {\n    setIsLoading(true);\n    try {\n      if (!groupProperties || !calculatedProperties || !customCalculationProperties) {\n        await initialize();\n      }\n    } catch (error: any) {\n      handleError(error.status);\n    } finally {\n      setIsLoading(false);\n    }\n  }, [calculatedProperties, customCalculationProperties, groupProperties, initialize]);\n\n  useEffect(() => {\n    const propertiesMap = convertToPropertyMap(groupProperties ?? [], calculatedProperties ?? [], customCalculationProperties ?? []);\n    setProperties(propertiesMap);\n  }, [calculatedProperties, customCalculationProperties, groupProperties]);\n\n  useEffect(() => {\n    void fetchAllProperties();\n  }, [fetchAllProperties]);\n\n  const onSave = async () => {\n    if (!validator.allValid()) {\n      showValidationMessage(true);\n      return;\n    }\n    if (!forceValidation()) {\n      return;\n    }\n    try {\n      setIsLoading(true);\n      const accessToken = await getAccessToken();\n      customCalculation\n        ? await mappingClient.updateCustomCalculation(\n          accessToken,\n          iModelId,\n          mappingId,\n          groupId,\n          customCalculation.id,\n          {\n            propertyName,\n            formula,\n            quantityType,\n          }\n        )\n        : await mappingClient.createCustomCalculation(\n          accessToken,\n          iModelId,\n          mappingId,\n          groupId,\n          {\n            propertyName,\n            formula,\n            quantityType,\n          }\n        );\n      onSaveSuccess();\n      setPropertyName(\"\");\n      setFormula(\"\");\n      setQuantityType(QuantityType.Undefined);\n    } catch (error: any) {\n      // error instanceof Response refuses to be true when it should be.\n      if (error.status === 422) {\n        error = error as Response;\n        const erroredResponse = await error.json();\n        if (\n          erroredResponse.error.code === \"InvalidInsightsRequest\" &&\n          erroredResponse.error.target === \"formula\"\n        ) {\n          setFormulaErrorMessage(erroredResponse.error.message);\n        }\n      } else {\n        handleError(error.status);\n      }\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n    <>\n      <div className='gmw-custom-calculation-action-container'>\n        <Fieldset legend='Custom Calculation Details' className='gmw-details-form'>\n          <Text variant='small' as='small' className='gmw-field-legend'>\n            Asterisk * indicates mandatory fields.\n          </Text>\n          <LabeledInput\n            value={propertyName}\n            required\n            name='name'\n            label='Name'\n            disabled={isLoading}\n            onChange={(event) => {\n              setPropertyName(event.target.value);\n              validator.showMessageFor(\"name\");\n            }}\n            message={validator.message(\"name\", propertyName, NAME_REQUIREMENTS)}\n            status={\n              validator.message(\"name\", propertyName, NAME_REQUIREMENTS)\n                ? \"negative\"\n                : undefined\n            }\n            onBlur={() => {\n              validator.showMessageFor(\"name\");\n            }}\n            onBlurCapture={(event) => {\n              setPropertyName(event.target.value);\n              validator.showMessageFor(\"name\");\n            }}\n          />\n          <Alert\n            type='informational'\n            clickableText='Click here.'\n            clickableTextProps={{ href: \"https://developer.bentley.com/apis/insights/operations/create-customcalculation/\", target: \"_blank\", rel: \"noreferrer\" }}\n          >\n            To learn more about creating custom calculation formulas, view the documentation.\n          </Alert>\n          <LabeledTextarea\n            value={formula}\n            required\n            name='formula'\n            label='Formula'\n            disabled={isLoading}\n            onChange={(event) => {\n              setFormula(event.target.value);\n            }}\n            message={formulaErrorMessage}\n            status={formulaErrorMessage ? \"negative\" : undefined}\n            onBlurCapture={() => {\n              forceValidation();\n            }}\n          />\n          <LabeledSelect<QuantityType>\n            label='Quantity Type'\n            disabled={isLoading}\n            options={quantityTypesSelectionOptions}\n            value={quantityType}\n            onChange={setQuantityType}\n            onShow={() => { }}\n            onHide={() => { }}\n          />\n        </Fieldset>\n      </div>\n      <ActionPanel\n        onSave={onSave}\n        onCancel={onClickCancel}\n        isSavingDisabled={!(formula && propertyName && isValid)}\n        isLoading={isLoading}\n      />\n    </>\n  );\n};\n"]}
+{"version":3,"file":"CustomCalculationAction.js","sourceRoot":"","sources":["../../../../../src/components/Properties/CustomCalculations/CustomCalculationAction.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,wDAO8B;AAC9B,+CAAmD;AACnD,qFAA6D;AAC7D,sEAAwE;AACxE,iDAAoD;AACpD,0CAAwC;AACxC,gFAAuF;AACvF,wEAAqE;AAErE,6EAAsE;AACtE,qFAAqF;AAErF,4DAAsD;AACtD,wFAAqF;AACrF,oFAAiF;AACjF,8EAA2E;AAC3E,uDAAoE;AAUpE,MAAM,wBAAwB,GAAG,CAAC,GAAY,EAAoB,EAAE;IAClE,QAAQ,GAAG,EAAE,WAAW,EAAE,EAAE;QAC1B,KAAK,QAAQ,CAAC;QACd,KAAK,QAAQ,CAAC,CAAC,OAAO,QAAQ,CAAC;QAC/B,KAAK,QAAQ,CAAC,CAAC,OAAO,QAAQ,CAAC;QAC/B,KAAK,SAAS,CAAC,CAAC,OAAO,SAAS,CAAC;QACjC,OAAO,CAAC,CAAC,OAAO,WAAW,CAAC;KAC7B;AACH,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAC3B,eAAgC,EAChC,oBAA0C,EAC1C,kBAAuC,EACvC,oBAA6B,EAChB,EAAE;IACf,MAAM,GAAG,GAAgB,EAAE,CAAC;IAC5B,MAAM,iBAAiB,GAAG,oBAAoB,EAAE,WAAW,EAAE,CAAC;IAE9D,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;QAC5B,MAAM,SAAS,GAAG,CAAC,CAAC,YAAY,EAAE,WAAW,EAAE,CAAC;QAChD,IAAI,SAAS,IAAI,SAAS,KAAK,iBAAiB;YAC9C,GAAG,CAAC,SAAS,CAAC,GAAG,wBAAwB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;QACjC,MAAM,SAAS,GAAG,CAAC,CAAC,YAAY,EAAE,WAAW,EAAE,CAAC;QAChD,IAAI,SAAS;YACX,GAAG,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;QAC/B,MAAM,SAAS,GAAG,CAAC,CAAC,YAAY,EAAE,WAAW,EAAE,CAAC;QAChD,IAAI,SAAS,IAAI,SAAS,KAAK,iBAAiB;YAC9C,GAAG,CAAC,SAAS,CAAC,GAAG,wBAAwB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEK,MAAM,uBAAuB,GAAG,CAAC,EACtC,SAAS,EACT,OAAO,EACP,iBAAiB,EACjB,aAAa,EACb,aAAa,GACgB,EAAE,EAAE;IACjC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,IAAA,sDAA2B,GAAE,CAAC;IACnE,MAAM,aAAa,GAAG,IAAA,uCAAgB,GAAE,CAAC;IACzC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAC9C,iBAAiB,EAAE,YAAY,IAAI,EAAE,CACtC,CAAC;IACF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EACpC,iBAAiB,EAAE,OAAO,IAAI,EAAE,CACjC,CAAC;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAe,iBAAiB,EAAE,YAAY,IAAI,8BAAY,CAAC,SAAS,CAAC,CAAC;IAC1H,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IAC3E,MAAM,CAAC,SAAS,EAAE,qBAAqB,CAAC,GAAG,IAAA,sBAAY,GAAE,CAAC;IAC1D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAc,EAAE,CAAC,CAAC;IAC9D,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,GAAG,IAAA,2CAAoB,EAAC,YAAY,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,sBAAsB,CAAC,CAAC;IACnI,MAAM,WAAW,GAAG,IAAA,4BAAc,GAAE,CAAC;IAErC,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,wBAAwB,EAAE,GAAG,IAAA,iDAAuB,EAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAE,aAAa,CAAC,CAAC;IAC7J,MAAM,EAAE,IAAI,EAAE,oBAAoB,EAAE,UAAU,EAAE,6BAA6B,EAAE,GAAG,IAAA,2DAA4B,EAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAE,aAAa,CAAC,CAAC;IAC5K,MAAM,EAAE,IAAI,EAAE,2BAA2B,EAAE,UAAU,EAAE,2BAA2B,EAAE,GAAG,IAAA,uDAA0B,EAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAE,aAAa,CAAC,CAAC;IAE/K,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,aAAa,GAAG,oBAAoB,CAAC,eAAe,IAAI,EAAE,EAAE,oBAAoB,IAAI,EAAE,EAAE,2BAA2B,IAAI,EAAE,CAAC,CAAC;QACjI,aAAa,CAAC,aAAa,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,oBAAoB,EAAE,2BAA2B,EAAE,eAAe,CAAC,CAAC,CAAC;IAEzE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAA,yBAAW,EAAC,KAAK,IAAI,EAAE;QAE3E,MAAM,WAAW,GAAG,MAAM,cAAc,EAAE,CAAC;QAE3C,OAAO,iBAAiB;YACtB,CAAC,CAAC,aAAa,CAAC,uBAAuB,CACrC,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,iBAAiB,CAAC,EAAE,EACpB,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,CACxC;YACD,CAAC,CAAC,aAAa,CAAC,uBAAuB,CACrC,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,CACxC,CAAC;IACN,CAAC,EAAE;QACD,SAAS,EAAE,KAAK,IAAI,EAAE;YACpB,MAAM,WAAW,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC,oBAAoB,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;YACxG,aAAa,EAAE,CAAC;YAChB,eAAe,CAAC,EAAE,CAAC,CAAC;YACpB,UAAU,CAAC,EAAE,CAAC,CAAC;YACf,eAAe,CAAC,8BAAY,CAAC,SAAS,CAAC,CAAC;QAC1C,CAAC;QACD,OAAO,EAAE,KAAK,EAAE,KAAU,EAAE,EAAE;YAC5B,IAAI,KAAK,CAAC,MAAM,KAAK,GAAG,EAAE;gBACxB,MAAM,eAAe,GAAG,MAAM,KAAK,CAAC,IAAI,EAAE,CAAC;gBAC3C,IACE,eAAe,CAAC,KAAK,CAAC,IAAI,KAAK,wBAAwB;oBACvD,eAAe,CAAC,KAAK,CAAC,MAAM,KAAK,SAAS,EAC1C;oBACA,sBAAsB,CAAC,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;iBACvD;aACF;iBAAM;gBACL,IAAA,mBAAW,EAAC,KAAK,CAAC,MAAM,CAAC,CAAC;aAC3B;QACH,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,GAAG,EAAE;QAClB,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE;YACzB,qBAAqB,CAAC,IAAI,CAAC,CAAC;YAC5B,OAAO;SACR;QACD,IAAI,CAAC,eAAe,EAAE,EAAE;YACtB,OAAO;SACR;QACD,YAAY,EAAE,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,QAAQ,IAAI,wBAAwB,IAAI,6BAA6B,IAAI,2BAA2B,CAAC;IAEvH,OAAO,CACL;QACE,uCAAK,SAAS,EAAC,yCAAyC;YACtD,8BAAC,wBAAQ,IAAC,MAAM,EAAC,4BAA4B,EAAC,SAAS,EAAC,kBAAkB;gBACxE,8BAAC,oBAAI,IAAC,OAAO,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB,6CAEtD;gBACP,8BAAC,4BAAY,IACX,KAAK,EAAE,YAAY,EACnB,QAAQ,QACR,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;wBAClB,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBACpC,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;oBACnC,CAAC,EACD,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,YAAY,EAAE,gCAAiB,CAAC,EACnE,MAAM,EACJ,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,YAAY,EAAE,gCAAiB,CAAC;wBACxD,CAAC,CAAC,UAAU;wBACZ,CAAC,CAAC,SAAS,EAEf,MAAM,EAAE,GAAG,EAAE;wBACX,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;oBACnC,CAAC,EACD,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;wBACvB,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBACpC,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;oBACnC,CAAC,GACD;gBACF,8BAAC,qBAAK,IACJ,IAAI,EAAC,eAAe,EACpB,aAAa,EAAC,aAAa,EAC3B,kBAAkB,EAAE,EAAE,IAAI,EAAE,kFAAkF,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,YAAY,EAAE,wFAG/I;gBACR,8BAAC,+BAAe,IACd,KAAK,EAAE,OAAO,EACd,QAAQ,QACR,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,SAAS,EACf,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;wBAClB,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oBACjC,CAAC,EACD,OAAO,EAAE,mBAAmB,EAC5B,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACpD,aAAa,EAAE,GAAG,EAAE;wBAClB,eAAe,EAAE,CAAC;oBACpB,CAAC,GACD;gBACF,8BAAC,6BAAa,IACZ,KAAK,EAAC,eAAe,EACrB,QAAQ,EAAE,SAAS,EACnB,OAAO,EAAE,mDAA6B,EACtC,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,eAAe,EACzB,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,EACjB,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,GACjB,CACO,CACP;QACN,8BAAC,qBAAW,IACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,aAAa,EACvB,gBAAgB,EAAE,CAAC,CAAC,OAAO,IAAI,YAAY,IAAI,OAAO,CAAC,EACvD,SAAS,EAAE,SAAS,GACpB,CACD,CACJ,CAAC;AACJ,CAAC,CAAC;AA/JW,QAAA,uBAAuB,2BA+JlC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport {\n  Alert,\n  Fieldset,\n  LabeledInput,\n  LabeledSelect,\n  LabeledTextarea,\n  Text,\n} from \"@itwin/itwinui-react\";\nimport React, { useEffect, useState } from \"react\";\nimport ActionPanel from \"../../SharedComponents/ActionPanel\";\nimport useValidator, { NAME_REQUIREMENTS } from \"../hooks/useValidator\";\nimport { handleError } from \"../../../common/utils\";\nimport \"./CustomCalculationAction.scss\";\nimport { quantityTypesSelectionOptions } from \"../GroupProperties/GroupPropertyAction\";\nimport { useFormulaValidation } from \"../hooks/useFormulaValidation\";\nimport type { PossibleDataType, PropertyMap } from \"../../../formula/Types\";\nimport { useMappingClient } from \"../../context/MappingClientContext\";\nimport { useGroupingMappingApiConfig } from \"../../context/GroupingApiConfigContext\";\nimport type { CalculatedProperty, CustomCalculation, GroupProperty } from \"@itwin/insights-client\";\nimport { QuantityType } from \"@itwin/insights-client\";\nimport { useCalculatedPropertiesQuery } from \"../hooks/useCalculatedPropertiesQuery\";\nimport { useCustomCalculationsQuery } from \"../hooks/useCustomCalculationsQuery\";\nimport { useGroupPropertiesQuery } from \"../hooks/useGroupPropertiesQuery\";\nimport { useMutation, useQueryClient } from \"@tanstack/react-query\";\n\nexport interface CustomCalculationActionProps {\n  mappingId: string;\n  groupId: string;\n  customCalculation?: CustomCalculation;\n  onSaveSuccess: () => void;\n  onClickCancel?: () => void;\n}\n\nconst stringToPossibleDataType = (str?: string): PossibleDataType => {\n  switch (str?.toLowerCase()) {\n    case \"double\":\n    case \"number\": return \"Number\";\n    case \"string\": return \"String\";\n    case \"boolean\": return \"Boolean\";\n    default: return \"Undefined\";\n  }\n};\n\nconst convertToPropertyMap = (\n  groupProperties: GroupProperty[],\n  calculatedProperties: CalculatedProperty[],\n  customCalculations: CustomCalculation[],\n  selectedPropertyName?: string\n): PropertyMap => {\n  const map: PropertyMap = {};\n  const selectedLowerName = selectedPropertyName?.toLowerCase();\n\n  groupProperties.forEach((p) => {\n    const lowerName = p.propertyName?.toLowerCase();\n    if (lowerName && lowerName !== selectedLowerName)\n      map[lowerName] = stringToPossibleDataType(p.dataType);\n  });\n\n  calculatedProperties.forEach((p) => {\n    const lowerName = p.propertyName?.toLowerCase();\n    if (lowerName)\n      map[lowerName] = \"Number\";\n  });\n\n  customCalculations.forEach((p) => {\n    const lowerName = p.propertyName?.toLowerCase();\n    if (lowerName && lowerName !== selectedLowerName)\n      map[lowerName] = stringToPossibleDataType(p.dataType);\n  });\n\n  return map;\n};\n\nexport const CustomCalculationAction = ({\n  mappingId,\n  groupId,\n  customCalculation,\n  onSaveSuccess,\n  onClickCancel,\n}: CustomCalculationActionProps) => {\n  const { getAccessToken, iModelId } = useGroupingMappingApiConfig();\n  const mappingClient = useMappingClient();\n  const [propertyName, setPropertyName] = useState<string>(\n    customCalculation?.propertyName ?? \"\",\n  );\n  const [formula, setFormula] = useState<string>(\n    customCalculation?.formula ?? \"\",\n  );\n  const [quantityType, setQuantityType] = useState<QuantityType>(customCalculation?.quantityType ?? QuantityType.Undefined);\n  const [formulaErrorMessage, setFormulaErrorMessage] = useState<string>(\"\");\n  const [validator, showValidationMessage] = useValidator();\n  const [properties, setProperties] = useState<PropertyMap>({});\n  const { isValid, forceValidation } = useFormulaValidation(propertyName.toLowerCase(), formula, properties, setFormulaErrorMessage);\n  const queryClient = useQueryClient();\n\n  const { data: groupProperties, isFetching: isLoadingGroupProperties } = useGroupPropertiesQuery(iModelId, mappingId, groupId, getAccessToken, mappingClient);\n  const { data: calculatedProperties, isFetching: isLoadingCalculatedProperties } = useCalculatedPropertiesQuery(iModelId, mappingId, groupId, getAccessToken, mappingClient);\n  const { data: customCalculationProperties, isFetching: isLoadingCustomCalculations } = useCustomCalculationsQuery(iModelId, mappingId, groupId, getAccessToken, mappingClient);\n\n  useEffect(() => {\n    const propertiesMap = convertToPropertyMap(groupProperties ?? [], calculatedProperties ?? [], customCalculationProperties ?? []);\n    setProperties(propertiesMap);\n  }, [calculatedProperties, customCalculationProperties, groupProperties]);\n\n  const { mutate: saveMutation, isLoading: isSaving } = useMutation(async () => {\n\n    const accessToken = await getAccessToken();\n\n    return customCalculation\n      ? mappingClient.updateCustomCalculation(\n        accessToken,\n        iModelId,\n        mappingId,\n        groupId,\n        customCalculation.id,\n        { propertyName, formula, quantityType }\n      )\n      : mappingClient.createCustomCalculation(\n        accessToken,\n        iModelId,\n        mappingId,\n        groupId,\n        { propertyName, formula, quantityType }\n      );\n  }, {\n    onSuccess: async () => {\n      await queryClient.invalidateQueries({ queryKey: [\"customCalculations\", iModelId, mappingId, groupId] });\n      onSaveSuccess();\n      setPropertyName(\"\");\n      setFormula(\"\");\n      setQuantityType(QuantityType.Undefined);\n    },\n    onError: async (error: any) => {\n      if (error.status === 422) {\n        const erroredResponse = await error.json();\n        if (\n          erroredResponse.error.code === \"InvalidInsightsRequest\" &&\n          erroredResponse.error.target === \"formula\"\n        ) {\n          setFormulaErrorMessage(erroredResponse.error.message);\n        }\n      } else {\n        handleError(error.status);\n      }\n    },\n  });\n\n  const onSave = () => {\n    if (!validator.allValid()) {\n      showValidationMessage(true);\n      return;\n    }\n    if (!forceValidation()) {\n      return;\n    }\n    saveMutation();\n  };\n\n  const isLoading = isSaving || isLoadingGroupProperties || isLoadingCalculatedProperties || isLoadingCustomCalculations;\n\n  return (\n    <>\n      <div className='gmw-custom-calculation-action-container'>\n        <Fieldset legend='Custom Calculation Details' className='gmw-details-form'>\n          <Text variant='small' as='small' className='gmw-field-legend'>\n            Asterisk * indicates mandatory fields.\n          </Text>\n          <LabeledInput\n            value={propertyName}\n            required\n            name='name'\n            label='Name'\n            disabled={isLoading}\n            onChange={(event) => {\n              setPropertyName(event.target.value);\n              validator.showMessageFor(\"name\");\n            }}\n            message={validator.message(\"name\", propertyName, NAME_REQUIREMENTS)}\n            status={\n              validator.message(\"name\", propertyName, NAME_REQUIREMENTS)\n                ? \"negative\"\n                : undefined\n            }\n            onBlur={() => {\n              validator.showMessageFor(\"name\");\n            }}\n            onBlurCapture={(event) => {\n              setPropertyName(event.target.value);\n              validator.showMessageFor(\"name\");\n            }}\n          />\n          <Alert\n            type='informational'\n            clickableText='Click here.'\n            clickableTextProps={{ href: \"https://developer.bentley.com/apis/insights/operations/create-customcalculation/\", target: \"_blank\", rel: \"noreferrer\" }}\n          >\n            To learn more about creating custom calculation formulas, view the documentation.\n          </Alert>\n          <LabeledTextarea\n            value={formula}\n            required\n            name='formula'\n            label='Formula'\n            disabled={isLoading}\n            onChange={(event) => {\n              setFormula(event.target.value);\n            }}\n            message={formulaErrorMessage}\n            status={formulaErrorMessage ? \"negative\" : undefined}\n            onBlurCapture={() => {\n              forceValidation();\n            }}\n          />\n          <LabeledSelect<QuantityType>\n            label='Quantity Type'\n            disabled={isLoading}\n            options={quantityTypesSelectionOptions}\n            value={quantityType}\n            onChange={setQuantityType}\n            onShow={() => { }}\n            onHide={() => { }}\n          />\n        </Fieldset>\n      </div>\n      <ActionPanel\n        onSave={onSave}\n        onCancel={onClickCancel}\n        isSavingDisabled={!(formula && propertyName && isValid)}\n        isLoading={isLoading}\n      />\n    </>\n  );\n};\n"]}

package/lib/cjs/components/Properties/CustomCalculations/CustomCalculationTable.js

@@ -35,53 +35,50 @@ const MappingClientContext_1 = require("../../context/MappingClientContext");
 const PropertyNameCell_1 = require("../PropertyNameCell");
 const PropertyTable_1 = require("../PropertyTable");
 const GroupingApiConfigContext_1 = require("../../context/GroupingApiConfigContext");
+const react_query_1 = require("@tanstack/react-query");
 const CustomCalculationTable = ({ mappingId, groupId, onClickAdd, onClickModify, isLoading, customCalculations, refresh, }) => {
     const mappingClient = (0, MappingClientContext_1.useMappingClient)();
     const { getAccessToken, iModelId } = (0, GroupingApiConfigContext_1.useGroupingMappingApiConfig)();
+    const queryClient = (0, react_query_1.useQueryClient)();
     const columnsFactory = (0, react_1.useCallback)((handleShowDeleteModal) => [
         {
-            Header: "Table",
-            columns: [
-                {
-                    id: "propertyName",
-                    Header: "Custom Calculation",
-                    accessor: "propertyName",
-                    Cell: (value) => (react_1.default.createElement(PropertyNameCell_1.PropertyNameCell, { property: value.row.original, onClickModify: onClickModify })),
-                },
-                {
-                    id: "formula",
-                    Header: "Formula",
-                    accessor: "formula",
-                },
-                {
-                    id: "dropdown",
-                    Header: "",
-                    width: 80,
-                    Cell: (value) => {
-                        return (react_1.default.createElement(itwinui_react_1.DropdownMenu, { menuItems: (close) => [onClickModify ? [
-                                    react_1.default.createElement(itwinui_react_1.MenuItem, { key: 0, onClick: () => {
-                                            onClickModify(value.row.original);
-                                            close();
-                                        }, icon: react_1.default.createElement(itwinui_icons_react_1.SvgEdit, null) }, "Modify")
-                                ] : [], react_1.default.createElement(itwinui_react_1.MenuItem, { key: 1, onClick: () => {
-                                        handleShowDeleteModal(value.row.original);
-                                        close();
-                                    }, icon: react_1.default.createElement(itwinui_icons_react_1.SvgDelete, null) }, "Remove"),
-                            ].flatMap((p) => p) },
-                            react_1.default.createElement(itwinui_react_1.IconButton, { styleType: 'borderless' },
-                                react_1.default.createElement(itwinui_icons_react_1.SvgMore, { style: {
-                                        width: "16px",
-                                        height: "16px",
-                                    } }))));
-                    },
-                },
-            ],
+            id: "propertyName",
+            Header: "Custom Calculation",
+            accessor: "propertyName",
+            Cell: (value) => (react_1.default.createElement(PropertyNameCell_1.PropertyNameCell, { property: value.row.original, onClickModify: onClickModify })),
+        },
+        {
+            id: "formula",
+            Header: "Formula",
+            accessor: "formula",
+        },
+        {
+            id: "dropdown",
+            Header: "",
+            width: 80,
+            Cell: (value) => {
+                return (react_1.default.createElement(itwinui_react_1.DropdownMenu, { menuItems: (close) => [onClickModify ? [
+                            react_1.default.createElement(itwinui_react_1.MenuItem, { key: 0, onClick: () => {
+                                    onClickModify(value.row.original);
+                                    close();
+                                }, icon: react_1.default.createElement(itwinui_icons_react_1.SvgEdit, null) }, "Modify")
+                        ] : [], react_1.default.createElement(itwinui_react_1.MenuItem, { key: 1, onClick: () => {
+                                handleShowDeleteModal(value.row.original);
+                                close();
+                            }, icon: react_1.default.createElement(itwinui_icons_react_1.SvgDelete, null) }, "Remove"),
+                    ].flatMap((p) => p) },
+                    react_1.default.createElement(itwinui_react_1.IconButton, { styleType: 'borderless' },
+                        react_1.default.createElement(itwinui_icons_react_1.SvgMore, null))));
+            },
         },
     ], [onClickModify]);
-    const deleteProperty = (0, react_1.useCallback)(async (propertyId) => {
-        const accessToken = await getAccessToken();
-        await mappingClient.deleteCustomCalculation(accessToken, iModelId, mappingId, groupId, propertyId);
-    }, [getAccessToken, groupId, iModelId, mappingClient, mappingId]);
+    const { mutateAsync: deleteProperty } = (0, react_query_1.useMutation)({
+        mutationFn: async (propertyId) => {
+            const accessToken = await getAccessToken();
+            await mappingClient.deleteCustomCalculation(accessToken, iModelId, mappingId, groupId, propertyId);
+        },
+        onSuccess: async () => queryClient.invalidateQueries({ queryKey: ["customCalculations", iModelId, mappingId, groupId] }),
+    });
     return (react_1.default.createElement(PropertyTable_1.PropertyTable, { propertyType: "Custom Calculation", columnsFactory: columnsFactory, data: customCalculations, isLoading: isLoading, onClickAdd: onClickAdd, refreshProperties: refresh, deleteProperty: deleteProperty }));
 };
 exports.CustomCalculationTable = CustomCalculationTable;

package/lib/cjs/components/Properties/CustomCalculations/CustomCalculationTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomCalculationTable.js","sourceRoot":"","sources":["../../../../../src/components/Properties/CustomCalculations/CustomCalculationTable.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport {\n  SvgDelete,\n  SvgEdit,\n  SvgMore,\n} from \"@itwin/itwinui-icons-react\";\nimport {\n  DropdownMenu,\n  IconButton,\n  MenuItem,\n} from \"@itwin/itwinui-react\";\nimport React, { useCallback } from \"react\";\nimport type { CellProps } from \"react-table\";\nimport type { CustomCalculation } from \"@itwin/insights-client\";\nimport { useMappingClient } from \"../../context/MappingClientContext\";\nimport { PropertyNameCell } from \"../PropertyNameCell\";\nimport { PropertyTable } from \"../PropertyTable\";\nimport { useGroupingMappingApiConfig } from \"../../context/GroupingApiConfigContext\";\n\nexport interface CustomCalculationTableProps {\n  mappingId: string;\n  groupId: string;\n  onClickAdd?: () => void;\n  onClickModify?: (value: CustomCalculation) => void;\n  isLoading: boolean;\n  customCalculations: CustomCalculation[];\n  refresh: () => Promise<void>;\n}\n\nexport const CustomCalculationTable = ({\n  mappingId,\n  groupId,\n  onClickAdd,\n  onClickModify,\n  isLoading,\n  customCalculations,\n  refresh,\n}: CustomCalculationTableProps) => {\n  const mappingClient = useMappingClient();\n  const { getAccessToken, iModelId } = useGroupingMappingApiConfig();\n\n  const columnsFactory = useCallback(\n    (handleShowDeleteModal: (value: CustomCalculation) => void) => [\n      {\n        Header: \"Table\",\n        columns: [\n          {\n            id: \"propertyName\",\n            Header: \"Custom Calculation\",\n            accessor: \"propertyName\",\n            Cell: (value: CellProps<CustomCalculation>) => (\n              <PropertyNameCell\n                property={value.row.original}\n                onClickModify={onClickModify}\n              />\n            ),\n          },\n          {\n            id: \"formula\",\n            Header: \"Formula\",\n            accessor: \"formula\",\n          },\n          {\n            id: \"dropdown\",\n            Header: \"\",\n            width: 80,\n            Cell: (value: CellProps<CustomCalculation>) => {\n              return (\n                <DropdownMenu\n                  menuItems={(close: () => void) => [onClickModify ? [\n                    <MenuItem\n                      key={0}\n                      onClick={() => {\n                        onClickModify(value.row.original);\n                        close();\n                      }}\n                      icon={<SvgEdit />}\n                    >\n                      Modify\n                    </MenuItem>] : [],\n                  <MenuItem\n                    key={1}\n                    onClick={() => {\n                      handleShowDeleteModal(value.row.original);\n                      close();\n                    }}\n                    icon={<SvgDelete />}\n                  >\n                    Remove\n                  </MenuItem>,\n                  ].flatMap((p) => p)}\n                >\n                  <IconButton styleType='borderless'>\n                    <SvgMore\n                      style={{\n                        width: \"16px\",\n                        height: \"16px\",\n                      }}\n                    />\n                  </IconButton>\n                </DropdownMenu>\n              );\n            },\n          },\n        ],\n      },\n    ],\n    [onClickModify],\n  );\n\n  const deleteProperty = useCallback(async (propertyId: string) => {\n    const accessToken = await getAccessToken();\n    await mappingClient.deleteCustomCalculation(\n      accessToken,\n      iModelId,\n      mappingId,\n      groupId,\n      propertyId,\n    );\n  }, [getAccessToken, groupId, iModelId, mappingClient, mappingId]);\n\n  return (\n    <PropertyTable\n      propertyType=\"Custom Calculation\"\n      columnsFactory={columnsFactory}\n      data={customCalculations}\n      isLoading={isLoading}\n      onClickAdd={onClickAdd}\n      refreshProperties={refresh}\n      deleteProperty={deleteProperty}\n    />\n  );\n};\n\n"]}
+{"version":3,"file":"CustomCalculationTable.js","sourceRoot":"","sources":["../../../../../src/components/Properties/CustomCalculations/CustomCalculationTable.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,oEAIoC;AACpC,wDAI8B;AAC9B,+CAA2C;AAG3C,6EAAsE;AACtE,0DAAuD;AACvD,oDAAiD;AACjD,qFAAqF;AACrF,uDAAoE;AAY7D,MAAM,sBAAsB,GAAG,CAAC,EACrC,SAAS,EACT,OAAO,EACP,UAAU,EACV,aAAa,EACb,SAAS,EACT,kBAAkB,EAClB,OAAO,GACqB,EAAE,EAAE;IAChC,MAAM,aAAa,GAAG,IAAA,uCAAgB,GAAE,CAAC;IACzC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,IAAA,sDAA2B,GAAE,CAAC;IACnE,MAAM,WAAW,GAAG,IAAA,4BAAc,GAAE,CAAC;IAErC,MAAM,cAAc,GAAG,IAAA,mBAAW,EAChC,CAAC,qBAAyD,EAA+B,EAAE,CAAC;QAC1F;YACE,EAAE,EAAE,cAAc;YAClB,MAAM,EAAE,oBAAoB;YAC5B,QAAQ,EAAE,cAAc;YACxB,IAAI,EAAE,CAAC,KAAmC,EAAE,EAAE,CAAC,CAC7C,8BAAC,mCAAgB,IACf,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,EAC5B,aAAa,EAAE,aAAa,GAC5B,CACH;SACF;QACD;YACE,EAAE,EAAE,SAAS;YACb,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,SAAS;SACpB;QACD;YACE,EAAE,EAAE,UAAU;YACd,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE;YACT,IAAI,EAAE,CAAC,KAAmC,EAAE,EAAE;gBAC5C,OAAO,CACL,8BAAC,4BAAY,IACX,SAAS,EAAE,CAAC,KAAiB,EAAE,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC;4BACjD,8BAAC,wBAAQ,IACP,GAAG,EAAE,CAAC,EACN,OAAO,EAAE,GAAG,EAAE;oCACZ,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;oCAClC,KAAK,EAAE,CAAC;gCACV,CAAC,EACD,IAAI,EAAE,8BAAC,6BAAO,OAAG,aAGR;yBAAC,CAAC,CAAC,CAAC,EAAE,EACnB,8BAAC,wBAAQ,IACP,GAAG,EAAE,CAAC,EACN,OAAO,EAAE,GAAG,EAAE;gCACZ,qBAAqB,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;gCAC1C,KAAK,EAAE,CAAC;4BACV,CAAC,EACD,IAAI,EAAE,8BAAC,+BAAS,OAAG,aAGV;qBACV,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;oBAEnB,8BAAC,0BAAU,IAAC,SAAS,EAAC,YAAY;wBAChC,8BAAC,6BAAO,OAAG,CACA,CACA,CAChB,CAAC;YACJ,CAAC;SACF;KACF,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,IAAA,yBAAW,EAAC;QAClD,UAAU,EAAE,KAAK,EAAE,UAAkB,EAAE,EAAE;YACvC,MAAM,WAAW,GAAG,MAAM,cAAc,EAAE,CAAC;YAC3C,MAAM,aAAa,CAAC,uBAAuB,CACzC,WAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,UAAU,CACX,CAAC;QACJ,CAAC;QACD,SAAS,EAAE,KAAK,IAAI,EAAE,CAAC,WAAW,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC,oBAAoB,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,CAAC;KACzH,CAAC,CAAC;IAEH,OAAO,CACL,8BAAC,6BAAa,IACZ,YAAY,EAAC,oBAAoB,EACjC,cAAc,EAAE,cAAc,EAC9B,IAAI,EAAE,kBAAkB,EACxB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,OAAO,EAC1B,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC;AACJ,CAAC,CAAC;AAjGW,QAAA,sBAAsB,0BAiGjC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport {\n  SvgDelete,\n  SvgEdit,\n  SvgMore,\n} from \"@itwin/itwinui-icons-react\";\nimport {\n  DropdownMenu,\n  IconButton,\n  MenuItem,\n} from \"@itwin/itwinui-react\";\nimport React, { useCallback } from \"react\";\nimport type { CellProps, Column } from \"react-table\";\nimport type { CustomCalculation } from \"@itwin/insights-client\";\nimport { useMappingClient } from \"../../context/MappingClientContext\";\nimport { PropertyNameCell } from \"../PropertyNameCell\";\nimport { PropertyTable } from \"../PropertyTable\";\nimport { useGroupingMappingApiConfig } from \"../../context/GroupingApiConfigContext\";\nimport { useMutation, useQueryClient } from \"@tanstack/react-query\";\n\nexport interface CustomCalculationTableProps {\n  mappingId: string;\n  groupId: string;\n  onClickAdd?: () => void;\n  onClickModify?: (value: CustomCalculation) => void;\n  isLoading: boolean;\n  customCalculations: CustomCalculation[];\n  refresh: () => Promise<void>;\n}\n\nexport const CustomCalculationTable = ({\n  mappingId,\n  groupId,\n  onClickAdd,\n  onClickModify,\n  isLoading,\n  customCalculations,\n  refresh,\n}: CustomCalculationTableProps) => {\n  const mappingClient = useMappingClient();\n  const { getAccessToken, iModelId } = useGroupingMappingApiConfig();\n  const queryClient = useQueryClient();\n\n  const columnsFactory = useCallback(\n    (handleShowDeleteModal: (value: CustomCalculation) => void): Column<CustomCalculation>[] => [\n      {\n        id: \"propertyName\",\n        Header: \"Custom Calculation\",\n        accessor: \"propertyName\",\n        Cell: (value: CellProps<CustomCalculation>) => (\n          <PropertyNameCell\n            property={value.row.original}\n            onClickModify={onClickModify}\n          />\n        ),\n      },\n      {\n        id: \"formula\",\n        Header: \"Formula\",\n        accessor: \"formula\",\n      },\n      {\n        id: \"dropdown\",\n        Header: \"\",\n        width: 80,\n        Cell: (value: CellProps<CustomCalculation>) => {\n          return (\n            <DropdownMenu\n              menuItems={(close: () => void) => [onClickModify ? [\n                <MenuItem\n                  key={0}\n                  onClick={() => {\n                    onClickModify(value.row.original);\n                    close();\n                  }}\n                  icon={<SvgEdit />}\n                >\n                  Modify\n                </MenuItem>] : [],\n              <MenuItem\n                key={1}\n                onClick={() => {\n                  handleShowDeleteModal(value.row.original);\n                  close();\n                }}\n                icon={<SvgDelete />}\n              >\n                Remove\n              </MenuItem>,\n              ].flatMap((p) => p)}\n            >\n              <IconButton styleType='borderless'>\n                <SvgMore />\n              </IconButton>\n            </DropdownMenu>\n          );\n        },\n      },\n    ],\n    [onClickModify],\n  );\n\n  const { mutateAsync: deleteProperty } = useMutation({\n    mutationFn: async (propertyId: string) => {\n      const accessToken = await getAccessToken();\n      await mappingClient.deleteCustomCalculation(\n        accessToken,\n        iModelId,\n        mappingId,\n        groupId,\n        propertyId,\n      );\n    },\n    onSuccess: async () => queryClient.invalidateQueries({ queryKey: [\"customCalculations\", iModelId, mappingId, groupId] }),\n  });\n\n  return (\n    <PropertyTable\n      propertyType=\"Custom Calculation\"\n      columnsFactory={columnsFactory}\n      data={customCalculations}\n      isLoading={isLoading}\n      onClickAdd={onClickAdd}\n      refreshProperties={refresh}\n      deleteProperty={deleteProperty}\n    />\n  );\n};\n"]}

package/lib/cjs/components/Properties/GroupColorToggle.js

@@ -34,39 +34,43 @@ const viewerUtils_1 = require("../../common/viewerUtils");
 const presentation_frontend_1 = require("@itwin/presentation-frontend");
 const GroupingApiConfigContext_1 = require("../context/GroupingApiConfigContext");
 const useKeySetHiliteQueries_1 = require("../Groups/hooks/useKeySetHiliteQueries");
-const PropertiesContext_1 = require("../context/PropertiesContext");
+const PropertiesGroupColorContext_1 = require("../context/PropertiesGroupColorContext");
+const react_query_1 = require("@tanstack/react-query");
+const useIsMounted_1 = require("../../common/hooks/useIsMounted");
 const GroupColorToggle = ({ color, group, ...rest }) => {
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const { iModelConnection } = (0, GroupingApiConfigContext_1.useGroupingMappingApiConfig)();
     if (!iModelConnection) {
         throw new Error("This component requires an active iModelConnection.");
     }
-    const { showGroupColor, setShowGroupColor } = (0, PropertiesContext_1.usePropertiesContext)();
-    const { data: hiliteIdsResult } = (0, useKeySetHiliteQueries_1.useGroupKeySetQuery)(group, iModelConnection, showGroupColor);
+    const { showGroupColor, setShowGroupColor } = (0, PropertiesGroupColorContext_1.usePropertiesGroupColorContext)();
+    const { data: hiliteIdsResult, isFetched, isFetching } = (0, useKeySetHiliteQueries_1.useGroupKeySetQuery)(group, iModelConnection, showGroupColor);
+    const isMounted = (0, useIsMounted_1.useIsMounted)();
+    const { mutate: mutateVisualization, isLoading: isVisualizing } = (0, react_query_1.useMutation)({
+        mutationFn: async (hiliteIds) => {
+            (0, viewerUtils_1.clearAll)();
+            presentation_frontend_1.Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
+            (0, viewerUtils_1.visualizeElements)(hiliteIds.result.ids, color);
+            await (0, viewerUtils_1.zoomToElements)(hiliteIds.result.ids);
+        },
+        onError: (error) => {
+            itwinui_react_1.toaster.negative("There was an error visualizing group.");
+            // eslint-disable-next-line no-console
+            console.error(error);
+        },
+    });
     (0, react_1.useEffect)(() => {
-        const visualize = async () => {
-            try {
-                setIsLoading(true);
-                (0, viewerUtils_1.clearEmphasizedOverriddenElements)();
-                (0, viewerUtils_1.clearHiddenElements)();
-                if (showGroupColor && hiliteIdsResult) {
-                    presentation_frontend_1.Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
-                    (0, viewerUtils_1.visualizeElements)(hiliteIdsResult.result.ids, color);
-                    await (0, viewerUtils_1.zoomToElements)(hiliteIdsResult.result.ids);
-                }
+        isFetched && showGroupColor && hiliteIdsResult && isMounted && mutateVisualization(hiliteIdsResult);
+    }, [hiliteIdsResult, isFetched, isMounted, showGroupColor, mutateVisualization]);
+    const handleToggleChange = (0, react_1.useCallback)(() => {
+        setShowGroupColor((b) => {
+            if (b) {
+                (0, viewerUtils_1.clearAll)();
             }
-            catch (error) {
-                itwinui_react_1.toaster.negative("There was an error visualizing group.");
-                /* eslint-disable no-console */
-                console.error(error);
-            }
-            finally {
-                setIsLoading(false);
-            }
-        };
-        void visualize();
-    }, [color, hiliteIdsResult, iModelConnection, showGroupColor]);
-    return (react_1.default.createElement(itwinui_react_1.ToggleSwitch, { label: "Color Group", disabled: isLoading, checked: showGroupColor, onChange: () => setShowGroupColor((b) => !b), ...rest }));
+            return !b;
+        });
+    }, [setShowGroupColor]);
+    const isLoading = isFetching || isVisualizing;
+    return (react_1.default.createElement(itwinui_react_1.ToggleSwitch, { label: "Color Group", disabled: isLoading, checked: showGroupColor, onChange: handleToggleChange, ...rest }));
 };
 exports.GroupColorToggle = GroupColorToggle;
 //# sourceMappingURL=GroupColorToggle.js.map

package/lib/cjs/components/Properties/GroupColorToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupColorToggle.js","sourceRoot":"","sources":["../../../../src/components/Properties/GroupColorToggle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,+CAAmD;AAEnD,wDAA6D;AAE7D,0DAAqI;AACrI,wEAA4D;AAC5D,kFAAkF;AAClF,mFAA6E;AAC7E,oEAAoE;AAO7D,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,GAAG,IAAI,EACe,EAAE,EAAE;IAC1B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAC3D,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,sDAA2B,GAAE,CAAC;IAC3D,IAAI,CAAC,gBAAgB,EAAE;QACrB,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;KACxE;IACD,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,IAAA,wCAAoB,GAAE,CAAC;IACrE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,IAAA,4CAAmB,EAAC,KAAK,EAAE,gBAAgB,EAAE,cAAc,CAAC,CAAC;IAE/F,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,KAAK,IAAI,EAAE;YAC3B,IAAI;gBACF,YAAY,CAAC,IAAI,CAAC,CAAC;gBACnB,IAAA,+CAAiC,GAAE,CAAC;gBACpC,IAAA,iCAAmB,GAAE,CAAC;gBACtB,IAAI,cAAc,IAAI,eAAe,EAAE;oBACrC,oCAAY,CAAC,SAAS,CAAC,cAAc,CACnC,uBAAuB,EACvB,gBAAgB,CACjB,CAAC;oBACF,IAAA,+BAAiB,EAAC,eAAe,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;oBACrD,MAAM,IAAA,4BAAc,EAAC,eAAe,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;iBAClD;aACF;YAAC,OAAO,KAAK,EAAE;gBACd,uBAAO,CAAC,QAAQ,CAAC,uCAAuC,CAAC,CAAC;gBAC1D,+BAA+B;gBAC/B,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;aACtB;oBAAS;gBACR,YAAY,CAAC,KAAK,CAAC,CAAC;aACrB;QACH,CAAC,CAAC;QACF,KAAK,SAAS,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAC;IAE/D,OAAO,CACL,8BAAC,4BAAY,IACX,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAE,SAAS,EACnB,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KACxC,IAAI,GACM,CACjB,CAAC;AACJ,CAAC,CAAC;AA/CW,QAAA,gBAAgB,oBA+C3B","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport React, { useEffect, useState } from \"react\";\nimport type { ToggleSwitchProps } from \"@itwin/itwinui-react\";\nimport { toaster, ToggleSwitch } from \"@itwin/itwinui-react\";\nimport type { Group } from \"@itwin/insights-client\";\nimport { clearEmphasizedOverriddenElements, clearHiddenElements, visualizeElements, zoomToElements } from \"../../common/viewerUtils\";\nimport { Presentation } from \"@itwin/presentation-frontend\";\nimport { useGroupingMappingApiConfig } from \"../context/GroupingApiConfigContext\";\nimport { useGroupKeySetQuery } from \"../Groups/hooks/useKeySetHiliteQueries\";\nimport { usePropertiesContext } from \"../context/PropertiesContext\";\n\nexport type GroupColorToggleProps = Partial<ToggleSwitchProps> & {\n  color: string;\n  group: Group;\n};\n\nexport const GroupColorToggle = ({\n  color,\n  group,\n  ...rest\n}: GroupColorToggleProps) => {\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n  const { iModelConnection } = useGroupingMappingApiConfig();\n  if (!iModelConnection) {\n    throw new Error(\"This component requires an active iModelConnection.\");\n  }\n  const { showGroupColor, setShowGroupColor } = usePropertiesContext();\n  const { data: hiliteIdsResult } = useGroupKeySetQuery(group, iModelConnection, showGroupColor);\n\n  useEffect(() => {\n    const visualize = async () => {\n      try {\n        setIsLoading(true);\n        clearEmphasizedOverriddenElements();\n        clearHiddenElements();\n        if (showGroupColor && hiliteIdsResult) {\n          Presentation.selection.clearSelection(\n            \"GroupingMappingWidget\",\n            iModelConnection,\n          );\n          visualizeElements(hiliteIdsResult.result.ids, color);\n          await zoomToElements(hiliteIdsResult.result.ids);\n        }\n      } catch (error) {\n        toaster.negative(\"There was an error visualizing group.\");\n        /* eslint-disable no-console */\n        console.error(error);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    void visualize();\n  }, [color, hiliteIdsResult, iModelConnection, showGroupColor]);\n\n  return (\n    <ToggleSwitch\n      label=\"Color Group\"\n      disabled={isLoading}\n      checked={showGroupColor}\n      onChange={() => setShowGroupColor((b) => !b)}\n      {...rest}\n    ></ToggleSwitch>\n  );\n};\n"]}
+{"version":3,"file":"GroupColorToggle.js","sourceRoot":"","sources":["../../../../src/components/Properties/GroupColorToggle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,+CAAsD;AAEtD,wDAA6D;AAE7D,0DAAuF;AACvF,wEAA4D;AAC5D,kFAAkF;AAElF,mFAA6E;AAC7E,wFAAwF;AACxF,uDAAoD;AACpD,kEAA+D;AAOxD,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,GAAG,IAAI,EACe,EAAE,EAAE;IAC1B,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,sDAA2B,GAAE,CAAC;IAC3D,IAAI,CAAC,gBAAgB,EAAE;QACrB,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;KACxE;IACD,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,IAAA,4DAA8B,GAAE,CAAC;IAC/E,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAA,4CAAmB,EAAC,KAAK,EAAE,gBAAgB,EAAE,cAAc,CAAC,CAAC;IACtH,MAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAC;IAEjC,MAAM,EAAE,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,IAAA,yBAAW,EAAC;QAC5E,UAAU,EAAE,KAAK,EAAE,SAAuB,EAAE,EAAE;YAC5C,IAAA,sBAAQ,GAAE,CAAC;YACX,oCAAY,CAAC,SAAS,CAAC,cAAc,CACnC,uBAAuB,EACvB,gBAAgB,CACjB,CAAC;YACF,IAAA,+BAAiB,EAAC,SAAS,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;YAC/C,MAAM,IAAA,4BAAc,EAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC7C,CAAC;QACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,uBAAO,CAAC,QAAQ,CAAC,uCAAuC,CAAC,CAAC;YAC1D,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;KACF,CAAC,CAAC;IAEH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,SAAS,IAAI,cAAc,IAAI,eAAe,IAAI,SAAS,IAAI,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACtG,CAAC,EAAE,CAAC,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEjF,MAAM,kBAAkB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC1C,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE;YACtB,IAAI,CAAC,EAAE;gBACL,IAAA,sBAAQ,GAAE,CAAC;aACZ;YACD,OAAO,CAAC,CAAC,CAAC;QACZ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,MAAM,SAAS,GAAG,UAAU,IAAI,aAAa,CAAC;IAE9C,OAAO,CACL,8BAAC,4BAAY,IACX,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAE,SAAS,EACnB,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,kBAAkB,KACxB,IAAI,GACM,CACjB,CAAC;AACJ,CAAC,CAAC;AAtDW,QAAA,gBAAgB,oBAsD3B","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport React, { useCallback, useEffect } from \"react\";\nimport type { ToggleSwitchProps } from \"@itwin/itwinui-react\";\nimport { toaster, ToggleSwitch } from \"@itwin/itwinui-react\";\nimport type { Group } from \"@itwin/insights-client\";\nimport { clearAll, visualizeElements, zoomToElements } from \"../../common/viewerUtils\";\nimport { Presentation } from \"@itwin/presentation-frontend\";\nimport { useGroupingMappingApiConfig } from \"../context/GroupingApiConfigContext\";\nimport type { QueryResults } from \"../Groups/hooks/useKeySetHiliteQueries\";\nimport { useGroupKeySetQuery } from \"../Groups/hooks/useKeySetHiliteQueries\";\nimport { usePropertiesGroupColorContext } from \"../context/PropertiesGroupColorContext\";\nimport { useMutation } from \"@tanstack/react-query\";\nimport { useIsMounted } from \"../../common/hooks/useIsMounted\";\n\nexport type GroupColorToggleProps = Partial<ToggleSwitchProps> & {\n  color: string;\n  group: Group;\n};\n\nexport const GroupColorToggle = ({\n  color,\n  group,\n  ...rest\n}: GroupColorToggleProps) => {\n  const { iModelConnection } = useGroupingMappingApiConfig();\n  if (!iModelConnection) {\n    throw new Error(\"This component requires an active iModelConnection.\");\n  }\n  const { showGroupColor, setShowGroupColor } = usePropertiesGroupColorContext();\n  const { data: hiliteIdsResult, isFetched, isFetching } = useGroupKeySetQuery(group, iModelConnection, showGroupColor);\n  const isMounted = useIsMounted();\n\n  const { mutate: mutateVisualization, isLoading: isVisualizing } = useMutation({\n    mutationFn: async (hiliteIds: QueryResults) => {\n      clearAll();\n      Presentation.selection.clearSelection(\n        \"GroupingMappingWidget\",\n        iModelConnection,\n      );\n      visualizeElements(hiliteIds.result.ids, color);\n      await zoomToElements(hiliteIds.result.ids);\n    },\n    onError: (error) => {\n      toaster.negative(\"There was an error visualizing group.\");\n      // eslint-disable-next-line no-console\n      console.error(error);\n    },\n  });\n\n  useEffect(() => {\n    isFetched && showGroupColor && hiliteIdsResult && isMounted && mutateVisualization(hiliteIdsResult);\n  }, [hiliteIdsResult, isFetched, isMounted, showGroupColor, mutateVisualization]);\n\n  const handleToggleChange = useCallback(() => {\n    setShowGroupColor((b) => {\n      if (b) {\n        clearAll();\n      }\n      return !b;\n    });\n  }, [setShowGroupColor]);\n\n  const isLoading = isFetching || isVisualizing;\n\n  return (\n    <ToggleSwitch\n      label=\"Color Group\"\n      disabled={isLoading}\n      checked={showGroupColor}\n      onChange={handleToggleChange}\n      {...rest}\n    ></ToggleSwitch>\n  );\n};\n"]}

package/lib/cjs/components/Properties/GroupProperties/GroupPropertyAction.js

@@ -31,26 +31,21 @@ exports.GroupPropertyAction = exports.quantityTypesSelectionOptions = void 0;
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-const server_1 = require("react-dom/server");
 const presentation_common_1 = require("@itwin/presentation-common");
 const itwinui_react_1 = require("@itwin/itwinui-react");
 const react_1 = __importStar(require("react"));
 const ActionPanel_1 = __importDefault(require("../../SharedComponents/ActionPanel"));
 const useValidator_1 = __importStar(require("../hooks/useValidator"));
-const utils_1 = require("../../../common/utils");
 const MappingClientContext_1 = require("../../context/MappingClientContext");
 const GroupingApiConfigContext_1 = require("../../context/GroupingApiConfigContext");
-const HorizontalTile_1 = require("../../SharedComponents/HorizontalTile");
 const insights_client_1 = require("@itwin/insights-client");
-const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
-const core_1 = require("@dnd-kit/core");
-const sortable_1 = require("@dnd-kit/sortable");
-const SortableHorizontalTile_1 = __importDefault(require("./SortableHorizontalTile"));
-const react_split_1 = __importDefault(require("react-split"));
 require("./GroupPropertyAction.scss");
 const GroupPropertyUtils_1 = require("./GroupPropertyUtils");
 const viewerUtils_1 = require("../../../common/viewerUtils");
 const SaveModal_1 = require("./SaveModal");
+const GroupsPropertiesSelectionModal_1 = require("./GroupsPropertiesSelectionModal");
+const react_query_1 = require("@tanstack/react-query");
+const GroupPropertyListItem_1 = require("./GroupPropertyListItem");
 exports.quantityTypesSelectionOptions = [
     { value: insights_client_1.QuantityType.Area, label: "Area" },
     { value: insights_client_1.QuantityType.Distance, label: "Distance" },
@@ -72,93 +67,49 @@ const GroupPropertyAction = ({ mappingId, group, groupProperty, onSaveSuccess, o
     const [propertiesMetaData, setPropertiesMetaData] = (0, react_1.useState)([]);
     const [propertiesNotFoundAlert, setPropertiesNotFoundAlert] = (0, react_1.useState)(false);
     const [validator, showValidationMessage] = (0, useValidator_1.default)();
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    const [searchInput, setSearchInput] = (0, react_1.useState)("");
-    const [activeSearchInput, setActiveSearchInput] = (0, react_1.useState)("");
-    const [searched, setSearched] = (0, react_1.useState)(false);
-    const [activeDragProperty, setActiveDragProperty] = (0, react_1.useState)();
-    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor), (0, core_1.useSensor)(core_1.KeyboardSensor, {
-        coordinateGetter: sortable_1.sortableKeyboardCoordinates,
-    }));
-    const [showModal, setShowModal] = (0, react_1.useState)(false);
-    const [showSaveModal, setShowSaveModal] = (0, react_1.useState)(false);
-    const handleDragStart = (0, react_1.useCallback)((event) => {
-        const { active } = event;
-        const activeProperty = selectedProperties.find((p) => active.id === p.key);
-        setActiveDragProperty(activeProperty);
-    }, [selectedProperties]);
-    const handleDragEnd = (0, react_1.useCallback)((event) => {
-        const { active, over } = event;
-        if (over && (active.id !== over.id)) {
-            setSelectedProperties((items) => {
-                const oldIndex = selectedProperties.findIndex((p) => active.id === p.key);
-                const newIndex = selectedProperties.findIndex((p) => over.id === p.key);
-                return (0, sortable_1.arrayMove)(items, oldIndex, newIndex);
-            });
-        }
-        setActiveDragProperty(undefined);
-    }, [selectedProperties]);
-    const filteredProperties = (0, react_1.useMemo)(() => propertiesMetaData.filter((p) => [p.displayLabel, p.categoryLabel, p.actualECClassName]
-        .map((l) => l.toLowerCase())
-        .some((l) => l.includes(activeSearchInput.toLowerCase()))), [activeSearchInput, propertiesMetaData]);
+    const [showPropertiesSelectionModal, setShowPropertiesSelectionModal] = (0, react_1.useState)(false);
+    const [showSaveConfirmationModal, setShowSaveConfirmationModal] = (0, react_1.useState)(false);
+    const queryClient = (0, react_query_1.useQueryClient)();
     const reset = (0, react_1.useCallback)(() => {
         setPropertyName("");
         setDataType(insights_client_1.DataType.Undefined);
         setSelectedProperties([]);
     }, []);
+    const fetchPropertiesMetadata = (0, react_1.useCallback)(async () => {
+        if (!iModelConnection)
+            return;
+        const result = await (0, viewerUtils_1.manufactureKeys)(group.query, iModelConnection);
+        const descriptor = await (0, GroupPropertyUtils_1.fetchPresentationDescriptor)(iModelConnection, result);
+        // Only allow primitives and structs
+        const propertyFields = descriptor?.fields.filter((field) => field.type.valueFormat === presentation_common_1.PropertyValueFormat.Primitive ||
+            field.type.valueFormat === presentation_common_1.PropertyValueFormat.Struct) ?? [];
+        const propertiesMetaData = (0, GroupPropertyUtils_1.convertPresentationFields)(propertyFields);
+        let groupPropertyDetails = null;
+        if (groupProperty) {
+            const accessToken = await getAccessToken();
+            groupPropertyDetails = await mappingClient.getGroupProperty(accessToken, iModelId, mappingId, group.id, groupProperty.id);
+        }
+        return { propertiesMetaData, groupPropertyDetails };
+    }, [getAccessToken, group.id, group.query, groupProperty, iModelConnection, iModelId, mappingClient, mappingId]);
+    const { data, isFetching: isLoadingProperties, isSuccess: isLoadingPropertiesSuccessful } = (0, react_query_1.useQuery)(["groupProperties", iModelId, mappingId, group.id, groupProperty?.id, "metadata"], fetchPropertiesMetadata);
     (0, react_1.useEffect)(() => {
-        const generateProperties = async () => {
-            setIsLoading(true);
-            if (!iModelConnection)
-                return;
-            const result = await (0, viewerUtils_1.manufactureKeys)(group.query, iModelConnection);
-            const descriptor = await (0, GroupPropertyUtils_1.fetchPresentationDescriptor)(iModelConnection, result);
-            // Only allow primitives and structs
-            const propertyFields = descriptor?.fields.filter((field) => field.type.valueFormat === presentation_common_1.PropertyValueFormat.Primitive ||
-                field.type.valueFormat === presentation_common_1.PropertyValueFormat.Struct) ?? [];
-            const propertiesMetaData = (0, GroupPropertyUtils_1.convertPresentationFields)(propertyFields);
-            setPropertiesMetaData(propertiesMetaData);
-            if (groupProperty) {
-                const accessToken = await getAccessToken();
-                let response;
-                try {
-                    response = await mappingClient.getGroupProperty(accessToken, iModelId, mappingId, group.id, groupProperty.id);
-                    setPropertyName(response.propertyName);
-                    setOldPropertyName(response.propertyName);
-                    setDataType(response.dataType);
-                    setQuantityType(response.quantityType);
-                    const properties = (0, GroupPropertyUtils_1.findProperties)(response.ecProperties, propertiesMetaData);
-                    if (properties.length === 0) {
-                        setPropertiesNotFoundAlert(true);
-                    }
-                    setSelectedProperties(properties);
-                }
-                catch (error) {
-                    (0, utils_1.handleError)(error.status);
+        if (isLoadingPropertiesSuccessful && data?.propertiesMetaData) {
+            setPropertiesMetaData(data.propertiesMetaData);
+            if (data.groupPropertyDetails) {
+                setPropertyName(data.groupPropertyDetails.propertyName);
+                setOldPropertyName(data.groupPropertyDetails.propertyName);
+                setDataType(data.groupPropertyDetails.dataType);
+                setQuantityType(data.groupPropertyDetails.quantityType);
+                const properties = (0, GroupPropertyUtils_1.findProperties)(data.groupPropertyDetails.ecProperties, data.propertiesMetaData);
+                if (properties.length === 0) {
+                    setPropertiesNotFoundAlert(true);
                 }
+                setSelectedProperties(properties);
             }
-            setIsLoading(false);
-        };
-        void generateProperties();
-    }, [getAccessToken, mappingClient, iModelConnection, iModelId, groupProperty, mappingId, group]);
-    const handleSaveClick = async () => {
-        if (!validator.allValid()) {
-            showValidationMessage(true);
-            return;
-        }
-        if (oldPropertyName !== propertyName && oldPropertyName !== "") {
-            setShowSaveModal(true);
         }
-        else {
-            await onSave();
-        }
-    };
-    const handleCloseSaveModal = () => {
-        setShowSaveModal(false);
-    };
-    const onSave = async () => {
-        try {
-            setIsLoading(true);
+    }, [data, isLoadingPropertiesSuccessful]);
+    const { mutate: onSave, isLoading: isSaving } = (0, react_query_1.useMutation)({
+        mutationFn: async () => {
             const accessToken = await getAccessToken();
             const newGroupProperty = {
                 propertyName,
@@ -166,37 +117,33 @@ const GroupPropertyAction = ({ mappingId, group, groupProperty, onSaveSuccess, o
                 quantityType,
                 ecProperties: selectedProperties.map((p) => (0, GroupPropertyUtils_1.convertToECProperties)(p)).flat(),
             };
-            groupProperty
-                ? await mappingClient.updateGroupProperty(accessToken, iModelId, mappingId, group.id, groupProperty.id, newGroupProperty)
-                : await mappingClient.createGroupProperty(accessToken, iModelId, mappingId, group.id, newGroupProperty);
+            return groupProperty
+                ? mappingClient.updateGroupProperty(accessToken, iModelId, mappingId, group.id, groupProperty.id, newGroupProperty)
+                : mappingClient.createGroupProperty(accessToken, iModelId, mappingId, group.id, newGroupProperty);
+        },
+        onSuccess: async () => {
             onSaveSuccess();
             reset();
+            await queryClient.invalidateQueries(["groupProperties", iModelId, mappingId, group.id]);
+        },
+    });
+    const handleSaveClick = async () => {
+        if (!validator.allValid()) {
+            showValidationMessage(true);
+            return;
         }
-        catch (error) {
-            (0, utils_1.handleError)(error.status);
+        if (oldPropertyName !== propertyName && oldPropertyName !== "") {
+            setShowSaveConfirmationModal(true);
         }
-        finally {
-            setIsLoading(false);
+        else {
+            onSave();
         }
     };
-    const startSearch = (0, react_1.useCallback)(() => {
-        if (!searchInput)
-            return;
-        setActiveSearchInput(searchInput);
-        setSearched(true);
-    }, [searchInput]);
-    const clearSearch = (0, react_1.useCallback)(() => {
-        setSearchInput("");
-        setActiveSearchInput("");
-        setSearched(false);
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (searchInput.length === 0) {
-            setSearched(false);
-            clearSearch();
-        }
-    }, [searchInput, setSearched, clearSearch]);
-    return (react_1.default.createElement(core_1.DndContext, { sensors: sensors, collisionDetection: core_1.closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd },
+    const handleCloseSaveModal = () => {
+        setShowSaveConfirmationModal(false);
+    };
+    const isLoading = isLoadingProperties || isSaving;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: 'gmw-group-property-action-container' },
             react_1.default.createElement(itwinui_react_1.Fieldset, { disabled: isLoading, className: 'gmw-property-options', legend: 'Property Details' },
                 react_1.default.createElement(itwinui_react_1.Text, { variant: 'small', as: 'small', className: 'gmw-field-legend' }, "Asterisk * indicates mandatory fields."),
@@ -225,67 +172,15 @@ const GroupPropertyAction = ({ mappingId, group, groupProperty, onSaveSuccess, o
                 react_1.default.createElement(itwinui_react_1.Alert, { type: "warning" }, "Warning: Could not match saved properties from the current generated list. It does not confirm or deny validity. Overwriting will occur if a new selection is made and saved."),
             react_1.default.createElement(itwinui_react_1.Fieldset, { className: 'gmw-property-view-container', legend: "Mapped Properties" },
                 react_1.default.createElement("div", { className: "gmw-property-view-button" },
-                    react_1.default.createElement(itwinui_react_1.Button, { onClick: async () => setShowModal(true), disabled: isLoading }, "Select Properties")),
+                    react_1.default.createElement(itwinui_react_1.Button, { onClick: async () => setShowPropertiesSelectionModal(true), disabled: isLoading }, "Select Properties")),
                 react_1.default.createElement("div", { className: "gmw-properties-list" }, selectedProperties.length === 0 && !isLoading ?
                     react_1.default.createElement("div", { className: "gmw-empty-selection" },
                         react_1.default.createElement(itwinui_react_1.Text, null, "No properties selected."),
                         react_1.default.createElement(itwinui_react_1.Text, null, "Press the \"Select Properties\" button for options.")) :
-                    selectedProperties.map((property) => (react_1.default.createElement(HorizontalTile_1.HorizontalTile, { key: property.key, title: `${property.displayLabel} (${property.propertyType})`, titleTooltip: `${property.actualECClassName}`, subText: (0, utils_1.getLocalizedStringPresentation)(property.categoryLabel), actionGroup: null })))))),
+                    selectedProperties.map((property) => (react_1.default.createElement(GroupPropertyListItem_1.GroupPropertyListItem, { key: property.key, content: `${property.displayLabel} (${property.propertyType})`, title: `${property.actualECClassName}`, description: property.categoryLabel })))))),
         react_1.default.createElement(ActionPanel_1.default, { onSave: handleSaveClick, onCancel: onClickCancel, isLoading: isLoading, isSavingDisabled: selectedProperties.length === 0 || !propertyName || dataType === insights_client_1.DataType.Undefined }),
-        react_1.default.createElement(itwinui_react_1.Modal, { title: "Properties Selection", isOpen: showModal, onClose: () => {
-                setShowModal(false);
-                clearSearch();
-            }, closeOnExternalClick: false },
-            react_1.default.createElement(react_split_1.default, { expandToMin: false, className: "gmw-property-selection-container", gutterAlign: "center", gutterSize: 2, gutter: () => {
-                    // Expects HTMLElement
-                    const dragHangle = (0, server_1.renderToStaticMarkup)(react_1.default.createElement(itwinui_react_1.Icon, { className: "gmw-gutter-drag-icon", size: "large" },
-                        react_1.default.createElement(itwinui_icons_react_1.SvgMoreVerticalSmall, null)));
-                    const gutter = document.createElement("div");
-                    gutter.className = `gmw-gutter`;
-                    gutter.innerHTML = dragHangle;
-                    return gutter;
-                }, direction: "horizontal" },
-                react_1.default.createElement(itwinui_react_1.Surface, { className: "gmw-available-properties", elevation: 1 },
-                    react_1.default.createElement("div", { className: "gmw-available-properties-header" },
-                        react_1.default.createElement(itwinui_react_1.Label, { as: "span" }, "Available Properties"),
-                        react_1.default.createElement(itwinui_react_1.LabeledInput, { displayStyle: "inline", iconDisplayStyle: "inline", className: "gmw-available-prop-search", value: searchInput, size: "small", placeholder: "Search....", onChange: (event) => {
-                                const { target: { value }, } = event;
-                                setSearchInput(value);
-                            }, onKeyDown: (event) => {
-                                if (event.key === "Enter") {
-                                    startSearch();
-                                }
-                            }, svgIcon: searched ? (react_1.default.createElement(itwinui_react_1.IconButton, { onClick: clearSearch, styleType: "borderless", title: 'Clear Search' },
-                                react_1.default.createElement(itwinui_icons_react_1.SvgClose, null))) : (react_1.default.createElement(itwinui_react_1.IconButton, { onClick: startSearch, styleType: "borderless", title: 'Search' },
-                                react_1.default.createElement(itwinui_icons_react_1.SvgSearch, null))) })),
-                    filteredProperties.length === 0 ?
-                        react_1.default.createElement("div", { className: "gmw-empty-selection" },
-                            react_1.default.createElement(itwinui_react_1.Text, null, "No properties available. ")) :
-                        react_1.default.createElement("div", { className: "gmw-properties-list" }, filteredProperties.map((property) => (react_1.default.createElement(HorizontalTile_1.HorizontalTile, { key: property.key, title: `${property.displayLabel} (${property.propertyType})`, titleTooltip: `${property.actualECClassName}`, subText: (0, utils_1.getLocalizedStringPresentation)(property.categoryLabel), actionGroup: null, selected: selectedProperties.some((p) => property.key === p.key), onClick: () => setSelectedProperties((sp) => sp.some((p) => property.key === p.key)
-                                ? sp.filter((p) => property.key !== p.key)
-                                : [...sp, property]) }))))),
-                react_1.default.createElement(itwinui_react_1.Surface, { className: "gmw-selected-properties", elevation: 1 },
-                    react_1.default.createElement(itwinui_react_1.Label, { as: "span" }, "Selected Properties"),
-                    selectedProperties.length === 0 ?
-                        react_1.default.createElement("div", { className: "gmw-empty-selection" },
-                            react_1.default.createElement(itwinui_react_1.Text, null, "No properties selected."),
-                            react_1.default.createElement(itwinui_react_1.Text, null, "Add some by clicking on the properties shown left.")) :
-                        react_1.default.createElement("div", { className: "gmw-properties-list" },
-                            react_1.default.createElement(sortable_1.SortableContext, { items: selectedProperties.map((p) => p.key), strategy: sortable_1.verticalListSortingStrategy }, selectedProperties.map((property) => react_1.default.createElement(SortableHorizontalTile_1.default, { key: property.key, id: property.key, title: `${property.displayLabel} (${property.propertyType})`, titleTooltip: `${property.actualECClassName}`, subText: property.categoryLabel, actionGroup: react_1.default.createElement("div", null,
-                                    react_1.default.createElement(itwinui_react_1.IconButton, { styleType: "borderless", title: "Remove", onClick: () => {
-                                            setSelectedProperties((sp) => sp.filter((p) => property.key !== p.key));
-                                        } },
-                                        react_1.default.createElement(itwinui_icons_react_1.SvgRemove, null))) })))))),
-            react_1.default.createElement(itwinui_react_1.ModalButtonBar, null,
-                react_1.default.createElement(itwinui_react_1.Button, { onClick: () => {
-                        setShowModal(false);
-                        clearSearch();
-                    }, styleType: "high-visibility" }, "Close"))),
-        react_1.default.createElement(SaveModal_1.SaveModal, { onSave: onSave, onClose: handleCloseSaveModal, showSaveModal: showSaveModal }),
-        react_1.default.createElement(core_1.DragOverlay, { zIndex: 9999 }, activeDragProperty ?
-            react_1.default.createElement(HorizontalTile_1.HorizontalTile, { title: `${activeDragProperty.displayLabel} (${activeDragProperty.propertyType})`, titleTooltip: `${activeDragProperty.actualECClassName}`, subText: activeDragProperty.categoryLabel, actionGroup: react_1.default.createElement(itwinui_react_1.IconButton, { styleType: "borderless" },
-                    react_1.default.createElement(itwinui_icons_react_1.SvgRemove, null)), dragHandle: react_1.default.createElement(itwinui_react_1.Icon, { className: "gmw-drag-icon", size: "large" },
-                    react_1.default.createElement(itwinui_icons_react_1.SvgDragHandleVertical, null)) }) : null)));
+        react_1.default.createElement(GroupsPropertiesSelectionModal_1.GroupsPropertiesSelectionModal, { showModal: showPropertiesSelectionModal, setShowModal: setShowPropertiesSelectionModal, selectedProperties: selectedProperties, setSelectedProperties: setSelectedProperties, propertiesMetaData: propertiesMetaData }),
+        react_1.default.createElement(SaveModal_1.SaveModal, { onSave: onSave, onClose: handleCloseSaveModal, showSaveModal: showSaveConfirmationModal })));
 };
 exports.GroupPropertyAction = GroupPropertyAction;
 //# sourceMappingURL=GroupPropertyAction.js.map