Commit 0d47c86e authored by Angelo Gulina's avatar Angelo Gulina Committed by Nicolò Maria Mezzopera

Migrate custom Tabs to GlTabs

parent 99a7757c
......@@ -49,7 +49,7 @@ export default {
variant="info"
category="secondary"
type="button"
class="js-enable-review-app-button"
class="gl-w-full js-enable-review-app-button"
>
{{ s__('Environments|Enable review app') }}
</gl-button>
......
<script>
import { GlDeprecatedButton } from '@gitlab/ui';
import { GlBadge, GlButton, GlTab, GlTabs } from '@gitlab/ui';
import { deprecatedCreateFlash as Flash } from '~/flash';
import { s__ } from '~/locale';
import emptyState from './empty_state.vue';
......@@ -16,7 +16,10 @@ export default {
ConfirmRollbackModal,
emptyState,
EnableReviewAppButton,
GlDeprecatedButton,
GlBadge,
GlButton,
GlTab,
GlTabs,
StopEnvironmentModal,
DeleteEnvironmentModal,
},
......@@ -124,27 +127,70 @@ export default {
};
</script>
<template>
<div>
<div class="environments-section">
<stop-environment-modal :environment="environmentInStopModal" />
<delete-environment-modal :environment="environmentInDeleteModal" />
<confirm-rollback-modal :environment="environmentInRollbackModal" />
<div class="top-area">
<tabs :tabs="tabs" scope="environments" @onChangeTab="onChangeTab" />
<div class="nav-controls">
<enable-review-app-button v-if="state.reviewAppDetails.can_setup_review_app" class="mr-2" />
<gl-deprecated-button
<div class="gl-w-full">
<div
class="
gl-display-flex
gl-flex-direction-column
gl-mt-3
gl-display-md-none!"
>
<enable-review-app-button
v-if="state.reviewAppDetails.can_setup_review_app"
class="gl-mb-3 gl-flex-fill-1"
/>
<gl-button
v-if="canCreateEnvironment && !isLoading"
:href="newEnvironmentPath"
category="primary"
variant="success"
>
{{ s__('Environments|New environment') }}
</gl-deprecated-button>
</gl-button>
</div>
<gl-tabs content-class="gl-display-none">
<gl-tab
v-for="(tab, idx) in tabs"
:key="idx"
:title-item-class="`js-environments-tab-${tab.scope}`"
@click="onChangeTab(tab.scope)"
>
<template #title>
<span>{{ tab.name }}</span>
<gl-badge size="sm" class="gl-tab-counter-badge">{{ tab.count }}</gl-badge>
</template>
</gl-tab>
<template #tabs-end>
<div
class="
gl-display-none
gl-display-md-flex
gl-lg-align-items-center
gl-lg-flex-direction-row
gl-lg-flex-fill-1
gl-lg-justify-content-end
gl-lg-mt-0"
>
<enable-review-app-button
v-if="state.reviewAppDetails.can_setup_review_app"
class="gl-mb-3 gl-lg-mr-3 gl-lg-mb-0"
/>
<gl-button
v-if="canCreateEnvironment && !isLoading"
:href="newEnvironmentPath"
category="primary"
variant="success"
>
{{ s__('Environments|New environment') }}
</gl-button>
</div>
</template>
</gl-tabs>
<container
:is-loading="isLoading"
:environments="state.environments"
......@@ -163,4 +209,5 @@ export default {
</template>
</container>
</div>
</div>
</template>
......@@ -10,6 +10,10 @@ import { validateParams } from '~/pipelines/utils';
export default {
methods: {
onChangeTab(scope) {
if (this.scope === scope) {
return;
}
let params = {
scope,
page: '1',
......
---
title: Migrate custom Tabs to GlTabs
merge_request: 42236
author:
type: changed
......@@ -372,7 +372,7 @@ RSpec.describe 'Environments page', :js do
let(:role) { :developer }
it 'developer creates a new environment with a valid name' do
within(".top-area") { click_link 'New environment' }
within(".environments-section") { click_link 'New environment' }
fill_in('Name', with: 'production')
click_on 'Save'
......@@ -380,7 +380,7 @@ RSpec.describe 'Environments page', :js do
end
it 'developer creates a new environmetn with invalid name' do
within(".top-area") { click_link 'New environment' }
within(".environments-section") { click_link 'New environment' }
fill_in('Name', with: 'name,with,commas')
click_on 'Save'
......
......@@ -40,6 +40,9 @@ describe('Environment', () => {
return axios.waitForAll();
};
const findEnvironmentsTabAvailable = () => wrapper.find('.js-environments-tab-available > a');
const findEnvironmentsTabStopped = () => wrapper.find('.js-environments-tab-stopped > a');
beforeEach(() => {
mock = new MockAdapter(axios);
});
......@@ -108,9 +111,16 @@ describe('Environment', () => {
it('should make an API request when using tabs', () => {
jest.spyOn(wrapper.vm, 'updateContent').mockImplementation(() => {});
wrapper.find('.js-environments-tab-stopped').trigger('click');
findEnvironmentsTabStopped().trigger('click');
expect(wrapper.vm.updateContent).toHaveBeenCalledWith({ scope: 'stopped', page: '1' });
});
it('should not make the same API request when clicking on the current scope tab', () => {
// component starts at available
jest.spyOn(wrapper.vm, 'updateContent').mockImplementation(() => {});
findEnvironmentsTabAvailable().trigger('click');
expect(wrapper.vm.updateContent).toHaveBeenCalledTimes(0);
});
});
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment