diff options
Diffstat (limited to 'app/assets/javascripts/releases')
5 files changed, 42 insertions, 12 deletions
diff --git a/app/assets/javascripts/releases/components/app_index.vue b/app/assets/javascripts/releases/components/app_index.vue index 6dc8240e680..1b360b79b0c 100644 --- a/app/assets/javascripts/releases/components/app_index.vue +++ b/app/assets/javascripts/releases/components/app_index.vue @@ -263,6 +263,7 @@ export default { v-for="(release, index) in releases" :key="getReleaseKey(release, index)" :release="release" + :sort="sort" :class="{ 'linked-card': releases.length > 1 && index !== releases.length - 1 }" /> diff --git a/app/assets/javascripts/releases/components/release_block.vue b/app/assets/javascripts/releases/components/release_block.vue index b2bd405574f..49c349e7a7b 100644 --- a/app/assets/javascripts/releases/components/release_block.vue +++ b/app/assets/javascripts/releases/components/release_block.vue @@ -1,12 +1,12 @@ <script> -import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; -import $ from 'jquery'; import { isEmpty } from 'lodash'; +import SafeHtml from '~/vue_shared/directives/safe_html'; import { scrollToElement } from '~/lib/utils/common_utils'; import { slugify } from '~/lib/utils/text_utility'; import { getLocationHash } from '~/lib/utils/url_utility'; +import { CREATED_ASC } from '~/releases/constants'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import '~/behaviors/markdown/render_gfm'; +import { renderGFM } from '~/behaviors/markdown/render_gfm'; import EvidenceBlock from './evidence_block.vue'; import ReleaseBlockAssets from './release_block_assets.vue'; import ReleaseBlockFooter from './release_block_footer.vue'; @@ -32,6 +32,11 @@ export default { required: true, default: () => ({}), }, + sort: { + type: String, + required: false, + default: CREATED_ASC, + }, }, data() { return { @@ -80,7 +85,7 @@ export default { }, methods: { renderGFM() { - $(this.$refs['gfm-content']).renderGFM(); + renderGFM(this.$refs['gfm-content']); }, }, safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] }, @@ -119,6 +124,8 @@ export default { :tag-path="release.tagPath" :author="release.author" :released-at="release.releasedAt" + :created-at="release.createdAt" + :sort="sort" /> </div> </template> diff --git a/app/assets/javascripts/releases/components/release_block_footer.vue b/app/assets/javascripts/releases/components/release_block_footer.vue index 3881c83b5c2..85fb7d02a37 100644 --- a/app/assets/javascripts/releases/components/release_block_footer.vue +++ b/app/assets/javascripts/releases/components/release_block_footer.vue @@ -3,6 +3,7 @@ import { GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import timeagoMixin from '~/vue_shared/mixins/timeago'; +import { RELEASED_AT_ASC, RELEASED_AT_DESC } from '~/releases/constants'; export default { name: 'ReleaseBlockFooter', @@ -46,10 +47,26 @@ export default { required: false, default: null, }, + createdAt: { + type: Date, + required: false, + default: null, + }, + sort: { + type: String, + required: false, + default: '', + }, }, computed: { - releasedAtTimeAgo() { - return this.timeFormatted(this.releasedAt); + isSortedByReleaseDate() { + return this.sort === RELEASED_AT_ASC || this.sort === RELEASED_AT_DESC; + }, + timeAt() { + return this.isSortedByReleaseDate ? this.releasedAt : this.createdAt; + }, + atTimeAgo() { + return this.timeFormatted(this.timeAt); }, userImageAltDescription() { return this.author && this.author.username @@ -58,7 +75,10 @@ export default { }, createdTime() { const now = new Date(); - const isFuture = now < new Date(this.releasedAt); + const isFuture = now < new Date(this.timeAt); + if (this.isSortedByReleaseDate) { + return isFuture ? __('Will be released') : __('Released'); + } return isFuture ? __('Will be created') : __('Created'); }, }, @@ -93,17 +113,17 @@ export default { </div> <div - v-if="releasedAt || author" + v-if="timeAt || author" class="gl-float-left gl-display-flex gl-align-items-center js-author-date-info" > <span class="gl-text-secondary">{{ createdTime }} </span> - <template v-if="releasedAt"> + <template v-if="timeAt"> <span v-gl-tooltip.bottom - :title="tooltipTitle(releasedAt)" + :title="tooltipTitle(timeAt)" class="gl-text-secondary gl-flex-shrink-0" > - {{ releasedAtTimeAgo }} + {{ atTimeAgo }} </span> </template> diff --git a/app/assets/javascripts/releases/graphql/fragments/release_for_editing.fragment.graphql b/app/assets/javascripts/releases/graphql/fragments/release_for_editing.fragment.graphql index 3ad66afa259..177dff1823e 100644 --- a/app/assets/javascripts/releases/graphql/fragments/release_for_editing.fragment.graphql +++ b/app/assets/javascripts/releases/graphql/fragments/release_for_editing.fragment.graphql @@ -4,6 +4,7 @@ fragment ReleaseForEditing on Release { tagName description releasedAt + createdAt tagPath assets { links { diff --git a/app/assets/javascripts/releases/util.js b/app/assets/javascripts/releases/util.js index a1027ef08d7..10d7887c0b1 100644 --- a/app/assets/javascripts/releases/util.js +++ b/app/assets/javascripts/releases/util.js @@ -15,7 +15,8 @@ const convertScalarProperties = (graphQLRelease) => 'historicalRelease', ]); -const convertDateProperties = ({ releasedAt }) => ({ +const convertDateProperties = ({ createdAt, releasedAt }) => ({ + createdAt: new Date(createdAt), releasedAt: new Date(releasedAt), }); |