add syntax-highlight directive

awx/ui/client/lib/components/index.js

@@ -42,6 +42,7 @@ import toolbar from '~components/list/list-toolbar.directive';
 import topNavItem from '~components/layout/top-nav-item.directive';
 import truncate from '~components/truncate/truncate.directive';
 import atCodeMirror from '~components/code-mirror';
+import atSyntaxHighlight from '~components/syntax-highlight';
 import card from '~components/cards/card.directive';
 import cardGroup from '~components/cards/group.directive';
 import atSwitch from '~components/switch/switch.directive';
@@ -54,7 +55,8 @@ const MODULE_NAME = 'at.lib.components';
 angular
     .module(MODULE_NAME, [
         atLibServices,
-        atCodeMirror
+        atCodeMirror,
+        atSyntaxHighlight,
     ])
     .directive('atActionGroup', actionGroup)
     .directive('atActionButton', actionButton)

awx/ui/client/lib/components/syntax-highlight/index.js

@@ -0,0 +1,10 @@
+// import 'codemirror/mode/jinja2/jinja2';
+import syntaxHighlight from './syntax-highlight.directive';
+// import strings from './syntax-highlight.strings';
+
+const MODULE_NAME = 'at.syntax.highlight';
+
+angular.module(MODULE_NAME, [])
+    .directive('atSyntaxHighlight', syntaxHighlight);
+
+export default MODULE_NAME;

awx/ui/client/lib/components/syntax-highlight/syntax-highlight.directive.js

@@ -0,0 +1,83 @@
+const templateUrl = require('~components/syntax-highlight/syntax-highlight.partial.html');
+
+function atSyntaxHighlightController ($scope, AngularCodeMirror) {
+    const vm = this;
+    const variablesName = `${$scope.name}_codemirror`;
+
+    function init () {
+        if ($scope.disabled === 'true') {
+            $scope.disabled = true;
+        } else if ($scope.disabled === 'false') {
+            $scope.disabled = false;
+        }
+        // TODO: get default value
+        $scope.codeMirrorValue = $scope.codeMirrorValue || '';
+        $scope.parseType = 'jinja2';
+
+        $scope.variablesName = variablesName;
+        $scope[variablesName] = $scope.codeMirrorValue;
+        const codeMirror = AngularCodeMirror($scope.disabled);
+        codeMirror.addModes({
+            jinja2: {
+                mode: 'text/x-jinja2',
+                matchBrackets: true,
+                autoCloseBrackets: true,
+                styleActiveLine: true,
+                lineNumbers: true,
+                gutters: ['CodeMirror-lint-markers'],
+                lint: true,
+                scrollbarStyle: null,
+            }
+        });
+        // codeMirror.fromTextArea(document.getElementById(`${$scope.name}_codemirror`));
+        codeMirror.showTextArea({
+            scope: $scope,
+            model: variablesName,
+            element: `${$scope.name}_codemirror`,
+            lineNumbers: true,
+            mode: 'jinja2',
+        });
+
+        $scope.$watch(variablesName, () => {
+            $scope.codeMirrorValue = $scope[variablesName];
+        });
+    }
+
+    vm.name = $scope.name;
+    vm.variablesName = variablesName;
+    vm.parseType = $scope.parseType;
+    if ($scope.init) {
+        $scope.init = init;
+    }
+    angular.element(document).ready(() => {
+        init();
+    });
+}
+
+atSyntaxHighlightController.$inject = [
+    '$scope',
+    'AngularCodeMirror'
+];
+
+function atCodeMirrorTextarea () {
+    return {
+        restrict: 'E',
+        replace: true,
+        transclude: true,
+        templateUrl,
+        controller: atSyntaxHighlightController,
+        controllerAs: 'vm',
+        scope: {
+            disabled: '@',
+            label: '@',
+            labelClass: '@',
+            tooltip: '@',
+            tooltipPlacement: '@',
+            variables: '=',
+            name: '@',
+            init: '='
+        }
+    };
+}
+
+export default atCodeMirrorTextarea;

awx/ui/client/lib/components/syntax-highlight/syntax-highlight.partial.html

@@ -0,0 +1,30 @@
+<div>
+    <div class="atCodeMirror-label">
+        <div class="atCodeMirror-labelLeftSide">
+             <span class="atCodeMirror-labelText" ng-class="labelClass">
+                    {{  label || vm.strings.get('code_mirror.label.VARIABLES') }}
+                </span>
+             <a id=""
+                href=""
+                aw-pop-over="{{ tooltip || vm.strings.get('code_mirror.tooltip.TOOLTIP') }}"
+                data-placement="{{ tooltipPlacement || 'top' }}"
+                data-container="body"
+                over-title="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
+                class="help-link"
+                data-original-title="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
+                title="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
+                tabindex="-1"
+                ng-if="tooltip">
+                 <i class="fa fa-question-circle"></i>
+             </a>
+        </div>
+    </div>
+    <textarea
+        ng-disabled="disabled"
+        rows="6"
+        ng-model="codeMirrorValue"
+        name="{{ vm.name }}_codemirror"
+        class="form-control Form-textArea"
+        id="{{ vm.name }}_codemirror">
+    </textarea>
+</div>

awx/ui/client/src/notifications/notificationTemplates.form.js

@@ -591,9 +591,9 @@ export default ['i18n', function(i18n) {
             start_message: {
                 label: i18n._('Start Message'),
                 class: 'Form-formGroup--fullWidth',
-                type: 'text',
+                type: 'syntax_highlight',
                 default: '',
-                ngShow: "customize_messages",
+                ngShow: "true || customize_messages",
             },
             start_body: {
                 label: i18n._('Start Body'),

awx/ui/client/src/shared/form-generator.js

@@ -1359,6 +1359,18 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += '></at-code-mirror>';
                     }
 
+                    if (field.type === 'syntax_highlight') {
+                        html += '<at-syntax-highlight ';
+                        html += `id="${form.name}_${fld}" `;
+                        html += `class="${field.class}" `;
+                        html += `label="${field.label}" `;
+                        html += `tooltip="${field.awPopOver}" `;
+                        html += `name="${fld}" `;
+                        html += `variables="${field.variables}" `;
+                        html += `ng-disabled="${field.ngDisabled}" `;
+                        html += '></at-syntax-highlight>';
+                    }
+
                     if (field.type === 'custom') {
                         let labelOptions = {};
 

awx/ui/client/src/shared/parse/parse-type-change.factory.js

@@ -1,6 +1,7 @@
 import 'codemirror/lib/codemirror.js';
 import 'codemirror/mode/javascript/javascript.js';
 import 'codemirror/mode/yaml/yaml.js';
+import 'codemirror/mode/jinja2/jinja2.js';
 import 'codemirror/addon/lint/lint.js';
 import 'angular-codemirror/lib/yaml-lint.js';
 import 'codemirror/addon/edit/closebrackets.js';

awx/ui/client/src/vendor.js

@@ -72,3 +72,4 @@ require('ng-toast');
 require('lr-infinite-scroll');
 require('codemirror/mode/yaml/yaml');
 require('codemirror/mode/javascript/javascript');
+require('codemirror/mode/jinja2/jinja2');