Improve formula example display (baserow#4215)

* Improve formula display

* Move 'Example' to a localised string.

---------

Co-authored-by: peter_baserow <peter@baserow.io>

Author: jrmi

web-frontend/modules/core/components/nodeExplorer/NodeHelpTooltip.vue

@@ -18,16 +18,24 @@
           {{ node.description }}
         </p>
 
-        <div v-if="node.example" class="node-help-tooltip__example">
-          <div class="node-help-tooltip__example-code">
-            <FormulaInputField
-              :value="node.example"
-              :read-only="true"
-              :nodes-hierarchy="nodesHierarchy"
-              mode="advanced"
-            />
-          </div>
-        </div>
+        <FormGroup
+          v-if="node.example"
+          class="node-help-tooltip__example"
+          :label="$t('nodeHelpTooltip.exampleLabel')"
+          small-label
+          required
+          :helper-text="
+            $t('nodeHelpTooltip.result', { result: node.example.result })
+          "
+        >
+          <FormulaInputField
+            class="node-help-tooltip__example-code"
+            :value="node.example.formula"
+            :read-only="true"
+            :nodes-hierarchy="nodesHierarchy"
+            mode="advanced"
+          />
+        </FormGroup>
       </div>
     </div>
   </Context>

web-frontend/modules/core/locales/en.json

@@ -1075,6 +1075,10 @@
     "notAllowedTitle": "2FA not enabled",
     "notAllowedDescription": "Adding 2FA is only possible to password-based accounts."
   },
+  "nodeHelpTooltip": {
+    "exampleLabel": "Example",
+    "result": "Result: {result}"
+  },
   "enableWithQRCode": {
     "scanQRCode": "Scan QR code",
     "scanQRCodeDescription": "Scan the code with an app like Google Authenticator, Authy or Microsoft Authenticator.",