Chore: Adds e2e tests for Variables (#29341)

* Variables: Adds description field

* Refactor: Adds new Form components

* Refactor: Fixes aria labels

* Refactor: removes skipped tests

* Tests: Adds e2e tests for loading variables from URL

* Tests: Adds set options from ui

* Tests: Adds create query variable tests

* Chore: 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/variables/load-options-from-url.ts

+import { e2e } from '@grafana/e2e';
+
+const PAGE_UNDER_TEST = '-Y-tnEDWk';
+
+describe('Variables - Load options from Url', () => {
+  it('default options should be correct', () => {
+    e2e.flows.login('admin', 'admin');
+    e2e.flows.openDashboard({ uid: PAGE_UNDER_TEST });
+    e2e().server();
+    e2e()
+      .route({
+        method: 'POST',
+        url: '/api/tsdb/query',
+      })
+      .as('query');
+
+    e2e().wait('@query');
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A')
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
+      .should('be.visible')
+      .within(() => {
+        e2e()
+          .get('.variable-option')
+          .should('have.length', 4);
+      });
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('A').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('B').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('C').should('be.visible');
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('AA')
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
+      .should('be.visible')
+      .within(() => {
+        e2e()
+          .get('.variable-option')
+          .should('have.length', 4);
+      });
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AA').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AB').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AC').should('be.visible');
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All')
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
+      .should('be.visible')
+      .within(() => {
+        e2e()
+          .get('.variable-option')
+          .should('have.length', 4);
+      });
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AAA').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AAB').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AAC').should('be.visible');
+  });
+
+  it('options set in url should load correct options', () => {
+    e2e.flows.login('admin', 'admin');
+    e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?var-datacenter=B&var-server=BB&var-pod=BBB` });
+    e2e().server();
+    e2e()
+      .route({
+        method: 'POST',
+        url: '/api/tsdb/query',
+      })
+      .as('query');
+
+    e2e().wait('@query');
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('B')
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
+      .should('be.visible')
+      .within(() => {
+        e2e()
+          .get('.variable-option')
+          .should('have.length', 4);
+      });
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('A').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('B').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('C').should('be.visible');
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('BB')
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
+      .should('be.visible')
+      .within(() => {
+        e2e()
+          .get('.variable-option')
+          .should('have.length', 4);
+      });
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
+    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.submenuItemValueDropDownValueLinkTexts('BBB')
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
+      .should('be.visible')
+      .within(() => {
+        e2e()
+          .get('.variable-option')
+          .should('have.length', 4);
+      });
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
+    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');
+  });
+
+  it('options set in url that do not exist should load correct options', () => {
+    e2e.flows.login('admin', 'admin');
+    // @ts-ignore some typing issue
+    e2e().on('uncaught:exception', err => {
+      if (err.stack?.indexOf("Couldn't find any field of type string in the results.") !== -1) {
+        // return false to prevent the error from
+        // failing this test
+        return false;
+      }
+
+      return true;
+    });
+
+    e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?var-datacenter=X` });
+    e2e().server();
+    e2e()
+      .route({
+        method: 'POST',
+        url: '/api/tsdb/query',
+      })
+      .as('query');
+
+    e2e().wait('@query');
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('X')
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
+      .should('be.visible')
+      .within(() => {
+        e2e()
+          .get('.variable-option')
+          .should('have.length', 4);
+      });
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('A').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('B').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('C').should('be.visible');
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('AA')
+      .should('be.visible')
+      .click();
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
+      .should('be.visible')
+      .within(() => {
+        e2e()
+          .get('.variable-option')
+          .should('have.length', 0);
+      });
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All')
+      .should('be.visible')
+      .click();
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
+      .should('be.visible')
+      .within(() => {
+        e2e()
+          .get('.variable-option')
+          .should('have.length', 0);
+      });
+  });
+});

e2e/suite1/specs/variables/new-query-variable.ts

+import { e2e } from '@grafana/e2e';
+
+const PAGE_UNDER_TEST = '-Y-tnEDWk';
+
+describe('Variables - Add variable', () => {
+  it('query variable should be default and default fields should be correct', () => {
+    e2e.flows.login('admin', 'admin');
+    e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?editview=templating` });
+
+    e2e.pages.Dashboard.Settings.Variables.List.newButton()
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput()
+      .should('be.visible')
+      .within(input => {
+        expect(input.attr('placeholder')).equals('name');
+        expect(input.val()).equals('query0');
+      });
+    e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect()
+      .should('be.visible')
+      .within(select => {
+        e2e.components.Select.singleValue()
+          .should('be.visible')
+          .should('have.text', 'Query');
+      });
+    e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput()
+      .should('be.visible')
+      .within(input => {
+        expect(input.attr('placeholder')).equals('optional display name');
+        expect(input.val()).equals('');
+      });
+    e2e()
+      .get('#Description')
+      .should('be.visible')
+      .within(input => {
+        expect(input.attr('placeholder')).equals('descriptive text');
+        expect(input.val()).equals('');
+      });
+    e2e.pages.Dashboard.Settings.Variables.Edit.General.generalHideSelect()
+      .should('be.visible')
+      .within(select => {
+        e2e.components.Select.singleValue().should('have.text', '');
+      });
+
+    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect()
+      .should('be.visible')
+      .within(select => {
+        e2e.components.Select.singleValue().should('have.text', '');
+      });
+
+    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput().should('not.exist');
+    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRefreshSelect()
+      .should('be.visible')
+      .within(select => {
+        e2e.components.Select.singleValue().should('have.text', 'Never');
+      });
+    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInput()
+      .should('be.visible')
+      .within(input => {
+        const placeholder = '/.*-(?<text>.*)-(?<value>.*)-.*/';
+        expect(input.attr('placeholder')).equals(placeholder);
+        expect(input.val()).equals('');
+      });
+    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelect()
+      .should('be.visible')
+      .within(select => {
+        e2e.components.Select.singleValue().should('have.text', 'Disabled');
+      });
+    e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch()
+      .should('be.visible')
+      .within(select => {
+        e2e()
+          .get('input')
+          .should('not.be.checked');
+      });
+    e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch()
+      .should('be.visible')
+      .within(select => {
+        e2e()
+          .get('input')
+          .should('not.be.checked');
+      });
+    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.valueGroupsTagsEnabledSwitch()
+      .should('be.visible')
+      .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');
+  });
+
+  it('adding a single value query variable', () => {
+    e2e.flows.login('admin', 'admin');
+    e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?editview=templating` });
+
+    e2e.pages.Dashboard.Settings.Variables.List.newButton()
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput()
+      .should('be.visible')
+      .clear()
+      .type('a label');
+
+    e2e()
+      .get('#Description')
+      .should('be.visible')
+      .clear()
+      .type('a description');
+
+    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect()
+      .should('be.visible')
+      .within(() => {
+        e2e.components.Select.input()
+          .should('be.visible')
+          .type('gdev-testdata')
+          .type('{enter}');
+      });
+
+    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput()
+      .should('be.visible')
+      .type('*')
+      .blur();
+
+    e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().should('exist');
+
+    e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton()
+      .should('be.visible')
+      .click();
+
+    e2e().wait(500);
+
+    e2e.components.BackButton.backArrow()
+      .should('be.visible')
+      .click({ force: true });
+
+    e2e.pages.Dashboard.SubMenu.submenuItemLabels('a label').should('be.visible');
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A')
+      .eq(1)
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
+      .should('be.visible')
+      .within(() => {
+        e2e()
+          .get('.variable-option')
+          .should('have.length', 3);
+      });
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('A').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('B').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('C').should('be.visible');
+  });
+
+  it('adding a multi value query variable', () => {
+    e2e.flows.login('admin', 'admin');
+    e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?editview=templating` });
+
+    e2e.pages.Dashboard.Settings.Variables.List.newButton()
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput()
+      .should('be.visible')
+      .clear()
+      .type('a label');
+
+    e2e()
+      .get('#Description')
+      .should('be.visible')
+      .clear()
+      .type('a description');
+
+    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect()
+      .should('be.visible')
+      .within(() => {
+        e2e.components.Select.input()
+          .should('be.visible')
+          .type('gdev-testdata')
+          .type('{enter}');
+      });
+
+    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput()
+      .should('be.visible')
+      .type('*')
+      .blur();
+
+    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.previewOfValuesOption().should('exist');
+
+    e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton()
+      .should('be.visible')
+      .click();
+
+    e2e().wait(500);
+
+    e2e.components.BackButton.backArrow()
+      .should('be.visible')
+      .click({ force: true });
+
+    e2e.pages.Dashboard.SubMenu.submenuItemLabels('a label').should('be.visible');
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A')
+      .eq(1)
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
+      .should('be.visible')
+      .within(() => {
+        e2e()
+          .get('.variable-option')
+          .should('have.length', 4);
+      });
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('A').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('B').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('C').should('be.visible');
+  });
+});

e2e/suite1/specs/variables/set-options-from-ui.ts

+import { e2e } from '@grafana/e2e';
+
+const PAGE_UNDER_TEST = '-Y-tnEDWk';
+
+describe('Variables - Set options from ui', () => {
+  it('clicking a value that is not part of dependents options should change these to All', () => {
+    e2e.flows.login('admin', 'admin');
+    e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?var-datacenter=A&var-server=AA&var-pod=AAA` });
+    e2e().server();
+    e2e()
+      .route({
+        method: 'POST',
+        url: '/api/tsdb/query',
+      })
+      .as('query');
+
+    e2e().wait('@query');
+
+    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();
+
+    e2e().wait('@query');
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('B')
+      .scrollIntoView()
+      .should('be.visible');
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All').should('have.length', 2);
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('All')
+      .eq(0)
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
+      .should('be.visible')
+      .within(() => {
+        e2e()
+          .get('.variable-option')
+          .should('have.length', 4);
+      });
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
+    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.submenuItemValueDropDownValueLinkTexts('All')
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
+      .should('be.visible')
+      .within(() => {
+        e2e()
+          .get('.variable-option')
+          .should('have.length', 10);
+      });
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BAA').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BAB').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('BAC').should('be.visible');
+    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');
+  });
+
+  it('adding a value that is not part of dependents options should add the new values dependant options', () => {
+    e2e.flows.login('admin', 'admin');
+    e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?var-datacenter=A&var-server=AA&var-pod=AAA` });
+    e2e().server();
+    e2e()
+      .route({
+        method: 'POST',
+        url: '/api/tsdb/query',
+      })
+      .as('query');
+
+    e2e().wait('@query');
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A')
+      .should('be.visible')
+      .click();
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('B')
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.Toolbar.navBar().click();
+
+    e2e().wait('@query');
+    e2e().wait(500);
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A + B')
+      .scrollIntoView()
+      .should('be.visible');
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('AA')
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
+      .should('be.visible')
+      .within(() => {
+        e2e()
+          .get('.variable-option')
+          .should('have.length', 7);
+      });
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AA').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AB').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AC').should('be.visible');
+    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.submenuItemValueDropDownValueLinkTexts('AAA')
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
+      .should('be.visible')
+      .within(() => {
+        e2e()
+          .get('.variable-option')
+          .should('have.length', 4);
+      });
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AAA').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AAB').should('be.visible');
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('AAC').should('be.visible');
+  });
+
+  it('removing a value that is part of dependents options should remove the new values dependant options', () => {
+    e2e.flows.login('admin', 'admin');
+    e2e.flows.openDashboard({
+      uid: `${PAGE_UNDER_TEST}?var-datacenter=A&var-datacenter=B&var-server=AA&var-server=BB&var-pod=AAA&var-pod=BBB`,
+    });
+    e2e().server();
+    e2e()
+      .route({
+        method: 'POST',
+        url: '/api/tsdb/query',
+      })
+      .as('query');
+
+    e2e().wait('@query');
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('A + B')
+      .should('be.visible')
+      .click();
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('A')
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.Toolbar.navBar().click();
+
+    e2e().wait('@query');
+    e2e().wait(500);
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('B')
+      .scrollIntoView()
+      .should('be.visible');
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts('BB')
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
+      .should('be.visible')
+      .within(() => {
+        e2e()
+          .get('.variable-option')
+          .should('have.length', 4);
+      });
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('All').should('be.visible');
+    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.submenuItemValueDropDownValueLinkTexts('BBB')
+      .should('be.visible')
+      .click();
+
+    e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown()
+      .should('be.visible')
+      .within(() => {
+        e2e()
+          .get('.variable-option')
+          .should('have.length', 4);
+      });
+
+    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');
+  });
+});