From a7b3560714b4d9cc4ab32dffcd1f74a284b93580 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Fri, 18 Feb 2022 09:45:46 +0000
Subject: Add latest changes from gitlab-org/gitlab@14-8-stable-ee

---
 .../environments/components/deployment.vue         | 217 ++++++++++++++++++++-
 1 file changed, 216 insertions(+), 1 deletion(-)

(limited to 'app/assets/javascripts/environments/components/deployment.vue')

diff --git a/app/assets/javascripts/environments/components/deployment.vue b/app/assets/javascripts/environments/components/deployment.vue
index ef43ca6bc33..f98edb6bb7d 100644
--- a/app/assets/javascripts/environments/components/deployment.vue
+++ b/app/assets/javascripts/environments/components/deployment.vue
@@ -1,25 +1,240 @@
 <script>
+import {
+  GlBadge,
+  GlButton,
+  GlCollapse,
+  GlIcon,
+  GlLink,
+  GlTooltipDirective as GlTooltip,
+  GlTruncate,
+} 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';
 import DeploymentStatusBadge from './deployment_status_badge.vue';
+import Commit from './commit.vue';
 
 export default {
   components: {
+    ClipboardButton,
+    Commit,
     DeploymentStatusBadge,
+    GlBadge,
+    GlButton,
+    GlCollapse,
+    GlIcon,
+    GlLink,
+    GlTruncate,
+    TimeAgoTooltip,
+  },
+  directives: {
+    GlTooltip,
   },
   props: {
     deployment: {
       type: Object,
       required: true,
     },
+    latest: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  data() {
+    return { visible: false };
   },
   computed: {
     status() {
       return this.deployment?.status;
     },
+    iid() {
+      return this.deployment?.iid;
+    },
+    shortSha() {
+      return this.commit?.shortId;
+    },
+    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' : '';
+    },
+    commit() {
+      return this.deployment?.commit;
+    },
+    user() {
+      return this.deployment?.user;
+    },
+    username() {
+      return `@${this.user.username}`;
+    },
+    userPath() {
+      return this.user?.path;
+    },
+    deployable() {
+      return this.deployment?.deployable;
+    },
+    jobName() {
+      return this.deployable?.name;
+    },
+    jobPath() {
+      return this.deployable?.buildPath;
+    },
+    refLabel() {
+      return this.deployment?.tag ? this.$options.i18n.tag : this.$options.i18n.branch;
+    },
+    ref() {
+      return this.deployment?.ref;
+    },
+    refName() {
+      return this.ref?.name;
+    },
+    refPath() {
+      return this.ref?.refPath;
+    },
+  },
+  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'),
+    triggerer: s__('Deployment|Triggerer'),
+    job: __('Job'),
+    api: __('API'),
+    branch: __('Branch'),
+    tag: __('Tag'),
   },
+  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>
-    <deployment-status-badge v-if="status" :status="status" />
+    <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
+            class="gl-display-flex"
+            :title="$options.i18n.deploymentId"
+            :aria-label="$options.i18n.deploymentId"
+          >
+            <gl-icon ref="deployment-iid-icon" name="deployments" />
+            <span class="gl-ml-2">#{{ iid }}</span>
+          </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" class="gl-display-flex">
+            <template #default="{ timeAgo }">
+              <gl-icon name="calendar" />
+              <span class="gl-mr-2 gl-white-space-nowrap">{{ timeAgo }}</span>
+            </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>
+    <commit v-if="commit" :commit="commit" class="gl-mt-3" />
+    <gl-collapse :visible="visible">
+      <div
+        class="gl-display-flex gl-md-align-items-center gl-mt-5 gl-flex-direction-column gl-md-flex-direction-row gl-pr-4 gl-md-pr-0"
+      >
+        <div v-if="user" class="gl-display-flex gl-flex-direction-column gl-md-max-w-15p">
+          <span class="gl-text-gray-500">{{ $options.i18n.triggerer }}</span>
+          <gl-link :href="userPath" class="gl-font-monospace gl-mt-3">
+            <gl-truncate :text="username" with-tooltip />
+          </gl-link>
+        </div>
+        <div
+          class="gl-display-flex gl-flex-direction-column gl-md-pl-7 gl-md-max-w-15p gl-mt-4 gl-md-mt-0"
+        >
+          <span class="gl-text-gray-500" :class="{ 'gl-ml-3': !deployable }">
+            {{ $options.i18n.job }}
+          </span>
+          <gl-link v-if="jobPath" :href="jobPath" class="gl-font-monospace gl-mt-3">
+            <gl-truncate :text="jobName" with-tooltip position="middle" />
+          </gl-link>
+          <span v-else-if="jobName" class="gl-font-monospace gl-mt-3">
+            <gl-truncate :text="jobName" with-tooltip position="middle" />
+          </span>
+          <gl-badge v-else class="gl-font-monospace gl-mt-3" variant="info">
+            {{ $options.i18n.api }}
+          </gl-badge>
+        </div>
+        <div
+          v-if="ref"
+          class="gl-display-flex gl-flex-direction-column gl-md-pl-7 gl-md-max-w-15p gl-mt-4 gl-md-mt-0"
+        >
+          <span class="gl-text-gray-500">{{ refLabel }}</span>
+          <gl-link :href="refPath" class="gl-font-monospace gl-mt-3">
+            <gl-truncate :text="refName" with-tooltip />
+          </gl-link>
+        </div>
+      </div>
+    </gl-collapse>
   </div>
 </template>
-- 
cgit v1.2.1