From 918d870fd044506a27a1bc59b2a2cf1996b8262d Mon Sep 17 00:00:00 2001
From: Martin Stamm <martin.stamm@camunda.com>
Date: Wed, 18 Oct 2023 14:28:24 +0200
Subject: [PATCH] feat(FeelPopup): link to learning resources

related to https://github.com/camunda/camunda-modeler/issues/3929
---
 src/assets/properties-panel.css          | 19 ++++++++++--
 src/components/entries/FEEL/FeelPopup.js | 26 +++++++++++++++-
 src/components/icons/help.svg            |  1 +
 src/components/icons/index.js            |  3 +-
 test/spec/components/FeelPopup.spec.js   | 38 ++++++++++++++++++++++++
 5 files changed, 83 insertions(+), 4 deletions(-)
 create mode 100644 src/components/icons/help.svg

diff --git a/src/assets/properties-panel.css b/src/assets/properties-panel.css
index aa15754c..4101c238 100644
--- a/src/assets/properties-panel.css
+++ b/src/assets/properties-panel.css
@@ -1271,6 +1271,8 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-popup .bio-properties-panel-popup__footer {
   padding: 12px;
   display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .bio-properties-panel-popup .bio-properties-panel-popup__body:not(:first-child) {
@@ -1278,11 +1280,12 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-popup .bio-properties-panel-popup__header {
+  --popup-header-line-height: 16px;
   background-color: var(--popup-header-background-color);
   margin: 0;
   font-size: 12px;
   font-weight: 400;
-  line-height: 16px;
+  line-height: var(--popup-header-line-height);
   text-align: left;
   color: var(--popup-title-color);
 }
@@ -1310,7 +1313,7 @@ textarea.bio-properties-panel-input {
   text-transform: capitalize;
 }
 
-.bio-properties-panel-popup .bio-properties-panel-popup__header svg {
+.bio-properties-panel-popup .bio-properties-panel-popup__header .bio-properties-panel-popup__drag-handle svg {
   margin-left: -4px;
 }
 
@@ -1341,6 +1344,18 @@ textarea.bio-properties-panel-input {
   width: 100%;
 }
 
+.bio-properties-panel-feel-popup__title-link {
+  margin-left: auto; 
+  display: flex;
+}
+
+.bio-properties-panel-feel-popup__title-link svg {
+  width: var(--popup-header-line-height);
+  height: var(--popup-header-line-height);
+  fill: currentColor;
+  margin: 0 0.5em;
+}
+
 .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container {
   display: flex;
   min-width: 100%;
diff --git a/src/components/entries/FEEL/FeelPopup.js b/src/components/entries/FEEL/FeelPopup.js
index cbd4eba8..6725ce74 100644
--- a/src/components/entries/FEEL/FeelPopup.js
+++ b/src/components/entries/FEEL/FeelPopup.js
@@ -14,6 +14,7 @@ import { Popup } from '../../Popup';
 import CodeEditor from './FeelEditor';
 
 import TemplatingEditor from '../templating/TemplatingEditor';
+import { HelpIcon } from '../../icons';
 
 export const FEEL_POPUP_WIDTH = 700;
 export const FEEL_POPUP_HEIGHT = 250;
@@ -179,6 +180,14 @@ function FeelPopupComponent(props) {
     return () => emit('close', { domNode: popupRef.current });
   }, []);
 
+  useEffect(() => {
+
+    // Set focus on editor when popup is opened
+    if (editorRef.current) {
+      editorRef.current.focus();
+    }
+  }, [ editorRef ]);
+
   return (
     <Popup
       container={ container }
@@ -200,7 +209,22 @@ function FeelPopupComponent(props) {
       <Popup.Title
         title={ title }
         emit={ emit }
-        draggable />
+        draggable>
+        {type === 'feel' && (
+          <a href="https://docs.camunda.io/docs/components/modeler/feel/what-is-feel/" target="_blank" class="bio-properties-panel-feel-popup__title-link">
+            Learn FEEL expressions
+            <HelpIcon />
+          </a>
+        )
+        }
+        {type === 'feelers' && (
+          <a href="https://docs.camunda.io/docs/components/modeler/forms/configuration/forms-config-templating-syntax/" target="_blank" class="bio-properties-panel-feel-popup__title-link">
+            Learn templating
+            <HelpIcon />
+          </a>
+        )
+        }
+      </Popup.Title>
       <Popup.Body>
         <div
           onKeyDownCapture={ onKeyDownCapture }
diff --git a/src/components/icons/help.svg b/src/components/icons/help.svg
new file mode 100644
index 00000000..2f0ca40d
--- /dev/null
+++ b/src/components/icons/help.svg
@@ -0,0 +1 @@
+<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.cls-1{fill:none;}</style></defs><title>help</title><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"/><circle cx="16" cy="23.5" r="1.5"/><path d="M17,8H15.5A4.49,4.49,0,0,0,11,12.5V13h2v-.5A2.5,2.5,0,0,1,15.5,10H17a2.5,2.5,0,0,1,0,5H15v4.5h2V17a4.5,4.5,0,0,0,0-9Z"/><rect class="cls-1" width="32" height="32"/></svg>
\ No newline at end of file
diff --git a/src/components/icons/index.js b/src/components/icons/index.js
index 06db5aee..9c41c547 100644
--- a/src/components/icons/index.js
+++ b/src/components/icons/index.js
@@ -3,4 +3,5 @@ export { default as CreateIcon } from './Create.svg';
 export { default as DeleteIcon } from './Delete.svg';
 export { default as DragIcon } from './Drag.svg';
 export { default as ExternalLinkIcon } from './ExternalLink.svg';
-export { default as FeelIcon } from './Feel.svg';
\ No newline at end of file
+export { default as FeelIcon } from './Feel.svg';
+export { default as HelpIcon } from './help.svg';
\ No newline at end of file
diff --git a/test/spec/components/FeelPopup.spec.js b/test/spec/components/FeelPopup.spec.js
index 4960b4e8..5b9cfb50 100644
--- a/test/spec/components/FeelPopup.spec.js
+++ b/test/spec/components/FeelPopup.spec.js
@@ -412,6 +412,25 @@ describe('<FeelPopup>', function() {
     });
 
 
+    it('should link to <feel> documentation', async function() {
+
+      // given
+      createFeelPopup({ type: 'feel' }, container);
+
+      const childComponent = domQuery('.child-component', container);
+      const btn = domQuery('button', childComponent);
+
+      // when
+      await act(() => {
+        btn.click();
+      });
+
+      // then
+      const link = domQuery('.bio-properties-panel-feel-popup__title-link', document.body);
+      expect(link).to.exist;
+    });
+
+
     it('should focus <feel> editor', async function() {
 
       // given
@@ -568,6 +587,25 @@ describe('<FeelPopup>', function() {
     });
 
 
+    it('should link to <feelers> documentation', async function() {
+
+      // given
+      createFeelPopup({ type: 'feelers' }, container);
+
+      const childComponent = domQuery('.child-component', container);
+      const btn = domQuery('button', childComponent);
+
+      // when
+      await act(() => {
+        btn.click();
+      });
+
+      // then
+      const link = domQuery('.bio-properties-panel-feel-popup__title-link', document.body);
+      expect(link).to.exist;
+    });
+
+
     it('should focus <feelers> editor', async function() {
 
       // given