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>

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>

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>

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;