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,43 +46,103 @@ 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">
-    <deployment-status-badge v-if="status" :status="status" />
-    <gl-badge v-if="latest" variant="info">{{ $options.i18n.latestBadge }}</gl-badge>
-    <div
-      v-if="iid"
-      v-gl-tooltip
-      :title="$options.i18n.deploymentId"
-      :aria-label="$options.i18n.deploymentId"
-    >
-      <gl-icon ref="deployment-iid-icon" name="deployments" /> #{{ iid }}
-    </div>
-    <div
-      v-if="shortSha"
-      data-testid="deployment-commit-sha"
-      class="gl-font-monospace gl-display-flex gl-align-items-center"
-    >
-      <gl-icon ref="deployment-commit-icon" name="commit" class="gl-mr-2" />
-      <span v-gl-tooltip :title="$options.i18n.commitSha">{{ shortSha }}</span>
-      <clipboard-button
-        :text="shortSha"
+  <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
+            :title="$options.i18n.deploymentId"
+            :aria-label="$options.i18n.deploymentId"
+          >
+            <gl-icon ref="deployment-iid-icon" name="deployments" /> #{{ iid }}
+          </div>
+          <div
+            v-if="shortSha"
+            data-testid="deployment-commit-sha"
+            class="gl-font-monospace gl-display-flex gl-align-items-center"
+          >
+            <gl-icon ref="deployment-commit-icon" name="commit" class="gl-mr-2" />
+            <span v-gl-tooltip :title="$options.i18n.commitSha">{{ shortSha }}</span>
+            <clipboard-button
+              :text="shortSha"
+              category="tertiary"
+              :title="$options.i18n.copyButton"
+              size="small"
+            />
+          </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"
-        :title="$options.i18n.copyButton"
-        size="small"
-      />
-      <time-ago-tooltip v-if="createdAt" :time="createdAt" class="gl-ml-5!">
-        <template #default="{ timeAgo }"> <gl-icon name="calendar" /> {{ timeAgo }} </template>
-      </time-ago-tooltip>
+        :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');
+    });
+  });
 });