Graphite: Fixed issue with functions with multiple required params and no…

Graphite: Fixed issue with functions with multiple required params and no defaults caused params that could not be edited (groupByNodes groupByTags) (#21814)

* Graphite: Fixed issue functions with multiple required params and no defaults

* removed some prev changes

* Update public/app/plugins/datasource/graphite/func_editor.ts

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

public/app/core/components/sql_part/sql_part_editor.ts

@@ -172,7 +172,7 @@ export function sqlPartEditorDirective(templateSrv: any) {
           }
           }
 
 
           const paramValue = templateSrv.highlightVariablesAsHtml(part.params[index]);
           const paramValue = templateSrv.highlightVariablesAsHtml(part.params[index]);
-          const $paramLink = $('<a class="graphite-func-param-link pointer">' + paramValue + '</a>');
+          const $paramLink = $('<a class="query-part__link">' + paramValue + '</a>');
           const $input = $(paramTemplate);
           const $input = $(paramTemplate);
 
 
           $paramLink.appendTo($paramsContainer);
           $paramLink.appendTo($paramsContainer);

public/app/plugins/datasource/graphite/func_editor.ts

@@ -184,24 +184,27 @@ export function graphiteFuncEditor($compile: any, templateSrv: TemplateSrv) {
           }
           }
 
 
           let paramValue = templateSrv.highlightVariablesAsHtml(func.params[index]);
           let paramValue = templateSrv.highlightVariablesAsHtml(func.params[index]);
-          const hasValue = paramValue !== null && paramValue !== undefined;
-
+          const hasValue = paramValue !== null && paramValue !== undefined && paramValue !== '';
           const last = index >= func.params.length - 1 && param.optional && !hasValue;
           const last = index >= func.params.length - 1 && param.optional && !hasValue;
+          let linkClass = 'query-part__link';
+
+          if (last) {
+            linkClass += ' query-part__last';
+          }
+
           if (last && param.multiple) {
           if (last && param.multiple) {
             paramValue = '+';
             paramValue = '+';
+          } else if (!hasValue) {
+            // for params with no value default to param name
+            paramValue = param.name;
+            linkClass += ' query-part__link--no-value';
           }
           }
 
 
           if (index > 0) {
           if (index > 0) {
             $('<span class="comma' + (last ? ' query-part__last' : '') + '">, </span>').appendTo(elem);
             $('<span class="comma' + (last ? ' query-part__last' : '') + '">, </span>').appendTo(elem);
           }
           }
 
 
-          const $paramLink = $(
-            '<a ng-click="" class="graphite-func-param-link' +
-              (last ? ' query-part__last' : '') +
-              '">' +
-              (hasValue ? paramValue : '&nbsp;') +
-              '</a>'
-          );
+          const $paramLink = $(`<a ng-click="" class="${linkClass}">${paramValue}</a>`);
           const $input = $(paramTemplate);
           const $input = $(paramTemplate);
           $input.attr('placeholder', param.name);
           $input.attr('placeholder', param.name);
 
 
@@ -232,7 +235,7 @@ export function graphiteFuncEditor($compile: any, templateSrv: TemplateSrv) {
           $scope.func.added = false;
           $scope.func.added = false;
           setTimeout(() => {
           setTimeout(() => {
             elem
             elem
-              .find('.graphite-func-param-link')
+              .find('.query-part__link')
               .first()
               .first()
               .click();
               .click();
           }, 10);
           }, 10);

public/sass/components/_query_part.scss

@@ -15,3 +15,11 @@
     display: inline;
     display: inline;
   }
   }
 }
 }
+
+.query-part__link {
+  cursor: pointer;
+
+  &--no-value {
+    color: $text-muted;
+  }
+}