Studio UI Development - Custom Reports Editor - Statistics Explorer Configuration Adapter

assets/js/src/core/modules/app/error-handler/classes/api-error.ts

@@ -12,17 +12,9 @@ import { isEmpty, isString, isUndefined } from 'lodash'
 import type { FetchBaseQueryError } from '@reduxjs/toolkit/query'
 import type { SerializedError } from '@reduxjs/toolkit'
 import { ErrorKeyTypes } from '@Pimcore/modules/app/error-handler/constants/errorTypes'
-import { type IErrorGetContent } from '@Pimcore/modules/app/error-handler/types'
+import { type IApiErrorDetails, type IErrorGetContent } from '@Pimcore/modules/app/error-handler/types'
 
 export type ApiErrorData = FetchBaseQueryError | SerializedError
-
-export interface IApiErrorDetails {
-  detail?: string
-  errorKey?: string
-  message?: string
-  error?: string
-}
-
 export const DEFAULT_ERROR_CONTENT = 'Something went wrong.'
 
 class ApiError extends Error {

assets/js/src/core/modules/app/error-handler/types.ts

@@ -11,3 +11,10 @@
 export interface IErrorGetContent {
   data: string | { errorKey: string, title?: string }
 }
+
+export interface IApiErrorDetails {
+  detail?: string
+  errorKey?: string
+  message?: string
+  error?: string
+}

assets/js/src/core/modules/open-element/hooks/open-element-helper.ts

@@ -15,7 +15,7 @@ import { useElementHelper } from '@Pimcore/modules/element/hooks/use-element-hel
 import { type ElementGetIdByPathApiResponse } from '@Pimcore/modules/element/element-api-slice.gen'
 import { type ElementType } from '@Pimcore/types/enums/element/element-type'
 import trackError, { ApiError } from '@Pimcore/modules/app/error-handler'
-import { type IApiErrorDetails } from '@Pimcore/modules/app/error-handler/classes/api-error'
+import { type IApiErrorDetails } from '@Pimcore/modules/app/error-handler/types'
 
 interface OpenAssetHelperReturn {
   openElementByPathOrId: (value: string | number | undefined, elementType: ElementType) => Promise<void>

assets/js/src/core/modules/reports/dynamic-types/definitions/custom-report-definition-adapters/components/sql-adapter/sql-adapter.tsx

@@ -8,7 +8,7 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import React, { useEffect } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { isEmpty, isNil } from 'lodash'
 import { useTranslation } from 'react-i18next'
 import { FormKit } from '@Pimcore/components/form/form-kit'
@@ -21,7 +21,7 @@ import { useCustomReportsColumnConfigListQuery } from '@Pimcore/modules/reports/
 import { type ReportFormData } from '@Pimcore/modules/reports/reports-editor/hooks/use-report-form-state'
 import { COLUMN_KEYS } from '@Pimcore/modules/reports/reports-editor/components/report-configuration/components/column-configuration/constants'
 import type { IReportConfigurationSectionProps } from '@Pimcore/modules/reports/reports-editor/types'
-import { type IApiErrorDetails } from '@Pimcore/modules/app/error-handler/classes/api-error'
+import { type IApiErrorDetails } from '@Pimcore/modules/app/error-handler/types'
 import { useDebounce } from '@Pimcore/utils/hooks/use-debounce'
 
 interface ISqlAdapterProps extends IReportConfigurationSectionProps {}
@@ -53,12 +53,20 @@ export const SqlAdapter = ({ currentData, updateFormData }: ISqlAdapterProps): R
   const { t } = useTranslation()
 
   const debouncedValue = useDebounce(currentData?.dataSourceConfig, 1000)
+  const shouldSkipColumnConfigDataRequest = useMemo(() => {
+    if (isNil(debouncedValue)) return true
+
+    const keys = Object.keys(debouncedValue)
+
+    return keys.length === 0 || (keys.length === 1 && keys[0] === 'type')
+  }, [debouncedValue])
+
   const { data: columnConfigData, isError, error } = useCustomReportsColumnConfigListQuery({
     name: currentData.name,
     bundleCustomReportsDataSourceConfig: {
       configuration: debouncedValue!
     }
-  }, { skip: isNil(debouncedValue) })
+  }, { skip: shouldSkipColumnConfigDataRequest })
 
   const errorMessage = isError && ('data' in error) && (error.data as IApiErrorDetails)?.message
 

assets/js/src/core/modules/reports/reports-editor/components/report-configuration/components/source-definition/source-definition.tsx

@@ -46,9 +46,12 @@ export const SourceDefinition = ({ currentData, updateFormData }: IReportConfigu
   })), [adapters])
 
   const handleSourceDefinitionTypeUpdate = (type: string): void => {
-    setCurrentSourceDefinition(type)
-
+    form.resetFields(['dataSourceConfig'])
     form.setFieldsValue({ dataSourceConfig: { type } })
+
+    updateFormData?.({ ...currentData, dataSourceConfig: { type } })
+
+    setCurrentSourceDefinition(type)
   }
 
   const renderAddButton = (): React.JSX.Element => {
@@ -93,6 +96,7 @@ export const SourceDefinition = ({ currentData, updateFormData }: IReportConfigu
           >
             <Select
               fieldNames={ { label: 'label', value: 'key' } }
+              onChange={ (value: string) => { handleSourceDefinitionTypeUpdate(value) } }
               options={ sourceDefinitionOptions }
             />
           </Form.Item>

assets/js/src/core/modules/reports/reports-editor/components/report-configuration/report-configuration.tsx

@@ -38,13 +38,19 @@ interface IReportConfigurationProps {
   setModifiedReports: (modifiedReports: string[]) => void
 }
 
+interface IDataSourceConfig {
+  type?: string
+  [key: string]: any
+}
+
 export const ReportConfiguration = ({ report, isActive, modifiedReports, setModifiedReports }: IReportConfigurationProps): React.JSX.Element => {
   const { isLoading, data, isFetching, refetch } = useCustomReportsReportQuery({ name: report.id })
 
   const { initializeForm, currentData, isDirty, updateFormData, markFormSaved } = useReportFormState()
   const { updateReport } = useReportActions()
 
   const [isUpdatingReport, setIsUpdatingReport] = useState(false)
+  const dataSourceConfig: IDataSourceConfig | null | undefined = currentData?.dataSourceConfig
 
   const { t } = useTranslation()
 
@@ -120,10 +126,12 @@ export const ReportConfiguration = ({ report, isActive, modifiedReports, setModi
       padding={ { top: 'none', right: 'extra-small', bottom: 'none', left: 'extra-small' } }
     >
       {!isNull(currentData) && (
-      <FormKit formProps={ {
-        initialValues: currentData,
-        onValuesChange
-      } }
+      <FormKit
+        formProps={ {
+          initialValues: currentData,
+          onValuesChange
+        } }
+        key={ dataSourceConfig?.type }
       >
         <GeneralSettings />
         <SourceDefinition

assets/js/src/sdk/components/index.ts

@@ -19,6 +19,7 @@ export * from '@Pimcore/components/alert/alert'
 export * from '@Pimcore/components/asset-target/asset-target'
 export * from '@Pimcore/components/background/background'
 export * from '@Pimcore/components/badge/badge'
+export * from '@Pimcore/components/block/block'
 export * from '@Pimcore/components/breadcrumb/breadcrumb'
 export * from '@Pimcore/components/box/box'
 export * from '@Pimcore/components/card/card'

assets/js/src/sdk/modules/app/index.ts

@@ -17,6 +17,7 @@ export * from '@Pimcore/modules/app/context-menu-registry'
 
 export * from '@Pimcore/modules/app/error-boundary/error-boundary'
 export { default as trackError, ApiError, GeneralError } from '@Pimcore/modules/app/error-handler'
+export * from '@Pimcore/modules/app/error-handler/types'
 
 export * from '@Pimcore/modules/app/theme/theme-provider'
 

assets/js/src/sdk/modules/reports/index.ts

@@ -0,0 +1,22 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+if (module.hot !== undefined) {
+  module.hot.accept()
+}
+
+export * from '@Pimcore/modules/reports/dynamic-types/definitions/custom-report-definition-adapters/dynamic-type-custom-report-definition-registry'
+export * from '@Pimcore/modules/reports/dynamic-types/definitions/custom-report-definition-adapters/dynamic-type-custom-report-definition-abstract'
+
+export * from '@Pimcore/modules/reports/reports-editor/types'
+export * from '@Pimcore/modules/reports/reports-editor/hooks/use-report-form-state'
+export * from '@Pimcore/modules/reports/reports-editor/components/report-configuration/components/column-configuration/constants'
+
+export * as ReportsApiSlice from '@Pimcore/modules/reports/custom-reports-api-slice-enhanced'

assets/js/src/sdk/utils/index.ts

@@ -34,3 +34,4 @@ export * from '@Pimcore/utils/hooks/use-element-resize'
 export * from '@Pimcore/utils/hooks/use-element-visible'
 export * from '@Pimcore/utils/hooks/use-previous'
 export * from '@Pimcore/utils/hooks/use-server-side-event'
+export * from '@Pimcore/utils/hooks/use-debounce'

assets/rsbuild.sdk.config.ts

@@ -135,6 +135,7 @@ export default defineConfig({
       './modules/document': './js/src/sdk/modules/document/index.ts',
       './modules/element': './js/src/sdk/modules/element/index.ts',
       './modules/icon-library': './js/src/sdk/modules/icon-library/index.ts',
+      './modules/reports': './js/src/sdk/modules/reports/index.ts',
       './modules/user': './js/src/sdk/modules/user/index.ts',
       './modules/widget-manager': './js/src/sdk/modules/widget-manager/index.ts',
       './modules/wysiwyg': './js/src/sdk/modules/wysiwyg/index.ts',