feat: enable passing of documentation link to form properties panel

Related to camunda/team-hto#630

packages/form-js-editor/src/features/properties-panel/PropertiesPanel.js

@@ -6,7 +6,7 @@ import { reduce, isArray } from 'min-dash';
 
 import { FormPropertiesPanelContext } from './context';
 
-import { PropertiesPanelHeaderProvider } from './PropertiesPanelHeaderProvider';
+import { getPropertiesPanelHeaderProvider } from './PropertiesPanelHeaderProvider';
 import { PropertiesPanelPlaceholderProvider } from './PropertiesPanelPlaceholderProvider';
 
 export function PropertiesPanel(props) {
@@ -83,6 +83,14 @@ export function PropertiesPanel(props) {
  );
  }, [providers, selectedFormField, editField]);
 
+ const formFields = getService('formFields');
+ const getDocumentationRef = getService('config.propertiesPanel.getDocumentationRef');
+
+ const PropertiesPanelHeaderProvider = useMemo(
+ () => getPropertiesPanelHeaderProvider({ getDocumentationRef, formFields }),
+ [formFields, getDocumentationRef],
+ );
+
  return (
  <div
  class="fjs-properties-panel"

packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js

@@ -1,65 +1,50 @@
 import { textToLabel } from './Util';
-
 import { iconsByType } from '../../render/components/icons';
-
 import { getPaletteIcon } from '../palette/components/Palette';
 
-import { useService } from './hooks';
-
 const headerlessTypes = ['spacer', 'separator', 'expression', 'html'];
 
-export const PropertiesPanelHeaderProvider = {
- getElementLabel: (field) => {
- const { type } = field;
-
- if (headerlessTypes.includes(type)) {
- return '';
- }
-
- if (type === 'text') {
- return textToLabel(field.text);
- }
-
- if (type === 'image') {
- return field.alt;
- }
-
- if (type === 'default') {
- return field.id;
- }
-
- return field.label;
- },
-
- getElementIcon: (field) => {
- const { type } = field;
-
- // @Note: We know that we are inside the properties panel context,
- // so we can savely use the hook here.
- // eslint-disable-next-line react-hooks/rules-of-hooks
- const fieldDefinition = useService('formFields').get(type).config;
-
- const Icon = fieldDefinition.icon || iconsByType(type);
-
- if (Icon) {
- return () => <Icon width="36" height="36" viewBox="0 0 54 54" />;
- } else if (fieldDefinition.iconUrl) {
- return getPaletteIcon({ iconUrl: fieldDefinition.iconUrl, label: fieldDefinition.label });
- }
- },
-
- getTypeLabel: (field) => {
- const { type } = field;
-
- if (type === 'default') {
- return 'Form';
- }
-
- // @Note: We know that we are inside the properties panel context,
- // so we can savely use the hook here.
- // eslint-disable-next-line react-hooks/rules-of-hooks
- const fieldDefinition = useService('formFields').get(type).config;
-
- return fieldDefinition.label || type;
- },
-};
+export function getPropertiesPanelHeaderProvider(options = {}) {
+ const { getDocumentationRef, formFields } = options;
+
+ return {
+ getElementLabel: (field) => {
+ const { type } = field;
+ if (headerlessTypes.includes(type)) {
+ return '';
+ }
+ if (type === 'text') {
+ return textToLabel(field.text);
+ }
+ if (type === 'image') {
+ return field.alt;
+ }
+ if (type === 'default') {
+ return field.id;
+ }
+ return field.label;
+ },
+
+ getElementIcon: (field) => {
+ const { type } = field;
+ const fieldDefinition = formFields.get(type).config;
+ const Icon = fieldDefinition.icon || iconsByType(type);
+ if (Icon) {
+ return () => <Icon width="36" height="36" viewBox="0 0 54 54" />;
+ } else if (fieldDefinition.iconUrl) {
+ return getPaletteIcon({ iconUrl: fieldDefinition.iconUrl, label: fieldDefinition.label });
+ }
+ },
+
+ getTypeLabel: (field) => {
+ const { type } = field;
+ if (type === 'default') {
+ return 'Form';
+ }
+ const fieldDefinition = formFields.get(type).config;
+ return fieldDefinition.label || type;
+ },
+
+ getDocumentationRef,
+ };
+}

packages/form-js-playground/test/spec/Playground.spec.js

@@ -144,6 +144,47 @@ describe('playground', function () {
  expect(playground).to.exist;
  });
 
+ it('should render with documentation links', async function () {
+ // given
+ const data = {};
+
+ const getDocumentationRef = (field) => {
+ if (field.type === 'default') {
+ return 'https://example.com/default';
+ }
+
+ return 'https://example.com/other';
+ };
+
+ // when
+ await act(() => {
+ playground = new Playground({
+ container,
+ schema,
+ data,
+ propertiesPanel: {
+ getDocumentationRef,
+ },
+ });
+ });
+
+ // then
+ expect(playground).to.exist;
+
+ const documentationLink = domQuery('.bio-properties-panel-header-link', container);
+ expect(documentationLink).to.exist;
+ expect(documentationLink.href).to.eql('https://example.com/default');
+
+ // when
+ const formField = domQuery('.fjs-form-field', container);
+ await act(() => formField.click());
+
+ // then
+ const documentationLinkSelected = domQuery('.bio-properties-panel-header-link', container);
+ expect(documentationLinkSelected).to.exist;
+ expect(documentationLinkSelected.href).to.eql('https://example.com/other');
+ });
+
  it('should append sample data', async function () {
  // given
  const attrs = {