Skip to content

Commit

Permalink
feat: add incompatible state to properties panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@jarekdanielak
jarekdanielak committed Dec 9, 2024
1 parent df13d60 commit fd05d68
Show file tree
Hide file tree
Showing 5 changed files with 158 additions and 6 deletions.
15 changes: 10 additions & 5 deletions assets/element-templates.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,8 @@

.bio-properties-panel-template-update-available:last-child,
.bio-properties-panel-applied-template-button:last-child,
.bio-properties-panel-template-not-found:last-child {
.bio-properties-panel-template-not-found:last-child,
.bio-properties-panel-template-incompatible:last-child {
margin-right: 32px;
}

Expand All @@ -78,23 +79,27 @@
}


.bio-properties-panel-template-not-found .bio-properties-panel-group-header-button {
.bio-properties-panel-template-not-found .bio-properties-panel-group-header-button,
.bio-properties-panel-template-incompatible .bio-properties-panel-group-header-button {
background-color: var(--unknown-template-background-color);
color: var(--select-template-label-color);
fill: var(--select-template-fill-color);
}

.bio-properties-panel-template-not-found .bio-properties-panel-group-header-button:hover {
.bio-properties-panel-template-not-found .bio-properties-panel-group-header-button:hover,
.bio-properties-panel-template-incompatible .bio-properties-panel-group-header-button:hover {
background-color: var(--unknown-template-hover-background-color);
}

.bio-properties-panel-template-not-found-text,
.bio-properties-panel-template-update-available-text {
.bio-properties-panel-template-update-available-text,
.bio-properties-panel-template-incompatible-text {
color: var(--select-template-information-text-color);
}

.bio-properties-panel-template-not-found-text,
.bio-properties-panel-template-update-available-text,
.bio-properties-panel-deprecated-template-text {
.bio-properties-panel-deprecated-template-text,
.bio-properties-panel-template-incompatible-text {
width: 216px;
}
43 changes: 42 additions & 1 deletion src/components/ElementTemplatesGroup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,8 @@ function TemplateGroupButtons({ element, getTemplateId }) {
return <UnknownTemplate element={ element } />;
} else if (templateState.type === 'DEPRECATED_TEMPLATE') {
return <DeprecatedTemplate element={ element } templateState={ templateState } />;
} else if (templateState.type === 'INCOMPATIBLE_TEMPLATE') {
return <IncompatibleTemplate element={ element } />;
} else if (templateState.type === 'OUTDATED_TEMPLATE') {
return (
<OutdatedTemplate
Expand Down Expand Up @@ -320,6 +322,39 @@ function DocumentationIcon() {
</svg>;
}

function IncompatibleTemplate({ element }) {
const translate = useService('translate'),
elementTemplates = useService('elementTemplates');

const menuItems = [
{ entry: <IncompatibleText /> },
{ separator: true },
{ entry: translate('Unlink'), action: () => elementTemplates.unlinkTemplate(element) },
{ entry: <RemoveTemplate />, action: () => elementTemplates.removeTemplate(element) }
];

return (
<DropdownButton menuItems={ menuItems } class="bio-properties-panel-template-incompatible">
<HeaderButton>
<span>{ translate('Incompatible') }</span>
<ArrowIcon class="bio-properties-panel-arrow-down" />
</HeaderButton>
</DropdownButton>
);
}

function IncompatibleText() {
const translate = useService('translate');

return (
<div class="bio-properties-panel-template-incompatible-text">
{ translate(
'No compatible version of this template was found for your execution platform. Deploying and running with an incompatible template can cause errors during runtime. Unlink to access the data.'
) }
</div>
);
}


// helper //////

Expand Down Expand Up @@ -348,10 +383,16 @@ function getTemplateState(elementTemplates, element, getTemplateId) {
}

const newerTemplate = elementTemplates.getLatest(templateId, { deprecated: true })[0];
const isNewerCompatible = elementTemplates.isCompatible(newerTemplate);

if (newerTemplate !== template) {
if (newerTemplate !== template && isNewerCompatible) {
return { type: 'OUTDATED_TEMPLATE', template, newerTemplate };
}

const isCompatible = elementTemplates.isCompatible(template);
if (!isCompatible) {
return { type: 'INCOMPATIBLE_TEMPLATE', template };
}

return { type: 'KNOWN_TEMPLATE', template };
}
4 changes: 4 additions & 0 deletions test/spec/cloud-element-templates/properties-panel/ElementTemplatesPropertiesProvider.bpmn
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<bpmn:task id="Task_1" zeebe:modelerTemplate="foo" />
<bpmn:task id="Task_2" zeebe:modelerTemplate="foo" zeebe:modelerTemplateVersion="1" />
<bpmn:task id="Task_3" />
<bpmn:task id="Task_4" zeebe:modelerTemplate="engines" zeebe:modelerTemplateVersion="2" />
<bpmn:task id="UnknownTemplateTask" zeebe:modelerTemplate="unknown" />
<bpmn:serviceTask id="ServiceTask" zeebe:modelerTemplate="default" />
<bpmn:serviceTask id="Deprecated" name="Deprecated" zeebe:modelerTemplate="deprecated" />
Expand Down Expand Up @@ -46,6 +47,9 @@
<bpmndi:BPMNShape id="Event_1ffxuhh_di" bpmnElement="Event_18wfkz8">
<dc:Bounds x="302" y="492" width="36" height="36" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Activity_1m5dd19_di" bpmnElement="Task_4">
<dc:Bounds x="500" y="100" width="100" height="80" />
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>
33 changes: 33 additions & 0 deletions test/spec/cloud-element-templates/properties-panel/ElementTemplatesPropertiesProvider.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,5 +94,38 @@
}
}
]
},
{
"$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
"id": "engines",
"name":"Engines 1",
"version": 1,
"appliesTo": [ "bpmn:Task" ],
"engines": {
"camunda": "^8.4"
},
"properties": []
},
{
"$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
"id": "engines",
"name":"Engines 2",
"version": 2,
"appliesTo": [ "bpmn:Task" ],
"engines": {
"camunda": "^8.5"
},
"properties": []
},
{
"$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
"id": "engines",
"name":"Engines 3",
"version": 3,
"appliesTo": [ "bpmn:Task" ],
"engines": {
"camunda": "^8.6"
},
"properties": []
}
]
69 changes: 69 additions & 0 deletions .../spec/cloud-element-templates/properties-panel/ElementTemplatesPropertiesProvider.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -495,6 +495,75 @@ describe('provider/cloud-element-templates - ElementTemplatesPropertiesProvider'
);
});

describe('engines', function() {

it('should display update button if latest is compatible', inject(
async function(elementRegistry, selection, elementTemplates) {

// given
const element = elementRegistry.get('Task_4');

// when
elementTemplates.setEngines({
camunda: '8.6'
});

await act(() => {
selection.select(element);
});

// then
const updateAvailable = domQuery('.bio-properties-panel-template-update-available', container);
expect(updateAvailable).to.exist;
})
);


it('should NOT display update button if latest is incompatible', inject(
async function(elementRegistry, selection, elementTemplates) {

// given
const element = elementRegistry.get('Task_4');

// when
elementTemplates.setEngines({
camunda: '8.5'
});

await act(() => {
selection.select(element);
});

// then
const updateAvailable = domQuery('.bio-properties-panel-template-update-available', container);
expect(updateAvailable).not.to.exist;
})
);


it('should display incompatible button when template is incompatible', inject(
async function(elementRegistry, selection, elementTemplates) {

// given
const element = elementRegistry.get('Task_4');

// when
elementTemplates.setEngines({
camunda: '8.0'
});

await act(() => {
selection.select(element);
});

// then
const incompatible = domQuery('.bio-properties-panel-template-incompatible', container);
expect(incompatible).to.exist;
})
);

});


describe('conditional entries', function() {

Expand Down

0 comments on commit fd05d68

Please sign in to comment.