diff options
11 files changed, 41 insertions, 53 deletions
diff --git a/app/assets/javascripts/environments/components/environment_external_url.vue b/app/assets/javascripts/environments/components/environment_external_url.vue index 7446196de13..1e8a892c0b8 100644 --- a/app/assets/javascripts/environments/components/environment_external_url.vue +++ b/app/assets/javascripts/environments/components/environment_external_url.vue @@ -1,7 +1,7 @@ <script> +import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; import Icon from '~/vue_shared/components/icon.vue'; -import tooltip from '../../vue_shared/directives/tooltip'; -import { s__ } from '../../locale'; +import { s__ } from '~/locale'; /** * Renders the external url link in environments table. @@ -11,7 +11,7 @@ export default { Icon, }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, props: { externalUrl: { @@ -28,12 +28,11 @@ export default { </script> <template> <a - v-tooltip + v-gl-tooltip :title="title" :aria-label="title" :href="externalUrl" class="btn external-url" - data-container="body" target="_blank" rel="noopener noreferrer nofollow" > diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index 41f59447905..50b0e9747ee 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -1,7 +1,7 @@ <script> import Timeago from 'timeago.js'; import _ from 'underscore'; -import tooltip from '~/vue_shared/directives/tooltip'; +import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import { humanize } from '~/lib/utils/text_utility'; import Icon from '~/vue_shared/components/icon.vue'; @@ -36,7 +36,7 @@ export default { }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, props: { @@ -455,7 +455,7 @@ export default { class="gl-responsive-table-row" role="row"> <div - v-tooltip + v-gl-tooltip :title="model.name" class="table-section section-wrap section-15 text-truncate" role="gridcell" diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue index 26bec125445..7c723fa8979 100644 --- a/app/assets/javascripts/environments/components/environment_monitoring.vue +++ b/app/assets/javascripts/environments/components/environment_monitoring.vue @@ -2,9 +2,8 @@ /** * Renders the Monitoring (Metrics) link in environments table. */ -import { GlButton } from '@gitlab-org/gitlab-ui'; +import { GlButton, GlTooltipDirective } from '@gitlab-org/gitlab-ui'; import Icon from '~/vue_shared/components/icon.vue'; -import tooltip from '../../vue_shared/directives/tooltip'; export default { components: { @@ -12,7 +11,7 @@ export default { GlButton, }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, props: { monitoringUrl: { @@ -29,12 +28,11 @@ export default { </script> <template> <gl-button - v-tooltip + v-gl-tooltip :href="monitoringUrl" :title="title" :aria-label="title" class="monitoring-url d-none d-sm-none d-md-block" - data-container="body" rel="noopener noreferrer nofollow" variant="default" > diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue index 69856abc2d5..298469e6482 100644 --- a/app/assets/javascripts/environments/components/environment_rollback.vue +++ b/app/assets/javascripts/environments/components/environment_rollback.vue @@ -6,21 +6,18 @@ * Makes a post request when the button is clicked. */ import { s__ } from '~/locale'; +import { GlTooltipDirective, GlLoadingIcon } from '@gitlab-org/gitlab-ui'; import Icon from '~/vue_shared/components/icon.vue'; -import tooltip from '~/vue_shared/directives/tooltip'; import eventHub from '../event_hub'; -import { GlLoadingIcon } from '@gitlab-org/gitlab-ui'; export default { components: { Icon, GlLoadingIcon, }, - directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, - props: { retryUrl: { type: String, @@ -57,21 +54,21 @@ export default { </script> <template> <button - v-tooltip + v-gl-tooltip :disabled="isLoading" :title="title" type="button" class="btn d-none d-sm-none d-md-block" @click="onClick" > - <icon v-if="isLastDeployment" - name="repeat" /> + name="repeat" + /> <icon v-else - name="redo"/> - + name="redo" + /> <gl-loading-icon v-if="isLoading" /> </button> </template> diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue index a814b3405f5..327c96a93e9 100644 --- a/app/assets/javascripts/environments/components/environment_stop.vue +++ b/app/assets/javascripts/environments/components/environment_stop.vue @@ -5,49 +5,42 @@ */ import $ from 'jquery'; +import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; import Icon from '~/vue_shared/components/icon.vue'; import { s__ } from '~/locale'; import eventHub from '../event_hub'; import LoadingButton from '../../vue_shared/components/loading_button.vue'; -import tooltip from '../../vue_shared/directives/tooltip'; export default { components: { Icon, LoadingButton, }, - directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, - props: { environment: { type: Object, required: true, }, }, - data() { return { isLoading: false, }; }, - computed: { title() { return s__('Environments|Stop environment'); }, }, - mounted() { eventHub.$on('stopEnvironment', this.onStopEnvironment); }, - beforeDestroy() { eventHub.$off('stopEnvironment', this.onStopEnvironment); }, - methods: { onClick() { $(this.$el).tooltip('dispose'); @@ -63,12 +56,11 @@ export default { </script> <template> <loading-button - v-tooltip + v-gl-tooltip :loading="isLoading" :title="title" :aria-label="title" container-class="btn btn-danger d-none d-sm-none d-md-block" - data-container="body" data-toggle="modal" data-target="#stop-environment-modal" @click="onClick" diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue index 350417e5ad0..b8b909f350c 100644 --- a/app/assets/javascripts/environments/components/environment_terminal_button.vue +++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue @@ -3,15 +3,15 @@ * Renders a terminal button to open a web terminal. * Used in environments table. */ +import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; import Icon from '~/vue_shared/components/icon.vue'; -import tooltip from '../../vue_shared/directives/tooltip'; export default { components: { Icon, }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, props: { terminalPath: { @@ -29,12 +29,11 @@ export default { </script> <template> <a - v-tooltip + v-gl-tooltip :title="title" :aria-label="title" :href="terminalPath" class="btn terminal-button d-none d-sm-none d-md-block" - data-container="body" > <icon name="terminal" /> </a> diff --git a/app/assets/javascripts/environments/components/stop_environment_modal.vue b/app/assets/javascripts/environments/components/stop_environment_modal.vue index 657cc8cd1aa..6397f6caf1b 100644 --- a/app/assets/javascripts/environments/components/stop_environment_modal.vue +++ b/app/assets/javascripts/environments/components/stop_environment_modal.vue @@ -1,7 +1,7 @@ <script> +import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; import GlModal from '~/vue_shared/components/gl_modal.vue'; import { s__, sprintf } from '~/locale'; -import tooltip from '~/vue_shared/directives/tooltip'; import LoadingButton from '~/vue_shared/components/loading_button.vue'; import eventHub from '../event_hub'; @@ -15,7 +15,7 @@ export default { }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, props: { @@ -67,7 +67,7 @@ export default { > Stopping <span - v-tooltip + v-gl-tooltip :title="environment.name" class="text-truncate ml-1 mr-1 flex-fill" >{{ environment.name }}</span> diff --git a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue index 8684005e0fb..766fc211bf5 100644 --- a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue +++ b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue @@ -1,5 +1,5 @@ <script> -import tooltip from '~/vue_shared/directives/tooltip'; +import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; import Icon from '~/vue_shared/components/icon.vue'; import { pluralize } from '~/lib/utils/text_utility'; import { __, sprintf } from '~/locale'; @@ -10,7 +10,7 @@ export default { Icon, }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, props: { file: { @@ -79,10 +79,8 @@ export default { <template> <span - v-tooltip + v-gl-tooltip.right :title="tooltipTitle" - data-container="body" - data-placement="right" class="file-changed-icon ml-auto" > <icon diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue index c60052fec50..6780254827f 100644 --- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue +++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue @@ -1,6 +1,6 @@ <script> +import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; import CiIcon from './ci_icon.vue'; -import tooltip from '../directives/tooltip'; /** * Renders CI Badge link with CI icon and status text based on * API response shared between all places where it is used. @@ -27,7 +27,7 @@ export default { CiIcon, }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, props: { status: { @@ -50,7 +50,7 @@ export default { </script> <template> <a - v-tooltip + v-gl-tooltip :href="status.details_path" :class="cssClass" :title="!showText ? status.text : ''" diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue index 151eee75d44..b1139f34e41 100644 --- a/app/assets/javascripts/vue_shared/components/commit.vue +++ b/app/assets/javascripts/vue_shared/components/commit.vue @@ -1,11 +1,11 @@ <script> +import { GlTooltipDirective } from '@gitlab-org/gitlab-ui'; import UserAvatarLink from './user_avatar/user_avatar_link.vue'; -import tooltip from '../directives/tooltip'; import Icon from '../../vue_shared/components/icon.vue'; export default { directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, components: { UserAvatarLink, @@ -124,11 +124,10 @@ export default { </div> <a - v-tooltip + v-gl-tooltip :href="commitRef.ref_url" :title="commitRef.name" class="ref-name" - data-container="body" > {{ commitRef.name }} </a> diff --git a/changelogs/unreleased/51259-ci-cd-tooltips.yml b/changelogs/unreleased/51259-ci-cd-tooltips.yml new file mode 100644 index 00000000000..fc0010dbeba --- /dev/null +++ b/changelogs/unreleased/51259-ci-cd-tooltips.yml @@ -0,0 +1,6 @@ +--- +title: Replaces tooltip directive with the new gl-tooltip directive for consistency + in some ci/cd code +merge_request: +author: +type: other |