Add latest changes from gitlab-org/gitlab@master

3 files changed, 27 insertions, 5 deletions

diff --git a/app/assets/javascripts/environments/components/new_environment_folder.vue b/app/assets/javascripts/environments/components/new_environment_folder.vue
index 30a178db5cc..d5c6d26cfd0 100644
--- a/app/assets/javascripts/environments/components/new_environment_folder.vue
+++ b/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 };
diff --git a/app/assets/javascripts/environments/components/new_environments_app.vue b/app/assets/javascripts/environments/components/new_environments_app.vue
index 8e6457ed918..087e9cd2fcd 100644
--- a/app/assets/javascripts/environments/components/new_environments_app.vue
+++ b/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">
diff --git a/app/assets/javascripts/environments/constants.js b/app/assets/javascripts/environments/constants.js
index 6d427bef4e6..942491039d6 100644
--- a/app/assets/javascripts/environments/constants.js
+++ b/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',
+};