refactor: update document preview properties panel

bpmn-io · Dec 12, 2024 · aaf4713 · aaf4713
1 parent 0aa4d03
commit aaf4713
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 7 deletions.
diff --git a/packages/form-js-editor/src/features/properties-panel/PropertiesProvider.js b/packages/form-js-editor/src/features/properties-panel/PropertiesProvider.js
@@ -10,6 +10,7 @@ import {
   TableHeaderGroups,
   LayoutGroup,
   SecurityAttributesGroup,
+  DownloadSettings,
 } from './groups';
 
 import { hasEntryConfigured } from './Util';
@@ -57,6 +58,7 @@ export class PropertiesProvider {
       groups = [
         ...groups,
         GeneralGroup(field, editField, getService),
+        DownloadSettings(field, editField),
         ...OptionsGroups(field, editField, getService),
         ...TableHeaderGroups(field, editField),
         SecurityAttributesGroup(field, editField),

diff --git a/packages/form-js-editor/src/features/properties-panel/entries/DocumentsDataSource.js b/packages/form-js-editor/src/features/properties-panel/entries/DocumentsDataSource.js
@@ -70,5 +70,18 @@ function DocumentsDataSource(props) {
     setValue,
     variables,
     tooltip,
+    validate,
   });
 }
+
+// helpers //////////
+
+/**
+ * @param {string|undefined} value
+ * @returns {string|null}
+ */
+const validate = (value) => {
+  if (typeof value !== 'string' || value.length === 0) {
+    return 'The document data source is required.';
+  }
+};
diff --git a/packages/form-js-editor/src/features/properties-panel/entries/EndpointKey.js b/packages/form-js-editor/src/features/properties-panel/entries/EndpointKey.js
@@ -64,16 +64,27 @@ function EndpointKey(props) {
     element: field,
     getValue,
     id,
-    label: 'Document API endpoint key',
+    label: 'Document URL',
     feel: 'required',
     singleLine: true,
     setValue,
     variables,
     description,
     tooltip,
+    validate,
   });
 }
 
 // helpers //////////
 
-const description = <>An API endpoint for downloading a document</>;
+/**
+ * @param {string|undefined} value
+ * @returns {string|null}
+ */
+const validate = (value) => {
+  if (typeof value !== 'string' || value.length === 0) {
+    return 'The document reference is required.';
+  }
+};
+
+const description = <>Define an API URL for downloading a document</>;
diff --git a/packages/form-js-editor/src/features/properties-panel/entries/MaxHeightEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/MaxHeightEntry.js
@@ -38,12 +38,13 @@ function MaxHeight(props) {
 
   return NumberFieldEntry({
     debounce,
-    label: 'Max height',
+    label: 'Max height of preview container',
     element: field,
     id,
     getValue,
     setValue,
     validate,
+    description,
   });
 }
 
@@ -70,3 +71,5 @@ const validate = (value) => {
     return 'Should be greater than zero.';
   }
 };
+
+const description = <>Documents with height that exceeds the defined value will be vertically scrollable</>;
diff --git a/packages/form-js-editor/src/features/properties-panel/groups/DownloadSettings.js b/packages/form-js-editor/src/features/properties-panel/groups/DownloadSettings.js
@@ -0,0 +1,15 @@
+import { EndpointKeyEntry } from '../entries';
+
+export function DownloadSettings(field, editField) {
+  const entries = [...EndpointKeyEntry({ field, editField })];
+
+  if (!entries.length) {
+    return null;
+  }
+
+  return {
+    id: 'downloadSettings',
+    label: 'Download settings',
+    entries,
+  };
+}
diff --git a/packages/form-js-editor/src/features/properties-panel/groups/GeneralGroup.js b/packages/form-js-editor/src/features/properties-panel/groups/GeneralGroup.js
@@ -27,7 +27,6 @@ import {
   AcceptEntry,
   MultipleEntry,
   DocumentsDataSourceEntry,
-  EndpointKeyEntry,
 } from '../entries';
 
 export function GeneralGroup(field, editField, getService) {
@@ -60,7 +59,6 @@ export function GeneralGroup(field, editField, getService) {
     ...PaginationEntry({ field, editField }),
     ...RowCountEntry({ field, editField }),
     ...DocumentsDataSourceEntry({ field, editField }),
-    ...EndpointKeyEntry({ field, editField }),
   ];
 
   if (entries.length === 0) {

diff --git a/packages/form-js-editor/src/features/properties-panel/groups/index.js b/packages/form-js-editor/src/features/properties-panel/groups/index.js
@@ -9,3 +9,4 @@ export { LayoutGroup } from './LayoutGroup';
 export { SecurityAttributesGroup } from './SecurityAttributesGroup';
 export { ConditionGroup } from './ConditionGroup';
 export { TableHeaderGroups } from './TableHeaderGroups';
+export { DownloadSettings } from './DownloadSettings';
diff --git a/packages/form-js-editor/test/spec/features/properties-panel/PropertiesPanel.spec.js b/packages/form-js-editor/test/spec/features/properties-panel/PropertiesPanel.spec.js
@@ -3449,9 +3449,10 @@ describe('properties panel', function () {
 
         // then
         expectPanelStructure(container, {
-          General: ['Title', 'Documents metadata source', 'Document API endpoint key'],
+          General: ['Title', 'Documents metadata source'],
+          'Download settings': ['Document URL'],
           Condition: [],
-          Appearance: ['Max height'],
+          Appearance: ['Max height of preview container'],
           'Custom properties': [],
         });
       });