diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-15 18:09:43 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-15 18:09:43 +0000 |
commit | f784f7d3b19fe80834240bde23d1300accb01118 (patch) | |
tree | 2acd4a74cbcde10c5b70c356b146af78362862d1 /app/assets/javascripts/vue_merge_request_widget | |
parent | 06c127aa72cff78235426341081837cff0b6f78b (diff) | |
download | gitlab-ce-f784f7d3b19fe80834240bde23d1300accb01118.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget')
-rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue | 77 | ||||
-rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue | 13 |
2 files changed, 57 insertions, 33 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue index b12250d1d1c..157d6d60290 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue @@ -1,17 +1,23 @@ <script> -import { GlLink } from '@gitlab/ui'; -import FilteredSearchDropdown from '~/vue_shared/components/filtered_search_dropdown.vue'; +import { GlButtonGroup, GlDropdown, GlDropdownItem, GlLink, GlSearchBoxByType } from '@gitlab/ui'; +import autofocusonshow from '~/vue_shared/directives/autofocusonshow'; import ReviewAppLink from '../review_app_link.vue'; export default { name: 'DeploymentViewButton', components: { - FilteredSearchDropdown, + GlButtonGroup, + GlDropdown, + GlDropdownItem, GlLink, + GlSearchBoxByType, ReviewAppLink, VisualReviewAppLink: () => import('ee_component/vue_merge_request_widget/components/visual_review_app_link.vue'), }, + directives: { + autofocusonshow, + }, props: { appButtonText: { type: Object, @@ -37,6 +43,9 @@ export default { }), }, }, + data() { + return { searchTerm: '' }; + }, computed: { deploymentExternalUrl() { if (this.deployment.changes && this.deployment.changes.length === 1) { @@ -47,44 +56,52 @@ export default { shouldRenderDropdown() { return this.deployment.changes && this.deployment.changes.length > 1; }, + filteredChanges() { + return this.deployment?.changes?.filter(change => change.path.includes(this.searchTerm)); + }, }, }; </script> - <template> <span> - <filtered-search-dropdown - v-if="shouldRenderDropdown" - class="js-mr-wigdet-deployment-dropdown inline" - :items="deployment.changes" - :main-action-link="deploymentExternalUrl" - filter-key="path" - > - <template #mainAction="{ className }"> - <review-app-link - :display="appButtonText" - :link="deploymentExternalUrl" - :css-class="`deploy-link js-deploy-url inline ${className}`" + <gl-button-group v-if="shouldRenderDropdown" size="small"> + <review-app-link + :display="appButtonText" + :link="deploymentExternalUrl" + size="small" + css-class="deploy-link js-deploy-url inline" + /> + <gl-dropdown size="small" class="js-mr-wigdet-deployment-dropdown"> + <gl-search-box-by-type + v-model.trim="searchTerm" + v-autofocusonshow + autofocus + class="gl-m-3" /> - </template> - - <template #result="{ result }"> - <gl-link - :href="result.external_url" - target="_blank" - rel="noopener noreferrer nofollow" - class="js-deploy-url-menu-item menu-item" + <gl-dropdown-item + v-for="change in filteredChanges" + :key="change.path" + class="js-filtered-dropdown-result" > - <strong class="str-truncated-100 gl-mb-0 d-block">{{ result.path }}</strong> - - <p class="text-secondary str-truncated-100 gl-mb-0 d-block">{{ result.external_url }}</p> - </gl-link> - </template> - </filtered-search-dropdown> + <gl-link + :href="change.external_url" + target="_blank" + rel="noopener noreferrer nofollow" + class="js-deploy-url-menu-item menu-item" + > + <strong class="str-truncated-100 gl-mb-0 gl-display-block">{{ change.path }}</strong> + <p class="text-secondary str-truncated-100 gl-mb-0 d-block"> + {{ change.external_url }} + </p> + </gl-link> + </gl-dropdown-item> + </gl-dropdown> + </gl-button-group> <review-app-link v-else :display="appButtonText" :link="deploymentExternalUrl" + size="small" css-class="js-deploy-url deploy-link btn btn-default btn-sm inline" /> <visual-review-app-link diff --git a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue index 16ac1e7fbb1..ebd2b5cd22d 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue @@ -1,8 +1,9 @@ <script> -import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; +import { GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui'; export default { components: { + GlButton, GlIcon, }, directives: { @@ -21,14 +22,20 @@ export default { type: String, required: true, }, + size: { + type: String, + required: false, + default: 'medium', + }, }, }; </script> <template> - <a + <gl-button v-gl-tooltip :title="display.tooltip" :href="link" + :size="size" target="_blank" rel="noopener noreferrer nofollow" :class="cssClass" @@ -36,5 +43,5 @@ export default { data-track-label="review_app" > {{ display.text }} <gl-icon class="fgray" name="external-link" /> - </a> + </gl-button> </template> |