[Feature] add Affix (Prefix/Suffix) formatting option to Format String transformation

packages/grafana-data/src/transformations/transformers/formatString.ts

@@ -18,6 +18,7 @@ export enum FormatStringOutput {
   KebabCase = 'Kebab Case',
   Trim = 'Trim',
   Substring = 'Substring',
+  Affix = 'Affix'
 }
 
 export interface FormatStringTransformerOptions {
@@ -25,6 +26,8 @@ export interface FormatStringTransformerOptions {
   substringStart: number;
   substringEnd: number;
   outputFormat: FormatStringOutput;
+  stringPrefix: string;
+  stringSuffix: string;
 }
 
 const splitToCapitalWords = (input: string) => {
@@ -60,6 +63,8 @@ export const getFormatStringFunction = (options: FormatStringTransformerOptions)
           return value.trim();
         case FormatStringOutput.Substring:
           return value.substring(options.substringStart, options.substringEnd);
+        case FormatStringOutput.Affix:
+          return (options.stringPrefix ?? "") + value + (options.stringSuffix ?? "");          
       }
     });
 };

public/app/core/components/OptionsUI/string.tsx

@@ -6,9 +6,10 @@ import { Input, TextArea } from '@grafana/ui';
 
 interface Props extends StandardEditorProps<string, StringFieldConfigSettings> {
   suffix?: ReactNode;
+  preserveWhitespace?: boolean;
 }
 
-export const StringValueEditor = ({ value, onChange, item, suffix }: Props) => {
+export const StringValueEditor = ({ value, onChange, item, suffix, preserveWhitespace}: Props) => {
   const Component = item.settings?.useTextarea ? TextArea : Input;
   const onValueChange = useCallback(
     (
@@ -20,18 +21,18 @@ export const StringValueEditor = ({ value, onChange, item, suffix }: Props) => {
       if ('key' in e) {
         // handling keyboard event
         if (e.key === 'Enter' && !item.settings?.useTextarea) {
-          nextValue = e.currentTarget.value.trim();
+          nextValue = (preserveWhitespace ?? false) ? e.currentTarget.value : e.currentTarget.value.trim();
         }
       } else {
         // handling blur event
-        nextValue = e.currentTarget.value.trim();
+        nextValue = (preserveWhitespace ?? false) ? e.currentTarget.value : e.currentTarget.value.trim();
       }
       if (nextValue === value) {
         return; // no change
       }
       onChange(nextValue === '' ? undefined : nextValue);
     },
-    [value, item.settings?.useTextarea, onChange]
+    [value, item.settings?.useTextarea, onChange, preserveWhitespace]
   );
 
   return (

public/app/features/transformers/editors/FormatStringTransformerEditor.tsx

@@ -11,12 +11,14 @@ import {
   StandardEditorsRegistryItem,
   FieldNamePickerConfigSettings,
   TransformerCategory,
+  StringFieldConfigSettings,
 } from '@grafana/data';
 import { FormatStringOutput, FormatStringTransformerOptions } from '@grafana/data/internal';
 import { t } from '@grafana/i18n';
 import { Select, InlineFieldRow, InlineField } from '@grafana/ui';
 import { FieldNamePicker } from '@grafana/ui/internal';
 import { NumberInput } from 'app/core/components/OptionsUI/NumberInput';
+import { StringValueEditor } from 'app/core/components/OptionsUI/string';
 
 import darkImage from '../images/dark/formatString.svg';
 import lightImage from '../images/light/formatString.svg';
@@ -86,8 +88,32 @@ function FormatStringTransfomerEditor({
     [onChange, options]
   );
 
+  const onPrefixChange = useCallback(
+    (value?: string) => {
+      onChange({
+        ...options,
+        stringPrefix: value ?? '',
+      });
+    },
+    [onChange, options]
+  );
+
+  const onSuffixChange = useCallback(
+    (value?: string) => {
+      onChange({
+        ...options,
+        stringSuffix: value ?? '',
+      });
+    },
+    [onChange, options]
+  );
+
   const ops = Object.values(FormatStringOutput).map((value) => ({ label: value, value }));
 
+  const dummyStringSettings = {
+    settings: {},
+  } as StandardEditorsRegistryItem<string, StringFieldConfigSettings>;
+
   return (
     <>
       <InlineFieldRow>
@@ -118,6 +144,29 @@ function FormatStringTransfomerEditor({
           </InlineField>
         </InlineFieldRow>
       )}
+      {options.outputFormat === FormatStringOutput.Affix && (
+        <InlineFieldRow>
+          <InlineField label={t('transformers.format-string-transfomer-editor.label-prefix', 'Prefix')} labelWidth={15}>
+            <StringValueEditor
+              context={{ data: input }}
+              value={options.stringPrefix ?? ''} 
+              onChange={onPrefixChange} 
+              item={dummyStringSettings}
+              preserveWhitespace={true}
+              />
+          </InlineField>
+
+          <InlineField label={t('transformers.format-string-transfomer-editor.label-suffix', 'Suffix')} labelWidth={15}>
+            <StringValueEditor
+              context={{ data: input }}
+              value={options.stringSuffix ?? ''} 
+              onChange={onSuffixChange} 
+              item={dummyStringSettings}
+              preserveWhitespace={true}
+              />              
+          </InlineField>
+        </InlineFieldRow>
+      )}      
     </>
   );
 }

public/locales/en-US/grafana.json

@@ -13052,7 +13052,9 @@
       },
       "label-field": "Field",
       "label-format": "Format",
-      "label-substring-range": "Substring range"
+      "label-substring-range": "Substring range",
+      "label-substring-prefix": "Prefix",
+      "label-substring-suffix": "Suffix"
     },
     "format-string-transformer-editor": {
       "description": {