From 0fd088c757379f6306dc6991c5c091dcbb33346b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 30 Jan 2020 08:06:23 +0000
Subject: [PATCH] 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>
---
 .../components/sql_part/sql_part_editor.ts    |  2 +-
 .../datasource/graphite/func_editor.ts        | 23 +++++++++++--------
 public/sass/components/_query_part.scss       |  8 +++++++
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/public/app/core/components/sql_part/sql_part_editor.ts b/public/app/core/components/sql_part/sql_part_editor.ts
index 7799537b0fc..2793f575c28 100644
--- a/public/app/core/components/sql_part/sql_part_editor.ts
+++ b/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 $paramLink = $('<a class="graphite-func-param-link pointer">' + paramValue + '</a>');
+          const $paramLink = $('<a class="query-part__link">' + paramValue + '</a>');
           const $input = $(paramTemplate);
 
           $paramLink.appendTo($paramsContainer);
diff --git a/public/app/plugins/datasource/graphite/func_editor.ts b/public/app/plugins/datasource/graphite/func_editor.ts
index 2b681ebe00f..c2e0e5777bf 100644
--- a/public/app/plugins/datasource/graphite/func_editor.ts
+++ b/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]);
-          const hasValue = paramValue !== null && paramValue !== undefined;
-
+          const hasValue = paramValue !== null && paramValue !== undefined && paramValue !== '';
           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) {
             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) {
             $('<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);
           $input.attr('placeholder', param.name);
 
@@ -232,7 +235,7 @@ export function graphiteFuncEditor($compile: any, templateSrv: TemplateSrv) {
           $scope.func.added = false;
           setTimeout(() => {
             elem
-              .find('.graphite-func-param-link')
+              .find('.query-part__link')
               .first()
               .click();
           }, 10);
diff --git a/public/sass/components/_query_part.scss b/public/sass/components/_query_part.scss
index e5ad043788f..f22e21b319c 100644
--- a/public/sass/components/_query_part.scss
+++ b/public/sass/components/_query_part.scss
@@ -15,3 +15,11 @@
     display: inline;
   }
 }
+
+.query-part__link {
+  cursor: pointer;
+
+  &--no-value {
+    color: $text-muted;
+  }
+}