Fetch specific scope for environment folder

If the user is looking at stopped environments, this ensures the scope
is passed to the HTTP call and that stopped environments in folders are
fetched as well.

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 };

app/assets/javascripts/environments/graphql/queries/folder.query.graphql

-query getEnvironmentFolder($environment: NestedLocalEnvironment) {
-  folder(environment: $environment) @client {
+query getEnvironmentFolder($environment: NestedLocalEnvironment, $scope: String) {
+  folder(environment: $environment, scope: $scope) @client {
     availableCount
     environments
     stoppedCount

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,

spec/frontend/environments/graphql/resolvers_spec.js

@@ -124,10 +124,11 @@ describe('~/frontend/environments/graphql/resolvers', () => {
   });
   describe('folder', () => {
     it('should fetch the folder url passed to it', async () => {
-      mock.onGet(ENDPOINT, { params: { per_page: 3 } }).reply(200, folder);
+      mock.onGet(ENDPOINT, { params: { per_page: 3, scope: 'available' } }).reply(200, folder);
 
       const environmentFolder = await mockResolvers.Query.folder(null, {
         environment: { folderPath: ENDPOINT },
+        scope: 'available',
       });
 
       expect(environmentFolder).toEqual(resolvedFolder);

spec/frontend/environments/new_environment_folder_spec.js

@@ -30,7 +30,10 @@ describe('~/environments/components/new_environments_folder.vue', () => {
   const createWrapper = (propsData, apolloProvider) =>
     mountExtended(EnvironmentsFolder, {
       apolloProvider,
-      propsData,
+      propsData: {
+        scope: 'available',
+        ...propsData,
+      },
       stubs: { transition: stubTransition() },
       provide: { helpPagePath: '/help' },
     });