1 files changed, 20 insertions, 7 deletions
diff --git a/app/assets/javascripts/environments/components/new_environment_folder.vue b/app/assets/javascripts/environments/components/new_environment_folder.vue
index 0615bdef537..fe3d6f1e8ca 100644
--- a/app/assets/javascripts/environments/components/new_environment_folder.vue
+++ b/app/assets/javascripts/environments/components/new_environment_folder.vue
@@ -1,9 +1,11 @@
 <script>
-import { GlCollapse, GlIcon, GlBadge, GlLink } from '@gitlab/ui';
+import { GlButton, GlCollapse, GlIcon, GlBadge, GlLink } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
 import folderQuery from '../graphql/queries/folder.query.graphql';
 
 export default {
   components: {
+    GlButton,
     GlCollapse,
     GlIcon,
     GlBadge,
@@ -26,12 +28,20 @@ export default {
       },
     },
   },
+  i18n: {
+    collapse: __('Collapse'),
+    expand: __('Expand'),
+    link: s__('Environments|Show all'),
+  },
   computed: {
     icons() {
       return this.visible
         ? { caret: 'angle-down', folder: 'folder-open' }
         : { caret: 'angle-right', folder: 'folder-o' };
     },
+    label() {
+      return this.visible ? this.$options.i18n.collapse : this.$options.i18n.expand;
+    },
     count() {
       return this.folder?.availableCount ?? 0;
     },
@@ -51,18 +61,21 @@ export default {
 </script>
 <template>
   <div class="gl-border-b-solid gl-border-gray-100 gl-border-1 gl-px-3 gl-pt-3 gl-pb-5">
-    <div class="gl-w-full gl-display-flex gl-align-items-center" @click="toggleCollapse">
-      <gl-icon
-        class="gl-mr-2 gl-fill-current-color gl-text-gray-500"
-        :name="icons.caret"
-        :size="12"
+    <div class="gl-w-full gl-display-flex gl-align-items-center">
+      <gl-button
+        class="gl-mr-4 gl-fill-current-color gl-text-gray-500"
+        :aria-label="label"
+        :icon="icons.caret"
+        size="small"
+        category="tertiary"
+        @click="toggleCollapse"
       />
       <gl-icon class="gl-mr-2 gl-fill-current-color gl-text-gray-500" :name="icons.folder" />
       <div class="gl-mr-2 gl-text-gray-500" :class="folderClass">
         {{ nestedEnvironment.name }}
       </div>
       <gl-badge size="sm" class="gl-mr-auto">{{ count }}</gl-badge>
-      <gl-link v-if="visible" :href="folderPath">{{ s__('Environments|Show all') }}</gl-link>
+      <gl-link v-if="visible" :href="folderPath">{{ $options.i18n.link }}</gl-link>
     </div>
     <gl-collapse :visible="visible" />
   </div>