From 3ad49d68f5f939cb942651ab338b1f8f1153ee84 Mon Sep 17 00:00:00 2001
From: Katarzyna Ziomek-Zdanowicz <katarzyna.ziomek-zdanowicz@fluxninja.com>
Date: Wed, 15 Mar 2023 16:25:30 +0100
Subject: [PATCH 1/2] 8822 Remove dashes from dashboard filter labels

---
 .../variables/pickers/PickerRenderer.tsx      | 44 +++++++++++++++++--
 1 file changed, 40 insertions(+), 4 deletions(-)

diff --git a/public/app/features/variables/pickers/PickerRenderer.tsx b/public/app/features/variables/pickers/PickerRenderer.tsx
index 2b33434da3b06..8e3e27a9aa350 100644
--- a/public/app/features/variables/pickers/PickerRenderer.tsx
+++ b/public/app/features/variables/pickers/PickerRenderer.tsx
@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+import { isString,  isFunction } from 'lodash';
 import React, { CSSProperties, FunctionComponent, PropsWithChildren, ReactElement, useMemo } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
@@ -10,6 +11,7 @@ import type { StoreState } from 'app/types';
 
 import { variableAdapters } from '../adapters';
 import { VariableHide, VariableModel } from '../types';
+import { FnLoggerService } from 'app/fn_logger';
 
 interface Props {
   variable: VariableModel;
@@ -58,9 +60,14 @@ const COMMON_PICKER_LABEL_STYLE: CSSProperties = {
 };
 
 function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | null {
-  const labelOrName = useMemo(() => variable.label || variable.name, [variable]);
   const { FNDashboard, mode } = useSelector<StoreState, FnGlobalState>(({ fnGlobalState }) => fnGlobalState);
 
+  const labelOrName = useMemo(() => {
+    const value = variable.label || variable.name;
+
+    return FNDashboard ? transformFnLabel(value) : value;
+  }, [variable, FNDashboard]);
+
   const fnLabelStyle = useMemo(
     () => ({
       ...COMMON_PICKER_LABEL_STYLE,
@@ -77,9 +84,9 @@ function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | nul
   if (variable.hide !== VariableHide.dontHide) {
     return null;
   }
-  const fnLabelOrName = FNDashboard ? labelOrName.replace('druid_adhoc_filters', 'ad-hoc') : labelOrName;
 
   const elementId = `var-${variable.id}`;
+
   if (variable.description) {
     return (
       <Tooltip content={variable.description} placement={'bottom'}>
@@ -89,11 +96,12 @@ function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | nul
           data-testid={selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName)}
           htmlFor={elementId}
         >
-          {fnLabelOrName}
+          {labelOrName}
         </label>
       </Tooltip>
     );
   }
+
   return (
     <label
       className="gf-form-label gf-form-label--variable"
@@ -101,7 +109,35 @@ function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | nul
       data-testid={selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName)}
       htmlFor={elementId}
     >
-      {fnLabelOrName}
+      {labelOrName}
     </label>
   );
 }
+
+
+
+const TRANSFORMERS =  new Map<string | RegExp, string | ((value: string) => string)>([
+  ['druid_adhoc_filters', "ad-hoc filter" ],
+  [/\_/g, " "],
+  ['lowerCase', (value: string) => value.toLowerCase() ],
+])
+
+function transformFnLabel(label: unknown, value = {current: label}) {
+  if (!isString(label)) {
+    FnLoggerService.warn(null, "Label is not a string.", {label})
+    return label
+  }
+
+  if (!label) {
+    return label
+  }
+
+
+ TRANSFORMERS.forEach(( replaceValue: string | ((value: string) => string), searchValue: string|RegExp) => {
+  value.current = isFunction(replaceValue) ? replaceValue(value.current) :`${ value.current}`.replace(searchValue, replaceValue)
+})
+
+return value.current
+
+
+}
\ No newline at end of file

From 30e06594b75f3cd7c719f6fa23a38b41a96e68c1 Mon Sep 17 00:00:00 2001
From: Katarzyna Ziomek-Zdanowicz <katarzyna.ziomek-zdanowicz@fluxninja.com>
Date: Thu, 16 Mar 2023 10:24:11 +0100
Subject: [PATCH 2/2] 8822 Empty commit