diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipelines_list')
9 files changed, 52 insertions, 51 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue index 74ada6a4d15..fe8e3bd2b78 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue @@ -1,10 +1,10 @@ <script> -import { GlDeprecatedButton } from '@gitlab/ui'; +import { GlButton } from '@gitlab/ui'; export default { name: 'PipelinesEmptyState', components: { - GlDeprecatedButton, + GlButton, }, props: { helpPagePath: { @@ -43,13 +43,14 @@ export default { </p> <div class="text-center"> - <gl-deprecated-button + <gl-button :href="helpPagePath" - variant="primary" + variant="info" + category="primary" class="js-get-started-pipelines" > {{ s__('Pipelines|Get started with Pipelines') }} - </gl-deprecated-button> + </gl-button> </div> </template> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue index 2905b2ca26f..f0614298bd3 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue @@ -1,27 +1,15 @@ <script> -import { GlLink, GlTooltipDirective } from '@gitlab/ui'; -import { escape } from 'lodash'; +import { GlLink, GlPopover, GlSprintf, GlTooltipDirective } from '@gitlab/ui'; import { SCHEDULE_ORIGIN } from '../../constants'; -import { __, sprintf } from '~/locale'; -import popover from '~/vue_shared/directives/popover'; - -const popoverTitle = sprintf( - escape( - __( - `This pipeline makes use of a predefined CI/CD configuration enabled by %{strongStart}Auto DevOps.%{strongEnd}`, - ), - ), - { strongStart: '<b>', strongEnd: '</b>' }, - false, -); export default { components: { GlLink, + GlPopover, + GlSprintf, }, directives: { GlTooltip: GlTooltipDirective, - popover, }, props: { pipeline: { @@ -44,23 +32,6 @@ export default { isScheduled() { return this.pipeline.source === SCHEDULE_ORIGIN; }, - popoverOptions() { - return { - html: true, - trigger: 'focus', - placement: 'top', - title: `<div class="autodevops-title"> - ${popoverTitle} - </div>`, - content: `<a - class="autodevops-link" - href="${this.autoDevopsHelpPath}" - target="_blank" - rel="noopener noreferrer nofollow"> - ${escape(__('Learn more about Auto DevOps'))} - </a>`, - }; - }, }, }; </script> @@ -114,13 +85,42 @@ export default { </span> <gl-link v-if="pipeline.flags.auto_devops" - v-popover="popoverOptions" + :id="`pipeline-url-autodevops-${pipeline.id}`" tabindex="0" class="js-pipeline-url-autodevops badge badge-info autodevops-badge" data-testid="pipeline-url-autodevops" role="button" >{{ __('Auto DevOps') }}</gl-link > + <gl-popover + :target="`pipeline-url-autodevops-${pipeline.id}`" + triggers="focus" + placement="top" + > + <template #title> + <div class="autodevops-title"> + <gl-sprintf + :message=" + __( + 'This pipeline makes use of a predefined CI/CD configuration enabled by %{strongStart}Auto DevOps.%{strongEnd}', + ) + " + > + <template #strong="{content}"> + <b>{{ content }}</b> + </template> + </gl-sprintf> + </div> + </template> + <gl-link + class="autodevops-link" + :href="autoDevopsHelpPath" + target="_blank" + rel="noopener noreferrer nofollow" + > + {{ __('Learn more about Auto DevOps') }} + </gl-link> + </gl-popover> <span v-if="pipeline.flags.stuck" class="js-pipeline-url-stuck badge badge-warning" diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue index 0c531650fd2..2dfc6485d85 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue @@ -1,7 +1,7 @@ <script> import { isEqual } from 'lodash'; import { __, s__ } from '~/locale'; -import createFlash from '~/flash'; +import { deprecatedCreateFlash as createFlash } from '~/flash'; import PipelinesService from '../../services/pipelines_service'; import pipelinesMixin from '../../mixins/pipelines'; import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue'; diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_actions.vue index 3009ca7a775..098efe68b83 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_actions.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_actions.vue @@ -1,7 +1,7 @@ <script> import { GlDeprecatedButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui'; import axios from '~/lib/utils/axios_utils'; -import flash from '~/flash'; +import { deprecatedCreateFlash as flash } from '~/flash'; import { s__, __, sprintf } from '~/locale'; import GlCountdown from '~/vue_shared/components/gl_countdown.vue'; import Icon from '~/vue_shared/components/icon.vue'; diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue index 0505a8668d1..29345f33367 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_filtered_search.vue @@ -1,11 +1,11 @@ <script> import { GlFilteredSearch } from '@gitlab/ui'; +import { map } from 'lodash'; import { __, s__ } from '~/locale'; import PipelineTriggerAuthorToken from './tokens/pipeline_trigger_author_token.vue'; import PipelineBranchNameToken from './tokens/pipeline_branch_name_token.vue'; import PipelineStatusToken from './tokens/pipeline_status_token.vue'; import PipelineTagNameToken from './tokens/pipeline_tag_name_token.vue'; -import { map } from 'lodash'; export default { userType: 'username', diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue b/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue index 99492bd8357..d992a4b7752 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue @@ -15,7 +15,7 @@ import $ from 'jquery'; import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; import { __ } from '~/locale'; -import Flash from '~/flash'; +import { deprecatedCreateFlash as Flash } from '~/flash'; import axios from '~/lib/utils/axios_utils'; import eventHub from '../../event_hub'; import Icon from '~/vue_shared/components/icon.vue'; diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue index b6eff2931d3..60cb697f1af 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue @@ -1,9 +1,9 @@ <script> import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui'; +import { debounce } from 'lodash'; import Api from '~/api'; import { FETCH_BRANCH_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../../constants'; -import createFlash from '~/flash'; -import { debounce } from 'lodash'; +import { deprecatedCreateFlash as createFlash } from '~/flash'; export default { components: { diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue index 64de6d2a053..d6ba5fcca85 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue @@ -1,9 +1,9 @@ <script> import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui'; +import { debounce } from 'lodash'; import Api from '~/api'; import { FETCH_TAG_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../../constants'; -import createFlash from '~/flash'; -import { debounce } from 'lodash'; +import { deprecatedCreateFlash as createFlash } from '~/flash'; export default { components: { diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue index b5aeb3fe9e0..dfa6d8c13a5 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue @@ -3,12 +3,12 @@ import { GlFilteredSearchToken, GlAvatar, GlFilteredSearchSuggestion, - GlDropdownDivider, + GlDeprecatedDropdownDivider, GlLoadingIcon, } from '@gitlab/ui'; -import Api from '~/api'; -import createFlash from '~/flash'; import { debounce } from 'lodash'; +import Api from '~/api'; +import { deprecatedCreateFlash as createFlash } from '~/flash'; import { ANY_TRIGGER_AUTHOR, FETCH_AUTHOR_ERROR_MESSAGE, @@ -21,7 +21,7 @@ export default { GlFilteredSearchToken, GlAvatar, GlFilteredSearchSuggestion, - GlDropdownDivider, + GlDeprecatedDropdownDivider, GlLoadingIcon, }, props: { @@ -94,7 +94,7 @@ export default { <gl-filtered-search-suggestion :value="$options.anyTriggerAuthor">{{ $options.anyTriggerAuthor }}</gl-filtered-search-suggestion> - <gl-dropdown-divider /> + <gl-deprecated-dropdown-divider /> <gl-loading-icon v-if="loading" /> <template v-else> |