feat(FeelPopup): link to learning resources

related to camunda/camunda-modeler#3929

src/assets/properties-panel.css

@@ -1271,18 +1271,21 @@ 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) {
   padding-top: 0;
 }
 
 .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%;

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 }

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';
+export { default as FeelIcon } from './Feel.svg';
+export { default as HelpIcon } from './help.svg';

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