Migrate custom Tabs to GlTabs

app/assets/javascripts/environments/components/enable_review_app_button.vue

@@ -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>

app/assets/javascripts/environments/components/environments_app.vue

 <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,43 +127,87 @@ 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"
+        :pagination="state.paginationInformation"
+        :can-read-environment="canReadEnvironment"
+        :canary-deployment-feature-id="canaryDeploymentFeatureId"
+        :show-canary-deployment-callout="showCanaryDeploymentCallout"
+        :user-callouts-path="userCalloutsPath"
+        :lock-promotion-svg-path="lockPromotionSvgPath"
+        :help-canary-deployments-path="helpCanaryDeploymentsPath"
+        :deploy-boards-help-path="deployBoardsHelpPath"
+        @onChangePage="onChangePage"
+      >
+        <template v-if="!isLoading && state.environments.length === 0" #emptyState>
+          <empty-state :help-path="helpPagePath" />
+        </template>
+      </container>
     </div>
-
-    <container
-      :is-loading="isLoading"
-      :environments="state.environments"
-      :pagination="state.paginationInformation"
-      :can-read-environment="canReadEnvironment"
-      :canary-deployment-feature-id="canaryDeploymentFeatureId"
-      :show-canary-deployment-callout="showCanaryDeploymentCallout"
-      :user-callouts-path="userCalloutsPath"
-      :lock-promotion-svg-path="lockPromotionSvgPath"
-      :help-canary-deployments-path="helpCanaryDeploymentsPath"
-      :deploy-boards-help-path="deployBoardsHelpPath"
-      @onChangePage="onChangePage"
-    >
-      <template v-if="!isLoading && state.environments.length === 0" #emptyState>
-        <empty-state :help-path="helpPagePath" />
-      </template>
-    </container>
   </div>
 </template>

app/assets/javascripts/vue_shared/mixins/ci_pagination_api_mixin.js

@@ -10,6 +10,10 @@ import { validateParams } from '~/pipelines/utils';
 export default {
   methods: {
     onChangeTab(scope) {
+      if (this.scope === scope) {
+        return;
+      }
+
       let params = {
         scope,
         page: '1',

changelogs/unreleased/230719-tabs-vue-migrate-app-assets-javascripts-environments-components-en.yml

+---
+title: Migrate custom Tabs to GlTabs
+merge_request: 42236
+author:
+type: changed

spec/features/projects/environments/environments_spec.rb

@@ -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'
 

spec/frontend/environments/environments_app_spec.js

@@ -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);
+        });
       });
     });
   });