From c4500438a46f4350374c8150fede8b5f75c07e1b Mon Sep 17 00:00:00 2001
From: Alexa V <239999+axelavargas@users.noreply.github.com>
Date: Thu, 29 Sep 2022 12:13:07 +0200
Subject: [PATCH] Variable: Limit variable name to 50 characters (#55406)

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Co-authored-by: kay delaney <kay@grafana.com>
---
 .../app/features/variables/editor/VariableEditorEditor.tsx  | 6 ++++--
 public/app/features/variables/editor/VariableTextField.tsx  | 3 +++
 public/app/features/variables/editor/types.ts               | 4 ++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/public/app/features/variables/editor/VariableEditorEditor.tsx b/public/app/features/variables/editor/VariableEditorEditor.tsx
index c427b483630..f1887042616 100644
--- a/public/app/features/variables/editor/VariableEditorEditor.tsx
+++ b/public/app/features/variables/editor/VariableEditorEditor.tsx
@@ -26,7 +26,7 @@ import { VariableTextField } from './VariableTextField';
 import { VariableTypeSelect } from './VariableTypeSelect';
 import { VariableValuesPreview } from './VariableValuesPreview';
 import { changeVariableName, variableEditorMount, variableEditorUnMount } from './actions';
-import { OnPropChangeArguments } from './types';
+import { OnPropChangeArguments, VariableNameConstraints } from './types';
 
 const mapStateToProps = (state: StoreState, ownProps: OwnProps) => ({
   editor: getVariablesState(ownProps.identifier.rootStateKey, state).editor,
@@ -149,8 +149,10 @@ export class VariableEditorEditorUnConnected extends PureComponent<Props> {
                   onChange={this.onNameChange}
                   name="Name"
                   placeholder="name"
-                  required
                   testId={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalNameInputV2}
+                  maxLength={VariableNameConstraints.MaxSize}
+                  required
+                  tooltip="Variable name cannot be longer than 50 characters"
                 />
                 <VariableTypeSelect onChange={this.onTypeChange} type={this.props.variable.type} />
               </InlineFieldRow>
diff --git a/public/app/features/variables/editor/VariableTextField.tsx b/public/app/features/variables/editor/VariableTextField.tsx
index 05b3a4a92a2..782c96502fa 100644
--- a/public/app/features/variables/editor/VariableTextField.tsx
+++ b/public/app/features/variables/editor/VariableTextField.tsx
@@ -15,6 +15,7 @@ interface VariableTextFieldProps {
   grow?: boolean;
   onBlur?: (event: FormEvent<HTMLInputElement>) => void;
   interactive?: boolean;
+  maxLength?: number;
 }
 
 export function VariableTextField({
@@ -30,6 +31,7 @@ export function VariableTextField({
   tooltip,
   grow,
   interactive,
+  maxLength,
 }: PropsWithChildren<VariableTextFieldProps>): ReactElement {
   return (
     <InlineField interactive={interactive} label={name} labelWidth={labelWidth ?? 12} tooltip={tooltip} grow={grow}>
@@ -43,6 +45,7 @@ export function VariableTextField({
         onBlur={onBlur}
         width={grow ? undefined : width ?? 25}
         data-testid={testId}
+        maxLength={maxLength}
         required={required}
       />
     </InlineField>
diff --git a/public/app/features/variables/editor/types.ts b/public/app/features/variables/editor/types.ts
index 419ab1be7db..fa86b3111ae 100644
--- a/public/app/features/variables/editor/types.ts
+++ b/public/app/features/variables/editor/types.ts
@@ -1,5 +1,9 @@
 import { VariableModel } from '../types';
 
+export enum VariableNameConstraints {
+  MaxSize = 50,
+}
+
 export interface OnPropChangeArguments<Model extends VariableModel = VariableModel> {
   propName: keyof Model;
   propValue: any;