Merge branch 'main' of https://github.com/grafana/grafana into kristina/config-query-mapping

public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx

@@ -10,10 +10,12 @@ import {
   TransformerCategory,
 } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { fieldMatchersUI, InlineField, InlineFieldRow, Select, useStyles2 } from '@grafana/ui';
+import { Checkbox, fieldMatchersUI, InlineField, InlineFieldRow, Select, useStyles2 } from '@grafana/ui';
+//import { FieldNamePicker } from '@grafana/ui/internal';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
 import { FieldToConfigMappingEditor } from '../fieldToConfigMapping/FieldToConfigMappingEditor';
+import { configMapHandlers } from '../fieldToConfigMapping/fieldToConfigMapping';
 import darkImage from '../images/dark/configFromData.svg';
 import lightImage from '../images/light/configFromData.svg';
 
@@ -85,6 +87,13 @@ export function ConfigFromQueryTransformerEditor({ input, onChange, options }: P
             onChange={onMatcherConfigChange}
           />
         </InlineField>
+        <InlineField>
+          <Checkbox
+            label={t('transformers.config-from-query-transformer-editor.label-mapping', 'Map results')}
+            onChange={(evt) => onChange({ ...options, isDisplayNameMapping: evt.currentTarget.checked })}
+            value={options.isDisplayNameMapping}
+          />
+        </InlineField>
       </InlineFieldRow>
       <InlineFieldRow>
         {configFrame && (
@@ -92,7 +101,12 @@ export function ConfigFromQueryTransformerEditor({ input, onChange, options }: P
             frame={configFrame}
             mappings={options.mappings}
             onChange={(mappings) => onChange({ ...options, mappings })}
-            withReducers
+            withReducers={!options.isDisplayNameMapping}
+            configOverride={
+              options.isDisplayNameMapping
+                ? configMapHandlers.filter((cmh) => cmh.key === 'mappings.value' || cmh.key === 'mappings.text')
+                : undefined
+            }
           />
         )}
       </InlineFieldRow>

public/app/features/transformers/configFromQuery/configFromQuery.ts

@@ -22,6 +22,7 @@ export interface ConfigFromQueryTransformOptions {
   configRefId?: string;
   mappings: FieldToConfigMapping[];
   applyTo?: MatcherConfig;
+  isDisplayNameMapping?: boolean;
 }
 
 export function extractConfigFromQuery(options: ConfigFromQueryTransformOptions, data: DataFrame[]) {
@@ -73,6 +74,27 @@ export function extractConfigFromQuery(options: ConfigFromQueryTransformOptions,
     for (const field of frame.fields) {
       if (matcher(field, frame, data)) {
         const dataConfig = getFieldConfigFromFrame(reducedConfigFrame, 0, mappingResult);
+
+        if (options.isDisplayNameMapping) {
+          const nameFrame = data.find((d) => d.refId === options.configRefId);
+          const mappingValueName = options.mappings.find(
+            (mapping) => mapping.handlerKey === 'mappings.value'
+          )?.fieldName;
+          const mappingTextName = options.mappings.find((mapping) => mapping.handlerKey === 'mappings.text')?.fieldName;
+          if (nameFrame && mappingValueName !== undefined && mappingTextName !== undefined) {
+            const mapValueField = nameFrame.fields.find((frameNameField) => frameNameField.name === mappingValueName);
+            const mapTextField = nameFrame.fields.find((field) => field.name === mappingTextName);
+            const keyIndex = mapValueField?.values.indexOf(field.name) ?? -1;
+            if (keyIndex !== -1 && mapTextField !== undefined) {
+              const newDisplayName = mapTextField.values[keyIndex];
+              // only add the property if a new name
+              if (newDisplayName !== undefined) {
+                dataConfig.displayName = newDisplayName;
+              }
+            }
+          }
+        }
+
         outputFrame.fields.push({
           ...field,
           config: {

public/app/features/transformers/fieldToConfigMapping/FieldToConfigMappingEditor.tsx

@@ -25,14 +25,22 @@ export interface Props {
   onChange: (mappings: FieldToConfigMapping[]) => void;
   withReducers?: boolean;
   withNameAndValue?: boolean;
+  configOverride?: FieldToConfigMapHandler[];
 }
 
-export function FieldToConfigMappingEditor({ frame, mappings, onChange, withReducers, withNameAndValue }: Props) {
+export function FieldToConfigMappingEditor({
+  frame,
+  mappings,
+  onChange,
+  withReducers,
+  withNameAndValue,
+  configOverride,
+}: Props) {
   const styles = useStyles2(getStyles);
   const rows = getViewModelRows(frame, mappings, withNameAndValue);
-  const configProps = configMapHandlers.map((def) => configHandlerToSelectOption(def, false)) as Array<
+  const configProps = (configOverride ?? configMapHandlers).map((def) =>
-    SelectableValue<string>
+    configHandlerToSelectOption(def, false)
-  >;
+  ) as Array<SelectableValue<string>>;
   const hasAdditionalSettings = mappings.reduce(
     (prev, mapping) => prev || createsArgumentsEditor(mapping.handlerKey),
     false