From f7a6a333e143d86d8b3a5af59898ccc4588f5a51 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Wed, 10 Mar 2021 17:51:20 +0000
Subject: [PATCH] Show context store name on TypedInput flow/global types Fixes
 #2793

---
 .../src/js/ui/common/typedInput.js            | 71 +++++++++++++------
 1 file changed, 49 insertions(+), 22 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js
index 8a1fdb81c..1b5af5f13 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js
@@ -32,6 +32,21 @@
             return v;
         }
     }
+    var contextLabel =  function(container,value) {
+        var that = this;
+        container.css("pointer-events","none");
+        container.css("flex-grow",0);
+        container.css("position",'relative');
+        container.css("overflow",'visible');
+        $('<div></div>').text(value).css({
+            position: "absolute",
+            bottom:"-2px",
+            right: "5px",
+            "font-size": "0.7em",
+            opacity: 0.3
+        }).appendTo(container);
+        this.elementDiv.show();
+    }
     var mapDeprecatedIcon = function(icon) {
         if (/^red\/images\/typedInput\/.+\.png$/.test(icon)) {
             icon = icon.replace(/.png$/,".svg");
@@ -44,13 +59,15 @@
             options:[],
             validate:RED.utils.validatePropertyExpression,
             parse: contextParse,
-            export: contextExport
+            export: contextExport,
+            valueLabel: contextLabel
         },
         global: {value:"global",label:"global.",hasValue:true,
             options:[],
             validate:RED.utils.validatePropertyExpression,
             parse: contextParse,
-            export: contextExport
+            export: contextExport,
+            valueLabel: contextLabel
         },
         str: {value:"str",label:"string",icon:"red/images/typedInput/az.svg"},
         num: {value:"num",label:"number",icon:"red/images/typedInput/09.svg",validate:/^[+-]?[0-9]*\.?[0-9]*([eE][-+]?[0-9]+)?$/},
@@ -592,34 +609,43 @@
         _updateOptionSelectLabel: function(o) {
             var opt = this.typeMap[this.propertyType];
             this.optionSelectLabel.empty();
+            if (opt.hasValue) {
+                this.valueLabelContainer.empty();
+                this.valueLabelContainer.show();
+            } else {
+                this.valueLabelContainer.hide();
+            }
             if (this.typeMap[this.propertyType].valueLabel) {
                 if (opt.multiple) {
-                    this.typeMap[this.propertyType].valueLabel.call(this,this.optionSelectLabel,o);
+                    this.typeMap[this.propertyType].valueLabel.call(this,opt.hasValue?this.valueLabelContainer:this.optionSelectLabel,o);
                 } else {
-                    this.typeMap[this.propertyType].valueLabel.call(this,this.optionSelectLabel,o.value);
+                    this.typeMap[this.propertyType].valueLabel.call(this,opt.hasValue?this.valueLabelContainer:this.optionSelectLabel,o.value);
                 }
-            } else if (!opt.multiple) {
-                if (o.icon) {
-                    if (o.icon.indexOf("<") === 0) {
-                        $(o.icon).prependTo(this.optionSelectLabel);
-                    } else if (o.icon.indexOf("/") !== -1) {
-                        // url
-                        $('<img>',{src:mapDeprecatedIcon(o.icon),style:"height: 18px;"}).prependTo(this.optionSelectLabel);
+            }
+            if (!this.typeMap[this.propertyType].valueLabel || opt.hasValue) {
+                if (!opt.multiple) {
+                    if (o.icon) {
+                        if (o.icon.indexOf("<") === 0) {
+                            $(o.icon).prependTo(this.optionSelectLabel);
+                        } else if (o.icon.indexOf("/") !== -1) {
+                            // url
+                            $('<img>',{src:mapDeprecatedIcon(o.icon),style:"height: 18px;"}).prependTo(this.optionSelectLabel);
+                        } else {
+                            // icon class
+                            $('<i>',{class:"red-ui-typedInput-icon "+o.icon}).prependTo(this.optionSelectLabel);
+                        }
+                    } else if (o.label) {
+                        this.optionSelectLabel.text(o.label);
                     } else {
-                        // icon class
-                        $('<i>',{class:"red-ui-typedInput-icon "+o.icon}).prependTo(this.optionSelectLabel);
+                        this.optionSelectLabel.text(o.value);
+                    }
+                    if (opt.hasValue) {
+                        this.optionValue = o.value;
+                        this.input.trigger('change',[this.propertyType,this.value()]);
                     }
-                } else if (o.label) {
-                    this.optionSelectLabel.text(o.label);
                 } else {
-                    this.optionSelectLabel.text(o.value);
+                    this.optionSelectLabel.text(o.length+" selected");
                 }
-                if (opt.hasValue) {
-                    this.optionValue = o.value;
-                    this.input.trigger('change',[this.propertyType,this.value()]);
-                }
-            } else {
-                this.optionSelectLabel.text(o.length+" selected");
             }
         },
         _destroy: function() {
@@ -893,6 +919,7 @@
                             // Reset any CSS the custom label may have set
                             this.valueLabelContainer.css("pointer-events","");
                             this.valueLabelContainer.css("flex-grow",1);
+                            this.valueLabelContainer.css("overflow","hidden");
                             this.valueLabelContainer.show();
                             this.valueLabelContainer.empty();
                             this.elementDiv.hide();