Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 8x 216x 216x 2x 214x 216x 201x | <script> import { GlButtonGroup, GlCollapsibleListbox, GlLink } from '@gitlab/ui'; import autofocusonshow from '~/vue_shared/directives/autofocusonshow'; import ReviewAppLink from '../review_app_link.vue'; export default { name: 'DeploymentViewButton', components: { GlButtonGroup, GlCollapsibleListbox, GlLink, ReviewAppLink, }, directives: { autofocusonshow, }, props: { appButtonText: { type: Object, required: true, }, deployment: { type: Object, required: true, }, }, data() { return { searchTerm: '' }; }, computed: { deploymentExternalUrl() { if (this.deployment.changes && this.deployment.changes.length === 1) { return this.deployment.changes[0].external_url; } return this.deployment.external_url; }, shouldRenderDropdown() { return this.deployment.changes && this.deployment.changes.length > 1; }, filteredChanges() { return this.deployment?.changes ?.filter((change) => change.path.includes(this.searchTerm)) .map((change) => ({ value: change.external_url, text: change.path })); }, }, methods: { search(searchTerm) { this.searchTerm = searchTerm; }, }, }; </script> <template> <span class="gl-display-inline-flex"> <gl-button-group v-if="shouldRenderDropdown" size="small"> <review-app-link :display="appButtonText" :link="deploymentExternalUrl" size="small" css-class="deploy-link js-deploy-url gl-display-inline" /> <gl-collapsible-listbox :items="filteredChanges" size="small" placement="right" searchable @search="search" > <template #list-item="{ item }"> <gl-link :href="item.value" target="_blank" rel="noopener noreferrer nofollow"> <div> <strong class="gl-text-truncate gl-mb-0 gl-display-block">{{ item.text }}</strong> <p class="gl-text-secondary gl-text-truncate gl-mb-0 gl-display-block"> {{ item.value }} </p> </div> </gl-link> </template> </gl-collapsible-listbox> </gl-button-group> <review-app-link v-else :display="appButtonText" :link="deploymentExternalUrl" size="small" css-class="deploy-link js-deploy-url gl-display-inline" /> </span> </template> |