Allow variable names with underscores (#162208)

Closes #162205

## Summary

With this PR, users will be able to define variables with names
containing underscores (`_`) like the below picture.


![image](d6aa0b4c-0c12-4fe7-ab3f-da0aa5cc8862)


### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/console/public/application/components/variables/utils.test.ts

@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { isValidVariableName } from './utils';
+
+describe('utils', () => {
+  describe('isValidVariableName', () => {
+    it('returns `false` to `null`', () => {
+      // @ts-ignore passing a wrong type intentionally
+      expect(isValidVariableName(null)).toBe(false);
+    });
+
+    it('returns `false` to empty string', () => {
+      expect(isValidVariableName('')).toBe(false);
+    });
+
+    it('returns `false` to space string', () => {
+      expect(isValidVariableName(' ')).toBe(false);
+    });
+
+    it('returns `false` to integer zero', () => {
+      // @ts-ignore passing a wrong type intentionally
+      expect(isValidVariableName(0)).toBe(false);
+    });
+
+    it('returns `false` to float zero', () => {
+      // @ts-ignore passing a wrong type intentionally
+      expect(isValidVariableName(0.0)).toBe(false);
+    });
+
+    it('returns `true` to string zero', () => {
+      expect(isValidVariableName('0')).toBe(true);
+    });
+
+    it('returns `true` to allowed styles', () => {
+      for (const name of ['camelCase', 'snake_case', 'PascalCase', 'MACRO_CASE']) {
+        expect(isValidVariableName(name)).toBe(true);
+      }
+    });
+
+    it('returns `false` to disallowed styles', () => {
+      for (const name of ['kebab-case', 'COBOL-CASE', 'dot.notation', 'bracket[notation]']) {
+        expect(isValidVariableName(name)).toBe(false);
+      }
+    });
+
+    it('returns `true` to underscores prefix & suffix', () => {
+      expect(isValidVariableName('__name__')).toBe(true);
+    });
+
+    it('returns `true` to numbers prefix & suffix', () => {
+      expect(isValidVariableName('00name00')).toBe(true);
+    });
+  });
+});

src/plugins/console/public/application/components/variables/utils.ts

@@ -37,3 +37,12 @@ export const generateEmptyVariableField = (): DevToolsVariable => ({
   name: '',
   value: '',
 });
+
+export const isValidVariableName = (name: string) => {
+  /*
+   * MUST avoid characters that get URL-encoded, because they'll result in unusable variable names.
+   * Common variable names consist of letters, digits, and underscores and do not begin with a digit.
+   * However, the ones beginning with a digit are still allowed here for backward compatibility.
+   */
+  return typeof name === 'string' && name.match(/^[a-zA-Z0-9_]+$/g) !== null;
+};

src/plugins/console/public/application/components/variables/variables_flyout.tsx

@@ -85,15 +85,14 @@ export const DevToolsVariablesFlyout = (props: DevToolsVariablesFlyoutProps) =>
         defaultMessage: 'Variable name',
       }),
       render: (name, { id }) => {
-        // Avoid characters that get URL-encoded, because they'll result in unusable variable names.
-        const isInvalid = name && !name.match(/^[a-zA-Z0-9]+$/g);
+        const isInvalid = !utils.isValidVariableName(name);
         return (
           <EuiFormRow
             isInvalid={isInvalid}
             error={[
               <FormattedMessage
                 id="console.variablesPage.variablesTable.variableInputError.validCharactersText"
-                defaultMessage="Only letters and numbers are allowed"
+                defaultMessage="Only letters, numbers and underscores are allowed"
               />,
             ]}
             fullWidth={true}