Add latest changes from gitlab-org/gitlab@master

5 files changed, 38 insertions, 21 deletions

diff --git a/app/assets/javascripts/environments/components/new_environment_folder.vue b/app/assets/javascripts/environments/components/new_environment_folder.vue
index 510c194f15f..30a178db5cc 100644
--- a/app/assets/javascripts/environments/components/new_environment_folder.vue
+++ b/app/assets/javascripts/environments/components/new_environment_folder.vue
@@ -19,6 +19,10 @@ export default {
       type: Object,
       required: true,
     },
+    scope: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return { visible: false, interval: undefined };
@@ -27,7 +31,7 @@ export default {
     folder: {
       query: folderQuery,
       variables() {
-        return { environment: this.nestedEnvironment.latest };
+        return { environment: this.nestedEnvironment.latest, scope: this.scope };
       },
       pollInterval() {
         return this.interval;
@@ -52,7 +56,7 @@ export default {
       return this.visible ? this.$options.i18n.collapse : this.$options.i18n.expand;
     },
     count() {
-      return this.folder?.availableCount ?? 0;
+      return this.folder?.[`${this.scope}Count`] ?? 0;
     },
     folderClass() {
       return { 'gl-font-weight-bold': this.visible };
diff --git a/app/assets/javascripts/environments/components/new_environment_item.vue b/app/assets/javascripts/environments/components/new_environment_item.vue
index 80d9b300d3f..f35fabccae7 100644
--- a/app/assets/javascripts/environments/components/new_environment_item.vue
+++ b/app/assets/javascripts/environments/components/new_environment_item.vue
@@ -302,7 +302,11 @@ export default {
             class="gl-pl-4"
           />
         </div>
-        <div v-if="upcomingDeployment" :class="$options.deploymentClasses">
+        <div
+          v-if="upcomingDeployment"
+          :class="$options.deploymentClasses"
+          data-testid="upcoming-deployment-content"
+        >
           <deployment
             :deployment="upcomingDeployment"
             :class="{ 'gl-ml-7': inFolder }"
diff --git a/app/assets/javascripts/environments/components/new_environments_app.vue b/app/assets/javascripts/environments/components/new_environments_app.vue
index 67fd6ffd975..8e6457ed918 100644
--- a/app/assets/javascripts/environments/components/new_environments_app.vue
+++ b/app/assets/javascripts/environments/components/new_environments_app.vue
@@ -16,12 +16,14 @@ import EnvironmentItem from './new_environment_item.vue';
 import ConfirmRollbackModal from './confirm_rollback_modal.vue';
 import DeleteEnvironmentModal from './delete_environment_modal.vue';
 import CanaryUpdateModal from './canary_update_modal.vue';
+import EmptyState from './empty_state.vue';
 
 export default {
   components: {
     DeleteEnvironmentModal,
     CanaryUpdateModal,
     ConfirmRollbackModal,
+    EmptyState,
     EnvironmentFolder,
     EnableReviewAppModal,
     EnvironmentItem,
@@ -66,7 +68,7 @@ export default {
       query: environmentToChangeCanaryQuery,
     },
   },
-  inject: ['newEnvironmentPath', 'canCreateEnvironment'],
+  inject: ['newEnvironmentPath', 'canCreateEnvironment', 'helpPagePath'],
   i18n: {
     newEnvironmentButtonLabel: s__('Environments|New environment'),
     reviewAppButtonLabel: s__('Environments|Enable review app'),
@@ -103,6 +105,9 @@ export default {
     environments() {
       return this.environmentApp?.environments?.filter((e) => e.size === 1) ?? [];
     },
+    hasEnvironments() {
+      return this.environments.length > 0 || this.folders.length > 0;
+    },
     availableCount() {
       return this.environmentApp?.availableCount;
     },
@@ -221,19 +226,23 @@ export default {
         </template>
       </gl-tab>
     </gl-tabs>
-    <environment-folder
-      v-for="folder in folders"
-      :key="folder.name"
-      class="gl-mb-3"
-      :nested-environment="folder"
-    />
-    <environment-item
-      v-for="environment in environments"
-      :key="environment.name"
-      class="gl-mb-3 gl-border-gray-100 gl-border-1 gl-border-b-solid"
-      :environment="environment.latest"
-      @change="resetPolling"
-    />
+    <template v-if="hasEnvironments">
+      <environment-folder
+        v-for="folder in folders"
+        :key="folder.name"
+        class="gl-mb-3"
+        :scope="scope"
+        :nested-environment="folder"
+      />
+      <environment-item
+        v-for="environment in environments"
+        :key="environment.name"
+        class="gl-mb-3 gl-border-gray-100 gl-border-1 gl-border-b-solid"
+        :environment="environment.latest"
+        @change="resetPolling"
+      />
+    </template>
+    <empty-state v-else :help-path="helpPagePath" />
     <gl-pagination
       align="center"
       :total-items="totalItems"
diff --git a/app/assets/javascripts/environments/graphql/queries/folder.query.graphql b/app/assets/javascripts/environments/graphql/queries/folder.query.graphql
index 3292c916b2e..e8c145ee916 100644
--- a/app/assets/javascripts/environments/graphql/queries/folder.query.graphql
+++ b/app/assets/javascripts/environments/graphql/queries/folder.query.graphql
@@ -1,5 +1,5 @@
-query getEnvironmentFolder($environment: NestedLocalEnvironment) {
-  folder(environment: $environment) @client {
+query getEnvironmentFolder($environment: NestedLocalEnvironment, $scope: String) {
+  folder(environment: $environment, scope: $scope) @client {
     availableCount
     environments
     stoppedCount
diff --git a/app/assets/javascripts/environments/graphql/resolvers.js b/app/assets/javascripts/environments/graphql/resolvers.js
index 2544fd5273c..a7866c1e778 100644
--- a/app/assets/javascripts/environments/graphql/resolvers.js
+++ b/app/assets/javascripts/environments/graphql/resolvers.js
@@ -59,8 +59,8 @@ export const resolvers = (endpoint) => ({
         };
       });
     },
-    folder(_, { environment: { folderPath } }) {
-      return axios.get(folderPath, { params: { per_page: 3 } }).then((res) => ({
+    folder(_, { environment: { folderPath }, scope }) {
+      return axios.get(folderPath, { params: { scope, per_page: 3 } }).then((res) => ({
         availableCount: res.data.available_count,
         environments: res.data.environments.map(mapEnvironment),
         stoppedCount: res.data.stopped_count,