diff options
| author | Jose Vargas <jvargas@gitlab.com> | 2019-03-13 13:50:55 -0600 |
|---|---|---|
| committer | Jose Vargas <jvargas@gitlab.com> | 2019-03-13 13:50:55 -0600 |
| commit | febf776303d67343076df8912d88253322ffa16a (patch) | |
| tree | c10af2b5b9c9840fbf9d9e599f68fca096ce272f | |
| parent | 4e3f957583443fc7110c0024e2384324c8d34835 (diff) | |
| download | gitlab-ce-jivl-replace-environments-dropdown-with-gitlab-ui-dropdown.tar.gz | |
Change environments dropdownjivl-replace-environments-dropdown-with-gitlab-ui-dropdown
The environments dropdown will know use the gitlab-ui
dropdown component
| -rw-r--r-- | app/assets/javascripts/monitoring/components/dashboard.vue | 35 | ||||
| -rw-r--r-- | spec/javascripts/monitoring/dashboard_spec.js | 14 |
2 files changed, 22 insertions, 27 deletions
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index 04ac73c1d8d..a3ebbb89506 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -173,27 +173,20 @@ export default { <div class="dropdowns d-flex align-items-center justify-content-between"> <div class="d-flex align-items-center"> <span class="font-weight-bold">{{ s__('Metrics|Environment') }}</span> - <div class="dropdown prepend-left-10"> - <button class="dropdown-menu-toggle" data-toggle="dropdown" type="button"> - <span>{{ currentEnvironmentName }}</span> - <icon name="chevron-down" /> - </button> - <div - v-if="store.environmentsData.length > 0" - class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up js-environments-dropdown" - > - <ul> - <li v-for="environment in store.environmentsData" :key="environment.id"> - <a - :href="environment.metrics_path" - :class="{ 'is-active': environment.name == currentEnvironmentName }" - class="dropdown-item" - >{{ environment.name }}</a - > - </li> - </ul> - </div> - </div> + <gl-dropdown + id="environments-dropdown" + class="prepend-left-10" + toggle-class="dropdown-menu-toggle" + :text="currentEnvironmentName" + :disabled="!store.environmentsData.length > 0" + > + <gl-dropdown-item + v-for="environment in store.environmentsData" + :key="environment.id" + :active="environment.name == currentEnvironmentName" + active-class="is-active" + >{{ environment.name }}</gl-dropdown-item> + </gl-dropdown> </div> <div class="d-flex align-items-center"> <span class="font-weight-bold">{{ s__('Metrics|Show Last') }}</span> diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js index 3e5bb80e091..e7bc83b9198 100644 --- a/spec/javascripts/monitoring/dashboard_spec.js +++ b/spec/javascripts/monitoring/dashboard_spec.js @@ -109,7 +109,7 @@ describe('Dashboard', () => { setTimeout(() => { const dropdownMenuEnvironments = component.$el.querySelectorAll( - '.js-environments-dropdown ul li a', + '#environments-dropdown .dropdown-item', ); expect(dropdownMenuEnvironments.length).toEqual(component.store.environmentsData.length); @@ -127,7 +127,7 @@ describe('Dashboard', () => { setTimeout(() => { const dropdownMenuEnvironments = component.$el.querySelectorAll( - '.js-environments-dropdown ul', + '#environments-dropdown .dropdown-item', ); expect(dropdownMenuEnvironments.length).toEqual(0); @@ -144,12 +144,14 @@ describe('Dashboard', () => { component.store.storeEnvironmentsData(environmentData); setTimeout(() => { - const dropdownIsActiveElement = component.$el.querySelectorAll( - '.js-environments-dropdown ul li a.is-active', + const dropdownItems = component.$el.querySelectorAll( + '#environments-dropdown .dropdown-item', ); - expect(dropdownIsActiveElement.length).toEqual(1); - expect(dropdownIsActiveElement[0].textContent.trim()).toEqual( + const dropdownActiveElements = Array.from(dropdownItems).filter(el => el.getAttribute('active') === 'true') + + expect(dropdownActiveElements.length).toEqual(1); + expect(dropdownActiveElements[0].textContent.trim()).toEqual( component.currentEnvironmentName, ); done(); |