feat: visually show deprecated templates

closes #11

assets/element-templates.css

@@ -1,4 +1,6 @@
 .bio-properties-panel {
+  --color-grey-225-10-50: hsl(225, 10%, 50%);
+
   --select-template-background-color: var(--color-blue-205-100-50);
   --select-template-hover-background-color: var(--color-blue-205-100-45);
   --select-template-fill-color: var(--color-white);
@@ -8,6 +10,9 @@
   --unknown-template-hover-background-color: var(--color-red-360-100-40);
 
   --select-template-information-text-color: var(--color-grey-225-10-55);
+
+  --deprecated-template-hover-background-color: var(--color-grey-225-10-50);
+  --deprecated-template-background-color: var(--color-grey-225-10-55);
 }
 
 .bio-properties-panel-header-template-icon {
@@ -62,6 +67,17 @@
   color: var(--text-error-color);
 }
 
+.bio-properties-panel-deprecated-template-button .bio-properties-panel-group-header-button {
+  background-color: var(--deprecated-template-background-color);
+  color: var(--select-template-label-color);
+  fill: var(--select-template-fill-color);
+}
+
+.bio-properties-panel-deprecated-template-button:hover .bio-properties-panel-group-header-button:hover {
+  background-color: var(--deprecated-template-hover-background-color);
+}
+
+
 .bio-properties-panel-template-not-found .bio-properties-panel-group-header-button {
   background-color: var(--unknown-template-background-color);
   color: var(--select-template-label-color);
@@ -78,6 +94,7 @@
 }
 
 .bio-properties-panel-template-not-found-text,
-.bio-properties-panel-template-update-available-text {
+.bio-properties-panel-template-update-available-text,
+.bio-properties-panel-deprecated-template-text {
   width: 216px;
 }

src/element-templates/components/ElementTemplatesGroup.js

@@ -147,6 +147,8 @@ function TemplateGroupButtons({ element, getTemplateId }) {
     return <AppliedTemplate element={ element } />;
   } else if (templateState.type === 'UNKNOWN_TEMPLATE') {
     return <UnknownTemplate element={ element } />;
+  } else if (templateState.type === 'DEPRECATED_TEMPLATE') {
+    return <DeprecatedTemplate element={ element } templateState={ templateState } />;
   } else if (templateState.type === 'OUTDATED_TEMPLATE') {
     return (
       <OutdatedTemplate
@@ -275,6 +277,49 @@ function UpdateAvailableText({ newerTemplate }) {
   return <div class="bio-properties-panel-template-update-available-text">{text}</div>;
 }
 
+function DeprecatedTemplate({ element, templateState }) {
+  const { template } = templateState;
+
+  const translate = useService('translate'),
+        elementTemplates = useService('elementTemplates');
+
+  const menuItems = [
+    { entry: <DeprecationWarning template={ template } /> },
+    { separator: true },
+    { entry: translate('Unlink'), action: () => elementTemplates.unlinkTemplate(element) },
+    { entry: <RemoveTemplate />, action: () => elementTemplates.removeTemplate(element) }
+  ];
+
+  return (
+    <DropdownButton menuItems={ menuItems } class="bio-properties-panel-deprecated-template-button">
+      <HeaderButton>
+        <span>{ translate('Deprecated') }</span>
+        <ArrowIcon class="bio-properties-panel-arrow-down" />
+      </HeaderButton>
+    </DropdownButton>
+  );
+}
+
+function DeprecationWarning({ template }) {
+  const translate = useService('translate');
+
+  const {
+    message = translate('This template is deprecated.'),
+    documentationRef
+  } = template.deprecated;
+
+  return <div class="bio-properties-panel-deprecated-template-text">
+    {message}
+    {documentationRef && <>&nbsp;<a href={ documentationRef }><DocumentationIcon /></a></>}
+  </div>;
+}
+
+function DocumentationIcon() {
+  return <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.6368 10.6375V5.91761H11.9995V10.6382C11.9995 10.9973 11.8623 11.3141 11.5878 11.5885C11.3134 11.863 10.9966 12.0002 10.6375 12.0002H1.36266C0.982345 12.0002 0.660159 11.8681 0.396102 11.6041C0.132044 11.34 1.52588e-05 11.0178 1.52588e-05 10.6375V1.36267C1.52588e-05 0.98236 0.132044 0.660173 0.396102 0.396116C0.660159 0.132058 0.982345 2.95639e-05 1.36266 2.95639e-05H5.91624V1.36267H1.36266V10.6375H10.6368ZM12 0H7.2794L7.27873 1.36197H9.68701L3.06507 7.98391L4.01541 8.93425L10.6373 2.31231V4.72059H12V0Z" fill="#818798" />
+  </svg>;
+}
+
 
 // helper //////
 
@@ -298,6 +343,10 @@ function getTemplateState(elementTemplates, element, getTemplateId) {
     return { type: 'UNKNOWN_TEMPLATE', templateId };
   }
 
+  if (template.deprecated) {
+    return { type: 'DEPRECATED_TEMPLATE', template };
+  }
+
   const newerTemplate = elementTemplates.getLatest(templateId, { deprecated: true })[0];
 
   if (newerTemplate !== template) {

test/TestHelper.js

@@ -111,7 +111,7 @@ export function insertCoreStyles() {
 
   insertCSS(
     'element-templates.css',
-    require('bpmn-js-properties-panel/dist/assets/element-templates.css').default
+    require('../assets/element-templates.css').default
   );
 
   insertCSS(

test/spec/element-templates/ElementTemplatesPropertiesProvider.bpmn

@@ -16,6 +16,7 @@
       </bpmn:extensionElements>
     </bpmn:serviceTask>
     <bpmn:exclusiveGateway id="Gateway_1" />
+    <bpmn:serviceTask id="DeprecatedTemplateTask" camunda:modelerTemplate="deprecated" />
   </bpmn:process>
   <bpmn:error id="Error_error-1" name="error-name" errorCode="error-code" camunda:errorMessage="error-message" />
   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
@@ -41,6 +42,9 @@
       <bpmndi:BPMNShape id="Gateway_1l7vqgv_di" bpmnElement="Gateway_1" isMarkerVisible="true">
         <dc:Bounds x="295" y="215" width="50" height="50" />
       </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="BPMNShape_1e82w8j" bpmnElement="DeprecatedTemplateTask">
+        <dc:Bounds x="280" y="300" width="100" height="80" />
+      </bpmndi:BPMNShape>
     </bpmndi:BPMNPlane>
   </bpmndi:BPMNDiagram>
-</bpmn:definitions>
+</bpmn:definitions>

test/spec/element-templates/ElementTemplatesPropertiesProvider.spec.js

@@ -134,6 +134,30 @@ describe('provider/element-templates - ElementTemplates', function() {
         expect(updateAvailable).not.to.exist;
       })
     );
+
+
+    it('should display deprecation info if template is deprecated', inject(
+      async function(elementRegistry, selection) {
+
+        // given
+        const element = elementRegistry.get('DeprecatedTemplateTask');
+
+        // when
+        await act(() => {
+          selection.select(element);
+        });
+
+        // then
+        const deprecatedButton = domQuery('.bio-properties-panel-deprecated-template-button', container);
+        const deprecationInfo = domQuery('.bio-properties-panel-deprecated-template-text', container);
+        const deprecationDocs = domQuery('a', deprecationInfo);
+
+        expect(deprecatedButton).to.exist;
+        expect(deprecationInfo).to.exist;
+        expect(deprecationDocs).to.exist;
+      })
+    );
+
   });
 
 
@@ -470,6 +494,7 @@ describe('provider/element-templates - ElementTemplates', function() {
       })
     );
   });
+
 });