Add button to toggle deployment details

This button will toggle the display of additional details, such as the
user who triggered the deployment, the job, and the git ref.

app/assets/javascripts/environments/components/deployment.vue

 <script>
-import { GlBadge, GlIcon, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
+import { GlBadge, GlButton, GlCollapse, GlIcon, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
+import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
 import { __, s__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -10,6 +11,8 @@ export default {
     ClipboardButton,
     DeploymentStatusBadge,
     GlBadge,
+    GlButton,
+    GlCollapse,
     GlIcon,
     TimeAgoTooltip,
   },
@@ -27,6 +30,9 @@ export default {
       required: false,
     },
   },
+  data() {
+    return { visible: false };
+  },
   computed: {
     status() {
       return this.deployment?.status;
@@ -40,19 +46,66 @@ export default {
     createdAt() {
       return this.deployment?.createdAt;
     },
+    isMobile() {
+      return !GlBreakpointInstance.isDesktop();
+    },
+    detailsButton() {
+      return this.visible
+        ? { text: this.$options.i18n.hideDetails, icon: 'expand-up' }
+        : { text: this.$options.i18n.showDetails, icon: 'expand-down' };
+    },
+    detailsButtonClasses() {
+      return this.isMobile ? 'gl-sr-only' : '';
+    },
+  },
+  methods: {
+    toggleCollapse() {
+      this.visible = !this.visible;
+    },
   },
   i18n: {
     latestBadge: s__('Deployment|Latest Deployed'),
     deploymentId: s__('Deployment|Deployment ID'),
     copyButton: __('Copy commit SHA'),
     commitSha: __('Commit SHA'),
+    showDetails: __('Show details'),
+    hideDetails: __('Hide details'),
   },
+  headerClasses: [
+    'gl-display-flex',
+    'gl-align-items-flex-start',
+    'gl-md-align-items-center',
+    'gl-justify-content-space-between',
+    'gl-pr-6',
+  ],
+  headerDetailsClasses: [
+    'gl-display-flex',
+    'gl-flex-direction-column',
+    'gl-md-flex-direction-row',
+    'gl-align-items-flex-start',
+    'gl-md-align-items-center',
+    'gl-font-sm',
+    'gl-text-gray-700',
+  ],
+  deploymentStatusClasses: [
+    'gl-display-flex',
+    'gl-gap-x-3',
+    'gl-mr-0',
+    'gl-md-mr-5',
+    'gl-mb-3',
+    'gl-md-mb-0',
+  ],
 };
 </script>
 <template>
-  <div class="gl-display-flex gl-align-items-center gl-gap-x-3 gl-font-sm gl-text-gray-700">
+  <div>
+    <div :class="$options.headerClasses">
+      <div :class="$options.headerDetailsClasses">
+        <div :class="$options.deploymentStatusClasses">
           <deployment-status-badge v-if="status" :status="status" />
           <gl-badge v-if="latest" variant="info">{{ $options.i18n.latestBadge }}</gl-badge>
+        </div>
+        <div class="gl-display-flex gl-align-items-center gl-gap-x-5">
           <div
             v-if="iid"
             v-gl-tooltip
@@ -74,9 +127,22 @@ export default {
               :title="$options.i18n.copyButton"
               size="small"
             />
-      <time-ago-tooltip v-if="createdAt" :time="createdAt" class="gl-ml-5!">
+          </div>
+          <time-ago-tooltip v-if="createdAt" :time="createdAt">
             <template #default="{ timeAgo }"> <gl-icon name="calendar" /> {{ timeAgo }} </template>
           </time-ago-tooltip>
         </div>
       </div>
+      <gl-button
+        ref="details-toggle"
+        category="tertiary"
+        :icon="detailsButton.icon"
+        :button-text-classes="detailsButtonClasses"
+        @click="toggleCollapse"
+      >
+        {{ detailsButton.text }}
+      </gl-button>
+    </div>
+    <gl-collapse :visible="visible" />
+  </div>
 </template>

spec/frontend/environments/deployment_spec.js

+import { GlCollapse } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
-import { __, s__ } from '~/locale';
-import { formatDate } from '~/lib/utils/datetime_utility';
 import { useFakeDate } from 'helpers/fake_date';
+import { stubTransition } from 'helpers/stub_transition';
+import { formatDate } from '~/lib/utils/datetime_utility';
+import { __, s__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import Deployment from '~/environments/components/deployment.vue';
 import DeploymentStatusBadge from '~/environments/components/deployment_status_badge.vue';
@@ -19,6 +21,7 @@ describe('~/environments/components/deployment.vue', () => {
         deployment,
         ...propsData,
       },
+      stubs: { transition: stubTransition() },
     });
 
   afterEach(() => {
@@ -148,4 +151,29 @@ describe('~/environments/components/deployment.vue', () => {
       });
     });
   });
+
+  describe('collapse', () => {
+    let collapse;
+    let button;
+
+    beforeEach(() => {
+      wrapper = createWrapper();
+      collapse = wrapper.findComponent(GlCollapse);
+      button = wrapper.findComponent({ ref: 'details-toggle' });
+    });
+
+    it('is collapsed by default', () => {
+      expect(collapse.attributes('visible')).toBeUndefined();
+      expect(button.props('icon')).toBe('expand-down');
+      expect(button.text()).toBe(__('Show details'));
+    });
+
+    it('opens on click', async () => {
+      await button.trigger('click');
+
+      expect(button.text()).toBe(__('Hide details'));
+      expect(button.props('icon')).toBe('expand-up');
+      expect(collapse.attributes('visible')).toBe('visible');
+    });
+  });
 });