From 04d857dfe6ca4ca943306919e093208cc655754f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Wed, 25 Nov 2020 10:21:48 +0100
Subject: [PATCH] Variables: Adds description field  (#29332)

* Variables: Adds description field

* Refactor: Adds new Form components

* Refactor: Fixes aria labels

* Refactor: removes skipped tests

* Refactor: Breaks out smaller select components

* Refactor: removes gf-form div

* Refactor: Breaks up several more selects into smaller components

* Chore: Fixes typings
---
 e2e/suite1/specs/queryVariableCrud.spec.ts    | 710 ------------------
 .../src/components/Forms/InlineFieldRow.tsx   |   3 +-
 .../variables/adhoc/AdHocVariableEditor.tsx   |  54 +-
 .../constant/ConstantVariableEditor.tsx       |  33 +-
 .../variables/custom/CustomVariableEditor.tsx |  51 +-
 .../datasource/DataSourceVariableEditor.tsx   | 108 ++-
 .../editor/LegacyVariableQueryEditor.tsx      |  32 +-
 .../editor/SelectionOptionsEditor.tsx         |  64 +-
 .../variables/editor/VariableEditorEditor.tsx | 159 ++--
 .../variables/editor/VariableHideSelect.tsx   |  31 +
 .../editor/VariableSectionHeader.tsx          |  24 +
 .../variables/editor/VariableSelectField.tsx  |  53 ++
 .../variables/editor/VariableSwitchField.tsx  |  39 +
 .../editor/VariableTextAreaField.tsx          |  79 ++
 .../variables/editor/VariableTextField.tsx    |  47 ++
 .../variables/editor/VariableTypeSelect.tsx   |  28 +
 .../editor/VariableValuesPreview.tsx          |  81 +-
 public/app/features/variables/guard.ts        |  10 +
 .../interval/IntervalVariableEditor.tsx       | 123 ++-
 .../variables/pickers/PickerRenderer.tsx      |  43 +-
 .../query/QueryVariableDatasourceSelect.tsx   |  28 +
 .../variables/query/QueryVariableEditor.tsx   | 230 ++----
 .../query/QueryVariableRefreshSelect.tsx      |  32 +
 .../query/QueryVariableSortSelect.tsx         |  36 +
 .../features/variables/query/actions.test.ts  |   1 +
 .../app/features/variables/state/helpers.ts   |   2 +
 .../variables/state/sharedReducer.test.ts     |  10 +
 .../textbox/TextBoxVariableEditor.tsx         |  30 +-
 public/app/features/variables/types.ts        |   2 +
 29 files changed, 868 insertions(+), 1275 deletions(-)
 delete mode 100644 e2e/suite1/specs/queryVariableCrud.spec.ts
 create mode 100644 public/app/features/variables/editor/VariableHideSelect.tsx
 create mode 100644 public/app/features/variables/editor/VariableSectionHeader.tsx
 create mode 100644 public/app/features/variables/editor/VariableSelectField.tsx
 create mode 100644 public/app/features/variables/editor/VariableSwitchField.tsx
 create mode 100644 public/app/features/variables/editor/VariableTextAreaField.tsx
 create mode 100644 public/app/features/variables/editor/VariableTextField.tsx
 create mode 100644 public/app/features/variables/editor/VariableTypeSelect.tsx
 create mode 100644 public/app/features/variables/query/QueryVariableDatasourceSelect.tsx
 create mode 100644 public/app/features/variables/query/QueryVariableRefreshSelect.tsx
 create mode 100644 public/app/features/variables/query/QueryVariableSortSelect.tsx

diff --git a/e2e/suite1/specs/queryVariableCrud.spec.ts b/e2e/suite1/specs/queryVariableCrud.spec.ts
deleted file mode 100644
index 808de6adbeb..00000000000
--- a/e2e/suite1/specs/queryVariableCrud.spec.ts
+++ /dev/null
@@ -1,710 +0,0 @@
-import { e2e } from '@grafana/e2e';
-
-// skipped scenario helper because of some perf issue upgrading cypress to 4.5.0 and splitted the whole test into smaller
-// several it functions. Very important to keep the order of these it functions because they have dependency in the order
-// https://github.com/cypress-io/cypress/issues/5987
-// https://github.com/cypress-io/cypress/issues/6023#issuecomment-574031655
-describe.skip('Variables', () => {
-  let lastUid = '';
-  let lastData = '';
-  let variables: VariablesData[] = [
-    { name: 'query1', query: '*', label: 'query1-label', options: ['All', 'A', 'B', 'C'], selectedOption: 'A' },
-    {
-      name: 'query2',
-      query: '$query1.*',
-      label: 'query2-label',
-      options: ['All', 'AA', 'AB', 'AC'],
-      selectedOption: 'AA',
-    },
-    {
-      name: 'query3',
-      query: '$query1.$query2.*',
-      label: 'query3-label',
-      options: ['All', 'AAA', 'AAB', 'AAC'],
-      selectedOption: 'AAA',
-    },
-  ];
-
-  beforeEach(() => {
-    e2e.flows.login('admin', 'admin');
-    if (!lastUid || !lastData) {
-      e2e.flows.addDataSource();
-      e2e.flows.addDashboard();
-      lastUid = 'test';
-      lastData = 'test';
-    } else {
-      e2e.flows.openDashboard();
-    }
-  });
-
-  it(`asserts defaults`, () => {
-    e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click();
-    e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click();
-    e2e.pages.Dashboard.Settings.Variables.List.addVariableCTA().click();
-
-    assertDefaultsForNewVariable();
-  });
-
-  variables.forEach((variable, index) => {
-    it(`creates variable ${variable.name}`, () => {
-      e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click();
-      e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click();
-
-      if (index === 0) {
-        e2e.pages.Dashboard.Settings.Variables.List.addVariableCTA().click();
-      } else {
-        e2e.pages.Dashboard.Settings.Variables.List.newButton().click();
-      }
-
-      const { name, label, query, options, selectedOption } = variable;
-      e2e.getScenarioContext().then(({ lastAddedDataSource }: any) => {
-        createQueryVariable({
-          dataSourceName: lastAddedDataSource,
-          name,
-          label,
-          query,
-          options,
-          selectedOption,
-        });
-      });
-
-      e2e.pages.Dashboard.Settings.General.saveDashBoard()
-        .should('be.visible')
-        .click();
-      e2e.pages.SaveDashboardModal.save()
-        .should('be.visible')
-        .click();
-      e2e.flows.assertSuccessNotification();
-
-      e2e.components.BackButton.backArrow()
-        .should('be.visible')
-        .click();
-    });
-  });
-
-  it(`asserts submenus`, () => {
-    assertVariableLabelsAndComponents(variables);
-  });
-
-  it(`asserts variable table`, () => {
-    e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings')
-      .should('be.visible')
-      .click();
-    e2e.pages.Dashboard.Settings.General.sectionItems('Variables')
-      .should('be.visible')
-      .click();
-
-    assertVariableTable(variables);
-  });
-
-  it(`asserts variable selects`, () => {
-    assertSelects(variables);
-  });
-
-  it(`asserts duplicate variable`, () => {
-    // mutates variables
-    variables = assertDuplicateItem(variables);
-    e2e.flows.saveDashboard();
-  });
-
-  it(`asserts delete variable`, () => {
-    // mutates variables
-    variables = assertDeleteItem(variables);
-    e2e.flows.saveDashboard();
-  });
-
-  it(`asserts update variable`, () => {
-    // mutates variables
-    variables = assertUpdateItem(variables);
-    e2e.components.BackButton.backArrow()
-      .should('be.visible')
-      .should('be.visible')
-      .click();
-    e2e.flows.saveDashboard();
-  });
-
-  it(`asserts move variable down`, () => {
-    e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings')
-      .should('be.visible')
-      .click();
-    e2e.pages.Dashboard.Settings.General.sectionItems('Variables')
-      .should('be.visible')
-      .click();
-
-    // mutates variables
-    variables = assertMoveDownItem(variables);
-    e2e.flows.saveDashboard();
-  });
-
-  it(`asserts move variable up`, () => {
-    e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings')
-      .should('be.visible')
-      .click();
-    e2e.pages.Dashboard.Settings.General.sectionItems('Variables')
-      .should('be.visible')
-      .click();
-
-    // mutates variables
-    assertMoveUpItem(variables);
-  });
-});
-
-interface VariablesData {
-  name: string;
-  query: string;
-  label: string;
-  options: string[];
-  selectedOption: string;
-}
-
-interface CreateQueryVariableArguments extends VariablesData {
-  dataSourceName: string;
-}
-
-const assertDefaultsForNewVariable = () => {
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().within(input => {
-    expect(input.attr('placeholder')).equals('name');
-    expect(input.val()).equals('');
-  });
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect().within(select => {
-    e2e()
-      .get('option:selected')
-      .should('have.text', 'Query');
-  });
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput().within(input => {
-    expect(input.attr('placeholder')).equals('optional display name');
-    expect(input.val()).equals('');
-  });
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.generalHideSelect().within(select => {
-    e2e()
-      .get('option:selected')
-      .should('have.text', '');
-  });
-
-  e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect().within(select => {
-    e2e()
-      .get('option:selected')
-      .should('have.text', '');
-  });
-
-  e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput().should('not.exist');
-  e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRefreshSelect().within(select => {
-    e2e()
-      .get('option:selected')
-      .should('have.text', 'Never');
-  });
-  e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInput().within(input => {
-    expect(input.attr('placeholder')).equals('/.*-(.*)-.*/');
-    expect(input.val()).equals('');
-  });
-  e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelect().within(select => {
-    e2e()
-      .get('option:selected')
-      .should('have.text', 'Disabled');
-  });
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch().within(select => {
-    e2e()
-      .get('input')
-      .should('not.be.checked');
-  });
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch().within(select => {
-    e2e()
-      .get('input')
-      .should('not.be.checked');
-  });
-  e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.valueGroupsTagsEnabledSwitch().within(select => {
-    e2e()
-      .get('input')
-      .should('not.be.checked');
-  });
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().should('not.exist');
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput().should('not.exist');
-};
-
-const createQueryVariable = ({ name, label, dataSourceName, query }: CreateQueryVariableArguments) => {
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().should('be.visible');
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().type(name);
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput().type(label);
-  e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect()
-    .select(`${dataSourceName}`)
-    .blur();
-  e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput()
-    .type(query)
-    .blur();
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().should('exist');
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch()
-    .click()
-    .within(() => {
-      e2e()
-        .get('input')
-        .should('be.checked');
-    });
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch()
-    .click()
-    .within(() => {
-      e2e()
-        .get('input')
-        .should('be.checked');
-    });
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput().within(input => {
-    expect(input.attr('placeholder')).equals('blank = auto');
-    expect(input.val()).equals('');
-  });
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
-};
-
-const assertVariableLabelAndComponent = ({ label, options, selectedOption }: VariablesData) => {
-  e2e.pages.Dashboard.SubMenu.submenuItemLabels(label).should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(selectedOption)
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown().should('be.visible');
-  for (let optionIndex = 0; optionIndex < options.length; optionIndex++) {
-    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts(options[optionIndex]).should('be.visible');
-  }
-};
-
-const assertVariableLabelsAndComponents = (args: VariablesData[]) => {
-  e2e.pages.Dashboard.SubMenu.submenuItem().should('have.length', args.length);
-  for (let index = 0; index < args.length; index++) {
-    e2e.pages.Dashboard.SubMenu.submenuItem()
-      .eq(index)
-      .within(() => {
-        e2e()
-          .get('label')
-          .contains(args[index].name);
-      });
-    assertVariableLabelAndComponent(args[index]);
-  }
-};
-
-const assertVariableTableRow = ({ name, query }: VariablesData, index: number, length: number) => {
-  e2e.pages.Dashboard.Settings.Variables.List.tableRowNameFields(name)
-    .should('exist')
-    .contains(name);
-  e2e.pages.Dashboard.Settings.Variables.List.tableRowDefinitionFields(name)
-    .should('exist')
-    .contains(query);
-  if (index !== length - 1) {
-    e2e.pages.Dashboard.Settings.Variables.List.tableRowArrowDownButtons(name).should('exist');
-  }
-  if (index !== 0) {
-    e2e.pages.Dashboard.Settings.Variables.List.tableRowArrowUpButtons(name).should('exist');
-  }
-  e2e.pages.Dashboard.Settings.Variables.List.tableRowDuplicateButtons(name).should('exist');
-  e2e.pages.Dashboard.Settings.Variables.List.tableRowRemoveButtons(name).should('exist');
-};
-
-const assertVariableTable = (args: VariablesData[]) => {
-  e2e.pages.Dashboard.Settings.Variables.List.table()
-    .should('be.visible')
-    .within(() => {
-      e2e()
-        .get('tbody > tr')
-        .should('have.length', args.length);
-    });
-
-  for (let index = 0; index < args.length; index++) {
-    assertVariableTableRow(args[index], index, args.length);
-  }
-};
-
-const assertSelects = (variables: VariablesData[]) => {
-  // Values in submenus should be
-  // query1: [A] query2: [AA] query3: [AAA]
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A')
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('A')
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('B')
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.Toolbar.navBar().click();
-  // Values in submenus should be
-  // query1: [B] query2: [All] query3: [All]
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All')
-    .should('be.visible')
-    .should('have.length', 2);
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All')
-    .eq(0)
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BA').should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BB').should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BC').should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BB')
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.Toolbar.navBar()
-    .should('be.visible')
-    .click();
-  // Values in submenus should be
-  // query1: [B] query2: [BB] query3: [All]
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All')
-    .should('be.visible')
-    .should('have.length', 1);
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All')
-    .eq(0)
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BBA').should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BBB').should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BBC').should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BBB')
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.Toolbar.navBar()
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All').should('have.length', 0);
-  // Values in submenus should be
-  // query1: [B] query2: [BB] query3: [BBB]
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('BB')
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BA').should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BB').should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BC').should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BC')
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.Toolbar.navBar()
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('BB + BC')
-    .should('be.visible')
-    .should('have.length', 1);
-  // Values in submenus should be
-  // query1: [B] query2: [BB + BC] query3: [BBB]
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('BBB')
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BBA').should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BBB').should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BBC').should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BCA').should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BCB').should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BCC').should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BCC')
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.Toolbar.navBar()
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('BBB + BCC')
-    .should('be.visible')
-    .should('have.length', 1);
-  // Values in submenus should be
-  // query1: [B] query2: [BB + BC] query3: [BBB + BCC]
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('BB + BC')
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BA').should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BB').should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BC').should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BA')
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BB')
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BC')
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.Toolbar.navBar()
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('BA')
-    .should('be.visible')
-    .should('have.length', 1);
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All')
-    .should('be.visible')
-    .should('have.length', 1);
-  // Values in submenus should be
-  // query1: [B] query2: [BA] query3: [All]
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('B')
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('A')
-    .should('be.visible')
-    .should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('B')
-    .should('be.visible')
-    .should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('C')
-    .should('be.visible')
-    .should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('A')
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('B')
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.Toolbar.navBar()
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A')
-    .should('be.visible')
-    .should('have.length', 1);
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All')
-    .should('be.visible')
-    .should('have.length', 2);
-  // Values in submenus should be
-  // query1: [A] query2: [All] query3: [All]
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All')
-    .eq(0)
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AA')
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.Toolbar.navBar()
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A')
-    .should('be.visible')
-    .should('have.length', 1);
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('AA')
-    .should('be.visible')
-    .should('have.length', 1);
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All')
-    .should('be.visible')
-    .should('have.length', 1);
-  // Values in submenus should be
-  // query1: [A] query2: [AA] query3: [All]
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All')
-    .eq(0)
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AAA')
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.Toolbar.navBar()
-    .should('be.visible')
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A')
-    .should('be.visible')
-    .should('have.length', 1);
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('AA')
-    .should('be.visible')
-    .should('have.length', 1);
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('AAA')
-    .should('be.visible')
-    .should('have.length', 1);
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All').should('have.length', 0);
-};
-
-const assertDuplicateItem = (variables: VariablesData[]) => {
-  const itemToDuplicate = variables[1];
-  e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click();
-  e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click();
-  e2e.pages.Dashboard.Settings.Variables.List.tableRowDuplicateButtons(itemToDuplicate.name)
-    .should('exist')
-    .click();
-  e2e.pages.Dashboard.Settings.Variables.List.table()
-    .should('be.visible')
-    .within(() => {
-      e2e()
-        .get('tbody > tr')
-        .should('have.length', variables.length + 1);
-    });
-  const newItem = { ...itemToDuplicate, name: `copy_of_${itemToDuplicate.name}` };
-  assertVariableTableRow(newItem, variables.length - 1, variables.length);
-  e2e.pages.Dashboard.Settings.Variables.List.tableRowNameFields(newItem.name).click();
-
-  newItem.label = `copy_of_${itemToDuplicate.label}`;
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput()
-    .clear()
-    .type(newItem.label);
-
-  e2e.pages.Dashboard.Settings.General.saveDashBoard().click();
-  e2e.pages.SaveDashboardModal.save().click();
-  e2e.flows.assertSuccessNotification();
-
-  e2e.components.BackButton.backArrow()
-    .should('be.visible')
-    .click();
-
-  e2e.pages.Dashboard.SubMenu.submenuItemLabels(newItem.label).should('be.visible');
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(newItem.selectedOption)
-    .should('be.visible')
-    .eq(1)
-    .click();
-  e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown().should('be.visible');
-  for (let optionIndex = 0; optionIndex < newItem.options.length; optionIndex++) {
-    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts(newItem.options[optionIndex]).should('be.visible');
-  }
-
-  return [...variables, newItem];
-};
-
-const assertDeleteItem = (variables: VariablesData[]) => {
-  const itemToDelete = variables[1];
-  e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click();
-  e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click();
-
-  e2e.pages.Dashboard.Settings.Variables.List.tableRowRemoveButtons(itemToDelete.name).click();
-  e2e.pages.Dashboard.Settings.Variables.List.table()
-    .should('be.visible')
-    .within(() => {
-      e2e()
-        .get('tbody > tr')
-        .should('have.length', variables.length - 1);
-    });
-
-  e2e.pages.Dashboard.Settings.General.saveDashBoard().click();
-  e2e.pages.SaveDashboardModal.save().click();
-  e2e.flows.assertSuccessNotification();
-
-  e2e.components.BackButton.backArrow()
-    .should('be.visible')
-    .click();
-
-  e2e.pages.Dashboard.SubMenu.submenuItemLabels(itemToDelete.label).should('not.exist');
-
-  return variables.filter(item => item.name !== itemToDelete.name);
-};
-
-const assertUpdateItem = (data: VariablesData[]) => {
-  const variables = [...data];
-  // updates an item to a constant variable instead
-  const itemToUpdate = variables[1];
-  let updatedItem = {
-    ...itemToUpdate,
-    name: `update_of_${itemToUpdate.name}`,
-    label: `update_of_${itemToUpdate.label}`,
-    query: 'A constant',
-    options: ['A constant'],
-    selectedOption: 'undefined',
-  };
-
-  variables[1] = updatedItem;
-
-  e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click();
-  e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click();
-  e2e.pages.Dashboard.Settings.Variables.List.tableRowNameFields(itemToUpdate.name).click();
-
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().should('be.visible');
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput()
-    .should('have.value', itemToUpdate.name)
-    .clear()
-    .type(updatedItem.name);
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput()
-    .should('have.value', itemToUpdate.label)
-    .clear()
-    .type(updatedItem.label);
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect().select('Constant');
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.generalHideSelect().within(select => {
-    e2e()
-      .get('option:selected')
-      .should('have.text', 'Variable');
-  });
-  e2e.pages.Dashboard.Settings.Variables.Edit.General.generalHideSelect().select('');
-  e2e.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInput().type(updatedItem.query);
-
-  e2e.components.BackButton.backArrow()
-    .should('be.visible')
-    .click();
-
-  variables[1].selectedOption = 'A constant';
-  assertVariableLabelAndComponent(variables[1]);
-
-  e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click();
-  e2e.pages.Dashboard.Settings.General.sectionItems('Variables').click();
-
-  assertVariableTableRow(variables[1], 1, variables.length);
-
-  variables[1].selectedOption = 'A constant';
-
-  return variables;
-};
-
-const assertMoveDownItem = (data: VariablesData[]) => {
-  const variables = [...data];
-  e2e.pages.Dashboard.Settings.Variables.List.tableRowArrowDownButtons(variables[0].name).click();
-  const temp = { ...variables[0] };
-  variables[0] = { ...variables[1] };
-  variables[1] = temp;
-  e2e.pages.Dashboard.Settings.Variables.List.table().within(() => {
-    e2e()
-      .get('tbody > tr')
-      .eq(0)
-      .within(() => {
-        e2e()
-          .get('td')
-          .eq(0)
-          .contains(variables[0].name);
-        e2e()
-          .get('td')
-          .eq(1)
-          .contains(variables[0].query);
-      });
-    e2e()
-      .get('tbody > tr')
-      .eq(1)
-      .within(() => {
-        e2e()
-          .get('td')
-          .eq(0)
-          .contains(variables[1].name);
-        e2e()
-          .get('td')
-          .eq(1)
-          .contains(variables[1].query);
-      });
-  });
-
-  e2e.components.BackButton.backArrow()
-    .should('be.visible')
-    .click();
-
-  assertVariableLabelsAndComponents(variables);
-
-  return variables;
-};
-
-const assertMoveUpItem = (data: VariablesData[]) => {
-  const variables = [...data];
-  e2e.pages.Dashboard.Settings.Variables.List.tableRowArrowUpButtons(variables[1].name).click();
-  const temp = { ...variables[0] };
-  variables[0] = { ...variables[1] };
-  variables[1] = temp;
-  e2e.pages.Dashboard.Settings.Variables.List.table().within(() => {
-    e2e()
-      .get('tbody > tr')
-      .eq(0)
-      .within(() => {
-        e2e()
-          .get('td')
-          .eq(0)
-          .contains(variables[0].name);
-        e2e()
-          .get('td')
-          .eq(1)
-          .contains(variables[0].query);
-      });
-    e2e()
-      .get('tbody > tr')
-      .eq(1)
-      .within(() => {
-        e2e()
-          .get('td')
-          .eq(0)
-          .contains(variables[1].name);
-        e2e()
-          .get('td')
-          .eq(1)
-          .contains(variables[1].query);
-      });
-  });
-
-  e2e.components.BackButton.backArrow()
-    .should('be.visible')
-    .click();
-
-  assertVariableLabelsAndComponents(variables);
-
-  return variables;
-};
diff --git a/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx b/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx
index 4b400358a84..ed079306ec5 100644
--- a/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx
+++ b/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, HTMLProps } from 'react';
+import React, { FC, HTMLProps, ReactNode } from 'react';
 import { css, cx } from 'emotion';
 import { useStyles } from '../../themes';
 
@@ -18,6 +18,7 @@ export const InlineFieldRow: FC<Props> = ({ children, className, ...htmlProps })
 const getStyles = () => {
   return {
     container: css`
+      label: InlineFieldRow;
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
diff --git a/public/app/features/variables/adhoc/AdHocVariableEditor.tsx b/public/app/features/variables/adhoc/AdHocVariableEditor.tsx
index d4e22c09d80..af63adbb41f 100644
--- a/public/app/features/variables/adhoc/AdHocVariableEditor.tsx
+++ b/public/app/features/variables/adhoc/AdHocVariableEditor.tsx
@@ -8,6 +8,10 @@ import { AdHocVariableEditorState } from './reducer';
 import { changeVariableDatasource, initAdHocVariableEditor } from './actions';
 import { connectWithStore } from 'app/core/utils/connectWithReduxStore';
 import { StoreState } from 'app/types';
+import { Alert, InlineFieldRow, VerticalGroup } from '@grafana/ui';
+import { VariableSectionHeader } from '../editor/VariableSectionHeader';
+import { VariableSelectField } from '../editor/VariableSelectField';
+import { SelectableValue } from '@grafana/data';
 
 export interface OwnProps extends VariableEditorProps<AdHocVariableModel> {}
 
@@ -27,45 +31,33 @@ export class AdHocVariableEditorUnConnected extends PureComponent<Props> {
     this.props.initAdHocVariableEditor();
   }
 
-  onDatasourceChanged = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    this.props.changeVariableDatasource(event.target.value);
+  onDatasourceChanged = (option: SelectableValue<string>) => {
+    this.props.changeVariableDatasource(option.value ?? '');
   };
 
   render() {
     const { variable, editor } = this.props;
     const dataSources = editor.extended?.dataSources ?? [];
     const infoText = editor.extended?.infoText ?? null;
+    const options = dataSources.map(ds => ({ label: ds.text, value: ds.value ?? '' }));
+    const value = options.find(o => o.value === variable.datasource) ?? options[0];
 
     return (
-      <>
-        <div className="gf-form-group">
-          <h5 className="section-heading">Options</h5>
-          <div className="gf-form max-width-21">
-            <span className="gf-form-label width-8">Data source</span>
-            <div className="gf-form-select-wrapper max-width-14">
-              <select
-                className="gf-form-input"
-                required
-                onChange={this.onDatasourceChanged}
-                value={variable.datasource ?? ''}
-                aria-label="Variable editor Form AdHoc DataSource select"
-              >
-                {dataSources.map(ds => (
-                  <option key={ds.value ?? ''} value={ds.value ?? ''} label={ds.text}>
-                    {ds.text}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
-        </div>
-
-        {infoText && (
-          <div className="alert alert-info gf-form-group" aria-label="Variable editor Form Alert">
-            {infoText}
-          </div>
-        )}
-      </>
+      <VerticalGroup spacing="xs">
+        <VariableSectionHeader name="Options" />
+        <VerticalGroup spacing="sm">
+          <InlineFieldRow>
+            <VariableSelectField
+              name="Data source"
+              value={value}
+              options={options}
+              onChange={this.onDatasourceChanged}
+              labelWidth={10}
+            />
+          </InlineFieldRow>
+          {infoText ? <Alert title={infoText} severity="info" /> : null}
+        </VerticalGroup>
+      </VerticalGroup>
     );
   }
 }
diff --git a/public/app/features/variables/constant/ConstantVariableEditor.tsx b/public/app/features/variables/constant/ConstantVariableEditor.tsx
index 6d361938b32..3f41f505eb1 100644
--- a/public/app/features/variables/constant/ConstantVariableEditor.tsx
+++ b/public/app/features/variables/constant/ConstantVariableEditor.tsx
@@ -1,8 +1,11 @@
 import React, { ChangeEvent, FocusEvent, PureComponent } from 'react';
 import { selectors } from '@grafana/e2e-selectors';
+import { VerticalGroup } from '@grafana/ui';
 
 import { ConstantVariableModel } from '../types';
 import { VariableEditorProps } from '../editor/types';
+import { VariableSectionHeader } from '../editor/VariableSectionHeader';
+import { VariableTextField } from '../editor/VariableTextField';
 
 export interface Props extends VariableEditorProps<ConstantVariableModel> {}
 
@@ -24,23 +27,19 @@ export class ConstantVariableEditor extends PureComponent<Props> {
 
   render() {
     return (
-      <>
-        <div className="gf-form-group">
-          <h5 className="section-heading">Constant options</h5>
-          <div className="gf-form">
-            <span className="gf-form-label">Value</span>
-            <input
-              type="text"
-              className="gf-form-input"
-              value={this.props.variable.query}
-              onChange={this.onChange}
-              onBlur={this.onBlur}
-              placeholder="your metric prefix"
-              aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInput}
-            />
-          </div>
-        </div>
-      </>
+      <VerticalGroup spacing="xs">
+        <VariableSectionHeader name="Constant Options" />
+        <VariableTextField
+          value={this.props.variable.query}
+          name="Value"
+          placeholder="your metric prefix"
+          onChange={this.onChange}
+          onBlur={this.onBlur}
+          labelWidth={20}
+          ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInput}
+          grow
+        />
+      </VerticalGroup>
     );
   }
 }
diff --git a/public/app/features/variables/custom/CustomVariableEditor.tsx b/public/app/features/variables/custom/CustomVariableEditor.tsx
index 7ed80430b3a..d2161ce7200 100644
--- a/public/app/features/variables/custom/CustomVariableEditor.tsx
+++ b/public/app/features/variables/custom/CustomVariableEditor.tsx
@@ -4,9 +4,11 @@ import { SelectionOptionsEditor } from '../editor/SelectionOptionsEditor';
 import { OnPropChangeArguments, VariableEditorProps } from '../editor/types';
 import { connectWithStore } from 'app/core/utils/connectWithReduxStore';
 import { MapDispatchToProps, MapStateToProps } from 'react-redux';
-import { Field, TextArea } from '@grafana/ui';
+import { VerticalGroup } from '@grafana/ui';
 import { StoreState } from 'app/types';
 import { changeVariableMultiValue } from '../state/actions';
+import { VariableSectionHeader } from '../editor/VariableSectionHeader';
+import { VariableTextAreaField } from '../editor/VariableTextAreaField';
 
 interface OwnProps extends VariableEditorProps<CustomVariableModel> {}
 
@@ -40,31 +42,28 @@ class CustomVariableEditorUnconnected extends PureComponent<Props> {
 
   render() {
     return (
-      <>
-        <div className="gf-form-group">
-          <h5 className="section-heading">Custom Options</h5>
-          <div className="gf-form">
-            <Field label="Values separated by comma">
-              <TextArea
-                className="gf-form-input"
-                value={this.props.variable.query}
-                onChange={this.onChange}
-                onBlur={this.onBlur}
-                rows={5}
-                cols={81}
-                placeholder="1, 10, mykey : myvalue, myvalue, escaped\,value"
-                required
-                aria-label="Variable editor Form Custom Query field"
-              />
-            </Field>
-          </div>
-        </div>
-        <SelectionOptionsEditor
-          variable={this.props.variable}
-          onPropChange={this.onSelectionOptionsChange}
-          onMultiChanged={this.props.changeVariableMultiValue}
-        />
-      </>
+      <VerticalGroup spacing="xs">
+        <VariableSectionHeader name="Custom Options" />
+        <VerticalGroup spacing="md">
+          <VerticalGroup spacing="none">
+            <VariableTextAreaField
+              name="Values separated by comma"
+              value={this.props.variable.query}
+              placeholder="1, 10, mykey : myvalue, myvalue, escaped\,value"
+              onChange={this.onChange}
+              onBlur={this.onBlur}
+              required
+              width={50}
+              labelWidth={27}
+            />
+          </VerticalGroup>
+          <SelectionOptionsEditor
+            variable={this.props.variable}
+            onPropChange={this.onSelectionOptionsChange}
+            onMultiChanged={this.props.changeVariableMultiValue}
+          />{' '}
+        </VerticalGroup>
+      </VerticalGroup>
     );
   }
 }
diff --git a/public/app/features/variables/datasource/DataSourceVariableEditor.tsx b/public/app/features/variables/datasource/DataSourceVariableEditor.tsx
index af08e8bfe1a..5a58f2d02b6 100644
--- a/public/app/features/variables/datasource/DataSourceVariableEditor.tsx
+++ b/public/app/features/variables/datasource/DataSourceVariableEditor.tsx
@@ -1,16 +1,20 @@
 import React, { ChangeEvent, FocusEvent, PureComponent } from 'react';
+import { MapDispatchToProps, MapStateToProps } from 'react-redux';
+import { InlineFieldRow, VerticalGroup } from '@grafana/ui';
 
 import { DataSourceVariableModel, VariableWithMultiSupport } from '../types';
 import { OnPropChangeArguments, VariableEditorProps } from '../editor/types';
 import { SelectionOptionsEditor } from '../editor/SelectionOptionsEditor';
-import { InlineFormLabel } from '@grafana/ui';
 import { VariableEditorState } from '../editor/reducer';
 import { DataSourceVariableEditorState } from './reducer';
 import { initDataSourceVariableEditor } from './actions';
-import { MapDispatchToProps, MapStateToProps } from 'react-redux';
 import { StoreState } from '../../../types';
 import { connectWithStore } from '../../../core/utils/connectWithReduxStore';
 import { changeVariableMultiValue } from '../state/actions';
+import { VariableSectionHeader } from '../editor/VariableSectionHeader';
+import { VariableSelectField } from '../editor/VariableSelectField';
+import { SelectableValue } from '@grafana/data';
+import { VariableTextField } from '../editor/VariableTextField';
 
 export interface OwnProps extends VariableEditorProps<DataSourceVariableModel> {}
 
@@ -58,66 +62,58 @@ export class DataSourceVariableEditorUnConnected extends PureComponent<Props> {
     return value ?? '';
   };
 
-  onDataSourceTypeChanged = (event: ChangeEvent<HTMLSelectElement>) => {
-    this.props.onPropChange({ propName: 'query', propValue: event.target.value, updateOptions: true });
+  onDataSourceTypeChanged = (option: SelectableValue<string>) => {
+    this.props.onPropChange({ propName: 'query', propValue: option.value, updateOptions: true });
   };
 
   render() {
+    const typeOptions = this.props.editor.extended?.dataSourceTypes?.length
+      ? this.props.editor.extended?.dataSourceTypes?.map(ds => ({ value: ds.value ?? '', label: ds.text }))
+      : [];
+    const typeValue = typeOptions.find(o => o.value === this.props.variable.query) ?? typeOptions[0];
+
     return (
-      <>
-        <div className="gf-form-group">
-          <h5 className="section-heading">Data source options</h5>
-
-          <div className="gf-form">
-            <label className="gf-form-label width-12">Type</label>
-            <div className="gf-form-select-wrapper max-width-18">
-              <select
-                className="gf-form-input"
-                value={this.getSelectedDataSourceTypeValue()}
+      <VerticalGroup spacing="xs">
+        <VariableSectionHeader name="Data source options" />
+        <VerticalGroup spacing="md">
+          <VerticalGroup spacing="xs">
+            <InlineFieldRow>
+              <VariableSelectField
+                name="Type"
+                value={typeValue}
+                options={typeOptions}
                 onChange={this.onDataSourceTypeChanged}
-              >
-                {this.props.editor.extended?.dataSourceTypes?.length &&
-                  this.props.editor.extended?.dataSourceTypes?.map(ds => (
-                    <option key={ds.value ?? ''} value={ds.value ?? ''} label={ds.text}>
-                      {ds.text}
-                    </option>
-                  ))}
-              </select>
-            </div>
-          </div>
+                labelWidth={10}
+              />
+            </InlineFieldRow>
+            <InlineFieldRow>
+              <VariableTextField
+                value={this.props.variable.regex}
+                name="Instance name filter"
+                placeholder="/.*-(.*)-.*/"
+                onChange={this.onRegExChange}
+                onBlur={this.onRegExBlur}
+                labelWidth={20}
+                tooltip={
+                  <div>
+                    Regex filter for which data source instances to choose from in the variable value dropdown. Leave
+                    empty for all.
+                    <br />
+                    <br />
+                    Example: <code>/^prod/</code>
+                  </div>
+                }
+              />
+            </InlineFieldRow>
+          </VerticalGroup>
 
-          <div className="gf-form">
-            <InlineFormLabel
-              width={12}
-              tooltip={
-                <div>
-                  Regex filter for which data source instances to choose from in the variable value dropdown. Leave
-                  empty for all.
-                  <br />
-                  <br />
-                  Example: <code>/^prod/</code>
-                </div>
-              }
-            >
-              Instance name filter
-            </InlineFormLabel>
-            <input
-              type="text"
-              className="gf-form-input max-width-18"
-              placeholder="/.*-(.*)-.*/"
-              value={this.props.variable.regex}
-              onChange={this.onRegExChange}
-              onBlur={this.onRegExBlur}
-            />
-          </div>
-        </div>
-
-        <SelectionOptionsEditor
-          variable={this.props.variable}
-          onPropChange={this.onSelectionOptionsChange}
-          onMultiChanged={this.props.changeVariableMultiValue}
-        />
-      </>
+          <SelectionOptionsEditor
+            variable={this.props.variable}
+            onPropChange={this.onSelectionOptionsChange}
+            onMultiChanged={this.props.changeVariableMultiValue}
+          />
+        </VerticalGroup>
+      </VerticalGroup>
     );
   }
 }
diff --git a/public/app/features/variables/editor/LegacyVariableQueryEditor.tsx b/public/app/features/variables/editor/LegacyVariableQueryEditor.tsx
index 96cd270e0c2..ea31655608e 100644
--- a/public/app/features/variables/editor/LegacyVariableQueryEditor.tsx
+++ b/public/app/features/variables/editor/LegacyVariableQueryEditor.tsx
@@ -2,7 +2,8 @@ import React, { FC, useCallback, useState } from 'react';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { VariableQueryProps } from 'app/types/plugins';
-import { InlineField, TextArea, useStyles } from '@grafana/ui';
+import { VariableTextAreaField } from './VariableTextAreaField';
+import { useStyles } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 import { css } from 'emotion';
 
@@ -17,6 +18,7 @@ export const LegacyVariableQueryEditor: FC<VariableQueryProps> = ({ onChange, qu
     },
     [onChange]
   );
+
   const onBlur = useCallback(
     (event: React.FormEvent<HTMLTextAreaElement>) => {
       onChange(event.currentTarget.value, event.currentTarget.value);
@@ -25,19 +27,17 @@ export const LegacyVariableQueryEditor: FC<VariableQueryProps> = ({ onChange, qu
   );
 
   return (
-    <div className="gf-form">
-      <InlineField label="Query" labelWidth={20} grow={false} className={styles.inlineFieldOverride}>
-        <span hidden />
-      </InlineField>
-      <TextArea
-        rows={getLineCount(value)}
-        className="gf-form-input"
+    <div className={styles.container}>
+      <VariableTextAreaField
+        name="Query"
         value={value}
+        placeholder="metric name or tags query"
+        width={100}
         onChange={onValueChange}
         onBlur={onBlur}
-        placeholder="metric name or tags query"
         required
-        aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput}
+        labelWidth={20}
+        ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput}
       />
     </div>
   );
@@ -45,18 +45,10 @@ export const LegacyVariableQueryEditor: FC<VariableQueryProps> = ({ onChange, qu
 
 function getStyles(theme: GrafanaTheme) {
   return {
-    inlineFieldOverride: css`
-      margin: 0;
+    container: css`
+      margin-bottom: ${theme.spacing.xs};
     `,
   };
 }
 
 LegacyVariableQueryEditor.displayName = LEGACY_VARIABLE_QUERY_EDITOR_NAME;
-
-const getLineCount = (value: any) => {
-  if (value && typeof value === 'string') {
-    return value.split('\n').length;
-  }
-
-  return 1;
-};
diff --git a/public/app/features/variables/editor/SelectionOptionsEditor.tsx b/public/app/features/variables/editor/SelectionOptionsEditor.tsx
index a62eb3fd403..9af759ab50a 100644
--- a/public/app/features/variables/editor/SelectionOptionsEditor.tsx
+++ b/public/app/features/variables/editor/SelectionOptionsEditor.tsx
@@ -1,12 +1,13 @@
 import React, { FunctionComponent, useCallback } from 'react';
-import { LegacyForms } from '@grafana/ui';
+import { InlineFieldRow, VerticalGroup } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { VariableWithMultiSupport } from '../types';
 import { VariableEditorProps } from './types';
 import { toVariableIdentifier, VariableIdentifier } from '../state/types';
-
-const { Switch } = LegacyForms;
+import { VariableSectionHeader } from './VariableSectionHeader';
+import { VariableSwitchField } from './VariableSwitchField';
+import { VariableTextField } from './VariableTextField';
 
 export interface SelectionOptionsEditorProps<Model extends VariableWithMultiSupport = VariableWithMultiSupport>
   extends VariableEditorProps<Model> {
@@ -35,42 +36,39 @@ export const SelectionOptionsEditor: FunctionComponent<SelectionOptionsEditorPro
     [props.onPropChange]
   );
   return (
-    <div className="section gf-form-group">
-      <h5 className="section-heading">Selection Options</h5>
-      <div className="section">
-        <div aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch}>
-          <Switch
-            label="Multi-value"
-            labelClass="width-10"
-            checked={props.variable.multi}
-            onChange={onMultiChanged}
-            tooltip={'Enables multiple values to be selected at the same time'}
-          />
-        </div>
-        <div aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch}>
-          <Switch
-            label="Include All option"
-            labelClass="width-10"
-            checked={props.variable.includeAll}
-            onChange={onIncludeAllChanged}
-            tooltip={'Enables an option to include all variables'}
-          />
-        </div>
-      </div>
+    <VerticalGroup spacing="none">
+      <VariableSectionHeader name="Selection Options" />
+      <InlineFieldRow>
+        <VariableSwitchField
+          value={props.variable.multi}
+          name="Multi-value"
+          tooltip="Enables multiple values to be selected at the same time"
+          onChange={onMultiChanged}
+          ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch}
+        />
+      </InlineFieldRow>
+      <InlineFieldRow>
+        <VariableSwitchField
+          value={props.variable.includeAll}
+          name="Include All option"
+          tooltip="Enables an option to include all variables"
+          onChange={onIncludeAllChanged}
+          ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch}
+        />
+      </InlineFieldRow>
       {props.variable.includeAll && (
-        <div className="gf-form">
-          <span className="gf-form-label width-10">Custom all value</span>
-          <input
-            type="text"
-            className="gf-form-input max-width-15"
+        <InlineFieldRow>
+          <VariableTextField
             value={props.variable.allValue ?? ''}
             onChange={onAllValueChanged}
+            name="Custom all value"
             placeholder="blank = auto"
-            aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput}
+            ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput}
+            labelWidth={20}
           />
-        </div>
+        </InlineFieldRow>
       )}
-    </div>
+    </VerticalGroup>
   );
 };
 SelectionOptionsEditor.displayName = 'SelectionOptionsEditor';
diff --git a/public/app/features/variables/editor/VariableEditorEditor.tsx b/public/app/features/variables/editor/VariableEditorEditor.tsx
index f79371f0772..c96af34846f 100644
--- a/public/app/features/variables/editor/VariableEditorEditor.tsx
+++ b/public/app/features/variables/editor/VariableEditorEditor.tsx
@@ -1,7 +1,7 @@
 import React, { ChangeEvent, FormEvent, PureComponent } from 'react';
 import isEqual from 'lodash/isEqual';
-import { AppEvents, LoadingState, VariableType } from '@grafana/data';
-import { Icon, InlineFormLabel } from '@grafana/ui';
+import { AppEvents, LoadingState, SelectableValue, VariableType } from '@grafana/data';
+import { Button, Icon, InlineFieldRow, VerticalGroup } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { variableAdapters } from '../adapters';
@@ -18,7 +18,11 @@ import { connectWithStore } from '../../../core/utils/connectWithReduxStore';
 import { OnPropChangeArguments } from './types';
 import { changeVariableProp, changeVariableType } from '../state/sharedReducer';
 import { updateOptions } from '../state/actions';
-import { getVariableTypes } from '../utils';
+import { VariableTextField } from './VariableTextField';
+import { VariableSectionHeader } from './VariableSectionHeader';
+import { hasOptions } from '../guard';
+import { VariableTypeSelect } from './VariableTypeSelect';
+import { VariableHideSelect } from './VariableHideSelect';
 
 export interface OwnProps {
   identifier: VariableIdentifier;
@@ -63,11 +67,11 @@ export class VariableEditorEditorUnConnected extends PureComponent<Props> {
     this.props.changeVariableName(this.props.identifier, event.target.value);
   };
 
-  onTypeChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    event.preventDefault();
-    this.props.changeVariableType(
-      toVariablePayload(this.props.identifier, { newType: event.target.value as VariableType })
-    );
+  onTypeChange = (option: SelectableValue<VariableType>) => {
+    if (!option.value) {
+      return;
+    }
+    this.props.changeVariableType(toVariablePayload(this.props.identifier, { newType: option.value }));
   };
 
   onLabelChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -77,12 +81,17 @@ export class VariableEditorEditorUnConnected extends PureComponent<Props> {
     );
   };
 
-  onHideChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    event.preventDefault();
+  onDescriptionChange = (event: ChangeEvent<HTMLInputElement>) => {
+    this.props.changeVariableProp(
+      toVariablePayload(this.props.identifier, { propName: 'description', propValue: event.target.value })
+    );
+  };
+
+  onHideChange = (option: SelectableValue<VariableHide>) => {
     this.props.changeVariableProp(
       toVariablePayload(this.props.identifier, {
         propName: 'hide',
-        propValue: parseInt(event.target.value, 10) as VariableHide,
+        propValue: option.value,
       })
     );
   };
@@ -114,100 +123,64 @@ export class VariableEditorEditorUnConnected extends PureComponent<Props> {
     return (
       <div>
         <form aria-label="Variable editor Form" onSubmit={this.onHandleSubmit}>
-          <h5 className="section-heading">General</h5>
-          <div className="gf-form-group">
-            <div className="gf-form-inline">
-              <div className="gf-form max-width-19">
-                <span className="gf-form-label width-6">Name</span>
-                <input
-                  type="text"
-                  className="gf-form-input"
-                  name="name"
-                  placeholder="name"
-                  required
+          <VerticalGroup spacing="lg">
+            <VerticalGroup spacing="none">
+              <VariableSectionHeader name="General" />
+              <InlineFieldRow>
+                <VariableTextField
                   value={this.props.editor.name}
                   onChange={this.onNameChange}
-                  aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput}
+                  name="Name"
+                  placeholder="name"
+                  required
+                  ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput}
                 />
-              </div>
-              <div className="gf-form max-width-19">
-                <InlineFormLabel width={6} tooltip={variableAdapters.get(this.props.variable.type).description}>
-                  Type
-                </InlineFormLabel>
-                <div className="gf-form-select-wrapper max-width-17">
-                  <select
-                    className="gf-form-input"
-                    value={this.props.variable.type}
-                    onChange={this.onTypeChange}
-                    aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect}
-                  >
-                    {getVariableTypes().map(({ label, value }) => (
-                      <option key={value} label={label} value={value}>
-                        {name}
-                      </option>
-                    ))}
-                  </select>
+                <VariableTypeSelect onChange={this.onTypeChange} type={this.props.variable.type} />
+              </InlineFieldRow>
+
+              {this.props.editor.errors.name && (
+                <div className="gf-form">
+                  <span className="gf-form-label gf-form-label--error">{this.props.editor.errors.name}</span>
                 </div>
-              </div>
-            </div>
+              )}
 
-            {this.props.editor.errors.name && (
-              <div className="gf-form">
-                <span className="gf-form-label gf-form-label--error">{this.props.editor.errors.name}</span>
-              </div>
-            )}
-
-            <div className="gf-form-inline">
-              <div className="gf-form max-width-19">
-                <span className="gf-form-label width-6">Label</span>
-                <input
-                  type="text"
-                  className="gf-form-input"
+              <InlineFieldRow>
+                <VariableTextField
                   value={this.props.variable.label ?? ''}
                   onChange={this.onLabelChange}
+                  name="Label"
                   placeholder="optional display name"
-                  aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput}
+                  ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput}
                 />
-              </div>
-              <div className="gf-form max-width-19">
-                <span className="gf-form-label width-6">Hide</span>
-                <div className="gf-form-select-wrapper max-width-15">
-                  <select
-                    className="gf-form-input"
-                    value={this.props.variable.hide}
-                    onChange={this.onHideChange}
-                    aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalHideSelect}
-                  >
-                    <option label="" value={VariableHide.dontHide}>
-                      {''}
-                    </option>
-                    <option label="Label" value={VariableHide.hideLabel}>
-                      Label
-                    </option>
-                    <option label="Variable" value={VariableHide.hideVariable}>
-                      Variable
-                    </option>
-                  </select>
-                </div>
-              </div>
-            </div>
-          </div>
+                <VariableHideSelect onChange={this.onHideChange} hide={this.props.variable.hide} />
+              </InlineFieldRow>
 
-          {EditorToRender && <EditorToRender variable={this.props.variable} onPropChange={this.onPropChanged} />}
+              <VariableTextField
+                name="Description"
+                value={variable.description ?? ''}
+                placeholder="descriptive text"
+                onChange={this.onDescriptionChange}
+                grow
+              />
+            </VerticalGroup>
 
-          <VariableValuesPreview variable={this.props.variable} />
+            {EditorToRender && <EditorToRender variable={this.props.variable} onPropChange={this.onPropChanged} />}
 
-          <div className="gf-form-button-row p-y-0">
-            <button
-              type="submit"
-              className="btn btn-primary"
-              aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.submitButton}
-              disabled={loading}
-            >
-              Update
-              {loading ? <Icon className="spin-clockwise" name="sync" size="sm" style={{ marginLeft: '2px' }} /> : null}
-            </button>
-          </div>
+            {hasOptions(this.props.variable) ? <VariableValuesPreview variable={this.props.variable} /> : null}
+
+            <VerticalGroup spacing="none">
+              <Button
+                type="submit"
+                aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.submitButton}
+                disabled={loading}
+              >
+                Update
+                {loading ? (
+                  <Icon className="spin-clockwise" name="sync" size="sm" style={{ marginLeft: '2px' }} />
+                ) : null}
+              </Button>
+            </VerticalGroup>
+          </VerticalGroup>
         </form>
       </div>
     );
diff --git a/public/app/features/variables/editor/VariableHideSelect.tsx b/public/app/features/variables/editor/VariableHideSelect.tsx
new file mode 100644
index 00000000000..f7ee8da4d71
--- /dev/null
+++ b/public/app/features/variables/editor/VariableHideSelect.tsx
@@ -0,0 +1,31 @@
+import React, { PropsWithChildren, useMemo } from 'react';
+import { SelectableValue } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+
+import { VariableSelectField } from '../editor/VariableSelectField';
+import { VariableHide } from '../types';
+
+interface Props {
+  onChange: (option: SelectableValue<VariableHide>) => void;
+  hide: VariableHide;
+}
+
+const HIDE_OPTIONS = [
+  { label: '', value: VariableHide.dontHide },
+  { label: 'Label', value: VariableHide.hideLabel },
+  { label: 'Variable', value: VariableHide.hideVariable },
+];
+
+export function VariableHideSelect({ onChange, hide }: PropsWithChildren<Props>) {
+  const value = useMemo(() => HIDE_OPTIONS.find(o => o.value === hide) ?? HIDE_OPTIONS[0], [hide]);
+
+  return (
+    <VariableSelectField
+      name="Hide"
+      value={value}
+      options={HIDE_OPTIONS}
+      onChange={onChange}
+      ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalHideSelect}
+    />
+  );
+}
diff --git a/public/app/features/variables/editor/VariableSectionHeader.tsx b/public/app/features/variables/editor/VariableSectionHeader.tsx
new file mode 100644
index 00000000000..e0e5252df8f
--- /dev/null
+++ b/public/app/features/variables/editor/VariableSectionHeader.tsx
@@ -0,0 +1,24 @@
+import React, { PropsWithChildren, ReactElement } from 'react';
+import { useStyles } from '@grafana/ui';
+import { GrafanaTheme } from '@grafana/data';
+import { css } from 'emotion';
+
+interface VariableSectionHeaderProps {
+  name: string;
+}
+
+export function VariableSectionHeader({ name }: PropsWithChildren<VariableSectionHeaderProps>): ReactElement {
+  const styles = useStyles(getStyles);
+
+  return <h5 className={styles.sectionHeading}>{name}</h5>;
+}
+
+function getStyles(theme: GrafanaTheme) {
+  return {
+    sectionHeading: css`
+      label: sectionHeading;
+      font-size: ${theme.typography.size.md};
+      margin-bottom: ${theme.spacing.sm};
+    `,
+  };
+}
diff --git a/public/app/features/variables/editor/VariableSelectField.tsx b/public/app/features/variables/editor/VariableSelectField.tsx
new file mode 100644
index 00000000000..684c875cbaa
--- /dev/null
+++ b/public/app/features/variables/editor/VariableSelectField.tsx
@@ -0,0 +1,53 @@
+import React, { PropsWithChildren, ReactElement } from 'react';
+import { InlineFormLabel, Select, useStyles } from '@grafana/ui';
+import { GrafanaTheme, SelectableValue } from '@grafana/data';
+import { css } from 'emotion';
+
+interface VariableSelectFieldProps<T> {
+  name: string;
+  value: SelectableValue<T>;
+  options: Array<SelectableValue<T>>;
+  onChange: (option: SelectableValue<T>) => void;
+  tooltip?: string;
+  ariaLabel?: string;
+  width?: number;
+  labelWidth?: number;
+}
+
+export function VariableSelectField({
+  name,
+  value,
+  options,
+  tooltip,
+  onChange,
+  ariaLabel,
+  width,
+  labelWidth,
+}: PropsWithChildren<VariableSelectFieldProps<any>>): ReactElement {
+  const styles = useStyles(getStyles);
+
+  return (
+    <>
+      <InlineFormLabel width={labelWidth ?? 6} tooltip={tooltip}>
+        {name}
+      </InlineFormLabel>
+      <div aria-label={ariaLabel}>
+        <Select
+          onChange={onChange}
+          value={value}
+          width={width ?? 25}
+          options={options}
+          className={styles.selectContainer}
+        />
+      </div>
+    </>
+  );
+}
+
+function getStyles(theme: GrafanaTheme) {
+  return {
+    selectContainer: css`
+      margin-right: ${theme.spacing.xs};
+    `,
+  };
+}
diff --git a/public/app/features/variables/editor/VariableSwitchField.tsx b/public/app/features/variables/editor/VariableSwitchField.tsx
new file mode 100644
index 00000000000..6a2ed2bc15a
--- /dev/null
+++ b/public/app/features/variables/editor/VariableSwitchField.tsx
@@ -0,0 +1,39 @@
+import React, { ChangeEvent, PropsWithChildren, ReactElement } from 'react';
+import { InlineField, Switch, useStyles } from '@grafana/ui';
+import { GrafanaTheme } from '@grafana/data';
+import { css } from 'emotion';
+
+interface VariableSwitchFieldProps {
+  value: boolean;
+  name: string;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  tooltip?: string;
+  ariaLabel?: string;
+}
+
+export function VariableSwitchField({
+  value,
+  name,
+  tooltip,
+  onChange,
+  ariaLabel,
+}: PropsWithChildren<VariableSwitchFieldProps>): ReactElement {
+  const styles = useStyles(getStyles);
+
+  return (
+    <InlineField label={name} labelWidth={20} tooltip={tooltip}>
+      <div aria-label={ariaLabel} className={styles.switchContainer}>
+        <Switch label={name} value={value} onChange={onChange} />
+      </div>
+    </InlineField>
+  );
+}
+
+function getStyles(theme: GrafanaTheme) {
+  return {
+    switchContainer: css`
+      margin-left: ${theme.spacing.sm};
+      margin-right: ${theme.spacing.sm};
+    `,
+  };
+}
diff --git a/public/app/features/variables/editor/VariableTextAreaField.tsx b/public/app/features/variables/editor/VariableTextAreaField.tsx
new file mode 100644
index 00000000000..30d0d01de0c
--- /dev/null
+++ b/public/app/features/variables/editor/VariableTextAreaField.tsx
@@ -0,0 +1,79 @@
+import React, { FormEvent, PropsWithChildren, ReactElement, useCallback } from 'react';
+import { HorizontalGroup, InlineField, TextArea, useStyles } from '@grafana/ui';
+import { GrafanaTheme } from '@grafana/data';
+import { css } from 'emotion';
+
+interface VariableTextAreaFieldProps<T> {
+  name: string;
+  value: string;
+  placeholder: string;
+  onChange: (event: FormEvent<HTMLTextAreaElement>) => void;
+  width: number;
+  tooltip?: string;
+  ariaLabel?: string;
+  required?: boolean;
+  labelWidth?: number;
+  onBlur?: (event: FormEvent<HTMLTextAreaElement>) => void;
+}
+
+export function VariableTextAreaField({
+  name,
+  value,
+  placeholder,
+  tooltip,
+  onChange,
+  onBlur,
+  ariaLabel,
+  required,
+  width,
+  labelWidth,
+}: PropsWithChildren<VariableTextAreaFieldProps<any>>): ReactElement {
+  const styles = useStyles(getStyles);
+  const getLineCount = useCallback((value: any) => {
+    if (value && typeof value === 'string') {
+      return value.split('\n').length;
+    }
+
+    return 1;
+  }, []);
+
+  return (
+    <HorizontalGroup spacing="none">
+      <InlineField
+        label={name}
+        labelWidth={labelWidth ?? 12}
+        grow={false}
+        tooltip={tooltip}
+        className={styles.inlineFieldOverride}
+      >
+        <span hidden />
+      </InlineField>
+      <TextArea
+        rows={getLineCount(value)}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        placeholder={placeholder}
+        required={required}
+        aria-label={ariaLabel}
+        cols={width}
+        className={styles.textarea}
+      />
+    </HorizontalGroup>
+  );
+}
+
+function getStyles(theme: GrafanaTheme) {
+  return {
+    inlineFieldOverride: css`
+      margin: 0;
+    `,
+    textarea: css`
+      white-space: pre-wrap;
+      min-height: 32px;
+      height: auto;
+      overflow: auto;
+      padding: 6px 8px;
+    `,
+  };
+}
diff --git a/public/app/features/variables/editor/VariableTextField.tsx b/public/app/features/variables/editor/VariableTextField.tsx
new file mode 100644
index 00000000000..2a8888f1c56
--- /dev/null
+++ b/public/app/features/variables/editor/VariableTextField.tsx
@@ -0,0 +1,47 @@
+import React, { FormEvent, PropsWithChildren, ReactElement } from 'react';
+import { InlineField, Input, PopoverContent } from '@grafana/ui';
+
+interface VariableTextFieldProps {
+  value: string;
+  name: string;
+  placeholder: string;
+  onChange: (event: FormEvent<HTMLInputElement>) => void;
+  ariaLabel?: string;
+  tooltip?: PopoverContent;
+  required?: boolean;
+  width?: number;
+  labelWidth?: number;
+  grow?: boolean;
+  onBlur?: (event: FormEvent<HTMLInputElement>) => void;
+}
+
+export function VariableTextField({
+  value,
+  name,
+  placeholder,
+  onChange,
+  ariaLabel,
+  width,
+  labelWidth,
+  required,
+  onBlur,
+  tooltip,
+  grow,
+}: PropsWithChildren<VariableTextFieldProps>): ReactElement {
+  return (
+    <InlineField label={name} labelWidth={labelWidth ?? 12} tooltip={tooltip} grow={grow}>
+      <Input
+        type="text"
+        id={name}
+        name={name}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        width={grow ? undefined : width ?? 25}
+        aria-label={ariaLabel}
+        required={required}
+      />
+    </InlineField>
+  );
+}
diff --git a/public/app/features/variables/editor/VariableTypeSelect.tsx b/public/app/features/variables/editor/VariableTypeSelect.tsx
new file mode 100644
index 00000000000..18f316834c4
--- /dev/null
+++ b/public/app/features/variables/editor/VariableTypeSelect.tsx
@@ -0,0 +1,28 @@
+import React, { PropsWithChildren, useMemo } from 'react';
+import { SelectableValue, VariableType } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+
+import { VariableSelectField } from '../editor/VariableSelectField';
+import { getVariableTypes } from '../utils';
+import { variableAdapters } from '../adapters';
+
+interface Props {
+  onChange: (option: SelectableValue<VariableType>) => void;
+  type: VariableType;
+}
+
+export function VariableTypeSelect({ onChange, type }: PropsWithChildren<Props>) {
+  const options = useMemo(() => getVariableTypes(), [getVariableTypes]);
+  const value = useMemo(() => options.find(o => o.value === type) ?? options[0], [options, type]);
+
+  return (
+    <VariableSelectField
+      name="Type"
+      value={value}
+      options={options}
+      onChange={onChange}
+      tooltip={variableAdapters.get(type).description}
+      ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect}
+    />
+  );
+}
diff --git a/public/app/features/variables/editor/VariableValuesPreview.tsx b/public/app/features/variables/editor/VariableValuesPreview.tsx
index a73629a9afb..51203c9031d 100644
--- a/public/app/features/variables/editor/VariableValuesPreview.tsx
+++ b/public/app/features/variables/editor/VariableValuesPreview.tsx
@@ -1,54 +1,67 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { VariableModel, VariableOption, VariableWithOptions } from '../types';
+import React, { MouseEvent, useCallback, useEffect, useState } from 'react';
+import { VariableOption, VariableWithOptions } from '../types';
 import { selectors } from '@grafana/e2e-selectors';
+import { Button, InlineFieldRow, InlineLabel, useStyles, VerticalGroup } from '@grafana/ui';
+import { GrafanaTheme } from '@grafana/data';
+import { css } from 'emotion';
 
 export interface VariableValuesPreviewProps {
-  variable: VariableModel;
+  variable: VariableWithOptions;
 }
 
-export const VariableValuesPreview: React.FunctionComponent<VariableValuesPreviewProps> = ({ variable }) => {
+export const VariableValuesPreview: React.FunctionComponent<VariableValuesPreviewProps> = ({
+  variable: { options },
+}) => {
   const [previewLimit, setPreviewLimit] = useState(20);
   const [previewOptions, setPreviewOptions] = useState<VariableOption[]>([]);
-  const showMoreOptions = useCallback(() => setPreviewLimit(previewLimit + 20), [previewLimit, setPreviewLimit]);
-  useEffect(() => {
-    if (!variable || !variable.hasOwnProperty('options')) {
-      return;
-    }
-    const variableWithOptions = variable as VariableWithOptions;
-    setPreviewOptions(variableWithOptions.options.slice(0, previewLimit));
-  }, [previewLimit, variable]);
+  const showMoreOptions = useCallback(
+    (event: MouseEvent) => {
+      event.preventDefault();
+      setPreviewLimit(previewLimit + 20);
+    },
+    [previewLimit, setPreviewLimit]
+  );
+  const styles = useStyles(getStyles);
+  useEffect(() => setPreviewOptions(options.slice(0, previewLimit)), [previewLimit, options]);
 
   if (!previewOptions.length) {
     return null;
   }
 
   return (
-    <div className="gf-form-group">
+    <VerticalGroup spacing="none">
       <h5>Preview of values</h5>
-      <div className="gf-form-inline">
+      <InlineFieldRow>
         {previewOptions.map((o, index) => (
-          <div className="gf-form" key={`${o.value}-${index}`}>
-            <span
-              className="gf-form-label"
-              aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption}
-            >
+          <InlineFieldRow key={`${o.value}-${index}`} className={styles.optionContainer}>
+            <InlineLabel aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption}>
               {o.text}
-            </span>
-          </div>
+            </InlineLabel>
+          </InlineFieldRow>
         ))}
-        {previewOptions.length > previewLimit && (
-          <div className="gf-form" ng-if="current.options.length > optionsLimit">
-            <a
-              className="gf-form-label btn-secondary"
-              onClick={showMoreOptions}
-              aria-label="Variable editor Preview of Values Show More link"
-            >
-              Show more
-            </a>
-          </div>
-        )}
-      </div>
-    </div>
+      </InlineFieldRow>
+      {options.length > previewLimit && (
+        <InlineFieldRow className={styles.optionContainer}>
+          <Button
+            onClick={showMoreOptions}
+            variant="secondary"
+            size="sm"
+            aria-label="Variable editor Preview of Values Show More link"
+          >
+            Show more
+          </Button>
+        </InlineFieldRow>
+      )}
+    </VerticalGroup>
   );
 };
 VariableValuesPreview.displayName = 'VariableValuesPreview';
+
+function getStyles(theme: GrafanaTheme) {
+  return {
+    optionContainer: css`
+      margin-left: ${theme.spacing.xs};
+      margin-bottom: ${theme.spacing.xs};
+    `,
+  };
+}
diff --git a/public/app/features/variables/guard.ts b/public/app/features/variables/guard.ts
index 22a481353d1..e4e22aa8434 100644
--- a/public/app/features/variables/guard.ts
+++ b/public/app/features/variables/guard.ts
@@ -21,6 +21,7 @@ import {
   VariableModel,
   VariableQueryEditorType,
   VariableWithMultiSupport,
+  VariableWithOptions,
 } from './types';
 import { VariableQueryProps } from '../../types';
 import { LEGACY_VARIABLE_QUERY_EDITOR_NAME } from './editor/LegacyVariableQueryEditor';
@@ -42,6 +43,15 @@ export const isMulti = (model: VariableModel): model is VariableWithMultiSupport
   return withMulti.hasOwnProperty('multi') && typeof withMulti.multi === 'boolean';
 };
 
+export const hasOptions = (model: VariableModel): model is VariableWithOptions => {
+  if (!model) {
+    return false;
+  }
+
+  const withOptions = model as VariableWithOptions;
+  return withOptions.hasOwnProperty('options') && typeof withOptions.options === 'object';
+};
+
 interface DataSourceWithLegacyVariableSupport<
   TQuery extends DataQuery = DataQuery,
   TOptions extends DataSourceJsonData = DataSourceJsonData
diff --git a/public/app/features/variables/interval/IntervalVariableEditor.tsx b/public/app/features/variables/interval/IntervalVariableEditor.tsx
index 071095b7e44..42587ce36c9 100644
--- a/public/app/features/variables/interval/IntervalVariableEditor.tsx
+++ b/public/app/features/variables/interval/IntervalVariableEditor.tsx
@@ -1,10 +1,13 @@
 import React, { ChangeEvent, FocusEvent, PureComponent } from 'react';
+import { InlineFieldRow, VerticalGroup } from '@grafana/ui';
 
 import { IntervalVariableModel } from '../types';
 import { VariableEditorProps } from '../editor/types';
-import { InlineFormLabel, LegacyForms } from '@grafana/ui';
-
-const { Switch } = LegacyForms;
+import { VariableSectionHeader } from '../editor/VariableSectionHeader';
+import { VariableTextField } from '../editor/VariableTextField';
+import { VariableSwitchField } from '../editor/VariableSwitchField';
+import { VariableSelectField } from '../editor/VariableSelectField';
+import { SelectableValue } from '@grafana/data';
 
 export interface Props extends VariableEditorProps<IntervalVariableModel> {}
 
@@ -32,10 +35,10 @@ export class IntervalVariableEditor extends PureComponent<Props> {
     });
   };
 
-  onAutoCountChanged = (event: ChangeEvent<HTMLSelectElement>) => {
+  onAutoCountChanged = (option: SelectableValue<number>) => {
     this.props.onPropChange({
       propName: 'auto_count',
-      propValue: event.target.value,
+      propValue: option.value,
       updateOptions: true,
     });
   };
@@ -49,73 +52,59 @@ export class IntervalVariableEditor extends PureComponent<Props> {
   };
 
   render() {
+    const { variable } = this.props;
+    const stepOptions = [1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 100, 200, 300, 400, 500].map(count => ({
+      label: `${count}`,
+      value: count,
+    }));
+    const stepValue = stepOptions.find(o => o.value === variable.auto_count) ?? stepOptions[0];
+
     return (
-      <>
-        <div className="gf-form-group">
-          <h5 className="section-heading">Interval Options</h5>
-
-          <div className="gf-form">
-            <span className="gf-form-label width-9">Values</span>
-            <input
-              type="text"
-              className="gf-form-input"
-              value={this.props.variable.query}
-              placeholder="1m,10m,1h,6h,1d,7d"
-              onChange={this.onQueryChanged}
-              onBlur={this.onQueryBlur}
-              required
-            />
-          </div>
-
-          <div className="gf-form-inline">
-            <Switch
-              label="Auto Option"
-              labelClass="width-9"
-              checked={this.props.variable.auto}
+      <VerticalGroup spacing="xs">
+        <VariableSectionHeader name="Interval Options" />
+        <VerticalGroup spacing="none">
+          <VariableTextField
+            value={this.props.variable.query}
+            name="Values"
+            placeholder="1m,10m,1h,6h,1d,7d"
+            onChange={this.onQueryChanged}
+            onBlur={this.onQueryBlur}
+            labelWidth={20}
+            grow
+            required
+          />
+          <InlineFieldRow>
+            <VariableSwitchField
+              value={this.props.variable.auto}
+              name="Auto Option"
+              tooltip="Interval will be dynamically calculated by dividing time range by the count specified"
               onChange={this.onAutoChange}
-              tooltip={'Interval will be dynamically calculated by dividing time range by the count specified'}
             />
-
-            {this.props.variable.auto && (
+            {this.props.variable.auto ? (
               <>
-                <div className="gf-form">
-                  <InlineFormLabel
-                    width={9}
-                    tooltip={'How many times should the current time range be divided to calculate the value'}
-                  >
-                    Step count
-                  </InlineFormLabel>
-                  <div className="gf-form-select-wrapper max-width-10">
-                    <select
-                      className="gf-form-input"
-                      value={this.props.variable.auto_count}
-                      onChange={this.onAutoCountChanged}
-                    >
-                      {[1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 100, 200, 300, 400, 500].map(count => (
-                        <option key={`auto_count_key-${count}`} label={`${count}`}>
-                          {count}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-                </div>
-                <div className="gf-form">
-                  <InlineFormLabel width={9} tooltip={'The calculated value will not go below this threshold'}>
-                    Min interval
-                  </InlineFormLabel>
-                  <input
-                    type="text"
-                    className="gf-form-input max-width-10"
-                    value={this.props.variable.auto_min}
-                    onChange={this.onAutoMinChanged}
-                    placeholder="10s"
-                  />
-                </div>
+                <VariableSelectField
+                  name="Step count"
+                  value={stepValue}
+                  options={stepOptions}
+                  onChange={this.onAutoCountChanged}
+                  tooltip="How many times should the current time range be divided to calculate the value"
+                  labelWidth={7}
+                  width={9}
+                />
+                <VariableTextField
+                  value={this.props.variable.auto_min}
+                  name="Min interval"
+                  placeholder="10s"
+                  onChange={this.onAutoMinChanged}
+                  tooltip="The calculated value will not go below this threshold"
+                  labelWidth={13}
+                  width={11}
+                />
               </>
-            )}
-          </div>
-        </div>
-      </>
+            ) : null}
+          </InlineFieldRow>
+        </VerticalGroup>
+      </VerticalGroup>
     );
   }
 }
diff --git a/public/app/features/variables/pickers/PickerRenderer.tsx b/public/app/features/variables/pickers/PickerRenderer.tsx
index 177616d54ad..ed5f42ce946 100644
--- a/public/app/features/variables/pickers/PickerRenderer.tsx
+++ b/public/app/features/variables/pickers/PickerRenderer.tsx
@@ -1,7 +1,8 @@
-import React, { FunctionComponent, useMemo } from 'react';
+import React, { FunctionComponent, PropsWithChildren, ReactElement, useMemo } from 'react';
 import { VariableHide, VariableModel } from '../types';
 import { selectors } from '@grafana/e2e-selectors';
 import { variableAdapters } from '../adapters';
+import { Tooltip } from '@grafana/ui';
 
 interface Props {
   variable: VariableModel;
@@ -9,7 +10,6 @@ interface Props {
 
 export const PickerRenderer: FunctionComponent<Props> = props => {
   const PickerToRender = useMemo(() => variableAdapters.get(props.variable.type).picker, [props.variable]);
-  const labelOrName = useMemo(() => props.variable.label || props.variable.name, [props.variable]);
 
   if (!props.variable) {
     return <div>Couldn't load variable</div>;
@@ -17,17 +17,40 @@ export const PickerRenderer: FunctionComponent<Props> = props => {
 
   return (
     <div className="gf-form">
-      {props.variable.hide === VariableHide.dontHide && (
-        <label
-          className="gf-form-label gf-form-label--variable"
-          aria-label={selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName)}
-        >
-          {labelOrName}
-        </label>
-      )}
+      <PickerLabel variable={props.variable} />
       {props.variable.hide !== VariableHide.hideVariable && PickerToRender && (
         <PickerToRender variable={props.variable} />
       )}
     </div>
   );
 };
+
+function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | null {
+  const labelOrName = useMemo(() => variable.label || variable.name, [variable]);
+
+  if (variable.hide !== VariableHide.dontHide) {
+    return null;
+  }
+
+  if (variable.description) {
+    return (
+      <Tooltip content={variable.description} placement={'bottom'}>
+        <label
+          className="gf-form-label gf-form-label--variable"
+          aria-label={selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName)}
+        >
+          {labelOrName}
+        </label>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <label
+      className="gf-form-label gf-form-label--variable"
+      aria-label={selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName)}
+    >
+      {labelOrName}
+    </label>
+  );
+}
diff --git a/public/app/features/variables/query/QueryVariableDatasourceSelect.tsx b/public/app/features/variables/query/QueryVariableDatasourceSelect.tsx
new file mode 100644
index 00000000000..2a8159fe04e
--- /dev/null
+++ b/public/app/features/variables/query/QueryVariableDatasourceSelect.tsx
@@ -0,0 +1,28 @@
+import React, { PropsWithChildren, useMemo } from 'react';
+import { DataSourceSelectItem, SelectableValue } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { VariableSelectField } from '../editor/VariableSelectField';
+
+interface Props {
+  onChange: (option: SelectableValue<string>) => void;
+  datasource: string | null;
+  dataSources?: DataSourceSelectItem[];
+}
+
+export function QueryVariableDatasourceSelect({ onChange, datasource, dataSources }: PropsWithChildren<Props>) {
+  const options = useMemo(() => {
+    return dataSources ? dataSources.map(ds => ({ label: ds.name, value: ds.value ?? '' })) : [];
+  }, [dataSources]);
+  const value = useMemo(() => options.find(o => o.value === datasource) ?? options[0], [options, datasource]);
+
+  return (
+    <VariableSelectField
+      name="Data source"
+      value={value}
+      options={options}
+      onChange={onChange}
+      labelWidth={10}
+      ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect}
+    />
+  );
+}
diff --git a/public/app/features/variables/query/QueryVariableEditor.tsx b/public/app/features/variables/query/QueryVariableEditor.tsx
index afd42b2f5a7..63874a7bcb2 100644
--- a/public/app/features/variables/query/QueryVariableEditor.tsx
+++ b/public/app/features/variables/query/QueryVariableEditor.tsx
@@ -1,9 +1,9 @@
 import React, { ChangeEvent, PureComponent } from 'react';
 import { MapDispatchToProps, MapStateToProps } from 'react-redux';
-import { InlineFormLabel, LegacyForms } from '@grafana/ui';
+import { InlineFieldRow, VerticalGroup } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 import { getTemplateSrv } from '@grafana/runtime';
-import { LoadingState } from '@grafana/data';
+import { LoadingState, SelectableValue } from '@grafana/data';
 
 import { SelectionOptionsEditor } from '../editor/SelectionOptionsEditor';
 import { QueryVariableModel, VariableRefresh, VariableSort, VariableWithMultiSupport } from '../types';
@@ -17,8 +17,12 @@ import { toVariableIdentifier } from '../state/types';
 import { changeVariableMultiValue } from '../state/actions';
 import { getTimeSrv } from '../../dashboard/services/TimeSrv';
 import { isLegacyQueryEditor, isQueryEditor } from '../guard';
-
-const { Switch } = LegacyForms;
+import { VariableSectionHeader } from '../editor/VariableSectionHeader';
+import { VariableTextField } from '../editor/VariableTextField';
+import { VariableSwitchField } from '../editor/VariableSwitchField';
+import { QueryVariableDatasourceSelect } from './QueryVariableDatasourceSelect';
+import { QueryVariableRefreshSelect } from './QueryVariableRefreshSelect';
+import { QueryVariableSortSelect } from './QueryVariableSortSelect';
 
 export interface OwnProps extends VariableEditorProps<QueryVariableModel> {}
 
@@ -61,18 +65,9 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
     }
   }
 
-  getSelectedDataSourceValue = (): string => {
-    if (!this.props.editor.extended?.dataSources?.length) {
-      return '';
-    }
-    const foundItem = this.props.editor.extended?.dataSources.find(ds => ds.value === this.props.variable.datasource);
-    const value = foundItem ? foundItem.value : this.props.editor.extended?.dataSources[0].value;
-    return value ?? '';
-  };
-
-  onDataSourceChange = (event: ChangeEvent<HTMLSelectElement>) => {
+  onDataSourceChange = (option: SelectableValue<string>) => {
     this.props.onPropChange({ propName: 'query', propValue: '' });
-    this.props.onPropChange({ propName: 'datasource', propValue: event.target.value });
+    this.props.onPropChange({ propName: 'datasource', propValue: option.value });
   };
 
   onLegacyQueryChange = async (query: any, definition: string) => {
@@ -126,12 +121,12 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
     }
   };
 
-  onRefreshChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    this.props.onPropChange({ propName: 'refresh', propValue: parseInt(event.target.value, 10) });
+  onRefreshChange = (option: SelectableValue<VariableRefresh>) => {
+    this.props.onPropChange({ propName: 'refresh', propValue: option.value });
   };
 
-  onSortChange = async (event: ChangeEvent<HTMLSelectElement>) => {
-    this.props.onPropChange({ propName: 'sort', propValue: parseInt(event.target.value, 10), updateOptions: true });
+  onSortChange = async (option: SelectableValue<VariableSort>) => {
+    this.props.onPropChange({ propName: 'sort', propValue: option.value, updateOptions: true });
   };
 
   onSelectionOptionsChange = async ({ propValue, propName }: OnPropChangeArguments<VariableWithMultiSupport>) => {
@@ -185,62 +180,28 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
 
   render() {
     return (
-      <>
-        <div className="gf-form-group">
-          <h5 className="section-heading">Query Options</h5>
-          <div className="gf-form-inline">
-            <div className="gf-form max-width-21">
-              <span className="gf-form-label width-10">Data source</span>
-              <div className="gf-form-select-wrapper max-width-14">
-                <select
-                  className="gf-form-input"
-                  value={this.getSelectedDataSourceValue()}
+      <VerticalGroup spacing="xs">
+        <VariableSectionHeader name="Query Options" />
+        <VerticalGroup spacing="md">
+          <VerticalGroup spacing="none">
+            <VerticalGroup spacing="xs">
+              <InlineFieldRow>
+                <QueryVariableDatasourceSelect
                   onChange={this.onDataSourceChange}
-                  required
-                  aria-label={
-                    selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect
-                  }
-                >
-                  {this.props.editor.extended?.dataSources?.length &&
-                    this.props.editor.extended?.dataSources.map(ds => (
-                      <option key={ds.value ?? ''} value={ds.value ?? ''} label={ds.name}>
-                        {ds.name}
-                      </option>
-                    ))}
-                </select>
-              </div>
-            </div>
-
-            <div className="gf-form max-width-22">
-              <InlineFormLabel width={10} tooltip={'When to update the values of this variable.'}>
-                Refresh
-              </InlineFormLabel>
-              <div className="gf-form-select-wrapper width-15">
-                <select
-                  className="gf-form-input"
-                  value={this.props.variable.refresh}
-                  onChange={this.onRefreshChange}
-                  aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRefreshSelect}
-                >
-                  <option label="Never" value={VariableRefresh.never}>
-                    Never
-                  </option>
-                  <option label="On Dashboard Load" value={VariableRefresh.onDashboardLoad}>
-                    On Dashboard Load
-                  </option>
-                  <option label="On Time Range Change" value={VariableRefresh.onTimeRangeChanged}>
-                    On Time Range Change
-                  </option>
-                </select>
-              </div>
-            </div>
-          </div>
-
-          {this.renderQueryEditor()}
-
-          <div className="gf-form">
-            <InlineFormLabel
-              width={10}
+                  datasource={this.props.variable.datasource}
+                  dataSources={this.props.editor.extended?.dataSources}
+                />
+                <QueryVariableRefreshSelect onChange={this.onRefreshChange} refresh={this.props.variable.refresh} />
+              </InlineFieldRow>
+              <div style={{ flexDirection: 'column' }}>{this.renderQueryEditor()}</div>
+            </VerticalGroup>
+            <VariableTextField
+              value={this.state.regex ?? this.props.variable.regex}
+              name="Regex"
+              placeholder="/.*-(?<text>.*)-(?<value>.*)-.*/"
+              onChange={this.onRegExChange}
+              onBlur={this.onRegExBlur}
+              labelWidth={20}
               tooltip={
                 <div>
                   Optional, if you want to extract part of a series name or metric node segment. Named capture groups
@@ -254,114 +215,57 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
                   ).
                 </div>
               }
-            >
-              Regex
-            </InlineFormLabel>
-            <input
-              type="text"
-              className="gf-form-input"
-              placeholder="/.*-(?<text>.*)-(?<value>.*)-.*/"
-              value={this.state.regex ?? this.props.variable.regex}
-              onChange={this.onRegExChange}
-              onBlur={this.onRegExBlur}
-              aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInput}
+              ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInput}
+              grow
             />
-          </div>
-          <div className="gf-form max-width-21">
-            <InlineFormLabel width={10} tooltip={'How to sort the values of this variable.'}>
-              Sort
-            </InlineFormLabel>
-            <div className="gf-form-select-wrapper max-width-14">
-              <select
-                className="gf-form-input"
-                value={this.props.variable.sort}
-                onChange={this.onSortChange}
-                aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelect}
-              >
-                <option label="Disabled" value={VariableSort.disabled}>
-                  Disabled
-                </option>
-                <option label="Alphabetical (asc)" value={VariableSort.alphabeticalAsc}>
-                  Alphabetical (asc)
-                </option>
-                <option label="Alphabetical (desc)" value={VariableSort.alphabeticalDesc}>
-                  Alphabetical (desc)
-                </option>
-                <option label="Numerical (asc)" value={VariableSort.numericalAsc}>
-                  Numerical (asc)
-                </option>
-                <option label="Numerical (desc)" value={VariableSort.numericalDesc}>
-                  Numerical (desc)
-                </option>
-                <option
-                  label="Alphabetical (case-insensitive, asc)"
-                  value={VariableSort.alphabeticalCaseInsensitiveAsc}
-                >
-                  Alphabetical (case-insensitive, asc)
-                </option>
-                <option
-                  label="Alphabetical (case-insensitive, desc)"
-                  value={VariableSort.alphabeticalCaseInsensitiveDesc}
-                >
-                  Alphabetical (case-insensitive, desc)
-                </option>
-              </select>
-            </div>
-          </div>
-        </div>
+            <QueryVariableSortSelect onChange={this.onSortChange} sort={this.props.variable.sort} />
+          </VerticalGroup>
 
-        <SelectionOptionsEditor
-          variable={this.props.variable}
-          onPropChange={this.onSelectionOptionsChange}
-          onMultiChanged={this.props.changeVariableMultiValue}
-        />
+          <SelectionOptionsEditor
+            variable={this.props.variable}
+            onPropChange={this.onSelectionOptionsChange}
+            onMultiChanged={this.props.changeVariableMultiValue}
+          />
 
-        <div className="gf-form-group">
-          <h5>Value groups/tags (Experimental feature)</h5>
-          <div
-            aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.valueGroupsTagsEnabledSwitch}
-          >
-            <Switch
-              label="Enabled"
-              label-class="width-10"
-              checked={this.props.variable.useTags}
+          <VerticalGroup spacing="none">
+            <h5>Value groups/tags (Experimental feature)</h5>
+            <VariableSwitchField
+              value={this.props.variable.useTags}
+              name="Enabled"
               onChange={this.onUseTagsChange}
+              ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.valueGroupsTagsEnabledSwitch}
             />
-          </div>
-          {this.props.variable.useTags && (
-            <>
-              <div className="gf-form last">
-                <span className="gf-form-label width-10">Tags query</span>
-                <input
-                  type="text"
-                  className="gf-form-input"
+            {this.props.variable.useTags ? (
+              <VerticalGroup spacing="none">
+                <VariableTextField
                   value={this.state.tagsQuery ?? this.props.variable.tagsQuery}
+                  name="Tags query"
                   placeholder="metric name or tags query"
                   onChange={this.onTagsQueryChange}
                   onBlur={this.onTagsQueryBlur}
-                  aria-label={
+                  ariaLabel={
                     selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.valueGroupsTagsTagsQueryInput
                   }
+                  labelWidth={20}
+                  grow
                 />
-              </div>
-              <div className="gf-form">
-                <li className="gf-form-label width-10">Tag values query</li>
-                <input
-                  type="text"
-                  className="gf-form-input"
+                <VariableTextField
                   value={this.state.tagValuesQuery ?? this.props.variable.tagValuesQuery}
+                  name="Tag values query"
                   placeholder="apps.$tag.*"
                   onChange={this.onTagValuesQueryChange}
                   onBlur={this.onTagValuesQueryBlur}
-                  aria-label={
+                  ariaLabel={
                     selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.valueGroupsTagsTagsValuesQueryInput
                   }
+                  labelWidth={20}
+                  grow
                 />
-              </div>
-            </>
-          )}
-        </div>
-      </>
+              </VerticalGroup>
+            ) : null}
+          </VerticalGroup>
+        </VerticalGroup>
+      </VerticalGroup>
     );
   }
 }
diff --git a/public/app/features/variables/query/QueryVariableRefreshSelect.tsx b/public/app/features/variables/query/QueryVariableRefreshSelect.tsx
new file mode 100644
index 00000000000..ae957230afd
--- /dev/null
+++ b/public/app/features/variables/query/QueryVariableRefreshSelect.tsx
@@ -0,0 +1,32 @@
+import React, { PropsWithChildren, useMemo } from 'react';
+import { SelectableValue } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { VariableSelectField } from '../editor/VariableSelectField';
+import { VariableRefresh } from '../types';
+
+interface Props {
+  onChange: (option: SelectableValue<VariableRefresh>) => void;
+  refresh: VariableRefresh;
+}
+
+const REFRESH_OPTIONS = [
+  { label: 'Never', value: VariableRefresh.never },
+  { label: 'On Dashboard Load', value: VariableRefresh.onDashboardLoad },
+  { label: 'On Time Range Change', value: VariableRefresh.onTimeRangeChanged },
+];
+
+export function QueryVariableRefreshSelect({ onChange, refresh }: PropsWithChildren<Props>) {
+  const value = useMemo(() => REFRESH_OPTIONS.find(o => o.value === refresh) ?? REFRESH_OPTIONS[0], [refresh]);
+
+  return (
+    <VariableSelectField
+      name="Refresh"
+      value={value}
+      options={REFRESH_OPTIONS}
+      onChange={onChange}
+      labelWidth={10}
+      ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRefreshSelect}
+      tooltip="When to update the values of this variable."
+    />
+  );
+}
diff --git a/public/app/features/variables/query/QueryVariableSortSelect.tsx b/public/app/features/variables/query/QueryVariableSortSelect.tsx
new file mode 100644
index 00000000000..acc6cc5588f
--- /dev/null
+++ b/public/app/features/variables/query/QueryVariableSortSelect.tsx
@@ -0,0 +1,36 @@
+import React, { PropsWithChildren, useMemo } from 'react';
+import { SelectableValue } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { VariableSelectField } from '../editor/VariableSelectField';
+import { VariableSort } from '../types';
+
+interface Props {
+  onChange: (option: SelectableValue<VariableSort>) => void;
+  sort: VariableSort;
+}
+
+const SORT_OPTIONS = [
+  { label: 'Disabled', value: VariableSort.disabled },
+  { label: 'Alphabetical (asc)', value: VariableSort.alphabeticalAsc },
+  { label: 'Alphabetical (desc)', value: VariableSort.alphabeticalDesc },
+  { label: 'Numerical (asc)', value: VariableSort.numericalAsc },
+  { label: 'Numerical (desc)', value: VariableSort.numericalDesc },
+  { label: 'Alphabetical (case-insensitive, asc)', value: VariableSort.alphabeticalCaseInsensitiveAsc },
+  { label: 'Alphabetical (case-insensitive, desc)', value: VariableSort.alphabeticalCaseInsensitiveDesc },
+];
+
+export function QueryVariableSortSelect({ onChange, sort }: PropsWithChildren<Props>) {
+  const value = useMemo(() => SORT_OPTIONS.find(o => o.value === sort) ?? SORT_OPTIONS[0], [sort]);
+
+  return (
+    <VariableSelectField
+      name="Sort"
+      value={value}
+      options={SORT_OPTIONS}
+      onChange={onChange}
+      labelWidth={10}
+      ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelect}
+      tooltip="How to sort the values of this variable."
+    />
+  );
+}
diff --git a/public/app/features/variables/query/actions.test.ts b/public/app/features/variables/query/actions.test.ts
index 68c67d42b12..7db31c17b5a 100644
--- a/public/app/features/variables/query/actions.test.ts
+++ b/public/app/features/variables/query/actions.test.ts
@@ -756,6 +756,7 @@ function createVariable(extend?: Partial<QueryVariableModel>): QueryVariableMode
     includeAll: true,
     state: LoadingState.NotStarted,
     error: null,
+    description: null,
     ...(extend ?? {}),
   };
 }
diff --git a/public/app/features/variables/state/helpers.ts b/public/app/features/variables/state/helpers.ts
index f8a7a2327b3..44a71579e43 100644
--- a/public/app/features/variables/state/helpers.ts
+++ b/public/app/features/variables/state/helpers.ts
@@ -28,6 +28,7 @@ export const getVariableState = (
       global: false,
       state: LoadingState.NotStarted,
       error: null,
+      description: null,
     };
   }
 
@@ -43,6 +44,7 @@ export const getVariableState = (
       global: false,
       state: LoadingState.NotStarted,
       error: null,
+      description: null,
     };
   }
 
diff --git a/public/app/features/variables/state/sharedReducer.test.ts b/public/app/features/variables/state/sharedReducer.test.ts
index f6d95a17dab..04ca95b1767 100644
--- a/public/app/features/variables/state/sharedReducer.test.ts
+++ b/public/app/features/variables/state/sharedReducer.test.ts
@@ -71,6 +71,7 @@ describe('sharedReducer', () => {
             global: false,
             state: LoadingState.NotStarted,
             error: null,
+            description: null,
           },
           '2': {
             id: '2',
@@ -83,6 +84,7 @@ describe('sharedReducer', () => {
             global: false,
             state: LoadingState.NotStarted,
             error: null,
+            description: null,
           },
         });
     });
@@ -107,6 +109,7 @@ describe('sharedReducer', () => {
             global: false,
             state: LoadingState.NotStarted,
             error: null,
+            description: null,
           },
           '2': {
             id: '2',
@@ -119,6 +122,7 @@ describe('sharedReducer', () => {
             global: false,
             state: LoadingState.NotStarted,
             error: null,
+            description: null,
           },
         });
     });
@@ -143,6 +147,7 @@ describe('sharedReducer', () => {
             global: false,
             state: LoadingState.NotStarted,
             error: null,
+            description: null,
           },
           '1': {
             id: '1',
@@ -155,6 +160,7 @@ describe('sharedReducer', () => {
             global: false,
             state: LoadingState.NotStarted,
             error: null,
+            description: null,
           },
           '2': {
             id: '2',
@@ -167,6 +173,7 @@ describe('sharedReducer', () => {
             global: false,
             state: LoadingState.NotStarted,
             error: null,
+            description: null,
           },
           '11': {
             ...initialQueryVariableModelState,
@@ -198,6 +205,7 @@ describe('sharedReducer', () => {
             global: false,
             state: LoadingState.NotStarted,
             error: null,
+            description: null,
           },
           '1': {
             id: '1',
@@ -210,6 +218,7 @@ describe('sharedReducer', () => {
             global: false,
             state: LoadingState.NotStarted,
             error: null,
+            description: null,
           },
           '2': {
             id: '2',
@@ -222,6 +231,7 @@ describe('sharedReducer', () => {
             global: false,
             state: LoadingState.NotStarted,
             error: null,
+            description: null,
           },
         });
     });
diff --git a/public/app/features/variables/textbox/TextBoxVariableEditor.tsx b/public/app/features/variables/textbox/TextBoxVariableEditor.tsx
index a51ae295035..7ca8e3a204d 100644
--- a/public/app/features/variables/textbox/TextBoxVariableEditor.tsx
+++ b/public/app/features/variables/textbox/TextBoxVariableEditor.tsx
@@ -1,6 +1,10 @@
 import React, { ChangeEvent, PureComponent } from 'react';
+import { VerticalGroup } from '@grafana/ui';
+
 import { TextBoxVariableModel } from '../types';
 import { VariableEditorProps } from '../editor/types';
+import { VariableSectionHeader } from '../editor/VariableSectionHeader';
+import { VariableTextField } from '../editor/VariableTextField';
 
 export interface Props extends VariableEditorProps<TextBoxVariableModel> {}
 export class TextBoxVariableEditor extends PureComponent<Props> {
@@ -15,20 +19,18 @@ export class TextBoxVariableEditor extends PureComponent<Props> {
   render() {
     const { query } = this.props.variable;
     return (
-      <div className="gf-form-group">
-        <h5 className="section-heading">Text options</h5>
-        <div className="gf-form">
-          <span className="gf-form-label">Default value</span>
-          <input
-            type="text"
-            className="gf-form-input"
-            value={query}
-            onChange={this.onQueryChange}
-            onBlur={this.onQueryBlur}
-            placeholder="default value, if any"
-          />
-        </div>
-      </div>
+      <VerticalGroup spacing="xs">
+        <VariableSectionHeader name="Text Options" />
+        <VariableTextField
+          value={query}
+          name="Default value"
+          placeholder="default value, if any"
+          onChange={this.onQueryChange}
+          onBlur={this.onQueryBlur}
+          labelWidth={20}
+          grow
+        />
+      </VerticalGroup>
     );
   }
 }
diff --git a/public/app/features/variables/types.ts b/public/app/features/variables/types.ts
index 79cd708c5c8..a466aa8d10c 100644
--- a/public/app/features/variables/types.ts
+++ b/public/app/features/variables/types.ts
@@ -139,6 +139,7 @@ export interface VariableModel extends BaseVariableModel {
   index: number;
   state: LoadingState;
   error: any | null;
+  description: string | null;
 }
 
 export const initialVariableModelState: VariableModel = {
@@ -152,6 +153,7 @@ export const initialVariableModelState: VariableModel = {
   skipUrlSync: false,
   state: LoadingState.NotStarted,
   error: null,
+  description: null,
 };
 
 export type VariableQueryEditorType<