diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-18 11:18:50 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-18 11:18:50 +0000 |
commit | 8c7f4e9d5f36cff46365a7f8c4b9c21578c1e781 (patch) | |
tree | a77e7fe7a93de11213032ed4ab1f33a3db51b738 /app/assets/javascripts/releases/components/release_block_assets.vue | |
parent | 00b35af3db1abfe813a778f643dad221aad51fca (diff) | |
download | gitlab-ce-8c7f4e9d5f36cff46365a7f8c4b9c21578c1e781.tar.gz |
Add latest changes from gitlab-org/gitlab@13-1-stable-ee
Diffstat (limited to 'app/assets/javascripts/releases/components/release_block_assets.vue')
-rw-r--r-- | app/assets/javascripts/releases/components/release_block_assets.vue | 187 |
1 files changed, 156 insertions, 31 deletions
diff --git a/app/assets/javascripts/releases/components/release_block_assets.vue b/app/assets/javascripts/releases/components/release_block_assets.vue index f4b92416e47..e07646e9a9f 100644 --- a/app/assets/javascripts/releases/components/release_block_assets.vue +++ b/app/assets/javascripts/releases/components/release_block_assets.vue @@ -1,65 +1,190 @@ <script> -import { GlTooltipDirective, GlLink } from '@gitlab/ui'; +import { GlTooltipDirective, GlLink, GlButton, GlCollapse, GlIcon, GlBadge } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import { ASSET_LINK_TYPE } from '../constants'; +import { __, s__, sprintf } from '~/locale'; +import { difference } from 'lodash'; export default { name: 'ReleaseBlockAssets', components: { GlLink, + GlButton, + GlCollapse, + GlIcon, Icon, + GlBadge, }, directives: { GlTooltip: GlTooltipDirective, }, + mixins: [glFeatureFlagsMixin()], props: { assets: { type: Object, required: true, }, }, + data() { + return { + isAssetsExpanded: true, + }; + }, computed: { hasAssets() { return Boolean(this.assets.count); }, + imageLinks() { + return this.linksForType(ASSET_LINK_TYPE.IMAGE); + }, + packageLinks() { + return this.linksForType(ASSET_LINK_TYPE.PACKAGE); + }, + runbookLinks() { + return this.linksForType(ASSET_LINK_TYPE.RUNBOOK); + }, + otherLinks() { + return difference(this.assets.links, [ + ...this.imageLinks, + ...this.packageLinks, + ...this.runbookLinks, + ]); + }, + sections() { + return [ + { + links: this.assets.sources.map(s => ({ + url: s.url, + name: sprintf(__('Source code (%{fileExtension})'), { fileExtension: s.format }), + })), + iconName: 'doc-code', + }, + { + title: s__('ReleaseAssetLinkType|Images'), + links: this.imageLinks, + iconName: 'container-image', + }, + { + title: s__('ReleaseAssetLinkType|Packages'), + links: this.packageLinks, + iconName: 'package', + }, + { + title: s__('ReleaseAssetLinkType|Runbooks'), + links: this.runbookLinks, + iconName: 'book', + }, + { + title: s__('ReleaseAssetLinkType|Other'), + links: this.otherLinks, + iconName: 'link', + }, + ].filter(section => section.links.length > 0); + }, + }, + methods: { + toggleAssetsExpansion() { + this.isAssetsExpanded = !this.isAssetsExpanded; + }, + linksForType(type) { + return this.assets.links.filter(l => l.linkType === type); + }, }, + externalLinkTooltipText: __('This link points to external content'), }; </script> <template> <div class="card-text prepend-top-default"> - <b> - {{ __('Assets') }} - <span class="js-assets-count badge badge-pill">{{ assets.count }}</span> - </b> - - <ul v-if="assets.links.length" class="pl-0 mb-0 prepend-top-8 list-unstyled js-assets-list"> - <li v-for="link in assets.links" :key="link.name" class="append-bottom-8"> - <gl-link v-gl-tooltip.bottom :title="__('Download asset')" :href="link.directAssetUrl"> - <icon name="package" class="align-middle append-right-4 align-text-bottom" /> - {{ link.name }} - <span v-if="link.external">{{ __('(external source)') }}</span> - </gl-link> - </li> - </ul> - - <div v-if="hasAssets" class="dropdown"> - <button - type="button" - class="btn btn-link" - data-toggle="dropdown" - aria-haspopup="true" - aria-expanded="false" + <template v-if="glFeatures.releaseAssetLinkType"> + <gl-button + data-testid="accordion-button" + variant="link" + class="gl-font-weight-bold" + @click="toggleAssetsExpansion" > - <icon name="doc-code" class="align-top append-right-4" /> - {{ __('Source code') }} - <icon name="chevron-down" /> - </button> + <gl-icon + name="chevron-right" + class="gl-transition-medium" + :class="{ 'gl-rotate-90': isAssetsExpanded }" + /> + {{ __('Assets') }} + <gl-badge size="sm" variant="neutral" class="gl-display-inline-block">{{ + assets.count + }}</gl-badge> + </gl-button> + <gl-collapse v-model="isAssetsExpanded"> + <div class="gl-pl-6 gl-pt-3 js-assets-list"> + <template v-for="(section, index) in sections"> + <h5 v-if="section.title" :key="`section-header-${index}`" class="gl-mb-2"> + {{ section.title }} + </h5> + <ul :key="`section-body-${index}`" class="list-unstyled gl-m-0"> + <li v-for="link in section.links" :key="link.url"> + <gl-link + :href="link.directAssetUrl || link.url" + class="gl-display-flex gl-align-items-center gl-line-height-24" + > + <gl-icon + :name="section.iconName" + class="gl-mr-2 gl-flex-shrink-0 gl-flex-grow-0" + /> + {{ link.name }} + <gl-icon + v-if="link.external" + v-gl-tooltip + name="external-link" + :aria-label="$options.externalLinkTooltipText" + :title="$options.externalLinkTooltipText" + data-testid="external-link-indicator" + class="gl-ml-2 gl-flex-shrink-0 gl-flex-grow-0 gl-text-gray-600" + /> + </gl-link> + </li> + </ul> + </template> + </div> + </gl-collapse> + </template> - <div class="js-sources-dropdown dropdown-menu"> - <li v-for="asset in assets.sources" :key="asset.url"> - <gl-link :href="asset.url">{{ __('Download') }} {{ asset.format }}</gl-link> + <template v-else> + <b> + {{ __('Assets') }} + <span class="js-assets-count badge badge-pill">{{ assets.count }}</span> + </b> + + <ul v-if="assets.links.length" class="pl-0 mb-0 gl-mt-3 list-unstyled js-assets-list"> + <li v-for="link in assets.links" :key="link.name" class="gl-mb-3"> + <gl-link v-gl-tooltip.bottom :title="__('Download asset')" :href="link.directAssetUrl"> + <icon name="package" class="align-middle append-right-4 align-text-bottom" /> + {{ link.name }} + <span v-if="link.external" data-testid="external-link-indicator">{{ + __('(external source)') + }}</span> + </gl-link> </li> + </ul> + + <div v-if="hasAssets" class="dropdown"> + <button + type="button" + class="btn btn-link" + data-toggle="dropdown" + aria-haspopup="true" + aria-expanded="false" + > + <icon name="doc-code" class="align-top append-right-4" /> + {{ __('Source code') }} + <icon name="chevron-down" /> + </button> + + <div class="js-sources-dropdown dropdown-menu"> + <li v-for="asset in assets.sources" :key="asset.url"> + <gl-link :href="asset.url">{{ __('Download') }} {{ asset.format }}</gl-link> + </li> + </div> </div> - </div> + </template> </div> </template> |