Commit dd98ce27 authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Clement Ho

Replaces tooltip directive with gl-tooltip directive

parent bd3a793f
<script> <script>
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import Icon from '~/vue_shared/components/icon.vue'; 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. * Renders the external url link in environments table.
...@@ -11,7 +11,7 @@ export default { ...@@ -11,7 +11,7 @@ export default {
Icon, Icon,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
externalUrl: { externalUrl: {
...@@ -28,12 +28,11 @@ export default { ...@@ -28,12 +28,11 @@ export default {
</script> </script>
<template> <template>
<a <a
v-tooltip v-gl-tooltip
:title="title" :title="title"
:aria-label="title" :aria-label="title"
:href="externalUrl" :href="externalUrl"
class="btn external-url" class="btn external-url"
data-container="body"
target="_blank" target="_blank"
rel="noopener noreferrer nofollow" rel="noopener noreferrer nofollow"
> >
......
<script> <script>
import Timeago from 'timeago.js'; import Timeago from 'timeago.js';
import _ from 'underscore'; 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 UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
import { humanize } from '~/lib/utils/text_utility'; import { humanize } from '~/lib/utils/text_utility';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
...@@ -36,7 +36,7 @@ export default { ...@@ -36,7 +36,7 @@ export default {
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
...@@ -455,7 +455,7 @@ export default { ...@@ -455,7 +455,7 @@ export default {
class="gl-responsive-table-row" class="gl-responsive-table-row"
role="row"> role="row">
<div <div
v-tooltip v-gl-tooltip
:title="model.name" :title="model.name"
class="table-section section-wrap section-15 text-truncate" class="table-section section-wrap section-15 text-truncate"
role="gridcell" role="gridcell"
......
...@@ -2,9 +2,8 @@ ...@@ -2,9 +2,8 @@
/** /**
* Renders the Monitoring (Metrics) link in environments table. * 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 Icon from '~/vue_shared/components/icon.vue';
import tooltip from '../../vue_shared/directives/tooltip';
export default { export default {
components: { components: {
...@@ -12,7 +11,7 @@ export default { ...@@ -12,7 +11,7 @@ export default {
GlButton, GlButton,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
monitoringUrl: { monitoringUrl: {
...@@ -29,12 +28,11 @@ export default { ...@@ -29,12 +28,11 @@ export default {
</script> </script>
<template> <template>
<gl-button <gl-button
v-tooltip v-gl-tooltip
:href="monitoringUrl" :href="monitoringUrl"
:title="title" :title="title"
:aria-label="title" :aria-label="title"
class="monitoring-url d-none d-sm-none d-md-block" class="monitoring-url d-none d-sm-none d-md-block"
data-container="body"
rel="noopener noreferrer nofollow" rel="noopener noreferrer nofollow"
variant="default" variant="default"
> >
......
...@@ -6,21 +6,18 @@ ...@@ -6,21 +6,18 @@
* Makes a post request when the button is clicked. * Makes a post request when the button is clicked.
*/ */
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import { GlTooltipDirective, GlLoadingIcon } from '@gitlab-org/gitlab-ui';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import tooltip from '~/vue_shared/directives/tooltip';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
export default { export default {
components: { components: {
Icon, Icon,
GlLoadingIcon, GlLoadingIcon,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
retryUrl: { retryUrl: {
type: String, type: String,
...@@ -57,21 +54,21 @@ export default { ...@@ -57,21 +54,21 @@ export default {
</script> </script>
<template> <template>
<button <button
v-tooltip v-gl-tooltip
:disabled="isLoading" :disabled="isLoading"
:title="title" :title="title"
type="button" type="button"
class="btn d-none d-sm-none d-md-block" class="btn d-none d-sm-none d-md-block"
@click="onClick" @click="onClick"
> >
<icon <icon
v-if="isLastDeployment" v-if="isLastDeployment"
name="repeat" /> name="repeat"
/>
<icon <icon
v-else v-else
name="redo"/> name="redo"
/>
<gl-loading-icon v-if="isLoading" /> <gl-loading-icon v-if="isLoading" />
</button> </button>
</template> </template>
...@@ -5,49 +5,42 @@ ...@@ -5,49 +5,42 @@
*/ */
import $ from 'jquery'; import $ from 'jquery';
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import LoadingButton from '../../vue_shared/components/loading_button.vue'; import LoadingButton from '../../vue_shared/components/loading_button.vue';
import tooltip from '../../vue_shared/directives/tooltip';
export default { export default {
components: { components: {
Icon, Icon,
LoadingButton, LoadingButton,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
environment: { environment: {
type: Object, type: Object,
required: true, required: true,
}, },
}, },
data() { data() {
return { return {
isLoading: false, isLoading: false,
}; };
}, },
computed: { computed: {
title() { title() {
return s__('Environments|Stop environment'); return s__('Environments|Stop environment');
}, },
}, },
mounted() { mounted() {
eventHub.$on('stopEnvironment', this.onStopEnvironment); eventHub.$on('stopEnvironment', this.onStopEnvironment);
}, },
beforeDestroy() { beforeDestroy() {
eventHub.$off('stopEnvironment', this.onStopEnvironment); eventHub.$off('stopEnvironment', this.onStopEnvironment);
}, },
methods: { methods: {
onClick() { onClick() {
$(this.$el).tooltip('dispose'); $(this.$el).tooltip('dispose');
...@@ -63,12 +56,11 @@ export default { ...@@ -63,12 +56,11 @@ export default {
</script> </script>
<template> <template>
<loading-button <loading-button
v-tooltip v-gl-tooltip
:loading="isLoading" :loading="isLoading"
:title="title" :title="title"
:aria-label="title" :aria-label="title"
container-class="btn btn-danger d-none d-sm-none d-md-block" container-class="btn btn-danger d-none d-sm-none d-md-block"
data-container="body"
data-toggle="modal" data-toggle="modal"
data-target="#stop-environment-modal" data-target="#stop-environment-modal"
@click="onClick" @click="onClick"
......
...@@ -3,15 +3,15 @@ ...@@ -3,15 +3,15 @@
* Renders a terminal button to open a web terminal. * Renders a terminal button to open a web terminal.
* Used in environments table. * Used in environments table.
*/ */
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import tooltip from '../../vue_shared/directives/tooltip';
export default { export default {
components: { components: {
Icon, Icon,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
terminalPath: { terminalPath: {
...@@ -29,12 +29,11 @@ export default { ...@@ -29,12 +29,11 @@ export default {
</script> </script>
<template> <template>
<a <a
v-tooltip v-gl-tooltip
:title="title" :title="title"
:aria-label="title" :aria-label="title"
:href="terminalPath" :href="terminalPath"
class="btn terminal-button d-none d-sm-none d-md-block" class="btn terminal-button d-none d-sm-none d-md-block"
data-container="body"
> >
<icon name="terminal" /> <icon name="terminal" />
</a> </a>
......
<script> <script>
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import GlModal from '~/vue_shared/components/gl_modal.vue'; import GlModal from '~/vue_shared/components/gl_modal.vue';
import { s__, sprintf } from '~/locale'; import { s__, sprintf } from '~/locale';
import tooltip from '~/vue_shared/directives/tooltip';
import LoadingButton from '~/vue_shared/components/loading_button.vue'; import LoadingButton from '~/vue_shared/components/loading_button.vue';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
...@@ -15,7 +15,7 @@ export default { ...@@ -15,7 +15,7 @@ export default {
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
...@@ -67,7 +67,7 @@ export default { ...@@ -67,7 +67,7 @@ export default {
> >
Stopping Stopping
<span <span
v-tooltip v-gl-tooltip
:title="environment.name" :title="environment.name"
class="text-truncate ml-1 mr-1 flex-fill" class="text-truncate ml-1 mr-1 flex-fill"
>{{ environment.name }}</span> >{{ environment.name }}</span>
......
<script> <script>
import tooltip from '~/vue_shared/directives/tooltip'; import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import { pluralize } from '~/lib/utils/text_utility'; import { pluralize } from '~/lib/utils/text_utility';
import { __, sprintf } from '~/locale'; import { __, sprintf } from '~/locale';
...@@ -10,7 +10,7 @@ export default { ...@@ -10,7 +10,7 @@ export default {
Icon, Icon,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
file: { file: {
...@@ -79,10 +79,8 @@ export default { ...@@ -79,10 +79,8 @@ export default {
<template> <template>
<span <span
v-tooltip v-gl-tooltip.right
:title="tooltipTitle" :title="tooltipTitle"
data-container="body"
data-placement="right"
class="file-changed-icon ml-auto" class="file-changed-icon ml-auto"
> >
<icon <icon
......
<script> <script>
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import CiIcon from './ci_icon.vue'; import CiIcon from './ci_icon.vue';
import tooltip from '../directives/tooltip';
/** /**
* Renders CI Badge link with CI icon and status text based on * Renders CI Badge link with CI icon and status text based on
* API response shared between all places where it is used. * API response shared between all places where it is used.
...@@ -27,7 +27,7 @@ export default { ...@@ -27,7 +27,7 @@ export default {
CiIcon, CiIcon,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
status: { status: {
...@@ -50,7 +50,7 @@ export default { ...@@ -50,7 +50,7 @@ export default {
</script> </script>
<template> <template>
<a <a
v-tooltip v-gl-tooltip
:href="status.details_path" :href="status.details_path"
:class="cssClass" :class="cssClass"
:title="!showText ? status.text : ''" :title="!showText ? status.text : ''"
......
<script> <script>
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import UserAvatarLink from './user_avatar/user_avatar_link.vue'; import UserAvatarLink from './user_avatar/user_avatar_link.vue';
import tooltip from '../directives/tooltip';
import Icon from '../../vue_shared/components/icon.vue'; import Icon from '../../vue_shared/components/icon.vue';
export default { export default {
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
components: { components: {
UserAvatarLink, UserAvatarLink,
...@@ -124,11 +124,10 @@ export default { ...@@ -124,11 +124,10 @@ export default {
</div> </div>
<a <a
v-tooltip v-gl-tooltip
:href="commitRef.ref_url" :href="commitRef.ref_url"
:title="commitRef.name" :title="commitRef.name"
class="ref-name" class="ref-name"
data-container="body"
> >
{{ commitRef.name }} {{ commitRef.name }}
</a> </a>
......
---
title: Replaces tooltip directive with the new gl-tooltip directive for consistency
in some ci/cd code
merge_request:
author:
type: other
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment