From 393711c3a18b4e0bdca7810c2ed6cd74d649e9cb Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Wed, 6 Dec 2023 19:17:01 -0600
Subject: [PATCH] Transformations: Add (base field name) to Join transformer
 (#79192)

---
 .../transformers/editors/JoinByFieldTransformerEditor.tsx   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/app/features/transformers/editors/JoinByFieldTransformerEditor.tsx b/public/app/features/transformers/editors/JoinByFieldTransformerEditor.tsx
index 348dcfcc78c..5fa4d148a60 100644
--- a/public/app/features/transformers/editors/JoinByFieldTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/JoinByFieldTransformerEditor.tsx
@@ -11,9 +11,9 @@ import {
 import { JoinByFieldOptions, JoinMode } from '@grafana/data/src/transformations/transformers/joinByField';
 import { getTemplateSrv } from '@grafana/runtime';
 import { Select, InlineFieldRow, InlineField } from '@grafana/ui';
+import { useFieldDisplayNames, useSelectOptions } from '@grafana/ui/src/components/MatchersUI/utils';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
-import { useAllFieldNamesFromDataFrames } from '../utils';
 
 const modes = [
   {
@@ -32,7 +32,9 @@ const modes = [
 ];
 
 export function SeriesToFieldsTransformerEditor({ input, options, onChange }: TransformerUIProps<JoinByFieldOptions>) {
-  const fieldNames = useAllFieldNamesFromDataFrames(input).map((item: string) => ({ label: item, value: item }));
+  const names = useFieldDisplayNames(input);
+  const fieldNames = useSelectOptions(names);
+
   const variables = getTemplateSrv()
     .getVariables()
     .map((v) => {