Add latest changes from gitlab-org/gitlab@master

4 files changed, 80 insertions, 10 deletions

diff --git a/app/assets/javascripts/environments/folder/environments_folder_app.vue b/app/assets/javascripts/environments/folder/environments_folder_app.vue
index a963ca9b144..f2c1b2f5cdf 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_app.vue
+++ b/app/assets/javascripts/environments/folder/environments_folder_app.vue
@@ -1,12 +1,47 @@
 <script>
+import { GlSkeletonLoader } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import folderQuery from '../graphql/queries/folder.query.graphql';
+import EnvironmentItem from '../components/new_environment_item.vue';
 
 export default {
+  components: {
+    GlSkeletonLoader,
+    EnvironmentItem,
+  },
   props: {
     folderName: {
       type: String,
       required: true,
     },
+    folderPath: {
+      type: String,
+      required: true,
+    },
+  },
+  apollo: {
+    folder: {
+      query: folderQuery,
+      variables() {
+        return {
+          environment: this.environmentQueryData,
+          scope: '',
+          search: '',
+          perPage: 10,
+        };
+      },
+    },
+  },
+  computed: {
+    environmentQueryData() {
+      return { folderPath: this.folderPath };
+    },
+    environments() {
+      return this.folder?.environments;
+    },
+    isLoading() {
+      return this.$apollo.queries.folder.loading;
+    },
   },
   i18n: {
     pageTitle: s__('Environments|Environments'),
@@ -14,8 +49,26 @@ export default {
 };
 </script>
 <template>
-  <h4 class="gl-font-weight-normal" data-testid="folder-name">
-    {{ $options.i18n.pageTitle }} /
-    <b>{{ folderName }}</b>
-  </h4>
+  <div>
+    <h4 class="gl-font-weight-normal" data-testid="folder-name">
+      {{ $options.i18n.pageTitle }} /
+      <b>{{ folderName }}</b>
+    </h4>
+    <div v-if="isLoading">
+      <div
+        v-for="n in 3"
+        :key="`skeleton-box-${n}`"
+        class="gl-border-gray-100 gl-border-t-solid gl-border-1 gl-py-5 gl-md-pl-7"
+      >
+        <gl-skeleton-loader :lines="2" />
+      </div>
+    </div>
+    <environment-item
+      v-for="environment in environments"
+      :key="environment.name"
+      :environment="environment"
+      class="gl-border-gray-100 gl-border-t-solid gl-border-1 gl-pt-3"
+      in-folder
+    />
+  </div>
 </template>
diff --git a/app/assets/javascripts/environments/folder/environments_folder_bundle.js b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
index beaf8041c39..2f06f003bb2 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_bundle.js
+++ b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
@@ -2,13 +2,14 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import Translate from '~/vue_shared/translate';
+import { apolloProvider } from '../graphql/client';
 import EnvironmentsFolderView from './environments_folder_view.vue';
 import EnvironmentsFolderApp from './environments_folder_app.vue';
 
 Vue.use(Translate);
 Vue.use(VueApollo);
 
-const apolloProvider = new VueApollo({
+const legacyApolloProvider = new VueApollo({
   defaultClient: createDefaultClient(),
 });
 
@@ -17,16 +18,25 @@ export default () => {
   const environmentsData = el.dataset;
   if (gon.features.environmentsFolderNewLook) {
     const folderName = environmentsData.environmentsDataFolderName;
+    const folderPath = environmentsData.environmentsDataEndpoint.replace('.json', '');
+    const projectPath = environmentsData.environmentsDataProjectPath;
+    const helpPagePath = environmentsData.environmentsDataHelpPagePath;
 
     return new Vue({
       el,
       components: {
         EnvironmentsFolderApp,
       },
+      provide: {
+        projectPath,
+        helpPagePath,
+      },
+      apolloProvider,
       render(createElement) {
         return createElement('environments-folder-app', {
           props: {
             folderName,
+            folderPath,
           },
         });
       },
@@ -38,7 +48,7 @@ export default () => {
     components: {
       EnvironmentsFolderView,
     },
-    apolloProvider,
+    apolloProvider: legacyApolloProvider,
     provide: {
       projectPath: el.dataset.projectPath,
     },
diff --git a/app/assets/javascripts/environments/graphql/queries/folder.query.graphql b/app/assets/javascripts/environments/graphql/queries/folder.query.graphql
index ac6a68e450c..49b61c93c8c 100644
--- a/app/assets/javascripts/environments/graphql/queries/folder.query.graphql
+++ b/app/assets/javascripts/environments/graphql/queries/folder.query.graphql
@@ -1,5 +1,10 @@
-query getEnvironmentFolder($environment: NestedLocalEnvironment, $scope: String, $search: String) {
-  folder(environment: $environment, scope: $scope, search: $search) @client {
+query getEnvironmentFolder(
+  $environment: NestedLocalEnvironment
+  $scope: String
+  $search: String
+  $perPage: Int
+) {
+  folder(environment: $environment, scope: $scope, search: $search, perPage: $perPage) @client {
     activeCount
     environments
     stoppedCount
diff --git a/app/assets/javascripts/environments/graphql/resolvers/base.js b/app/assets/javascripts/environments/graphql/resolvers/base.js
index 4427b8ff2ef..404b7024cde 100644
--- a/app/assets/javascripts/environments/graphql/resolvers/base.js
+++ b/app/assets/javascripts/environments/graphql/resolvers/base.js
@@ -59,8 +59,10 @@ export const baseQueries = (endpoint) => ({
       };
     });
   },
-  folder(_, { environment: { folderPath }, scope, search }) {
-    return axios.get(folderPath, { params: { scope, search, per_page: 3 } }).then((res) => ({
+  folder(_, { environment: { folderPath }, scope, search, perPage }) {
+    // eslint-disable-next-line camelcase
+    const per_page = perPage || 3;
+    return axios.get(folderPath, { params: { scope, search, per_page } }).then((res) => ({
       activeCount: res.data.active_count,
       environments: res.data.environments.map(mapEnvironment),
       stoppedCount: res.data.stopped_count,