From d5621648e5bf5ef78c2de5a6bd47cfa3821e55bd Mon Sep 17 00:00:00 2001 From: Philipp Fromme Date: Wed, 29 May 2024 17:06:17 +0200 Subject: [PATCH] feat(client): be able to enable new context pad through flag --- client/src/app/tabs/bpmn/BpmnEditor.less | 9 ++++ .../app/tabs/bpmn/__tests__/BpmnEditorSpec.js | 43 +++++++++++++++++++ .../src/app/tabs/bpmn/modeler/BpmnModeler.js | 32 ++++++++++---- .../src/app/tabs/cloud-bpmn/BpmnEditor.less | 10 ++++- .../cloud-bpmn/__tests__/BpmnEditorSpec.js | 43 +++++++++++++++++++ .../tabs/cloud-bpmn/modeler/BpmnModeler.js | 25 +++++++++-- .../app/tabs/cloud-dmn/modeler/DmnModeler.js | 29 +++++++++---- client/src/app/tabs/dmn/DmnEditor.less | 9 ++++ client/src/app/tabs/dmn/modeler/DmnModeler.js | 29 +++++++++---- client/src/util/Flags.js | 1 + .../bpmn-io-modelers/dmn/DmnModelerSpec.js | 35 +++++++++++++++ client/test/mocks/bpmn-js/Modeler.js | 2 + resources/flags.json | 4 +- 13 files changed, 241 insertions(+), 30 deletions(-) diff --git a/client/src/app/tabs/bpmn/BpmnEditor.less b/client/src/app/tabs/bpmn/BpmnEditor.less index 163e074d9a..8c30c88860 100644 --- a/client/src/app/tabs/bpmn/BpmnEditor.less +++ b/client/src/app/tabs/bpmn/BpmnEditor.less @@ -21,6 +21,15 @@ --bjs-font-family: var(--font-family); } + /* @camunda/improved-canvas restets */ + .djs-container.bio-improved-canvas { + background-color: var(--color-white); + } + + .bio-improved-canvas defs pattern circle { + fill: #ccc !important; + } + .djs-minimap { .toggle { diff --git a/client/src/app/tabs/bpmn/__tests__/BpmnEditorSpec.js b/client/src/app/tabs/bpmn/__tests__/BpmnEditorSpec.js index b4068d0fcd..b1d252680c 100644 --- a/client/src/app/tabs/bpmn/__tests__/BpmnEditorSpec.js +++ b/client/src/app/tabs/bpmn/__tests__/BpmnEditorSpec.js @@ -54,6 +54,8 @@ import { import { SlotFillRoot } from '../../../slot-fill'; +import Flags, { ENABLE_NEW_CONTEXT_PAD } from '../../../../util/Flags'; + const { spy } = sinon; @@ -2091,6 +2093,47 @@ describe('', function() { }); + + describe('new context pad', function() { + + beforeEach(function() { + Flags.reset(); + }); + + + it('should disable new context pad by default', async function() { + + // when + const { instance } = await renderEditor(diagramXML); + + // then + expect(instance).to.exist; + expect(instance.getModeler().options.resourceLinking).to.be.false; + expect(instance.getModeler().additionalModules).to.exist; + expect(instance.getModeler().additionalModules).to.have.length(0); + }); + + + it('should enable new context pad if enabled through flag', async function() { + + // when + Flags.init({ + [ ENABLE_NEW_CONTEXT_PAD ]: true + }); + + const { instance } = await renderEditor(diagramXML); + + console.log(instance.getModeler()); + + // then + expect(instance).to.exist; + expect(instance.getModeler().options.resourceLinking).to.be.false; + expect(instance.getModeler().additionalModules).to.exist; + expect(instance.getModeler().additionalModules).to.have.length(1); + }); + + }); + }); diff --git a/client/src/app/tabs/bpmn/modeler/BpmnModeler.js b/client/src/app/tabs/bpmn/modeler/BpmnModeler.js index f7e3f02d07..9be8f9a226 100644 --- a/client/src/app/tabs/bpmn/modeler/BpmnModeler.js +++ b/client/src/app/tabs/bpmn/modeler/BpmnModeler.js @@ -18,8 +18,6 @@ import handToolOnSpaceModule from './features/hand-tool-on-space'; import propertiesPanelKeyboardBindingsModule from './features/properties-panel-keyboard-bindings'; import lintingAnnotationsModule from '@camunda/linting/modeler'; -import Flags, { DISABLE_ADJUST_ORIGIN } from '../../../../util/Flags'; - import { BpmnJSTracking as bpmnJSTracking } from 'bpmn-js-tracking'; import contextPadTracking from 'bpmn-js-tracking/lib/features/context-pad'; @@ -28,22 +26,40 @@ import modelingTracking from 'bpmn-js-tracking/lib/features/modeling'; import popupMenuTracking from 'bpmn-js-tracking/lib/features/popup-menu'; import paletteTracking from 'bpmn-js-tracking/lib/features/palette'; +import { BpmnImprovedCanvasModule } from '@camunda/improved-canvas'; + +import Flags, { + DISABLE_ADJUST_ORIGIN, + ENABLE_NEW_CONTEXT_PAD +} from '../../../../util/Flags'; export default class PlatformBpmnModeler extends BpmnModeler { constructor(options = {}) { - const { - moddleExtensions, + let { + additionalModules = [], + moddleExtensions = {}, ...otherOptions } = options; + if (Flags.get(ENABLE_NEW_CONTEXT_PAD, false)) { + additionalModules = [ + ...additionalModules, + BpmnImprovedCanvasModule, + { + resourceLinkingContextPadProvider: [ 'value', null ], + resourceLinkingRules: [ 'value', null ], + showComments: [ 'value', null ] + } + ]; + } + super({ ...otherOptions, - disableAdjustOrigin: Flags.get(DISABLE_ADJUST_ORIGIN), - moddleExtensions: { - ...(moddleExtensions || {}) - } + additionalModules, + moddleExtensions, + disableAdjustOrigin: Flags.get(DISABLE_ADJUST_ORIGIN) }); } } diff --git a/client/src/app/tabs/cloud-bpmn/BpmnEditor.less b/client/src/app/tabs/cloud-bpmn/BpmnEditor.less index 82efca8db8..ba70794acb 100644 --- a/client/src/app/tabs/cloud-bpmn/BpmnEditor.less +++ b/client/src/app/tabs/cloud-bpmn/BpmnEditor.less @@ -16,11 +16,19 @@ } } - .bjs-container { --bjs-font-family: var(--font-family); } + /* @camunda/improved-canvas restets */ + .djs-container.bio-improved-canvas { + background-color: var(--color-white); + } + + .bio-improved-canvas defs pattern circle { + fill: #ccc !important; + } + .djs-minimap { .toggle { diff --git a/client/src/app/tabs/cloud-bpmn/__tests__/BpmnEditorSpec.js b/client/src/app/tabs/cloud-bpmn/__tests__/BpmnEditorSpec.js index 84cb8af73b..795ddaebec 100644 --- a/client/src/app/tabs/cloud-bpmn/__tests__/BpmnEditorSpec.js +++ b/client/src/app/tabs/cloud-bpmn/__tests__/BpmnEditorSpec.js @@ -52,6 +52,8 @@ import { import { SlotFillRoot } from '../../../slot-fill'; +import Flags, { ENABLE_NEW_CONTEXT_PAD } from '../../../../util/Flags'; + const { spy } = sinon; @@ -2012,6 +2014,47 @@ describe('cloud-bpmn - ', function() { }); + + describe('new context pad', function() { + + beforeEach(function() { + Flags.reset(); + }); + + + it('should disable new context pad by default', async function() { + + // when + const { instance } = await renderEditor(diagramXML); + + // then + expect(instance).to.exist; + expect(instance.getModeler().options.resourceLinking).to.be.false; + expect(instance.getModeler().additionalModules).to.exist; + expect(instance.getModeler().additionalModules).to.have.length(0); + }); + + + it('should enable new context pad if enabled through flag', async function() { + + // when + Flags.init({ + [ ENABLE_NEW_CONTEXT_PAD ]: true + }); + + const { instance } = await renderEditor(diagramXML); + + console.log(instance.getModeler()); + + // then + expect(instance).to.exist; + expect(instance.getModeler().options.resourceLinking).to.be.false; + expect(instance.getModeler().additionalModules).to.exist; + expect(instance.getModeler().additionalModules).to.have.length(1); + }); + + }); + }); diff --git a/client/src/app/tabs/cloud-bpmn/modeler/BpmnModeler.js b/client/src/app/tabs/cloud-bpmn/modeler/BpmnModeler.js index 85780b9183..614b4c1f5f 100644 --- a/client/src/app/tabs/cloud-bpmn/modeler/BpmnModeler.js +++ b/client/src/app/tabs/cloud-bpmn/modeler/BpmnModeler.js @@ -27,8 +27,11 @@ import modelingTracking from 'bpmn-js-tracking/lib/features/modeling'; import popupMenuTracking from 'bpmn-js-tracking/lib/features/popup-menu'; import paletteTracking from 'bpmn-js-tracking/lib/features/palette'; +import { BpmnImprovedCanvasModule } from '@camunda/improved-canvas'; + import Flags, { - DISABLE_ADJUST_ORIGIN + DISABLE_ADJUST_ORIGIN, + ENABLE_NEW_CONTEXT_PAD } from '../../../../util/Flags'; @@ -36,14 +39,28 @@ export default class CloudBpmnModeler extends BpmnModeler { constructor(options = {}) { - const { - moddleExtensions, + let { + additionalModules = [], + moddleExtensions = {}, ...otherOptions } = options; + if (Flags.get(ENABLE_NEW_CONTEXT_PAD, false)) { + additionalModules = [ + ...additionalModules, + BpmnImprovedCanvasModule, + { + resourceLinkingContextPadProvider: [ 'value', null ], + resourceLinkingRules: [ 'value', null ], + showComments: [ 'value', null ] + } + ]; + } + super({ ...otherOptions, - moddleExtensions: moddleExtensions || {}, + additionalModules, + moddleExtensions, disableAdjustOrigin: Flags.get(DISABLE_ADJUST_ORIGIN) }); } diff --git a/client/src/app/tabs/cloud-dmn/modeler/DmnModeler.js b/client/src/app/tabs/cloud-dmn/modeler/DmnModeler.js index edefb52d7e..86c199532a 100644 --- a/client/src/app/tabs/cloud-dmn/modeler/DmnModeler.js +++ b/client/src/app/tabs/cloud-dmn/modeler/DmnModeler.js @@ -18,7 +18,10 @@ import completeDirectEditingModule from '../../bpmn/modeler/features/complete-di import propertiesPanelKeyboardBindingsModule from '../../bpmn/modeler/features/properties-panel-keyboard-bindings'; import decisionTableKeyboardModule from '../../dmn/modeler/features/decision-table-keyboard'; -import Flags, { DISABLE_ADJUST_ORIGIN } from '../../../../util/Flags'; +import Flags, { + DISABLE_ADJUST_ORIGIN, + ENABLE_NEW_CONTEXT_PAD +} from '../../../../util/Flags'; import openDrgElementModule from '../../dmn/modeler/features/overview/open-drg-element'; import overviewRendererModule from '../../dmn/modeler/features/overview/overview-renderer'; @@ -26,6 +29,8 @@ import overviewRendererModule from '../../dmn/modeler/features/overview/overview import executionPlatformModule from '@camunda/execution-platform'; import modelerModdle from 'modeler-moddle/resources/dmn-modeler.json'; +import { DmnImprovedCanvasModule } from '@camunda/improved-canvas'; + const NOOP_MODULE = [ 'value', null ]; const poweredByModule = { @@ -44,7 +49,7 @@ export default class CamundaDmnModeler extends DmnModeler { const { moddleExtensions = {}, - drd: drdConfig, + drd, decisionTable, literalExpression, exporter, @@ -52,10 +57,14 @@ export default class CamundaDmnModeler extends DmnModeler { ...otherOptions } = options; - const drd = { - ...drdConfig, - disableAdjustOrigin: Flags.get(DISABLE_ADJUST_ORIGIN) - }; + let additionalModules = []; + + if (Flags.get(ENABLE_NEW_CONTEXT_PAD, false)) { + additionalModules = [ + ...additionalModules, + DmnImprovedCanvasModule + ]; + } super({ ...otherOptions, @@ -66,9 +75,13 @@ export default class CamundaDmnModeler extends DmnModeler { viewDrd: NOOP_MODULE } ]), - drd: mergeModules(drd, [ + drd: mergeModules({ + ...drd, + disableAdjustOrigin: Flags.get(DISABLE_ADJUST_ORIGIN) + }, [ propertiesPanelKeyboardBindingsModule, - executionPlatformModule + executionPlatformModule, + ...additionalModules ]), decisionTable: mergeModules(decisionTable, [ decisionTableKeyboardModule, diff --git a/client/src/app/tabs/dmn/DmnEditor.less b/client/src/app/tabs/dmn/DmnEditor.less index 40b03ecf1e..e96c2ab9a3 100644 --- a/client/src/app/tabs/dmn/DmnEditor.less +++ b/client/src/app/tabs/dmn/DmnEditor.less @@ -9,6 +9,15 @@ --drd-font-family-monospace: var(--font-family-monospace); } + /* @camunda/improved-canvas restets */ + .djs-container.bio-improved-canvas { + background-color: var(--color-white); + } + + .bio-improved-canvas defs pattern circle { + fill: #ccc !important; + } + .dmn-decision-table-container { --decision-table-font-family: var(--font-family); } diff --git a/client/src/app/tabs/dmn/modeler/DmnModeler.js b/client/src/app/tabs/dmn/modeler/DmnModeler.js index 4483e4381e..ee92655b31 100644 --- a/client/src/app/tabs/dmn/modeler/DmnModeler.js +++ b/client/src/app/tabs/dmn/modeler/DmnModeler.js @@ -18,7 +18,10 @@ import completeDirectEditingModule from '../../bpmn/modeler/features/complete-di import propertiesPanelKeyboardBindingsModule from '../../bpmn/modeler/features/properties-panel-keyboard-bindings'; import decisionTableKeyboardModule from './features/decision-table-keyboard'; -import Flags, { DISABLE_ADJUST_ORIGIN } from '../../../../util/Flags'; +import Flags, { + DISABLE_ADJUST_ORIGIN, + ENABLE_NEW_CONTEXT_PAD +} from '../../../../util/Flags'; import openDrgElementModule from './features/overview/open-drg-element'; import overviewRendererModule from './features/overview/overview-renderer'; @@ -26,6 +29,8 @@ import overviewRendererModule from './features/overview/overview-renderer'; import executionPlatformModule from '@camunda/execution-platform'; import modelerModdle from 'modeler-moddle/resources/dmn-modeler.json'; +import { DmnImprovedCanvasModule } from '@camunda/improved-canvas'; + const NOOP_MODULE = [ 'value', null ]; const poweredByModule = { @@ -44,7 +49,7 @@ export default class CamundaDmnModeler extends DmnModeler { const { moddleExtensions = {}, - drd: drdConfig, + drd, decisionTable, literalExpression, exporter, @@ -52,10 +57,14 @@ export default class CamundaDmnModeler extends DmnModeler { ...otherOptions } = options; - const drd = { - ...drdConfig, - disableAdjustOrigin: Flags.get(DISABLE_ADJUST_ORIGIN) - }; + let additionalModules = []; + + if (Flags.get(ENABLE_NEW_CONTEXT_PAD, false)) { + additionalModules = [ + ...additionalModules, + DmnImprovedCanvasModule + ]; + } super({ ...otherOptions, @@ -66,9 +75,13 @@ export default class CamundaDmnModeler extends DmnModeler { viewDrd: NOOP_MODULE } ]), - drd: mergeModules(drd, [ + drd: mergeModules({ + ...drd, + disableAdjustOrigin: Flags.get(DISABLE_ADJUST_ORIGIN) + }, [ propertiesPanelKeyboardBindingsModule, - executionPlatformModule + executionPlatformModule, + ...additionalModules ]), decisionTable: mergeModules(decisionTable, [ decisionTableKeyboardModule, diff --git a/client/src/util/Flags.js b/client/src/util/Flags.js index c8d5be81c3..c0bfc48a2b 100644 --- a/client/src/util/Flags.js +++ b/client/src/util/Flags.js @@ -50,4 +50,5 @@ export const CLOUD_ENGINE_VERSION = 'c8-engine-version'; export const PLATFORM_ENGINE_VERSION = 'c7-engine-version'; export const DISABLE_HTTL_HINT = 'disable-httl-hint'; export const DEFAULT_HTTL = 'default-httl'; +export const ENABLE_NEW_CONTEXT_PAD = 'enable-new-context-pad'; diff --git a/client/test/bpmn-io-modelers/dmn/DmnModelerSpec.js b/client/test/bpmn-io-modelers/dmn/DmnModelerSpec.js index 3dbc9e50a0..190fd8137f 100644 --- a/client/test/bpmn-io-modelers/dmn/DmnModelerSpec.js +++ b/client/test/bpmn-io-modelers/dmn/DmnModelerSpec.js @@ -17,6 +17,8 @@ import DrdViewer from '../../../src/app/tabs/dmn/modeler/DrdViewer'; import diagramXML from './diagram.dmn'; +import Flags, { ENABLE_NEW_CONTEXT_PAD } from '../../../src/util/Flags'; + const DEFAULT_OPTIONS = { exporter: { name: 'my-tool', @@ -420,6 +422,39 @@ describe('DmnModeler', function() { }); }); + + describe('new context pad', function() { + + beforeEach(function() { + Flags.reset(); + }); + + + it('should disable new context pad by default', async function() { + + // when + const modeler = await createModeler(); + + // then + expect(modeler.getActiveViewer().get('improvedCanvas', false)).not.to.exist; + }); + + + it('should enable new context pad if enabled through flag', async function() { + + // when + Flags.init({ + [ ENABLE_NEW_CONTEXT_PAD ]: true + }); + + const modeler = await createModeler(); + + // then + expect(modeler.getActiveViewer().get('improvedCanvas', false)).to.exist; + }); + + }); + }); // helpers ////////// diff --git a/client/test/mocks/bpmn-js/Modeler.js b/client/test/mocks/bpmn-js/Modeler.js index 86974c99b9..ef1ab542dc 100644 --- a/client/test/mocks/bpmn-js/Modeler.js +++ b/client/test/mocks/bpmn-js/Modeler.js @@ -105,6 +105,8 @@ export default class Modeler { this.modules = assign(this._getDefaultModules(options), options.modules || {}); + this.additionalModules = options.additionalModules || []; + this.xml = null; this.listeners = {}; diff --git a/resources/flags.json b/resources/flags.json index 0967ef424b..db7c56638d 100644 --- a/resources/flags.json +++ b/resources/flags.json @@ -1 +1,3 @@ -{} +{ + "enable-new-context-pad": true +}