diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-01-27 18:14:51 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-01-27 18:14:51 +0300 |
commit | 48f93eadd0c117a41b4e29e3d335f451a5e6e52f (patch) | |
tree | b7ca830e2b28309a5a1fd61a6b6c646485d710f2 /app/assets/javascripts/environments | |
parent | 115190b6cd73b4ba1948cf26ea883738934c614b (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 | 120 |
1 files changed, 93 insertions, 27 deletions
diff --git a/app/assets/javascripts/environments/components/deployment.vue b/app/assets/javascripts/environments/components/deployment.vue index 60ea837736c..b36d0d5f2e0 100644 --- a/app/assets/javascripts/environments/components/deployment.vue +++ b/app/assets/javascripts/environments/components/deployment.vue @@ -1,5 +1,6 @@ <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> |