diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-25 12:09:51 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-25 12:09:51 +0300 |
commit | 86ace8a66caeb11a2912e15e8a9abc3d9e4960c2 (patch) | |
tree | d39305e13dfb6f1d5d3aeede31a6d3b240cc3e2b /app/assets/javascripts/environments | |
parent | fd5a9d4a57a490bede85e0493c1571df659a8559 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/environments')
-rw-r--r-- | app/assets/javascripts/environments/components/deployment.vue | 109 |
1 files changed, 33 insertions, 76 deletions
diff --git a/app/assets/javascripts/environments/components/deployment.vue b/app/assets/javascripts/environments/components/deployment.vue index 19284b26d51..595ae5cb409 100644 --- a/app/assets/javascripts/environments/components/deployment.vue +++ b/app/assets/javascripts/environments/components/deployment.vue @@ -1,14 +1,5 @@ <script> -import { - GlBadge, - GlButton, - GlCollapse, - GlIcon, - GlLink, - GlTooltipDirective as GlTooltip, - GlTruncate, -} from '@gitlab/ui'; -import { GlBreakpointInstance } from '@gitlab/ui/dist/utils'; +import { GlBadge, GlIcon, GlLink, GlTooltipDirective as GlTooltip, GlTruncate } from '@gitlab/ui'; import { __, s__ } from '~/locale'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; @@ -21,8 +12,6 @@ export default { Commit, DeploymentStatusBadge, GlBadge, - GlButton, - GlCollapse, GlIcon, GlLink, GlTruncate, @@ -42,9 +31,6 @@ export default { required: false, }, }, - data() { - return { visible: false }; - }, computed: { status() { return this.deployment?.status; @@ -58,17 +44,6 @@ 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' : ''; - }, commit() { return this.deployment?.commit; }, @@ -106,18 +81,11 @@ export default { return this.deployment.pendingApprovalCount > 0; }, }, - 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'), needsApproval: s__('Deployment|Needs Approval'), job: __('Job'), @@ -195,54 +163,43 @@ export default { </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" /> <div class="gl-mt-3"><slot name="approval"></slot></div> - <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-md-align-items-center gl-mt-5 gl-flex-direction-column gl-md-flex-direction-row gl-pr-4 gl-md-pr-0" + class="gl-display-flex gl-flex-direction-column gl-md-pl-7 gl-md-max-w-15p gl-mt-4 gl-md-mt-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> + <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> - </gl-collapse> + <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> </div> </template> |