Merge branch 'afontaine/environment-scope-refactor' into 'master'

Refactor environment scope to use constants

See merge request gitlab-org/gitlab!82847

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

@@ -3,6 +3,7 @@ import { GlButton, GlCollapse, GlIcon, GlBadge, GlLink } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import pollIntervalQuery from '../graphql/queries/poll_interval.query.graphql';
 import folderQuery from '../graphql/queries/folder.query.graphql';
+import { ENVIRONMENT_COUNT_BY_SCOPE } from '../constants';
 import EnvironmentItem from './new_environment_item.vue';
 
 export default {
@@ -56,7 +57,8 @@ export default {
       return this.visible ? this.$options.i18n.collapse : this.$options.i18n.expand;
     },
     count() {
-      return this.folder?.[`${this.scope}Count`] ?? 0;
+      const count = ENVIRONMENT_COUNT_BY_SCOPE[this.scope];
+      return this.folder?.[count] ?? 0;
     },
     folderClass() {
       return { 'gl-font-weight-bold': this.visible };

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

@@ -9,6 +9,7 @@ import environmentToDeleteQuery from '../graphql/queries/environment_to_delete.q
 import environmentToRollbackQuery from '../graphql/queries/environment_to_rollback.query.graphql';
 import environmentToStopQuery from '../graphql/queries/environment_to_stop.query.graphql';
 import environmentToChangeCanaryQuery from '../graphql/queries/environment_to_change_canary.query.graphql';
+import { ENVIRONMENTS_SCOPE } from '../constants';
 import EnvironmentFolder from './new_environment_folder.vue';
 import EnableReviewAppModal from './enable_review_app_modal.vue';
 import StopEnvironmentModal from './stop_environment_modal.vue';
@@ -82,12 +83,14 @@ export default {
   },
   modalId: 'enable-review-app-info',
   data() {
-    const { page = '1', scope = 'available' } = queryToObject(window.location.search);
+    const { page = '1', scope } = queryToObject(window.location.search);
     return {
       interval: undefined,
       isReviewAppModalVisible: false,
       page: parseInt(page, 10),
-      scope,
+      scope: Object.values(ENVIRONMENTS_SCOPE).includes(scope)
+        ? scope
+        : ENVIRONMENTS_SCOPE.AVAILABLE,
       environmentToDelete: {},
       environmentToRollback: {},
       environmentToStop: {},
@@ -188,6 +191,7 @@ export default {
       });
     },
   },
+  ENVIRONMENTS_SCOPE,
 };
 </script>
 <template>
@@ -209,7 +213,10 @@ export default {
       query-param-name="scope"
       @primary="showReviewAppModal"
     >
-      <gl-tab query-param-value="available" @click="setScope('available')">
+      <gl-tab
+        :query-param-value="$options.ENVIRONMENTS_SCOPE.AVAILABLE"
+        @click="setScope($options.ENVIRONMENTS_SCOPE.AVAILABLE)"
+      >
         <template #title>
           <span>{{ $options.i18n.available }}</span>
           <gl-badge size="sm" class="gl-tab-counter-badge">
@@ -217,7 +224,10 @@ export default {
           </gl-badge>
         </template>
       </gl-tab>
-      <gl-tab query-param-value="stopped" @click="setScope('stopped')">
+      <gl-tab
+        :query-param-value="$options.ENVIRONMENTS_SCOPE.STOPPED"
+        @click="setScope($options.ENVIRONMENTS_SCOPE.STOPPED)"
+      >
         <template #title>
           <span>{{ $options.i18n.stopped }}</span>
           <gl-badge size="sm" class="gl-tab-counter-badge">

app/assets/javascripts/environments/constants.js

@@ -38,3 +38,13 @@ export const CANARY_STATUS = {
 };
 
 export const CANARY_UPDATE_MODAL = 'confirm-canary-change';
+
+export const ENVIRONMENTS_SCOPE = {
+  AVAILABLE: 'available',
+  STOPPED: 'stopped',
+};
+
+export const ENVIRONMENT_COUNT_BY_SCOPE = {
+  [ENVIRONMENTS_SCOPE.AVAILABLE]: 'availableCount',
+  [ENVIRONMENTS_SCOPE.STOPPED]: 'stoppedCount',
+};

app/controllers/projects/environments_controller.rb

@@ -29,13 +29,14 @@ class Projects::EnvironmentsController < Projects::ApplicationController
   feature_category :continuous_delivery
 
   def index
-    @environments = project.environments
-      .with_state(params[:scope] || :available)
     @project = ProjectPresenter.new(project, current_user: current_user)
 
     respond_to do |format|
       format.html
       format.json do
+        @environments = project.environments
+          .with_state(params[:scope] || :available)
+
         Gitlab::PollingInterval.set_header(response, interval: 3_000)
         environments_count_by_state = project.environments.count_by_state
 
@@ -52,14 +53,15 @@ class Projects::EnvironmentsController < Projects::ApplicationController
   # Returns all environments for a given folder
   # rubocop: disable CodeReuse/ActiveRecord
   def folder
-    folder_environments = project.environments.where(environment_type: params[:id])
-    @environments = folder_environments.with_state(params[:scope] || :available)
-      .order(:name)
     @folder = params[:id]
 
     respond_to do |format|
       format.html
       format.json do
+        folder_environments = project.environments.where(environment_type: params[:id])
+        @environments = folder_environments.with_state(params[:scope] || :available)
+          .order(:name)
+
         render json: {
           environments: serialize_environments(request, response),
           available_count: folder_environments.available.count,

spec/frontend/environments/new_environments_app_spec.js

@@ -70,8 +70,9 @@ describe('~/environments/components/new_environments_app.vue', () => {
       previousPage: 1,
       __typename: 'LocalPageInfo',
     },
+    location = '?scope=available&page=2',
   }) => {
-    setWindowLocation('?scope=available&page=2');
+    setWindowLocation(location);
     environmentAppMock.mockReturnValue(environmentsApp);
     environmentFolderMock.mockReturnValue(folder);
     paginationMock.mockReturnValue(pageInfo);
@@ -98,6 +99,21 @@ describe('~/environments/components/new_environments_app.vue', () => {
     wrapper.destroy();
   });
 
+  it('should request available environments if the scope is invalid', async () => {
+    await createWrapperWithMocked({
+      environmentsApp: resolvedEnvironmentsApp,
+      folder: resolvedFolder,
+      location: '?scope=bad&page=2',
+    });
+
+    expect(environmentAppMock).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({ scope: 'available', page: 2 }),
+      expect.anything(),
+      expect.anything(),
+    );
+  });
+
   it('should show all the folders that are fetched', async () => {
     await createWrapperWithMocked({
       environmentsApp: resolvedEnvironmentsApp,